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

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

@@ -5,6 +5,7 @@ import { Block } from "../../types/exportedTypes";
import AnalyzerManager from "./AnalyzerManager"; import AnalyzerManager from "./AnalyzerManager";
import { useSceneContext } from "../../modules/scene/sceneContext"; import { useSceneContext } from "../../modules/scene/sceneContext";
import { useVisualizationStore } from "../../store/visualization/useVisualizationStore";
import useModuleStore from "../../store/ui/useModuleStore"; import useModuleStore from "../../store/ui/useModuleStore";
import { usePlayButtonStore } from "../../store/ui/usePlayButtonStore"; import { usePlayButtonStore } from "../../store/ui/usePlayButtonStore";
import { calculateMinBlockSize } from "./functions/block/calculateMinBlockSize"; import { calculateMinBlockSize } from "./functions/block/calculateMinBlockSize";
@@ -22,6 +23,7 @@ import { deleteDashBoardElementsApi } from "../../services/visulization/dashBoar
const DashboardEditor: React.FC = () => { const DashboardEditor: React.FC = () => {
const { simulationDashBoardStore, versionStore } = useSceneContext(); const { simulationDashBoardStore, versionStore } = useSceneContext();
const { eyeDropperTarget, setEyeDropperTarget } = useVisualizationStore();
const { selectedVersion } = versionStore(); const { selectedVersion } = versionStore();
const { projectId } = useParams(); const { projectId } = useParams();
const { activeModule } = useModuleStore(); const { activeModule } = useModuleStore();
@@ -91,6 +93,7 @@ const DashboardEditor: React.FC = () => {
if (!editMode) { if (!editMode) {
setSelectedBlock(null); setSelectedBlock(null);
setSelectedElement(null); setSelectedElement(null);
setEyeDropperTarget(null);
} }
}, [editMode]); }, [editMode]);
@@ -450,6 +453,7 @@ const DashboardEditor: React.FC = () => {
{/* BlockGrid */} {/* BlockGrid */}
<div className={`${editMode ? "editable" : ""} block-grid-container`}> <div className={`${editMode ? "editable" : ""} block-grid-container`}>
{!eyeDropperTarget && (
<BlockGrid <BlockGrid
blocks={blocks} blocks={blocks}
handleAddElement={async (blockId, type, graphType) => { handleAddElement={async (blockId, type, graphType) => {
@@ -475,6 +479,7 @@ const DashboardEditor: React.FC = () => {
showElementDropdown={showElementDropdown} showElementDropdown={showElementDropdown}
blockRef={blockRef} blockRef={blockRef}
/> />
)}
{/* BlockEditor */} {/* 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} /> <XAxis dataKey="name" stroke="rgba(255,255,255,0.6)" fontSize={12} />
<YAxis stroke="rgba(255,255,255,0.6)" fontSize={12} /> <YAxis stroke="rgba(255,255,255,0.6)" fontSize={12} />
<Tooltip {...tooltipStyle} /> <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) => ( (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 <Line