feat: add ElementDesign component for UI element styling and positioning.

app/src/components/SimulationDashboard/components/element/ElementDesign.tsx

@@ -1,15 +1,7 @@
 import React, { RefObject, useEffect, useState } from "react";
 import DataSourceSelector from "../../../ui/inputs/DataSourceSelector";
 import RenameInput from "../../../ui/inputs/RenameInput";
-import {
+import { AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, ArrowIcon, FlexColumnIcon, FlexRowIcon, FlexRowReverseIcon } from "../../../icons/ExportCommonIcons";
-    AlignJustifyIcon,
-    AlignLeftIcon,
-    AlignRightIcon,
-    ArrowIcon,
-    FlexColumnIcon,
-    FlexRowIcon,
-    FlexRowReverseIcon,
-} from "../../../icons/ExportCommonIcons";
 import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
 import InputRange from "../../../ui/inputs/InputRange";
 import { getAlphaFromRgba, hexToRgba, rgbaToHex } from "../../functions/helpers/colorHandlers";
@@ -24,35 +16,15 @@ interface ElementDesignProps {
     selectedBlock: string;
     selectedElement: string;
     updateElementStyle: (blockId: string, elementId: string, style: ExtendedCSSProperties) => void;
-    updateElementSize: (
+    updateElementSize: (blockId: string, elementId: string, size: { width: number; height: number }) => void;
-        blockId: string,
+    updateElementPosition: (blockId: string, elementId: string, position: { x: number; y: number }) => void;
-        elementId: string,
+    updateElementPositionType: (blockId: string, elementId: string, positionType: "relative" | "absolute" | "fixed") => void;
-        size: { width: number; height: number }
-    ) => void;
-    updateElementPosition: (
-        blockId: string,
-        elementId: string,
-        position: { x: number; y: number }
-    ) => void;
-    updateElementPositionType: (
-        blockId: string,
-        elementId: string,
-        positionType: "relative" | "absolute" | "fixed"
-    ) => void;
     updateElementZIndex: (blockId: string, elementId: string, zIndex: number) => void;
-    updateElementData: (
+    updateElementData: (blockId: string, elementId: string, updates: Partial<ElementDataBinding>) => void;
-        blockId: string,
-        elementId: string,
-        updates: Partial<ElementDataBinding>
-    ) => void;
     updateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => void;
     updateGraphTitle: (blockId: string, elementId: string, title: string) => void;
     updateGraphType: (blockId: string, elementId: string, type: GraphTypes) => void;
-    updateDataType: (
+    updateDataType: (blockId: string, elementId: string, dataType: "single-machine" | "multiple-machine") => void;
-        blockId: string,
-        elementId: string,
-        dataType: "single-machine" | "multiple-machine"
-    ) => void;
     updateCommonValue: (blockId: string, elementId: string, commonValue: string) => void;
     updateDataValue: (blockId: string, elementId: string, dataValue: string | string[]) => void;
     updateDataSource: (blockId: string, elementId: string, dataSource: string | string[]) => void;
@@ -76,9 +48,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
     const [color, setColor] = useState("#000000");
 
     useEffect(() => {
-        setColor(
+        setColor(rgbaToHex(getCurrentElementStyleValue(currentElement, "backgroundColor") || "#000000"));
-            rgbaToHex(getCurrentElementStyleValue(currentElement, "backgroundColor") || "#000000")
-        );
     }, [currentElement]);
 
     return (
@@ -95,11 +65,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
                             { id: "radar", label: "Radar Chart" },
                         ]}
                         onSelect={(newValue) => {
-                            updateGraphType(
+                            updateGraphType(selectedBlock, selectedElement, newValue.id as GraphTypes);
-                                selectedBlock,
-                                selectedElement,
-                                newValue.id as GraphTypes
-                            );
                         }}
                         showEyeDropper={false}
                     />
