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

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

Browse Source
This commit is contained in:
Vishnu
2025-12-20 16:52:49 +05:30
parent 4c7e4779a8
commit 341c9e7945
3 changed files with 83 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
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>

15
app/src/components/SimulationDashboard/components/element/ElementDesign.tsx
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>
);

127
app/src/components/SimulationDashboard/components/element/ElementEditor.tsx
View File

@@ -520,73 +520,76 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
{selectType === "data" && (
<div className="data-details">
{element?.type === "label-value" && (
<div className="data-wrapper">
<InputWithDropDown
label="Label"
type="string"
value={element.dataBinding?.label || ""}
placeholder={"Label 1"}
onChange={(value) => {
updateElementData(selectedBlock, selectedElement, { label: value });
}}
/>
<div className="data">
<DataDetailedDropdown
title="Data Source"
placeholder="Select assets"
sections={[
{
title: "Global",
items: [{ id: "global", label: "Global", icon: <DeviceIcon /> }],
},
{
title: "Assets",
items: getAssetDropdownItems(),
},
]}
value={
element.dataBinding?.dataSource
? {
id: element.dataBinding.dataSource as string,
label:
getEventByModelUuid(selectedProduct.productUuid, element.dataBinding.dataSource as string)?.modelName ??
(element.dataBinding.dataSource === "global" ? "Global" : ""),
icon: <DeviceIcon />,
}
: null
}
<>
<div className="design-section">
<div className="sub-header">Data Handling</div>
<InputWithDropDown
label="Label"
type="string"
value={element.dataBinding?.label || ""}
placeholder={"Label 1"}
onChange={(value) => {
updateElementData(selectedBlock, selectedElement, { dataSource: value.id });
updateElementData(selectedBlock, selectedElement, { label: value });
}}
dropDownHeader={"RT-Data"}
eyedroper={true}
/>
</div>
<div className="data">
<DataDetailedDropdown
title="Data Source"
placeholder="Select assets"
sections={[
{
title: "Global",
items: [{ id: "global", label: "Global", icon: <DeviceIcon /> }],
},
{
title: "Assets",
items: getAssetDropdownItems(),
},
]}
value={
element.dataBinding?.dataSource
? {
id: element.dataBinding.dataSource as string,
label:
getEventByModelUuid(selectedProduct.productUuid, element.dataBinding.dataSource as string)?.modelName ??
(element.dataBinding.dataSource === "global" ? "Global" : ""),
icon: <DeviceIcon />,
}
: null
}
onChange={(value) => {
updateElementData(selectedBlock, selectedElement, { dataSource: value.id });
}}
dropDownHeader={"RT-Data"}
eyedroper={true}
/>
</div>
<div className="data">
<DataDetailedDropdown
title="Data Value"
placeholder="Select Value"
sections={getLableValueDropdownItems(element.dataBinding?.dataSource as string | undefined)}
value={
element.dataBinding?.dataValue
? {
id: element.dataBinding.dataValue as string,
label:
getLableValueDropdownItems(element.dataBinding?.dataSource as string | undefined)
.flatMap((section) => section.items)
.find((item) => item.id === element.dataBinding?.dataValue)?.label ?? "",
icon: <ParametersIcon />,
}
: null
}
onChange={(value) => {
updateElementData(selectedBlock, selectedElement, { dataValue: value.id, label: value.label });
}}
dropDownHeader={"RT-Data-Value"}
/>
<div className="data">
<DataDetailedDropdown
title="Data Value"
placeholder="Select Value"
sections={getLableValueDropdownItems(element.dataBinding?.dataSource as string | undefined)}
value={
element.dataBinding?.dataValue
? {
id: element.dataBinding.dataValue as string,
label:
getLableValueDropdownItems(element.dataBinding?.dataSource as string | undefined)
.flatMap((section) => section.items)
.find((item) => item.id === element.dataBinding?.dataValue)?.label ?? "",
icon: <ParametersIcon />,
}
: null
}
onChange={(value) => {
updateElementData(selectedBlock, selectedElement, { dataValue: value.id, label: value.label });
}}
dropDownHeader={"RT-Data-Value"}
/>
</div>
</div>
</div>
</>
)}
{/* Data Mapping */}