diff --git a/app/src/assets/cursors/close.svg b/app/src/assets/cursors/close.svg index 24c68e7..446ee87 100644 --- a/app/src/assets/cursors/close.svg +++ b/app/src/assets/cursors/close.svg @@ -1,6 +1,6 @@ - + diff --git a/app/src/assets/cursors/comment.svg b/app/src/assets/cursors/comment.svg index 07c5294..2584705 100644 --- a/app/src/assets/cursors/comment.svg +++ b/app/src/assets/cursors/comment.svg @@ -1,3 +1,3 @@ - + diff --git a/app/src/assets/cursors/open.svg b/app/src/assets/cursors/open.svg index ddca125..03cb40f 100644 --- a/app/src/assets/cursors/open.svg +++ b/app/src/assets/cursors/open.svg @@ -1,6 +1,6 @@ - + diff --git a/app/src/assets/cursors/pointing.svg b/app/src/assets/cursors/pointing.svg index bb7b2bb..c447e3f 100644 --- a/app/src/assets/cursors/pointing.svg +++ b/app/src/assets/cursors/pointing.svg @@ -1,6 +1,6 @@ - + diff --git a/app/src/assets/image/404/404.svg b/app/src/assets/image/404/404.svg index d17802e..853a704 100644 --- a/app/src/assets/image/404/404.svg +++ b/app/src/assets/image/404/404.svg @@ -1,7 +1,7 @@ - + diff --git a/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx b/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx index 85ba980..3424281 100644 --- a/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx +++ b/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx @@ -10,6 +10,7 @@ import RenameInput from "../../../ui/inputs/RenameInput"; import { AddIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, DeviceIcon, FlexColumnIcon, FlexRowIcon, FlexRowReverseIcon, ParametersIcon } from "../../../icons/ExportCommonIcons"; import { getAlphaFromRgba, rgbaToHex, hexToRgba } from "../../functions/helpers/colorHandlers"; import DataDetailedDropdown from "../../../ui/inputs/DataDetailedDropdown"; +import { useSceneContext } from "../../../../modules/scene/sceneContext"; interface ElementEditorProps { elementEditorRef: RefObject; @@ -50,17 +51,11 @@ const ElementEditor: React.FC = ({ setShowSwapUI, dataModelManager, }) => { - const [selectType, setSelectType] = useState("design") - const [selectDataMapping, setSelectDataMapping] = useState("singleMachine") - - const defaultGraphData = [ - { name: "Jan", value: 400 }, - { name: "Feb", value: 300 }, - { name: "Mar", value: 600 }, - { name: "Apr", value: 800 }, - { name: "May", value: 500 }, - { name: "Jun", value: 900 }, - ]; + const { simulationDashBoardStore } = useSceneContext(); + const { getElementById } = simulationDashBoardStore(); + const element = getElementById(selectedBlock, selectedElement); + const [selectType, setSelectType] = useState("design"); + const [selectDataMapping, setSelectDataMapping] = useState("singleMachine"); const [singleFields, setSingleFields] = useState>([ { id: "data-source", label: "Data Source", showEyeDropper: true }, @@ -110,33 +105,41 @@ const ElementEditor: React.FC = ({ -
-
setSelectType("design")}> +
setSelectType("design")}> Design
-
setSelectType("data")}> +
setSelectType("data")}> Data
- {selectType === "design" && ( <> { - updateGraphType(selectedBlock, selectedElement, newValue as GraphTypes) + if (newValue === "Line Chart") { + updateGraphType(selectedBlock, selectedElement, "line"); + return; + } else if (newValue === "Bar Chart") { + updateGraphType(selectedBlock, selectedElement, "bar"); + return; + } else if (newValue === "Pie Chart") { + updateGraphType(selectedBlock, selectedElement, "pie"); + return; + } else if (newValue === "Area Chart") { + updateGraphType(selectedBlock, selectedElement, "area"); + return; + } else if (newValue === "Radar Chart") { + updateGraphType(selectedBlock, selectedElement, "radar"); + return; + } }} showEyeDropper={false} /> -
Position
@@ -153,44 +156,16 @@ const ElementEditor: React.FC = ({
- - +
- - +
- - +
- - +
@@ -267,17 +242,15 @@ const ElementEditor: React.FC = ({ onChange={(newValue: number) => { updateElementStyle(selectedBlock, selectedElement, { borderRadius: Number(newValue), - }) + }); }} /> -
Appearance
- = ({ }} />
-
-
Element Color
@@ -346,182 +317,14 @@ const ElementEditor: React.FC = ({
{rgbaToHex(getCurrentElementStyleValue(currentElement, "backgroundColor") || "rgba(50,50,50,1)")}
-
Swap with Another Element
- - - {/* Data Binding Section */} -
-

Data Binding

-
- -
- - -
- - {currentElement.data?.dataSource === "static" && ( - <> - {currentElement.type === "label-value" && ( -
- - - updateElementData(selectedBlock, selectedElement, { - label: e.target.value, - }) - } - className="form-input" - /> -
- )} -
- - - updateElementData(selectedBlock, selectedElement, { - staticValue: e.target.value, - }) - } - className="form-input" - /> -
- - )} - - {currentElement.data?.dataSource === "dynamic" && ( - <> - {currentElement.type === "label-value" && ( -
- - - updateElementData(selectedBlock, selectedElement, { - label: e.target.value, - }) - } - className="form-input" - /> -
- )} -
- - -
- - )} - - {currentElement.data?.dataSource === "formula" && ( - <> - {currentElement.type === "label-value" && ( -
- - - updateElementData(selectedBlock, selectedElement, { - label: e.target.value, - }) - } - className="form-input" - /> -
- )} -
- - - updateElementData(selectedBlock, selectedElement, { - formula: e.target.value, - }) - } - className="form-input" - /> - - Use {"{key}"} to reference data values. Example: {"{totalUsers} * {growthRate}"} - -
- - )} - - {currentElement.type === "graph" && ( -
- -