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

refactor: Update color codes to use full hex values and remove unused functions in simulation dashboard

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-10-16 14:17:36 +05:30
parent bf35e00df6
commit f3dd44cf04
14 changed files with 83 additions and 414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
app/src/SimulationDashboard/DashboardEditor.tsx
View File

@@ -1,25 +1,11 @@
import React, { useState, useRef, useEffect } from "react";
import type { Block } from "../types/exportedTypes";
import { dataModelManager } from "./data/dataModel";
import ControlPanel from "./ControlPanel";
import SwapModal from "./SwapModal";
import DataModelPanel from "./components/models/DataModelPanel";
import { addBlock } from "./functions/block/addBlock";
import { addElement } from "./functions/element/addElement";
import { useSceneContext } from "../modules/scene/sceneContext";
import { calculateMinBlockSize } from "./functions/block/calculateMinBlockSize";
import { updateBlockStyle, updateBlockSize, updateBlockPosition, updateBlockPositionType, updateBlockZIndex } from "./functions/block/updateBlock";
import {
updateElementStyle,
updateElementSize,
updateElementPosition,
updateElementPositionType,
updateElementZIndex,
updateElementData,
updateGraphData,
updateGraphTitle,
} from "./functions/element/updateElement";
import { swapElements } from "./functions/element/swapElements";
import { handleElementDragStart, handleElementResizeStart, handleBlockResizeStart, handleSwapStart, handleSwapTarget, handleBlockClick, handleElementClick } from "./functions/eventHandlers";
import BlockGrid from "./components/block/BlockGrid";
import ElementDropdown from "./components/element/ElementDropdown";
@@ -28,10 +14,30 @@ import ElementEditor from "./components/element/ElementEditor";
import { handleBlockDragStart } from "./functions/block/handleBlockDragStart";
const DashboardEditor: React.FC = () => {
const [blocks, setBlocks] = useState<Block[]>([]);
const [editMode, setEditMode] = useState(false);
const { simulationDashBoardStore } = useSceneContext();
const {
blocks,
setBlocks,
updateBlockPosition,
updateElementPosition,
updateBlockSize,
updateElementSize,
addBlock,
addElement,
updateBlockStyle,
updateBlockPositionType,
updateBlockZIndex,
updateElementStyle,
updateElementPositionType,
updateElementZIndex,
updateElementData,
updateGraphData,
updateGraphTitle,
swapElements,
} = simulationDashBoardStore();
const [selectedBlock, setSelectedBlock] = useState<string | null>(null);
const [selectedElement, setSelectedElement] = useState<string | null>(null);
const [editMode, setEditMode] = useState(false);
const [draggingElement, setDraggingElement] = useState<string | null>(null);
const [resizingElement, setResizingElement] = useState<string | null>(null);
const [resizingBlock, setResizingBlock] = useState<string | null>(null);
@@ -144,16 +150,10 @@ const DashboardEditor: React.FC = () => {
const newX = e.clientX - blockRect.left - elementDragOffset.x; // Use elementDragOffset
const newY = e.clientY - blockRect.top - elementDragOffset.y; // Use elementDragOffset
updateElementPosition(
selectedBlock,
draggingElement,
{
x: Math.max(0, Math.min(blockRect.width - 50, newX)),
y: Math.max(0, Math.min(blockRect.height - 30, newY)),
},
setBlocks,
blocks
);
updateElementPosition(selectedBlock, draggingElement, {
x: Math.max(0, Math.min(blockRect.width - 50, newX)),
y: Math.max(0, Math.min(blockRect.height - 30, newY)),
});
}
}
@@ -165,15 +165,10 @@ const DashboardEditor: React.FC = () => {
const newX = e.clientX - editorRect.left - blockDragOffset.x; // Use blockDragOffset
const newY = e.clientY - editorRect.top - blockDragOffset.y; // Use blockDragOffset
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)),
},
setBlocks,
blocks
);
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)),
});
}
}
@@ -185,16 +180,10 @@ const DashboardEditor: React.FC = () => {
const newWidth = Math.max(100, resizeStart.width + deltaX);
const newHeight = Math.max(50, resizeStart.height + deltaY);
updateElementSize(
selectedBlock,
resizingElement,
{
width: newWidth,
height: newHeight,
},
setBlocks,
blocks
);
updateElementSize(selectedBlock, resizingElement, {
width: newWidth,
height: newHeight,
});
} else if (resizingBlock) {
const deltaX = e.clientX - resizeStart.x;
const deltaY = e.clientY - resizeStart.y;
@@ -205,15 +194,10 @@ const DashboardEditor: React.FC = () => {
const newWidth = Math.max(minSize.width, resizeStart.width + deltaX);
const newHeight = Math.max(minSize.height, resizeStart.height + deltaY);
updateBlockSize(
resizingBlock,
{
width: newWidth,
height: newHeight,
},
setBlocks,
blocks
);
updateBlockSize(resizingBlock, {
width: newWidth,
height: newHeight,
});
}
}
};
@@ -250,13 +234,7 @@ const DashboardEditor: React.FC = () => {
return (
<div ref={editorRef} className="dashboard-editor">
<ControlPanel
editMode={editMode}
setEditMode={setEditMode}
addBlock={() => addBlock(setBlocks, blocks)}
showDataModelPanel={showDataModelPanel}
setShowDataModelPanel={setShowDataModelPanel}
/>
<ControlPanel editMode={editMode} setEditMode={setEditMode} addBlock={() => addBlock()} showDataModelPanel={showDataModelPanel} setShowDataModelPanel={setShowDataModelPanel} />
<BlockGrid
blocks={blocks}
@@ -272,7 +250,7 @@ const DashboardEditor: React.FC = () => {
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)}
handleSwapTarget={(elementId, event) => handleSwapTarget(elementId, event, swapSource, selectedBlock, swapElements)}
handleBlockDragStart={(blockId, event) => handleBlockDragStart(blockId, event, setDraggingBlock, setBlockDragOffset)}
setShowElementDropdown={setShowElementDropdown}
showElementDropdown={showElementDropdown}
@@ -282,7 +260,7 @@ const DashboardEditor: React.FC = () => {
<ElementDropdown
showElementDropdown={showElementDropdown}
dropDownPosition={dropDownPosition}
addElement={(blockId, type, graphType) => addElement(blockId, type as UIType, graphType as GraphTypes, setBlocks, blocks, setShowElementDropdown)}
addElement={(blockId, type, graphType) => addElement(blockId, type as UIType, graphType as GraphTypes)}
dropdownRef={dropdownRef}
/>
@@ -293,11 +271,11 @@ const DashboardEditor: React.FC = () => {
blockEditorRef={blockEditorRef}
currentBlock={currentBlock}
selectedBlock={selectedBlock}
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)}
updateBlockStyle={(blockId, style) => updateBlockStyle(blockId, style)}
updateBlockSize={(blockId, size) => updateBlockSize(blockId, size)}
updateBlockPosition={(blockId, position) => updateBlockPosition(blockId, position)}
updateBlockPositionType={(blockId, positionType) => updateBlockPositionType(blockId, positionType)}
updateBlockZIndex={(blockId, zIndex) => updateBlockZIndex(blockId, zIndex)}
/>
)}
@@ -309,14 +287,14 @@ 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)}
updateElementSize={(blockId, elementId, size) => updateElementSize(blockId, elementId, size)}
updateElementPosition={(blockId, elementId, position) => updateElementPosition(blockId, elementId, position)}
updateElementPositionType={(blockId, elementId, positionType) => updateElementPositionType(blockId, elementId, positionType)}
updateElementZIndex={(blockId, elementId, zIndex) => updateElementZIndex(blockId, elementId, zIndex)}
updateElementData={(blockId, elementId, updates) => updateElementData(blockId, elementId, updates)}
updateGraphData={(blockId, elementId, newData) => updateGraphData(blockId, elementId, newData)}
updateGraphTitle={(blockId, elementId, title) => updateGraphTitle(blockId, elementId, title)}
setSwapSource={setSwapSource}
setShowSwapUI={setShowSwapUI}
dataModelManager={dataModelManager}

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

