refactor(react/collections): reintroduce scale

apps/client/src/widgets/collections/geomap/index.tsx

@@ -35,6 +35,7 @@ enum State {
 export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewModeProps<MapData>) {
     const [ state, setState ] = useState(State.Normal);
     const [ layerName ] = useNoteLabel(note, "map:style");
+    const [ hasScale ] = useNoteLabelBoolean(note, "map:scale");
     const [ isReadOnly ] = useNoteLabelBoolean(note, "readOnly");
     const [ notes, setNotes ] = useState<FNote[]>([]);
     const spacedUpdate = useSpacedUpdate(() => {
@@ -96,6 +97,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
                 }}
                 onClick={onClick}
                 onContextMenu={onContextMenu}
+                scale={hasScale}
             >
                 {notes.map(note => <NoteMarker note={note} editable={!isReadOnly} />)}
             </Map>

apps/client/src/widgets/collections/geomap/map.tsx

@@ -1,9 +1,8 @@
 import { useEffect, useRef, useState } from "preact/hooks";
-import L, { LatLng, Layer, LeafletMouseEvent } from "leaflet";
+import L, { control, LatLng, Layer, LeafletMouseEvent } from "leaflet";
 import "leaflet/dist/leaflet.css";
 import { MAP_LAYERS } from "./map_layer";
 import { ComponentChildren, createContext } from "preact";
-import { map } from "jquery";
 
 export const ParentMap = createContext<L.Map | null>(null);
 
@@ -15,9 +14,10 @@ interface MapProps {
     children: ComponentChildren;
     onClick?: (e: LeafletMouseEvent) => void;
     onContextMenu?: (e: LeafletMouseEvent) => void;
+    scale: boolean;
 }
 
-export default function Map({ coordinates, zoom, layerName, viewportChanged, children, onClick, onContextMenu }: MapProps) {
+export default function Map({ coordinates, zoom, layerName, viewportChanged, children, onClick, onContextMenu, scale }: MapProps) {
     const mapRef = useRef<L.Map>(null);
     const containerRef = useRef<HTMLDivElement>(null);
 
@@ -103,6 +103,15 @@ export default function Map({ coordinates, zoom, layerName, viewportChanged, chi
         }
     }, [ mapRef, onContextMenu ]);
 
+    // Scale
+    useEffect(() => {
+        const map = mapRef.current;
+        if (!scale || !map) return;
+        const scaleControl  = control.scale();
+        scaleControl.addTo(map);
+        return () => scaleControl.remove();
+    }, [ mapRef, scale ]);
+
     return (
         <div
             ref={containerRef}

apps/client/src/widgets/view_widgets/geo_view/index.ts

@@ -39,14 +39,6 @@ export default class GeoView extends ViewMode<MapData> {
         args.$parent.append(this.$root);
     }
 
-    async renderMap() {
-        const layerName = this.parentNote.getLabelValue("map:style") ?? ;
-
-        if (this.parentNote.hasLabel("map:scale")) {
-            L.control.scale().addTo(map);
-        }
-    }
-
     async #onMapInitialized() {
         const map = this.map;
         if (!map) {