2025-05-10 13:42:19 +00:00
7 changed files with 695 additions and 592 deletions
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/PickAndPlaceAction.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/PickAndPlaceAction.tsx
@ -1,24 +1,27 @@
 import React from "react";
-import EyeDropInput from "../../../../../ui/inputs/EyeDropInput";

 interface PickAndPlaceActionProps {
-    pickPointValue: string;
-    pickPointOnChange: (value: string) => void;
-    placePointValue: string;
-    placePointOnChange: (value: string) => void;
+  clearPoints: () => void;
 }

 const PickAndPlaceAction: React.FC<PickAndPlaceActionProps> = ({
-    pickPointValue,
-    pickPointOnChange,
-    placePointValue,
-    placePointOnChange,
+  clearPoints,
 }) => {
  return (
-        <>
-            <EyeDropInput label="Pick Point" value={pickPointValue} onChange={pickPointOnChange} />
-            <EyeDropInput label="Unload Point" value={placePointValue} onChange={placePointOnChange} />
-        </>
+    <div className="selected-actions-list">
+      <div className="value-field-container">
+        <div className="label">Reset</div>
+        <button
+          type="button"
+          className="regularDropdown-container"
+          onClick={() => {
+            clearPoints();
+          }}
+        >
+          Clear
+        </button>
+      </div>
+    </div>
  );
 };

--- a/app/src/components/layout/sidebarRight/properties/eventProperties/actions/TravelAction.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/actions/TravelAction.tsx
@ -25,6 +25,7 @@ interface TravelActionProps {
    value: string;
    onChange: (value: string) => void;
  };
