fix fullscreen

src/components/complexPage/ComplexTopPanel.tsx

@@ -1,21 +1,20 @@
-import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import useModal from "../store/useModal";
-import Button from "./Button";
-import FilterIcon from "./icons/FilterIcon";
-import HintIcon from "./icons/HintIcon";
-import LeftArrowSliderIcon from "./icons/LeftArrowSliderIcon";
-import ResizeIcon from "./icons/ResizeIcon";
-import HelpModal from "./modals/HelpModal";
-import MasterplanFilters from "./modals/MasterplanFilters";
-import InfoIcon from "./icons/InfoIcon";
-import useFullScreen from "../store/useFullScreen";
-import ActiveResizeIcon from "./icons/ActiveResizeIcon";
+import useModal from "../../store/useModal";
+import Button from "../Button";
+import FilterIcon from "../icons/FilterIcon";
+import HintIcon from "../icons/HintIcon";
+import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
+import ResizeIcon from "../icons/ResizeIcon";
+import HelpModal from "../modals/HelpModal";
+import MasterplanFilters from "../modals/MasterplanFilters";
+import InfoIcon from "../icons/InfoIcon";
+import useFullScreen from "../../store/useFullScreen";
+import ActiveResizeIcon from "../icons/ActiveResizeIcon";
 
 const ComplexTopPanel = () => {
-  const [isFullMode, setIsFullMode] = useState(false);
+  // const [isFullMode, setIsFullMode] = useState(false);
   const { setModal } = useModal();
-  const { onFullscreen } = useFullScreen();
+  const { onFullscreen, isFullscreen, setIsFullscreen } = useFullScreen();
   const navigate = useNavigate();
 
   const handleOnHelpClick = () => {
@@ -33,8 +32,8 @@ const ComplexTopPanel = () => {
   const handleOnFullScreenClick = () => {
     if (!onFullscreen) return;
 
-    setIsFullMode((prev) => !prev);
-    if (!isFullMode) {
+    setIsFullscreen(!isFullscreen);
+    if (!isFullscreen) {
       onFullscreen.enter();
     } else {
       onFullscreen.exit();
@@ -76,7 +75,7 @@ const ComplexTopPanel = () => {
           </p>
         </div>
         <div className="flex gap-2 col-span-2 col-start-11 justify-end">
-          {isFullMode ? (
+          {isFullscreen ? (
             <Button
               buttonType="fab"
               icon={<ActiveResizeIcon />}

src/components/complexPage/SequenceSlider.tsx

@@ -4,12 +4,12 @@ import { useState, useEffect } from "react";
 import { isMobile } from "react-device-detect";
 import { useSwipeable } from "react-swipeable";
 import { Transition } from "react-transition-group";
+import { useNavigate } from "react-router-dom";
 import Button from "../Button";
 import LeftArrowSliderIcon from "../icons/LeftArrowSliderIcon";
 import RightArrowSliderIcon from "../icons/RightArrowSliderIcon";
 import useSequence from "../../store/useSequence";
 import SequenceHighlighting from "./SequenceHighlighting";
-import { useNavigate } from "react-router-dom";
 
 const arrayLength = 360;
 const keyframes: number[] = [51, 178, 249, 339];

src/components/complexWingPage/SequenceWing.tsx

@@ -1,10 +1,12 @@
-import { useEffect, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 
 const SequenceWing = () => {
   const [width, setWidth] = useState<number>(0);
   const [top, setTop] = useState<number>(0);
   const [isLeftWingSelected, setIsLeftWingSelected] = useState(false);
   const [isRightWingSelected, setIsRightWingSelected] = useState(false);
+  const [leftDescriptionPos, setLeftDescriptionPos] = useState([0, 0]);
+  const leftWingRef = useRef(null);
 
   function handleResize() {
     setWidth(window.innerWidth);
@@ -21,6 +23,16 @@ const SequenceWing = () => {
     setIsLeftWingSelected(false);
   };
 
+  useLayoutEffect(() => {
+    if (!leftWingRef || !leftWingRef.current) return;
+    const leftWing = leftWingRef.current as SVGSVGElement;
+    const width = leftWing.width.animVal.value;
+    const height = leftWing.height.animVal.value;
+    // setLeftDescriptionPos()
+    // console.log("leftWing", leftWingRef.current.width.animVal.value);
+    // console.log("leftWing", leftWingRef.current.clientWidth);
+  }, [leftWingRef]);
+
   useEffect(() => {
     handleResize();
     window.addEventListener("resize", handleResize);
@@ -33,6 +45,11 @@ const SequenceWing = () => {
         className="absolute left-0"
         style={{ width: `${width}px`, height: `${width}px`, top: `-${top}px` }}
       >
+        <div
+          className={`bg-black absolute top-[calc(50%-265px+12px)] left-[calc(50%-206px-24px)] z-30`}
+        >
+          sdfds
+        </div>
         <img
           width={`${width}px`}
           height={`${width}px`}
@@ -89,6 +106,7 @@ const SequenceWing = () => {
             />
           </svg>
           <svg
+            ref={leftWingRef}
             x={695}
             y={610}
             className={`absolute transition-opacity duration-300 ease-in-out top-0 left-0 w-full h-full ${

src/components/header/Header/Layout.tsx

@@ -15,6 +15,7 @@ const Layout = () => {
   useEffect(() => {
     setOnFullscreen(onFullscreenHandle);
   }, []);
+
   return (
     <>
       <FullScreen handle={onFullscreenHandle}>

src/components/header/Navbar/Navbar.tsx

@@ -9,6 +9,13 @@ import { tabs } from "../../../consts/tabs";
 const Navbar = () => {
   const [selectedTab, setSelectedTab] = useState<Tab | null>(null);
   const location = useLocation();
+  const navigate = useNavigate();
+
+  const onTabClick = (tab: Tab) => {
+    setSelectedTab(tab);
+    navigate(tab.path);
+  };
+
   useEffect(() => {
     const pathname = location.pathname;
     const tab = tabs.find((tab) => tab.path === pathname);
@@ -19,11 +26,6 @@ const Navbar = () => {
       setSelectedTab(defaultTab);
     }
   }, [location.pathname]);
-  const navigate = useNavigate();
-  const onTabClick = (tab: Tab) => {
-    setSelectedTab(tab);
-    navigate(tab.path);
-  };
 
   return (
     <>

src/components/masterplanPage/TopPanel.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import useFullScreen from "../../store/useFullScreen";
 import useModal from "../../store/useModal";
 import Button from "../Button";
@@ -8,9 +7,8 @@ import HelpModal from "../modals/HelpModal";
 import ActiveResizeIcon from "../icons/ActiveResizeIcon";
 
 const TopPanel = () => {
-  const [isFullMode, setIsFullMode] = useState(false);
   const { setModal } = useModal();
-  const { onFullscreen } = useFullScreen();
+  const { onFullscreen, isFullscreen, setIsFullscreen } = useFullScreen();
 
   const handleOnHelpClick = () => {
     setModal(<HelpModal />);
@@ -19,8 +17,8 @@ const TopPanel = () => {
   const handleOnFullScreenClick = () => {
     if (!onFullscreen) return;
 
-    setIsFullMode((prev) => !prev);
-    if (!isFullMode) {
+    setIsFullscreen(!isFullscreen);
+    if (!isFullscreen) {
       onFullscreen.enter();
     } else {
       onFullscreen.exit();
@@ -35,7 +33,7 @@ const TopPanel = () => {
       <div
         className={`absolute top-[62px] left-0 z-20 w-full p-4 flex justify-end gap-2 select-none touch-none pointer-events-none`}
       >
-        {isFullMode ? (
+        {isFullscreen ? (
           <Button
             buttonType="fab"
             icon={<ActiveResizeIcon />}

src/pages/Complex.tsx

@@ -1,5 +1,5 @@
 import ComplexButtomPanel from "../components/ComplexButtomPanel";
-import ComplexTopPanel from "../components/ComplexTopPanel";
+import ComplexTopPanel from "../components/complexPage/ComplexTopPanel";
 import SequenceSlider from "../components/complexPage/SequenceSlider";
 
 const Complex = () => {

src/pages/ComplexWing.tsx

@@ -1,4 +1,4 @@
-import ComplexTopPanel from "../components/ComplexTopPanel";
+import ComplexTopPanel from "../components/complexPage/ComplexTopPanel";
 import ComplexButtomPanel from "../components/ComplexButtomPanel";
 import SequenceWing from "../components/complexWingPage/SequenceWing";
 

src/pages/Masterplan.tsx

@@ -10,6 +10,7 @@ const Masterplan = () => {
   useEffect(() => {
     setModal(<ZoomHint />);
   }, []);
+
   return (
     <div className="overflow-hidden h-screen w-screen">
       <TopPanel />

src/store/useFullScreen.tsx

@@ -2,14 +2,19 @@ import { create } from "zustand";
 import { FullScreenHandle } from "react-full-screen";
 
 interface ModalStore {
+  isFullscreen: boolean;
   onFullscreen: FullScreenHandle | null;
   setOnFullscreen: (onFullscreen: FullScreenHandle) => void;
+  setIsFullscreen: (isFullscreen: boolean) => void;
 }
 
 const useFullScreen = create<ModalStore>((set) => ({
+  isFullscreen: false,
   onFullscreen: null,
   setOnFullscreen: (onFullscreen) =>
     set(() => ({ onFullscreen: onFullscreen })),
+  setIsFullscreen: (isFullscreen) =>
+    set(() => ({ isFullscreen: isFullscreen })),
 }));
 
 export default useFullScreen;