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> </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="design-section">
<div className="section-header">Background</div> <div className="section-header">Background</div>
@@ -363,20 +381,6 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
value={parseInt(getCurrentBlockStyleValue(currentBlock, "backdropFilter")?.match(/\d+/)?.[0] || "10")} value={parseInt(getCurrentBlockStyleValue(currentBlock, "backdropFilter")?.match(/\d+/)?.[0] || "10")}
onChange={(value: number) => handleBlurAmountChange(selectedBlock, updateBlockStyle, Number(value))} 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> </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)` }); 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>
</div> </div>
); );

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

@@ -520,73 +520,76 @@ const ElementEditor: React.FC<ElementEditorProps> = ({
{selectType === "data" && ( {selectType === "data" && (
<div className="data-details"> <div className="data-details">
{element?.type === "label-value" && ( {element?.type === "label-value" && (
<div className="data-wrapper"> <>
<InputWithDropDown <div className="design-section">
label="Label" <div className="sub-header">Data Handling</div>
type="string" <InputWithDropDown
value={element.dataBinding?.label || ""} label="Label"
placeholder={"Label 1"} type="string"
onChange={(value) => { value={element.dataBinding?.label || ""}
updateElementData(selectedBlock, selectedElement, { label: value }); placeholder={"Label 1"}
}}
/>
<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) => { 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"> <div className="data">
<DataDetailedDropdown <DataDetailedDropdown
title="Data Value" title="Data Value"
placeholder="Select Value" placeholder="Select Value"
sections={getLableValueDropdownItems(element.dataBinding?.dataSource as string | undefined)} sections={getLableValueDropdownItems(element.dataBinding?.dataSource as string | undefined)}
value={ value={
element.dataBinding?.dataValue element.dataBinding?.dataValue
? { ? {
id: element.dataBinding.dataValue as string, id: element.dataBinding.dataValue as string,
label: label:
getLableValueDropdownItems(element.dataBinding?.dataSource as string | undefined) getLableValueDropdownItems(element.dataBinding?.dataSource as string | undefined)
.flatMap((section) => section.items) .flatMap((section) => section.items)
.find((item) => item.id === element.dataBinding?.dataValue)?.label ?? "", .find((item) => item.id === element.dataBinding?.dataValue)?.label ?? "",
icon: <ParametersIcon />, icon: <ParametersIcon />,
} }
: null : null
} }
onChange={(value) => { onChange={(value) => {
updateElementData(selectedBlock, selectedElement, { dataValue: value.id, label: value.label }); updateElementData(selectedBlock, selectedElement, { dataValue: value.id, label: value.label });
}} }}
dropDownHeader={"RT-Data-Value"} dropDownHeader={"RT-Data-Value"}
/> />
</div>
</div> </div>
</div> </>
)} )}
{/* Data Mapping */} {/* Data Mapping */}