119 lines
3.8 KiB
TypeScript
119 lines
3.8 KiB
TypeScript
/* eslint-disable react-hooks/exhaustive-deps */
|
|
import { MarkerComponentProps } from "react-image-marker";
|
|
import { useEffect, useState } from "react";
|
|
import { useTransformContext } from "react-zoom-pan-pinch";
|
|
import { markers } from "../../../consts/markers";
|
|
import useMarker from "../../../store/useMarker";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
const Marker = (props: MarkerComponentProps) => {
|
|
const { setHoveredMarker, hoveredMarker } = useMarker();
|
|
const { transformState } = useTransformContext();
|
|
const [markerScale, setMarkerScale] = useState(1);
|
|
const navigate = useNavigate();
|
|
const currentMarker = markers.find(
|
|
(marker) => marker.itemNumber === props.itemNumber
|
|
);
|
|
|
|
const handleOnMouseEnter = () => {
|
|
const hoveredMarker = currentMarker ? currentMarker : null;
|
|
setHoveredMarker(hoveredMarker);
|
|
};
|
|
|
|
const handleOnScroll = () => {
|
|
const scale = 1 / transformState.scale;
|
|
setMarkerScale(scale);
|
|
};
|
|
|
|
const handleOnMouseLeave = () => {
|
|
setHoveredMarker(null);
|
|
};
|
|
|
|
const handleOnClick = () => {
|
|
navigate(`../masterplan/${currentMarker?.itemNumber}`);
|
|
setHoveredMarker(null);
|
|
};
|
|
|
|
useEffect(() => {
|
|
const map = document.querySelector(".react-transform-wrapper");
|
|
handleOnScroll();
|
|
if (map) map.addEventListener("wheel", handleOnScroll);
|
|
|
|
return () => {
|
|
if (map) map.removeEventListener("wheel", handleOnScroll);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
className="relative transition-transform "
|
|
style={{ transform: `scale(${markerScale})` }}
|
|
>
|
|
<div
|
|
className={`flex items-end absolute w-[108px] top-[22px] right-[72px] transition-all duration-300 ease-in-out ${
|
|
hoveredMarker &&
|
|
hoveredMarker.itemNumber !== currentMarker?.itemNumber
|
|
? "brightness-[.7]"
|
|
: ""
|
|
} ${currentMarker?.isPopupLeft ? "block" : "hidden"}`}
|
|
>
|
|
<div className={`flex items-center py-2 `}>
|
|
<div className={`bg-white px-2 py-1 rounded-lg `}>
|
|
{currentMarker && (
|
|
<img src={currentMarker.popup} alt="1" width={108} height={54} />
|
|
)}
|
|
</div>
|
|
<div className="relative w-[5.5px] h-2">
|
|
<div className="w-0 h-0 border-y-4 border-l-8 border-r-0 border-transparent border-l-[#fff] absolute top-0 -left-[2.5px]" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
onClick={handleOnClick}
|
|
className={`flex gap-1 transition-all duration-300 ease-in-out cursor-pointer ${
|
|
hoveredMarker &&
|
|
hoveredMarker.itemNumber !== currentMarker?.itemNumber
|
|
? "brightness-[.7]"
|
|
: ""
|
|
}`}
|
|
>
|
|
<div
|
|
onMouseEnter={handleOnMouseEnter}
|
|
onMouseLeave={handleOnMouseLeave}
|
|
>
|
|
<img
|
|
id="marker"
|
|
src="/images/markers/1.png"
|
|
alt="1"
|
|
width={72}
|
|
height={98}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`flex items-end absolute w-[108px] top-[22px] left-[72px] transition-all duration-300 ease-in-out ${
|
|
currentMarker?.isPopupLeft ? "hidden" : "block"
|
|
} ${
|
|
hoveredMarker &&
|
|
hoveredMarker.itemNumber !== currentMarker?.itemNumber
|
|
? "brightness-[.7]"
|
|
: ""
|
|
}`}
|
|
>
|
|
<div className={`flex items-center py-2`}>
|
|
<div className="relative w-[5.5px] h-2">
|
|
<div className="w-0 h-0 border-y-4 border-r-8 border-l-0 border-transparent border-r-[#fff] absolute top-0 -right-[2.5px]" />
|
|
</div>
|
|
<div className={`bg-white px-2 py-1 rounded-lg`}>
|
|
{currentMarker && (
|
|
<img src={currentMarker.popup} alt="1" width={108} height={54} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Marker;
|