chore(views/geomap): reintroduce map init

apps/client/src/widgets/type_widgets/geo_map.ts

@@ -78,15 +78,9 @@ const TPL = /*html*/`\
 
 const LOCATION_ATTRIBUTE = "geolocation";
 const CHILD_NOTE_ICON = "bx bx-pin";
-const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659];
-const DEFAULT_ZOOM = 2;
 
-interface MapData {
+
-    view?: {
+
-        center?: LatLng | [number, number];
-        zoom?: number;
-    };
-}
 
 // TODO: Deduplicate
 interface CreateChildResponse {
@@ -139,8 +133,6 @@ export default class GeoMapTypeWidget extends TypeWidget {
             throw new Error(t("geo-map.unable-to-load-map"));
         }
 
-        this.#restoreViewportAndZoom();
-
         // Restore markers.
         await this.#reloadMarkers();
 
@@ -165,24 +157,6 @@ export default class GeoMapTypeWidget extends TypeWidget {
         }
     }
 
-    async #restoreViewportAndZoom() {
-        const map = this.geoMapWidget.map;
-        if (!map || !this.note) {
-            return;
-        }
-        const blob = await this.note.getBlob();
-
-        let parsedContent: MapData = {};
-        if (blob && blob.content) {
-            parsedContent = JSON.parse(blob.content);
-        }
-
-        // Restore viewport position & zoom
-        const center = parsedContent.view?.center ?? DEFAULT_COORDINATES;
-        const zoom = parsedContent.view?.zoom ?? DEFAULT_ZOOM;
-        map.setView(center, zoom);
-    }
-
     async #reloadMarkers() {
         if (!this.note) {
             return;
@@ -384,7 +358,7 @@ export default class GeoMapTypeWidget extends TypeWidget {
 
     async doRefresh(note: FNote) {
         await this.geoMapWidget.refresh();
-        this.#restoreViewportAndZoom();
+        // this.#restoreViewportAndZoom();
         await this.#reloadMarkers();
     }
 

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

@@ -1,5 +1,6 @@
 import ViewMode, { ViewModeArgs } from "../view_mode.js";
 import L from "leaflet";
+import type { LatLng, Map } from "leaflet";
 
 const TPL = /*html*/`
 <div class="geo-view">
@@ -19,11 +20,21 @@ const TPL = /*html*/`
     <div class="geo-map-container"></div>
 </div>`;
 
-export default class GeoView extends ViewMode<{}> {
+interface MapData {
+    view?: {
+        center?: LatLng | [number, number];
+        zoom?: number;
+    };
+}
+
+const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659];
+const DEFAULT_ZOOM = 2;
+
+export default class GeoView extends ViewMode<MapData> {
 
     private $root: JQuery<HTMLElement>;
     private $container!: JQuery<HTMLElement>;
-    private map?: L.Map;
+    private map?: Map;
 
     constructor(args: ViewModeArgs) {
         super(args, "geoMap");
@@ -47,6 +58,26 @@ export default class GeoView extends ViewMode<{}> {
         }).addTo(map);
 
         this.map = map;
+
+        this.#onMapInitialized();
+    }
+
+    async #onMapInitialized() {
+        this.#restoreViewportAndZoom();
+    }
+
+    async #restoreViewportAndZoom() {
+        const map = this.map;
+        if (!map) {
+            return;
+        }
+
+        const parsedContent = await this.viewStorage.restore();
+
+        // Restore viewport position & zoom
+        const center = parsedContent?.view?.center ?? DEFAULT_COORDINATES;
+        const zoom = parsedContent?.view?.zoom ?? DEFAULT_ZOOM;
+        map.setView(center, zoom);
     }
 
     get isFullHeight(): boolean {

apps/client/src/widgets/view_widgets/view_mode.ts

@@ -49,7 +49,7 @@ export default abstract class ViewMode<T extends object> extends Component {
             return this._viewStorage;
         }
 
-        this._viewStorage = new ViewModeStorage(this.parentNote, this.viewType);
+        this._viewStorage = new ViewModeStorage<T>(this.parentNote, this.viewType);
         return this._viewStorage;
     }
 

apps/client/src/widgets/view_widgets/view_mode_storage.ts

@@ -38,6 +38,6 @@ export default class ViewModeStorage<T extends object> {
         }
 
         const attachmentData = await server.get<{ content: string } | null>(`attachments/${attachment.attachmentId}/blob`);
-        return JSON.parse(attachmentData?.content ?? "{}");
+        return JSON.parse(attachmentData?.content ?? "{}") as T;
     }
 }