wip

Author: osvaldasvalutis

src/components/button/index.module.css

@@ -15,8 +15,8 @@
   border-style: solid;
   border-radius: var(--fu-component-button-border-radius);
   box-shadow: var(--fu-component-button-box-shadow);
-  outline-offset: emify(6);
-  outline-color: var(--color-active);
+  outline-offset: var(--fu-component-button-outline-offset, emify(6));
+  outline-color: var(--fu-component-button-outline-color, --color-active);
 
   &[disabled] {
     cursor: not-allowed;

src/components/maplibre-ruler/index.js

@@ -1,4 +1,7 @@
-import { useCallback, useEffect, useState } from "react"
+// TODO:
+// - custom cursors and/or descriptional tooltips on hover for points
+
+import { useCallback, useEffect, useRef, useState } from "react"
 import { Source, Layer, useMap } from "react-map-gl/maplibre"
 import turfLength from "@turf/length"
 import {
@@ -13,18 +16,15 @@ import { generateMapLibreId } from "../../js/maplibre"
 export default function MaplibreRuler({ onLengthUpdate }) {
   const { map } = useMap()
   const [geojson, setGeojson] = useState(turfFeatureCollection([]))
+  const projectionCoordsRef = useRef([])
 
-  const cssCustomProps = useCssCustomProperties([
-    `--color-black`,
-    `--color-white`,
-  ])
+  const cssCustomProps = useCssCustomProperties([`--color-black`])
 
   const mapClick = useCallback(
     (e) => {
       const features = map.queryRenderedFeatures(e.point, {
         layers: [`fu-ruler-points`],
       })
-
       const newGeojson = structuredClone(geojson)
 
       // remove the line as it's always the last feature
@@ -54,19 +54,39 @@ export default function MaplibreRuler({ onLengthUpdate }) {
           onLengthUpdate(turfLength(lineString, { units: `kilometers` }))
       } else onLengthUpdate?.(0)
 
+      // picking up the last point feature (the last in array is reserved for line)
+      projectionCoordsRef.current =
+        newGeojson.features[
+          newGeojson.features.length >= 3
+            ? newGeojson.features.length - 2
+            : newGeojson.features.length - 1
+        ]?.geometry.coordinates || []
+
       setGeojson(newGeojson)
     },
     [geojson, map, onLengthUpdate]
   )
 
   const mapMouseMove = useCallback(
     (e) => {
-      // TODO: implement projection
       const features = map.queryRenderedFeatures(e.point, {
         layers: [`fu-ruler-points`],
       })
 
       map.getCanvas().style.cursor = features.length ? `pointer` : `crosshair`
+
+      const projectionFeatures = []
+      if (!features.length && projectionCoordsRef.current.length)
+        projectionFeatures.push(
+          turfLineString([
+            projectionCoordsRef.current,
+            [e.lngLat.lng, e.lngLat.lat],
+          ])
+        )
+
+      map
+        .getSource(`fu-ruler-projection`)
+        .setData(turfFeatureCollection(projectionFeatures))
     },
     [map]
   )
@@ -86,8 +106,24 @@ export default function MaplibreRuler({ onLengthUpdate }) {
 
   return (
     <>
+      <Source
+        id="fu-ruler-projection"
+        type="geojson"
+        data={turfFeatureCollection([])}
+      />
+
       <Source id="fu-ruler" type="geojson" data={geojson} />
 
+      <Layer
+        source="fu-ruler-projection"
+        type="line"
+        paint={{
+          "line-color": cssCustomProps[`--color-black`],
+          "line-width": 3,
+          "line-dasharray": [1, 1],
+        }}
+      />
+
       <Layer
         source="fu-ruler"
         id="fu-ruler-points"