canvas-datagrid 0.26.0 → 0.27.1

package/dist/types.d.ts

@@ -20,7 +20,7 @@
  * @property sorters - Object that contains a list of sorting functions for sorting columns.   See {@tutorial sorters}.
  * @property filters - Object that contains a list of filters for filtering data.  The properties in this object match the `schema[].type` property.  For example, if the schema for a given column was of the type `date` the grid would look for a filter called `filters.date` if a filter cannot be found for a given data type a warning will be logged and the string/RegExp filter will be used.   See {@link canvasDatagrid.filters}.
  * @property hasActiveFilters - When true, grid data is being filtered.
- * @property data - This is how data is set in the grid.  Data must be an array of objects that conform to a schema.  Data values can be any primitive type.  However if a cell value is another data array, an inner grid will be rendered into the cell.  This "cell grid" is different than a "tree grid" (the sort you drill in with a row header arrow) and uses the `cellGridAttributes` attribute for properties and styling. See {@link canvasDatagrid.data}.
+ * @property data - This is how data is set in the grid.  Data must be an array of objects that conform to a schema.  Data values can be any primitive type.  A column whose schema `type` is `canvas-datagrid` renders an inner grid into each of its cells, with the cell's value, itself an array of rows, as that grid's data.  An array value on its own does not create an inner grid, the column type has to be set in the schema, otherwise the array is formatted as a string.  This "cell grid" is different than a "tree grid" (the sort you drill in with a row header arrow) and uses the `cellGridAttributes` attribute for properties and styling. See {@link tutorial--Create-a-cell-grid}.
  * @property schema - Schema is optional.  Schema is an array of {canvasDatagrid.header} objects.  If no schema is provided one will be generated from the data, in that case all data will be assumed to be string data. See {@link canvasDatagrid.schema}.
  * @property scrollHeight - The total number of pixels that can be scrolled down.
  * @property scrollWidth - The total number of pixels that can be scrolled to the left.
