From ec40d20e6a9852b0f2b1170cc85ba88b2900fec4 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 4 Sep 2025 16:24:01 +0300
Subject: [PATCH] chore(react/collections/geomap): middle click

---
 apps/client/src/widgets/collections/geomap/index.tsx  | 11 ++++++++++-
 apps/client/src/widgets/collections/geomap/marker.tsx | 10 ++++++++--
 .../src/widgets/view_widgets/geo_view/markers.ts      | 10 ----------
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/apps/client/src/widgets/collections/geomap/index.tsx b/apps/client/src/widgets/collections/geomap/index.tsx
index 142690691..63142b365 100644
--- a/apps/client/src/widgets/collections/geomap/index.tsx
+++ b/apps/client/src/widgets/collections/geomap/index.tsx
@@ -4,12 +4,13 @@ import { ViewModeProps } from "../interface";
 import { useNoteLabel, useNoteProperty, useSpacedUpdate } from "../../react/hooks";
 import { DEFAULT_MAP_LAYER_NAME } from "./map_layer";
 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 froca from "../../../services/froca";
 import FNote from "../../../entities/fnote";
 import markerIcon from "leaflet/dist/images/marker-icon.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_ZOOM = 2;
@@ -67,6 +68,14 @@ function NoteMarker({ note }: { note: FNote }) {
     return latLng && <Marker
         coordinates={latLng}
         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 ])}
     />
 }
 
diff --git a/apps/client/src/widgets/collections/geomap/marker.tsx b/apps/client/src/widgets/collections/geomap/marker.tsx
index 559723b83..900ef8852 100644
--- a/apps/client/src/widgets/collections/geomap/marker.tsx
+++ b/apps/client/src/widgets/collections/geomap/marker.tsx
@@ -5,9 +5,10 @@ import { DivIcon, Icon, marker } from "leaflet";
 export interface MarkerProps {
     coordinates: [ number, number ];
     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);
 
     useEffect(() => {
@@ -16,10 +17,15 @@ export default function Marker({ coordinates, icon }: MarkerProps) {
         const newMarker = marker(coordinates, {
             icon
         });
+
+        if (mouseDown) {
+            newMarker.on("mousedown", e => mouseDown(e.originalEvent));
+        }
+
         newMarker.addTo(parentMap);
 
         return () => newMarker.removeFrom(parentMap);
-    }, [ parentMap, coordinates ]);
+    }, [ parentMap, coordinates, mouseDown ]);
 
     return (<div />)
 }
diff --git a/apps/client/src/widgets/view_widgets/geo_view/markers.ts b/apps/client/src/widgets/view_widgets/geo_view/markers.ts
index f5649551f..1a89d3c2f 100644
--- a/apps/client/src/widgets/view_widgets/geo_view/markers.ts
+++ b/apps/client/src/widgets/view_widgets/geo_view/markers.ts
@@ -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) => {
         openContextMenu(note.noteId, e, isEditable);
     });