Merge branch 'realTimeVisulization' of http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev into realTimeVisulization

app/src/components/ui/Tools.tsx

@@ -17,7 +17,12 @@ import { handleSaveTemplate } from "../../modules/visualization/handleSaveTempla
 import { usePlayButtonStore } from "../../store/usePlayButtonStore";
 import useTemplateStore from "../../store/useTemplateStore";
 import { useSelectedZoneStore } from "../../store/useZoneStore";
-import { useAddAction, useDeleteModels, useSelectedWallItem, useToggleView } from "../../store/store";
+import {
+  useAddAction,
+  useDeleteModels,
+  useSelectedWallItem,
+  useToggleView,
+} from "../../store/store";
 
 const Tools: React.FC = () => {
   const { templates } = useTemplateStore();
@@ -39,7 +44,6 @@ const Tools: React.FC = () => {
   const { setAddAction } = useAddAction();
   const { setSelectedWallItem } = useSelectedWallItem();
 
-
   // Reset activeTool whenever activeModule changes
   useEffect(() => {
     setActiveTool(activeSubTool);
@@ -52,8 +56,7 @@ const Tools: React.FC = () => {
       setDeleteModels(false);
       setAddAction(null);
       setToggleView(true);
-    }
-    else {
+    } else {
       setToggleView(false);
     }
     setToggleThreeD(!toggleThreeD);
@@ -68,196 +71,225 @@ const Tools: React.FC = () => {
         setOpenDrop(false); // Close the dropdown
       }
     };
-
+    const handleEscKeyPress = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsPlaying(false); // Set isPlaying to false when Escape key is pressed
+      }
+    };
     document.addEventListener("mousedown", handleOutsideClick);
+    document.addEventListener("keydown", handleEscKeyPress); // Listen for ESC key
 
     return () => {
       document.removeEventListener("mousedown", handleOutsideClick);
+      document.removeEventListener("keydown", handleEscKeyPress); // Clean up the event listener
     };
   }, []);
 
   return (
-    <div className="tools-container">
-      <div className="drop-down-icons">
-        <div className="activeDropicon">
-          {activeSubTool == "cursor" && (
-            <div
-              className={`tool-button ${activeTool === "cursor" ? "active" : ""
-                }`}
-              onClick={() => {
-                setActiveTool("cursor");
-              }}
-            >
-              <CursorIcon isActive={activeTool === "cursor"} />
-            </div>
-          )}
-          {activeSubTool == "free-hand" && (
-            <div
-              className={`tool-button ${activeTool === "free-hand" ? "active" : ""
-                }`}
-              onClick={() => {
-                setActiveTool("free-hand");
-              }}
-            >
-              <FreeMoveIcon isActive={activeTool === "free-hand"} />
-            </div>
-          )}
-          {activeModule !== "visualization" && (
-            <div
-              className="drop-down-option-button"
-              ref={dropdownRef}
-              onClick={() => {
-                setOpenDrop(!openDrop);
-                console.log(openDrop);
-              }}
-            >
-              <ArrowIcon />
-              {openDrop && (
-                <div className="drop-down-container">
+    <>
+      {!isPlaying ? (
+        <>
+          <div className="tools-container">
+            <div className="drop-down-icons">
+              <div className="activeDropicon">
+                {activeSubTool == "cursor" && (
                   <div
-                    className="option-list"
+                    className={`tool-button ${
+                      activeTool === "cursor" ? "active" : ""
+                    }`}
                     onClick={() => {
-                      setOpenDrop(false);
                       setActiveTool("cursor");
-                      setActiveSubTool("cursor");
                     }}
                   >
-                    <div className="active-option">
-                      {activeSubTool === "cursor" && <TickIcon />}
-                    </div>
-                    <CursorIcon isActive={false} />
-                    <div className="option">Cursor</div>
+                    <CursorIcon isActive={activeTool === "cursor"} />
+                  </div>
+                )}
+                {activeSubTool == "free-hand" && (
+                  <div
+                    className={`tool-button ${
+                      activeTool === "free-hand" ? "active" : ""
+                    }`}
+                    onClick={() => {
+                      setActiveTool("free-hand");
+                    }}
+                  >
+                    <FreeMoveIcon isActive={activeTool === "free-hand"} />
+                  </div>
+                )}
+                {activeModule !== "visualization" && (
+                  <div
+                    className="drop-down-option-button"
+                    ref={dropdownRef}
+                    onClick={() => {
+                      setOpenDrop(!openDrop);
+                      console.log(openDrop);
+                    }}
+                  >
+                    <ArrowIcon />
+                    {openDrop && (
+                      <div className="drop-down-container">
+                        <div
+                          className="option-list"
+                          onClick={() => {
+                            setOpenDrop(false);
+                            setActiveTool("cursor");
+                            setActiveSubTool("cursor");
+                          }}
+                        >
+                          <div className="active-option">
+                            {activeSubTool === "cursor" && <TickIcon />}
+                          </div>
+                          <CursorIcon isActive={false} />
+                          <div className="option">Cursor</div>
+                        </div>
+                        <div
+                          className="option-list"
+                          onClick={() => {
+                            setOpenDrop(false);
+                            setActiveTool("free-hand");
+                            setActiveSubTool("free-hand");
+                          }}
+                        >
+                          <div className="active-option">
+                            {activeSubTool === "free-hand" && <TickIcon />}
+                          </div>
+                          <FreeMoveIcon isActive={false} />
+                          <div className="option">Free Hand</div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            </div>
+            {!toggleThreeD && activeModule === "builder" && (
+              <>
+                <div className="split"></div>
+                <div className="draw-tools">
+                  <div
+                    className={`tool-button ${
+                      activeTool === "draw-wall" ? "active" : ""
+                    }`}
+                    onClick={() => {
+                      setActiveTool("draw-wall");
+                    }}
+                  >
+                    <WallIcon isActive={activeTool === "draw-wall"} />
                   </div>
                   <div
-                    className="option-list"
+                    className={`tool-button ${
+                      activeTool === "draw-zone" ? "active" : ""
+                    }`}
                     onClick={() => {
-                      setOpenDrop(false);
-                      setActiveTool("free-hand");
-                      setActiveSubTool("free-hand");
+                      setActiveTool("draw-zone");
                     }}
                   >
-                    <div className="active-option">
-                      {activeSubTool === "free-hand" && <TickIcon />}
-                    </div>
-                    <FreeMoveIcon isActive={false} />
-                    <div className="option">Free Hand</div>
+                    <ZoneIcon isActive={activeTool === "draw-zone"} />
+                  </div>
+                  <div
+                    className={`tool-button ${
+                      activeTool === "draw-aisle" ? "active" : ""
+                    }`}
+                    onClick={() => {
+                      setActiveTool("draw-aisle");
+                    }}
+                  >
+                    <AsileIcon isActive={activeTool === "draw-aisle"} />
+                  </div>
+                  <div
+                    className={`tool-button ${
+                      activeTool === "draw-floor" ? "active" : ""
+                    }`}
+                    onClick={() => {
+                      setActiveTool("draw-floor");
+                    }}
+                  >
+                    <FloorIcon isActive={activeTool === "draw-floor"} />
                   </div>
                 </div>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-      {!toggleThreeD && activeModule === "builder" && (
-        <>
-          <div className="split"></div>
-          <div className="draw-tools">
-            <div
-              className={`tool-button ${activeTool === "draw-wall" ? "active" : ""
+              </>
+            )}
+            {activeModule === "simulation" && (
+              <>
+                <div className="split"></div>
+                <div className="draw-tools">
+                  <div
+                    className={`tool-button ${
+                      activeTool === "pen" ? "active" : ""
+                    }`}
+                    onClick={() => {
+                      setActiveTool("pen");
+                    }}
+                  >
+                    <PenIcon isActive={activeTool === "pen"} />
+                  </div>
+                </div>
+              </>
+            )}
+            {activeModule === "visualization" && (
+              <>
+                <div className="split"></div>
+                <div className="draw-tools">
+                  <div
+                    className={`tool-button`}
+                    onClick={() =>
+                      handleSaveTemplate({
+                        addTemplate,
+                        selectedZone,
+                        templates,
+                      })
+                    }
+                  >
+                    <SaveTemplateIcon isActive={false} />
+                  </div>
+                </div>
+              </>
+            )}
+            <div className="split"></div>
+            <div className="general-options">
+              <div
+                className={`tool-button ${
+                  activeTool === "comment" ? "active" : ""
                 }`}
-              onClick={() => {
-                setActiveTool("draw-wall");
-              }}
-            >
-              <WallIcon isActive={activeTool === "draw-wall"} />
-            </div>
-            <div
-              className={`tool-button ${activeTool === "draw-zone" ? "active" : ""
+                onClick={() => {
+                  setActiveTool("comment");
+                }}
+              >
+                <CommentIcon isActive={activeTool === "comment"} />
+              </div>
+              <div
+                className={`tool-button ${
+                  activeTool === "play" ? "active" : ""
                 }`}
-              onClick={() => {
-                setActiveTool("draw-zone");
-              }}
-            >
-              <ZoneIcon isActive={activeTool === "draw-zone"} />
+                onClick={() => {
+                  setIsPlaying(!isPlaying);
+                }}
+              >
+                <PlayIcon isActive={activeTool === "play"} />
+              </div>
             </div>
+            <div className="split"></div>
             <div
-              className={`tool-button ${activeTool === "draw-aisle" ? "active" : ""
-                }`}
-              onClick={() => {
-                setActiveTool("draw-aisle");
-              }}
+              className={`toggle-threed-button${
+                toggleThreeD ? " toggled" : ""
+              }`}
+              onClick={toggleSwitch}
             >
-              <AsileIcon isActive={activeTool === "draw-aisle"} />
-            </div>
-            <div
-              className={`tool-button ${activeTool === "draw-floor" ? "active" : ""
-                }`}
-              onClick={() => {
-                setActiveTool("draw-floor");
-              }}
-            >
-              <FloorIcon isActive={activeTool === "draw-floor"} />
+              <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
+                2d
+              </div>
+              <div className={`toggle-option${toggleThreeD ? " active" : ""}`}>
+                3d
+              </div>
             </div>
           </div>
         </>
+      ) : (
+        <div className="exitPlay" onClick={() => setIsPlaying(false)}>
+          X
+        </div>
       )}
-      {activeModule === "simulation" && (
-        <>
-          <div className="split"></div>
-          <div className="draw-tools">
-            <div
-              className={`tool-button ${activeTool === "pen" ? "active" : ""}`}
-              onClick={() => {
-                setActiveTool("pen");
-              }}
-            >
-              <PenIcon isActive={activeTool === "pen"} />
-            </div>
-          </div>
-        </>
-      )}
-      {activeModule === "visualization" && (
-        <>
-          <div className="split"></div>
-          <div className="draw-tools">
-            <div
-              className={`tool-button`}
-              onClick={() =>
-                handleSaveTemplate({
-                  addTemplate,
-                  selectedZone,
-                  templates,
-                })
-              }
-            >
-              <SaveTemplateIcon isActive={false} />
-            </div>
-          </div>
-        </>
-      )}
-      <div className="split"></div>
-      <div className="general-options">
-        <div
-          className={`tool-button ${activeTool === "comment" ? "active" : ""}`}
-          onClick={() => {
-            setActiveTool("comment");
-          }}
-        >
-          <CommentIcon isActive={activeTool === "comment"} />
-        </div>
-        <div
-          className={`tool-button ${activeTool === "play" ? "active" : ""}`}
-          onClick={() => {
-            setActiveTool("play");
-            setIsPlaying(!isPlaying);
-          }}
-        >
-          <PlayIcon isActive={activeTool === "play"} />
-        </div>
-      </div>
-      <div className="split"></div>
-      <div
-        className={`toggle-threed-button${toggleThreeD ? " toggled" : ""}`}
-        onClick={toggleSwitch}
-      >
-        <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>
-          2d
-        </div>
-        <div className={`toggle-option${toggleThreeD ? " active" : ""}`}>
-          3d
-        </div>
-      </div>
-    </div>
+    </>
   );
 };
 

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

@@ -210,5 +210,3 @@ const AddButtons: React.FC<ButtonsProps> = ({
 };
 
 export default AddButtons;
-
-

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

@@ -53,6 +53,8 @@ const Panel: React.FC<PanelProps> = ({
     [side in Side]?: { width: number; height: number };
   }>({});
 
+  const { isPlaying } = usePlayButtonStore();
+
   const getPanelStyle = useMemo(
     () => (side: Side) => {
       const currentIndex = selectedZone.panelOrder.indexOf(side);
@@ -61,7 +63,7 @@ const Panel: React.FC<PanelProps> = ({
       const rightActive = previousPanels.includes("right");
       const topActive = previousPanels.includes("top");
       const bottomActive = previousPanels.includes("bottom");
-      const panelSize = isPlaying ? 250 : 300;
+      const panelSize = isPlaying ? 300 : 210;
 
       switch (side) {
         case "top":
@@ -88,7 +90,7 @@ const Panel: React.FC<PanelProps> = ({
           return {};
       }
     },
-    [selectedZone.panelOrder]
+    [selectedZone.panelOrder, isPlaying]
   );
 
   const handleDrop = (e: React.DragEvent, panel: Side) => {
@@ -114,8 +116,8 @@ const Panel: React.FC<PanelProps> = ({
     selectedZone.widgets.filter((w) => w.panel === panel).length;
 
   const calculatePanelCapacity = (panel: Side) => {
-    const CHART_WIDTH = 250;
-    const CHART_HEIGHT = 250;
+    const CHART_WIDTH = 150;
+    const CHART_HEIGHT = 150;
     const FALLBACK_HORIZONTAL_CAPACITY = 5;
     const FALLBACK_VERTICAL_CAPACITY = 3;
 
@@ -196,8 +198,8 @@ const Panel: React.FC<PanelProps> = ({
   };
 
 
-  const { isPlaying } = usePlayButtonStore();
 
+  
   return (
     <>
       {selectedZone.activeSides.map((side) => (

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

@@ -101,7 +101,7 @@ const RealTimeVisulization: React.FC = () => {
     <div
       ref={containerRef}
       id="real-time-vis-canvas"
-      className={`realTime-viz canvas ${!isPlaying ? "playActiveFalse" : ""}`}
+      className={`realTime-viz canvas ${isPlaying ? "playingFlase" : ""}`}
       style={{
         height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
         width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
@@ -146,6 +146,7 @@ const RealTimeVisulization: React.FC = () => {
             hiddenPanels={hiddenPanels}
             selectedZone={selectedZone}
             setSelectedZone={setSelectedZone}
+            hiddenPanels={hiddenPanels}
           />
         </>
       )}