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

feat: Introduce BlockEditor component for managing simulation block styles and properties.

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-12-20 11:24:19 +05:30
parent 975253a1dc
commit 8fefbe2419
2 changed files with 30 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -241,7 +241,6 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
<input <input
type="color" type="color"
value={rgbaToHex(getCurrentBlockStyleValue(currentBlock, "backgroundColor"))} value={rgbaToHex(getCurrentBlockStyleValue(currentBlock, "backgroundColor"))}
// onChange={(e) => setColor(e.target.value)}
onChange={(e) => handleBackgroundColorChange(currentBlock, selectedBlock, updateBlockStyle, e.target.value)} onChange={(e) => handleBackgroundColorChange(currentBlock, selectedBlock, updateBlockStyle, e.target.value)}
/> />
@@ -251,12 +250,17 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
<InputRange <InputRange
label={"Opacity"} label={"Opacity"}
min={0} min={0}
max={8} max={100}
value={Math.round(getAlphaFromRgba(getCurrentBlockStyleValue(currentBlock, "backgroundColor")) * 100)} value={Math.round(getAlphaFromRgba(getCurrentBlockStyleValue(currentBlock, "backgroundColor")) * 100)}
// onChange={(value: number) => handleBackgroundAlphaChange(currentBlock, selectedBlock, updateBlockStyle, Number(value))} onChange={(value: number) => handleBackgroundAlphaChange(currentBlock, selectedBlock, updateBlockStyle, Number(value))}
/>
<InputRange
label={"Blur"}
min={0}
max={30}
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={"Blur"} min={0} max={8} value={parseInt(getCurrentBlockStyleValue(currentBlock, "backdropFilter")?.match(/\d+/)?.[0] || "10")} />
</div> </div>
</div> </div>
</div> </div>

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

@@ -161,15 +161,6 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
placeholder={"Layer"} placeholder={"Layer"}
onChange={(newValue: string) => updateElementZIndex(selectedBlock, selectedElement, Number(newValue))} onChange={(newValue: string) => updateElementZIndex(selectedBlock, selectedElement, Number(newValue))}
/> />
<InputRange
label={"Blur"}
min={0}
max={40}
value={parseInt(getCurrentElementStyleValue(currentElement, "backdropFilter")?.match(/\d+/)?.[0] || "0")}
onChange={(value: number) => updateElementStyle(selectedBlock, selectedElement, { backdropFilter: `blur(${Number(value)}px)` })}
/>
<InputRange <InputRange
label={"Radius"} label={"Radius"}
min={0} min={0}
@@ -235,7 +226,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
</div> </div>
<div className="design-section element-color"> <div className="design-section element-color">
<div className="section-header">Element Color</div> <div className="section-header">Background</div>
<div className="data-picker"> <div className="data-picker">
<div className="label">Color</div> <div className="label">Color</div>
<div className="left"> <div className="left">
@@ -253,6 +244,27 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
<div className="colorValue">{rgbaToHex(getCurrentElementStyleValue(currentElement, "backgroundColor") || "rgba(50,50,50,1)")}</div> <div className="colorValue">{rgbaToHex(getCurrentElementStyleValue(currentElement, "backgroundColor") || "rgba(50,50,50,1)")}</div>
</div> </div>
</div> </div>
<InputRange
label={"Opacity"}
min={0}
max={100}
value={Math.round(getAlphaFromRgba(getCurrentElementStyleValue(currentElement, "backgroundColor") || "rgba(0,0,0,1)") * 100)}
onChange={(value: number) => {
const currentBg = getCurrentElementStyleValue(currentElement, "backgroundColor") || "rgba(0,0,0,1)";
const currentHex = rgbaToHex(currentBg);
const newBg = hexToRgba(currentHex, Number(value) / 100);
updateElementStyle(selectedBlock, selectedElement, { backgroundColor: newBg });
}}
/>
<InputRange
label={"Blur"}
min={0}
max={30}
value={parseInt(getCurrentElementStyleValue(currentElement, "backdropFilter")?.match(/\d+/)?.[0] || "0")}
onChange={(value: number) => {
updateElementStyle(selectedBlock, selectedElement, { backdropFilter: `blur(${Number(value)}px)` });
}}
/>
</div> </div>
<div className="footer">Swap with Another Element</div> <div className="footer">Swap with Another Element</div>
</div> </div>