feat: Add core components and styling for the new simulation dashboard editor.

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 = () => {
                     />
                 )}
             </div>
-
         </div>
     );
 };

app/src/components/SimulationDashboard/components/element/ElementComponent.tsx

@@ -49,7 +49,7 @@ const ElementComponent: React.FC<ElementComponentProps> = ({ element, blockId, e
         >
             <ElementContent element={element} resolvedData={resolveElementValue(element)} />
 
-            {editMode && (
+            {editMode && isSelected && (
                 <>
                     <div className="resize-handle" onMouseDown={(e) => handleElementResizeStart(element.elementUuid, e)}>
                         <ResizeIcon />

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,
+                        background: linear-gradient(90.85deg, rgba(240, 228, 255, 0.3) 3.6%, rgba(211, 174, 253, 0.3) 96.04%);
-                                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 @@
             }
         }
     }
-}
+}