@@ -112,15 +78,8 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
                     {["relative", "absolute"].map((position) => (
                         <div
                             key={position}
-                            className={`type ${currentElement.positionType === position ? "active" : ""
+                            className={`type ${currentElement.positionType === position ? "active" : ""}`}
-                                }`}
+                            onClick={() => updateElementPositionType(selectedBlock, selectedElement, position as "relative" | "absolute" | "fixed")}
-                            onClick={() =>
-                                updateElementPositionType(
-                                    selectedBlock,
-                                    selectedElement,
-                                    position as "relative" | "absolute" | "fixed"
-                                )
-                            }
                         >
                             {position.charAt(0).toUpperCase() + position.slice(1)}
                         </div>
@@ -129,48 +88,16 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
                 <div className="position-canvas">
                     <div className="canvas">
                         <div className="value padding-top">
-                            <RenameInput
+                            <RenameInput value={getCurrentElementStyleValue(currentElement, "padding") ? String(getCurrentElementStyleValue(currentElement, "padding")) : "120"} />
-                                value={
-                                    getCurrentElementStyleValue(currentElement, "padding")
-                                        ? String(
-                                            getCurrentElementStyleValue(currentElement, "padding")
-                                        )
-                                        : "120"
-                                }
-                            />
                         </div>
                         <div className="value padding-right">
-                            <RenameInput
+                            <RenameInput value={getCurrentElementStyleValue(currentElement, "padding") ? String(getCurrentElementStyleValue(currentElement, "padding")) : "120"} />
-                                value={
-                                    getCurrentElementStyleValue(currentElement, "padding")
-                                        ? String(
-                                            getCurrentElementStyleValue(currentElement, "padding")
-                                        )
-                                        : "120"
-                                }
-                            />
                         </div>
                         <div className="value padding-bottom">
-                            <RenameInput
+                            <RenameInput value={getCurrentElementStyleValue(currentElement, "padding") ? String(getCurrentElementStyleValue(currentElement, "padding")) : "120"} />
-                                value={
-                                    getCurrentElementStyleValue(currentElement, "padding")
-                                        ? String(
-                                            getCurrentElementStyleValue(currentElement, "padding")
-                                        )
-                                        : "120"
-                                }
-                            />
                         </div>
                         <div className="value padding-left">
-                            <RenameInput
+                            <RenameInput value={getCurrentElementStyleValue(currentElement, "padding") ? String(getCurrentElementStyleValue(currentElement, "padding")) : "120"} />
-                                value={
-                                    getCurrentElementStyleValue(currentElement, "padding")
-                                        ? String(
-                                            getCurrentElementStyleValue(currentElement, "padding")
-                                        )
-                                        : "120"
-                                }
-                            />
                         </div>
                     </div>
                 </div>
@@ -178,10 +105,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
                 <div className="alignments-section">
                     <div className="section">
                         <div
-                            className={`icon ${getCurrentElementStyleValue(currentElement, "textAlign") === "right"
+                            className={`icon ${getCurrentElementStyleValue(currentElement, "textAlign") === "right" ? "active" : ""}`}
-                                ? "active"
-                                : ""
-                                }`}
                             onClick={() =>
                                 updateElementStyle(selectedBlock, selectedElement, {
                                     textAlign: "right",
@@ -191,11 +115,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
                             <AlignRightIcon />
                         </div>
                         <div
-                            className={`icon ${getCurrentElementStyleValue(currentElement, "textAlign") ===
+                            className={`icon ${getCurrentElementStyleValue(currentElement, "textAlign") === "justify" ? "active" : ""}`}
-                                "justify"
-                                ? "active"
-                                : ""
-                                }`}
                             onClick={() =>
                                 updateElementStyle(selectedBlock, selectedElement, {
                                     textAlign: "justify",
@@ -205,10 +125,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
                             <AlignJustifyIcon />
                         </div>
                         <div
-                            className={`icon ${getCurrentElementStyleValue(currentElement, "textAlign") === "left"
+                            className={`icon ${getCurrentElementStyleValue(currentElement, "textAlign") === "left" ? "active" : ""}`}
-                                ? "active"
-                                : ""
-                                }`}
                             onClick={() =>
                                 updateElementStyle(selectedBlock, selectedElement, {
                                     textAlign: "left",
@@ -220,10 +137,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
                     </div>
                     <div className="section">
                         <div
-                            className={`icon ${((currentElement.style.flexDirection as string) || "row") === "row"
+                            className={`icon ${((currentElement.style.flexDirection as string) || "row") === "row" ? "active" : ""}`}
-                                ? "active"
-                                : ""
-                                }`}
                             onClick={() =>
                                 updateElementStyle(selectedBlock, selectedElement, {
                                     flexDirection: "row",
@@ -233,11 +147,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
                             <FlexRowIcon />
                         </div>
                         <div
-                            className={`icon ${((currentElement.style.flexDirection as string) || "row") ===
+                            className={`icon ${((currentElement.style.flexDirection as string) || "row") === "column" ? "active" : ""}`}
-                                "column"
-                                ? "active"
-                                : ""
-                                }`}
                             onClick={() =>
                                 updateElementStyle(selectedBlock, selectedElement, {
                                     flexDirection: "column",
@@ -247,11 +157,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
                             <FlexColumnIcon />
                         </div>
                         <div
-                            className={`icon ${((currentElement.style.flexDirection as string) || "row") ===
+                            className={`icon ${((currentElement.style.flexDirection as string) || "row") === "row-reverse" ? "active" : ""}`}
-                                "row-reverse"
-                                ? "active"
-                                : ""
-                                }`}
                             onClick={() =>
                                 updateElementStyle(selectedBlock, selectedElement, {
                                     flexDirection: "row-reverse",
@@ -261,11 +167,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
                             <FlexRowReverseIcon />
                         </div>
                         <div
-                            className={`icon ${((currentElement.style.flexDirection as string) || "row") ===
+                            className={`icon ${((currentElement.style.flexDirection as string) || "row") === "column-reverse" ? "active" : ""}`}
-                                "column-reverse"
-                                ? "active"
-                                : ""
-                                }`}
                             onClick={() =>
                                 updateElementStyle(selectedBlock, selectedElement, {
                                     flexDirection: "column-reverse",
@@ -282,22 +184,12 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
                             label="Layer"
                             value={String(currentElement.zIndex || 1)}
                             placeholder={"Layer"}
-                            onChange={(newValue: string) =>
+                            onChange={(newValue: string) => updateElementZIndex(selectedBlock, selectedElement, Number(newValue))}
-                                updateElementZIndex(
-                                    selectedBlock,
-                                    selectedElement,
-                                    Number(newValue)
-                                )
-                            }
                         />
                         <button
                             className="increase-z"
                             onClick={() => {
-                                updateElementZIndex(
+                                updateElementZIndex(selectedBlock, selectedElement, Number(currentElement.zIndex ? currentElement.zIndex + 1 : 1));
-                                    selectedBlock,
-                                    selectedElement,
-                                    Number(currentElement.zIndex ? currentElement.zIndex + 1 : 1)
-                                );
                             }}
                         >
                             <ArrowIcon />
@@ -305,11 +197,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
                         <button
                             className="decrease-z"
                             onClick={() => {
-                                updateElementZIndex(
+                                updateElementZIndex(selectedBlock, selectedElement, Number(currentElement.zIndex ? currentElement.zIndex - 1 : 1));
-                                    selectedBlock,
-                                    selectedElement,
-                                    Number(currentElement.zIndex ? currentElement.zIndex - 1 : 1)
-                                );
                             }}
                         >
                             <ArrowIcon />
@@ -353,10 +241,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
                     />
                     <InputWithDropDown
                         label="Width"
-                        value={String(
+                        value={String(currentElement.size?.width ?? (currentElement.type === "graph" ? 400 : 200))}
-                            currentElement.size?.width ??
-                            (currentElement.type === "graph" ? 400 : 200)
-                        )}
                         placeholder={"Width"}
                         onChange={(newValue: string) => {
                             updateElementSize(selectedBlock, selectedElement, {
@@ -367,10 +252,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
                     />
                     <InputWithDropDown
                         label="Height"
-                        value={String(
+                        value={String(currentElement.size?.height ?? (currentElement.type === "graph" ? 200 : 60))}
-                            currentElement.size?.height ??
-                            (currentElement.type === "graph" ? 200 : 60)
-                        )}
                         placeholder={"Height"}
                         onChange={(newValue: string) => {
                             updateElementSize(selectedBlock, selectedElement, {
@@ -380,6 +262,17 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
                         }}
                     />
                 </div>
+                <InputRange
+                    label={"Border Radius"}
+                    min={0}
+                    max={8}
+                    value={parseInt(getCurrentElementStyleValue(currentElement, "borderRadius") || "") || 8}
+                    onChange={(newValue: number) => {
+                        updateElementStyle(selectedBlock, selectedElement, {
+                            borderRadius: Number(newValue),
+                        });
+                    }}
+                />
             </div>
 
             <div className="design-section element-color">
@@ -443,21 +336,6 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
                         updateElementStyle(selectedBlock, selectedElement, { backdropFilter: `blur(${Number(value)}px)` });
                     }}
                 />
-                <InputRange
-                    label={"Border Radius"}
-                    min={0}
-                    max={8}
-                    value={
-                        parseInt(
-                            getCurrentElementStyleValue(currentElement, "borderRadius") || ""
-                        ) || 8
-                    }
-                    onChange={(newValue: number) => {
-                        updateElementStyle(selectedBlock, selectedElement, {
-                            borderRadius: Number(newValue),
-                        });
-                    }}
-                />
             </div>
         </div>
     );