diff --git a/app/package.json b/app/package.json index 128e910..59bc510 100644 --- a/app/package.json +++ b/app/package.json @@ -1,95 +1,3 @@ -<<<<<<< HEAD -{ - "name": "aalai-beta", - "version": "0.1.0", - "private": true, - "dependencies": { - "@dnd-kit/core": "^6.3.1", - "@dnd-kit/sortable": "^10.0.0", - "@fingerprintjs/fingerprintjs": "^4.6.2", - "@fingerprintjs/fingerprintjs-pro-react": "^2.6.3", - "@react-three/csg": "^3.2.0", - "@react-three/drei": "^9.113.0", - "@react-three/fiber": "^8.17.7", - "@react-three/postprocessing": "^2.16.3", - "@recast-navigation/core": "^0.39.0", - "@recast-navigation/three": "^0.39.0", - "@testing-library/jest-dom": "^5.17.0", - "@testing-library/react": "^13.4.0", - "@testing-library/user-event": "^13.5.0", - "@turf/helpers": "^7.2.0", - "@turf/turf": "^7.2.0", - "@types/jest": "^27.5.2", - "@types/react": "^18.3.5", - "@types/react-dom": "^18.3.0", - "@use-gesture/react": "^10.3.1", - "buffer": "^6.0.3", - "chart.js": "^4.4.8", - "chartjs-plugin-annotation": "^3.1.0", - "clsx": "^2.1.1", - "dxf-parser": "^1.1.2", - "glob": "^11.0.0", - "gsap": "^3.12.5", - "html2canvas": "^1.4.1", - "immer": "^9.0.21", - "leva": "^0.10.0", - "mqtt": "^5.10.4", - "postprocessing": "^6.36.4", - "prompt-sync": "^4.2.0", - "r3f-perf": "^7.2.3", - "react": "^18.3.1", - "react-chartjs-2": "^5.3.0", - "react-dom": "^18.3.1", - "react-router-dom": "^7.4.0", - "react-scripts": "5.0.1", - "react-toastify": "^10.0.5", - "recharts": "^3.2.1", - "sass": "^1.78.0", - "socket.io-client": "^4.8.1", - "three": "^0.168.0", - "three-custom-shader-material": "^6.3.7", - "three-viewport-gizmo": "^2.2.0", - "typescript": "^4.9.5", - "web-vitals": "^2.1.4", - "zustand": "^5.0.0-rc.2" - }, - "scripts": { - "prepare": "husky", - "prestart": "tsc scripts/git-prompt.ts && node scripts/git-prompt.js", - "start": "react-scripts start", - "build": "GENERATE_SOURCEMAP=false react-scripts build", - "test": "jest" - }, - "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] - }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - }, - "devDependencies": { - "@types/html2canvas": "^1.0.0", - "@types/node": "^22.9.1", - "@types/three": "^0.169.0", - "axios": "^1.8.4", - "cypress": "^13.14.2", - "dotenv": "^16.4.5", - "husky": "^9.1.6", - "ts-node": "^10.9.2" - } -} -======= { "name": "aalai-beta", "version": "0.1.0", @@ -177,4 +85,3 @@ "ts-node": "^10.9.2" } } ->>>>>>> origin/main diff --git a/app/src/components/SimulationDashboard/DashboardEditor.tsx b/app/src/components/SimulationDashboard/DashboardEditor.tsx index 20fa47d..4bd6713 100644 --- a/app/src/components/SimulationDashboard/DashboardEditor.tsx +++ b/app/src/components/SimulationDashboard/DashboardEditor.tsx @@ -9,7 +9,15 @@ import DataModelPanel from "./components/models/DataModelPanel"; import { useSceneContext } from "../../modules/scene/sceneContext"; import useModuleStore from "../../store/ui/useModuleStore"; import { calculateMinBlockSize } from "./functions/block/calculateMinBlockSize"; -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 BlockEditor from "./components/block/BlockEditor"; import ElementEditor from "./components/element/ElementEditor"; @@ -18,6 +26,7 @@ import { handleBlockDragStart } from "./functions/block/handleBlockDragStart"; import { getDashBoardBlocksApi } from "../../services/visulization/dashBoard/getDashBoardBlocks"; import { upsetDashBoardBlocksApi } from "../../services/visulization/dashBoard/upsertDashBoardBlocks"; +import { deleteDashBoardBlocksApi } from "../../services/visulization/dashBoard/deleteDashBoardBlocks"; const DashboardEditor: React.FC = () => { const { simulationDashBoardStore, versionStore } = useSceneContext(); @@ -44,6 +53,7 @@ const DashboardEditor: React.FC = () => { updateGraphType, swapElements, subscribe, + removeBlock, } = simulationDashBoardStore(); const [selectedBlock, setSelectedBlock] = useState(null); @@ -92,11 +102,13 @@ const DashboardEditor: React.FC = () => { const updateBackend = (blocks: Block[]) => { if (!projectId || !selectedVersion) return; - upsetDashBoardBlocksApi({ projectId, versionId: selectedVersion.versionId, blocks }).then((data) => { - if (data.data?.blocks) { - setBlocks(data.data.blocks); + upsetDashBoardBlocksApi({ projectId, versionId: selectedVersion.versionId, blocks }).then( + (data) => { + if (data.data?.blocks) { + setBlocks(data.data.blocks); + } } - }); + ); }; useEffect(() => { @@ -170,7 +182,12 @@ 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]"); @@ -197,8 +214,12 @@ const DashboardEditor: React.FC = () => { const handleMouseMove = (e: MouseEvent): void => { // Element dragging - direct DOM manipulation if (draggingElement && selectedBlock && currentElement?.positionType === "absolute") { - const blockElement = document.querySelector(`[data-block-id="${selectedBlock}"]`) as HTMLElement; - const elementToDrag = document.querySelector(`[data-element-id="${draggingElement}"]`) as HTMLElement; + const blockElement = document.querySelector( + `[data-block-id="${selectedBlock}"]` + ) as HTMLElement; + const elementToDrag = document.querySelector( + `[data-element-id="${draggingElement}"]` + ) as HTMLElement; if (blockElement && elementToDrag) { const blockRect = blockElement.getBoundingClientRect(); @@ -206,15 +227,27 @@ const DashboardEditor: React.FC = () => { const newY = e.clientY - blockRect.top - elementDragOffset.y; // Direct DOM manipulation - elementToDrag.style.left = `${Math.max(0, Math.min(blockRect.width - 50, newX))}px`; - elementToDrag.style.top = `${Math.max(0, Math.min(blockRect.height - 30, newY))}px`; + elementToDrag.style.left = `${Math.max( + 0, + Math.min(blockRect.width - 50, newX) + )}px`; + elementToDrag.style.top = `${Math.max( + 0, + Math.min(blockRect.height - 30, newY) + )}px`; } } // Block dragging - direct DOM manipulation - if (draggingBlock && currentBlock?.positionType && (currentBlock.positionType === "absolute" || currentBlock.positionType === "fixed")) { + if ( + draggingBlock && + currentBlock?.positionType && + (currentBlock.positionType === "absolute" || currentBlock.positionType === "fixed") + ) { const editorElement = editorRef.current; - const blockToDrag = document.querySelector(`[data-block-id="${draggingBlock}"]`) as HTMLElement; + const blockToDrag = document.querySelector( + `[data-block-id="${draggingBlock}"]` + ) as HTMLElement; if (editorElement && blockToDrag) { const editorRect = editorElement.getBoundingClientRect(); @@ -222,15 +255,23 @@ const DashboardEditor: React.FC = () => { const newY = e.clientY - editorRect.top - blockDragOffset.y; // Direct DOM manipulation - blockToDrag.style.left = `${Math.max(0, Math.min(editorRect.width - (currentBlock.size?.width || 400), newX))}px`; - blockToDrag.style.top = `${Math.max(0, Math.min(editorRect.height - (currentBlock.size?.height || 300), newY))}px`; + blockToDrag.style.left = `${Math.max( + 0, + Math.min(editorRect.width - (currentBlock.size?.width || 400), newX) + )}px`; + blockToDrag.style.top = `${Math.max( + 0, + Math.min(editorRect.height - (currentBlock.size?.height || 300), newY) + )}px`; } } // Resizing - direct DOM manipulation if ((resizingElement || resizingBlock) && resizeStart) { if (resizingElement && selectedBlock) { - const elementToResize = document.querySelector(`[data-element-id="${resizingElement}"]`) as HTMLElement; + const elementToResize = document.querySelector( + `[data-element-id="${resizingElement}"]` + ) as HTMLElement; if (elementToResize) { const deltaX = e.clientX - resizeStart.x; const deltaY = e.clientY - resizeStart.y; @@ -243,13 +284,17 @@ const DashboardEditor: React.FC = () => { elementToResize.style.height = `${newHeight}px`; } } else if (resizingBlock) { - const blockToResize = document.querySelector(`[data-block-id="${resizingBlock}"]`) as HTMLElement; + const blockToResize = document.querySelector( + `[data-block-id="${resizingBlock}"]` + ) as HTMLElement; if (blockToResize) { const deltaX = e.clientX - resizeStart.x; const deltaY = e.clientY - resizeStart.y; const currentBlock = blocks.find((b) => b.blockUuid === resizingBlock); - const minSize = currentBlock ? calculateMinBlockSize(currentBlock) : { width: 100, height: 50 }; + const minSize = currentBlock + ? calculateMinBlockSize(currentBlock) + : { width: 100, height: 50 }; const newWidth = Math.max(minSize.width, resizeStart.width + deltaX); const newHeight = Math.max(minSize.height, resizeStart.height + deltaY); @@ -265,8 +310,12 @@ const DashboardEditor: React.FC = () => { const handleMouseUp = (): void => { // Update state only on mouse up for elements if (draggingElement && selectedBlock && currentElement?.positionType === "absolute") { - const blockElement = document.querySelector(`[data-block-id="${selectedBlock}"]`) as HTMLElement; - const elementToDrag = document.querySelector(`[data-element-id="${draggingElement}"]`) as HTMLElement; + const blockElement = document.querySelector( + `[data-block-id="${selectedBlock}"]` + ) as HTMLElement; + const elementToDrag = document.querySelector( + `[data-element-id="${draggingElement}"]` + ) as HTMLElement; if (blockElement && elementToDrag) { const computedStyle = window.getComputedStyle(elementToDrag); @@ -278,8 +327,14 @@ const DashboardEditor: React.FC = () => { } // Update state only on mouse up for blocks - if (draggingBlock && currentBlock?.positionType && (currentBlock.positionType === "absolute" || currentBlock.positionType === "fixed")) { - const blockToDrag = document.querySelector(`[data-block-id="${draggingBlock}"]`) as HTMLElement; + if ( + draggingBlock && + currentBlock?.positionType && + (currentBlock.positionType === "absolute" || currentBlock.positionType === "fixed") + ) { + const blockToDrag = document.querySelector( + `[data-block-id="${draggingBlock}"]` + ) as HTMLElement; if (blockToDrag) { const computedStyle = window.getComputedStyle(blockToDrag); @@ -292,7 +347,9 @@ const DashboardEditor: React.FC = () => { // Update state only on mouse up for resizing if (resizingElement && selectedBlock) { - const elementToResize = document.querySelector(`[data-element-id="${resizingElement}"]`) as HTMLElement; + const elementToResize = document.querySelector( + `[data-element-id="${resizingElement}"]` + ) as HTMLElement; if (elementToResize) { const computedStyle = window.getComputedStyle(elementToResize); const width = parseFloat(computedStyle.width); @@ -303,7 +360,9 @@ const DashboardEditor: React.FC = () => { } if (resizingBlock) { - const blockToResize = document.querySelector(`[data-block-id="${resizingBlock}"]`) as HTMLElement; + const blockToResize = document.querySelector( + `[data-block-id="${resizingBlock}"]` + ) as HTMLElement; if (blockToResize) { const computedStyle = window.getComputedStyle(blockToResize); const width = parseFloat(computedStyle.width); @@ -330,12 +389,41 @@ 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, + ]); + + const handleDelteBlock = (blocks: Block[] | Block) => { + if (!projectId || !selectedVersion) return; + deleteDashBoardBlocksApi({ blocks, projectId, versionId: selectedVersion.versionId }).then( + (data) => { + if (data.blocks[0].message === "Block deleted successfully") { + removeBlock(data.blocks[0].blockUuid); + } + } + ); + }; return (
{activeModule === "visualization" && ( - addBlock()} showDataModelPanel={showDataModelPanel} setShowDataModelPanel={setShowDataModelPanel} /> + addBlock()} + showDataModelPanel={showDataModelPanel} + setShowDataModelPanel={setShowDataModelPanel} + /> )} {/* BlockGrid */} @@ -349,16 +437,57 @@ 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) + 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) + } + handleBlockDragStart={(blockId, event) => + handleBlockDragStart(blockId, event, setDraggingBlock, setBlockDragOffset) } - 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)} - handleBlockDragStart={(blockId, event) => handleBlockDragStart(blockId, event, setDraggingBlock, setBlockDragOffset)} setShowElementDropdown={setShowElementDropdown} showElementDropdown={showElementDropdown} blockRef={blockRef} @@ -371,9 +500,16 @@ const DashboardEditor: React.FC = () => { selectedBlock={selectedBlock} updateBlockStyle={(blockId, style) => updateBlockStyle(blockId, style)} updateBlockSize={(blockId, size) => updateBlockSize(blockId, size)} - updateBlockPosition={(blockId, position) => updateBlockPosition(blockId, position)} - updateBlockPositionType={(blockId, positionType) => updateBlockPositionType(blockId, positionType)} + updateBlockPosition={(blockId, position) => + updateBlockPosition(blockId, position) + } + updateBlockPositionType={(blockId, positionType) => + updateBlockPositionType(blockId, positionType) + } updateBlockZIndex={(blockId, zIndex) => updateBlockZIndex(blockId, zIndex)} + removeBlock={(block) => { + handleDelteBlock(block); + }} /> )} {selectedElement && editMode && selectedBlock && currentElement && ( @@ -382,15 +518,33 @@ const DashboardEditor: React.FC = () => { currentElement={currentElement} selectedBlock={selectedBlock} selectedElement={selectedElement} - 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)} - updateGraphType={(blockId, elementId, type) => updateGraphType(blockId, elementId, type)} + 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) + } + updateGraphType={(blockId, elementId, type) => + updateGraphType(blockId, elementId, type) + } setSwapSource={setSwapSource} setShowSwapUI={setShowSwapUI} dataModelManager={dataModelManager} @@ -398,9 +552,13 @@ const DashboardEditor: React.FC = () => { )}
- {showDataModelPanel && editMode && } + {showDataModelPanel && editMode && ( + + )} - {showSwapUI && } + {showSwapUI && ( + + )} ); }; diff --git a/app/src/components/SimulationDashboard/components/block/BlockComponent.tsx b/app/src/components/SimulationDashboard/components/block/BlockComponent.tsx index 3fe3303..2a6de79 100644 --- a/app/src/components/SimulationDashboard/components/block/BlockComponent.tsx +++ b/app/src/components/SimulationDashboard/components/block/BlockComponent.tsx @@ -1,4 +1,4 @@ -import { useRef, type RefObject } from "react"; +import { useRef, useState, type RefObject } from "react"; import { Block } from "../../../../types/exportedTypes"; import ElementComponent from "../element/ElementComponent"; import { ResizeIcon } from "../../../icons/ExportToolsIcons"; @@ -47,14 +47,14 @@ const BlockComponent: React.FC = ({ handleBlockDragStart, }) => { const { simulationDashBoardStore } = useSceneContext(); - const { addElement } = simulationDashBoardStore() - + const { addElement } = simulationDashBoardStore(); const dropdownRef = useRef(null); const minSize = calculateMinBlockSize(block); const isSelected = selectedBlock === block.blockUuid; - const isDraggable = editMode && (block.positionType === "absolute" || block.positionType === "fixed"); - + const isDraggable = + editMode && (block.positionType === "absolute" || block.positionType === "fixed"); + const handleMouseDown = (event: React.MouseEvent) => { if (isDraggable) { handleBlockDragStart(block.blockUuid, event); @@ -67,12 +67,20 @@ const BlockComponent: React.FC = ({ key={block.blockUuid} data-block-id={block.blockUuid} ref={isSelected ? blockRef : null} - className={`block ${isSelected ? "selected" : ""} ${editMode ? "edit-mode" : ""} ${isDraggable ? "draggable" : ""}`} + className={`block ${isSelected ? "selected" : ""} ${editMode ? "edit-mode" : ""} ${ + isDraggable ? "draggable" : "" + }`} style={{ ...block.style, position: block.positionType || "relative", - left: block.positionType === "absolute" || block.positionType === "fixed" ? `${block.position?.x || 0}px` : "auto", - top: block.positionType === "absolute" || block.positionType === "fixed" ? `${block.position?.y || 0}px` : "auto", + left: + block.positionType === "absolute" || block.positionType === "fixed" + ? `${block.position?.x || 0}px` + : "auto", + top: + block.positionType === "absolute" || block.positionType === "fixed" + ? `${block.position?.y || 0}px` + : "auto", width: block.size?.width || 400, height: block.size?.height || 300, minWidth: minSize.width, @@ -88,7 +96,9 @@ const BlockComponent: React.FC = ({