fix: Preview did not draw correctly when dragging Grids (#1183)

- When we drag something, there is a frame where the width/height is 0
- We didn't update the metrics within the actual animation frame, so it
was drawing the wrong thing
- Fix so metrics are always updated in the animation frame, and also to
only check the metrics with the previously checked metrics
- Tested with ticking tables stuck to the bottom to ensure they stuck
while ticking
- Fixes #1112

Author: mofojed

packages/golden-layout/src/controls/DragProxy.ts

@@ -96,10 +96,12 @@ export default class DragProxy extends EventEmitter {
 
     this._updateTree();
     this._layoutManager._$calculateItemAreas();
-    this._setDimensions();
 
     $(document.body).append(this.element);
 
+    // Need to set dimensions after adding the element, or `Component.setSize()` will not pass the `.is('visible')` test and won't update
+    this._setDimensions();
+
     // there's no content tab to use yet, use the proxy tab size for placeholder sizing, after it's created
     if (!this._contentItem.tab && this._proxyTab.length) {
       this._layoutManager.tabDropPlaceholder.width(

packages/grid/src/Grid.tsx

@@ -536,31 +536,7 @@ class Grid extends PureComponent<GridProps, GridState> {
 
     this.requestUpdateCanvas();
 
-    if (!this.metrics || !this.prevMetrics) {
-      return;
-    }
-
-    const { rowCount, columnCount, height, width } = this.metrics;
-    const {
-      rowCount: prevRowCount,
-      columnCount: prevColumnCount,
-      height: prevHeight,
-      width: prevWidth,
-    } = this.prevMetrics;
-
-    if (prevRowCount !== rowCount || height !== prevHeight) {
-      const { isStuckToBottom } = this.state;
-      if (isStuckToBottom) {
-        this.scrollToBottom();
-      }
-    }
-
-    if (prevColumnCount !== columnCount || width !== prevWidth) {
-      const { isStuckToRight } = this.state;
-      if (isStuckToRight) {
-        this.scrollToRight();
-      }
-    }
+    this.checkStickyScroll();
 
     if (this.validateSelection()) {
       this.checkSelectionChange(prevState);
@@ -799,17 +775,23 @@ class Grid extends PureComponent<GridProps, GridState> {
     this.animationFrame = requestAnimationFrame(() => {
       this.animationFrame = null;
 
-      if (!this.metrics) throw new Error('Metrics not set');
-
-      this.updateCanvas(this.metrics);
+      this.updateCanvas();
     });
   }
 
-  updateCanvas(metrics = this.updateMetrics()): void {
+  updateCanvas(): void {
     this.updateCanvasScale();
+
+    this.updateMetrics();
+
     this.updateRenderState();
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    this.renderer.configureContext(this.canvasContext!, this.renderState);
+
+    const { canvasContext, metrics, renderState } = this;
+    assertNotNull(canvasContext);
+    assertNotNull(metrics);
+    assertNotNull(renderState);
+
+    this.renderer.configureContext(canvasContext, renderState);
 
     const { onViewChanged } = this.props;
     onViewChanged(metrics);
@@ -850,6 +832,40 @@ class Grid extends PureComponent<GridProps, GridState> {
     }
   }
 
+  /**
+   * Compares the current metrics with the previous metrics to see if we need to scroll when it is stuck to the bottom or the right
+   */
+  checkStickyScroll() {
+    if (!this.metrics) {
+      return;
+    }
+
+    if (this.prevMetrics) {
+      const { rowCount, columnCount, height, width } = this.metrics;
+      const {
+        rowCount: prevRowCount,
+        columnCount: prevColumnCount,
+        height: prevHeight,
+        width: prevWidth,
+      } = this.prevMetrics;
+
+      if (prevRowCount !== rowCount || height !== prevHeight) {
+        const { isStuckToBottom } = this.state;
+        if (isStuckToBottom) {
+          this.scrollToBottom();
+        }
+      }
+
+      if (prevColumnCount !== columnCount || width !== prevWidth) {
+        const { isStuckToRight } = this.state;
+        if (isStuckToRight) {
+          this.scrollToRight();
+        }
+      }
+    }
+    this.prevMetrics = this.metrics;
+  }
+
   updateMetrics(state = this.state): GridMetrics {
     this.prevMetrics = this.metrics;