virtual

client/src/components/complexWingPage/FloorSidebar/ApartmentDescription.tsx

@@ -3,14 +3,16 @@ import VirtualTourIcon from "../../icons/VirtualTourIcon";
 interface ApartmentDescriptionProps {
   isVisible: boolean;
   is3DTourAvailable: boolean;
+  descRef: React.LegacyRef<HTMLDivElement>;
 }
 
 const ApartmentDescription = ({
   isVisible,
   is3DTourAvailable,
+  descRef,
 }: ApartmentDescriptionProps) => {
   return (
-    <div className="p-6 py-3">
+    <div className="p-6 py-3" ref={descRef}>
       <div
         className={`bg-white rounded-2xl p-6 flex flex-col text-subheadline-s relative text-nowrap desc-shadow py-2  ${
           isVisible ? "opacity-100" : "opacity-0"

client/src/components/complexWingPage/FloorSidebar/FloorSidebar.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { IDesctiptionFloor } from "../../../types/descriptionFloor";
 import ApartmentDescription from "./ApartmentDescription";
 import FloorWestWingHighlighting from "./FloorWestWingHighlighting";
@@ -22,6 +22,7 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
   const [isDescVisible, setIsDescVisible] = useState(false);
   const [is3DTourAvailable] = useState(true);
   const { setModal } = useModal();
+  const descRef = useRef(null);
 
   function handleOnApartmentClick(
     event: React.MouseEvent<SVGSVGElement, MouseEvent>
@@ -36,7 +37,12 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
 
   function handleMouseMove(e: MouseEvent) {
     const y = e.clientY - 170;
+    // if(!descRef && !descRef?.current){
+    //   const x = window.innerWidth / 2 - 54 - (descRef.current as React.LegacyRef<HTMLDivElement>).width;
+
+    // }
     const x = e.clientX - window.innerWidth / 2 - 50;
+
     setMousePos([x, y]);
   }
 
@@ -61,11 +67,13 @@ const FloorSidebar = ({ currentFloor, onMouseEnter }: IFloorSidebarProps) => {
         style={{ top: `${mousePos[1]}px`, left: `${mousePos[0]}px` }}
       >
         <ApartmentDescription
+          descRef={descRef}
           isVisible={isDescVisible}
           is3DTourAvailable={is3DTourAvailable}
         />
       </div>
       <div
+        ref={descRef}
         className="absolute h-full right-0 w-full z-30 bg-[#F3F3F2] p-6 flex flex-col top-[56px] "
         onMouseOver={onMouseEnter}
       >