Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-01 10:55:55 +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); saveConfig(viewConfig);
} }
}, 5000); }, 5000);
const [ currentZoom, setCurrentZoom ] = useState<number>(); console.log("Repaint!");
useEffect(() => { froca.getNotes(noteIds).then(setNotes) }, [ noteIds ]); useEffect(() => { froca.getNotes(noteIds).then(setNotes) }, [ noteIds ]);
@@ -126,12 +126,11 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
}} }}
onClick={onClick} onClick={onClick}
onContextMenu={onContextMenu} onContextMenu={onContextMenu}
onZoom={() => setCurrentZoom(apiRef.current?.getZoom())}
scale={hasScale} scale={hasScale}
> >
{notes.map(note => <NoteWrapper note={note} isReadOnly={isReadOnly} />)} {notes.map(note => <NoteWrapper note={note} isReadOnly={isReadOnly} />)}
</Map> </Map>
<GeoMapTouchBar zoom={currentZoom} map={apiRef.current} /> <GeoMapTouchBar map={apiRef.current} />
</div> </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 }) { function GeoMapTouchBar({ map }: { map: L.Map | null | undefined }) {
return map && ( 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> <TouchBar>
<TouchBarSlider <TouchBarSlider
label="Zoom" label="Zoom"
value={zoom ?? map.getZoom()} value={currentZoom}
minValue={map.getMinZoom()} minValue={map.getMinZoom()}
maxValue={map.getMaxZoom()} maxValue={map.getMaxZoom()}
onChange={(newValue) => map.setZoom(newValue)} onChange={(newValue) => {
setCurrentZoom(newValue);
map.setZoom(newValue);
}}
/> />
</TouchBar> </TouchBar>
) )