From 0de82748291bfb64e5c8c67b96c8178cc0e40c88 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Tue, 23 Dec 2025 11:11:10 +0530
Subject: [PATCH] feat: Implement ElementEditor component to manage UI element
 properties, design, data, and provide a draggable panel.

---
 .../components/element/ElementEditor.tsx      | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx b/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
index 1802ffa..354d9ea 100644
--- a/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
+++ b/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
@@ -56,13 +56,19 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
     const { getElementById } = simulationDashBoardStore();
     const element = getElementById(selectedBlock, selectedElement);
     const [selectType, setSelectType] = useState("design");
-    const [selectDataMapping, setSelectDataMapping] = useState<"singleMachine" | "multipleMachine" | "global">(
-        element?.type === "graph" && element.dataBinding?.dataType === "multiple-machine"
-            ? "multipleMachine"
-            : element?.type === "graph" && element.dataBinding?.dataType === "global"
-            ? "global"
-            : "singleMachine"
-    );
+    const [selectDataMapping, setSelectDataMapping] = useState<"singleMachine" | "multipleMachine" | "global">("singleMachine");
+
+    useEffect(() => {
+        if (element?.type === "graph") {
+            if (element.dataBinding?.dataType === "multiple-machine") {
+                setSelectDataMapping("multipleMachine");
+            } else if (element.dataBinding?.dataType === "global") {
+                setSelectDataMapping("global");
+            } else {
+                setSelectDataMapping("singleMachine");
+            }
+        }
+    }, [element?.elementUuid, element?.dataBinding?.dataType, element?.type]);
 
     // Use shared position from VisualizationStore
     const { editorPosition, setEditorPosition } = useVisualizationStore();