first commit

app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx

@@ -0,0 +1,205 @@
+import React, { useRef, useState } from "react";
+import {
+  AddIcon,
+  InfoIcon,
+  RemoveIcon,
+  ResizeHeightIcon,
+} from "../../../icons/ExportCommonIcons";
+import RenameInput from "../../../ui/inputs/RenameInput";
+import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
+import LabledDropdown from "../../../ui/inputs/LabledDropdown";
+import RegularDropDown from "../../../ui/inputs/RegularDropDown";
+import { handleResize } from "../../../../functions/handleResizePannel";
+import EyeDropInput from "../../../ui/inputs/EyeDropInput";
+
+const MachineMechanics: React.FC = () => {
+  const [actionList, setActionList] = useState<string[]>([]);
+  const [triggerList, setTriggerList] = useState<string[]>([]);
+  const [selectedItem, setSelectedItem] = useState<{
+    type: "action" | "trigger";
+    name: string;
+  } | null>(null);
+
+  const actionsContainerRef = useRef<HTMLDivElement>(null);
+  const triggersContainerRef = useRef<HTMLDivElement>(null);
+
+  const handleAddAction = () => {
+    setActionList([...actionList, `Action ${actionList.length + 1}`]);
+  };
+
+  const handleAddTrigger = () => {
+    setTriggerList([...triggerList, `Trigger ${triggerList.length + 1}`]);
+  };
+
+  const handleRemoveAction = (index: number) => {
+    setActionList(actionList.filter((_, i) => i !== index));
+    if (
+      selectedItem?.type === "action" &&
+      selectedItem.name === actionList[index]
+    ) {
+      setSelectedItem(null);
+    }
+  };
+
+  const handleRemoveTrigger = (index: number) => {
+    setTriggerList(triggerList.filter((_, i) => i !== index));
+    if (
+      selectedItem?.type === "trigger" &&
+      selectedItem.name === triggerList[index]
+    ) {
+      setSelectedItem(null);
+    }
+  };
+
+  const handleSelectItem = (type: "action" | "trigger", name: string) => {
+    setSelectedItem({ type, name });
+  };
+
+  const [processes, setProcesses] = useState<string[]>([]);
+  const [activeProcess, setActiveProcesses] = useState<string>();
+
+  const handleSelect = (option: string) => {
+    setActiveProcesses(option); // Update the active option state
+  };
+  const handleAddProcess = () => {
+    const newProcess = `Process ${processes.length + 1}`; // Generate new process name dynamically
+    setProcesses((prevProcesses) => [...prevProcesses, newProcess]); // Update the state with the new process
+  };
+
+  return (
+    <div className="machine-mechanics-container">
+      <div className="machine-mechanics-header">Selected Object</div>
+      <div className="process-list-container">
+        <div className="label">Process:</div>
+        <RegularDropDown
+          header={activeProcess || "add process ->"}
+          options={processes}
+          onSelect={handleSelect}
+        />
+        <div className="add-new-process" onClick={handleAddProcess}>
+          <AddIcon />
+        </div>
+      </div>
+      <div className="machine-mechanics-content-container">
+        <div className="actions">
+          <div className="header">
+            <div className="header-value">Actions</div>
+            <div className="add-button" onClick={handleAddAction}>
+              <AddIcon /> Add
+            </div>
+          </div>
+          <div
+            className="lists-main-container"
+            ref={actionsContainerRef}
+            style={{ height: "120px" }}
+          >
+            <div className="list-container">
+              {actionList.map((action, index) => (
+                <div
+                  key={index}
+                  className={`list-item ${
+                    selectedItem?.type === "action" &&
+                    selectedItem.name === action
+                      ? "active"
+                      : ""
+                  }`}
+                >
+                  <div
+                    className="value"
+                    onClick={() => handleSelectItem("action", action)}
+                  >
+                    <RenameInput value={action} />
+                  </div>
+                  <div
+                    className="remove-button"
+                    onClick={() => handleRemoveAction(index)}
+                  >
+                    <RemoveIcon />
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div
+              className="resize-icon"
+              id="action-resize"
+              onMouseDown={(e) => handleResize(e, actionsContainerRef)}
+            >
+              <ResizeHeightIcon />
+            </div>
+          </div>
+        </div>
+        <div className="triggers">
+          <div className="header">
+            <div className="header-value">Triggers</div>
+            <div className="add-button" onClick={handleAddTrigger}>
+              <AddIcon /> Add
+            </div>
+          </div>
+          <div
+            className="lists-main-container"
+            ref={triggersContainerRef}
+            style={{ height: "120px" }}
+          >
+            <div className="list-container">
+              {triggerList.map((trigger, index) => (
+                <div
+                  key={index}
+                  className={`list-item ${
+                    selectedItem?.type === "trigger" &&
+                    selectedItem.name === trigger
+                      ? "active"
+                      : ""
+                  }`}
+                >
+                  <div
+                    className="value"
+                    onClick={() => handleSelectItem("trigger", trigger)}
+                  >
+                    <RenameInput value={trigger} />
+                  </div>
+                  <div
+                    className="remove-button"
+                    onClick={() => handleRemoveTrigger(index)}
+                  >
+                    <RemoveIcon />
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div
+              className="resize-icon"
+              id="trigger-resize"
+              onMouseDown={(e) => handleResize(e, triggersContainerRef)}
+            >
+              <ResizeHeightIcon />
+            </div>
+          </div>
+        </div>
+        <div className="selected-properties-container">
+          {selectedItem && (
+            <>
+              <div className="properties-header">{selectedItem.name}</div>
+              <LabledDropdown
+                defaultOption="On-hit"
+                options={["On-hit", "Buffer"]}
+              />
+              <InputWithDropDown
+                label="Speed"
+                value=""
+                activeOption=".mm"
+                onChange={() => {}}
+              />
+              <EyeDropInput />
+            </>
+          )}
+        </div>
+        <div className="footer">
+          <InfoIcon />
+          By Selecting Path, you can create Object Triggers.
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MachineMechanics;