canvas-datagrid 0.26.0 → 0.27.0

package/dist/types.d.ts

@@ -149,7 +149,7 @@
  * @param [args.touchZoomMin = 0.5] - The minimum zoom scale.
  * @param [args.touchZoomMax = 1.75] - The maximum zoom scale.
  * @param [args.maxPixelRatio = 1.5] - The maximum pixel ratio for high DPI displays.  High DPI displays can cause sluggish performance, this caps resolution the grid is rendered at.  Standard resolution (e.g.: 1920x1080) have a pixel ratio of 1:1 while higher resolution displays can be higher (e.g.: Retina display 2:1).  Higher numbers are sharper (higher resolution) up to the max of your display (usually 2), lower numbers are lower resolution, down to 1.  It might be fun to set a value lower than 1, I've never done it.
- * @param [args.maxCanvasSize = 16384] - Largest width or height, in CSS pixels, an auto-sized grid (`style.width`/`style.height` set to `auto`) may grow to. Browsers cannot paint larger canvases. Past this size the grid stops growing and shows a scroll bar for the rest of the data.
+ * @param [args.maxCanvasSize = 16384] - Largest width or height, in CSS pixels, an auto-sized grid (`style.width`/`style.height` left at `auto`) may grow to. Browsers cannot paint larger canvases. Past this size the grid stops growing and shows a scroll bar for the rest of the data.
  * @param [args.fillCellCallback] - The callback function that is called when a cell is filled.
  * @param [args.style = {}] - Sets selected values in style.
  * @param [args.filters = {}] - Sets selected values in filters.  See {@link canvasDatagrid.filters}.
