added crane mechanics ui and dblclick zoom effect chnage

app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx

@@ -15,6 +15,7 @@ import { useProductContext } from "../../../../../modules/simulation/products/pr
 import { useParams } from "react-router-dom";
 import { useVersionContext } from "../../../../../modules/builder/version/versionContext";
 import { useSceneContext } from "../../../../../modules/scene/sceneContext";
+import CraneMechanics from "./mechanics/craneMechanics";
 
 const EventProperties: React.FC = () => {
   const { selectedEventData } = useSelectedEventData();
@@ -63,6 +64,8 @@ const EventProperties: React.FC = () => {
         return "storageUnit";
       case "human":
         return "human";
+      case "crane":
+        return "crane";
       default:
         return null;
     }
@@ -83,6 +86,7 @@ const EventProperties: React.FC = () => {
           {assetType === "machine" && <MachineMechanics />}
           {assetType === "storageUnit" && <StorageMechanics />}
           {assetType === "human" && <HumanMechanics />}
+          {assetType === "crane" && <CraneMechanics />}
         </>
       )}
       {!currentEventData && selectedEventSphere && (

app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/craneMechanics.tsx

@@ -0,0 +1,210 @@
+import { useEffect, useState } from "react";
+import { MathUtils } from "three";
+import RenameInput from "../../../../../ui/inputs/RenameInput";
+import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
+import Trigger from "../trigger/Trigger";
+import { useSelectedEventData, useSelectedAction } from "../../../../../../store/simulation/useSimulationStore";
+import ActionsList from "../components/ActionsList";
+import { upsertProductOrEventApi } from "../../../../../../services/simulation/products/UpsertProductOrEventApi";
+import { useProductContext } from "../../../../../../modules/simulation/products/productContext";
+import { useParams } from "react-router-dom";
+import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../../../modules/scene/sceneContext";
+
+function CraneMechanics() {
+    const [activeOption, setActiveOption] = useState<"pickAndDrop">("pickAndDrop");
+    const [selectedPointData, setSelectedPointData] = useState<CranePointSchema | undefined>();
+
+    const { selectedEventData } = useSelectedEventData();
+    const { productStore } = useSceneContext();
+    const { getPointByUuid, updateAction, addAction, removeAction } = productStore();
+    const { selectedProductStore } = useProductContext();
+    const { selectedProduct } = selectedProductStore();
+    const { selectedAction, setSelectedAction, clearSelectedAction } = useSelectedAction();
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
+    const { projectId } = useParams();
+
+    useEffect(() => {
+        if (selectedEventData) {
+            const point = getPointByUuid(
+                selectedProduct.productUuid,
+                selectedEventData.data.modelUuid,
+                selectedEventData.selectedPoint
+            ) as CranePointSchema | undefined;
+
+            if (point?.actions) {
+                setSelectedPointData(point);
+
+                if (point.actions.length > 0) {
+                    const firstAction = point.actions[0];
+                    setActiveOption(firstAction.actionType);
+                    setSelectedAction(firstAction.actionUuid, firstAction.actionName);
+                }
+            }
+        } else {
+            clearSelectedAction();
+        }
+    }, [selectedEventData, selectedProduct]);
+
+    const updateBackend = (
+        productName: string,
+        productUuid: string,
+        projectId: string,
+        eventData: EventsSchema
+    ) => {
+        upsertProductOrEventApi({
+            productName,
+            productUuid,
+            projectId,
+            eventDatas: eventData,
+            versionId: selectedVersion?.versionId || "",
+        });
+    };
+
+    const handleRenameAction = (newName: string) => {
+        if (!selectedAction.actionId || !selectedPointData) return;
+
+        const event = updateAction(
+            selectedProduct.productUuid,
+            selectedAction.actionId,
+            { actionName: newName }
+        );
+
+        const updatedActions = selectedPointData.actions.map(action =>
+            action.actionUuid === selectedAction.actionId
+                ? { ...action, actionName: newName }
+                : action
+        );
+
+        setSelectedPointData({
+            ...selectedPointData,
+            actions: updatedActions,
+        });
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productUuid,
+                projectId || '',
+                event
+            );
+        }
+    };
+
+    const handleAddAction = () => {
+        if (!selectedEventData || !selectedPointData) return;
+
+        const newAction = {
+            actionUuid: MathUtils.generateUUID(),
+            actionName: `Action ${selectedPointData.actions.length + 1}`,
+            actionType: "pickAndDrop" as const,
+            maxPickUpCount: 1,
+            triggers: [] as TriggerSchema[],
+        };
+
+        const event = addAction(
+            selectedProduct.productUuid,
+            selectedEventData.data.modelUuid,
+            selectedEventData.selectedPoint,
+            newAction
+        );
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productUuid,
+                projectId || '',
+                event
+            );
+        }
+
+        setSelectedPointData({
+            ...selectedPointData,
+            actions: [...selectedPointData.actions, newAction],
+        });
+        setSelectedAction(newAction.actionUuid, newAction.actionName);
+    };
+
+    const handleDeleteAction = (actionUuid: string) => {
+        if (!selectedPointData) return;
+
+        const event = removeAction(
+            selectedProduct.productUuid,
+            actionUuid
+        );
+
+        if (event) {
+            updateBackend(
+                selectedProduct.productName,
+                selectedProduct.productUuid,
+                projectId || '',
+                event
+            );
+        }
+
+        const index = selectedPointData.actions.findIndex(a => a.actionUuid === actionUuid);
+        const newActions = selectedPointData.actions.filter(a => a.actionUuid !== actionUuid);
+
+        setSelectedPointData({
+            ...selectedPointData,
+            actions: newActions,
+        });
+
+        if (selectedAction.actionId === actionUuid) {
+            const nextAction = newActions[index] || newActions[index - 1];
+            if (nextAction) {
+                setSelectedAction(nextAction.actionUuid, nextAction.actionName);
+            } else {
+                clearSelectedAction();
+            }
+        }
+    };
+
+    const availableActions = {
+        defaultOption: "pickAndDrop",
+        options: ["pickAndDrop"],
+    };
+
+    const currentAction = selectedPointData?.actions.find(a => a.actionUuid === selectedAction.actionId);
+
+    return (
+        <>
+            <section>
+                <ActionsList
+                    selectedPointData={selectedPointData}
+                    multipleAction
+                    handleAddAction={handleAddAction}
+                    handleDeleteAction={handleDeleteAction}
+                />
+
+                {selectedAction.actionId && currentAction && (
+                    <div className="selected-actions-details">
+                        <div className="selected-actions-header">
+                            <RenameInput
+                                value={selectedAction.actionName || ""}
+                                canEdit={false}
+                            />
+                        </div>
+                        <div className="selected-actions-list">
+                            <LabledDropdown
+                                defaultOption={activeOption}
+                                options={availableActions.options}
+                                onSelect={() => { }}
+                                disabled={true}
+                            />
+                        </div>
+                        <div className="tirgger">
+                            <Trigger
+                                selectedPointData={selectedPointData as any}
+                                type={"RoboticArm"}
+                            />
+                        </div>
+                    </div>
+                )}
+            </section>
+        </>
+    );
+}
+
+export default CraneMechanics