diff --git a/package.json b/package.json index e46e9c8..0de6457 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "preview": "vite preview" }, "dependencies": { - "@uidotdev/usehooks": "^2.4.1", "gsap": "^3.12.5", "react": "^18.2.0", "react-device-detect": "^2.2.3", diff --git a/src/components/complexWingPage/SequenceWing.tsx b/src/components/complexWingPage/SequenceWing.tsx index 7ac522f..07b29da 100644 --- a/src/components/complexWingPage/SequenceWing.tsx +++ b/src/components/complexWingPage/SequenceWing.tsx @@ -5,7 +5,6 @@ import SkygardenDescription from "./SkygardenDescription"; import FloorSidebar from "./FloorSidebar/FloorSidebar"; import SkygardenSidebar from "./SkygardenSidebar/SkygardenSidebar"; import useWingSidebar from "../../store/useWingSidebar"; -import { useHover } from "@uidotdev/usehooks"; const descriptions: IDesctiptionFloor[] = [ { id: "0", floor: 31, wing: "East Wing" }, @@ -75,9 +74,9 @@ const SequenceWing = () => { const [currentFloor, setCurrentFloor] = useState( null ); + const [isWrapperHovered, setIsWrapperHovered] = useState(false); const [isSkygardenSidebar, setIsSkygardenSidebar] = useState(false); const [isFloorSidebar, setIsFloorSidebar] = useState(false); - const [ref, hovering] = useHover(); function handleResize() { setWidth(window.innerWidth); @@ -93,10 +92,22 @@ const SequenceWing = () => { const _currentFloor = descriptions.find((desc) => desc.id === id); if (!_currentFloor) return; setHoverCurrentFloor(_currentFloor); + setIsWrapperHovered(true); }; - const handleOnFloorMouseLeave = () => { - setHoverCurrentFloor(null); + // const handleOnFloorMouseLeave = () => { + // setHoverCurrentFloor(null); + // // setIsWrapperHovered(false); + // }; + + const handleOnWingWrapperMouseEnter = ( + e: React.MouseEvent + ) => { + (e as unknown as Event).stopPropagation(); + setIsWrapperHovered(true); + }; + const handleOnWingWrapperMouseLeave = () => { + setIsWrapperHovered(false); }; const handleOnFloorClick = () => { @@ -157,7 +168,7 @@ const SequenceWing = () => {
{ >
{ className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out ${ currentHoveredFloor?.floor !== skyGardenFloor && currentHoveredFloor && - hovering + isWrapperHovered ? "opacity-100" : "opacity-0" }`} @@ -219,8 +230,9 @@ const SequenceWing = () => { fill="none" xmlns="http://www.w3.org/2000/svg" className={`absolute top-0 left-0 duration-300 transition-opacity ease-in-out w-full h-full opacity-100 z-10 `} + onMouseOver={handleOnWingWrapperMouseLeave} > - {/* Крылья */} + {/* Подписи Крылья */} { /> + {/* Этажи */} { fill="none" xmlns="http://www.w3.org/2000/svg" // onMouseLeave={handleOnFloorMouseLeave} - onMouseOut={handleOnFloorMouseLeave} - className="opacity-0 absolute z-50" + // onMouseOut={handleOnFloorMouseLeave} + + onMouseOut={handleOnWingWrapperMouseLeave} + onMouseOver={handleOnWingWrapperMouseEnter} + className="opacity-0 absolute z-0" > { ref={leftWingRef} x={720} y={735} - className={`absolute transition-opacity duration-300 ease-in-out top-0 left-0 w-full h-full "z-10 opacity-100`} + className={`absolute transition-opacity duration-300 ease-in-out top-0 left-0 w-full h-full z-10 opacity-100`} >