Fixes for CageUI layout editor (#836)

* Fix for incorrect grid snapping due to chrome version update 137

* Fix for objects to jump away from the cursor in larger scaled rooms

* Fix for clear layout not removing everything correctly

* Fix for the large amount of empty space in the object toolbar

Author: LeviCameron1

CageUI/src/client/cageui.scss

@@ -578,6 +578,17 @@ margin-bottom: 10px;
 
 #utils {
   grid-area: room-utils;
+  display: grid;
+  grid-template-areas: "room-objects cage-templates .";
+}
+
+.util-svg-template-wrapper {
+  overflow: visible;
+}
+
+
+.layout-tooltip-container > * {
+  padding: 10px;
 }
 
 #layout-grid {

CageUI/src/client/components/layoutEditor/Editor.tsx

@@ -273,7 +273,8 @@ const Editor: FC<EditorProps> = ({roomSize}) => {
 
     // Drag end for dragging from the utilities to the layout
     const dragEnded = useCallback(async (event) => {
-        const draggedShape:  d3.Selection<d3.BaseType, unknown, HTMLElement, any> = d3.select('.dragging');
+        // clear transform attribute to prevent it from applying the transform while in groups. This was a change from Chrome 136 -> 137
+        const draggedShape:  d3.Selection<d3.BaseType, unknown, HTMLElement, any> = d3.select('.dragging').attr('transform', '');
         if(draggedShape.empty()) {
             dragLockRef.current = false;
             return;

CageUI/src/client/components/layoutEditor/RoomItemTemplate.tsx

@@ -17,7 +17,7 @@
  */
 
 import * as React from 'react';
-import { FC } from 'react';
+import { FC, useEffect, useRef, useState } from 'react';
 import { ActionURL } from '@labkey/api';
 import { RoomItemStringType } from '../../types/typings';
 import { ReactSVG } from 'react-svg';
@@ -28,16 +28,49 @@ interface RoomItemTemplateProps {
 }
 export const RoomItemTemplate: FC<RoomItemTemplateProps> = (props) => {
     const {fileName, className} = props;
+    const imgRef = useRef(null);
+    const [width, setWidth] = useState<string>("100%");
+    const [height, setHeight] = useState<string>("100%");
+
+    // Effect reloads the svg to change the height and width of the wrapper for the requested svg after it is injected.
+    // This ensures that it doesn't have a lot of empty space in between the svgs
+    useEffect(() => {
+        if (!imgRef.current) return;
+        // Wait briefly for the nested SVG to render (adjust delay if needed)
+        const timer = setTimeout(() => {
+            const nestedSvg = imgRef.current?.reactWrapper.children[0].children[0];
+            if (!nestedSvg) return;
+
+            // Method 1: Use explicit width/height (if nested SVG has them)
+            const tempWidth = nestedSvg.getAttribute("width");
+            const tempHeight = nestedSvg.getAttribute("height");
+
+            if (tempWidth && tempHeight) {
+                setWidth(tempWidth);
+                setHeight(tempHeight);
+            }
+            // Method 2: Fallback to rendered dimensions
+            else {
+                const rect = nestedSvg.getBoundingClientRect();
+                setWidth(rect.width.toString());
+                setHeight(rect.height.toString());
+            }
+        }, 100); // Short delay to ensure rendering
+
+        return () => clearTimeout(timer);
+    }, []); // Empty dependency array = runs once after mount
+
 
     return (
         <div id={`${fileName}-template`}>
             <ReactSVG
                 src={`${ActionURL.getContextPath()}/cageui/static/${fileName}.svg`}
                 id={`${fileName}_template_wrapper`}
                 wrapper={'svg'}
-                className={className}
-                width={'250'}
-                height={'250'}
+                ref={imgRef}
+                height={height}
+                width={width}
+                className={className + " util-svg-template-wrapper"}
             />
         </div>
     );

CageUI/src/client/context/LayoutEditorContextManager.tsx

@@ -1113,6 +1113,8 @@ export const LayoutEditorContextProvider: FC<LayoutContextProps> = ({children, p
                 objects: []
             }
         });
+        setUnitLocs(createEmptyUnitLoc());
+        setNextAvailGroup('rack-group-1');
     }
 
     const saveRoom = async (): Promise<LayoutSaveResult> => {

CageUI/src/client/utils/LayoutEditorHelpers.ts

@@ -150,8 +150,8 @@ export const updateGrid = (transform, width, height, gridSize) => {
     const yMax = Math.ceil((height - transform.y) / transform.k / gridSize) * gridSize;
 
     // Draw the grid within the current visible area
-    for (let x = xMin; x <= xMax; x += gridSize) {
-        for (let y = yMin; y <= yMax; y += gridSize) {
+    for (let x = xMin; x < xMax; x += gridSize) {
+        for (let y = yMin; y < yMax; y += gridSize) {
             g.append("rect")
                 .attr("x", x)
                 .attr("y", y)
@@ -734,8 +734,9 @@ export function createDragInLayout() {
             const element = d3.select(this);
             const transform = d3.zoomTransform(layoutSvg.node());
             const scale = transform.k;
+            const [newX, newY] = d3.pointer(event.sourceEvent, this.parentNode);
 
-            element.attr('transform', `translate(${event.x},${event.y}) scale(${scale})`);
+            element.attr('transform', `translate(${newX},${newY}) scale(${scale})`);
         }
     )
 }