Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: implement UI for editing simulation block properties and element design.

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-12-20 17:26:51 +05:30
parent 5fcb298c35
commit b10afc975c
4 changed files with 100 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
View File

@@ -26,7 +26,17 @@ interface BlockEditorProps {
handleRemoveBlock: (blockId: string) => void; 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"); const [color, setColor] = useState("#000000");
useEffect(() => { useEffect(() => {
@@ -227,32 +237,6 @@ const BlockEditor: React.FC<BlockEditorProps> = ({ blockEditorRef, currentBlock,
</div> </div>
<div className="design-section-wrapper"> <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="design-section">
<div className="section-header">Position</div> <div className="section-header">Position</div>
<div className="select-type"> <div className="select-type">
@@ -319,8 +303,58 @@ const BlockEditor: React.FC<BlockEditorProps> = ({ blockEditorRef, currentBlock,
</div> </div>
</div> </div>
<div className="design-section"> <div className="design-section appearance">
<div className="section-header">Apperance</div> <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 <InputRange
label={"Border Radius"} label={"Border Radius"}
min={0} min={0}

21
app/src/components/SimulationDashboard/components/element/ElementDesign.tsx
View File

@@ -52,19 +52,22 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
setColor(rgbaToHex(getCurrentElementStyleValue(currentElement, "backgroundColor") || "#000000")); setColor(rgbaToHex(getCurrentElementStyleValue(currentElement, "backgroundColor") || "#000000"));
}, [currentElement]); }, [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 ( return (
<div style={{ display: "flex", flexDirection: "column", gap: 6 }} ref={elementEditorRef}> <div style={{ display: "flex", flexDirection: "column", gap: 6 }} ref={elementEditorRef}>
{element?.type === "graph" && ( {element?.type === "graph" && (
<div className="design-section"> <div className="design-section">
<DataSourceSelector <DataSourceSelector
label={"Chart Type"} label={"Chart Type"}
options={[ options={graphOptions}
{ id: "line", label: "Line Chart" }, selected={graphOptions.find((option) => option.id === currentElement.graphType)?.label}
{ id: "bar", label: "Bar Chart" },
{ id: "pie", label: "Pie Chart" },
{ id: "area", label: "Area Chart" },
{ id: "radar", label: "Radar Chart" },
]}
onSelect={(newValue) => { onSelect={(newValue) => {
updateGraphType(selectedBlock, selectedElement, newValue.id as GraphTypes); updateGraphType(selectedBlock, selectedElement, newValue.id as GraphTypes);
}} }}
@@ -218,6 +221,8 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
<div className="design-section appearance"> <div className="design-section appearance">
<div className="section-header">Appearance</div> <div className="section-header">Appearance</div>
<div className="design-datas-wrapper"> <div className="design-datas-wrapper">
{currentElement.positionType === "absolute" && (
<>
<InputWithDropDown <InputWithDropDown
label="X-Position" label="X-Position"
value={String(currentElement.position?.x ?? 0)} value={String(currentElement.position?.x ?? 0)}
@@ -240,6 +245,8 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
}); });
}} }}
/> />
</>
)}
<InputWithDropDown <InputWithDropDown
label="Width" label="Width"
value={String(currentElement.size?.width ?? (currentElement.type === "graph" ? 400 : 200))} value={String(currentElement.size?.width ?? (currentElement.type === "graph" ? 400 : 200))}

1
app/src/components/SimulationDashboard/components/element/ElementDropdown.tsx
View File

@@ -27,7 +27,6 @@ const ElementDropdown: React.FC<ElementDropdownProps> = ({ showElementDropdown,
key={elementType.label} key={elementType.label}
onClick={() => { onClick={() => {
handleAddElement(showElementDropdown, elementType.type, elementType.graphType); handleAddElement(showElementDropdown, elementType.type, elementType.graphType);
console.log('showElementDropdown: ', showElementDropdown);
}} }}
className="dropdown-button" className="dropdown-button"
> >

2
app/src/types/simulationDashboard.d.ts vendored
View File

@@ -11,7 +11,7 @@ type ElementDataBinding = {
dataSource?: string | string[]; dataSource?: string | string[];
dataValue?: string | string[]; dataValue?: string | string[];
commonValue?: string; commonValue?: string;
dataType?: "single-machine" | "multiple-machine"; dataType?: DataType;
} }
type Position = { type Position = {