Merge remote-tracking branch 'origin/main' into rtViz

2025-04-01 19:46:32 +05:30
parent b828cb2437 661edc27c6
commit 909a5755e0
14 changed files with 149 additions and 233 deletions
--- a/app/src/components/ui/componets/DisplayZone.tsx
+++ b/app/src/components/ui/componets/DisplayZone.tsx
@@ -18,7 +18,6 @@ interface DisplayZoneProps {
    [key: string]: {
      activeSides: Side[];
      panelOrder: Side[];
-
      lockedPanels: Side[];
      widgets: Widget[];
      zoneId: string;
@@ -30,7 +29,6 @@ interface DisplayZoneProps {
    zoneName: string;
    activeSides: Side[];
    panelOrder: Side[];
-
    lockedPanels: Side[];
    zoneId: string;
    zoneViewPortTarget: number[];
@@ -48,7 +46,6 @@ interface DisplayZoneProps {
      zoneName: string;
      activeSides: Side[];
      panelOrder: Side[];
-
      lockedPanels: Side[];
      zoneId: string;
      zoneViewPortTarget: number[];
@@ -71,6 +68,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
 }) => {
  // Ref for the container element
  const containerRef = useRef<HTMLDivElement | null>(null);
+  const scrollContainerRef = useRef<HTMLDivElement | null>(null);

  // State to track overflow visibility
  const [showLeftArrow, setShowLeftArrow] = useState(false);
@@ -79,8 +77,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({

  // 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;
@@ -93,59 +90,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",
      });
    }
@@ -158,7 +152,6 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
      }
      const email = localStorage.getItem("email") || "";
      const organization = email?.split("@")[1]?.split(".")[0];
-      // Fetch data from backend
      let response = await getSelect2dZoneData(zoneId, organization);

      let res = await getFloatingZoneData(zoneId, organization);
@@ -171,7 +164,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
          useDroppedObjectsStore.getState().addObject(zoneName, val);
        });
      }
-      // Update selected zone state
+      
      setSelectedZone({
        zoneName,
        activeSides: response.activeSides || [],
@@ -182,14 +175,15 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
        zoneViewPortTarget: response.viewPortCenter || {},
        zoneViewPortPosition: response.viewPortposition || {},
      });
-    } catch (error) { }
+    } 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 && (
@@ -198,28 +192,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 && (
--- a/app/src/components/ui/componets/DistanceLine.tsx
+++ b/app/src/components/ui/componets/DistanceLine.tsx
@@ -1,93 +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">{obj.position.top.toFixed()}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">{obj.position.bottom.toFixed()}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">{obj.position.left.toFixed()}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">{obj.position.right.toFixed()}px</span>
-          </div>
-        )}
-    </>
-  );
-};
-
-export default DistanceLines;
--- a/app/src/components/ui/componets/DistanceLines.tsx
+++ b/app/src/components/ui/componets/DistanceLines.tsx
@@ -20,26 +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"
+      {activeEdges.vertical === "top" &&
+        typeof obj.position.top === "number" && (
+          <div
+            className="distance-line top"
            style={{
-              position: 'absolute',
-              top: "50%"
+              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`,
            }}
-          >{obj.position.top}px</span>
-        </div>
-      )}
+          >
+            <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" && (
@@ -54,12 +59,16 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
              height: `${obj.position.bottom}px`,
            }}
          >
-            <span className="distance-label"
+            <span
+              className="distance-label"
              style={{
-                position: 'absolute',
-                bottom: "50%"
+                position: "absolute",
+                bottom: "50%",
+                transform: "translate(-50%,0%)",
              }}
-            >{obj.position.bottom}px</span>
+            >
+              {obj.position.bottom}px
+            </span>
          </div>
        )}

@@ -76,11 +85,16 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
              width: `${obj.position.left}px`,
            }}
          >
-            <span className="distance-label" style={{
-              position: 'absolute',
-              left: "50%"
-            }}
-            >{obj.position.left}px</span>
+            <span
+              className="distance-label"
+              style={{
+                position: "absolute",
+                left: "50%",
+                transform: "translate(0,-50%)",
+              }}
+            >
+              {obj.position.left}px
+            </span>
          </div>
        )}

@@ -97,15 +111,20 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
              width: `${obj.position.right}px`,
            }}
          >
-            <span className="distance-label" style={{
-              position: 'absolute',
-              right: "50%"
-            }}
-            >{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;
--- a/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
+++ b/app/src/components/ui/componets/DroppedFloatingWidgets.tsx
@@ -366,7 +366,6 @@ const DroppedObjects: React.FC = () => {
              <FleetEfficiencyComponent object={obj} />
            </>
          ) : null}
-
          <div
            className="icon kebab"
            ref={kebabRef}