+  clearPoints: () => void;
 }

 const TravelAction: React.FC<TravelActionProps> = ({
@ -32,6 +33,7 @@ const TravelAction: React.FC<TravelActionProps> = ({
  unloadDuration,
  pickPoint,
  unloadPoint,
+  clearPoints,
 }) => {
  return (
    <>
@ -41,7 +43,7 @@ const TravelAction: React.FC<TravelActionProps> = ({
        min={loadCapacity.min}
        max={loadCapacity.max}
        defaultValue={loadCapacity.defaultValue}
-                step={0.1}
+        step={1}
        activeOption="s"
        onClick={() => {}}
        onChange={loadCapacity.onChange}
@ -57,6 +59,20 @@ const TravelAction: React.FC<TravelActionProps> = ({
        onClick={() => {}}
        onChange={unloadDuration.onChange}
      />
+      <div className="selected-actions-list">
+        <div className="value-field-container">
+          <div className="label">Reset</div>
+          <button
+            type="button"
+            className="regularDropdown-container"
+            onClick={() => {
+              clearPoints();
+            }}
+          >
+            Clear
+          </button>
+        </div>
+      </div>
      {pickPoint && (
        <EyeDropInput
          label="Pick Point"
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
@ -4,22 +4,38 @@ import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
 import RenameInput from "../../../../../ui/inputs/RenameInput";
 import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
 import Trigger from "../trigger/Trigger";
-import { useSelectedEventData, useSelectedProduct, useSelectedAction } from "../../../../../../store/simulation/useSimulationStore";
+import {
+  useSelectedEventData,
+  useSelectedProduct,
+  useSelectedAction,
+} from "../../../../../../store/simulation/useSimulationStore";
 import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import PickAndPlaceAction from "../actions/PickAndPlaceAction";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";

 function RoboticArmMechanics() {
-    const [activeOption, setActiveOption] = useState<"default" | "pickAndPlace">("default");
-    const [selectedPointData, setSelectedPointData] = useState<RoboticArmPointSchema | undefined>();
+  const [activeOption, setActiveOption] = useState<"default" | "pickAndPlace">(
+    "default"
+  );
+  const [selectedPointData, setSelectedPointData] = useState<
+    RoboticArmPointSchema | undefined
+  >();
  const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, getEventByModelUuid, getActionByUuid, updateEvent, updateAction, addAction, removeAction } = useProductStore();
+  const {
+    getPointByUuid,
+    getEventByModelUuid,
+    updateEvent,
+    updateAction,
+    addAction,
+    removeAction,
+  } = useProductStore();
  const { selectedProduct } = useSelectedProduct();
-    const { selectedAction, setSelectedAction, clearSelectedAction } = useSelectedAction();
+  const { selectedAction, setSelectedAction, clearSelectedAction } =
+    useSelectedAction();

-    const email = localStorage.getItem('email')
-    const organization = (email!.split("@")[1]).split(".")[0];
+  const email = localStorage.getItem("email");
+  const organization = email!.split("@")[1].split(".")[0];

  useEffect(() => {
    if (selectedEventData) {
@ -31,8 +47,13 @@ function RoboticArmMechanics() {
      if (point?.actions) {
        setSelectedPointData(point);
        if (point.actions.length > 0) {
-                    setActiveOption(point.actions[0].actionType as "default" | "pickAndPlace");
-                    setSelectedAction(point.actions[0].actionUuid, point.actions[0].actionName);
+          setActiveOption(
+            point.actions[0].actionType as "default" | "pickAndPlace"
+          );
+          setSelectedAction(
+            point.actions[0].actionUuid,
+            point.actions[0].actionName
+          );
        }
      }
    } else {
@ -50,17 +71,23 @@ function RoboticArmMechanics() {
      productName: productName,
      productId: productId,
      organization: organization,
-            eventDatas: eventData
-        })
-    }
+      eventDatas: eventData,
+    });
+  };

  const handleRenameAction = (newName: string) => {
    if (!selectedAction.actionId) return;
-        const event = updateAction(selectedProduct.productId, selectedAction.actionId, { actionName: newName });
+    const event = updateAction(
+      selectedProduct.productId,
+      selectedAction.actionId,
+      { actionName: newName }
+    );

    if (selectedPointData) {
      const updatedActions = selectedPointData.actions.map((action) =>
-                action.actionUuid === selectedAction.actionId ? { ...action, actionName: newName } : action
+        action.actionUuid === selectedAction.actionId
+          ? { ...action, actionName: newName }
+          : action
      );
      setSelectedPointData({
        ...selectedPointData,
@ -80,9 +107,13 @@ function RoboticArmMechanics() {

  const handleSpeedChange = (value: string) => {
    if (!selectedEventData) return;
-        const event = updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
+    const event = updateEvent(
+      selectedProduct.productId,
+      selectedEventData.data.modelUuid,
+      {
        speed: parseFloat(value),
-        });
+      }
+    );

    if (event) {
      updateBackend(
@ -93,17 +124,19 @@ function RoboticArmMechanics() {
      );
    }
  };
-
-    const handlePickPointChange = (value: string) => {
+  const handleClearPoints = () => {
    if (!selectedAction.actionId || !selectedPointData) return;
-        const [x, y, z] = value.split(",").map(Number);

-        const event = updateAction(selectedProduct.productId, selectedAction.actionId, {
+    const event = updateAction(
+      selectedProduct.productId,
+      selectedAction.actionId,
+      {
        process: {
-                startPoint: [x, y, z] as [number, number, number],
-                endPoint: selectedPointData.actions.find((a) => a.actionUuid === selectedAction.actionId)?.process.endPoint || null,
+          startPoint: null,
+          endPoint: null,
        },
-        });
+      }
+    );

    if (event) {
      updateBackend(
@ -115,28 +148,6 @@ function RoboticArmMechanics() {
    }
  };

-    const handlePlacePointChange = (value: string) => {
-        if (!selectedAction.actionId || !selectedPointData) return;
-        const [x, y, z] = value.split(",").map(Number);
-
-        const event = updateAction(selectedProduct.productId, selectedAction.actionId, {
-            process: {
-                startPoint: selectedPointData.actions.find((a) => a.actionUuid === selectedAction.actionId)?.process.startPoint || null,
-                endPoint: [x, y, z] as [number, number, number],
-            },
-        });
-
-        if (event) {
-            updateBackend(
-                selectedProduct.productName,
-                selectedProduct.productId,
-                organization,
-                event
-            );
-        }
-    };
-
-
  const handleAddAction = () => {
    if (!selectedEventData || !selectedPointData) return;

@ -189,8 +200,12 @@ function RoboticArmMechanics() {
      );
    }

-        const index = selectedPointData.actions.findIndex(a => a.actionUuid === actionUuid);
-        const newActions = selectedPointData.actions.filter(a => a.actionUuid !== actionUuid);
+    const index = selectedPointData.actions.findIndex(
+      (a) => a.actionUuid === actionUuid
+    );
+    const newActions = selectedPointData.actions.filter(
+      (a) => a.actionUuid !== actionUuid
+    );

    const updatedPoint = {
      ...selectedPointData,
@ -213,11 +228,17 @@ function RoboticArmMechanics() {
    options: ["pickAndPlace"],
  };

-    const currentSpeed = (getEventByModelUuid(
-        selectedProduct.productId, selectedEventData?.data.modelUuid || ""
-    ) as RoboticArmEventSchema | undefined)?.speed?.toString() || "0.5";
+  const currentSpeed =
+    (
+      getEventByModelUuid(
+        selectedProduct.productId,
+        selectedEventData?.data.modelUuid || ""
+      ) as RoboticArmEventSchema | undefined
+    )?.speed?.toString() || "0.5";

-    const currentAction = selectedPointData?.actions.find((a) => a.actionUuid === selectedAction.actionId);
+  const currentAction = selectedPointData?.actions.find(
+    (a) => a.actionUuid === selectedAction.actionId
+  );

  const currentPickPoint = currentAction?.process.startPoint
    ? `${currentAction.process.startPoint[0]},${currentAction.process.startPoint[1]},${currentAction.process.startPoint[2]}`
@ -246,7 +267,6 @@ function RoboticArmMechanics() {
        </div>
      </div>
      <section>
-
        <ActionsList
          selectedPointData={selectedPointData}
          multipleAction
@ -258,7 +278,7 @@ function RoboticArmMechanics() {
          <div className="selected-actions-details">
            <div className="selected-actions-header">
              <RenameInput
-                                value={selectedAction.actionName || ''}
+                value={selectedAction.actionName || ""}
                onRename={handleRenameAction}
              />
            </div>
@ -269,15 +289,13 @@ function RoboticArmMechanics() {
                onSelect={() => {}}
                disabled={true}
              />
-                            <PickAndPlaceAction
-                                pickPointValue={currentPickPoint}
-                                pickPointOnChange={handlePickPointChange}
-                                placePointValue={currentPlacePoint}
-                                placePointOnChange={handlePlacePointChange}
-                            />
+              <PickAndPlaceAction clearPoints={handleClearPoints} />
            </div>
            <div className="tirgger">
-                            <Trigger selectedPointData={selectedPointData as any} type={'RoboticArm'} />
+              <Trigger
+                selectedPointData={selectedPointData as any}
+                type={"RoboticArm"}
+              />
            </div>
          </div>
        )}
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
@ -6,26 +6,34 @@ import Trigger from "../trigger/Trigger";
 import {
  useSelectedAction,
  useSelectedEventData,
+  useSelectedEventSphere,
  useSelectedProduct,
 } from "../../../../../../store/simulation/useSimulationStore";
 import { useProductStore } from "../../../../../../store/simulation/useProductStore";
 import TravelAction from "../actions/TravelAction";
 import ActionsList from "../components/ActionsList";
 import { upsertProductOrEventApi } from "../../../../../../services/simulation/UpsertProductOrEventApi";
+import { useVehicleStore } from "../../../../../../store/simulation/useVehicleStore";

 function VehicleMechanics() {
-    const [activeOption, setActiveOption] = useState<"default" | "travel">("default");
-    const [selectedPointData, setSelectedPointData] = useState<VehiclePointSchema | undefined>();
+  const [activeOption, setActiveOption] = useState<"default" | "travel">(
+    "default"
+  );
+  const [selectedPointData, setSelectedPointData] = useState<
+    VehiclePointSchema | undefined
+  >();
  const { selectedEventData } = useSelectedEventData();
-    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = useProductStore();
+  const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } =
+    useProductStore();
  const { selectedProduct } = useSelectedProduct();
  const { setSelectedAction, clearSelectedAction } = useSelectedAction();
+  const { getVehicleById } = useVehicleStore();

-    const email = localStorage.getItem('email')
-    const organization = (email!.split("@")[1]).split(".")[0];
+  const email = localStorage.getItem("email");
+  const organization = email!.split("@")[1].split(".")[0];

  useEffect(() => {
-        if (selectedEventData && selectedEventData.data.type === 'vehicle') {
+    if (selectedEventData && selectedEventData.data.type === "vehicle") {
      const point = getPointByUuid(
        selectedProduct.productId,
        selectedEventData.data.modelUuid,
@ -52,15 +60,19 @@ function VehicleMechanics() {
      productName: productName,
      productId: productId,
      organization: organization,
-            eventDatas: eventData
-        })
-    }
+      eventDatas: eventData,
+    });
+  };

  const handleSpeedChange = (value: string) => {
    if (!selectedEventData) return;
-        const event = updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
+    const event = updateEvent(
+      selectedProduct.productId,
+      selectedEventData.data.modelUuid,
+      {
        speed: parseFloat(value),
-        });
+      }
+    );

    if (event) {
      updateBackend(
@ -77,9 +89,13 @@ function VehicleMechanics() {
    const validOption = option as "travel";
    setActiveOption(validOption);

-        const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
+    const event = updateAction(
+      selectedProduct.productId,
+      selectedPointData.action.actionUuid,
+      {
        actionType: validOption,
-        });
+      }
+    );

    if (event) {
      updateBackend(
@ -93,7 +109,11 @@ function VehicleMechanics() {

  const handleRenameAction = (newName: string) => {
    if (!selectedPointData) return;
-        const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, { actionName: newName });
+    const event = updateAction(
+      selectedProduct.productId,
+      selectedPointData.action.actionUuid,
+      { actionName: newName }
+    );

    if (event) {
      updateBackend(
@ -107,9 +127,13 @@ function VehicleMechanics() {

  const handleLoadCapacityChange = (value: string) => {
    if (!selectedPointData) return;
-        const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
+    const event = updateAction(
+      selectedProduct.productId,
+      selectedPointData.action.actionUuid,
+      {
        loadCapacity: parseFloat(value),
-        });
+      }
+    );

    if (event) {
      updateBackend(
@ -123,9 +147,13 @@ function VehicleMechanics() {

  const handleUnloadDurationChange = (value: string) => {
    if (!selectedPointData) return;
-        const event = updateAction(selectedProduct.productId, selectedPointData.action.actionUuid, {
+    const event = updateAction(
+      selectedProduct.productId,
+      selectedPointData.action.actionUuid,
+      {
        unLoadDuration: parseFloat(value),
-        });
+      }
+    );

    if (event) {
      updateBackend(
@ -147,9 +175,13 @@ function VehicleMechanics() {

  // Get current values from store

-    const currentSpeed = (getEventByModelUuid(
-        selectedProduct.productId, selectedEventData?.data.modelUuid || ""
-    ) as VehicleEventSchema | undefined)?.speed?.toString() || "0.5";
+  const currentSpeed =
+    (
+      getEventByModelUuid(
+        selectedProduct.productId,
+        selectedEventData?.data.modelUuid || ""
+      ) as VehicleEventSchema | undefined
+    )?.speed?.toString() || "0.5";

  const currentActionName = selectedPointData
    ? selectedPointData.action.actionName
@ -163,9 +195,45 @@ function VehicleMechanics() {
    ? selectedPointData.action.unLoadDuration.toString()
    : "1";

-    const currentPickPoint = selectedPointData?.action.pickUpPoint;
+  const { selectedEventSphere } = useSelectedEventSphere();

-    const currentUnloadPoint = selectedPointData?.action.unLoadPoint;
+  function handleClearPoints() {
+    const updatedVehicle = getVehicleById(
+      selectedEventSphere?.userData.modelUuid
+    );
+
+    if (
+      !selectedProduct?.productId ||
+      !selectedEventSphere?.userData?.modelUuid ||
+      !updatedVehicle?.point
+    )
+      return;
+
+    const event = updateEvent(
+      selectedProduct.productId,
+      selectedEventSphere.userData.modelUuid,
+      {
+        point: {
+          ...updatedVehicle.point,
+          action: {
+            ...updatedVehicle.point?.action,
+            pickUpPoint: null,
+            unLoadPoint: null,
+            steeringAngle: 0,
+          },
+        },
+      }
+    );
+
+    if (event) {
+      updateBackend(
+        selectedProduct.productName,
+        selectedProduct.productId,
+        organization,
+        event
+      );
+    }
+  }

  const availableActions = {
    defaultOption: "travel",
@ -194,9 +262,7 @@ function VehicleMechanics() {
            </div>
          </div>
          <section>
-                        <ActionsList
-                            selectedPointData={selectedPointData}
-                        />
+            <ActionsList selectedPointData={selectedPointData} />
            <div className="selected-actions-details">
              <div className="selected-actions-header">
                <RenameInput
@ -227,6 +293,7 @@ function VehicleMechanics() {
                      defaultValue: "1",
                      onChange: handleUnloadDurationChange,
                    }}
+                    clearPoints={handleClearPoints}
                    // pickPoint={{
                    //     value: currentPickPoint,
                    //     onChange: handlePickPointChange,
@ -240,7 +307,10 @@ function VehicleMechanics() {
              </div>
            </div>
            <div className="tirgger">
-                            <Trigger selectedPointData={selectedPointData as any} type={'Vehicle'} />
+              <Trigger
+                selectedPointData={selectedPointData as any}
+                type={"Vehicle"}
+              />
            </div>
          </section>
        </>
--- a/app/src/components/ui/inputs/EyeDropInput.tsx
+++ b/app/src/components/ui/inputs/EyeDropInput.tsx
@ -1,21 +1,18 @@
 import React from "react";
 import { EyeDroperIcon } from "../../icons/ExportCommonIcons";
-import RegularDropDown from "./RegularDropDown";

 interface EyeDropInputProps {
  label: string;
  value: string;
  onChange: (value: string) => void;
-  options?: string[];
 }

 const EyeDropInput: React.FC<EyeDropInputProps> = ({
  label = "Object",
+  value,
  onChange,
 }) => {
  const handleEyeDropClick = () => {
-    // Here you would typically implement the eye dropper functionality
-    // For now, we'll just simulate selecting a value
    const simulatedValue = "picked_value"; // Replace with actual eye dropper logic
    onChange(simulatedValue);
  };
@ -24,15 +21,12 @@ const EyeDropInput: React.FC<EyeDropInputProps> = ({
    <div className="eye-dropper-input-container">
      <div className="label">{label}</div>
      <div className="input-container">
-        {/* <input disabled type="text" /> */}
-        <RegularDropDown
-          header="select object"
-          options={[]}
-          onSelect={() => { }}
-        />
-        <div className="eye-picker-button" onClick={handleEyeDropClick}>
+        <input disabled type="text" value={value}/>
+        {/* <input type="text" value={activeValue ?? "null"} disabled /> */}
+        {/* <input type="button" value="Clear" onClick={handleEyeDropClick}/> */}
+        <button className="eye-picker-button" onClick={handleEyeDropClick}>
          <EyeDroperIcon isActive={false} />
-        </div>
+        </button>
      </div>
    </div>
  );
--- a/app/src/modules/simulation/spatialUI/arm/armBotUI.tsx
+++ b/app/src/modules/simulation/spatialUI/arm/armBotUI.tsx
@ -3,6 +3,7 @@ import { useSelectedAction, useSelectedEventSphere, useSelectedProduct } from '.
 import { useGLTF } from '@react-three/drei';
 import { useThree } from '@react-three/fiber';
 import { useProductStore } from '../../../../store/simulation/useProductStore';
+import { useArmBotStore } from '../../../../store/simulation/useArmBotStore';
 import PickDropPoints from './PickDropPoints';
 import useDraggableGLTF from './useDraggableGLTF';
 import * as THREE from 'three';
@ -23,6 +24,7 @@ const ArmBotUI = () => {
    const { selectedProduct } = useSelectedProduct();
    const { scene } = useThree();
    const { selectedAction } = useSelectedAction();
+    const { armBots } = useArmBotStore();

    const armUiPick = useGLTF(armPick) as any;
    const armUiDrop = useGLTF(armDrop) as any;
@ -73,7 +75,7 @@ const ArmBotUI = () => {
                }
            }
        }
-    }, [selectedEventSphere, selectedProduct, getEventByModelUuid, selectedAction]);
+    }, [armBots, selectedEventSphere, selectedProduct, getEventByModelUuid, selectedAction]);

    function getDefaultPositions(modelUuid: string): Positions {
        const modelData = getEventByModelUuid(selectedProduct.productId, modelUuid);
--- a/app/src/modules/simulation/spatialUI/vehicle/vehicleUI.tsx
+++ b/app/src/modules/simulation/spatialUI/vehicle/vehicleUI.tsx
@ -23,7 +23,7 @@ const VehicleUI = () => {
  const prevMousePos = useRef({ x: 0, y: 0 });
  const { selectedEventSphere } = useSelectedEventSphere();
  const { selectedProduct } = useSelectedProduct();
-  const { getVehicleById } = useVehicleStore();
+  const { vehicles, getVehicleById } = useVehicleStore();
  const { updateEvent } = useProductStore();
  const [startPosition, setStartPosition] = useState<[number, number, number]>([
    0, 1, 0,
@ -144,7 +144,7 @@ const VehicleUI = () => {
        setSteeringRotation([0, steeringAngle, 0]);
      }
    }, 10);
-  }, [selectedEventSphere, outerGroup.current]);
+  }, [selectedEventSphere, outerGroup.current, vehicles]);

  const handlePointerDown = (
    e: any,