Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-26 07:46:30 +01:00
Code Issues Packages Projects Releases Activity

refactor(react/touchbar): use more performant mechanism

Browse Source
This commit is contained in:
Elian Doran
2025-09-06 14:22:05 +03:00
parent 3e7f0ad0a8
commit 6bd548cc22
1 changed files with 22 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -46,7 +46,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
saveConfig(viewConfig);
}
}, 5000);
const [ currentZoom, setCurrentZoom ] = useState<number>();
console.log("Repaint!");
useEffect(() => { froca.getNotes(noteIds).then(setNotes) }, [ noteIds ]);
@@ -126,12 +126,11 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
}}
onClick={onClick}
onContextMenu={onContextMenu}
onZoom={() => setCurrentZoom(apiRef.current?.getZoom())}
scale={hasScale}
>
{notes.map(note => <NoteWrapper note={note} isReadOnly={isReadOnly} />)}
</Map>
<GeoMapTouchBar zoom={currentZoom} map={apiRef.current} />
<GeoMapTouchBar map={apiRef.current} />
</div>
);
}
@@ -245,15 +244,31 @@ function buildIcon(bxIconClass: string, colorClass?: string, title?: string, not
});
}
function GeoMapTouchBar({ zoom, map }: { zoom: number | undefined, map: L.Map | null | undefined }) {
return map && (
function GeoMapTouchBar({ map }: { map: L.Map | null | undefined }) {
const [ currentZoom, setCurrentZoom ] = useState<number>();
useEffect(() => {
if (!map) return;
function onZoomChanged() {
setCurrentZoom(map?.getZoom());
}
map.on("zoom", onZoomChanged);
return () => map.off("zoom", onZoomChanged);
}, [ map ]);
return map && currentZoom && (
<TouchBar>
<TouchBarSlider
label="Zoom"
value={zoom ?? map.getZoom()}
value={currentZoom}
minValue={map.getMinZoom()}
maxValue={map.getMaxZoom()}
onChange={(newValue) => map.setZoom(newValue)}
onChange={(newValue) => {
setCurrentZoom(newValue);
map.setZoom(newValue);
}}
/>
</TouchBar>
)