gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-30 19:19:03 +01:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

fix(react/collections/geomap): drag not always working

Browse Source
This commit is contained in:
Elian Doran 2025-09-05 10:32:26 +03:00
parent d3c66714c2
commit 3d88b3c74b
No known key found for this signature in database
2 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import Map from "./map"; import Map, { MapApi } from "./map";
import "./index.css"; import "./index.css";
import { ViewModeProps } from "../interface"; import { ViewModeProps } from "../interface";
import { useNoteBlob, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useNoteTreeDrag, useSpacedUpdate, useTriliumEvent } from "../../react/hooks"; import { useNoteBlob, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useNoteTreeDrag, useSpacedUpdate, useTriliumEvent } from "../../react/hooks";
@ -90,7 +90,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
// Dragging // Dragging
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const apiRef = useRef<L.Map>(null); const apiRef = useRef<MapApi>(null);
useNoteTreeDrag(containerRef, async (treeData, e) => { useNoteTreeDrag(containerRef, async (treeData, e) => {
const api = apiRef.current; const api = apiRef.current;
if (!note || !api) return; if (!note || !api) return;

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

@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from "preact/hooks"; import { useEffect, useImperativeHandle, useRef, useState } from "preact/hooks";
import L, { control, LatLng, Layer, LeafletMouseEvent } from "leaflet"; import L, { control, LatLng, Layer, LeafletMouseEvent } from "leaflet";
import "leaflet/dist/leaflet.css"; import "leaflet/dist/leaflet.css";
import { MAP_LAYERS } from "./map_layer"; import { MAP_LAYERS } from "./map_layer";
@ -8,7 +8,7 @@ import { useSyncedRef } from "../../react/hooks";
export const ParentMap = createContext<L.Map | null>(null); export const ParentMap = createContext<L.Map | null>(null);
interface MapProps { interface MapProps {
apiRef?: RefObject<L.Map>; apiRef?: RefObject<MapApi | null>;
containerRef?: RefObject<HTMLDivElement>; containerRef?: RefObject<HTMLDivElement>;
coordinates: LatLng | [number, number]; coordinates: LatLng | [number, number];
zoom: number; zoom: number;
@ -20,10 +20,23 @@ interface MapProps {
scale: boolean; scale: boolean;
} }
export default function Map({ coordinates, zoom, layerName, viewportChanged, children, onClick, onContextMenu, scale, apiRef: _apiRef, containerRef: _containerRef }: MapProps) { export interface MapApi {
const mapRef = useSyncedRef<L.Map>(_apiRef); containerPointToLatLng: L.Map["containerPointToLatLng"];
}
export default function Map({ coordinates, zoom, layerName, viewportChanged, children, onClick, onContextMenu, scale, apiRef, containerRef: _containerRef }: MapProps) {
const mapRef = useRef<L.Map>(null);
const containerRef = useSyncedRef<HTMLDivElement>(_containerRef); const containerRef = useSyncedRef<HTMLDivElement>(_containerRef);
useImperativeHandle(apiRef ?? null, () => {
const map = mapRef.current;
if (!map) return null;
return {
containerPointToLatLng: (point) => map.containerPointToLatLng(point)
} satisfies MapApi;
});
useEffect(() => { useEffect(() => {
if (!containerRef.current) return; if (!containerRef.current) return;
const mapInstance = L.map(containerRef.current, { const mapInstance = L.map(containerRef.current, {