map page scaling

client/src/components/complexWingPage/SequenceWing/SequenceWing.tsx

@@ -19,7 +19,6 @@ import { getFilteredApartments } from "../../../calc/getFilteredApartments";
 import LoaderModal from "../../modals/LoaderModal";
 import FloorNumbers from "./FloorNumbers";
 import WingSignatures from "./WingSignatures";
-import { isMobile } from "react-device-detect";
 import FloorsHighlighting from "./FloorsHighlighting";
 import MobileFloorDescription from "./MobileFloorDescription";
 import WingFloorModal from "../../modals/mobile/WingFloorModal";
@@ -125,14 +124,14 @@ const SequenceWing = () => {
       // >1072
       if (screenWidth > laptopWidth) {
         const _top = screenWidth / 2 - screenHeight / 2;
-        setMousePos([e.clientX - 384, e.clientY + Math.abs(_top) - 20]);
+        setMousePos([e.clientX + 1284, e.clientY + Math.abs(_top) + 40]);
       } else {
         // 640-1072
         if (screenWidth > mobileWidht) {
           const _top = screenHeight / 4;
           const _left = laptopWidth - screenWidth;
           setMousePos([
-            e.clientX - 440 + _left,
+            e.clientX - 640 + _left,
             e.clientY + Math.abs(_top) + 20,
           ]);
           // <640
@@ -149,43 +148,98 @@ const SequenceWing = () => {
       //detect currentFloor, current sidebar and apartment on floor
       if (!currentHoveredFloor && !currentHoveredApartments) return;
       setCurrentFloor(currentHoveredFloor);
-      if (!isMobile) {
-        setIsFloorSidebar(true);
-        setIsSkygardenSidebar(false);
-        setIsSidebar(true);
-      } else {
-        setIsDescriptionFloorMobile(true);
-        setCurrentFloor(null);
-      }
+      // if (!isMobile) {
+      //   setIsFloorSidebar(true);
+      //   setIsSkygardenSidebar(false);
+      //   setIsSidebar(true);
+      // } else {
+      setIsDescriptionFloorMobile(true);
+      setCurrentFloor(null);
+      // }
     }
   }
+  // function handleOnMouseDown(e: MouseEvent | any) {
+  //   const isFloorClicked = Boolean(e.target.dataset.id);
+  //   if (isFloorClicked) {
+  //     // detect mouse pos
+  //     const screenWidth = window.innerWidth;
+  //     const screenHeight = window.innerHeight;
+  //     // >1072
+  //     if (screenWidth > laptopWidth) {
+  //       const _top = screenWidth / 2 - screenHeight / 2;
+  //       setMousePos([e.clientX - 384, e.clientY + Math.abs(_top) - 20]);
+  //     } else {
+  //       // 640-1072
+  //       if (screenWidth > mobileWidht) {
+  //         const _top = screenHeight / 4;
+  //         const _left = laptopWidth - screenWidth;
+  //         setMousePos([
+  //           e.clientX - 440 + _left,
+  //           e.clientY + Math.abs(_top) + 20,
+  //         ]);
+  //         // <640
+  //       } else {
+  //         const _top = screenHeight / 2.5;
+  //         const _left = laptopWidth - screenWidth;
+  //         setMousePos([
+  //           e.clientX - 440 + _left,
+  //           e.clientY + Math.abs(_top) + 20,
+  //         ]);
+  //       }
+  //     }
+
+  //     //detect currentFloor, current sidebar and apartment on floor
+  //     if (!currentHoveredFloor && !currentHoveredApartments) return;
+  //     setCurrentFloor(currentHoveredFloor);
+  //     if (!isMobile) {
+  //       setIsFloorSidebar(true);
+  //       setIsSkygardenSidebar(false);
+  //       setIsSidebar(true);
+  //     } else {
+  //       setIsDescriptionFloorMobile(true);
+  //       setCurrentFloor(null);
+  //     }
+  //   }
+  // }
 
   function handleResize() {
     const screenWidth = window.innerWidth;
     const screenHeight = window.innerHeight;
-    // >1072
-    if (screenWidth > laptopWidth) {
-      setWidth(screenWidth);
-      setTop(screenWidth / 2 - screenHeight / 2);
-      setLeft(0);
-    } else {
-      // 640-1072
-      if (screenWidth > mobileWidht) {
-        const _top = screenHeight / 4;
-        setTop(_top);
-        // <640
-      } else {
-        const _top = screenHeight / 2.5;
-        setTop(_top);
-      }
-      const _left = laptopWidth - screenWidth;
-      const _width = screenWidth + _left * 2;
+    const _top = screenHeight / 4.5;
+    setTop(_top);
+    const _left = screenHeight - screenWidth;
+    const _width = screenHeight + _left;
 
-      setWidth(_width);
-      setLeft(_left);
-    }
+    setWidth(_width);
+    setLeft(_left);
   }
 
+  // function handleResize() {
+  //   const screenWidth = window.innerWidth;
+  //   const screenHeight = window.innerHeight;
+  //   // >1072
+  //   if (screenWidth > laptopWidth) {
+  //     setWidth(screenWidth);
+  //     setTop(screenWidth / 2 - screenHeight / 2);
+  //     setLeft(0);
+  //   } else {
+  //     // 640-1072
+  //     if (screenWidth > mobileWidht) {
+  //       const _top = screenHeight / 4;
+  //       setTop(_top);
+  //       // <640
+  //     } else {
+  //       const _top = screenHeight / 2.5;
+  //       setTop(_top);
+  //     }
+  //     const _left = laptopWidth - screenWidth;
+  //     const _width = screenWidth + _left * 2;
+
+  //     setWidth(_width);
+  //     setLeft(_left);
+  //   }
+  // }
+
   const handleOnExploreFloorClick = (
     e: MouseEvent<Element, MouseEvent<Element, MouseEvent>> | any
   ) => {
@@ -280,13 +334,13 @@ const SequenceWing = () => {
     sortList,
   ]);
 
-  useEffect(() => {
-    if (isLoading) {
-      setModal(<LoaderModal />);
-    } else {
-      setModal(null);
-    }
-  }, [isLoading, setModal]);
+  // useEffect(() => {
+  //   if (isLoading) {
+  //     setModal(<LoaderModal />);
+  //   } else {
+  //     setModal(null);
+  //   }
+  // }, [isLoading, setModal]);
 
   return (
     <div className="absolute left-0 overflow-hidden h-screen w-screen select-none ">
@@ -296,9 +350,7 @@ const SequenceWing = () => {
           width: `${width}px`,
           height: `${width}px`,
           top: `-${top}px`,
-          left: `${
-            isSkygardenSidebar || isFloorSidebar ? "-25%" : `-${left}px`
-          }`,
+          left: `-${left}px`,
         }}
       >
         {/*  */}