feat: add BlockEditor, ElementDesign, and ElementEditor components for simulation dashboard.
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
Reference in New Issue
Block a user