chore(react/collections/geomap): save state

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

@@ -1,9 +1,10 @@
 import Map from "./map";
 import "./index.css";
 import { ViewModeProps } from "../interface";
-import { useNoteLabel } from "../../react/hooks";
+import { useNoteLabel, useSpacedUpdate } from "../../react/hooks";
 import { DEFAULT_MAP_LAYER_NAME } from "./map_layer";
 import { LatLng } from "leaflet";
+import { useEffect, useRef } from "preact/hooks";
 
 const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659];
 const DEFAULT_ZOOM = 2;
@@ -17,6 +18,19 @@ interface MapData {
 
 export default function GeoView({ note, viewStorage }: ViewModeProps<MapData>) {
     const [ layerName ] = useNoteLabel(note, "map:style");
+    const viewOptions = useRef<MapData["view"]>();
+    const spacedUpdate = useSpacedUpdate(() => {
+        viewStorage.store({
+            view: viewOptions.current
+        });
+    }, 5000);
+
+    // Clean up on note change.
+    useEffect(() => {
+        viewStorage.restore().then(data => {
+            viewOptions.current = data?.view;
+        });
+    }, [ note ]);
 
     return (
         <div className="geo-view">
@@ -24,6 +38,12 @@ export default function GeoView({ note, viewStorage }: ViewModeProps<MapData>) {
                 coordinates={DEFAULT_COORDINATES}
                 zoom={DEFAULT_ZOOM}
                 layerName={layerName ?? DEFAULT_MAP_LAYER_NAME}
+                viewportChanged={(coordinates, zoom) => {
+                    if (!viewOptions.current) return;
+                    viewOptions.current.center = coordinates;
+                    viewOptions.current.zoom = zoom;
+                    spacedUpdate.scheduleUpdate();
+                }}
             />
         </div>
     );

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

@@ -7,9 +7,10 @@ interface MapProps {
     coordinates: LatLng | [number, number];
     zoom: number;
     layerName: string;
+    viewportChanged: (coordinates: LatLng, zoom: number) => void;
 }
 
-export default function Map({ coordinates, zoom, layerName }: MapProps) {
+export default function Map({ coordinates, zoom, layerName, viewportChanged }: MapProps) {
     const mapRef = useRef<L.Map>(null);
     const containerRef = useRef<HTMLDivElement>(null);
 
@@ -60,5 +61,20 @@ export default function Map({ coordinates, zoom, layerName }: MapProps) {
         mapRef.current.setView(coordinates, zoom);
     }, [ mapRef, coordinates, zoom ]);
 
+    // Viewport callback.
+    useEffect(() => {
+        const map = mapRef.current;
+        if (!map) return;
+
+        const updateFn = () => viewportChanged(map.getBounds().getCenter(), map.getZoom());
+        map.on("moveend", updateFn);
+        map.on("zoomend", updateFn);
+
+        return () => {
+            map.off("moveend", updateFn);
+            map.off("zoomend", updateFn);
+        };
+    }, [ mapRef, viewportChanged ]);
+
     return <div ref={containerRef} className="geo-map-container" />;
 }

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

@@ -75,9 +75,6 @@ export default class GeoView extends ViewMode<MapData> {
         this.#restoreViewportAndZoom();
 
         const isEditable = !this.isReadOnly;
-        const updateFn = () => this.spacedUpdate.scheduleUpdate();
-        map.on("moveend", updateFn);
-        map.on("zoomend", updateFn);
         map.on("click", (e) => this.#onMapClicked(e))
         map.on("contextmenu", (e) => openMapContextMenu(this.parentNote.noteId, e, isEditable));
 
@@ -117,13 +114,13 @@ export default class GeoView extends ViewMode<MapData> {
         if (map) {
             data = {
                 view: {
-                    center: map.getBounds().getCenter(),
+                    center: ,
-                    zoom: map.getZoom()
+                    zoom:
                 }
             };
         }
 
-        this.viewStorage.store(data);
+
     }
 
     async #reloadMarkers() {