chore(react/collections/geomap): middle click

This commit is contained in:
Elian Doran 2025-09-04 16:24:01 +03:00
parent 3e2b777c30
commit ec40d20e6a
No known key found for this signature in database
3 changed files with 18 additions and 13 deletions

View File

@ -4,12 +4,13 @@ import { ViewModeProps } from "../interface";
import { useNoteLabel, useNoteProperty, useSpacedUpdate } from "../../react/hooks"; import { useNoteLabel, useNoteProperty, useSpacedUpdate } from "../../react/hooks";
import { DEFAULT_MAP_LAYER_NAME } from "./map_layer"; import { DEFAULT_MAP_LAYER_NAME } from "./map_layer";
import { divIcon, LatLng } from "leaflet"; import { divIcon, LatLng } from "leaflet";
import { useEffect, useMemo, useState } from "preact/hooks"; import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
import Marker from "./marker"; import Marker from "./marker";
import froca from "../../../services/froca"; import froca from "../../../services/froca";
import FNote from "../../../entities/fnote"; import FNote from "../../../entities/fnote";
import markerIcon from "leaflet/dist/images/marker-icon.png"; import markerIcon from "leaflet/dist/images/marker-icon.png";
import markerIconShadow from "leaflet/dist/images/marker-shadow.png"; import markerIconShadow from "leaflet/dist/images/marker-shadow.png";
import appContext from "../../../components/app_context";
const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659]; const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659];
const DEFAULT_ZOOM = 2; const DEFAULT_ZOOM = 2;
@ -67,6 +68,14 @@ function NoteMarker({ note }: { note: FNote }) {
return latLng && <Marker return latLng && <Marker
coordinates={latLng} coordinates={latLng}
icon={icon} icon={icon}
mouseDown={useCallback((e: MouseEvent) => {
// Middle click to open in new tab
if (e.button === 1) {
const hoistedNoteId = appContext.tabManager.getActiveContext()?.hoistedNoteId;
appContext.tabManager.openInNewTab(note.noteId, hoistedNoteId);
return true;
}
}, [ note.noteId ])}
/> />
} }

View File

@ -5,9 +5,10 @@ import { DivIcon, Icon, marker } from "leaflet";
export interface MarkerProps { export interface MarkerProps {
coordinates: [ number, number ]; coordinates: [ number, number ];
icon?: Icon | DivIcon; icon?: Icon | DivIcon;
mouseDown?: (e: MouseEvent) => void;
} }
export default function Marker({ coordinates, icon }: MarkerProps) { export default function Marker({ coordinates, icon, mouseDown }: MarkerProps) {
const parentMap = useContext(ParentMap); const parentMap = useContext(ParentMap);
useEffect(() => { useEffect(() => {
@ -16,10 +17,15 @@ export default function Marker({ coordinates, icon }: MarkerProps) {
const newMarker = marker(coordinates, { const newMarker = marker(coordinates, {
icon icon
}); });
if (mouseDown) {
newMarker.on("mousedown", e => mouseDown(e.originalEvent));
}
newMarker.addTo(parentMap); newMarker.addTo(parentMap);
return () => newMarker.removeFrom(parentMap); return () => newMarker.removeFrom(parentMap);
}, [ parentMap, coordinates ]); }, [ parentMap, coordinates, mouseDown ]);
return (<div />) return (<div />)
} }

View File

@ -22,16 +22,6 @@ export default function processNoteWithMarker(map: Map, note: FNote, location: s
}); });
} }
newMarker.on("mousedown", ({ originalEvent }) => {
// Middle click to open in new tab
if (originalEvent.button === 1) {
const hoistedNoteId = appContext.tabManager.getActiveContext()?.hoistedNoteId;
//@ts-ignore, fix once tab manager is ported.
appContext.tabManager.openInNewTab(note.noteId, hoistedNoteId);
return true;
}
});
newMarker.on("contextmenu", (e) => { newMarker.on("contextmenu", (e) => {
openContextMenu(note.noteId, e, isEditable); openContextMenu(note.noteId, e, isEditable);
}); });