From 71fdb26e168f2f3c099db943d484bf66293943c8 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Sat, 3 May 2025 13:23:01 +0530
Subject: [PATCH] Refactor trigger handling in Trigger component: update
trigger selection logic and add memoization for performance; enhance
renameTrigger function in useProductStore to return updated event.
---
.../mechanics/roboticArmMechanics.tsx | 10 +-
.../eventProperties/trigger/Trigger.tsx | 148 ++++++++++++------
app/src/store/simulation/useProductStore.ts | 7 +-
3 files changed, 113 insertions(+), 52 deletions(-)
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
index 20ca6fc..c7bd8bc 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
@@ -200,9 +200,8 @@ function RoboticArmMechanics() {
);
}
- const newActions = selectedPointData.actions.filter(
- (a: any) => a.actionUuid !== actionUuid
- );
+ const index = selectedPointData.actions.findIndex(a => a.actionUuid === actionUuid);
+ const newActions = selectedPointData.actions.filter(a => a.actionUuid !== actionUuid);
const updatedPoint = {
...selectedPointData,
@@ -211,8 +210,9 @@ function RoboticArmMechanics() {
setSelectedPointData(updatedPoint);
if (selectedAction.actionId === actionUuid) {
- if (newActions.length > 0) {
- setSelectedAction(newActions[0].actionUuid, newActions[0].actionName);
+ const nextAction = newActions[index] || newActions[index - 1];
+ if (nextAction) {
+ setSelectedAction(nextAction.actionUuid, nextAction.actionName);
} else {
clearSelectedAction();
}
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
index 22b3446..4953374 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx
@@ -20,7 +20,7 @@ type TriggerProps = {
const Trigger = ({ selectedPointData, type }: TriggerProps) => {
const [currentAction, setCurrentAction] = useState<string | undefined>();
const { selectedProduct } = useSelectedProduct();
- const { getActionByUuid, getEventByModelUuid, getPointByUuid, addTrigger, removeTrigger, updateTrigger, renameTrigger, getProductById } = useProductStore();
+ const { getActionByUuid, getEventByModelUuid, getPointByUuid, getTriggerByUuid, addTrigger, removeTrigger, updateTrigger, renameTrigger, getProductById } = useProductStore();
const [triggers, setTriggers] = useState<TriggerSchema[]>([]);
const [selectedTrigger, setSelectedTrigger] = useState<TriggerSchema | undefined>();
const [activeOption, setActiveOption] = useState<"onComplete" | "onStart" | "onStop" | "delay" | "onError">("onComplete");
@@ -43,7 +43,6 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
setCurrentAction(actionUuid);
}, [selectedPointData, selectedProduct, type]);
-
const updateBackend = (
productName: string,
productId: string,
@@ -66,50 +65,27 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
setSelectedTrigger(actionTriggers[0]);
}, [currentAction, selectedProduct]);
- const handleAddTrigger = () => {
- if (!selectedProduct || !currentAction) return;
+ const triggeredModel = useMemo(() => {
+ if (!selectedProduct || !selectedTrigger?.triggeredAsset?.triggeredModel?.modelUuid) return undefined;
+ return getEventByModelUuid(selectedProduct.productId, selectedTrigger.triggeredAsset.triggeredModel.modelUuid);
+ }, [selectedProduct, selectedTrigger]);
- const newTrigger: TriggerSchema = {
- triggerUuid: THREE.MathUtils.generateUUID(),
- triggerName: `New Trigger ${triggers.length + 1}`,
- triggerType: activeOption,
- delay: 0,
- triggeredAsset: null
- };
+ const triggeredPoint = useMemo(() => {
+ if (!selectedProduct || !triggeredModel || !selectedTrigger?.triggeredAsset?.triggeredPoint?.pointUuid) return undefined;
+ return getPointByUuid(
+ selectedProduct.productId,
+ triggeredModel.modelUuid,
+ selectedTrigger.triggeredAsset.triggeredPoint.pointUuid
+ );
+ }, [selectedProduct, triggeredModel, selectedTrigger]);
- addTrigger(selectedProduct.productId, currentAction, newTrigger);
- setSelectedTrigger(newTrigger);
- };
-
- const handleRemoveTrigger = (triggerUuid: string) => {
- if (!selectedProduct) return;
- removeTrigger(selectedProduct.productId, triggerUuid);
- if (selectedTrigger?.triggerUuid === triggerUuid) {
- const remainingTriggers = triggers.filter(t => t.triggerUuid !== triggerUuid);
- setSelectedTrigger(remainingTriggers[0]);
- }
- };
-
- const handleTriggerRename = (triggerUuid: string, newName: string) => {
- if (!selectedProduct) return;
- renameTrigger(selectedProduct.productId, triggerUuid, newName);
- };
-
- const handleTriggerTypeChange = (option: string) => {
- if (!selectedTrigger || !selectedProduct) return;
-
- const validTypes: Array<TriggerSchema['triggerType']> = ["onComplete", "onStart", "onStop", "delay", "onError"];
- if (!validTypes.includes(option as TriggerSchema['triggerType'])) return;
-
- setActiveOption(option as TriggerSchema['triggerType']);
- updateTrigger(selectedProduct.productId, selectedTrigger.triggerUuid, {
- triggerType: option as TriggerSchema['triggerType']
- });
- };
-
- const triggeredModel = getEventByModelUuid(selectedProduct.productId, selectedTrigger?.triggeredAsset?.triggeredModel?.modelUuid || "");
- const triggeredPoint = getPointByUuid(selectedProduct.productId, triggeredModel?.modelUuid || '', selectedTrigger?.triggeredAsset?.triggeredPoint?.pointUuid || "");
- const triggeredAction = getActionByUuid(selectedProduct.productId, selectedTrigger?.triggeredAsset?.triggeredAction?.actionUuid || '');
+ const triggeredAction = useMemo(() => {
+ if (!selectedProduct || !selectedTrigger?.triggeredAsset?.triggeredAction?.actionUuid) return undefined;
+ return getActionByUuid(
+ selectedProduct.productId,
+ selectedTrigger.triggeredAsset.triggeredAction.actionUuid
+ );
+ }, [selectedProduct, selectedTrigger]);
const modelOptions = getProductById(selectedProduct.productId)?.eventDatas || [];
@@ -160,6 +136,9 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
});
if (event) {
+ const updatedTrigger = getTriggerByUuid(selectedProduct.productId, triggerUuid);
+ setSelectedTrigger(updatedTrigger);
+
updateBackend(
selectedProduct.productName,
selectedProduct.productId,
@@ -172,8 +151,7 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
const handlePointSelect = (option: string, triggerUuid: string) => {
if (!selectedProduct || !selectedTrigger) return;
- const pointUuid = pointOptions.find(p => `Point ${p.uuid.slice(0, 5)}` === option)?.uuid;
-
+ const pointUuid = pointOptions.find(p => `Point ${p.uuid.slice(0, 4)}` === option)?.uuid;
if (!pointUuid) return;
if (selectedTrigger.triggeredAsset?.triggeredModel) {
@@ -189,6 +167,9 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
});
if (event) {
+ const updatedTrigger = getTriggerByUuid(selectedProduct.productId, triggerUuid);
+ setSelectedTrigger(updatedTrigger);
+
updateBackend(
selectedProduct.productName,
selectedProduct.productId,
@@ -199,6 +180,7 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
}
};
+
const handleActionSelect = (option: string, triggerUuid: string) => {
if (!selectedProduct || !selectedTrigger) return;
@@ -228,6 +210,80 @@ const Trigger = ({ selectedPointData, type }: TriggerProps) => {
}
};
+ const handleAddTrigger = () => {
+ if (!selectedProduct || !currentAction) return;
+
+ const newTrigger: TriggerSchema = {
+ triggerUuid: THREE.MathUtils.generateUUID(),
+ triggerName: `New Trigger ${triggers.length + 1}`,
+ triggerType: activeOption,
+ delay: 0,
+ triggeredAsset: null
+ };
+
+ addTrigger(selectedProduct.productId, currentAction, newTrigger);
+ setSelectedTrigger(newTrigger);
+ };
+
+ const handleRemoveTrigger = (triggerUuid: string) => {
+ if (!selectedProduct || !currentAction) return;
+
+ const event = removeTrigger(selectedProduct.productId, triggerUuid);
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
+
+ const index = triggers.findIndex(t => t.triggerUuid === triggerUuid);
+ const newTriggers = triggers.filter(t => t.triggerUuid !== triggerUuid);
+ setTriggers(newTriggers);
+
+ if (selectedTrigger?.triggerUuid === triggerUuid) {
+ const nextTrigger = newTriggers[index] || newTriggers[index - 1];
+ setSelectedTrigger(nextTrigger);
+ }
+ };
+
+ const handleTriggerRename = (triggerUuid: string, newName: string) => {
+ if (!selectedProduct) return;
+ const event = renameTrigger(selectedProduct.productId, triggerUuid, newName);
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
+ };
+
+ const handleTriggerTypeChange = (option: string) => {
+ if (!selectedTrigger || !selectedProduct) return;
+
+ const validTypes: Array<TriggerSchema['triggerType']> = ["onComplete", "onStart", "onStop", "delay", "onError"];
+ if (!validTypes.includes(option as TriggerSchema['triggerType'])) return;
+
+ setActiveOption(option as TriggerSchema['triggerType']);
+ const event = updateTrigger(selectedProduct.productId, selectedTrigger.triggerUuid, {
+ triggerType: option as TriggerSchema['triggerType']
+ });
+
+ if (event) {
+ updateBackend(
+ selectedProduct.productName,
+ selectedProduct.productId,
+ organization,
+ event
+ );
+ }
+ };
+
return (
<div className="trigger-wrapper">
<div className="header">
diff --git a/app/src/store/simulation/useProductStore.ts b/app/src/store/simulation/useProductStore.ts
index 3fbaa76..c0be958 100644
--- a/app/src/store/simulation/useProductStore.ts
+++ b/app/src/store/simulation/useProductStore.ts
@@ -56,7 +56,7 @@ type ProductsStore = {
// Renaming functions
renameProduct: (productId: string, newName: string) => void;
renameAction: (productId: string, actionUuid: string, newName: string) => EventsSchema | undefined;
- renameTrigger: (productId: string, triggerUuid: string, newName: string) => void;
+ renameTrigger: (productId: string, triggerUuid: string, newName: string) => EventsSchema | undefined;
// Helper functions
getProductById: (productId: string) => { productName: string; productId: string; eventDatas: EventsSchema[] } | undefined;
@@ -482,6 +482,7 @@ export const useProductStore = create<ProductsStore>()(
},
renameTrigger: (productId, triggerUuid, newName) => {
+ let updatedEvent: EventsSchema | undefined;
set((state) => {
const product = state.products.find(p => p.productId === productId);
if (product) {
@@ -492,6 +493,7 @@ export const useProductStore = create<ProductsStore>()(
const trigger = point.action.triggers.find(t => t.triggerUuid === triggerUuid);
if (trigger) {
trigger.triggerName = newName;
+ updatedEvent = JSON.parse(JSON.stringify(event));
return;
}
}
@@ -502,6 +504,7 @@ export const useProductStore = create<ProductsStore>()(
const trigger = point.action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
if (trigger) {
trigger.triggerName = newName;
+ updatedEvent = JSON.parse(JSON.stringify(event));
return;
}
} else if ('actions' in point) {
@@ -510,6 +513,7 @@ export const useProductStore = create<ProductsStore>()(
const trigger = action.triggers.find((t: any) => t.triggerUuid === triggerUuid);
if (trigger) {
trigger.triggerName = newName;
+ updatedEvent = JSON.parse(JSON.stringify(event));
return;
}
}
@@ -519,6 +523,7 @@ export const useProductStore = create<ProductsStore>()(
}
}
});
+ return updatedEvent;
},
// Helper functions