From 6f15b2feccb12ce8b9907654db0dffaef9ce8843 Mon Sep 17 00:00:00 2001 From: Jerald-Golden-B Date: Sat, 20 Dec 2025 16:39:37 +0530 Subject: [PATCH] feat: Add core components and styling for the new simulation dashboard editor. --- .../SimulationDashboard/DashboardEditor.tsx | 26 +++++++++++++++++-- .../components/element/ElementComponent.tsx | 2 +- .../_simulationDashBoard.scss | 14 ++++++---- 3 files changed, 34 insertions(+), 8 deletions(-) diff --git a/app/src/components/SimulationDashboard/DashboardEditor.tsx b/app/src/components/SimulationDashboard/DashboardEditor.tsx index ba4047d..7a2dcfc 100644 --- a/app/src/components/SimulationDashboard/DashboardEditor.tsx +++ b/app/src/components/SimulationDashboard/DashboardEditor.tsx @@ -59,7 +59,6 @@ const DashboardEditor: React.FC = () => { peekUpdateCommonValue, peekUpdateDataValue, peekUpdateDataSource, - } = simulationDashBoardStore(); const [editMode, setEditMode] = useState(false); @@ -209,6 +208,9 @@ const DashboardEditor: React.FC = () => { const elementToDrag = document.querySelector(`[data-element-id="${draggingElement}"]`) as HTMLElement; if (blockElement && elementToDrag) { + // Disable transitions during drag + elementToDrag.classList.add("no-transition"); + const blockRect = blockElement.getBoundingClientRect(); const elementRect = elementToDrag.getBoundingClientRect(); const newX = e.clientX - blockRect.left - elementDragOffset.x; @@ -233,6 +235,9 @@ const DashboardEditor: React.FC = () => { const blockToDrag = document.querySelector(`[data-block-id="${draggingBlock}"]`) as HTMLElement; if (editorElement && blockToDrag) { + // Disable transitions during drag + blockToDrag.classList.add("no-transition"); + const editorRect = editorElement.getBoundingClientRect(); const newX = e.clientX - editorRect.left - blockDragOffset.x; const newY = e.clientY - editorRect.top - blockDragOffset.y; @@ -248,6 +253,9 @@ const DashboardEditor: React.FC = () => { if (resizingElement && selectedBlock) { const elementToResize = document.querySelector(`[data-element-id="${resizingElement}"]`) as HTMLElement; if (elementToResize) { + // Disable transitions during resize + elementToResize.classList.add("no-transition"); + const deltaX = e.clientX - resizeStart.x; const deltaY = e.clientY - resizeStart.y; @@ -280,6 +288,9 @@ const DashboardEditor: React.FC = () => { } else if (resizingBlock) { const blockToResize = document.querySelector(`[data-block-id="${resizingBlock}"]`) as HTMLElement; if (blockToResize) { + // Disable transitions during resize + blockToResize.classList.add("no-transition"); + const deltaX = e.clientX - resizeStart.x; const deltaY = e.clientY - resizeStart.y; @@ -328,6 +339,9 @@ const DashboardEditor: React.FC = () => { const elementToDrag = document.querySelector(`[data-element-id="${draggingElement}"]`) as HTMLElement; if (blockElement && elementToDrag) { + // Re-enable transitions + elementToDrag.classList.remove("no-transition"); + const computedStyle = window.getComputedStyle(elementToDrag); const x = parseFloat(computedStyle.left); const y = parseFloat(computedStyle.top); @@ -341,6 +355,9 @@ const DashboardEditor: React.FC = () => { const blockToDrag = document.querySelector(`[data-block-id="${draggingBlock}"]`) as HTMLElement; if (blockToDrag) { + // Re-enable transitions + blockToDrag.classList.remove("no-transition"); + const computedStyle = window.getComputedStyle(blockToDrag); const x = parseFloat(computedStyle.left); const y = parseFloat(computedStyle.top); @@ -355,6 +372,9 @@ const DashboardEditor: React.FC = () => { const blockElement = document.querySelector(`[data-block-id="${selectedBlock}"]`) as HTMLElement; if (elementToResize && blockElement) { + // Re-enable transitions + elementToResize.classList.remove("no-transition"); + const computedStyle = window.getComputedStyle(elementToResize); const width = parseFloat(computedStyle.width); const height = parseFloat(computedStyle.height); @@ -367,6 +387,9 @@ const DashboardEditor: React.FC = () => { // Update backend for block resize const blockToResize = document.querySelector(`[data-block-id="${resizingBlock}"]`) as HTMLElement; if (blockToResize) { + // Re-enable transitions + blockToResize.classList.remove("no-transition"); + const computedStyle = window.getComputedStyle(blockToResize); const width = parseFloat(computedStyle.width); const height = parseFloat(computedStyle.height); @@ -638,7 +661,6 @@ const DashboardEditor: React.FC = () => { /> )} - ); }; diff --git a/app/src/components/SimulationDashboard/components/element/ElementComponent.tsx b/app/src/components/SimulationDashboard/components/element/ElementComponent.tsx index ccd0f9e..7ae4e64 100644 --- a/app/src/components/SimulationDashboard/components/element/ElementComponent.tsx +++ b/app/src/components/SimulationDashboard/components/element/ElementComponent.tsx @@ -49,7 +49,7 @@ const ElementComponent: React.FC = ({ element, blockId, e > - {editMode && ( + {editMode && isSelected && ( <>
handleElementResizeStart(element.elementUuid, e)}> diff --git a/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss b/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss index 2012686..7161671 100644 --- a/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss +++ b/app/src/styles/components/simulationDashboard/_simulationDashBoard.scss @@ -12,7 +12,13 @@ left: 0; pointer-events: none; - *> { + // Utility class to disable transitions during drag/resize + .no-transition, + .no-transition * { + transition: none !important; + } + + * > { pointer-events: auto; } @@ -479,9 +485,7 @@ .colorValue { width: 100%; - background: linear-gradient(90.85deg, - rgba(240, 228, 255, 0.3) 3.6%, - rgba(211, 174, 253, 0.3) 96.04%); + background: linear-gradient(90.85deg, rgba(240, 228, 255, 0.3) 3.6%, rgba(211, 174, 253, 0.3) 96.04%); text-align: center; padding: 4px 0; border-radius: 100px; @@ -1116,4 +1120,4 @@ } } } -} \ No newline at end of file +}