refactor: standardize activeTool casing and enhance trigger mechanics with bufferTime

2025-03-29 10:24:47 +05:30
parent 01588cf6c1
commit 1ce24a64f1
9 changed files with 179 additions and 58 deletions
--- a/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/mechanics/ConveyorMechanics.tsx
@@ -243,6 +243,7 @@ const ConveyorMechanics: React.FC = () => {
                uuid: THREE.MathUtils.generateUUID(),
                name: `Trigger ${triggerIndex + 1}`,
                type: '',
+                bufferTime: 0,
                isUsed: false
              };

@@ -298,8 +299,19 @@ const ConveyorMechanics: React.FC = () => {
    );

    setSimulationPaths(updatedPaths);
+
+    // Ensure the selectedItem is updated immediately
+    const updatedTrigger = updatedPaths
+      .flatMap((path) => (path.type === "Conveyor" ? path.points : []))
+      .flatMap((point) => point.triggers)
+      .find((trigger) => trigger.uuid === uuid);
+
+    if (updatedTrigger) {
+      setSelectedItem({ type: "trigger", item: updatedTrigger });
+    }
  };

+
  // Update the toggle handlers to immediately update the selected item
  const handleActionToggle = (uuid: string) => {
    if (!selectedActionSphere) return;
@@ -373,10 +385,45 @@ const ConveyorMechanics: React.FC = () => {
    }
  };

+  const handleTriggerBufferTimeChange = (uuid: string, bufferTime: number) => {
+    if (!selectedActionSphere) return;
+
+    const updatedPaths = simulationPaths.map((path) =>
+      path.type === "Conveyor"
+        ? {
+          ...path,
+          points: path.points.map((point) =>
+            point.uuid === selectedActionSphere.point.uuid
+              ? {
+                ...point,
+                triggers: point.triggers.map((trigger) =>
+                  trigger.uuid === uuid ? { ...trigger, bufferTime } : trigger
+                ),
+              }
+              : point
+          ),
+        }
+        : path
+    );
+
+    setSimulationPaths(updatedPaths);
+
+    // Immediately update selectedItem if it's the currently selected trigger
+    if (selectedItem?.type === "trigger" && selectedItem.item.uuid === uuid) {
+      setSelectedItem({
+        ...selectedItem,
+        item: {
+          ...selectedItem.item,
+          bufferTime
+        }
+      });
+    }
+  };
+
  const [selectedItem, setSelectedItem] = useState<{ type: "action" | "trigger"; item: any; } | null>(null);

  useEffect(() => {
-    setSelectedItem(null); // Reset selectedItem when selectedActionSphere changes
+    setSelectedItem(null);
  }, [selectedActionSphere]);

  return (
@@ -559,8 +606,19 @@ const ConveyorMechanics: React.FC = () => {
                    options={["On-Hit", "Buffer"]}
                    onSelect={(option) => handleTriggerSelect(selectedItem.item.uuid, option)}
                  />
+
+                  {selectedItem.item.type === "Buffer" && (
+                    <InputWithDropDown
+                      label="Buffer Time"
+                      value={selectedItem.item.bufferTime.toString()}
+                      onChange={(value) => {
+                        handleTriggerBufferTimeChange(selectedItem.item.uuid, parseInt(value));
+                      }}
+                    />
+                  )}
                </>
              )}
+
            </>
          )}

--- a/app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/mechanics/VehicleMechanics.tsx
@@ -243,6 +243,7 @@ const VehicleMechanics: React.FC = () => {
                                uuid: THREE.MathUtils.generateUUID(),
                                name: `Trigger ${triggerIndex + 1}`,
                                type: '',
+                                bufferTime: 0,
                                isUsed: false
                            };

