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

updated simulation dashboard

Browse Source
This commit is contained in:
Poovizhi99
2025-11-28 17:25:15 +05:30
parent b6eb2a9598
commit 1e5cbf4aa3
6 changed files with 338 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
app/package.json
View File

@@ -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

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

@@ -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<string | null>(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 (
<div ref={editorRef} className="dashboard-editor">
{activeModule === "visualization" && (
<ControlPanel editMode={editMode} setEditMode={setEditMode} addBlock={() => addBlock()} showDataModelPanel={showDataModelPanel} setShowDataModelPanel={setShowDataModelPanel} />
<ControlPanel
editMode={editMode}
setEditMode={setEditMode}
addBlock={() => 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 = () => {
)}
</div>
{showDataModelPanel && editMode && <DataModelPanel dataModel={dataModel} dataModelManager={dataModelManager} />}
{showDataModelPanel && editMode && (
<DataModelPanel dataModel={dataModel} dataModelManager={dataModelManager} />
)}
{showSwapUI && <SwapModal setShowSwapUI={setShowSwapUI} setSwapSource={setSwapSource} />}
{showSwapUI && (
<SwapModal setShowSwapUI={setShowSwapUI} setSwapSource={setSwapSource} />
)}
</div>
);
};

45
app/src/components/SimulationDashboard/components/block/BlockComponent.tsx
View File

@@ -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<BlockComponentProps> = ({
handleBlockDragStart,
}) => {
const { simulationDashBoardStore } = useSceneContext();
const { addElement } = simulationDashBoardStore()
const { addElement } = simulationDashBoardStore();
const dropdownRef = useRef<HTMLDivElement>(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<BlockComponentProps> = ({
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<BlockComponentProps> = ({
<button
onClick={(e) => {
e.stopPropagation();
setShowElementDropdown(showElementDropdown === block.blockUuid ? null : block.blockUuid);
setShowElementDropdown(
showElementDropdown === block.blockUuid ? null : block.blockUuid
);
}}
className="add-element-button"
>
@@ -97,7 +107,9 @@ const BlockComponent: React.FC<BlockComponentProps> = ({
<ElementDropdown
showElementDropdown={showElementDropdown}
addElement={(blockId, type, graphType) => addElement(blockId, type as UIType, graphType as GraphTypes)}
addElement={(blockId, type, graphType) =>
addElement(blockId, type as UIType, graphType as GraphTypes)
}
dropdownRef={dropdownRef}
/>
</div>
@@ -122,10 +134,14 @@ const BlockComponent: React.FC<BlockComponentProps> = ({
))}
{/* Block resize handle */}
{editMode && isSelected &&
<div className="resize-handle" onMouseDown={(e) => handleBlockResizeStart(block.blockUuid, e)}>
{editMode && isSelected && (
<div
className="resize-handle"
onMouseDown={(e) => handleBlockResizeStart(block.blockUuid, e)}
>
<ResizeIcon />
</div>}
</div>
)}
{/* Drag handle indicator for absolute/fixed blocks */}
{isDraggable && editMode && (
@@ -152,9 +168,6 @@ const BlockComponent: React.FC<BlockComponentProps> = ({
⤣
</div>
)}
</div>
);
};

62
app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
View File

@@ -14,9 +14,13 @@ interface BlockEditorProps {
currentBlock: Block;
selectedBlock: string;
updateBlockStyle: (blockId: string, style: React.CSSProperties) => void;
removeBlock: (block: Block | Block[]) => void;
updateBlockSize: (blockId: string, size: { width: number; height: number }) => void;
updateBlockPosition: (blockId: string, position: { x: number; y: number }) => void;
updateBlockPositionType: (blockId: string, positionType: "relative" | "absolute" | "fixed") => void;
updateBlockPositionType: (
blockId: string,
positionType: "relative" | "absolute" | "fixed"
) => void;
updateBlockZIndex: (blockId: string, zIndex: number) => void;
}
@@ -29,12 +33,13 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
updateBlockPosition,
updateBlockPositionType,
updateBlockZIndex,
removeBlock,
}) => {
return (
<div ref={blockEditorRef} className="panel block-editor-panel">
<div className="header">
<h4>Block Style</h4>
<div className="delete icon">
<div className="delete icon" onClick={() => removeBlock([currentBlock])}>
<DeleteIcon />
</div>
</div>
@@ -42,7 +47,12 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
<label className="form-label">Position Type: </label>
<select
value={currentBlock.positionType || "relative"}
onChange={(e) => updateBlockPositionType(selectedBlock, e.target.value as "relative" | "absolute" | "fixed")}
onChange={(e) =>
updateBlockPositionType(
selectedBlock,
e.target.value as "relative" | "absolute" | "fixed"
)
}
className="form-select"
>
<option value="relative">Relative</option>
@@ -101,7 +111,14 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
<input
type="color"
value={rgbaToHex(getCurrentBlockStyleValue(currentBlock, "backgroundColor"))}
onChange={(e) => handleBackgroundColorChange(currentBlock, selectedBlock, updateBlockStyle, e.target.value)}
onChange={(e) =>
handleBackgroundColorChange(
currentBlock,
selectedBlock,
updateBlockStyle,
e.target.value
)
}
className="color-input"
/>
</div>
@@ -139,10 +156,21 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
<InputRange
label="Background Opacity"
disabled={false}
value={Math.round(getAlphaFromRgba(getCurrentBlockStyleValue(currentBlock, "backgroundColor")) * 100)}
value={Math.round(
getAlphaFromRgba(
getCurrentBlockStyleValue(currentBlock, "backgroundColor")
) * 100
)}
min={0}
max={100}
onChange={(value: number) => handleBackgroundAlphaChange(currentBlock, selectedBlock, updateBlockStyle, Number(value))}
onChange={(value: number) =>
handleBackgroundAlphaChange(
currentBlock,
selectedBlock,
updateBlockStyle,
Number(value)
)
}
// onPointerUp={updatedDist}
key={"6"}
/>
@@ -180,10 +208,16 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
<InputRange
label="Blur Amount"
disabled={false}
value={parseInt(getCurrentBlockStyleValue(currentBlock, "backdropFilter")?.match(/\d+/)?.[0] || "10")}
value={parseInt(
getCurrentBlockStyleValue(currentBlock, "backdropFilter")?.match(
/\d+/
)?.[0] || "10"
)}
min={0}
max={50}
onChange={(value: number) => handleBlurAmountChange(selectedBlock, updateBlockStyle, Number(value))}
onChange={(value: number) =>
handleBlurAmountChange(selectedBlock, updateBlockStyle, Number(value))
}
// onPointerUp={updatedDist}
key={"6"}
/>
@@ -223,7 +257,13 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
<div className="form-group">
<label className="form-label">Z-Index: </label>
<input type="number" placeholder="Z-Index" value={currentBlock.zIndex || 1} onChange={(e) => updateBlockZIndex(selectedBlock, Number(e.target.value))} className="form-input" />
<input
type="number"
placeholder="Z-Index"
value={currentBlock.zIndex || 1}
onChange={(e) => updateBlockZIndex(selectedBlock, Number(e.target.value))}
className="form-input"
/>
</div>
<div className="form-group">
@@ -232,7 +272,9 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
type="number"
placeholder="Padding"
value={parseInt(getCurrentBlockStyleValue(currentBlock, "padding")) || 10}
onChange={(e) => updateBlockStyle(selectedBlock, { padding: Number(e.target.value) })}
onChange={(e) =>
updateBlockStyle(selectedBlock, { padding: Number(e.target.value) })
}
className="form-input"
/>
</div>

40
app/src/services/visulization/dashBoard/deleteDashBoardBlocks.ts Normal file
View File

@@ -0,0 +1,40 @@
import { Block } from "../../../types/exportedTypes";
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
export const deleteDashBoardBlocksApi = async ({
projectId,
versionId,
blocks,
}: {
projectId: string;
versionId: string;
blocks: Block[] | Block;
}) => {
console.log("blocks, projectId, versionId: ", blocks, projectId, versionId);
try {
const response = await fetch(`${url_Backend_dwinzo}/api/V1/simulation/blocks`, {
method: "PATCH",
headers: {
Authorization: "Bearer <access_token>",
"Content-Type": "application/json",
token: localStorage.getItem("token") || "",
refresh_token: localStorage.getItem("refreshToken") || "",
},
body: JSON.stringify({ blocks, projectId, versionId }),
});
const newAccessToken = response.headers.get("x-access-token");
if (newAccessToken) {
localStorage.setItem("token", newAccessToken);
}
if (!response.ok) {
echo.error("Failed to delete block");
}
const result = await response.json();
console.log('result: ', result);
return result;
} catch {
echo.error("Failed to delete block");
}
};

15
app/src/services/visulization/dashBoard/upsertDashBoardBlocks.ts
View File

@@ -2,7 +2,16 @@ import { Block } from "../../../types/exportedTypes";
let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
export const upsetDashBoardBlocksApi = async ({ projectId, versionId, blocks }: { projectId: string; versionId: string; blocks: Block[] }) => {
export const upsetDashBoardBlocksApi = async ({
projectId,
versionId,
blocks,
}: {
projectId: string;
versionId: string;
blocks: Block[];
}) => {
console.log("blocks: ", blocks);
try {
const response = await fetch(`${url_Backend_dwinzo}/api/V1/simulation/blocks/upsert`, {
method: "POST",
@@ -22,8 +31,8 @@ export const upsetDashBoardBlocksApi = async ({ projectId, versionId, blocks }:
if (!response.ok) {
echo.error("Failed to upsert dashBoardBlocks");
}
return await response.json();
const data = await response.clone().json();
return data;
} catch {
echo.error("Failed to upsert dashBoardBlocks");
}