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.
This commit is contained in:
@@ -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<Block[]>([]);
|
||||
console.log('blocks: ', blocks);
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
const [selectedBlock, setSelectedBlock] = useState<string | null>(null);
|
||||
const [selectedElement, setSelectedElement] = useState<string | null>(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 = () => {
|
||||
<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, setBlocks, blocks, setShowElementDropdown)}
|
||||
dropdownRef={dropdownRef}
|
||||
/>
|
||||
|
||||
{showDataModelPanel && editMode && (
|
||||
<DataModelPanel dataModel={dataModel} dataModelManager={dataModelManager} />
|
||||
)}
|
||||
{showDataModelPanel && editMode && <DataModelPanel dataModel={dataModel} dataModelManager={dataModelManager} />}
|
||||
|
||||
{selectedBlock && editMode && !selectedElement && currentBlock && (
|
||||
<BlockEditor
|
||||
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, 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 && (
|
||||
<SwapModal setShowSwapUI={setShowSwapUI} setSwapSource={setSwapSource} />
|
||||
)}
|
||||
{showSwapUI && <SwapModal setShowSwapUI={setShowSwapUI} setSwapSource={setSwapSource} />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user