@@ -52,7 +52,7 @@
  * @param [args.name] - Optional value that will allow the saving of column height, row width, etc. to the browser's local store. This name should be unique to this grid.
  * @param [args.tree = false] - When true, an arrow will be drawn on each row that when clicked raises the See {@link canvasDatagrid#event:expandtree} event for that row and creates an inner grid.  See {@link tutorial--Allow-users-to-open-trees}.
  * @param [args.treeHorizontalScroll = false] - Reserved. Intended to make expanded child grids scroll horizontally with the parent columns; the option is accepted but not implemented yet (see issue #314), child grids always stay stationary.
- * @param [args.cellGridAttributes] - Attributes used for cell grids. These child grids are different than the tree grids. See the {@link canvasDatagrid.data} property for more information about cell grids.
+ * @param [args.cellGridAttributes] - Attributes used for cell grids, the inner grids drawn in the cells of a column whose schema `type` is `canvas-datagrid`. These child grids are different than the tree grids. See the {@link canvasDatagrid.data} property for more information about cell grids and {@link tutorial--Create-a-cell-grid}.
  * @param [args.treeGridAttributes] - Attributes used for tree grids. These child grids are different than the cell grids. See the {@link canvasDatagrid.data} property for more information about tree grids.
  * @param [args.showNewRow = true] - When true, a row will appear at the bottom of the data set. schema[].defaultValue will define a default value for each cell. defaultValue can be a string or a function. When a function is used, the arguments header and index will be passed to the function. The value returned by the function will be the value in the new cell.  See {@link canvasDatagrid.header.defaultValue}
  * @param [args.saveAppearance = true] - When true, and the attribute name is set, column and row sizes will be saved to the browser's localStore.
@@ -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}.
@@ -812,7 +812,7 @@ declare class canvasDatagrid {
     */
     hasActiveFilters: boolean;
     /**
-     * This is how data is set in the grid.  Data must be an array of objects that conform to a schema.  Data values can be any primitive type.  However if a cell value is another data array, an inner grid will be rendered into the cell.  This "cell grid" is different than a "tree grid" (the sort you drill in with a row header arrow) and uses the `cellGridAttributes` attribute for properties and styling. See {@link canvasDatagrid.data}.
+     * This is how data is set in the grid.  Data must be an array of objects that conform to a schema.  Data values can be any primitive type.  A column whose schema `type` is `canvas-datagrid` renders an inner grid into each of its cells, with the cell's value, itself an array of rows, as that grid's data.  An array value on its own does not create an inner grid, the column type has to be set in the schema, otherwise the array is formatted as a string.  This "cell grid" is different than a "tree grid" (the sort you drill in with a row header arrow) and uses the `cellGridAttributes` attribute for properties and styling. See {@link tutorial--Create-a-cell-grid}.
     */
     data: canvasDatagrid.data;
     /**
@@ -950,7 +950,7 @@ declare namespace canvasDatagrid {
     /**
      * A header that describes the data in a column.  The term header and column are used interchangeably in this documentation.  The {@link canvasDatagrid.schema} is an array of {@link canvasDatagrid.header}.
      * @property name - The name of the header.  This must match the property name of an object in the {@link canvasDatagrid.data} array.  This is the only required property of a {@link canvasDatagrid.header}.  This value will appear at the top of the column unless {@link canvasDatagrid.header.title} is defined.
-     * @property type - The data type of this header.  This value should match properties in {@link canvasDatagrid.formatters}, {@link canvasDatagrid.filters}, {@link canvasDatagrid.sorters} to take full advantage of formatting, sorting and filtering when not defining these properties within this header.
+     * @property type - The data type of this header.  This value should match properties in {@link canvasDatagrid.formatters}, {@link canvasDatagrid.filters}, {@link canvasDatagrid.sorters} to take full advantage of formatting, sorting and filtering when not defining these properties within this header.  The type `canvas-datagrid` is special: each cell in the column renders an inner grid, a "cell grid", with the cell's value (an array of rows) as its data.  See {@link tutorial--Create-a-cell-grid}.
      * @property title - The value that is actually displayed to the user at the top of the column.  If no value is present, {@link canvasDatagrid.header.name} will be used instead.
      * @property width - The mutable width of this column in pixels.  The user can override this value if {@link canvasDatagrid.attributes.allowColumnResizing} is set to `true`.
      * @property hidden - When true, the column will not be included in the visible schema.  This means selection, copy, and drawing functions will not display this column or values from this column.
@@ -965,7 +965,7 @@ declare namespace canvasDatagrid {
         */
         name: string;
         /**
-         * The data type of this header.  This value should match properties in {@link canvasDatagrid.formatters}, {@link canvasDatagrid.filters}, {@link canvasDatagrid.sorters} to take full advantage of formatting, sorting and filtering when not defining these properties within this header.
+         * The data type of this header.  This value should match properties in {@link canvasDatagrid.formatters}, {@link canvasDatagrid.filters}, {@link canvasDatagrid.sorters} to take full advantage of formatting, sorting and filtering when not defining these properties within this header.  The type `canvas-datagrid` is special: each cell in the column renders an inner grid, a "cell grid", with the cell's value (an array of rows) as its data.  See {@link tutorial--Create-a-cell-grid}.
         */
         type: string;
         /**
@@ -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

@@ -15,7 +15,7 @@
  * @param {string} [args.name] Optional value that will allow the saving of column height, row width, etc. to the browser's local store. This name should be unique to this grid.
  * @param {boolean} [args.tree=false] - When true, an arrow will be drawn on each row that when clicked raises the See {@link canvasDatagrid#event:expandtree} event for that row and creates an inner grid.  See {@link tutorial--Allow-users-to-open-trees}.
  * @param {boolean} [args.treeHorizontalScroll=false] - Reserved. Intended to make expanded child grids scroll horizontally with the parent columns; the option is accepted but not implemented yet (see issue #314), child grids always stay stationary.
- * @param {object} [args.cellGridAttributes] - Attributes used for cell grids. These child grids are different than the tree grids. See the {@link canvasDatagrid.data} property for more information about cell grids.
+ * @param {object} [args.cellGridAttributes] - Attributes used for cell grids, the inner grids drawn in the cells of a column whose schema `type` is `canvas-datagrid`. These child grids are different than the tree grids. See the {@link canvasDatagrid.data} property for more information about cell grids and {@link tutorial--Create-a-cell-grid}.
  * @param {object} [args.treeGridAttributes] - Attributes used for tree grids. These child grids are different than the cell grids. See the {@link canvasDatagrid.data} property for more information about tree grids.
  * @param {boolean} [args.showNewRow=true] - When true, a row will appear at the bottom of the data set. schema[].defaultValue will define a default value for each cell. defaultValue can be a string or a function. When a function is used, the arguments header and index will be passed to the function. The value returned by the function will be the value in the new cell.  See {@link canvasDatagrid.header.defaultValue}
  * @param {boolean} [args.saveAppearance=true] - When true, and the attribute name is set, column and row sizes will be saved to the browser's localStore.
@@ -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}.
@@ -139,7 +139,7 @@
  * @property {canvasDatagrid.sorter} sorters - Object that contains a list of sorting functions for sorting columns.   See {@tutorial sorters}.
  * @property {canvasDatagrid.filter} filters - Object that contains a list of filters for filtering data.  The properties in this object match the `schema[].type` property.  For example, if the schema for a given column was of the type `date` the grid would look for a filter called `filters.date` if a filter cannot be found for a given data type a warning will be logged and the string/RegExp filter will be used.   See {@link canvasDatagrid.filters}.
  * @property {boolean} hasActiveFilters - When true, grid data is being filtered.
- * @property {canvasDatagrid.data} data - This is how data is set in the grid.  Data must be an array of objects that conform to a schema.  Data values can be any primitive type.  However if a cell value is another data array, an inner grid will be rendered into the cell.  This "cell grid" is different than a "tree grid" (the sort you drill in with a row header arrow) and uses the `cellGridAttributes` attribute for properties and styling. See {@link canvasDatagrid.data}.
+ * @property {canvasDatagrid.data} data - This is how data is set in the grid.  Data must be an array of objects that conform to a schema.  Data values can be any primitive type.  A column whose schema `type` is `canvas-datagrid` renders an inner grid into each of its cells, with the cell's value, itself an array of rows, as that grid's data.  An array value on its own does not create an inner grid, the column type has to be set in the schema, otherwise the array is formatted as a string.  This "cell grid" is different than a "tree grid" (the sort you drill in with a row header arrow) and uses the `cellGridAttributes` attribute for properties and styling. See {@link tutorial--Create-a-cell-grid}.
  * @property {canvasDatagrid.schema} schema - Schema is optional.  Schema is an array of {canvasDatagrid.header} objects.  If no schema is provided one will be generated from the data, in that case all data will be assumed to be string data. See {@link canvasDatagrid.schema}.
  * @property {number} scrollHeight - The total number of pixels that can be scrolled down.
  * @property {number} scrollWidth - The total number of pixels that can be scrolled to the left.
@@ -207,7 +207,7 @@
  * @class
  * @name canvasDatagrid.header
  * @property {string} name - The name of the header.  This must match the property name of an object in the {@link canvasDatagrid.data} array.  This is the only required property of a {@link canvasDatagrid.header}.  This value will appear at the top of the column unless {@link canvasDatagrid.header.title} is defined.
- * @property {string} type - The data type of this header.  This value should match properties in {@link canvasDatagrid.formatters}, {@link canvasDatagrid.filters}, {@link canvasDatagrid.sorters} to take full advantage of formatting, sorting and filtering when not defining these properties within this header.
+ * @property {string} type - The data type of this header.  This value should match properties in {@link canvasDatagrid.formatters}, {@link canvasDatagrid.filters}, {@link canvasDatagrid.sorters} to take full advantage of formatting, sorting and filtering when not defining these properties within this header.  The type `canvas-datagrid` is special: each cell in the column renders an inner grid, a "cell grid", with the cell's value (an array of rows) as its data.  See {@link tutorial--Create-a-cell-grid}.
  * @property {string} title - The value that is actually displayed to the user at the top of the column.  If no value is present, {@link canvasDatagrid.header.name} will be used instead.
  * @property {number} width - The mutable width of this column in pixels.  The user can override this value if {@link canvasDatagrid.attributes.allowColumnResizing} is set to `true`.
  * @property {boolean} hidden - When true, the column will not be included in the visible schema.  This means selection, copy, and drawing functions will not display this column or values from this column.
@@ -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'],
  */
@@ -724,7 +724,7 @@
  */
 /**
  * Fires just after a cell grid calls its draw method.  Allows you to alter the cell data grid.
- * Only fires once per child grid.
+ * Fires every time the parent grid draws the cell, so once per cell grid per draw.
  * @event
  * @name canvasDatagrid#rendercellgrid
  * @param {object} e Event object

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,43 +1969,78 @@ 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;
+    }
+    //BUG Issue 42: https://github.com/TonyGermaneri/canvas-datagrid/issues/42
+    //https://stackoverflow.com/questions/20110224/what-is-the-height-of-a-line-in-a-wheel-event-deltamode-dom-delta-line
+    if (deltaMode === 1) {
+      // line mode = 17 pixels per line
+      deltaY = deltaY * 17;
+    }
+    // A child grid receives the wheel through its parent's `wheel` grid
+    // event (`ev`), not from the DOM. It leaves two marks on that event for
+    // its ancestors: `hovered` says the pointer is over this grid or one of
+    // its descendants, so the ancestor is not the hovered grid itself;
+    // `claim` says this grid consumed the wheel, so no ancestor scrolls and
+    // neither does the page. A hovered grid with nothing left to scroll in
+    // the wheel's direction only marks itself hovered, so the wheel moves on
+    // to the parent grid, and from the top-level grid to the page, the way
+    // nested scrolling elements chain in HTML.
+    function hovered() {
+      if (ev !== e) {
+        ev.hoveredChildGrid = true;
+      }
+    }
+    function claim() {
+      e.preventDefault();
+      if (ev !== e) {
+        ev.claimedByChildGrid = true;
+        ev.preventDefault();
+      }
+    }
+    function canScroll() {
+      var box = self.scrollBox;
+      return (
+        (box.scrollTop < box.scrollHeight && deltaY > 0) ||
+        (box.scrollLeft < box.scrollWidth && deltaX > 0) ||
+        (box.scrollTop > 0 && deltaY < 0) ||
+        (box.scrollLeft > 0 && deltaX < 0)
+      );
+    }
     if (wheeling) {
-      ev.preventDefault(e);
+      // still applying the previous wheel, this one belongs here too
+      claim();
       return;
     }
-    if (self.dispatchEvent('wheel', { NativeEvent: e })) {
+    childEvent = { NativeEvent: e };
+    if (self.dispatchEvent('wheel', childEvent)) {
+      if (childEvent.claimedByChildGrid) {
+        claim();
+      }
       return;
     }
     self.touchHaltAnimation = true;
+    if (!self.hasFocus && !childEvent.hoveredChildGrid) {
+      return;
+    }
+    hovered();
+    if (!canScroll()) {
+      return;
+    }
+    claim();
     l = self.scrollBox.scrollLeft;
     t = self.scrollBox.scrollTop;
-    if (self.hasFocus) {
-      //BUG Issue 42: https://github.com/TonyGermaneri/canvas-datagrid/issues/42
-      //https://stackoverflow.com/questions/20110224/what-is-the-height-of-a-line-in-a-wheel-event-deltamode-dom-delta-line
-      if (deltaMode === 1) {
-        // line mode = 17 pixels per line
-        deltaY = deltaY * 17;
-      }
-      if (
-        (self.scrollBox.scrollTop < self.scrollBox.scrollHeight &&
-          deltaY > 0) ||
-        (self.scrollBox.scrollLeft < self.scrollBox.scrollWidth &&
-          deltaX > 0) ||
-        (self.scrollBox.scrollTop > 0 && deltaY < 0) ||
-        (self.scrollBox.scrollLeft > 0 && deltaX < 0)
-      ) {
-        ev.preventDefault(e);
-      }
-      wheeling = setTimeout(function () {
-        wheeling = undefined;
-        self.scrollBox.scrollTo(deltaX + l, deltaY + t);
-      }, 1);
-    }
+    wheeling = setTimeout(function () {
+      wheeling = undefined;
+      self.scrollBox.scrollTo(deltaX + l, deltaY + t);
+    }, 1);
   };
   self.pasteData = function (
     pasteValue,

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.1",
   "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",