diff --git a/src/components/icons/CapitalIcon.tsx b/src/components/icons/CapitalIcon.tsx index 9e7b42c..56ff36b 100644 --- a/src/components/icons/CapitalIcon.tsx +++ b/src/components/icons/CapitalIcon.tsx @@ -1,11 +1,11 @@ const CapitalIcon = () => ( - - + + + stroke="#ffffff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> ); diff --git a/src/components/icons/DescriptionIcon.tsx b/src/components/icons/DescriptionIcon.tsx index ea164a3..94d21e2 100644 --- a/src/components/icons/DescriptionIcon.tsx +++ b/src/components/icons/DescriptionIcon.tsx @@ -1,10 +1,10 @@ const DescriptionIcon = () => ( - - + + - + ); diff --git a/src/components/icons/PopulationIcon.tsx b/src/components/icons/PopulationIcon.tsx index 3228514..238dabf 100644 --- a/src/components/icons/PopulationIcon.tsx +++ b/src/components/icons/PopulationIcon.tsx @@ -1,11 +1,11 @@ const PopulationIcon = () => ( - - + + + stroke="#ffffff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> ); diff --git a/src/components/icons/RulerIcon.tsx b/src/components/icons/RulerIcon.tsx index 1c33ce9..e596c2b 100644 --- a/src/components/icons/RulerIcon.tsx +++ b/src/components/icons/RulerIcon.tsx @@ -1,11 +1,11 @@ const RulerIcon = () => ( - - + + + stroke="#ffffff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> ); diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx index 0d863aa..df10f1b 100644 --- a/src/components/map/Map.tsx +++ b/src/components/map/Map.tsx @@ -18,6 +18,7 @@ interface MapProps { const Map: React.FC = ({ imageUrl, regions = [], cities = [], pois = [], capitals = [] }) => { const svgRef = useRef(null); const gRef = useRef(null); + const tooltipRef = useRef(null); // Ref for the tooltip const [tooltip, setTooltip] = useState<{ visible: boolean; x: number; y: number; content: JSX.Element | null }>({ visible: false, x: 0, @@ -45,9 +46,8 @@ const Map: React.FC = ({ imageUrl, regions = [], cities = [], pois = [ }; const handleMouseMove = (e: MouseEvent) => { - if (!isDragging) return; + if (!isDragging || scale <= 1) return; - // Increase deltaX and deltaY by the drag sensitivity factor const deltaX = (e.clientX - startX) * dragSensitivity; const deltaY = (e.clientY - startY) * dragSensitivity; setTranslate(prev => ({ @@ -59,13 +59,10 @@ const Map: React.FC = ({ imageUrl, regions = [], cities = [], pois = [ }; const handleMouseUp = () => setIsDragging(false); - const handleWheel = (e: WheelEvent) => { e.preventDefault(); const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1; const newScale = Math.min(Math.max(scale * zoomFactor, 1), 6); - - // If zooming out to the minimum scale, reset translation if (newScale === 1) { setTranslate({ x: 0, y: 0 }); } else { @@ -73,7 +70,6 @@ const Map: React.FC = ({ imageUrl, regions = [], cities = [], pois = [ svgPoint.x = e.clientX; svgPoint.y = e.clientY; const mousePoint = svgPoint.matrixTransform(svgElement.getScreenCTM()?.inverse()); - const newTranslateX = translate.x - (mousePoint.x - translate.x) * (newScale / scale - 1); const newTranslateY = translate.y - (mousePoint.y - translate.y) * (newScale / scale - 1); setTranslate({ x: newTranslateX, y: newTranslateY }); @@ -97,30 +93,54 @@ const Map: React.FC = ({ imageUrl, regions = [], cities = [], pois = [ } }, [isDragging, startX, startY, scale]); - // Tooltip handling remains unchanged + const setDynamicTooltipPosition = (clientX: number, clientY: number) => { + if (tooltipRef.current) { + const { width, height } = tooltipRef.current.getBoundingClientRect(); + // console.log("Width:", width, "Height:", height); + let tooltipX = clientX + 10; + let tooltipY = clientY + 10; + + if (tooltipX + width > window.innerWidth) { + // console.log("Horizontal overflow"); + tooltipX = clientX - width - 10; + } + + if (tooltipY + height > window.innerHeight) { + // console.log("Vertical overflow"); + tooltipY = clientY - height - 10; + } + + return { tooltipX, tooltipY }; + } + return { tooltipX: clientX, tooltipY: clientY }; + }; + const handleMouseEnterRegion = (event: React.MouseEvent, region: MapRegion) => { + const { tooltipX, tooltipY } = setDynamicTooltipPosition(event.pageX, event.pageY); setTooltip({ visible: true, - x: event.clientX + 10, - y: event.clientY + 10, + x: tooltipX, + y: tooltipY, content: , }); }; const handleMouseEnterLocation = (event: React.MouseEvent, location: MapLocation) => { + const { tooltipX, tooltipY } = setDynamicTooltipPosition(event.clientX, event.clientY); setTooltip({ visible: true, - x: event.clientX + 10, - y: event.clientY + 10, + x: tooltipX, + y: tooltipY, content: , }); }; const handleMouseMove = (event: React.MouseEvent) => { + const { tooltipX, tooltipY } = setDynamicTooltipPosition(event.clientX, event.clientY); setTooltip(prev => ({ ...prev, - x: event.clientX + 10, - y: event.clientY + 10, + x: tooltipX, + y: tooltipY, })); }; @@ -130,7 +150,7 @@ const Map: React.FC = ({ imageUrl, regions = [], cities = [], pois = [ return ( <> - + {regions.map((region, index) => ( @@ -142,7 +162,6 @@ const Map: React.FC = ({ imageUrl, regions = [], cities = [], pois = [ stroke="transparent" strokeWidth={4} onMouseEnter={(e) => handleMouseEnterRegion(e, region)} - onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave} /> ))} @@ -177,6 +196,7 @@ const Map: React.FC = ({ imageUrl, regions = [], cities = [], pois = [ {tooltip.visible && !isDragging && (