From b10afc975c6bc186126729bce3e9a8256d60976d Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Sat, 20 Dec 2025 17:26:51 +0530
Subject: [PATCH] feat: implement UI for editing simulation block properties
 and element design.

---
 .../components/block/BlockEditor.tsx          | 92 +++++++++++++------
 .../components/element/ElementDesign.tsx      | 65 +++++++------
 .../components/element/ElementDropdown.tsx    |  1 -
 app/src/types/simulationDashboard.d.ts        |  2 +-
 4 files changed, 100 insertions(+), 60 deletions(-)

diff --git a/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx b/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
index 3d4e769..713aafd 100644
--- a/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
+++ b/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
@@ -26,7 +26,17 @@ interface BlockEditorProps {
     handleRemoveBlock: (blockId: string) => void;
 }
 
-const BlockEditor: React.FC<BlockEditorProps> = ({ blockEditorRef, currentBlock, selectedBlock, updateBlockStyle, updateBlockSize, updateBlockPositionType, updateBlockZIndex, handleRemoveBlock }) => {
+const BlockEditor: React.FC<BlockEditorProps> = ({
+    blockEditorRef,
+    currentBlock,
+    selectedBlock,
+    updateBlockStyle,
+    updateBlockSize,
+    updateBlockPosition,
+    updateBlockPositionType,
+    updateBlockZIndex,
+    handleRemoveBlock,
+}) => {
     const [color, setColor] = useState("#000000");
 
     useEffect(() => {
@@ -227,32 +237,6 @@ const BlockEditor: React.FC<BlockEditorProps> = ({ blockEditorRef, currentBlock,
             </div>
 
             <div className="design-section-wrapper">
-                <div className="design-section">
-                    <div className="section-header">Size</div>
-                    <InputWithDropDown
-                        label="Width"
-                        value={String(currentBlock.size?.width || 400)} // Ensure the value is a string
-                        placeholder={"Width"}
-                        onChange={(newValue) => {
-                            updateBlockSize(selectedBlock, {
-                                ...currentBlock.size!,
-                                width: Number(newValue), // Make sure to convert the string back to a number here
-                            });
-                        }}
-                    />
-                    <InputWithDropDown
-                        label="Height"
-                        value={String(currentBlock.size?.height || 300)}
-                        placeholder={"Width"}
-                        onChange={(newValue) => {
-                            updateBlockSize(selectedBlock, {
-                                ...currentBlock.size!,
-                                height: Number(newValue),
-                            });
-                        }}
-                    />
-                </div>
-
                 <div className="design-section">
                     <div className="section-header">Position</div>
                     <div className="select-type">
@@ -319,8 +303,58 @@ const BlockEditor: React.FC<BlockEditorProps> = ({ blockEditorRef, currentBlock,
                     </div>
                 </div>
 
-                <div className="design-section">
-                    <div className="section-header">Apperance</div>
+                <div className="design-section appearance">
+                    <div className="section-header">Appearance</div>
+                    <div className="design-datas-wrapper">
+                        {currentBlock.positionType === "absolute" && (
+                            <>
+                                <InputWithDropDown
+                                    label="X-Position"
+                                    value={String(currentBlock.position?.x ?? 0)}
+                                    placeholder={"X"}
+                                    onChange={(newValue: string) => {
+                                        updateBlockPosition(selectedBlock, {
+                                            ...(currentBlock.position || { x: 0, y: 0 }),
+                                            x: Number(newValue),
+                                        });
+                                    }}
+                                />
+                                <InputWithDropDown
+                                    label="Y-Position"
+                                    value={String(currentBlock.position?.y ?? 0)}
+                                    placeholder={"Y"}
+                                    onChange={(newValue: string) => {
+                                        updateBlockPosition(selectedBlock, {
+                                            ...(currentBlock.position || { x: 0, y: 0 }),
+                                            y: Number(newValue),
+                                        });
+                                    }}
+                                />
+                            </>
+                        )}
+                        <InputWithDropDown
+                            label="Width"
+                            value={String(currentBlock.size?.width || 400)}
+                            placeholder={"Width"}
+                            onChange={(newValue) => {
+                                updateBlockSize(selectedBlock, {
+                                    ...currentBlock.size!,
+                                    width: Number(newValue),
+                                });
+                            }}
+                        />
+                        <InputWithDropDown
+                            label="Height"
+                            value={String(currentBlock.size?.height || 300)}
+                            placeholder={"Height"}
+                            onChange={(newValue) => {
+                                updateBlockSize(selectedBlock, {
+                                    ...currentBlock.size!,
+                                    height: Number(newValue),
+                                });
+                            }}
+                        />
+                    </div>
                     <InputRange
                         label={"Border Radius"}
                         min={0}
diff --git a/app/src/components/SimulationDashboard/components/element/ElementDesign.tsx b/app/src/components/SimulationDashboard/components/element/ElementDesign.tsx
index 4936d08..fc36e45 100644
--- a/app/src/components/SimulationDashboard/components/element/ElementDesign.tsx
+++ b/app/src/components/SimulationDashboard/components/element/ElementDesign.tsx
@@ -52,19 +52,22 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
         setColor(rgbaToHex(getCurrentElementStyleValue(currentElement, "backgroundColor") || "#000000"));
     }, [currentElement]);
 
+    const graphOptions = [
+        { id: "line", label: "Line Chart" },
+        { id: "bar", label: "Bar Chart" },
+        { id: "pie", label: "Pie Chart" },
+        { id: "area", label: "Area Chart" },
+        { id: "radar", label: "Radar Chart" },
+    ];
+
     return (
         <div style={{ display: "flex", flexDirection: "column", gap: 6 }} ref={elementEditorRef}>
             {element?.type === "graph" && (
                 <div className="design-section">
                     <DataSourceSelector
                         label={"Chart Type"}
-                        options={[
-                            { id: "line", label: "Line Chart" },
-                            { id: "bar", label: "Bar Chart" },
-                            { id: "pie", label: "Pie Chart" },
-                            { id: "area", label: "Area Chart" },
-                            { id: "radar", label: "Radar Chart" },
-                        ]}
+                        options={graphOptions}
+                        selected={graphOptions.find((option) => option.id === currentElement.graphType)?.label}
                         onSelect={(newValue) => {
                             updateGraphType(selectedBlock, selectedElement, newValue.id as GraphTypes);
                         }}
@@ -218,28 +221,32 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
             <div className="design-section appearance">
                 <div className="section-header">Appearance</div>
                 <div className="design-datas-wrapper">
-                    <InputWithDropDown
-                        label="X-Position"
-                        value={String(currentElement.position?.x ?? 0)}
-                        placeholder={"X"}
-                        onChange={(newValue: string) => {
-                            updateElementPosition(selectedBlock, selectedElement, {
-                                ...(currentElement.position || { x: 0, y: 0 }),
-                                x: Number(newValue),
-                            });
-                        }}
-                    />
-                    <InputWithDropDown
-                        label="Y-Position"
-                        value={String(currentElement.position?.y ?? 0)}
-                        placeholder={"Y"}
-                        onChange={(newValue: string) => {
-                            updateElementPosition(selectedBlock, selectedElement, {
-                                ...(currentElement.position || { x: 0, y: 0 }),
-                                y: Number(newValue),
-                            });
-                        }}
-                    />
+                    {currentElement.positionType === "absolute" && (
+                        <>
+                            <InputWithDropDown
+                                label="X-Position"
+                                value={String(currentElement.position?.x ?? 0)}
+                                placeholder={"X"}
+                                onChange={(newValue: string) => {
+                                    updateElementPosition(selectedBlock, selectedElement, {
+                                        ...(currentElement.position || { x: 0, y: 0 }),
+                                        x: Number(newValue),
+                                    });
+                                }}
+                            />
+                            <InputWithDropDown
+                                label="Y-Position"
+                                value={String(currentElement.position?.y ?? 0)}
+                                placeholder={"Y"}
+                                onChange={(newValue: string) => {
+                                    updateElementPosition(selectedBlock, selectedElement, {
+                                        ...(currentElement.position || { x: 0, y: 0 }),
+                                        y: Number(newValue),
+                                    });
+                                }}
+                            />
+                        </>
+                    )}
                     <InputWithDropDown
                         label="Width"
                         value={String(currentElement.size?.width ?? (currentElement.type === "graph" ? 400 : 200))}
diff --git a/app/src/components/SimulationDashboard/components/element/ElementDropdown.tsx b/app/src/components/SimulationDashboard/components/element/ElementDropdown.tsx
index 1a36182..948eb32 100644
--- a/app/src/components/SimulationDashboard/components/element/ElementDropdown.tsx
+++ b/app/src/components/SimulationDashboard/components/element/ElementDropdown.tsx
@@ -27,7 +27,6 @@ const ElementDropdown: React.FC<ElementDropdownProps> = ({ showElementDropdown,
                     key={elementType.label}
                     onClick={() => {
                         handleAddElement(showElementDropdown, elementType.type, elementType.graphType);
-                        console.log('showElementDropdown: ', showElementDropdown);
                     }}
                     className="dropdown-button"
                 >
diff --git a/app/src/types/simulationDashboard.d.ts b/app/src/types/simulationDashboard.d.ts
index 4cf1b4a..06533eb 100644
--- a/app/src/types/simulationDashboard.d.ts
+++ b/app/src/types/simulationDashboard.d.ts
@@ -11,7 +11,7 @@ type ElementDataBinding = {
     dataSource?: string | string[];
     dataValue?: string | string[];
     commonValue?: string;
-    dataType?: "single-machine" | "multiple-machine";
+    dataType?: DataType;
 }
 
 type Position = {