@@ -44,7 +44,7 @@ const ElementContent: React.FC<ElementContentProps> = ({ element, resolvedData }
backgroundColor: "rgba(50, 50, 50, 0.9)",
border: "1px solid rgba(255,255,255,0.2)",
borderRadius: "4px",
color: "#fff",
color: "#ffffff",
},
};
@@ -52,10 +52,10 @@ const ElementContent: React.FC<ElementContentProps> = ({ element, resolvedData }
case "label-value":
return (
<div className="label-value-container">
<span className="label-text" style={{ color: element.style.labelColor || element.style.color || "#fff" }}>
<span className="label-text" style={{ color: element.style.labelColor || element.style.color || "#ffffff" }}>
{resolvedData.label || "Label"}
</span>
<span className="value-text" style={{ color: element.style.valueColor || element.style.color || "#fff" }}>
<span className="value-text" style={{ color: element.style.valueColor || element.style.color || "#ffffff" }}>
{resolvedData.value?.toString() || "Value"}
</span>
</div>

27
app/src/SimulationDashboard/functions/block/addBlock.ts
View File

@@ -1,27 +0,0 @@
import { generateUniqueId } from "../../../functions/generateUniqueId";
import type { Block } from "../../../types/exportedTypes";
export const addBlock = (
setBlocks: React.Dispatch<React.SetStateAction<Block[]>>,
blocks: Block[]
): void => {
const newBlock: Block = {
id: generateUniqueId(),
style: {
backgroundColor: "rgba(50, 50, 50, 0.8)",
backdropFilter: "blur(10px)",
padding: 10,
borderRadius: 8,
border: "1px solid rgba(255, 255, 255, 0.1)",
position: "relative",
minHeight: "200px",
minWidth: "300px",
},
elements: [],
zIndex: 1,
size: { width: 400, height: 300 },
position: { x: 0, y: 0 },
positionType: "relative",
};
setBlocks([...blocks, newBlock]);
};

48
app/src/SimulationDashboard/functions/block/updateBlock.ts
View File

@@ -1,48 +0,0 @@
import type { Block } from "../../../types/exportedTypes";
export const updateBlockStyle = (
blockId: string,
newStyle: React.CSSProperties,
setBlocks: React.Dispatch<React.SetStateAction<Block[]>>,
blocks: Block[]
): void => {
setBlocks(
blocks.map((b) => (b.id === blockId ? { ...b, style: { ...b.style, ...newStyle } } : b))
);
};
export const updateBlockSize = (
blockId: string,
size: Size,
setBlocks: React.Dispatch<React.SetStateAction<Block[]>>,
blocks: Block[]
): void => {
setBlocks(blocks.map((b) => (b.id === blockId ? { ...b, size } : b)));
};
export const updateBlockPosition = (
blockId: string,
position: Position,
setBlocks: React.Dispatch<React.SetStateAction<Block[]>>,
blocks: Block[]
): void => {
setBlocks(blocks.map((b) => (b.id === blockId ? { ...b, position } : b)));
};
export const updateBlockPositionType = (
blockId: string,
positionType: "relative" | "absolute" | "fixed",
setBlocks: React.Dispatch<React.SetStateAction<Block[]>>,
blocks: Block[]
): void => {
setBlocks(blocks.map((b) => (b.id === blockId ? { ...b, positionType } : b)));
};
export const updateBlockZIndex = (
blockId: string,
zIndex: number,
setBlocks: React.Dispatch<React.SetStateAction<Block[]>>,
blocks: Block[]
): void => {
setBlocks(blocks.map((b) => (b.id === blockId ? { ...b, zIndex } : b)));
};

63
app/src/SimulationDashboard/functions/element/addElement.ts
View File

@@ -1,63 +0,0 @@
import { generateUniqueId } from "../../../functions/generateUniqueId";
import type { Block, UIElement } from "../../../types/exportedTypes";
import { defaultGraphData } from "../../data/defaultGraphData";
export const addElement = (
blockId: string,
type: UIType,
graphType: GraphTypes | undefined,
setBlocks: React.Dispatch<React.SetStateAction<Block[]>>,
blocks: Block[],
setShowElementDropdown: (value: string | null) => void
): void => {
const newElement: UIElement = {
id: generateUniqueId(),
type: type,
graphType,
graphTitle: graphType ? `${graphType.charAt(0).toUpperCase() + graphType.slice(1)} Chart` : undefined,
style:
type === "graph"
? {
width: "100%",
height: "100%",
minHeight: "120px",
color: "#fff",
fontSize: 14,
textAlign: "left" as const,
backgroundColor: "rgba(0, 0, 0, 0.2)",
borderRadius: "4px",
padding: "8px",
}
: type === "label-value"
? {
color: "#fff",
fontSize: 14,
textAlign: "left" as const,
display: "flex",
flexDirection: "column",
gap: "4px",
alignItems: "flex-start",
justifyContent: "center",
labelColor: "#ffffff",
valueColor: "#ffffff",
}
: {
color: "#fff",
fontSize: 14,
textAlign: "left" as const,
},
positionType: "relative",
position: { x: 0, y: 0 },
zIndex: 1,
data: {
key: generateUniqueId(),
dataSource: "static",
staticValue: type === "label-value" ? "Value" : type === "text" ? "Text" : "",
label: type === "label-value" ? "Label" : undefined,
},
graphData: type === "graph" ? defaultGraphData : undefined,
size: type === "graph" ? { width: 400, height: 200 } : { width: 200, height: 60 },
};
setBlocks(blocks.map((b) => (b.id === blockId ? { ...b, elements: [...b.elements, newElement] } : b)));
setShowElementDropdown(null);
};

34
app/src/SimulationDashboard/functions/element/swapElements.ts
View File

@@ -1,34 +0,0 @@
import type { Block } from "../../../types/exportedTypes";
export const swapElements = (
blockId: string,
elementId1: string,
elementId2: string,
setBlocks: React.Dispatch<React.SetStateAction<Block[]>>,
blocks: Block[],
setShowSwapUI: (show: boolean) => void,
setSwapSource: (source: string | null) => void
): void => {
setBlocks(
blocks.map((b) =>
b.id === blockId
? {
...b,
elements: b.elements.map((el) => {
if (el.id === elementId1) {
const targetElement = b.elements.find((e) => e.id === elementId2);
return targetElement ? { ...targetElement, id: elementId1 } : el;
}
if (el.id === elementId2) {
const sourceElement = b.elements.find((e) => e.id === elementId1);
return sourceElement ? { ...sourceElement, id: elementId2 } : el;
}
return el;
}),
}
: b
)
);
setShowSwapUI(false);
setSwapSource(null);
};

121
app/src/SimulationDashboard/functions/element/updateElement.ts
View File

@@ -1,121 +0,0 @@
import type { Block, ExtendedCSSProperties } from "../../../types/exportedTypes";
export const updateElementStyle = (blockId: string, elementId: string, newStyle: ExtendedCSSProperties, setBlocks: React.Dispatch<React.SetStateAction<Block[]>>, blocks: Block[]): void => {
setBlocks(
blocks.map((b) =>
b.id === blockId
? {
...b,
elements: b.elements.map((el) => (el.id === elementId ? { ...el, style: { ...el.style, ...newStyle } } : el)),
}
: b
)
);
};
export const updateElementSize = (blockId: string, elementId: string, size: Size, setBlocks: React.Dispatch<React.SetStateAction<Block[]>>, blocks: Block[]): void => {
setBlocks(
blocks.map((b) =>
b.id === blockId
? {
...b,
elements: b.elements.map((el) => (el.id === elementId ? { ...el, size } : el)),
}
: b
)
);
};
export const updateElementPosition = (blockId: string, elementId: string, position: Position, setBlocks: React.Dispatch<React.SetStateAction<Block[]>>, blocks: Block[]): void => {
setBlocks(
blocks.map((b) =>
b.id === blockId
? {
...b,
elements: b.elements.map((el) => (el.id === elementId ? { ...el, position } : el)),
}
: b
)
);
};
export const updateElementPositionType = (
blockId: string,
elementId: string,
positionType: "relative" | "absolute" | "fixed",
setBlocks: React.Dispatch<React.SetStateAction<Block[]>>,
blocks: Block[]
): void => {
setBlocks(
blocks.map((b) =>
b.id === blockId
? {
...b,
elements: b.elements.map((el) => (el.id === elementId ? { ...el, positionType } : el)),
}
: b
)
);
};
export const updateElementZIndex = (blockId: string, elementId: string, zIndex: number, setBlocks: React.Dispatch<React.SetStateAction<Block[]>>, blocks: Block[]): void => {
setBlocks(
blocks.map((b) =>
b.id === blockId
? {
...b,
elements: b.elements.map((el) => (el.id === elementId ? { ...el, zIndex } : el)),
}
: b
)
);
};
export const updateElementData = (blockId: string, elementId: string, updates: Partial<DataBinding>, setBlocks: React.Dispatch<React.SetStateAction<Block[]>>, blocks: Block[]): void => {
setBlocks(
blocks.map((b) =>
b.id === blockId
? {
...b,
elements: b.elements.map((el) =>
el.id === elementId && el.data
? {
...el,
data: {
...el.data,
...updates,
},
}
: el
),
}
: b
)
);
};
export const updateGraphData = (blockId: string, elementId: string, newData: GraphDataPoint[], setBlocks: React.Dispatch<React.SetStateAction<Block[]>>, blocks: Block[]): void => {
setBlocks(
blocks.map((b) =>
b.id === blockId
? {
...b,
elements: b.elements.map((el) => (el.id === elementId ? { ...el, graphData: newData } : el)),
}
: b
)
);
};
export const updateGraphTitle = (blockId: string, elementId: string, title: string, setBlocks: React.Dispatch<React.SetStateAction<Block[]>>, blocks: Block[]): void => {
setBlocks(
blocks.map((b) =>
b.id === blockId
? {
...b,
elements: b.elements.map((el) => (el.id === elementId ? { ...el, graphTitle: title } : el)),
}
: b
)
);
};

10
app/src/SimulationDashboard/functions/eventHandlers/index.ts
View File

@@ -97,19 +97,11 @@ export const handleSwapTarget = (
blockId: string,
elementId1: string,
elementId2: string,
setBlocks: React.Dispatch<React.SetStateAction<Block[]>>,
blocks: Block[],
setShowSwapUI: (show: boolean) => void,
setSwapSource: (source: string | null) => void
) => void,
setBlocks: React.Dispatch<React.SetStateAction<Block[]>>,
blocks: Block[],
setShowSwapUI: (show: boolean) => void,
setSwapSource: (source: string | null) => void
): void => {
event.stopPropagation();
if (swapSource && swapSource !== elementId && selectedBlock) {
swapElements(selectedBlock, swapSource, elementId, setBlocks, blocks, setShowSwapUI, setSwapSource);
swapElements(selectedBlock, swapSource, elementId);
}
};

4
app/src/components/ui/compareVersion/ComparisonResult.tsx
View File

@@ -84,7 +84,7 @@ const ComparisonResult = () => {
comparedProducts[1]?.simulationData.machineActiveTime,
],
backgroundColor: [purpleDark, purpleLight],
borderColor: "#fff",
borderColor: "#ffffff",
borderWidth: 2,
},
],
@@ -100,7 +100,7 @@ const ComparisonResult = () => {
comparedProducts[1]?.simulationData.machineIdleTime,
],
backgroundColor: [purpleDark, purpleLight],
borderColor: "#fff",
borderColor: "#ffffff",
borderWidth: 2,
},
],

