diff --git a/app/src/SimulationDashboard/DashboardEditor.tsx b/app/src/SimulationDashboard/DashboardEditor.tsx index 63a35c3..4fff5bd 100644 --- a/app/src/SimulationDashboard/DashboardEditor.tsx +++ b/app/src/SimulationDashboard/DashboardEditor.tsx @@ -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([]); - 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(null); const [selectedElement, setSelectedElement] = useState(null); + const [editMode, setEditMode] = useState(false); const [draggingElement, setDraggingElement] = useState(null); const [resizingElement, setResizingElement] = useState(null); const [resizingBlock, setResizingBlock] = useState(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 (
- addBlock(setBlocks, blocks)} - showDataModelPanel={showDataModelPanel} - setShowDataModelPanel={setShowDataModelPanel} - /> + addBlock()} showDataModelPanel={showDataModelPanel} setShowDataModelPanel={setShowDataModelPanel} /> { 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 = () => { 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} diff --git a/app/src/SimulationDashboard/components/element/ElementContent.tsx b/app/src/SimulationDashboard/components/element/ElementContent.tsx index e54fe83..6cb97c3 100644 --- a/app/src/SimulationDashboard/components/element/ElementContent.tsx +++ b/app/src/SimulationDashboard/components/element/ElementContent.tsx @@ -44,7 +44,7 @@ const ElementContent: React.FC = ({ 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 = ({ element, resolvedData } case "label-value": return (
- + {resolvedData.label || "Label"} - + {resolvedData.value?.toString() || "Value"}
diff --git a/app/src/SimulationDashboard/functions/block/addBlock.ts b/app/src/SimulationDashboard/functions/block/addBlock.ts deleted file mode 100644 index 7b4c968..0000000 --- a/app/src/SimulationDashboard/functions/block/addBlock.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { generateUniqueId } from "../../../functions/generateUniqueId"; -import type { Block } from "../../../types/exportedTypes"; - -export const addBlock = ( - setBlocks: React.Dispatch>, - 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]); -}; diff --git a/app/src/SimulationDashboard/functions/block/updateBlock.ts b/app/src/SimulationDashboard/functions/block/updateBlock.ts deleted file mode 100644 index f2c61a4..0000000 --- a/app/src/SimulationDashboard/functions/block/updateBlock.ts +++ /dev/null @@ -1,48 +0,0 @@ -import type { Block } from "../../../types/exportedTypes"; - -export const updateBlockStyle = ( - blockId: string, - newStyle: React.CSSProperties, - setBlocks: React.Dispatch>, - 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>, - blocks: Block[] -): void => { - setBlocks(blocks.map((b) => (b.id === blockId ? { ...b, size } : b))); -}; - -export const updateBlockPosition = ( - blockId: string, - position: Position, - setBlocks: React.Dispatch>, - 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>, - blocks: Block[] -): void => { - setBlocks(blocks.map((b) => (b.id === blockId ? { ...b, positionType } : b))); -}; - -export const updateBlockZIndex = ( - blockId: string, - zIndex: number, - setBlocks: React.Dispatch>, - blocks: Block[] -): void => { - setBlocks(blocks.map((b) => (b.id === blockId ? { ...b, zIndex } : b))); -}; diff --git a/app/src/SimulationDashboard/functions/element/addElement.ts b/app/src/SimulationDashboard/functions/element/addElement.ts deleted file mode 100644 index 64de930..0000000 --- a/app/src/SimulationDashboard/functions/element/addElement.ts +++ /dev/null @@ -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>, - 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); -}; diff --git a/app/src/SimulationDashboard/functions/element/swapElements.ts b/app/src/SimulationDashboard/functions/element/swapElements.ts deleted file mode 100644 index c63df57..0000000 --- a/app/src/SimulationDashboard/functions/element/swapElements.ts +++ /dev/null @@ -1,34 +0,0 @@ -import type { Block } from "../../../types/exportedTypes"; - -export const swapElements = ( - blockId: string, - elementId1: string, - elementId2: string, - setBlocks: React.Dispatch>, - 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); -}; diff --git a/app/src/SimulationDashboard/functions/element/updateElement.ts b/app/src/SimulationDashboard/functions/element/updateElement.ts deleted file mode 100644 index 7aba699..0000000 --- a/app/src/SimulationDashboard/functions/element/updateElement.ts +++ /dev/null @@ -1,121 +0,0 @@ -import type { Block, ExtendedCSSProperties } from "../../../types/exportedTypes"; - -export const updateElementStyle = (blockId: string, elementId: string, newStyle: ExtendedCSSProperties, setBlocks: React.Dispatch>, 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>, 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>, 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>, - 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>, 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, setBlocks: React.Dispatch>, 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>, 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>, blocks: Block[]): void => { - setBlocks( - blocks.map((b) => - b.id === blockId - ? { - ...b, - elements: b.elements.map((el) => (el.id === elementId ? { ...el, graphTitle: title } : el)), - } - : b - ) - ); -}; diff --git a/app/src/SimulationDashboard/functions/eventHandlers/index.ts b/app/src/SimulationDashboard/functions/eventHandlers/index.ts index 1a947f1..f8451b5 100644 --- a/app/src/SimulationDashboard/functions/eventHandlers/index.ts +++ b/app/src/SimulationDashboard/functions/eventHandlers/index.ts @@ -97,19 +97,11 @@ export const handleSwapTarget = ( blockId: string, elementId1: string, elementId2: string, - setBlocks: React.Dispatch>, - blocks: Block[], - setShowSwapUI: (show: boolean) => void, - setSwapSource: (source: string | null) => void ) => void, - setBlocks: React.Dispatch>, - 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); } }; diff --git a/app/src/components/ui/compareVersion/ComparisonResult.tsx b/app/src/components/ui/compareVersion/ComparisonResult.tsx index b3f063f..464c576 100644 --- a/app/src/components/ui/compareVersion/ComparisonResult.tsx +++ b/app/src/components/ui/compareVersion/ComparisonResult.tsx @@ -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, }, ], diff --git a/app/src/modules/scene/sceneContext.tsx b/app/src/modules/scene/sceneContext.tsx index 2245ab2..2967ee9 100644 --- a/app/src/modules/scene/sceneContext.tsx +++ b/app/src/modules/scene/sceneContext.tsx @@ -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, diff --git a/app/src/store/simulation/useSimulationDashBoardStore.ts b/app/src/store/simulation/useSimulationDashBoardStore.ts index 9b99ac7..8aad902 100644 --- a/app/src/store/simulation/useSimulationDashBoardStore.ts +++ b/app/src/store/simulation/useSimulationDashBoardStore.ts @@ -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) => { diff --git a/app/src/styles/components/simulation/_simulation.scss b/app/src/styles/components/simulation/_simulation.scss index de057dc..08daf8f 100644 --- a/app/src/styles/components/simulation/_simulation.scss +++ b/app/src/styles/components/simulation/_simulation.scss @@ -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; diff --git a/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss b/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss index bb0e996..c43b3e7 100644 --- a/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss +++ b/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss @@ -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 { diff --git a/app/src/styles/layout/_resourceManagement.scss b/app/src/styles/layout/_resourceManagement.scss index 90bfe10..8c79412 100644 --- a/app/src/styles/layout/_resourceManagement.scss +++ b/app/src/styles/layout/_resourceManagement.scss @@ -120,7 +120,7 @@ height: 100%; width: 100%; border-radius: 50%; - background-color: #fff; + background-color: #ffffff; overflow: hidden; // transform: translate(-26px, -12px); }