diff --git a/src/components/ComplexTopPanel.tsx b/src/components/complexPage/ComplexTopPanel.tsx
similarity index 75%
rename from src/components/ComplexTopPanel.tsx
rename to src/components/complexPage/ComplexTopPanel.tsx
index da17d07..1d58e60 100644
--- a/src/components/ComplexTopPanel.tsx
+++ b/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 = () => {
- {isFullMode ? (
+ {isFullscreen ? (
}
diff --git a/src/components/complexPage/SequenceSlider.tsx b/src/components/complexPage/SequenceSlider.tsx
index 72b062d..4363dc6 100644
--- a/src/components/complexPage/SequenceSlider.tsx
+++ b/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];
diff --git a/src/components/complexWingPage/SequenceWing.tsx b/src/components/complexWingPage/SequenceWing.tsx
index a850529..af796a7 100644
--- a/src/components/complexWingPage/SequenceWing.tsx
+++ b/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
(0);
const [top, setTop] = useState(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` }}
>
+
+ sdfds
+
{
/>