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

feat: Implement simulation dashboard editor for managing blocks and elements.

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-12-22 17:44:59 +05:30
parent 5f8f7c8396
commit f2670538e7
2 changed files with 45 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
app/src/components/SimulationDashboard/DashboardEditor.tsx
View File

@@ -5,6 +5,7 @@ import { Block } from "../../types/exportedTypes";
import AnalyzerManager from "./AnalyzerManager";
import { useSceneContext } from "../../modules/scene/sceneContext";
import { useVisualizationStore } from "../../store/visualization/useVisualizationStore";
import useModuleStore from "../../store/ui/useModuleStore";
import { usePlayButtonStore } from "../../store/ui/usePlayButtonStore";
import { calculateMinBlockSize } from "./functions/block/calculateMinBlockSize";
@@ -22,6 +23,7 @@ import { deleteDashBoardElementsApi } from "../../services/visulization/dashBoar
const DashboardEditor: React.FC = () => {
const { simulationDashBoardStore, versionStore } = useSceneContext();
const { eyeDropperTarget, setEyeDropperTarget } = useVisualizationStore();
const { selectedVersion } = versionStore();
const { projectId } = useParams();
const { activeModule } = useModuleStore();
@@ -91,6 +93,7 @@ const DashboardEditor: React.FC = () => {
if (!editMode) {
setSelectedBlock(null);
setSelectedElement(null);
setEyeDropperTarget(null);
}
}, [editMode]);
@@ -450,31 +453,33 @@ const DashboardEditor: React.FC = () => {
{/* BlockGrid */}
<div className={`${editMode ? "editable" : ""} block-grid-container`}>
<BlockGrid
blocks={blocks}
handleAddElement={async (blockId, type, graphType) => {
const updatedBlocks = peekAddElement(blockId, type, graphType);
const updatedBlock = getBlockFromPeekedBlocks(updatedBlocks, blockId);
if (updatedBlock) {
await updateBackend(updatedBlock);
}
}}
editMode={editMode}
selectedBlock={selectedBlock}
selectedElement={selectedElement}
calculateMinBlockSize={calculateMinBlockSize}
handleBlockClick={(blockId, event) => handleBlockClick(blockId, event, editMode, setSelectedBlock, setSelectedElement, setShowElementDropdown, showElementDropdown)}
handleElementClick={(blockId, elementId, event) => {
handleElementClick(blockId, elementId, event, editMode, setSelectedElement, setSelectedBlock, 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)}
handleBlockDragStart={(blockId, event) => handleBlockDragStart(blockId, event, setDraggingBlock, setBlockDragOffset)}
setShowElementDropdown={setShowElementDropdown}
showElementDropdown={showElementDropdown}
blockRef={blockRef}
/>
{!eyeDropperTarget && (
<BlockGrid
blocks={blocks}
handleAddElement={async (blockId, type, graphType) => {
const updatedBlocks = peekAddElement(blockId, type, graphType);
const updatedBlock = getBlockFromPeekedBlocks(updatedBlocks, blockId);
if (updatedBlock) {
await updateBackend(updatedBlock);
}
}}
editMode={editMode}
selectedBlock={selectedBlock}
selectedElement={selectedElement}
calculateMinBlockSize={calculateMinBlockSize}
handleBlockClick={(blockId, event) => handleBlockClick(blockId, event, editMode, setSelectedBlock, setSelectedElement, setShowElementDropdown, showElementDropdown)}
handleElementClick={(blockId, elementId, event) => {
handleElementClick(blockId, elementId, event, editMode, setSelectedElement, setSelectedBlock, 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)}
handleBlockDragStart={(blockId, event) => handleBlockDragStart(blockId, event, setDraggingBlock, setBlockDragOffset)}
setShowElementDropdown={setShowElementDropdown}
showElementDropdown={showElementDropdown}
blockRef={blockRef}
/>
)}
{/* BlockEditor */}

17
app/src/components/SimulationDashboard/components/element/ElementContent.tsx
View File

@@ -145,9 +145,22 @@ const ElementContent: React.FC<ElementContentProps> = ({ element, resolvedData }
<XAxis dataKey="name" stroke="rgba(255,255,255,0.6)" fontSize={12} />
<YAxis stroke="rgba(255,255,255,0.6)" fontSize={12} />
<Tooltip {...tooltipStyle} />
{element.dataBinding?.dataType === "single-machine" && element.dataBinding.dataValue ? (
{element.dataBinding?.dataType === "single-machine" &&
element.dataBinding.dataValue &&
(!Array.isArray(element.dataBinding.dataValue) || element.dataBinding.dataValue.length > 0) ? (
(Array.isArray(element.dataBinding.dataValue) ? element.dataBinding.dataValue : [element.dataBinding.dataValue as string]).map((key, index) => (
<Line key={key} type="monotone" dataKey={key} stroke={COLORS[index % COLORS.length]} strokeWidth={2} dot={false} isAnimationActive={false} />
<Line
key={key}
type="monotone"
dataKey={key}
stroke={COLORS[index % COLORS.length]}
strokeWidth={2}
dot={{
fill: "#c4abf1",
strokeWidth: 2,
}}
isAnimationActive={false}
/>
))
) : (
<Line