From 4fc3462ec9ebfc309abac81c897323736f12f6d7 Mon Sep 17 00:00:00 2001
From: KartoffelChips <jan@strassburger.org>
Date: Fri, 25 Oct 2024 19:48:02 +0200
Subject: [PATCH] hold command to freeze tooltip

---
 src/components/map/Map.tsx               | 8 ++++++--
 src/components/map/locations/Capital.tsx | 2 +-
 src/components/map/locations/City.tsx    | 2 +-
 src/components/map/locations/Poi.tsx     | 2 +-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx
index df10f1b..7873b74 100644
--- a/src/components/map/Map.tsx
+++ b/src/components/map/Map.tsx
@@ -112,10 +112,11 @@ const Map: React.FC<MapProps> = ({ imageUrl, regions = [], cities = [], pois = [
 
             return { tooltipX, tooltipY };
         }
-        return { tooltipX: clientX, tooltipY: clientY };
+        return { tooltipX: clientX + 10, tooltipY: clientY + 10 };
     };
 
     const handleMouseEnterRegion = (event: React.MouseEvent<SVGPolygonElement>, region: MapRegion) => {
+        if (event.metaKey || event.ctrlKey) return;
         const { tooltipX, tooltipY } = setDynamicTooltipPosition(event.pageX, event.pageY);
         setTooltip({
             visible: true,
@@ -126,6 +127,7 @@ const Map: React.FC<MapProps> = ({ imageUrl, regions = [], cities = [], pois = [
     };
 
     const handleMouseEnterLocation = (event: React.MouseEvent<SVGGElement>, location: MapLocation) => {
+        if (event.metaKey || event.ctrlKey) return;
         const { tooltipX, tooltipY } = setDynamicTooltipPosition(event.clientX, event.clientY);
         setTooltip({
             visible: true,
@@ -136,6 +138,7 @@ const Map: React.FC<MapProps> = ({ imageUrl, regions = [], cities = [], pois = [
     };
 
     const handleMouseMove = (event: React.MouseEvent) => {
+        if (event.metaKey || event.ctrlKey) return;
         const { tooltipX, tooltipY } = setDynamicTooltipPosition(event.clientX, event.clientY);
         setTooltip(prev => ({
             ...prev,
@@ -144,7 +147,8 @@ const Map: React.FC<MapProps> = ({ imageUrl, regions = [], cities = [], pois = [
         }));
     };
 
-    const handleMouseLeave = () => {
+    const handleMouseLeave = (event: React.MouseEvent) => {
+        if (event.metaKey || event.ctrlKey) return;
         setTooltip({ visible: false, x: 0, y: 0, content: null });
     };
 
diff --git a/src/components/map/locations/Capital.tsx b/src/components/map/locations/Capital.tsx
index 552da01..662c3f4 100644
--- a/src/components/map/locations/Capital.tsx
+++ b/src/components/map/locations/Capital.tsx
@@ -5,7 +5,7 @@ interface CapitalProps {
     city: MapLocation;
     onMouseEnter: (event: React.MouseEvent<SVGGElement>, city: MapLocation) => void;
     onMouseMove: (event: React.MouseEvent<SVGGElement>) => void;
-    onMouseLeave: () => void;
+    onMouseLeave: (event: React.MouseEvent) => void;
 }
 
 const Capital: React.FC<CapitalProps> = ({ key, city, onMouseEnter, onMouseMove, onMouseLeave }) => (
diff --git a/src/components/map/locations/City.tsx b/src/components/map/locations/City.tsx
index a1535a3..a17ef61 100644
--- a/src/components/map/locations/City.tsx
+++ b/src/components/map/locations/City.tsx
@@ -5,7 +5,7 @@ interface CityProps {
     city: MapLocation;
     onMouseEnter: (event: React.MouseEvent<SVGGElement>, city: MapLocation) => void;
     onMouseMove: (event: React.MouseEvent<SVGGElement>) => void;
-    onMouseLeave: () => void;
+    onMouseLeave: (event: React.MouseEvent) => void;
 }
 
 const City: React.FC<CityProps> = ({ key, city, onMouseEnter, onMouseMove, onMouseLeave }) => (
diff --git a/src/components/map/locations/Poi.tsx b/src/components/map/locations/Poi.tsx
index d4409c0..d69d14c 100644
--- a/src/components/map/locations/Poi.tsx
+++ b/src/components/map/locations/Poi.tsx
@@ -5,7 +5,7 @@ interface PoiProps {
     poi: MapLocation;
     onMouseEnter: (event: React.MouseEvent<SVGGElement>, city: MapLocation) => void;
     onMouseMove: (event: React.MouseEvent<SVGGElement>) => void;
-    onMouseLeave: () => void;
+    onMouseLeave: (event: React.MouseEvent) => void;
 }
 
 const City: React.FC<PoiProps> = ({ key, poi, onMouseMove, onMouseLeave, onMouseEnter }) => (