gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-28 10:08:52 +01:00
Code Issues Actions 14 Packages Projects Releases Wiki Activity

chore(react/collections/geomap): save state

Browse Source
This commit is contained in:
Elian Doran 2025-09-04 14:26:29 +03:00
parent 620e6012da
commit 2346230d36
No known key found for this signature in database
3 changed files with 41 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/client/src/widgets/collections/geomap/index.tsx
View File

@ -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>
);

18
apps/client/src/widgets/collections/geomap/map.tsx
View File

@ -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" />;
}

9
apps/client/src/widgets/view_widgets/geo_view/index.ts
View File

@ -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(),
zoom: map.getZoom()
center: ,
zoom:
}
};
}
this.viewStorage.store(data);
}
async #reloadMarkers() {