@vaadin/vaadin-grid 5.9.0 → 5.9.1

package/package.json

@@ -15,7 +15,7 @@
   "repository": "vaadin/vaadin-grid",
   "homepage": "https://vaadin.com/components",
   "name": "@vaadin/vaadin-grid",
-  "version": "5.9.0",
+  "version": "5.9.1",
   "main": "vaadin-grid.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",

package/src/vaadin-grid-column.js

@@ -319,7 +319,15 @@ export const ColumnBaseMixin = superClass => class ColumnBaseMixin extends super
     }
 
     cells.forEach(cell => {
-      const model = this._grid.__getRowModel(cell.parentElement);
+      const parent = cell.parentElement;
+
+      // When a column is made hidden and shown again, in some instances it breaks rendering of rows for grid
+      // this happens when parent element of cell is null, which might not be set correctly during rendering
+      // the newly shown column, this check simply avoid that case
+      if (!parent) {
+        return;
+      }
+      const model = this._grid.__getRowModel(parent);
 
       if (renderer) {
         cell._renderer = renderer;

package/src/vaadin-grid-drag-and-drop-mixin.js

@@ -87,7 +87,7 @@ export const DragAndDropMixin = superClass => class DragAndDropMixin extends sup
 
   static get observers() {
     return [
-      '_dragDropAccessChanged(rowsDraggable, dropMode, dragFilter, dropFilter)'
+      '_dragDropAccessChanged(rowsDraggable, dropMode, dragFilter, dropFilter, loading)'
     ];
   }
 
@@ -297,13 +297,17 @@ export const DragAndDropMixin = superClass => class DragAndDropMixin extends sup
 
   /** @private */
   __getViewportRows() {
-    const headerBottom = this.$.header.getBoundingClientRect().bottom;
-    const footerTop = this.$.footer.getBoundingClientRect().top;
-    return Array.from(this.$.items.children)
-      .filter(row => {
-        const rowRect = row.getBoundingClientRect();
-        return rowRect.bottom > headerBottom && rowRect.top < footerTop;
-      });
+    // Workaround an IE11 bug where the `getBoundingClientRect` for header/footer
+    // might return incorrect values
+    this.$.header.style.outline = '0px solid transparent';
+    const scrollerRect = this.$.scroller.getBoundingClientRect();
+    const headerBottom = Math.max(this.$.header.getBoundingClientRect().bottom, scrollerRect.top);
+    const footerTop = Math.min(this.$.footer.getBoundingClientRect().top, scrollerRect.bottom);
+
+    return Array.from(this.$.items.children).filter((row) => {
+      const rowRect = row.getBoundingClientRect();
+      return rowRect.bottom > headerBottom && rowRect.top < footerTop;
+    });
   }
 
   /** @protected */
@@ -382,8 +386,9 @@ export const DragAndDropMixin = superClass => class DragAndDropMixin extends sup
    * @protected
    */
   _filterDragAndDrop(row, model) {
-    const dragDisabled = !this.rowsDraggable || (this.dragFilter && !this.dragFilter(model));
-    const dropDisabled = !this.dropMode || (this.dropFilter && !this.dropFilter(model));
+    const loading = this.loading || row.hasAttribute('loading');
+    const dragDisabled = !this.rowsDraggable || loading || (this.dragFilter && !this.dragFilter(model));
+    const dropDisabled = !this.dropMode || loading || (this.dropFilter && !this.dropFilter(model));
 
     const draggableElements = window.ShadyDOM
       ? [row]

package/src/vaadin-grid-scroller.js

@@ -79,7 +79,13 @@ class GridScrollerElement extends PolymerIronList {
     this._scrollingToIndex = true;
     index = Math.min(Math.max(index, 0), this._effectiveSize - 1);
     this.$.table.scrollTop = index / this._effectiveSize * (this.$.table.scrollHeight - this.$.table.offsetHeight);
+
+    // We need to run the iron-list scroll handler here in order to recalculate the scaling from effective size to
+    // virtual size after changing the scroll position. However we don't want to trigger updates to the items / rows
+    // in this step, which could result in data provider requests for the previous viewport
+    this._preventItemUpdates = true;
     this._scrollHandler();
+    this._preventItemUpdates = false;
 
     if (this._accessIronListAPI(() => this._maxScrollTop) && this._virtualCount < this._effectiveSize) {
       this._adjustVirtualIndexOffset(1000000);
@@ -256,6 +262,10 @@ class GridScrollerElement extends PolymerIronList {
    * @protected
    */
   _assignModels(itemSet) {
+    // Skip here if internal flag for preventing item updates is set
+    if (this._preventItemUpdates) {
+      return;
+    }
     this._iterateItems((pidx, vidx) => {
       const el = this._physicalItems[pidx];
       this._toggleAttribute('hidden', vidx >= this._effectiveSize, el);

package/src/vaadin-grid.js

@@ -322,7 +322,7 @@ class GridElement extends
   }
 
   static get version() {
-    return '5.9.0';
+    return '5.9.1';
   }
 
   static get observers() {
@@ -461,37 +461,70 @@ class GridElement extends
     }
   }
 
+  /** @private */
+  __getIntrinsicWidth(col) {
+    const initialWidth = col.width;
+    const initialFlexGrow = col.flexGrow;
+
+    col.width = 'auto';
+    col.flexGrow = 0;
+
+    // Note: _allCells only contains cells which are currently rendered in DOM
+    const width = col._allCells
+      .reduce((width, cell) => {
+        // Add 1px buffer to the offset width to avoid too narrow columns (sub-pixel rendering)
+        return Math.max(width, cell.offsetWidth + 1);
+      }, 0);
+
+    col.flexGrow = initialFlexGrow;
+    col.width = initialWidth;
+
+    return width;
+  }
+
+  /** @private */
+  __getDistributedWidth(col, innerColumn) {
+    if (col == null || col === this) {
+      return 0;
+    }
+
+    const columnWidth = Math.max(this.__getIntrinsicWidth(col), this.__getDistributedWidth(col.parentElement, col));
+
+    // we're processing a regular grid-column and not a grid-column-group
+    if (!innerColumn) {
+      return columnWidth;
+    }
+
+    // At the end, the width of each vaadin-grid-column-group is determined by the sum of the width of its children.
+    // Here we determine how much space the vaadin-grid-column-group actually needs to render properly and then we distribute that space
+    // to its children, so when we actually do the summation it will be rendered properly.
+    // Check out vaadin-grid-column-group:_updateFlexAndWidth
+    const columnGroup = col;
+    const columnGroupWidth = columnWidth;
+    const sumOfWidthOfAllChildColumns = columnGroup._visibleChildColumns
+      .map((col) => this.__getIntrinsicWidth(col))
+      .reduce((sum, curr) => sum + curr, 0);
+
+    const extraNecessarySpaceForGridColumnGroup = Math.max(0, columnGroupWidth - sumOfWidthOfAllChildColumns);
+
+    // The distribution of the extra necessary space is done according to the intrinsic width of each child column.
+    // Lets say we need 100 pixels of extra space for the grid-column-group to render properly
+    // it has two grid-column children, |100px|300px| in total 400px
+    // the first column gets 25px of the additional space (100/400)*100 = 25
+    // the second column gets the 75px of the additional space (300/400)*100 = 75
+    const proportionOfExtraSpace = this.__getIntrinsicWidth(innerColumn) / sumOfWidthOfAllChildColumns;
+    const shareOfInnerColumnFromNecessaryExtraSpace = proportionOfExtraSpace * extraNecessarySpaceForGridColumnGroup;
+
+    return this.__getIntrinsicWidth(innerColumn) + shareOfInnerColumnFromNecessaryExtraSpace;
+  }
+
   /**
    * @param {!Array<!GridColumnElement>} cols the columns to auto size based on their content width
    * @private
    */
   _recalculateColumnWidths(cols) {
-    // Note: The `cols.forEach()` loops below could be implemented as a single loop but this has been
-    // split for performance reasons to batch these similar actions [write/read] together to avoid
-    // unnecessary layout trashing.
-
-    // [write] Set automatic width for all cells (breaks column alignment)
-    cols.forEach(col => {
-      col.width = 'auto';
-      col._origFlexGrow = col.flexGrow;
-      col.flexGrow = 0;
-    });
-    // [read] Measure max cell width in each column
-    cols.forEach(col => {
-      col._currentWidth = 0;
-      // Note: _allCells only contains cells which are currently rendered in DOM
-      col._allCells.forEach(c => {
-        // Add 1px buffer to the offset width to avoid too narrow columns (sub-pixel rendering)
-        const cellWidth = c.offsetWidth + 1;
-        col._currentWidth = Math.max(col._currentWidth, cellWidth);
-      });
-    });
-    // [write] Set column widths to fit widest measured content
-    cols.forEach(col => {
-      col.width = `${col._currentWidth}px`;
-      col.flexGrow = col._origFlexGrow;
-      col._currentWidth = undefined;
-      col._origFlexGrow = undefined;
+    cols.forEach((col) => {
+      col.width = `${this.__getDistributedWidth(col)}px`;
     });
   }