--- a/app/src/components/ui/Tools.tsx
+++ b/app/src/components/ui/Tools.tsx
@@ -18,15 +18,19 @@ import { usePlayButtonStore } from "../../store/usePlayButtonStore";
 import useTemplateStore from "../../store/useTemplateStore";
 import { useSelectedZoneStore } from "../../store/useZoneStore";
 import {
+  useActiveTool,
  useAddAction,
  useDeleteModels,
+  useDeletePointOrLine,
+  useMovePoint,
  useSelectedWallItem,
  useToggleView,
+  useToolMode,
+  useTransformMode,
 } from "../../store/store";

 const Tools: React.FC = () => {
  const { templates } = useTemplateStore();
-  const [activeTool, setActiveTool] = useState("cursor");
  const [activeSubTool, setActiveSubTool] = useState("cursor");
  const [toggleThreeD, setToggleThreeD] = useState(true);

@@ -39,11 +43,17 @@ const Tools: React.FC = () => {
  const { selectedZone } = useSelectedZoneStore();

  // wall options
-  const { setToggleView } = useToggleView();
+  const { toggleView, setToggleView } = useToggleView();
  const { setDeleteModels } = useDeleteModels();
  const { setAddAction } = useAddAction();
  const { setSelectedWallItem } = useSelectedWallItem();

+  const { transformMode, setTransformMode } = useTransformMode();
+  const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
+  const { movePoint, setMovePoint } = useMovePoint();
+  const { toolMode, setToolMode } = useToolMode();
+  const { activeTool, setActiveTool } = useActiveTool();
+
  // Reset activeTool whenever activeModule changes
  useEffect(() => {
    setActiveTool(activeSubTool);
@@ -60,6 +70,7 @@ const Tools: React.FC = () => {
      setToggleView(false);
    }
    setToggleThreeD(!toggleThreeD);
+    setActiveTool("cursor");
  };

  useEffect(() => {
@@ -85,6 +96,84 @@ const Tools: React.FC = () => {
    };
  }, []);

+  useEffect(() => {
+    setToolMode(null);
+    setDeleteModels(false);
+    setAddAction(null);
+    setTransformMode(null);
+    setMovePoint(false);
+    setDeletePointOrLine(false);
+
+    switch (activeTool) {
+      case "Move":
+        if (toggleView) {
+          setMovePoint(true);
+        } else {
+          setTransformMode("translate");
+        }
+        break;
+
+      case "Rotate":
+        if (!toggleView) {
+          setTransformMode("rotate");
+        }
+        break;
+
+      case "Scale":
+        if (!toggleView) {
+          setTransformMode("scale");
+        }
+        break;
+
+      case "draw-wall":
+        if (toggleView) {
+          setToolMode("Wall");
+        }
+        break;
+
+      case "Draw Aisle":
+        if (toggleView) {
+          setToolMode("Aisle");
+        }
+        break;
+
+      case "Mark zone":
+        if (toggleView) {
+          setToolMode("Zone");
+        }
+        break;
+
+      case "Draw Floor":
+        if (toggleView) {
+          setToolMode("Floor");
+        }
+        break;
+
+      case "Measurement Tool":
+        setToolMode("MeasurementScale");
+        break;
+
+      case "Add pillar":
+        if (!toggleView) {
+          setAddAction("pillar");
+        }
+        break;
+
+      case "Delete":
+        if (toggleView) {
+          setDeletePointOrLine(true);
+        } else {
+          setDeleteModels(true);
+        }
+        break;
+
+      default:
+        break;
+    }
+
+    setActiveTool(activeTool);
+  }, [activeTool]);
+
  return (
    <>
      {!isPlaying ? (
@@ -94,9 +183,8 @@ const Tools: React.FC = () => {
              <div className="activeDropicon">
                {activeSubTool == "cursor" && (
                  <div
-                    className={`tool-button ${
-                      activeTool === "cursor" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "cursor" ? "active" : ""
+                      }`}
                    onClick={() => {
                      setActiveTool("cursor");
                    }}
@@ -106,9 +194,8 @@ const Tools: React.FC = () => {
                )}
                {activeSubTool == "free-hand" && (
                  <div
-                    className={`tool-button ${
-                      activeTool === "free-hand" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "free-hand" ? "active" : ""
+                      }`}
                    onClick={() => {
                      setActiveTool("free-hand");
                    }}
@@ -167,9 +254,8 @@ const Tools: React.FC = () => {
                <div className="split"></div>
                <div className="draw-tools">
                  <div
-                    className={`tool-button ${
-                      activeTool === "draw-wall" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "draw-wall" ? "active" : ""
+                      }`}
                    onClick={() => {
                      setActiveTool("draw-wall");
                    }}
@@ -177,9 +263,8 @@ const Tools: React.FC = () => {
                    <WallIcon isActive={activeTool === "draw-wall"} />
                  </div>
                  <div
-                    className={`tool-button ${
-                      activeTool === "draw-zone" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "draw-zone" ? "active" : ""
+                      }`}
                    onClick={() => {
                      setActiveTool("draw-zone");
                    }}
@@ -187,9 +272,8 @@ const Tools: React.FC = () => {
                    <ZoneIcon isActive={activeTool === "draw-zone"} />
                  </div>
                  <div
-                    className={`tool-button ${
-                      activeTool === "draw-aisle" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "draw-aisle" ? "active" : ""
+                      }`}
                    onClick={() => {
                      setActiveTool("draw-aisle");
                    }}
@@ -197,9 +281,8 @@ const Tools: React.FC = () => {
                    <AsileIcon isActive={activeTool === "draw-aisle"} />
                  </div>
                  <div
-                    className={`tool-button ${
-                      activeTool === "draw-floor" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "draw-floor" ? "active" : ""
+                      }`}
                    onClick={() => {
                      setActiveTool("draw-floor");
                    }}
@@ -214,9 +297,8 @@ const Tools: React.FC = () => {
                <div className="split"></div>
                <div className="draw-tools">
                  <div
-                    className={`tool-button ${
-                      activeTool === "pen" ? "active" : ""
-                    }`}
+                    className={`tool-button ${activeTool === "pen" ? "active" : ""
+                      }`}
                    onClick={() => {
                      setActiveTool("pen");
                    }}
@@ -248,9 +330,8 @@ const Tools: React.FC = () => {
            <div className="split"></div>
            <div className="general-options">
              <div
-                className={`tool-button ${
-                  activeTool === "comment" ? "active" : ""
-                }`}
+                className={`tool-button ${activeTool === "comment" ? "active" : ""
+                  }`}
                onClick={() => {
                  setActiveTool("comment");
                }}
@@ -258,9 +339,8 @@ const Tools: React.FC = () => {
                <CommentIcon isActive={activeTool === "comment"} />
              </div>
              <div
-                className={`tool-button ${
-                  activeTool === "play" ? "active" : ""
-                }`}
+                className={`tool-button ${activeTool === "play" ? "active" : ""
+                  }`}
                onClick={() => {
                  setIsPlaying(!isPlaying);
                }}
@@ -270,9 +350,8 @@ const Tools: React.FC = () => {
            </div>
            <div className="split"></div>
            <div
-              className={`toggle-threed-button${
-                toggleThreeD ? " toggled" : ""
-              }`}
+              className={`toggle-threed-button${toggleThreeD ? " toggled" : ""
+                }`}
              onClick={toggleSwitch}
            >
              <div className={`toggle-option${!toggleThreeD ? " active" : ""}`}>