feat: add BlockEditor, ElementDesign, and ElementEditor components for simulation dashboard.

This commit is contained in:
2025-12-20 16:52:49 +05:30
parent 4c7e4779a8
commit 341c9e7945
3 changed files with 83 additions and 91 deletions

View File

@@ -309,6 +309,24 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
</div>
</div>
<div className="design-section">
<div className="section-header">Apperance</div>
<InputRange
label={"Border Radius"}
min={0}
max={100}
value={(
parseInt(getCurrentBlockStyleValue(currentBlock, "borderRadius")) ||
8
)}
onChange={(newValue) => {
updateBlockStyle(selectedBlock, {
borderRadius: Number(newValue),
});
}}
/>
</div>
<div className="design-section">
<div className="section-header">Background</div>
@@ -363,20 +381,6 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
value={parseInt(getCurrentBlockStyleValue(currentBlock, "backdropFilter")?.match(/\d+/)?.[0] || "10")}
onChange={(value: number) => handleBlurAmountChange(selectedBlock, updateBlockStyle, Number(value))}
/>
<InputRange
label={"Border Radius"}
min={0}
max={100}
value={(
parseInt(getCurrentBlockStyleValue(currentBlock, "borderRadius")) ||
8
)}
onChange={(newValue) => {
updateBlockStyle(selectedBlock, {
borderRadius: Number(newValue),
});
}}
/>
</div>
</div>
</div>

View File

@@ -321,21 +321,6 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
updateElementStyle(selectedBlock, selectedElement, { backdropFilter: `blur(${Number(value)}px)` });
}}
/>
<InputRange
label={"Border Radius"}
min={0}
max={100}
value={
parseInt(
getCurrentElementStyleValue(currentElement, "borderRadius") || ""
) || 8
}
onChange={(newValue: number) => {
updateElementStyle(selectedBlock, selectedElement, {
borderRadius: Number(newValue),
});
}}
/>
</div>
</div>
);

View File

@@ -520,7 +520,9 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
{selectType === "data" && (
<div className="data-details">
{element?.type === "label-value" && (
<div className="data-wrapper">
<>
<div className="design-section">
<div className="sub-header">Data Handling</div>
<InputWithDropDown
label="Label"
type="string"
@@ -587,6 +589,7 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
/>
</div>
</div>
</>
)}
{/* Data Mapping */}