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

feat: Add DashboardEditor component for managing simulation dashboards with block and element editing capabilities.

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-12-20 14:26:48 +05:30
parent deb9472073
commit 8a5c78bc6d
1 changed files with 26 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -288,9 +288,28 @@ const DashboardEditor: React.FC = () => {
const newWidth = Math.max(100, resizeStart.width + deltaX); const newWidth = Math.max(100, resizeStart.width + deltaX);
const newHeight = Math.max(50, resizeStart.height + deltaY); const newHeight = Math.max(50, resizeStart.height + deltaY);
// Direct DOM manipulation // Constrain element to block bounds
elementToResize.style.width = `${newWidth}px`; const blockElement = document.querySelector(`[data-block-id="${selectedBlock}"]`) as HTMLElement;
elementToResize.style.height = `${newHeight}px`; if (blockElement) {
const blockRect = blockElement.getBoundingClientRect();
const elementLeft = elementToResize.offsetLeft;
const elementTop = elementToResize.offsetTop;
// Calculate max allowed dimensions (block size - element position - padding)
const maxAllowedWidth = blockRect.width - elementLeft - 20;
const maxAllowedHeight = blockRect.height - elementTop - 20;
const constrainedWidth = Math.min(newWidth, maxAllowedWidth);
const constrainedHeight = Math.min(newHeight, maxAllowedHeight);
// Direct DOM manipulation
elementToResize.style.width = `${constrainedWidth}px`;
elementToResize.style.height = `${constrainedHeight}px`;
} else {
// Fallback if block not found (unlikely)
elementToResize.style.width = `${newWidth}px`;
elementToResize.style.height = `${newHeight}px`;
}
} }
} else if (resizingBlock) { } else if (resizingBlock) {
const blockToResize = document.querySelector(`[data-block-id="${resizingBlock}"]`) as HTMLElement; const blockToResize = document.querySelector(`[data-block-id="${resizingBlock}"]`) as HTMLElement;
@@ -345,12 +364,14 @@ const DashboardEditor: React.FC = () => {
} else if (resizingElement && selectedBlock) { } else if (resizingElement && selectedBlock) {
// Update backend for element resize // Update backend for element resize
const elementToResize = document.querySelector(`[data-element-id="${resizingElement}"]`) as HTMLElement; const elementToResize = document.querySelector(`[data-element-id="${resizingElement}"]`) as HTMLElement;
if (elementToResize) { const blockElement = document.querySelector(`[data-block-id="${selectedBlock}"]`) as HTMLElement;
if (elementToResize && blockElement) {
const computedStyle = window.getComputedStyle(elementToResize); const computedStyle = window.getComputedStyle(elementToResize);
const width = parseFloat(computedStyle.width); const width = parseFloat(computedStyle.width);
const height = parseFloat(computedStyle.height); const height = parseFloat(computedStyle.height);
// Use peek to get updated blocks and send only the affected block to backend // Use peek to get updated blocks
const updatedBlocks = peekUpdateElementSize(selectedBlock, resizingElement, { width, height }); const updatedBlocks = peekUpdateElementSize(selectedBlock, resizingElement, { width, height });
blockToUpdate = getBlockFromPeekedBlocks(updatedBlocks, selectedBlock); blockToUpdate = getBlockFromPeekedBlocks(updatedBlocks, selectedBlock);
} }