fix: Canvas is not expandable or scrollable beyond current view size (#3140)

Author: mtrezza

src/dashboard/Data/CustomDashboard/CanvasElement.react.js

@@ -15,12 +15,26 @@ const CanvasElement = ({
   onSelect,
   onPositionChange,
   onSizeChange,
+  onDrag,
+  onResize,
   children,
 }) => {
+  const handleDrag = (e, d) => {
+    if (onDrag) {
+      onDrag(element.id, d.x, d.y, element.width, element.height);
+    }
+  };
+
   const handleDragStop = (e, d) => {
     onPositionChange(element.id, d.x, d.y);
   };
 
+  const handleResize = (e, direction, ref, delta, position) => {
+    if (onResize) {
+      onResize(element.id, ref.offsetWidth, ref.offsetHeight, position.x, position.y);
+    }
+  };
+
   const handleResizeStop = (e, direction, ref, delta, position) => {
     onSizeChange(
       element.id,
@@ -40,13 +54,14 @@ const CanvasElement = ({
     <Rnd
       position={{ x: element.x, y: element.y }}
       size={{ width: element.width, height: element.height }}
-      dragGrid={[16, 16]}
-      resizeGrid={[16, 16]}
+      dragGrid={[50, 50]}
+      resizeGrid={[50, 50]}
       minWidth={100}
       minHeight={50}
-      bounds="parent"
       dragHandleClassName={styles.dragHandle}
+      onDrag={handleDrag}
       onDragStop={handleDragStop}
+      onResize={handleResize}
       onResizeStop={handleResizeStop}
       className={`${styles.canvasElement} ${isSelected ? styles.selected : ''}`}
       enableResizing={{

src/dashboard/Data/CustomDashboard/CanvasElement.scss

@@ -41,8 +41,4 @@
 
 .resizeHandle {
   background: transparent !important;
-
-  &:hover {
-    background: rgba(22, 156, 238, 0.3) !important;
-  }
 }

src/dashboard/Data/CustomDashboard/CustomDashboard.react.js

@@ -76,13 +76,16 @@ class CustomDashboard extends DashboardView {
       currentCanvasFavorite: false,
       hasUnsavedChanges: false,
       isFullscreen: false,
+      // Track dragging element position for canvas auto-extend
+      dragPosition: null,
     };
     this.autoReloadTimer = null;
     this.autoReloadProgressTimer = null;
     this.autoReloadStartTime = null;
     this.canvasPreferencesManager = null;
     this._isMounted = false;
     this._elementSeq = {};
+    this.canvasRef = React.createRef();
   }
 
   componentDidMount() {
@@ -622,22 +625,103 @@ class CustomDashboard extends DashboardView {
     }
   };
 
+  // Snap value to grid
+  snapToGrid(value, gridSize = 50) {
+    return Math.round(value / gridSize) * gridSize;
+  }
+
   handlePositionChange = (id, x, y) => {
+    // Snap to grid and ensure position is not negative
+    const safeX = Math.max(0, this.snapToGrid(x));
+    const safeY = Math.max(0, this.snapToGrid(y));
     this.setState(state => ({
       elements: state.elements.map(el =>
-        el.id === id ? { ...el, x, y } : el
+        el.id === id ? { ...el, x: safeX, y: safeY } : el
       ),
     }), this.markUnsavedChanges);
   };
 
   handleSizeChange = (id, width, height, x, y) => {
+    // Snap to grid and ensure position is not negative when resizing from left/top edges
+    const safeX = Math.max(0, this.snapToGrid(x));
+    const safeY = Math.max(0, this.snapToGrid(y));
+    const snappedWidth = this.snapToGrid(width);
+    const snappedHeight = this.snapToGrid(height);
     this.setState(state => ({
       elements: state.elements.map(el =>
-        el.id === id ? { ...el, width, height, x, y } : el
+        el.id === id ? { ...el, width: snappedWidth, height: snappedHeight, x: safeX, y: safeY } : el
       ),
     }), this.markUnsavedChanges);
   };
 
+  handleDrag = (id, x, y, width, height) => {
+    // Update drag position to trigger canvas auto-extend during drag
+    this.setState({
+      dragPosition: { id, x, y, width, height },
+    });
+  };
+
+  handleDragEnd = () => {
+    // Clear drag position when drag ends
+    this.setState({ dragPosition: null });
+  };
+
+  handleResize = (id, width, height, x, y) => {
+    // Update drag position to trigger canvas auto-extend during resize
+    this.setState({
+      dragPosition: { id, x, y, width, height },
+    });
+  };
+
+  handleResizeEnd = () => {
+    // Clear drag position when resize ends
+    this.setState({ dragPosition: null });
+  };
+
+  // Calculate the required canvas size based on all elements and current drag position
+  // Returns dimensions only when content extends beyond the default CSS size
+  getCanvasSize() {
+    const { elements, dragPosition } = this.state;
+    const padding = 50; // Extra padding to allow easy placement at edges
+
+    let maxRight = 0;
+    let maxBottom = 0;
+
+    // Calculate bounds from all elements
+    elements.forEach(el => {
+      const right = el.x + el.width;
+      const bottom = el.y + el.height;
+      if (right > maxRight) {
+        maxRight = right;
+      }
+      if (bottom > maxBottom) {
+        maxBottom = bottom;
+      }
+    });
+
+    // Include current drag position if dragging
+    if (dragPosition) {
+      const dragRight = dragPosition.x + dragPosition.width;
+      const dragBottom = dragPosition.y + dragPosition.height;
+      if (dragRight > maxRight) {
+        maxRight = dragRight;
+      }
+      if (dragBottom > maxBottom) {
+        maxBottom = dragBottom;
+      }
+    }
+
+    // Add padding to content bounds
+    const contentWidth = maxRight + padding;
+    const contentHeight = maxBottom + padding;
+
+    // Return the content-based dimensions (CSS handles minimum via width:100% and min-height)
+    return {
+      minWidth: contentWidth,
+      minHeight: contentHeight,
+    };
+  }
+
   handleDeleteElement = (id) => {
     this.setState(state => ({
       elements: state.elements.filter(el => el.id !== id),
@@ -1065,13 +1149,30 @@ class CustomDashboard extends DashboardView {
       wrapperClasses.push(styles.fullscreen);
     }
 
+    // Calculate dynamic canvas size based on element positions
+    const canvasSize = this.getCanvasSize();
+
     return (
       <div className={wrapperClasses.join(' ')}>
         <div
+          ref={this.canvasRef}
           className={styles.canvas}
           onClick={this.handleDeselectElement}
           tabIndex={0}
         >
+          {/* Invisible sizing element that expands the canvas when elements extend beyond */}
+          {(canvasSize.minWidth > 0 || canvasSize.minHeight > 0) && (
+            <div
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: canvasSize.minWidth,
+                height: canvasSize.minHeight,
+                pointerEvents: 'none',
+              }}
+            />
+          )}
           {elements.length === 0 && !isFullscreen ? (
             <EmptyState
               icon="canvas-outline"
@@ -1087,8 +1188,16 @@ class CustomDashboard extends DashboardView {
                 element={element}
                 isSelected={element.id === selectedElement}
                 onSelect={this.handleSelectElement}
-                onPositionChange={this.handlePositionChange}
-                onSizeChange={this.handleSizeChange}
+                onPositionChange={(id, x, y) => {
+                  this.handleDragEnd();
+                  this.handlePositionChange(id, x, y);
+                }}
+                onSizeChange={(id, width, height, x, y) => {
+                  this.handleResizeEnd();
+                  this.handleSizeChange(id, width, height, x, y);
+                }}
+                onDrag={this.handleDrag}
+                onResize={this.handleResize}
               >
                 {this.renderElementContent(element)}
               </CanvasElement>

src/dashboard/Data/CustomDashboard/CustomDashboard.scss

@@ -11,7 +11,7 @@
   position: relative;
   width: 100%;
   min-height: calc(100vh - 96px);
-  background-color: #f4f5f7;
+  background-color: #ffffff;
   overflow: auto;
   outline: none;
 }