@@ -1343,7 +1343,7 @@ declare namespace canvasDatagrid {
      * @property [columnHeaderOrderByArrowWidth = 13] - Style of columnHeaderOrderByArrowWidth.
      * @property [rowHeaderCellWidth = 57] - Style of rowHeaderCellWidth.
      * @property [minColumnWidth = 45] - Style of minColumnWidth.
-     * @property [height = auto] - Style of height.
+     * @property [height = auto] - Height of the grid as a CSS value (`300px`, `100%`). With the default `auto` the grid fills its parent element when the parent has a height of its own; otherwise it grows to fit its rows, but never past the viewport height, and scrolls for the rest.
      * @property [minHeight = 24] - Style of minHeight.
      * @property [minRowHeight = 24] - Style of minRowHeight.
      * @property [name = default] - Style of name.
@@ -1413,7 +1413,7 @@ declare namespace canvasDatagrid {
      * @property [frozenMarkerWidth = 1] - Style of frozenMarkerWidth.
      * @property [overflowY = auto] - When set to hidden, vertical scroll bar will be hidden.  When set to auto vertical scroll bar will appear when data overflows the height.  When set to scroll the vertical scrollbar will always be visible.
      * @property [overflowX = auto] - When set to hidden, horizontal scroll bar will be hidden.  When set to auto horizontal scroll bar will appear when data overflows the width.  When set to scroll the horizontal scrollbar will always be visible.
-     * @property [width = auto] - Style of width.
+     * @property [width = auto] - Width of the grid as a CSS value (`800px`, `100%`). With the default `auto` the grid fills its parent element when the parent has a width of its own; otherwise it grows to fit its columns, but never past the viewport width, and scrolls for the rest.
      *
      *  ['', 'normal'],
      */
@@ -1979,7 +1979,7 @@ declare namespace canvasDatagrid {
         */
         minColumnWidth?: number;
         /**
-         * Style of height.
+         * Height of the grid as a CSS value (`300px`, `100%`). With the default `auto` the grid fills its parent element when the parent has a height of its own; otherwise it grows to fit its rows, but never past the viewport height, and scrolls for the rest.
         */
         height?: number | string;
         /**
@@ -2259,7 +2259,7 @@ declare namespace canvasDatagrid {
         */
         overflowX?: string;
         /**
-         * Style of width.
+         * Width of the grid as a CSS value (`800px`, `100%`). With the default `auto` the grid fills its parent element when the parent has a width of its own; otherwise it grows to fit its columns, but never past the viewport width, and scrolls for the rest.
         
          ['', 'normal'],
         */

package/lib/docs.js

@@ -112,7 +112,7 @@
  * @param {number} [args.touchZoomMin=0.5] - The minimum zoom scale.
  * @param {number} [args.touchZoomMax=1.75] - The maximum zoom scale.
  * @param {number} [args.maxPixelRatio=1.5] - The maximum pixel ratio for high DPI displays.  High DPI displays can cause sluggish performance, this caps resolution the grid is rendered at.  Standard resolution (e.g.: 1920x1080) have a pixel ratio of 1:1 while higher resolution displays can be higher (e.g.: Retina display 2:1).  Higher numbers are sharper (higher resolution) up to the max of your display (usually 2), lower numbers are lower resolution, down to 1.  It might be fun to set a value lower than 1, I've never done it.
- * @param {number} [args.maxCanvasSize=16384] - Largest width or height, in CSS pixels, an auto-sized grid (`style.width`/`style.height` set to `auto`) may grow to. Browsers cannot paint larger canvases. Past this size the grid stops growing and shows a scroll bar for the rest of the data.
+ * @param {number} [args.maxCanvasSize=16384] - Largest width or height, in CSS pixels, an auto-sized grid (`style.width`/`style.height` left at `auto`) may grow to. Browsers cannot paint larger canvases. Past this size the grid stops growing and shows a scroll bar for the rest of the data.
  * @param {object} [args.fillCellCallback] - The callback function that is called when a cell is filled.
  * @param {canvasDatagrid.style} [args.style={}] - Sets selected values in style.
  * @param {canvasDatagrid.filter} [args.filters={}] - Sets selected values in filters.  See {@link canvasDatagrid.filters}.
@@ -434,7 +434,7 @@
  * @property {number} [columnHeaderOrderByArrowWidth=13] - Style of columnHeaderOrderByArrowWidth.
  * @property {number} [rowHeaderCellWidth=57] - Style of rowHeaderCellWidth.
  * @property {number} [minColumnWidth=45] - Style of minColumnWidth.
- * @property {(number|string)} [height=auto] - Style of height.
+ * @property {(number|string)} [height=auto] - Height of the grid as a CSS value (`300px`, `100%`). With the default `auto` the grid fills its parent element when the parent has a height of its own; otherwise it grows to fit its rows, but never past the viewport height, and scrolls for the rest.
  * @property {number} [minHeight=24] - Style of minHeight.
  * @property {number} [minRowHeight=24] - Style of minRowHeight.
  * @property {string} [name=default] - Style of name.
@@ -504,7 +504,7 @@
  * @property {number} [frozenMarkerWidth=1] - Style of frozenMarkerWidth.
  * @property {string} [overflowY=auto] - When set to hidden, vertical scroll bar will be hidden.  When set to auto vertical scroll bar will appear when data overflows the height.  When set to scroll the vertical scrollbar will always be visible.
  * @property {string} [overflowX=auto] - When set to hidden, horizontal scroll bar will be hidden.  When set to auto horizontal scroll bar will appear when data overflows the width.  When set to scroll the horizontal scrollbar will always be visible.
- * @property {(number|string)} [width=auto] - Style of width.
+ * @property {(number|string)} [width=auto] - Width of the grid as a CSS value (`800px`, `100%`). With the default `auto` the grid fills its parent element when the parent has a width of its own; otherwise it grows to fit its columns, but never past the viewport width, and scrolls for the rest.
 
  ['', 'normal'],
  */

package/lib/dom.js

@@ -196,9 +196,91 @@ export default function (self) {
     };
   };
   /**
-   * Watches the host element and its parent for size changes so a grid sized
-   * with auto/percentage dimensions follows layout changes (flex, splitters,
-   * tab switches) without an explicit `resize()` call (#289, #239).
+   * The element the grid sits in: the parent of the `canvas-datagrid` host
+   * element, or the host of the shadow tree the grid was placed in.
+   * @returns {HTMLElement|undefined}
+   */
+  self.getContainerElement = function () {
+    var host = self.intf && self.intf.nodeType === 1 ? self.intf : self.canvas,
+      container = host && host.parentNode;
+    if (container && container.nodeType === 11 && container.host) {
+      container = container.host;
+    }
+    return container && container.nodeType === 1 ? container : undefined;
+  };
+  /**
+   * Measures the room the container offers the grid in each dimension.
+   * A dimension is `undefined` when the container has no size of its own
+   * there, that is when it grows with the grid (an auto height block, a
+   * shrink-to-fit width); the caller then falls back to the content size.
+   *
+   * The probe makes the canvas one pixel larger than the container's client
+   * size and checks whether the container followed. When it did not, the
+   * overflow that the probe produced tells how much of the container is
+   * taken by padding and siblings. Everything is restored synchronously, so
+   * nothing is painted and no ResizeObserver notification results.
+   * @returns {{width: (number|undefined), height: (number|undefined)}}
+   */
+  self.measureContainerSpace = function () {
+    var space = {},
+      canvas = self.canvas,
+      container = self.getContainerElement(),
+      cache = self.containerSpaceCache,
+      canvasStyle,
+      saved;
+    if (!container || !canvas) {
+      return space;
+    }
+    if (
+      cache &&
+      cache.container === container &&
+      cache.clientWidth === container.clientWidth &&
+      cache.clientHeight === container.clientHeight
+    ) {
+      return cache.space;
+    }
+    canvasStyle = canvas.style;
+    saved = { width: canvasStyle.width, height: canvasStyle.height };
+    ['height', 'width'].forEach(function (dim) {
+      var client = dim === 'height' ? 'clientHeight' : 'clientWidth',
+        scroll = dim === 'height' ? 'scrollHeight' : 'scrollWidth',
+        before = container[client],
+        probe = before + 1,
+        after;
+      canvasStyle[dim] = probe + 'px';
+      after = container[client];
+      if (before === 0 || after > before) {
+        // nothing to measure (hidden or inline) or the container grew with
+        // the grid: it has no size of its own in this dimension
+        space[dim] = undefined;
+      } else {
+        // the container kept its size and the grid overflows it by at least
+        // one pixel; the overflow beyond that pixel is padding and siblings
+        space[dim] = Math.max(
+          0,
+          Math.min(after, 2 * after + 1 - container[scroll]),
+        );
+      }
+      canvasStyle[dim] = saved[dim];
+    });
+    // resize() may run several times in one frame (drags, style changes);
+    // the probe forces layout, so reuse the result while the container
+    // keeps its size
+    self.containerSpaceCache = {
+      container: container,
+      clientWidth: container.clientWidth,
+      clientHeight: container.clientHeight,
+      space: space,
+    };
+    requestAnimationFrame(function () {
+      self.containerSpaceCache = undefined;
+    });
+    return space;
+  };
+  /**
+   * Watches the host element and its container for size changes so a grid
+   * sized with auto/percentage dimensions follows layout changes (flex,
+   * splitters, tab switches) without an explicit `resize()` call (#289, #239).
    * Falls back to the `window` resize listener when ResizeObserver is missing.
    */
   self.initResizeObserver = function () {
@@ -240,7 +322,7 @@ export default function (self) {
     self.resizeObserver.disconnect();
     self.observedSizes = new Map();
     var host = self.intf && self.intf.nodeType === 1 ? self.intf : self.canvas;
-    [host, host && host.parentNode].forEach(function (target) {
+    [host, self.getContainerElement()].forEach(function (target) {
       if (target && target.nodeType === 1) {
         self.resizeObserver.observe(target);
       }

package/lib/draw.js

@@ -1913,15 +1913,31 @@ export default function (self) {
             columnGroupsAreaHeight || 0;
           treeGrid.parentNode.rowGroupsAreaWidth += rowGroupsAreaWidth || 0;
         }
+        // Hit-test entry for the child grid's area. Like every other visible
+        // cell it is in this grid's own coordinates (the child's offsetTop and
+        // offsetLeft are canvas coordinates) and carries the real tree size:
+        // `treeGrid.height`/`width` are undefined on child grids, which made
+        // this entry unmatchable, so a pointer over a tree grid still counted
+        // as hovering the parent and the parent scrolled along with the tree.
         self.visibleCells.unshift({
           rowIndex: rowOrderIndex,
           columnIndex: 0,
-          y: treeGrid.parentNode.offsetTop,
-          x: treeGrid.parentNode.offsetLeft,
-          height: treeGrid.height,
-          width: treeGrid.width,
+          y: y + rowSansTreeHeight,
+          x: rowHeaderCellWidth - 1,
+          height: treeHeight,
+          width: treeGrid.parentNode.offsetWidth,
           style: 'tree-grid',
           type: treeGrid.parentNode.nodeType,
+          data: rowData,
+          header: {},
+          isGrid: false,
+          isNormal: false,
+          isHeader: false,
+          isCorner: false,
+          isRowHeader: false,
+          isColumnHeader: false,
+          selected: false,
+          hovered: false,
         });
         treeGrid.draw();
       } else if (treeGrid) {

package/lib/events/index.js

@@ -169,18 +169,24 @@ export default function (self) {
       rowHeaderCellWidth = self.getRowHeaderCellWidth(),
       topGroupAreaHeight = self.getColumnGroupAreaHeight(),
       leftGroupAreaWidth = self.getRowGroupAreaWidth(),
-      ch = self.style.cellHeight;
-    // sets actual DOM canvas element
+      ch = self.style.cellHeight,
+      containerSpace = self.isChildGrid ? {} : self.measureContainerSpace();
+    function isAutoSize(value) {
+      return value === undefined || value === 'auto' || value === '';
+    }
     function checkScrollBoxVisibility() {
-      var capped = self.autoSizeCapped || {};
+      // an auto-sized grid shows a scroll bar only when it could not grow to
+      // its content (container, viewport or canvas limit); a child grid is
+      // always bounded by the tree row or cell that holds it
+      var constrained = self.autoSizeConstrained || {};
       self.scrollBox.horizontalBarVisible =
-        ((self.style.width !== 'auto' || capped.width) &&
+        ((!isAutoSize(self.style.width) || constrained.width) &&
           dataWidth > self.scrollBox.width &&
           self.style.overflowX !== 'hidden') ||
         self.style.overflowX === 'scroll';
       self.scrollBox.horizontalBoxVisible = dataWidth > self.scrollBox.width;
       self.scrollBox.verticalBarVisible =
-        ((self.style.height !== 'auto' || capped.height) &&
+        ((!isAutoSize(self.style.height) || constrained.height) &&
           dataHeight > self.scrollBox.height &&
           self.style.overflowY !== 'hidden') ||
         self.style.overflowY === 'scroll';
@@ -192,8 +198,13 @@ export default function (self) {
       self.scrollBox.height =
         self.height - columnHeaderCellHeight - topGroupAreaHeight;
     }
+    // sizes the DOM canvas element and reads back the size the grid got
     function setCanvasSize() {
       if (self.isChildGrid) {
+        // a child grid fills the tree row or cell that holds it
+        self.autoSizeConstrained = { width: true, height: true };
+        self.width = self.parentNode.offsetWidth;
+        self.height = self.parentNode.offsetHeight;
         return;
       }
       dims = {
@@ -206,34 +217,39 @@ export default function (self) {
           1,
         width: dataWidth + rowHeaderCellWidth + cellBorder + leftGroupAreaWidth,
       };
-      // Browsers refuse to paint canvases beyond roughly 16k px per side, so
-      // an auto-sized grid with enough rows went blank past that point
-      // (#254). Cap the element and let it scroll for the remainder.
       var maxCanvasSize = self.attributes.maxCanvasSize;
-      self.autoSizeCapped = { width: false, height: false };
-      ['width', 'height'].forEach(function (dim) {
-        if (dims[dim] > maxCanvasSize) {
-          dims[dim] = maxCanvasSize;
-          self.autoSizeCapped[dim] = true;
-        }
-      });
+      self.autoSizeConstrained = { width: false, height: false };
       ['width', 'height'].forEach(function (dim) {
+        var styleIsAuto = isAutoSize(self.style[dim]),
+          inlineIsAuto = isAutoSize(self.appliedInlineStyles[dim]),
+          size;
         //TODO: support inherit
-        if (
-          ['auto', undefined].indexOf(self.style[dim]) !== -1 &&
-          ['auto', undefined].indexOf(self.appliedInlineStyles[dim]) !== -1
-        ) {
-          self.parentNodeStyle[dim] = dims[dim] + 'px';
-        } else if (
-          ['auto', undefined].indexOf(self.style[dim]) == -1 &&
-          ['auto', undefined].indexOf(self.appliedInlineStyles[dim]) == -1
-        ) {
-          self.parentNodeStyle[dim] = self.style[dim];
-          if (self.isComponent) {
-            self.canvas.style[dim] = self.style[dim];
+        if (styleIsAuto && inlineIsAuto) {
+          // No explicit size: fill the container when it has a size of its
+          // own in this dimension, otherwise fit the content but never grow
+          // past the viewport. Browsers also refuse to paint canvases beyond
+          // roughly 16k px per side (#254), so cap the element there too and
+          // let the grid scroll for the remainder.
+          size = dims[dim];
+          if (containerSpace[dim] !== undefined) {
+            size = containerSpace[dim];
+          } else {
+            size = Math.min(
+              size,
+              dim === 'height' ? window.innerHeight : window.innerWidth,
+            );
           }
+          size = Math.max(0, Math.min(size, maxCanvasSize));
+          self.autoSizeConstrained[dim] = size < dims[dim];
+          self.parentNodeStyle[dim] = size + 'px';
+        } else if (!styleIsAuto && !inlineIsAuto) {
+          self.parentNodeStyle[dim] = self.style[dim];
         }
       });
+      self.width = self.canvas.offsetWidth;
+      self.height = self.canvas.offsetHeight;
+      self.canvasOffsetLeft = self.args.canvasOffsetLeft || 0;
+      self.canvasOffsetTop = self.args.canvasOffsetTop || 0;
     }
     self.autoLastColumnWidth = undefined;
     dataWidth = self.refreshScrollCacheX();
@@ -255,18 +271,6 @@ export default function (self) {
       dataHeight += self.style.cellHeight;
     }
     setCanvasSize();
-    if (self.isChildGrid) {
-      self.width = self.parentNode.offsetWidth;
-      self.height = self.parentNode.offsetHeight;
-    } else if (
-      self.height !== self.canvas.offsetHeight ||
-      self.width !== self.canvas.offsetWidth
-    ) {
-      self.height = self.canvas.offsetHeight;
-      self.width = self.canvas.offsetWidth;
-      self.canvasOffsetLeft = self.args.canvasOffsetLeft || 0;
-      self.canvasOffsetTop = self.args.canvasOffsetTop || 0;
-    }
     /// calculate scroll bar dimensions
     // non-controversial
     self.scrollBox.top =
@@ -279,18 +283,12 @@ export default function (self) {
     // if the scroll box is visible, make room for it by expanding the size of the element
     // if the other dimension is set to auto
     if (self.scrollBox.horizontalBarVisible) {
-      if (self.style.height === 'auto' && !self.isChildGrid) {
-        self.height += sbw;
-      }
       dataHeight += sbw;
       setCanvasSize();
       setScrollBoxSize();
       checkScrollBoxVisibility();
     }
     if (self.scrollBox.verticalBarVisible) {
-      if (self.style.width === 'auto' && !self.isChildGrid) {
-        self.width += sbw;
-      }
       dataWidth += sbw;
       setCanvasSize();
       setScrollBoxSize();
@@ -1971,16 +1969,41 @@ export default function (self) {
     var l,
       t,
       ev = e,
+      childEvent,
       deltaX = e.deltaX === undefined ? e.NativeEvent.deltaX : e.deltaX,
       deltaY = e.deltaY === undefined ? e.NativeEvent.deltaY : e.deltaY,
       deltaMode =
         e.deltaMode === undefined ? e.NativeEvent.deltaMode : e.deltaMode;
     if (e.NativeEvent) e = e.NativeEvent;
+    if (self.disposed) {
+      return;
+    }
+    // A child grid receives the wheel through its parent's `wheel` grid
+    // event (`ev`), not from the DOM. Cancelling and marking that event tells
+    // every ancestor that the grid under the pointer owns this wheel, so only
+    // the hovered grid scrolls, even when it has nothing left to scroll.
+    function claim() {
+      if (ev !== e) {
+        ev.claimedByChildGrid = true;
+        ev.preventDefault();
+      }
+    }
     if (wheeling) {
-      ev.preventDefault(e);
+      if (ev === e) {
+        e.preventDefault();
+      } else {
+        claim();
+      }
       return;
     }
-    if (self.dispatchEvent('wheel', { NativeEvent: e })) {
+    if (self.hasFocus) {
+      claim();
+    }
+    childEvent = { NativeEvent: e };
+    if (self.dispatchEvent('wheel', childEvent)) {
+      if (childEvent.claimedByChildGrid) {
+        claim();
+      }
       return;
     }
     self.touchHaltAnimation = true;

package/lib/intf.js

@@ -749,7 +749,12 @@ export default function (self, ctor) {
     self.eventParent.removeEventListener('dblclick', self.dblclick, false);
     self.eventParent.removeEventListener('click', self.click, false);
     self.eventParent.removeEventListener('mousemove', self.mousemove);
-    self.eventParent.removeEventListener('wheel', self.scrollWheel, false);
+    // child grids listen for the wheel on the parent grid's event, not the DOM
+    self[self.isChildGrid ? 'parentGrid' : 'eventParent'].removeEventListener(
+      'wheel',
+      self.scrollWheel,
+      false,
+    );
     self.canvas.removeEventListener(
       'contextmenu',
       self.contextmenuEvent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-datagrid",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "Canvas based data grid web component. Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element.",
   "main": "./dist/canvas-datagrid.js",
   "module": "./dist/canvas-datagrid.module.js",