Refactor DistanceLines component for improved label positioning and remove unused DistanceLine component

app/src/components/ui/componets/DisplayZone.tsx

@@ -15,7 +15,6 @@ interface DisplayZoneProps {
     [key: string]: {
       activeSides: Side[];
       panelOrder: Side[];
-
       lockedPanels: Side[];
       widgets: Widget[];
       zoneId: string;
@@ -27,7 +26,6 @@ interface DisplayZoneProps {
     zoneName: string;
     activeSides: Side[];
     panelOrder: Side[];
-
     lockedPanels: Side[];
     zoneId: string;
     zoneViewPortTarget: number[];
@@ -45,7 +43,6 @@ interface DisplayZoneProps {
       zoneName: string;
       activeSides: Side[];
       panelOrder: Side[];
-
       lockedPanels: Side[];
       zoneId: string;
       zoneViewPortTarget: number[];
@@ -66,19 +63,18 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   selectedZone,
   setSelectedZone,
 }) => {
-
-  // Ref for the container element
+  // Refs
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);
 
   // State to track overflow visibility
   const [showLeftArrow, setShowLeftArrow] = useState(false);
   const [showRightArrow, setShowRightArrow] = useState(false);
-  const { floatingWidget, setFloatingWidget } = useFloatingWidget()
+  const { floatingWidget, setFloatingWidget } = useFloatingWidget();
 
   // Function to calculate overflow state
   const updateOverflowState = useCallback(() => {
-    const container = containerRef.current;
-
+    const container = scrollContainerRef.current;
     if (container) {
       const isOverflowing = container.scrollWidth > container.clientWidth;
       const canScrollLeft = container.scrollLeft > 0;
@@ -91,59 +87,56 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   }, []);
 
   useEffect(() => {
-    const container = containerRef.current;
+    const container = scrollContainerRef.current;
+    if (!container) return;
 
-    if (container) {
-      // Initial calculation after the DOM has been rendered
-      const handleInitialRender = () => {
-        requestAnimationFrame(updateOverflowState);
-      };
+    // Initial calculation after the DOM has been rendered
+    const observer = new ResizeObserver(updateOverflowState);
+    observer.observe(container);
 
-      handleInitialRender();
+    // Update on scroll
+    const handleScroll = () => updateOverflowState();
+    container.addEventListener("scroll", handleScroll);
 
-      // Update on window resize or scroll
-      const handleResize = () => updateOverflowState();
-      const handleScroll = () => updateOverflowState();
+    // Add mouse wheel listener for horizontal scrolling
+    const handleWheel = (event: WheelEvent) => {
+      if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
+        event.preventDefault();
+        container.scrollBy({
+          left: event.deltaY * 2,
+          behavior: "smooth",
+        });
+      }
+    };
 
-      // Add mouse wheel listener for horizontal scrolling
-      const handleWheel = (event: WheelEvent) => {
-        event.preventDefault(); // Prevent default vertical scrolling
-        if (container) {
-          container.scrollBy({
-            left: event.deltaY * 2, // Translate vertical scroll to horizontal scroll
-            behavior: "smooth",
-          });
-        }
-      };
+    container.addEventListener("wheel", handleWheel, { passive: false });
 
-      container.addEventListener("scroll", handleScroll);
-      window.addEventListener("resize", handleResize);
-      container.addEventListener("wheel", handleWheel, { passive: false });
+    // Initial check
+    updateOverflowState();
 
-      return () => {
-        container.removeEventListener("scroll", handleScroll);
-        window.removeEventListener("resize", handleResize);
-        container.removeEventListener("wheel", handleWheel);
-      };
-    }
+    return () => {
+      observer.disconnect();
+      container.removeEventListener("scroll", handleScroll);
+      container.removeEventListener("wheel", handleWheel);
+    };
   }, [updateOverflowState]);
 
   // Handle scrolling with navigation arrows
   const handleScrollLeft = () => {
-    const container = containerRef.current;
+    const container = scrollContainerRef.current;
     if (container) {
       container.scrollBy({
-        left: -200, // Scroll left by 200px
+        left: -200,
         behavior: "smooth",
       });
     }
   };
 
   const handleScrollRight = () => {
-    const container = containerRef.current;
+    const container = scrollContainerRef.current;
     if (container) {
       container.scrollBy({
-        left: 200, // Scroll right by 200px
+        left: 200,
         behavior: "smooth",
       });
     }
@@ -152,24 +145,22 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   async function handleSelect2dZoneData(zoneId: string, zoneName: string) {
     try {
       if (selectedZone?.zoneId === zoneId) {
-
         return;
       }
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
-      // Fetch data from backend
       let response = await getSelect2dZoneData(zoneId, organization);
       console.log('response: ', response);
       let res = await getFloatingZoneData(zoneId, organization);
-      setFloatingWidget(res)
-      // Set the selected zone in the store
+      setFloatingWidget(res);
+      
       useDroppedObjectsStore.getState().setZone(zoneName, zoneId);
       if (Array.isArray(res)) {
         res.forEach((val) => {
           useDroppedObjectsStore.getState().addObject(zoneName, val);
         });
       }
-      // Update selected zone state
+      
       setSelectedZone({
         zoneName,
         activeSides: response.activeSides || [],
@@ -181,17 +172,14 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
         zoneViewPortPosition: response.viewPortposition || {},
       });
     } catch (error) {
-
-
+      console.error(error);
     }
   }
 
-
   return (
     <div
       ref={containerRef}
-      className={`zone-wrapper ${selectedZone?.activeSides?.includes("bottom") && "bottom"
-        }`}
+      className={`zone-wrapper ${selectedZone?.activeSides?.includes("bottom") ? "bottom" : ""}`}
     >
       {/* Left Arrow */}
       {showLeftArrow && (
@@ -200,28 +188,31 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
         </button>
       )}
 
-      {/* Zones Wrapper */}
-      {Object.keys(zonesData).length !== 0 ? (
-        <div ref={containerRef} className="zones-wrapper">
-          {Object.keys(zonesData).map((zoneName, index) => (
-            <div
-              key={index}
-              className={`zone ${selectedZone.zoneName === zoneName ? "active" : ""
-                }`}
-              onClick={() => {
-                handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName)
-              }}
-            >
-              {zoneName}
-            </div>
-          ))}
-        </div>
-      ) : (
-        <div className="no-zone">
-          <InfoIcon />
-          No zones? Create one!
-        </div>
-      )}
+      {/* Scrollable Zones Container */}
+      <div 
+        ref={scrollContainerRef} 
+        className="zones-wrapper"
+        style={{ overflowX: "auto", whiteSpace: "nowrap" }}
+      >
+        {Object.keys(zonesData).length !== 0 ? (
+          <>
+            {Object.keys(zonesData).map((zoneName, index) => (
+              <div
+                key={index}
+                className={`zone ${selectedZone.zoneName === zoneName ? "active" : ""}`}
+                onClick={() => handleSelect2dZoneData(zonesData[zoneName]?.zoneId, zoneName)}
+              >
+                {zoneName}
+              </div>
+            ))}
+          </>
+        ) : (
+          <div className="no-zone">
+            <InfoIcon />
+            No zones? Create one!
+          </div>
+        )}
+      </div>
 
       {/* Right Arrow */}
       {showRightArrow && (

app/src/components/ui/componets/DistanceLine.tsx

@@ -1,130 +0,0 @@
-import React from "react";
-
-interface DistanceLinesProps {
-  obj: {
-    position: {
-      top?: number | "auto";
-      left?: number | "auto";
-      right?: number | "auto";
-      bottom?: number | "auto";
-    };
-  };
-  activeEdges: {
-    vertical: "top" | "bottom";
-    horizontal: "left" | "right";
-  } | null;
-}
-
-const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
-  if (!activeEdges) return null;
-
-  return (
-    <>
-      {activeEdges.vertical === "top" &&
-        typeof obj.position.top === "number" && (
-          <div
-            className="distance-line top"
-            style={{
-              top: 0,
-              left:
-                activeEdges.horizontal === "left"
-                  ? `${(obj.position.left as number) + 125}px`
-                  : `calc(100% - ${(obj.position.right as number) + 125}px)`,
-              height: `${obj.position.top}px`,
-            }}
-          >
-            <span
-              className="distance-label"
-              style={{
-                position: "absolute",
-                top: "50%",
-                transform: "translate(-50%,0%)",
-              }}
-            >
-              {obj.position.top}px
-            </span>
-          </div>
-        )}
-
-      {activeEdges.vertical === "bottom" &&
-        typeof obj.position.bottom === "number" && (
-          <div
-            className="distance-line bottom"
-            style={{
-              bottom: 0,
-              left:
-                activeEdges.horizontal === "left"
-                  ? `${(obj.position.left as number) + 125}px`
-                  : `calc(100% - ${(obj.position.right as number) + 125}px)`,
-              height: `${obj.position.bottom}px`,
-            }}
-          >
-            <span
-              className="distance-label"
-              style={{
-                position: "absolute",
-                bottom: "50%",
-                transform: "translate(-50%,0%)",
-              }}
-            >
-              {obj.position.bottom}px
-            </span>
-          </div>
-        )}
-
-      {activeEdges.horizontal === "left" &&
-        typeof obj.position.left === "number" && (
-          <div
-            className="distance-line left"
-            style={{
-              left: 0,
-              top:
-                activeEdges.vertical === "top"
-                  ? `${(obj.position.top as number) + 41.5}px`
-                  : `calc(100% - ${(obj.position.bottom as number) + 41.5}px)`,
-              width: `${obj.position.left}px`,
-            }}
-          >
-            <span
-              className="distance-label"
-              style={{
-                position: "absolute",
-                left: "50%",
-                transform: "translate(0,-50%)",
-              }}
-            >
-              {obj.position.left}px
-            </span>
-          </div>
-        )}
-
-      {activeEdges.horizontal === "right" &&
-        typeof obj.position.right === "number" && (
-          <div
-            className="distance-line right"
-            style={{
-              right: 0,
-              top:
-                activeEdges.vertical === "top"
-                  ? `${(obj.position.top as number) + 41.5}px`
-                  : `calc(100% - ${(obj.position.bottom as number) + 41.5}px)`,
-              width: `${obj.position.right}px`,
-            }}
-          >
-            <span
-              className="distance-label"
-              style={{
-                position: "absolute",
-                right: "50%",
-                transform: "translate(0,-50%)",
-              }}
-            >
-              {obj.position.right}px
-            </span>
-          </div>
-        )}
-    </>
-  );
-};
-
-export default DistanceLines;

app/src/components/ui/componets/DistanceLines.tsx

@@ -20,21 +20,31 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
 
   return (
     <>
-      {activeEdges.vertical === "top" && typeof obj.position.top === "number" && (
-        <div
-          className="distance-line top"
-          style={{
-            top: 0,
-            left:
-              activeEdges.horizontal === "left"
-                ? `${(obj.position.left as number) + 125}px`
-                : `calc(100% - ${(obj.position.right as number) + 125}px)`,
-            height: `${obj.position.top}px`,
-          }}
-        >
-          <span className="distance-label">{obj.position.top}px</span>
-        </div>
-      )}
+      {activeEdges.vertical === "top" &&
+        typeof obj.position.top === "number" && (
+          <div
+            className="distance-line top"
+            style={{
+              top: 0,
+              left:
+                activeEdges.horizontal === "left"
+                  ? `${(obj.position.left as number) + 125}px`
+                  : `calc(100% - ${(obj.position.right as number) + 125}px)`,
+              height: `${obj.position.top}px`,
+            }}
+          >
+            <span
+              className="distance-label"
+              style={{
+                position: "absolute",
+                top: "50%",
+                transform: "translate(-50%,0%)",
+              }}
+            >
+              {obj.position.top}px
+            </span>
+          </div>
+        )}
 
       {activeEdges.vertical === "bottom" &&
         typeof obj.position.bottom === "number" && (
@@ -49,7 +59,16 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
               height: `${obj.position.bottom}px`,
             }}
           >
-            <span className="distance-label">{obj.position.bottom}px</span>
+            <span
+              className="distance-label"
+              style={{
+                position: "absolute",
+                bottom: "50%",
+                transform: "translate(-50%,0%)",
+              }}
+            >
+              {obj.position.bottom}px
+            </span>
           </div>
         )}
 
@@ -66,7 +85,16 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
               width: `${obj.position.left}px`,
             }}
           >
-            <span className="distance-label">{obj.position.left}px</span>
+            <span
+              className="distance-label"
+              style={{
+                position: "absolute",
+                left: "50%",
+                transform: "translate(0,-50%)",
+              }}
+            >
+              {obj.position.left}px
+            </span>
           </div>
         )}
 
@@ -83,11 +111,20 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
               width: `${obj.position.right}px`,
             }}
           >
-            <span className="distance-label">{obj.position.right}px</span>
+            <span
+              className="distance-label"
+              style={{
+                position: "absolute",
+                right: "50%",
+                transform: "translate(0,-50%)",
+              }}
+            >
+              {obj.position.right}px
+            </span>
           </div>
         )}
     </>
   );
 };
 
-export default DistanceLines;
+export default DistanceLines;