feat: add ElementDesign component for UI element styling and positioning.
This commit is contained in:
@@ -1,15 +1,7 @@
|
||||
import React, { RefObject, useEffect, useState } from "react";
|
||||
import DataSourceSelector from "../../../ui/inputs/DataSourceSelector";
|
||||
import RenameInput from "../../../ui/inputs/RenameInput";
|
||||
import {
|
||||
AlignJustifyIcon,
|
||||
AlignLeftIcon,
|
||||
AlignRightIcon,
|
||||
ArrowIcon,
|
||||
FlexColumnIcon,
|
||||
FlexRowIcon,
|
||||
FlexRowReverseIcon,
|
||||
} from "../../../icons/ExportCommonIcons";
|
||||
import { AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, ArrowIcon, FlexColumnIcon, FlexRowIcon, FlexRowReverseIcon } from "../../../icons/ExportCommonIcons";
|
||||
import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
|
||||
import InputRange from "../../../ui/inputs/InputRange";
|
||||
import { getAlphaFromRgba, hexToRgba, rgbaToHex } from "../../functions/helpers/colorHandlers";
|
||||
@@ -24,35 +16,15 @@ interface ElementDesignProps {
|
||||
selectedBlock: string;
|
||||
selectedElement: string;
|
||||
updateElementStyle: (blockId: string, elementId: string, style: ExtendedCSSProperties) => void;
|
||||
updateElementSize: (
|
||||
blockId: string,
|
||||
elementId: string,
|
||||
size: { width: number; height: number }
|
||||
) => void;
|
||||
updateElementPosition: (
|
||||
blockId: string,
|
||||
elementId: string,
|
||||
position: { x: number; y: number }
|
||||
) => void;
|
||||
updateElementPositionType: (
|
||||
blockId: string,
|
||||
elementId: string,
|
||||
positionType: "relative" | "absolute" | "fixed"
|
||||
) => void;
|
||||
updateElementSize: (blockId: string, elementId: string, size: { width: number; height: number }) => void;
|
||||
updateElementPosition: (blockId: string, elementId: string, position: { x: number; y: number }) => void;
|
||||
updateElementPositionType: (blockId: string, elementId: string, positionType: "relative" | "absolute" | "fixed") => void;
|
||||
updateElementZIndex: (blockId: string, elementId: string, zIndex: number) => void;
|
||||
updateElementData: (
|
||||
blockId: string,
|
||||
elementId: string,
|
||||
updates: Partial<ElementDataBinding>
|
||||
) => void;
|
||||
updateElementData: (blockId: string, elementId: string, updates: Partial<ElementDataBinding>) => void;
|
||||
updateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => void;
|
||||
updateGraphTitle: (blockId: string, elementId: string, title: string) => void;
|
||||
updateGraphType: (blockId: string, elementId: string, type: GraphTypes) => void;
|
||||
updateDataType: (
|
||||
blockId: string,
|
||||
elementId: string,
|
||||
dataType: "single-machine" | "multiple-machine"
|
||||
) => void;
|
||||
updateDataType: (blockId: string, elementId: string, dataType: "single-machine" | "multiple-machine") => void;
|
||||
updateCommonValue: (blockId: string, elementId: string, commonValue: string) => void;
|
||||
updateDataValue: (blockId: string, elementId: string, dataValue: string | string[]) => void;
|
||||
updateDataSource: (blockId: string, elementId: string, dataSource: string | string[]) => void;
|
||||
@@ -76,9 +48,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
|
||||
const [color, setColor] = useState("#000000");
|
||||
|
||||
useEffect(() => {
|
||||
setColor(
|
||||
rgbaToHex(getCurrentElementStyleValue(currentElement, "backgroundColor") || "#000000")
|
||||
);
|
||||
setColor(rgbaToHex(getCurrentElementStyleValue(currentElement, "backgroundColor") || "#000000"));
|
||||
}, [currentElement]);
|
||||
|
||||
return (
|
||||
@@ -95,11 +65,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
|
||||
{ id: "radar", label: "Radar Chart" },
|
||||
]}
|
||||
onSelect={(newValue) => {
|
||||
updateGraphType(
|
||||
selectedBlock,
|
||||
selectedElement,
|
||||
newValue.id as GraphTypes
|
||||
);
|
||||
updateGraphType(selectedBlock, selectedElement, newValue.id as GraphTypes);
|
||||
}}
|
||||
showEyeDropper={false}
|
||||
/>
|
||||
@@ -112,15 +78,8 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
|
||||
{["relative", "absolute"].map((position) => (
|
||||
<div
|
||||
key={position}
|
||||
className={`type ${currentElement.positionType === position ? "active" : ""
|
||||
}`}
|
||||
onClick={() =>
|
||||
updateElementPositionType(
|
||||
selectedBlock,
|
||||
selectedElement,
|
||||
position as "relative" | "absolute" | "fixed"
|
||||
)
|
||||
}
|
||||
className={`type ${currentElement.positionType === position ? "active" : ""}`}
|
||||
onClick={() => updateElementPositionType(selectedBlock, selectedElement, position as "relative" | "absolute" | "fixed")}
|
||||
>
|
||||
{position.charAt(0).toUpperCase() + position.slice(1)}
|
||||
</div>
|
||||
@@ -129,48 +88,16 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
|
||||
<div className="position-canvas">
|
||||
<div className="canvas">
|
||||
<div className="value padding-top">
|
||||
<RenameInput
|
||||
value={
|
||||
getCurrentElementStyleValue(currentElement, "padding")
|
||||
? String(
|
||||
getCurrentElementStyleValue(currentElement, "padding")
|
||||
)
|
||||
: "120"
|
||||
}
|
||||
/>
|
||||
<RenameInput value={getCurrentElementStyleValue(currentElement, "padding") ? String(getCurrentElementStyleValue(currentElement, "padding")) : "120"} />
|
||||
</div>
|
||||
<div className="value padding-right">
|
||||
<RenameInput
|
||||
value={
|
||||
getCurrentElementStyleValue(currentElement, "padding")
|
||||
? String(
|
||||
getCurrentElementStyleValue(currentElement, "padding")
|
||||
)
|
||||
: "120"
|
||||
}
|
||||
/>
|
||||
<RenameInput value={getCurrentElementStyleValue(currentElement, "padding") ? String(getCurrentElementStyleValue(currentElement, "padding")) : "120"} />
|
||||
</div>
|
||||
<div className="value padding-bottom">
|
||||
<RenameInput
|
||||
value={
|
||||
getCurrentElementStyleValue(currentElement, "padding")
|
||||
? String(
|
||||
getCurrentElementStyleValue(currentElement, "padding")
|
||||
)
|
||||
: "120"
|
||||
}
|
||||
/>
|
||||
<RenameInput value={getCurrentElementStyleValue(currentElement, "padding") ? String(getCurrentElementStyleValue(currentElement, "padding")) : "120"} />
|
||||
</div>
|
||||
<div className="value padding-left">
|
||||
<RenameInput
|
||||
value={
|
||||
getCurrentElementStyleValue(currentElement, "padding")
|
||||
? String(
|
||||
getCurrentElementStyleValue(currentElement, "padding")
|
||||
)
|
||||
: "120"
|
||||
}
|
||||
/>
|
||||
<RenameInput value={getCurrentElementStyleValue(currentElement, "padding") ? String(getCurrentElementStyleValue(currentElement, "padding")) : "120"} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -178,10 +105,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
|
||||
<div className="alignments-section">
|
||||
<div className="section">
|
||||
<div
|
||||
className={`icon ${getCurrentElementStyleValue(currentElement, "textAlign") === "right"
|
||||
? "active"
|
||||
: ""
|
||||
}`}
|
||||
className={`icon ${getCurrentElementStyleValue(currentElement, "textAlign") === "right" ? "active" : ""}`}
|
||||
onClick={() =>
|
||||
updateElementStyle(selectedBlock, selectedElement, {
|
||||
textAlign: "right",
|
||||
@@ -191,11 +115,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
|
||||
<AlignRightIcon />
|
||||
</div>
|
||||
<div
|
||||
className={`icon ${getCurrentElementStyleValue(currentElement, "textAlign") ===
|
||||
"justify"
|
||||
? "active"
|
||||
: ""
|
||||
}`}
|
||||
className={`icon ${getCurrentElementStyleValue(currentElement, "textAlign") === "justify" ? "active" : ""}`}
|
||||
onClick={() =>
|
||||
updateElementStyle(selectedBlock, selectedElement, {
|
||||
textAlign: "justify",
|
||||
@@ -205,10 +125,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
|
||||
<AlignJustifyIcon />
|
||||
</div>
|
||||
<div
|
||||
className={`icon ${getCurrentElementStyleValue(currentElement, "textAlign") === "left"
|
||||
? "active"
|
||||
: ""
|
||||
}`}
|
||||
className={`icon ${getCurrentElementStyleValue(currentElement, "textAlign") === "left" ? "active" : ""}`}
|
||||
onClick={() =>
|
||||
updateElementStyle(selectedBlock, selectedElement, {
|
||||
textAlign: "left",
|
||||
@@ -220,10 +137,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
|
||||
</div>
|
||||
<div className="section">
|
||||
<div
|
||||
className={`icon ${((currentElement.style.flexDirection as string) || "row") === "row"
|
||||
? "active"
|
||||
: ""
|
||||
}`}
|
||||
className={`icon ${((currentElement.style.flexDirection as string) || "row") === "row" ? "active" : ""}`}
|
||||
onClick={() =>
|
||||
updateElementStyle(selectedBlock, selectedElement, {
|
||||
flexDirection: "row",
|
||||
@@ -233,11 +147,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
|
||||
<FlexRowIcon />
|
||||
</div>
|
||||
<div
|
||||
className={`icon ${((currentElement.style.flexDirection as string) || "row") ===
|
||||
"column"
|
||||
? "active"
|
||||
: ""
|
||||
}`}
|
||||
className={`icon ${((currentElement.style.flexDirection as string) || "row") === "column" ? "active" : ""}`}
|
||||
onClick={() =>
|
||||
updateElementStyle(selectedBlock, selectedElement, {
|
||||
flexDirection: "column",
|
||||
@@ -247,11 +157,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
|
||||
<FlexColumnIcon />
|
||||
</div>
|
||||
<div
|
||||
className={`icon ${((currentElement.style.flexDirection as string) || "row") ===
|
||||
"row-reverse"
|
||||
? "active"
|
||||
: ""
|
||||
}`}
|
||||
className={`icon ${((currentElement.style.flexDirection as string) || "row") === "row-reverse" ? "active" : ""}`}
|
||||
onClick={() =>
|
||||
updateElementStyle(selectedBlock, selectedElement, {
|
||||
flexDirection: "row-reverse",
|
||||
@@ -261,11 +167,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
|
||||
<FlexRowReverseIcon />
|
||||
</div>
|
||||
<div
|
||||
className={`icon ${((currentElement.style.flexDirection as string) || "row") ===
|
||||
"column-reverse"
|
||||
? "active"
|
||||
: ""
|
||||
}`}
|
||||
className={`icon ${((currentElement.style.flexDirection as string) || "row") === "column-reverse" ? "active" : ""}`}
|
||||
onClick={() =>
|
||||
updateElementStyle(selectedBlock, selectedElement, {
|
||||
flexDirection: "column-reverse",
|
||||
@@ -282,22 +184,12 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
|
||||
label="Layer"
|
||||
value={String(currentElement.zIndex || 1)}
|
||||
placeholder={"Layer"}
|
||||
onChange={(newValue: string) =>
|
||||
updateElementZIndex(
|
||||
selectedBlock,
|
||||
selectedElement,
|
||||
Number(newValue)
|
||||
)
|
||||
}
|
||||
onChange={(newValue: string) => updateElementZIndex(selectedBlock, selectedElement, Number(newValue))}
|
||||
/>
|
||||
<button
|
||||
className="increase-z"
|
||||
onClick={() => {
|
||||
updateElementZIndex(
|
||||
selectedBlock,
|
||||
selectedElement,
|
||||
Number(currentElement.zIndex ? currentElement.zIndex + 1 : 1)
|
||||
);
|
||||
updateElementZIndex(selectedBlock, selectedElement, Number(currentElement.zIndex ? currentElement.zIndex + 1 : 1));
|
||||
}}
|
||||
>
|
||||
<ArrowIcon />
|
||||
@@ -305,11 +197,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
|
||||
<button
|
||||
className="decrease-z"
|
||||
onClick={() => {
|
||||
updateElementZIndex(
|
||||
selectedBlock,
|
||||
selectedElement,
|
||||
Number(currentElement.zIndex ? currentElement.zIndex - 1 : 1)
|
||||
);
|
||||
updateElementZIndex(selectedBlock, selectedElement, Number(currentElement.zIndex ? currentElement.zIndex - 1 : 1));
|
||||
}}
|
||||
>
|
||||
<ArrowIcon />
|
||||
@@ -353,10 +241,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
|
||||
/>
|
||||
<InputWithDropDown
|
||||
label="Width"
|
||||
value={String(
|
||||
currentElement.size?.width ??
|
||||
(currentElement.type === "graph" ? 400 : 200)
|
||||
)}
|
||||
value={String(currentElement.size?.width ?? (currentElement.type === "graph" ? 400 : 200))}
|
||||
placeholder={"Width"}
|
||||
onChange={(newValue: string) => {
|
||||
updateElementSize(selectedBlock, selectedElement, {
|
||||
@@ -367,10 +252,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
|
||||
/>
|
||||
<InputWithDropDown
|
||||
label="Height"
|
||||
value={String(
|
||||
currentElement.size?.height ??
|
||||
(currentElement.type === "graph" ? 200 : 60)
|
||||
)}
|
||||
value={String(currentElement.size?.height ?? (currentElement.type === "graph" ? 200 : 60))}
|
||||
placeholder={"Height"}
|
||||
onChange={(newValue: string) => {
|
||||
updateElementSize(selectedBlock, selectedElement, {
|
||||
@@ -380,6 +262,17 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<InputRange
|
||||
label={"Border Radius"}
|
||||
min={0}
|
||||
max={8}
|
||||
value={parseInt(getCurrentElementStyleValue(currentElement, "borderRadius") || "") || 8}
|
||||
onChange={(newValue: number) => {
|
||||
updateElementStyle(selectedBlock, selectedElement, {
|
||||
borderRadius: Number(newValue),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="design-section element-color">
|
||||
@@ -443,21 +336,6 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
|
||||
updateElementStyle(selectedBlock, selectedElement, { backdropFilter: `blur(${Number(value)}px)` });
|
||||
}}
|
||||
/>
|
||||
<InputRange
|
||||
label={"Border Radius"}
|
||||
min={0}
|
||||
max={8}
|
||||
value={
|
||||
parseInt(
|
||||
getCurrentElementStyleValue(currentElement, "borderRadius") || ""
|
||||
) || 8
|
||||
}
|
||||
onChange={(newValue: number) => {
|
||||
updateElementStyle(selectedBlock, selectedElement, {
|
||||
borderRadius: Number(newValue),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user