10
app/src/modules/scene/sceneContext.tsx
View File

@@ -28,6 +28,8 @@ import { createStorageUnitStore, StorageUnitStoreType } from "../../store/simula
import { createHumanStore, HumanStoreType } from "../../store/simulation/useHumanStore";
import { createCraneStore, CraneStoreType } from "../../store/simulation/useCraneStore";
import { createSimulationDashboardStore, SimulationDashboardStoreType } from "../../store/simulation/useSimulationDashBoardStore";
import { createThreadsStore, ThreadStoreType } from "../../store/collaboration/useThreadStore";
import { createCollabusersStore, CollabUsersStoreType } from "../../store/collaboration/useCollabUsersStore";
@@ -63,6 +65,8 @@ type SceneContextValue = {
humanStore: HumanStoreType;
craneStore: CraneStoreType;
simulationDashBoardStore: SimulationDashboardStoreType;
threadStore: ThreadStoreType;
collabUsersStore: CollabUsersStoreType;
@@ -118,6 +122,8 @@ export function SceneProvider({
const humanStore = useMemo(() => createHumanStore(), []);
const craneStore = useMemo(() => createCraneStore(), []);
const simulationDashBoardStore = useMemo(() => createSimulationDashboardStore(), []);
const threadStore = useMemo(() => createThreadsStore(), []);
const collabUsersStore = useMemo(() => createCollabusersStore(), []);
@@ -150,6 +156,7 @@ export function SceneProvider({
storageUnitStore.getState().clearStorageUnits();
humanStore.getState().clearHumans();
craneStore.getState().clearCranes();
simulationDashBoardStore.getState().clearBlocks();
threadStore.getState().clearThreads();
collabUsersStore.getState().clearCollabUsers();
humanEventManagerRef.current.humanStates = [];
@@ -176,6 +183,7 @@ export function SceneProvider({
storageUnitStore,
humanStore,
craneStore,
simulationDashBoardStore,
threadStore,
collabUsersStore,
]
@@ -206,6 +214,7 @@ export function SceneProvider({
storageUnitStore,
humanStore,
craneStore,
simulationDashBoardStore,
threadStore,
collabUsersStore,
humanEventManagerRef,
@@ -238,6 +247,7 @@ export function SceneProvider({
storageUnitStore,
humanStore,
craneStore,
simulationDashBoardStore,
threadStore,
collabUsersStore,
clearStores,

24
app/src/store/simulation/useSimulationDashBoardStore.ts
View File

@@ -8,8 +8,6 @@ interface SimulationDashboardStore {
blocks: Block[];
selectedBlockId: string | null;
selectedElementId: string | null;
hoveredBlockId: string | null;
hoveredElementId: string | null;
// Block operations
addBlock: () => void;
@@ -45,8 +43,6 @@ interface SimulationDashboardStore {
// Selection and hover management
setSelectedBlock: (blockId: string | null) => void;
setSelectedElement: (elementId: string | null) => void;
setHoveredBlock: (blockId: string | null) => void;
setHoveredElement: (elementId: string | null) => void;
// Element swapping
swapElements: (blockId: string, elementId1: string, elementId2: string) => void;
@@ -66,8 +62,6 @@ export const createSimulationDashboardStore = () => {
blocks: [],
selectedBlockId: null,
selectedElementId: null,
hoveredBlockId: null,
hoveredElementId: null,
// Block operations
addBlock: () => {
@@ -188,7 +182,7 @@ export const createSimulationDashboardStore = () => {
width: "100%",
height: "100%",
minHeight: "120px",
color: "#fff",
color: "#ffffff",
fontSize: 14,
textAlign: "left" as const,
backgroundColor: "rgba(0, 0, 0, 0.2)",
@@ -197,7 +191,7 @@ export const createSimulationDashboardStore = () => {
}
: type === "label-value"
? {
color: "#fff",
color: "#ffffff",
fontSize: 14,
textAlign: "left" as const,
display: "flex",
@@ -209,7 +203,7 @@ export const createSimulationDashboardStore = () => {
valueColor: "#ffffff",
}
: {
color: "#fff",
color: "#ffffff",
fontSize: 14,
textAlign: "left" as const,
},
@@ -369,18 +363,6 @@ export const createSimulationDashboardStore = () => {
});
},
setHoveredBlock: (blockId) => {
set((state) => {
state.hoveredBlockId = blockId;
});
},
setHoveredElement: (elementId) => {
set((state) => {
state.hoveredElementId = elementId;
});
},
// Element swapping
swapElements: (blockId, elementId1, elementId2) => {
set((state) => {

6
app/src/styles/components/simulation/_simulation.scss
View File

@@ -522,9 +522,9 @@
background: linear-gradient(135deg, var(--accent-color), #ff00f000);
background-size: 400% 400%;
animation: borderAnimation 5s linear infinite;
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask: linear-gradient(#ffffff 0 0) content-box,
linear-gradient(#ffffff 0 0);
mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
z-index: -1;

10
app/src/styles/components/simulationDashboard/_simulationDashBoard.scss
View File

@@ -4,7 +4,7 @@
max-height: 100vh;
width: 100vw;
overflow: hidden;
color: #fff;
color: #ffffff;
z-index: 2;
background: transparent;
position: absolute;
@@ -236,7 +236,7 @@
padding: 20px;
z-index: 1000;
border-radius: 12px;
color: #fff;
color: #ffffff;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
h4 {
@@ -295,7 +295,7 @@
width: 100%;
padding: 8px;
background-color: rgba(85, 85, 85, 0.6);
color: #fff;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 6px;
font-family: inherit;
@@ -342,7 +342,7 @@
padding: 20px;
border-radius: 12px;
z-index: 2000;
color: #fff;
color: #ffffff;
text-align: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
@@ -379,7 +379,7 @@
font-weight: bold;
margin-bottom: 8px;
text-align: center;
color: #fff;
color: #ffffff;
}
.chart-content {

2
app/src/styles/layout/_resourceManagement.scss
View File

@@ -120,7 +120,7 @@
height: 100%;
width: 100%;
border-radius: 50%;
background-color: #fff;
background-color: #ffffff;
overflow: hidden;
// transform: translate(-26px, -12px);
}