From bf35e00df68bd6c35339aa9aa49b76b136fbeb9f Mon Sep 17 00:00:00 2001 From: Jerald-Golden-B Date: Thu, 16 Oct 2025 11:38:51 +0530 Subject: [PATCH] Refactor simulation dashboard styles and types - Updated SCSS styles for the simulation dashboard, adjusting z-index and reintroducing the element dropdown styles. - Simplified type definitions in simulationDashboard.d.ts by removing unnecessary exports and consolidating types. - Modified shortcut key handling to import from the correct path for useSelectedZoneStore. - Created a new Zustand store for managing simulation dashboard state, including blocks and elements. - Introduced old visualization stores for chart and dropped objects, refactoring to use Zustand for state management. - Added a new store for managing 3D widget data and zone widget data. - Implemented a store for managing selected zones and their properties. - Initialized a visualization store with a basic structure for future enhancements. - Updated exported types to include ExtendedCSSProperties and refined Block and UIElement definitions. --- .../SimulationDashboard/DashboardEditor.tsx | 211 ++------ .../components/block/BlockComponent.tsx | 2 +- .../components/block/BlockEditor.tsx | 2 +- .../components/block/BlockGrid.tsx | 2 +- .../components/element/ElementComponent.tsx | 2 +- .../components/element/ElementContent.tsx | 91 +--- .../components/element/ElementDropdown.tsx | 16 +- .../components/element/ElementEditor.tsx | 78 +-- .../components/models/DataModelPanel.tsx | 173 +++---- app/src/SimulationDashboard/data/dataModel.ts | 264 +++++----- .../data/defaultGraphData.ts | 2 - .../functions/block/addBlock.ts | 2 +- .../functions/block/calculateMinBlockSize.ts | 2 +- .../functions/block/handleBlockDragStart.ts | 9 +- .../functions/block/updateBlock.ts | 2 +- .../functions/element/addElement.ts | 10 +- .../functions/element/swapElements.ts | 2 +- .../functions/element/updateElement.ts | 93 +--- .../functions/eventHandlers/index.ts | 19 +- .../helpers/getCurrentBlockStyleValue.ts | 2 +- .../helpers/getCurrentElementStyleValue.ts | 2 +- .../helpers/handleBackgroundAlphaChange.ts | 2 +- .../helpers/handleBackgroundColorChange.ts | 2 +- .../functions/helpers/resolveElementValue.ts | 2 +- .../functions/updateDataModelValue.ts | 1 - app/src/SimulationDashboard/style/style.css | 456 ------------------ .../components/layout/scenes/MainScene.tsx | 91 ++-- .../IotInputCards/BarChartInput.tsx | 4 +- .../FleetEfficiencyInputComponent.tsx | 4 +- .../IotInputCards/FlotingWidgetInput.tsx | 4 +- .../IotInputCards/LineGrapInput.tsx | 4 +- .../IotInputCards/PieChartInput.tsx | 4 +- .../IotInputCards/Progress1Input.tsx | 4 +- .../IotInputCards/Progress2Input.tsx | 4 +- .../WarehouseThroughputInputComponent.tsx | 4 +- .../IotInputCards/Widget2InputCard3D.tsx | 4 +- .../IotInputCards/Widget3InputCard3D.tsx | 4 +- .../IotInputCards/Widget4InputCard3D.tsx | 4 +- app/src/components/ui/Tools.tsx | 4 +- .../components/ui/features/RenameTooltip.tsx | 2 +- .../ui/list/OutlineList/ListNew.tsx | 2 +- .../components/ui/menu/EditWidgetOption.tsx | 2 +- .../outlineHelpers/useZoneAssetHandlers.ts | 2 +- app/src/modules/builder/asset/assetsGroup.tsx | 2 +- .../eventHandlers/useModelEventHandlers.ts | 2 +- .../visualization/RealTimeVisulization.tsx | 4 +- .../visualization/functions/handleUiDrop.ts | 2 +- .../socket/realTimeVizSocket.dev.tsx | 6 +- .../visualization/template/Templates.tsx | 4 +- .../widgets/2d/DraggableWidget.tsx | 4 +- .../widgets/2d/charts/BarGraphComponent.tsx | 4 +- .../2d/charts/DoughnutGraphComponent.tsx | 4 +- .../widgets/2d/charts/LineGraphComponent.tsx | 4 +- .../widgets/2d/charts/PieGraphComponent.tsx | 4 +- .../2d/charts/PolarAreaGraphComponent.tsx | 4 +- .../widgets/2d/charts/ProgressCard1.tsx | 4 +- .../widgets/2d/charts/ProgressCard2.tsx | 4 +- .../widgets/3d/Dropped3dWidget.tsx | 8 +- .../widgets/3d/cards/ProductionCapacity.tsx | 2 +- .../widgets/3d/cards/ReturnOfInvestment.tsx | 2 +- .../widgets/3d/cards/StateWorking.tsx | 2 +- .../widgets/3d/cards/Throughput.tsx | 2 +- .../floating/DroppedFloatingWidgets.tsx | 4 +- .../cards/FleetEfficiencyComponent.tsx | 2 +- .../floating/cards/TotalCardComponent.tsx | 2 +- .../cards/WarehouseThroughputComponent.tsx | 2 +- .../visualization/zone/DisplayZone.tsx | 2 +- .../visualization/zone/zoneCameraTarget.tsx | 2 +- app/src/pages/Project.tsx | 1 - .../simulation/useSimulationDashBoardStore.ts | 439 +++++++++++++++++ .../visualization/{ => old}/useChartStore.ts | 0 .../{ => old}/useDroppedObjectsStore.ts | 6 +- .../{ => old}/useZone3DWidgetStore.ts | 0 .../visualization/{ => old}/useZoneStore.ts | 0 .../visualization/useVisualizationStore.ts | 13 + app/src/styles/components/_moduleToggle.scss | 106 ++-- app/src/styles/components/_tools.scss | 369 +++++++------- .../_simulationDashBoard.scss | 67 ++- app/src/types/exportedTypes.ts | 30 ++ app/src/types/simulationDashboard.d.ts | 57 +-- .../utils/shortcutkeys/handleShortcutKeys.ts | 2 +- 81 files changed, 1170 insertions(+), 1598 deletions(-) delete mode 100644 app/src/SimulationDashboard/style/style.css create mode 100644 app/src/store/simulation/useSimulationDashBoardStore.ts rename app/src/store/visualization/{ => old}/useChartStore.ts (100%) rename app/src/store/visualization/{ => old}/useDroppedObjectsStore.ts (97%) rename app/src/store/visualization/{ => old}/useZone3DWidgetStore.ts (100%) rename app/src/store/visualization/{ => old}/useZoneStore.ts (100%) create mode 100644 app/src/store/visualization/useVisualizationStore.ts create mode 100644 app/src/types/exportedTypes.ts diff --git a/app/src/SimulationDashboard/DashboardEditor.tsx b/app/src/SimulationDashboard/DashboardEditor.tsx index 8f579ef..63a35c3 100644 --- a/app/src/SimulationDashboard/DashboardEditor.tsx +++ b/app/src/SimulationDashboard/DashboardEditor.tsx @@ -1,6 +1,5 @@ import React, { useState, useRef, useEffect } from "react"; -// import "./style/style.css"; -import type { Block, DataModel, GraphTypes, Position, UIType } from "../types/simulationDashboard"; +import type { Block } from "../types/exportedTypes"; import { dataModelManager } from "./data/dataModel"; import ControlPanel from "./ControlPanel"; import SwapModal from "./SwapModal"; @@ -9,13 +8,7 @@ import DataModelPanel from "./components/models/DataModelPanel"; import { addBlock } from "./functions/block/addBlock"; import { addElement } from "./functions/element/addElement"; import { calculateMinBlockSize } from "./functions/block/calculateMinBlockSize"; -import { - updateBlockStyle, - updateBlockSize, - updateBlockPosition, - updateBlockPositionType, - updateBlockZIndex, -} from "./functions/block/updateBlock"; +import { updateBlockStyle, updateBlockSize, updateBlockPosition, updateBlockPositionType, updateBlockZIndex } from "./functions/block/updateBlock"; import { updateElementStyle, updateElementSize, @@ -27,15 +20,7 @@ import { updateGraphTitle, } from "./functions/element/updateElement"; import { swapElements } from "./functions/element/swapElements"; -import { - handleElementDragStart, - handleElementResizeStart, - handleBlockResizeStart, - handleSwapStart, - handleSwapTarget, - handleBlockClick, - handleElementClick, -} from "./functions/eventHandlers"; +import { handleElementDragStart, handleElementResizeStart, handleBlockResizeStart, handleSwapStart, handleSwapTarget, handleBlockClick, handleElementClick } from "./functions/eventHandlers"; import BlockGrid from "./components/block/BlockGrid"; import ElementDropdown from "./components/element/ElementDropdown"; import BlockEditor from "./components/block/BlockEditor"; @@ -44,7 +29,6 @@ import { handleBlockDragStart } from "./functions/block/handleBlockDragStart"; const DashboardEditor: React.FC = () => { const [blocks, setBlocks] = useState([]); - console.log('blocks: ', blocks); const [editMode, setEditMode] = useState(false); const [selectedBlock, setSelectedBlock] = useState(null); const [selectedElement, setSelectedElement] = useState(null); @@ -127,12 +111,7 @@ const DashboardEditor: React.FC = () => { return; } - if ( - isInsideEditor && - !isInsideBlockEditor && - !isInsideElementEditor && - !isInsideDropdown - ) { + if (isInsideEditor && !isInsideBlockEditor && !isInsideElementEditor && !isInsideDropdown) { const clickedElement = event.target as HTMLElement; const isBlock = clickedElement.closest("[data-block-id]"); const isElement = clickedElement.closest("[data-element-id]"); @@ -159,9 +138,7 @@ const DashboardEditor: React.FC = () => { const handleMouseMove = (e: MouseEvent): void => { // Element dragging - use elementDragOffset if (draggingElement && selectedBlock && currentElement?.positionType === "absolute") { - const blockElement = document.querySelector( - `[data-block-id="${selectedBlock}"]` - ) as HTMLElement; + const blockElement = document.querySelector(`[data-block-id="${selectedBlock}"]`) as HTMLElement; if (blockElement) { const blockRect = blockElement.getBoundingClientRect(); const newX = e.clientX - blockRect.left - elementDragOffset.x; // Use elementDragOffset @@ -181,11 +158,7 @@ const DashboardEditor: React.FC = () => { } // Block dragging - use blockDragOffset - if ( - draggingBlock && - currentBlock?.positionType && - (currentBlock.positionType === "absolute" || currentBlock.positionType === "fixed") - ) { + if (draggingBlock && currentBlock?.positionType && (currentBlock.positionType === "absolute" || currentBlock.positionType === "fixed")) { const editorElement = editorRef.current; if (editorElement) { const editorRect = editorElement.getBoundingClientRect(); @@ -195,17 +168,8 @@ const DashboardEditor: React.FC = () => { updateBlockPosition( draggingBlock, { - x: Math.max( - 0, - Math.min(editorRect.width - (currentBlock.size?.width || 400), newX) - ), - y: Math.max( - 0, - Math.min( - editorRect.height - (currentBlock.size?.height || 300), - newY - ) - ), + x: Math.max(0, Math.min(editorRect.width - (currentBlock.size?.width || 400), newX)), + y: Math.max(0, Math.min(editorRect.height - (currentBlock.size?.height || 300), newY)), }, setBlocks, blocks @@ -236,9 +200,7 @@ const DashboardEditor: React.FC = () => { const deltaY = e.clientY - resizeStart.y; const currentBlock = blocks.find((b) => b.id === resizingBlock); - const minSize = currentBlock - ? calculateMinBlockSize(currentBlock) - : { width: 300, height: 200 }; + const minSize = currentBlock ? calculateMinBlockSize(currentBlock) : { width: 300, height: 200 }; const newWidth = Math.max(minSize.width, resizeStart.width + deltaX); const newHeight = Math.max(minSize.height, resizeStart.height + deltaY); @@ -273,19 +235,7 @@ const DashboardEditor: React.FC = () => { document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseup", handleMouseUp); }; - }, [ - draggingElement, - resizingElement, - draggingBlock, - resizingBlock, - elementDragOffset, - blockDragOffset, - selectedBlock, - currentElement, - resizeStart, - currentBlock, - blocks, - ]); + }, [draggingElement, resizingElement, draggingBlock, resizingBlock, elementDragOffset, blockDragOffset, selectedBlock, currentElement, resizeStart, currentBlock, blocks]); // Update dropdown position when showElementDropdown changes useEffect(() => { @@ -316,62 +266,14 @@ const DashboardEditor: React.FC = () => { showSwapUI={showSwapUI} swapSource={swapSource} calculateMinBlockSize={calculateMinBlockSize} - handleBlockClick={(blockId, event) => - handleBlockClick( - blockId, - event, - editMode, - setSelectedBlock, - setSelectedElement, - setShowSwapUI - ) - } - handleElementClick={(blockId, elementId, event) => - handleElementClick( - blockId, - elementId, - event, - editMode, - setSelectedElement, - setSelectedBlock, - setShowSwapUI, - setShowElementDropdown - ) - } - handleElementDragStart={(elementId, event) => - handleElementDragStart( - elementId, - event, - currentElement, - setDraggingElement, - setElementDragOffset - ) - } - handleElementResizeStart={(elementId, event) => - handleElementResizeStart(elementId, event, setResizingElement, setResizeStart) - } - handleBlockResizeStart={(blockId, event) => - handleBlockResizeStart(blockId, event, setResizingBlock, setResizeStart) - } - handleSwapStart={(elementId, event) => - handleSwapStart(elementId, event, setSwapSource, setShowSwapUI) - } - handleSwapTarget={(elementId, event) => - handleSwapTarget( - elementId, - event, - swapSource, - selectedBlock, - swapElements, - setBlocks, - blocks, - setShowSwapUI, - setSwapSource - ) - } - handleBlockDragStart={(blockId, event) => - handleBlockDragStart(blockId, event, setDraggingBlock, setBlockDragOffset) - } + handleBlockClick={(blockId, event) => handleBlockClick(blockId, event, editMode, setSelectedBlock, setSelectedElement, setShowSwapUI)} + handleElementClick={(blockId, elementId, event) => handleElementClick(blockId, elementId, event, editMode, setSelectedElement, setSelectedBlock, setShowSwapUI, setShowElementDropdown)} + handleElementDragStart={(elementId, event) => handleElementDragStart(elementId, event, currentElement, setDraggingElement, setElementDragOffset)} + handleElementResizeStart={(elementId, event) => handleElementResizeStart(elementId, event, setResizingElement, setResizeStart)} + handleBlockResizeStart={(blockId, event) => handleBlockResizeStart(blockId, event, setResizingBlock, setResizeStart)} + handleSwapStart={(elementId, event) => handleSwapStart(elementId, event, setSwapSource, setShowSwapUI)} + handleSwapTarget={(elementId, event) => handleSwapTarget(elementId, event, swapSource, selectedBlock, swapElements, setBlocks, blocks, setShowSwapUI, setSwapSource)} + handleBlockDragStart={(blockId, event) => handleBlockDragStart(blockId, event, setDraggingBlock, setBlockDragOffset)} setShowElementDropdown={setShowElementDropdown} showElementDropdown={showElementDropdown} blockRef={blockRef} @@ -380,43 +282,22 @@ const DashboardEditor: React.FC = () => { - addElement( - blockId, - type as UIType, - graphType as GraphTypes, - setBlocks, - blocks, - setShowElementDropdown - ) - } + addElement={(blockId, type, graphType) => addElement(blockId, type as UIType, graphType as GraphTypes, setBlocks, blocks, setShowElementDropdown)} dropdownRef={dropdownRef} /> - {showDataModelPanel && editMode && ( - - )} + {showDataModelPanel && editMode && } {selectedBlock && editMode && !selectedElement && currentBlock && ( - updateBlockStyle(blockId, style, setBlocks, blocks) - } - updateBlockSize={(blockId, size) => - updateBlockSize(blockId, size, setBlocks, blocks) - } - updateBlockPosition={(blockId, position) => - updateBlockPosition(blockId, position, setBlocks, blocks) - } - updateBlockPositionType={(blockId, positionType) => - updateBlockPositionType(blockId, positionType, setBlocks, blocks) - } - updateBlockZIndex={(blockId, zIndex) => - updateBlockZIndex(blockId, zIndex, setBlocks, blocks) - } + updateBlockStyle={(blockId, style) => updateBlockStyle(blockId, style, setBlocks, blocks)} + updateBlockSize={(blockId, size) => updateBlockSize(blockId, size, setBlocks, blocks)} + updateBlockPosition={(blockId, position) => updateBlockPosition(blockId, position, setBlocks, blocks)} + updateBlockPositionType={(blockId, positionType) => updateBlockPositionType(blockId, positionType, setBlocks, blocks)} + updateBlockZIndex={(blockId, zIndex) => updateBlockZIndex(blockId, zIndex, setBlocks, blocks)} /> )} @@ -428,45 +309,21 @@ const DashboardEditor: React.FC = () => { selectedElement={selectedElement} blocks={blocks} setBlocks={setBlocks} - updateElementStyle={(blockId, elementId, style) => - updateElementStyle(blockId, elementId, style, setBlocks, blocks) - } - updateElementSize={(blockId, elementId, size) => - updateElementSize(blockId, elementId, size, setBlocks, blocks) - } - updateElementPosition={(blockId, elementId, position) => - updateElementPosition(blockId, elementId, position, setBlocks, blocks) - } - updateElementPositionType={(blockId, elementId, positionType) => - updateElementPositionType( - blockId, - elementId, - positionType, - setBlocks, - blocks - ) - } - updateElementZIndex={(blockId, elementId, zIndex) => - updateElementZIndex(blockId, elementId, zIndex, setBlocks, blocks) - } - updateElementData={(blockId, elementId, updates) => - updateElementData(blockId, elementId, updates, setBlocks, blocks) - } - updateGraphData={(blockId, elementId, newData) => - updateGraphData(blockId, elementId, newData, setBlocks, blocks) - } - updateGraphTitle={(blockId, elementId, title) => - updateGraphTitle(blockId, elementId, title, setBlocks, blocks) - } + updateElementStyle={(blockId, elementId, style) => updateElementStyle(blockId, elementId, style, setBlocks, blocks)} + updateElementSize={(blockId, elementId, size) => updateElementSize(blockId, elementId, size, setBlocks, blocks)} + updateElementPosition={(blockId, elementId, position) => updateElementPosition(blockId, elementId, position, setBlocks, blocks)} + updateElementPositionType={(blockId, elementId, positionType) => updateElementPositionType(blockId, elementId, positionType, setBlocks, blocks)} + updateElementZIndex={(blockId, elementId, zIndex) => updateElementZIndex(blockId, elementId, zIndex, setBlocks, blocks)} + updateElementData={(blockId, elementId, updates) => updateElementData(blockId, elementId, updates, setBlocks, blocks)} + updateGraphData={(blockId, elementId, newData) => updateGraphData(blockId, elementId, newData, setBlocks, blocks)} + updateGraphTitle={(blockId, elementId, title) => updateGraphTitle(blockId, elementId, title, setBlocks, blocks)} setSwapSource={setSwapSource} setShowSwapUI={setShowSwapUI} dataModelManager={dataModelManager} /> )} - {showSwapUI && ( - - )} + {showSwapUI && } ); }; diff --git a/app/src/SimulationDashboard/components/block/BlockComponent.tsx b/app/src/SimulationDashboard/components/block/BlockComponent.tsx index b6498a7..f24d9e9 100644 --- a/app/src/SimulationDashboard/components/block/BlockComponent.tsx +++ b/app/src/SimulationDashboard/components/block/BlockComponent.tsx @@ -1,5 +1,5 @@ import type { RefObject } from "react"; -import type { Block } from "../../../types/simulationDashboard"; +import { Block } from "../../../types/exportedTypes"; import ElementComponent from "../element/ElementComponent"; interface BlockComponentProps { diff --git a/app/src/SimulationDashboard/components/block/BlockEditor.tsx b/app/src/SimulationDashboard/components/block/BlockEditor.tsx index 12ab90b..3ab052d 100644 --- a/app/src/SimulationDashboard/components/block/BlockEditor.tsx +++ b/app/src/SimulationDashboard/components/block/BlockEditor.tsx @@ -1,5 +1,5 @@ import type { RefObject } from "react"; -import type { Block } from "../../../types/simulationDashboard"; +import { Block } from "../../../types/exportedTypes"; import { getAlphaFromRgba, rgbaToHex } from "../../functions/helpers/colorHandlers"; import { getCurrentBlockStyleValue } from "../../functions/helpers/getCurrentBlockStyleValue"; import { handleBackgroundColorChange } from "../../functions/helpers/handleBackgroundColorChange"; diff --git a/app/src/SimulationDashboard/components/block/BlockGrid.tsx b/app/src/SimulationDashboard/components/block/BlockGrid.tsx index 3b3b4be..cf5ad5a 100644 --- a/app/src/SimulationDashboard/components/block/BlockGrid.tsx +++ b/app/src/SimulationDashboard/components/block/BlockGrid.tsx @@ -1,5 +1,5 @@ import React, { type RefObject, useRef } from "react"; -import type { Block } from "../../../types/simulationDashboard"; +import type { Block } from "../../../types/exportedTypes"; import BlockComponent from "./BlockComponent"; // components/BlockGrid.tsx - Updated props diff --git a/app/src/SimulationDashboard/components/element/ElementComponent.tsx b/app/src/SimulationDashboard/components/element/ElementComponent.tsx index b90c9f1..7955dbd 100644 --- a/app/src/SimulationDashboard/components/element/ElementComponent.tsx +++ b/app/src/SimulationDashboard/components/element/ElementComponent.tsx @@ -1,5 +1,5 @@ import React from "react"; -import type { UIElement } from "../../../types/simulationDashboard"; +import type { UIElement } from "../../../types/exportedTypes"; import { resolveElementValue } from "../../functions/helpers/resolveElementValue"; import ElementContent from "./ElementContent"; diff --git a/app/src/SimulationDashboard/components/element/ElementContent.tsx b/app/src/SimulationDashboard/components/element/ElementContent.tsx index feb66ca..e54fe83 100644 --- a/app/src/SimulationDashboard/components/element/ElementContent.tsx +++ b/app/src/SimulationDashboard/components/element/ElementContent.tsx @@ -19,7 +19,7 @@ import { ResponsiveContainer, Cell, } from "recharts"; -import type { ResolvedElementValue, UIElement } from "../../../types/simulationDashboard"; +import { UIElement } from "../../../types/exportedTypes"; interface ElementContentProps { element: UIElement; @@ -52,16 +52,10 @@ const ElementContent: React.FC = ({ element, resolvedData } case "label-value": return (
- + {resolvedData.label || "Label"} - + {resolvedData.value?.toString() || "Value"}
@@ -80,50 +74,20 @@ const ElementContent: React.FC = ({ element, resolvedData }
{element.graphType === "bar" ? ( - - - + + + - + ) : element.graphType === "area" ? ( - - - + + + - + ) : element.graphType === "pie" ? ( @@ -132,18 +96,13 @@ const ElementContent: React.FC = ({ element, resolvedData } cx="50%" cy="50%" labelLine={false} - label={({ name, percent }: any) => - `${name} ${((percent as number) * 100).toFixed(0)}%` - } + label={({ name, percent }: any) => `${name} ${((percent as number) * 100).toFixed(0)}%`} outerRadius={80} fill="#8884d8" dataKey="value" > {chartData.map((_, index: number) => ( - + ))} @@ -153,29 +112,13 @@ const ElementContent: React.FC = ({ element, resolvedData } - + ) : ( - - - + + + ; } -const ElementDropdown: React.FC = ({ - showElementDropdown, - dropDownPosition, - addElement, - dropdownRef, -}) => { +const ElementDropdown: React.FC = ({ showElementDropdown, dropDownPosition, addElement, dropdownRef }) => { if (!showElementDropdown) return null; - const elementTypes = [ { label: "Label-Value", type: "label-value" }, { label: "Text", type: "text" }, @@ -37,13 +31,7 @@ const ElementDropdown: React.FC = ({ }} > {elementTypes.map((elementType) => ( - ))} diff --git a/app/src/SimulationDashboard/components/element/ElementEditor.tsx b/app/src/SimulationDashboard/components/element/ElementEditor.tsx index ea77081..45d6244 100644 --- a/app/src/SimulationDashboard/components/element/ElementEditor.tsx +++ b/app/src/SimulationDashboard/components/element/ElementEditor.tsx @@ -1,12 +1,5 @@ import type { RefObject } from "react"; -import type { - Block, - DataBinding, - DataSourceType, - ExtendedCSSProperties, - GraphDataPoint, - UIElement, -} from "../../../types/simulationDashboard"; +import { ExtendedCSSProperties, UIElement, Block } from "../../../types/exportedTypes"; import { getCurrentElementStyleValue } from "../../functions/helpers/getCurrentElementStyleValue"; import type { DataModelManager } from "../../data/dataModel"; @@ -18,21 +11,9 @@ interface ElementEditorProps { blocks: Block[]; setBlocks: (blocks: Block[]) => void; 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) => void; updateGraphData: (blockId: string, elementId: string, newData: GraphDataPoint[]) => void; @@ -110,8 +91,7 @@ const ElementEditor: React.FC = ({ value={(currentElement.style.flexDirection as string) || "column"} onChange={(e) => updateElementStyle(selectedBlock, selectedElement, { - flexDirection: e.target - .value as React.CSSProperties["flexDirection"], + flexDirection: e.target.value as React.CSSProperties["flexDirection"], }) } className="form-select" @@ -230,9 +210,7 @@ const ElementEditor: React.FC = ({ updateElementSize(selectedBlock, selectedElement, { ...currentElement.size!, @@ -248,9 +226,7 @@ const ElementEditor: React.FC = ({ updateElementSize(selectedBlock, selectedElement, { ...currentElement.size!, @@ -280,13 +256,7 @@ const ElementEditor: React.FC = ({ { - const newGraphType = e.target.value as - | "line" - | "bar" - | "area" - | "pie" - | "radar"; + const newGraphType = e.target.value as "line" | "bar" | "area" | "pie" | "radar"; setBlocks( blocks.map((b) => b.id === selectedBlock @@ -425,9 +388,7 @@ const ElementEditor: React.FC = ({ type="text" placeholder="Chart Title" value={currentElement.graphTitle || ""} - onChange={(e) => - updateGraphTitle(selectedBlock, selectedElement, e.target.value) - } + onChange={(e) => updateGraphTitle(selectedBlock, selectedElement, e.target.value)} className="form-input" />
@@ -448,9 +409,7 @@ const ElementEditor: React.FC = ({ {/* Data Binding Section */} -

- Data Binding -

+

Data Binding

@@ -577,8 +536,7 @@ const ElementEditor: React.FC = ({ className="form-input" /> - Use {"{key}"} to reference data values. Example:{" "} - {"{totalUsers} * {growthRate}"} + Use {"{key}"} to reference data values. Example: {"{totalUsers} * {growthRate}"}
@@ -589,11 +547,7 @@ const ElementEditor: React.FC = ({