diff --git a/app/src/components/SimulationDashboard/DashboardEditor.tsx b/app/src/components/SimulationDashboard/DashboardEditor.tsx index 7a2dcfc..5479d15 100644 --- a/app/src/components/SimulationDashboard/DashboardEditor.tsx +++ b/app/src/components/SimulationDashboard/DashboardEditor.tsx @@ -55,6 +55,7 @@ const DashboardEditor: React.FC = () => { peekUpdateGraphData, peekUpdateGraphTitle, peekUpdateGraphType, + peekUpdateTextValue, peekUpdateDataType, peekUpdateCommonValue, peekUpdateDataValue, @@ -611,6 +612,13 @@ const DashboardEditor: React.FC = () => { await updateBackend(updatedBlock); } }} + updateTextValue={async (blockId, elementId, textValue) => { + const updatedBlocks = peekUpdateTextValue(blockId, elementId, textValue); + const updatedBlock = getBlockFromPeekedBlocks(updatedBlocks, blockId); + if (updatedBlock) { + await updateBackend(updatedBlock); + } + }} updateDataType={async (blockId, elementId, dataType) => { const updatedBlocks = peekUpdateDataType(blockId, elementId, dataType); const updatedBlock = getBlockFromPeekedBlocks(updatedBlocks, blockId); diff --git a/app/src/components/SimulationDashboard/components/element/ElementDesign.tsx b/app/src/components/SimulationDashboard/components/element/ElementDesign.tsx index fc36e45..1475462 100644 --- a/app/src/components/SimulationDashboard/components/element/ElementDesign.tsx +++ b/app/src/components/SimulationDashboard/components/element/ElementDesign.tsx @@ -25,6 +25,7 @@ interface ElementDesignProps { updateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => void; updateGraphTitle: (blockId: string, elementId: string, title: string) => void; updateGraphType: (blockId: string, elementId: string, type: GraphTypes) => void; + updateTextValue: (blockId: string, elementId: string, textValue: string) => 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; @@ -45,6 +46,7 @@ const ElementDesign: React.FC = ({ updateElementZIndex, updateGraphTitle, updateGraphType, + updateTextValue, }) => { const [color, setColor] = useState("#000000"); @@ -76,6 +78,19 @@ const ElementDesign: React.FC = ({ )} + {element?.type === "text" && ( +
+ { + updateTextValue(selectedBlock, selectedElement, newValue); + }} + /> +
+ )} +
Position
diff --git a/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx b/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx index d5106b8..b2bee0f 100644 --- a/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx +++ b/app/src/components/SimulationDashboard/components/element/ElementEditor.tsx @@ -25,6 +25,7 @@ interface ElementEditorProps { updateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => void; updateGraphTitle: (blockId: string, elementId: string, title: string) => void; updateGraphType: (blockId: string, elementId: string, type: GraphTypes) => void; + updateTextValue: (blockId: string, elementId: string, textValue: string) => 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; @@ -46,6 +47,7 @@ const ElementEditor: React.FC = ({ updateGraphData, updateGraphTitle, updateGraphType, + updateTextValue, updateDataType, updateCommonValue, updateDataValue, @@ -562,6 +564,7 @@ const ElementEditor: React.FC = ({ updateGraphData={updateGraphData} updateGraphTitle={updateGraphTitle} updateGraphType={updateGraphType} + updateTextValue={updateTextValue} updateDataType={updateDataType} updateCommonValue={updateCommonValue} updateDataValue={updateDataValue} diff --git a/app/src/components/SimulationDashboard/functions/helpers/resolveElementValue.ts b/app/src/components/SimulationDashboard/functions/helpers/resolveElementValue.ts index 754b05c..6b1d8bf 100644 --- a/app/src/components/SimulationDashboard/functions/helpers/resolveElementValue.ts +++ b/app/src/components/SimulationDashboard/functions/helpers/resolveElementValue.ts @@ -1,6 +1,11 @@ import type { UIElement } from "../../../../types/exportedTypes"; export const resolveElementValue = (element: UIElement) => { + // For text elements, return the textValue + if (element.type === "text") { + return { value: element.textValue || "Text" }; + } + if (!element.dataBinding) { return { value: "No data" }; } diff --git a/app/src/store/simulation/useSimulationDashBoardStore.ts b/app/src/store/simulation/useSimulationDashBoardStore.ts index c10806b..d396e52 100644 --- a/app/src/store/simulation/useSimulationDashBoardStore.ts +++ b/app/src/store/simulation/useSimulationDashBoardStore.ts @@ -48,6 +48,7 @@ interface SimulationDashboardStore { updateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => void; updateGraphTitle: (blockId: string, elementId: string, title: string) => void; updateGraphType: (blockId: string, elementId: string, graphType: GraphTypes) => void; + updateTextValue: (blockId: string, elementId: string, textValue: string) => void; // Element swapping swapElements: (blockId: string, elementId1: string, elementId2: string) => void; @@ -73,6 +74,7 @@ interface SimulationDashboardStore { peekUpdateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => Block[]; peekUpdateGraphTitle: (blockId: string, elementId: string, title: string) => Block[]; peekUpdateGraphType: (blockId: string, elementId: string, graphType: GraphTypes) => Block[]; + peekUpdateTextValue: (blockId: string, elementId: string, textValue: string) => Block[]; peekUpdateDataType: (blockId: string, elementId: string, dataType: "single-machine" | "multiple-machine") => Block[]; peekUpdateCommonValue: (blockId: string, elementId: string, commonValue: string) => Block[]; peekUpdateDataValue: (blockId: string, elementId: string, dataValue: string | string[]) => Block[]; @@ -321,6 +323,7 @@ export const createSimulationDashboardStore = () => { newElement = { ...commonProps, type: "text", + textValue: "Text", style: { color: "#ffffff", fontSize: 14, @@ -487,6 +490,18 @@ export const createSimulationDashboardStore = () => { }); }, + updateTextValue: (blockId, elementId, textValue) => { + set((state) => { + const block = state.blocks.find((b) => b.blockUuid === blockId); + if (block) { + const element = block.elements.find((el) => el.elementUuid === elementId); + if (element && element.type === "text") { + element.textValue = textValue; + } + } + }); + }, + // Element swapping swapElements: (blockId, elementId1, elementId2) => { set((state) => { @@ -685,6 +700,7 @@ export const createSimulationDashboardStore = () => { newElement = { ...commonProps, type: "text", + textValue: "Text", style: { color: "#ffffff", fontSize: 14, @@ -846,6 +862,18 @@ export const createSimulationDashboardStore = () => { return blocks; }, + peekUpdateTextValue: (blockId, elementId, textValue) => { + const blocks = cloneBlocks(get().blocks); + const block = blocks.find((b) => b.blockUuid === blockId); + if (block) { + const element = block.elements.find((el) => el.elementUuid === elementId); + if (element && element.type === "text") { + element.textValue = textValue; + } + } + return blocks; + }, + peekUpdateDataType: (blockId: string, elementId: string, dataType: DataType) => { const blocks = cloneBlocks(get().blocks); diff --git a/app/src/types/exportedTypes.ts b/app/src/types/exportedTypes.ts index f108d79..759e7be 100644 --- a/app/src/types/exportedTypes.ts +++ b/app/src/types/exportedTypes.ts @@ -20,6 +20,7 @@ export type UIElement = { type: UIType; graphType?: GraphTypes; graphTitle?: string; + textValue?: string; style: ExtendedCSSProperties; dataBinding?: ElementDataBinding; position?: Position;