fix hovering

2024-05-13 12:13:26 +05:00
parent 994a6ef244
commit 1888864763
3 changed files with 28 additions and 17 deletions
@@ -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",
@@ -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<IDesctiptionFloor | null>(
    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<SVGSVGElement>
+  ) => {
+    (e as unknown as Event).stopPropagation();
+    setIsWrapperHovered(true);
+  };
+  const handleOnWingWrapperMouseLeave = () => {
+    setIsWrapperHovered(false);
  };

  const handleOnFloorClick = () => {
@@ -157,7 +168,7 @@ const SequenceWing = () => {
      </div>

      <div
-        ref={ref}
+        // ref={ref}
        className="absolute left-0 transition-[left]"
        style={{
          width: `${width}px`,
@@ -168,7 +179,7 @@ const SequenceWing = () => {
      >
        <div
          className={`absolute z-40 top-0 left-0 transition-opacity duration-300 ease-in-out ${
-            currentHoveredFloor?.floor === skyGardenFloor && hovering
+            currentHoveredFloor?.floor === skyGardenFloor && isWrapperHovered
              ? "opacity-100"
              : "opacity-0"
          }`}
@@ -188,7 +199,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}
        >
-          {/* Крылья */}
+          {/* Подписи Крылья */}
          <svg
            className="absolute top-0 z-[999]"
            y={641}
@@ -253,6 +265,7 @@ const SequenceWing = () => {
            />
          </svg>

+          {/* Этажи */}
          <svg
            y={706.34}
            x={710.44}
@@ -262,8 +275,11 @@ const SequenceWing = () => {
            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"
          >
            <path
              d="M0.253906 10.0946V22.0006L0.109375 539.099C0.109375 539.099 0.109375 539.1 0.109375 539.1V551.322C0.109375 552.187 0.665774 552.955 1.48824 553.223L70.702 575.837C71.082 575.961 71.4905 575.969 71.8747 575.859L230.111 530.46C230.225 530.427 230.342 530.405 230.46 530.393L259.554 527.442L261.352 527.18L263.26 527.348L292.683 528.701C292.809 528.707 292.933 528.725 293.055 528.754L417.341 558.35C417.524 558.393 417.699 558.462 417.862 558.554L429.584 565.18C429.961 565.393 430.396 565.478 430.825 565.422L500.998 556.319C501.994 556.19 502.74 555.341 502.74 554.336V542.015L502.885 21.2703V8.37711C502.885 7.30962 502.046 6.43029 500.98 6.37939L432.623 3.11615C432.462 3.10843 432.3 3.12035 432.141 3.15165L417.729 5.99316L293.016 17.3347H263.497C262.392 17.3347 261.496 18.2301 261.496 19.3346C261.496 18.2301 260.601 17.3346 259.496 17.3346H230.427L69.6847 0.0280938C69.5341 0.0118866 69.3822 0.0128247 69.2319 0.0308899L2.01527 8.10891C1.01023 8.22969 0.253906 9.08235 0.253906 10.0946Z"
@@ -280,7 +296,7 @@ const SequenceWing = () => {
            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`}
          >
            <path
              onClick={handleOnFloorClick}
@@ -708,11 +708,6 @@
    "@typescript-eslint/types" "7.6.0"
    eslint-visitor-keys "^3.4.3"

-"@uidotdev/usehooks@^2.4.1":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@uidotdev/usehooks/-/usehooks-2.4.1.tgz#4b733eaeae09a7be143c6c9ca158b56cc1ea75bf"
-  integrity sha512-1I+RwWyS+kdv3Mv0Vmc+p0dPYH0DTRAo04HLyXReYBL9AeseDWUJyi4THuksBJcu9F0Pih69Ak150VDnqbVnXg==
-
 "@ungap/structured-clone@^1.2.0":
  version "1.2.0"
  resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz"
@@ -2036,6 +2031,7 @@ source-map-js@^1.2.0:
  integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==

 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+  name string-width-cjs
  version "4.2.3"
  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==