feat: Refactor human action handling to replace animatedTravel with worker actions and enhance animation management

2025-07-03 14:23:57 +05:30
parent 98f4d48db2
commit eb5683eadc
11 changed files with 606 additions and 112 deletions
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/components/AnimationList.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/components/AnimationList.tsx
@@ -0,0 +1,104 @@
+import React, { useRef } from "react";
+import { AddIcon, RemoveIcon, ResizeHeightIcon } from "../../../../../icons/ExportCommonIcons";
+import { handleResize } from "../../../../../../functions/handleResizePannel";
+import { useSelectedAction } from "../../../../../../store/simulation/useSimulationStore";
+import RenameInput from "../../../../../ui/inputs/RenameInput";
+
+interface AnimationListProps {
+    animationOptions: string[];
+    animationSequences: {
+        animationUuid: string;
+        animationName: string;
+        animationType: "behaviour" | "animatedTravel";
+        animation: string | null;
+        travelPoints?: { startPoint: [number, number, number] | null; endPoint: [number, number, number] | null };
+    }[];
+    onAddAnimation: () => void;
+    onRemoveAnimation: (animationUuid: string) => void;
+    handleAnimationSelect: (animationUuid: string) => void;
+    handleRenameAnimation: (animationUuid: string, newName: string) => void;
+    selectedAnimation: {
+        animationUuid: string;
+        animationName: string;
+        animationType: "behaviour" | "animatedTravel";
+        animation: string | null;
+        travelPoints?: { startPoint: [number, number, number] | null; endPoint: [number, number, number] | null };
+    } | undefined
+}
+
+const AnimationList: React.FC<AnimationListProps> = ({
+    animationSequences,
+    onAddAnimation,
+    onRemoveAnimation,
+    handleAnimationSelect,
+    handleRenameAnimation,
+    selectedAnimation
+}) => {
+    const animationContainerRef = useRef<HTMLDivElement>(null);
+    const { selectedAction } = useSelectedAction();
+
+    return (
+        <div className="actions-list-container">
+            <div className="actions">
+                <div className="header">
+                    <div className="header-value">Animation Sequences</div>
+                    <button
+                        id="add-action-button"
+                        className="add-button"
+                        onClick={onAddAnimation}
+                        disabled={!selectedAction.actionId}
+                    >
+                        <AddIcon /> Add
+                    </button>
+                </div>
+                <div
+                    className="lists-main-container"
+                    ref={animationContainerRef}
+                    style={{ height: "120px" }}
+                >
+                    <div className="list-container">
+                        {animationSequences.map((sequence) => (
+                            <div
+                                key={sequence.animationUuid}
+                                className={`list-item ${selectedAnimation?.animationUuid === sequence.animationUuid ? "active" : ""}`}
+                            >
+                                <button
+                                    id="action-button"
+                                    className="value"
+                                    onClick={() =>
+                                        handleAnimationSelect(sequence.animationUuid)
+                                    }
+                                >
+                                    <RenameInput
+                                        value={sequence.animationName}
+                                        onRename={(value) => handleRenameAnimation(sequence.animationUuid, value)}
+                                    />
+                                </button>
+                                {animationSequences.length > 1 && (
+                                    <button
+                                        id="remove-action-button"
+                                        className="remove-button"
+                                        onClick={() => onRemoveAnimation(sequence.animationUuid)}
+                                    >
+                                        <RemoveIcon />
+                                    </button>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+                    {animationSequences.length > 0 && (
+                        <button
+                            className="resize-icon"
+                            id="action-resize"
+                            onMouseDown={(e: any) => handleResize(e, animationContainerRef)}
+                        >
+                            <ResizeHeightIcon />
+                        </button>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AnimationList;
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/humanMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/humanMechanics.tsx
@@ -1,27 +1,38 @@
 import { useEffect, useState } from "react";
+import { MathUtils } from "three";
 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, useSelectedAction } from "../../../../../../store/simulation/useSimulationStore";
 import PickAndPlaceAction from "../actions/PickAndPlaceAction";
+import ActionsList from "../components/ActionsList";
+import AnimationList from "../components/AnimationList";
+import { useSelectedEventData, useSelectedAction } from "../../../../../../store/simulation/useSimulationStore";
 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";
-import ActionsList from "../components/ActionsList";
+import { useParams } from "react-router-dom";

 function HumanMechanics() {
-    const [activeOption, setActiveOption] = useState<"animatedTravel">("animatedTravel");
+    const [activeOption, setActiveOption] = useState<"worker">("worker");
+    const [animationOptions, setAnimationOptions] = useState<string[]>([]);
    const [speed, setSpeed] = useState("0.5");
    const [currentAction, setCurrentAction] = useState<HumanAction | undefined>();
    const [selectedPointData, setSelectedPointData] = useState<HumanPointSchema | undefined>();
    const { selectedEventData } = useSelectedEventData();
-    const { productStore } = useSceneContext();
-    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction } = productStore();
+    const { productStore, assetStore } = useSceneContext();
+    const { getAssetById } = assetStore();
+    const { getPointByUuid, getEventByModelUuid, updateEvent, updateAction, addAction, removeAction } = productStore();
    const { selectedProductStore } = useProductContext();
    const { selectedProduct } = selectedProductStore();
+    const [selectedAnimation, setSelectedAnimation] = useState<{
+        animationUuid: string;
+        animationName: string;
+        animationType: "behaviour" | "animatedTravel";
+        animation: string | null;
+        travelPoints?: { startPoint: [number, number, number] | null; endPoint: [number, number, number] | null; }
+    }>();
    const { selectedAction, setSelectedAction, clearSelectedAction } = useSelectedAction();
    const { selectedVersionStore } = useVersionContext();
    const { selectedVersion } = selectedVersionStore();
@@ -35,10 +46,15 @@ function HumanMechanics() {
                selectedEventData.selectedPoint
            ) as HumanPointSchema | undefined;

-            if (point?.action) {
+            if (point?.actions) {
                setSelectedPointData(point);
-                const action = point.action;
-                setSelectedAction(action.actionUuid, action.actionName);
+                if (point.actions.length > 0) {
+                    setSelectedAction(point.actions[0].actionUuid, point.actions[0].actionName);
+                    const asset = getAssetById(selectedEventData.data.modelUuid);
+                    if (asset && asset.animations) {
+                        setAnimationOptions(asset.animations)
+                    }
+                }
            }
        } else {
            clearSelectedAction();
@@ -62,11 +78,16 @@ function HumanMechanics() {
                selectedEventData.selectedPoint
            ) as HumanPointSchema | undefined;

-            if (point?.action) {
+            if (point?.actions) {
                setSelectedPointData(point);
-                const action = point.action;
-                setCurrentAction(action);
-                setActiveOption(action.actionType as "animatedTravel");
+                const action = point.actions.find((a) => a.actionUuid === selectedAction.actionId);
+                if (action) {
+                    setCurrentAction(action);
+                    setActiveOption(action.actionType as "worker");
+                    if (action.animationSequences.length > 0) {
+                        setSelectedAnimation(action.animationSequences[0]);
+                    }
+                }
            }
        } else {
            clearSelectedAction();
@@ -91,80 +112,387 @@ function HumanMechanics() {
    };

    const handleSelectActionType = (actionType: string) => {
-        if (!currentAction) return;
-        setActiveOption(actionType as "animatedTravel");
+        if (!selectedAction.actionId || !currentAction || !selectedPointData) return;
+
+        const updatedAction = {
+            ...currentAction,
+            actionType: actionType as "worker"
+        };
+
+        const updatedPoint = {
+            ...selectedPointData,
+            actions: selectedPointData.actions.map(action =>
+                action.actionUuid === selectedAction.actionId ? updatedAction : action
+            )
+        };

        const event = updateAction(
            selectedProduct.productUuid,
-            currentAction.actionUuid,
-            { actionType: actionType as "animatedTravel" }
+            selectedAction.actionId,
+            updatedAction
        );

-        if (event && selectedPointData) {
-            const updatedAction = { ...selectedPointData.action, actionType: actionType as "animatedTravel" };
-            setSelectedPointData({ ...selectedPointData, action: updatedAction });
-        }
-
        if (event) {
            updateBackend(selectedProduct.productName, selectedProduct.productUuid, projectId || '', event);
        }
+
+        setCurrentAction(updatedAction);
+        setSelectedPointData(updatedPoint);
    };

-    const handleRenameAction = (newName: string) => {
-        if (!currentAction) return;
+    const handleChooseAnimation = (animationOption: string) => {
+        if (!selectedAction.actionId || !currentAction || !selectedAnimation || !selectedPointData) return;
+
+        const updatedAnimation = {
+            ...selectedAnimation,
+            animation: animationOption
+        };
+
+        const updatedAction = {
+            ...currentAction,
+            animationSequences: currentAction.animationSequences.map(anim =>
+                anim.animationUuid === selectedAnimation.animationUuid ? updatedAnimation : anim
+            )
+        };
+
+        const updatedPoint = {
+            ...selectedPointData,
+            actions: selectedPointData.actions.map(action =>
+                action.actionUuid === selectedAction.actionId ? updatedAction : action
+            )
+        };

        const event = updateAction(
            selectedProduct.productUuid,
-            currentAction.actionUuid,
-            { actionName: newName }
+            selectedAction.actionId,
+            updatedAction
        );

-        if (event && selectedPointData) {
-            const updatedAction = { ...selectedPointData.action, actionName: newName };
-            setSelectedPointData({ ...selectedPointData, action: updatedAction });
-        }
-
        if (event) {
            updateBackend(selectedProduct.productName, selectedProduct.productUuid, projectId || '', event);
        }
+
+        setCurrentAction(updatedAction);
+        setSelectedAnimation(updatedAnimation);
+        setSelectedPointData(updatedPoint);
    };

    const handleSpeedChange = (value: string) => {
        if (!selectedEventData) return;

+        const numericValue = parseFloat(value);
+        if (isNaN(numericValue)) return;
+
+        const updatedEvent = {
+            ...selectedEventData.data,
+            speed: numericValue
+        } as HumanEventSchema;
+
        const event = updateEvent(
            selectedProduct.productUuid,
            selectedEventData.data.modelUuid,
-            { speed: parseFloat(value) }
+            updatedEvent
        );

        if (event) {
            updateBackend(selectedProduct.productName, selectedProduct.productUuid, projectId || '', event);
        }
+
+        setSpeed(value);
    };

-    const handleClearPoints = () => {
-        if (!currentAction) return;
+    const handleClearPoints = (animationUuid: string) => {
+        if (!currentAction || !selectedPointData || !selectedAction.actionId) return;
+
+        const updatedAnimation = currentAction.animationSequences.find(anim =>
+            anim.animationUuid === animationUuid
+        );
+
+        if (!updatedAnimation) return;
+
+        updatedAnimation.travelPoints = {
+            startPoint: null,
+            endPoint: null
+        };
+
+        const updatedAction = {
+            ...currentAction,
+            animationSequences: currentAction.animationSequences.map(anim =>
+                anim.animationUuid === animationUuid ? updatedAnimation : anim
+            )
+        };
+
+        const updatedPoint = {
+            ...selectedPointData,
+            actions: selectedPointData.actions.map(action =>
+                action.actionUuid === selectedAction.actionId ? updatedAction : action
+            )
+        };

        const event = updateAction(
            selectedProduct.productUuid,
-            currentAction.actionUuid,
-            {
-                travelPoints: {
-                    startPoint: null,
-                    endPoint: null,
-                },
-            }
+            selectedAction.actionId,
+            updatedAction
        );

        if (event) {
            updateBackend(selectedProduct.productName, selectedProduct.productUuid, projectId || '', event);
        }
+
+        setCurrentAction(updatedAction);
+        setSelectedPointData(updatedPoint);
+        if (selectedAnimation?.animationUuid === animationUuid) {
+            setSelectedAnimation(updatedAnimation);
+        }
+    };
+
+    const handleAddAction = () => {
+        if (!selectedEventData || !selectedPointData) return;
+
+        const newAction: HumanAction = {
+            actionUuid: MathUtils.generateUUID(),
+            actionName: `Action ${selectedPointData.actions.length + 1}`,
+            actionType: "worker",
+            animationSequences: [
+                {
+                    animationUuid: MathUtils.generateUUID(),
+                    animationName: 'Animation 1',
+                    animationType: 'behaviour',
+                    animation: null
+                }
+            ],
+            loadCapacity: 1,
+            triggers: [],
+        };
+
+        const event = addAction(
+            selectedProduct.productUuid,
+            selectedEventData.data.modelUuid,
+            selectedEventData.selectedPoint,
+            newAction
+        );
+
+        if (event) {
+            updateBackend(selectedProduct.productName, selectedProduct.productUuid, projectId || '', event);
+        }
+
+        const updatedPoint = { ...selectedPointData, actions: [...selectedPointData.actions, newAction] };
+        setSelectedPointData(updatedPoint);
+        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);
+        const updatedPoint = { ...selectedPointData, actions: newActions };
+        setSelectedPointData(updatedPoint);
+
+        if (selectedAction.actionId === actionUuid) {
+            const nextAction = newActions[index] || newActions[index - 1];
+            if (nextAction) {
+                setSelectedAction(nextAction.actionUuid, nextAction.actionName);
+            } else {
+                clearSelectedAction();
+            }
+        }
+    };
+
+    const handleAddAnimation = () => {
+        if (!currentAction || !selectedPointData || !selectedAction.actionId) return;
+
+        const newAnimation = {
+            animationUuid: MathUtils.generateUUID(),
+            animationName: `Animation ${currentAction.animationSequences.length + 1}`,
+            animationType: 'behaviour' as "behaviour",
+            animation: null
+        };
+
+        const updatedAction = {
+            ...currentAction,
+            animationSequences: [...currentAction.animationSequences, newAnimation]
+        };
+
+        const updatedPoint = {
+            ...selectedPointData,
+            actions: selectedPointData.actions.map(action =>
+                action.actionUuid === selectedAction.actionId ? updatedAction : action
+            )
+        };
+
+        const event = updateAction(
+            selectedProduct.productUuid,
+            selectedAction.actionId,
+            updatedAction
+        );
+
+        if (event) {
+            updateBackend(selectedProduct.productName, selectedProduct.productUuid, projectId || '', event);
+        }
+
+        setCurrentAction(updatedAction);
+        setSelectedPointData(updatedPoint);
+        setSelectedAnimation(newAnimation);
+    };
+
+    const handleRemoveAnimation = (animationUuid: string) => {
+        if (!currentAction || !selectedPointData || !selectedAction.actionId) return;
+
+        const updatedAction = {
+            ...currentAction,
+            animationSequences: currentAction.animationSequences.filter(
+                anim => anim.animationUuid !== animationUuid
+            )
+        };
+
+        const updatedPoint = {
+            ...selectedPointData,
+            actions: selectedPointData.actions.map(action =>
+                action.actionUuid === selectedAction.actionId ? updatedAction : action
+            )
+        };
+
+        const event = updateAction(
+            selectedProduct.productUuid,
+            selectedAction.actionId,
+            updatedAction
+        );
+
+        if (event) {
+            updateBackend(selectedProduct.productName, selectedProduct.productUuid, projectId || '', event);
+        }
+
+        setCurrentAction(updatedAction);
+        setSelectedPointData(updatedPoint);
+
+        if (selectedAnimation?.animationUuid === animationUuid) {
+            setSelectedAnimation(updatedAction.animationSequences[0] || undefined);
+        }
+    };
+
+    const handleAnimationTypeChange = (animationUuid: string, newType: "behaviour" | "animatedTravel") => {
+        if (!currentAction || !selectedPointData || !selectedAction.actionId) return;
+
+        const updatedAnimationSequences = currentAction.animationSequences.map(anim => {
+            if (anim.animationUuid === animationUuid) {
+                const updatedAnim = {
+                    ...anim,
+                    animationType: newType
+                };
+
+                if (newType === 'animatedTravel') {
+                    updatedAnim.travelPoints = {
+                        startPoint: null,
+                        endPoint: null
+                    };
+                } else {
+                    delete updatedAnim.travelPoints;
+                }
+
+                return updatedAnim;
+            }
+            return anim;
+        });
+
+        const updatedAction = {
+            ...currentAction,
+            animationSequences: updatedAnimationSequences
+        };
+
+        const updatedPoint = {
+            ...selectedPointData,
+            actions: selectedPointData.actions.map(action =>
+                action.actionUuid === selectedAction.actionId ? updatedAction : action
+            )
+        };
+
+        const event = updateAction(
+            selectedProduct.productUuid,
+            selectedAction.actionId,
+            updatedAction
+        );
+
+        if (event) {
+            updateBackend(selectedProduct.productName, selectedProduct.productUuid, projectId || '', event);
+        }
+
+        setCurrentAction(updatedAction);
+        setSelectedPointData(updatedPoint);
+
+        if (selectedAnimation?.animationUuid === animationUuid) {
+            const updatedAnimation = updatedAnimationSequences.find(anim =>
+                anim.animationUuid === animationUuid
+            );
+            if (updatedAnimation) {
+                setSelectedAnimation(updatedAnimation);
+            }
+        }
+    };
+
+    const handleAnimationSelect = (animationUuid: string) => {
+        if (!currentAction || !selectedAction.actionId) return;
+
+        const animation = currentAction.animationSequences.find(
+            anim => anim.animationUuid === animationUuid
+        );
+
+        if (animation) {
+            setSelectedAnimation(animation);
+        }
+    };
+
+    const handleRenameAnimation = (animationUuid: string, newName: string) => {
+        if (!currentAction || !selectedPointData || !selectedAction.actionId) return;
+
+        const updatedAnimation = currentAction.animationSequences.find(anim =>
+            anim.animationUuid === animationUuid
+        );
+
+        if (!updatedAnimation) return;
+
+        const renamedAnimation = { ...updatedAnimation, animationName: newName };
+
+        const updatedAction = {
+            ...currentAction,
+            animationSequences: currentAction.animationSequences.map(anim =>
+                anim.animationUuid === animationUuid ? renamedAnimation : anim
+            )
+        };
+
+        const updatedPoint = {
+            ...selectedPointData,
+            actions: selectedPointData.actions.map(action =>
+                action.actionUuid === selectedAction.actionId ? updatedAction : action
+            )
+        };
+
+        const event = updateAction(
+            selectedProduct.productUuid,
+            selectedAction.actionId,
+            updatedAction
+        );
+
+        if (event) {
+            updateBackend(selectedProduct.productName, selectedProduct.productUuid, projectId || '', event);
+        }
+
+        setCurrentAction(updatedAction);
+        setSelectedPointData(updatedPoint);
+        if (selectedAnimation?.animationUuid === animationUuid) {
+            setSelectedAnimation(renamedAnimation);
+        }
    };

    const availableActions = {
-        defaultOption: "animatedTravel",
-        options: ["animatedTravel"],
+        defaultOption: "worker",
+        options: ["worker"],
    };

    return (
@@ -186,21 +514,20 @@ function HumanMechanics() {
                    </div>
                </div>
            </div>
+            <section>
+                <ActionsList
+                    selectedPointData={selectedPointData}
+                    multipleAction
+                    handleAddAction={handleAddAction}
+                    handleDeleteAction={handleDeleteAction}
+                />

-            {currentAction && (
-                <section>
-
-                    <ActionsList
-                        selectedPointData={selectedPointData}
-                        multipleAction={false}
-                        handleAddAction={() => { }}
-                        handleDeleteAction={() => { }}
-                    />
+                {selectedAction.actionId && currentAction && (
                    <div className="selected-actions-details">
                        <div className="selected-actions-header">
                            <RenameInput
-                                value={currentAction.actionName || ""}
-                                onRename={handleRenameAction}
+                                value={selectedAction.actionName || ""}
+                                canEdit={false}
                            />
                        </div>
                        <div className="selected-actions-list">
@@ -211,21 +538,63 @@ function HumanMechanics() {
                                onSelect={handleSelectActionType}
                                disabled={true}
                            />
-                            {activeOption === 'animatedTravel' && (
-                                <PickAndPlaceAction clearPoints={handleClearPoints} />
-                            )}
                        </div>
+                        <AnimationList
+                            animationOptions={animationOptions}
+                            animationSequences={currentAction?.animationSequences || []}
+                            onAddAnimation={handleAddAnimation}
+                            onRemoveAnimation={handleRemoveAnimation}
+                            handleAnimationSelect={handleAnimationSelect}
+                            handleRenameAnimation={handleRenameAnimation}
+                            selectedAnimation={selectedAnimation}
+                        />
+                        {selectedAnimation && (
+                            <>
+                                <div className="selected-actions-header">
+                                    <RenameInput
+                                        value={selectedAnimation.animationName || ""}
+                                        canEdit={false}
+                                    />
+                                </div>
+                                <div className="animation-controls">
+                                    <LabledDropdown
+                                        label="Animation Type"
+                                        defaultOption={selectedAnimation.animationType}
+                                        options={["behaviour", "animatedTravel"]}
+                                        onSelect={(type) =>
+                                            handleAnimationTypeChange(
+                                                selectedAnimation.animationUuid,
+                                                type as "behaviour" | "animatedTravel"
+                                            )
+                                        }
+                                    />
+
+                                    <LabledDropdown
+                                        label="Animation"
+                                        defaultOption={selectedAnimation.animation || ''}
+                                        options={animationOptions}
+                                        onSelect={handleChooseAnimation}
+                                        disabled={true}
+                                    />
+                                    {selectedAnimation.animationType === "animatedTravel" && (
+                                        <PickAndPlaceAction
+                                            clearPoints={() => handleClearPoints(selectedAnimation.animationUuid)}
+                                        />
+                                    )}
+                                </div>
+                            </>
+                        )}
                        <div className="tirgger">
                            <Trigger
                                selectedPointData={selectedPointData as any}
-                                type="Human"
+                                type={"Human"}
                            />
                        </div>
                    </div>
-                </section>
-            )}
+                )}
+            </section>
        </>
    );
 }

-export default HumanMechanics;
+export default HumanMechanics;
--- a/app/src/components/ui/inputs/RenameInput.tsx
+++ b/app/src/components/ui/inputs/RenameInput.tsx
@@ -9,9 +9,10 @@ interface RenameInputProps {
  value: string;
  onRename?: (newText: string) => void;
  checkDuplicate?: (name: string) => boolean;
+  canEdit?: boolean;
 }

-const RenameInput: React.FC<RenameInputProps> = ({ value, onRename, checkDuplicate }) => {
+const RenameInput: React.FC<RenameInputProps> = ({ value, onRename, checkDuplicate, canEdit = true }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [text, setText] = useState(value);
  const [isDuplicate, setIsDuplicate] = useState(false);
@@ -28,13 +29,15 @@ const RenameInput: React.FC<RenameInputProps> = ({ value, onRename, checkDuplica
  }, [text, checkDuplicate]);

  const handleDoubleClick = () => {
-    setIsEditing(true);
-    setTimeout(() => inputRef.current?.focus(), 0);
+    if (canEdit) {
+      setIsEditing(true);
+      setTimeout(() => inputRef.current?.focus(), 0);
+    }
  };

  const handleBlur = () => {
-  
-    if(isDuplicate) return
+
+    if (isDuplicate) return
    setIsEditing(false);
    if (onRename && !isDuplicate) {
      onRename(text);