upstream pull + signIn/Up

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

@@ -1,103 +1,109 @@
-import React, { useEffect, useState, useRef } from "react";
-import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
-import Panel from "./Panel";
-import AddButtons from "./AddButtons";
-import { useSelectedZoneStore } from "../../../store/useZoneStore";
-import DisplayZone from "./DisplayZone";
-
-type Side = "top" | "bottom" | "left" | "right";
-
-interface Widget {
-  id: string;
-  type: string;
-  title: string;
-  panel: Side;
-  data: any;
-}
-
-const RealTimeVisulization: React.FC = () => {
-  const [hiddenPanels, setHiddenPanels] = React.useState<Side[]>([]);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [zonesData, setZonesData] = useState<{
-    [key: string]: {
-      activeSides: Side[];
-      panelOrder: Side[];
-      lockedPanels: Side[];
-      widgets: Widget[];
-    };
-  }>({
-    "Manufacturing unit": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Assembly unit": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    "Packing unit": {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    Warehouse: {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-    Inventory: {
-      activeSides: [],
-      panelOrder: [],
-      lockedPanels: [],
-      widgets: [],
-    },
-  });
-
-  const { isPlaying } = usePlayButtonStore();
-
-  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
-  useEffect(() => {
-    setZonesData((prev) => ({
-      ...prev,
-      [selectedZone.zoneName]: selectedZone,
-    }));
-  }, [selectedZone]);
-
-  return (
-    <div
-      ref={containerRef}
-      id="real-time-vis-canvas"
-      className="realTime-viz canvas"
-      style={{
-        height: isPlaying ? "100vh" : "",
-        width: isPlaying ? "100%" : "",
-        left: isPlaying ? "0%" : "",
-      }}
-    >
-      <DisplayZone
-        zonesData={zonesData}
-        selectedZone={selectedZone}
-        setSelectedZone={setSelectedZone}
-      />
-
-      {!isPlaying && (
-        <AddButtons
-          hiddenPanels={hiddenPanels}
-          setHiddenPanels={setHiddenPanels}
-          selectedZone={selectedZone}
-          setSelectedZone={setSelectedZone}
-        />
-      )}
-
-      <Panel selectedZone={selectedZone} setSelectedZone={setSelectedZone} />
-    </div>
-  );
-};
-
-export default RealTimeVisulization;
-
+import React, { useEffect, useState, useRef } from "react";
+import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
+import Panel from "./Panel";
+import AddButtons from "./AddButtons";
+import { useSelectedZoneStore } from "../../../store/useZoneStore";
+import DisplayZone from "./DisplayZone";
+import Scene from "../../../modules/scene/scene";
+
+type Side = "top" | "bottom" | "left" | "right";
+
+interface Widget {
+  id: string;
+  type: string;
+  title: string;
+  panel: Side;
+  data: any;
+}
+
+const RealTimeVisulization: React.FC = () => {
+  const [hiddenPanels, setHiddenPanels] = React.useState<Side[]>([]);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [zonesData, setZonesData] = useState<{
+    [key: string]: {
+      activeSides: Side[];
+      panelOrder: Side[];
+      lockedPanels: Side[];
+      widgets: Widget[];
+    };
+  }>({
+    "Manufacturing unit": {
+      activeSides: [],
+      panelOrder: [],
+      lockedPanels: [],
+      widgets: [],
+    },
+    "Assembly unit": {
+      activeSides: [],
+      panelOrder: [],
+      lockedPanels: [],
+      widgets: [],
+    },
+    "Packing unit": {
+      activeSides: [],
+      panelOrder: [],
+      lockedPanels: [],
+      widgets: [],
+    },
+    Warehouse: {
+      activeSides: [],
+      panelOrder: [],
+      lockedPanels: [],
+      widgets: [],
+    },
+    Inventory: {
+      activeSides: [],
+      panelOrder: [],
+      lockedPanels: [],
+      widgets: [],
+    },
+  });
+
+  const { isPlaying } = usePlayButtonStore();
+
+  const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+  useEffect(() => {
+    setZonesData((prev) => ({
+      ...prev,
+      [selectedZone.zoneName]: selectedZone,
+    }));
+  }, [selectedZone]);
+
+  return (
+    <div
+      ref={containerRef}
+      id="real-time-vis-canvas"
+      className="realTime-viz canvas"
+      style={{
+        height: isPlaying ? "100vh" : "",
+        width: isPlaying ? "100%" : "",
+        left: isPlaying ? "0%" : "",
+      }}
+    >
+      <div
+        className="scene-container"
+        style={{ height: "100%", width: "100%" }}
+      >
+        <Scene />
+      </div>
+      <DisplayZone
+        zonesData={zonesData}
+        selectedZone={selectedZone}
+        setSelectedZone={setSelectedZone}
+      />
+
+      {!isPlaying && (
+        <AddButtons
+          hiddenPanels={hiddenPanels}
+          setHiddenPanels={setHiddenPanels}
+          selectedZone={selectedZone}
+          setSelectedZone={setSelectedZone}
+        />
+      )}
+
+      <Panel selectedZone={selectedZone} setSelectedZone={setSelectedZone} />
+    </div>
+  );
+};
+
+export default RealTimeVisulization;