canvas-datagrid 0.25.3 → 0.26.0

package/lib/dom.js

@@ -123,14 +123,27 @@ export default function (self) {
         self.input.style.width = self.width - borderWidth - 1 + 'px';
         return;
       }
+      let groupAreaOffsetY = self.getColumnGroupAreaHeight();
+      let groupAreaOffsetX = self.getRowGroupAreaWidth();
+      if (self.parentNode) {
+        const { columnGroupsAreaHeight, rowGroupsAreaWidth } = self.parentNode;
+        if (columnGroupsAreaHeight) groupAreaOffsetY += columnGroupsAreaHeight;
+        if (rowGroupsAreaWidth) groupAreaOffsetX += rowGroupsAreaWidth;
+      }
       self.input.style.left =
-        pos.left + cell.x + self.canvasOffsetLeft - s.left + 'px';
+        pos.left +
+        cell.x +
+        self.canvasOffsetLeft -
+        s.left +
+        groupAreaOffsetX +
+        'px';
       self.input.style.top =
         pos.top +
         cell.y -
         self.style.cellBorderWidth +
         self.canvasOffsetTop -
         s.top +
+        groupAreaOffsetY +
         'px';
       self.input.style.height = cell.height - borderWidth + 'px';
       self.input.style.width = cell.width - self.style.cellPaddingLeft + 'px';
@@ -143,11 +156,16 @@ export default function (self) {
       s = e,
       h,
       w;
+    let calculatedTree = false;
     while (e.offsetParent && e.nodeName !== 'CANVAS-DATAGRID') {
-      x += e.offsetLeft;
-      y += e.offsetTop;
-      h = e.offsetHeight;
-      w = e.offsetWidth;
+      const isTree = e.nodeType === 'canvas-datagrid-tree';
+      if (!isTree || !calculatedTree) {
+        x += e.offsetLeft;
+        y += e.offsetTop;
+        h = e.offsetHeight;
+        w = e.offsetWidth;
+      }
+      if (isTree) calculatedTree = true;
       e = e.offsetParent;
     }
     if (ignoreScrollOffset) {
@@ -166,6 +184,10 @@ export default function (self) {
     if (self.isChildGrid) {
       pos.x -= self.canvasOffsetLeft;
       pos.y -= self.canvasOffsetTop;
+      if (self.parentNode.rowGroupsAreaWidth)
+        pos.x -= self.parentNode.rowGroupsAreaWidth;
+      if (self.parentNode.columnGroupsAreaHeight)
+        pos.y -= self.parentNode.columnGroupsAreaHeight;
     }
     return {
       x: pos.x,
@@ -173,6 +195,62 @@ export default function (self) {
       rect: rect,
     };
   };
+  /**
+   * 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).
+   * Falls back to the `window` resize listener when ResizeObserver is missing.
+   */
+  self.initResizeObserver = function () {
+    if (self.isChildGrid || typeof window.ResizeObserver !== 'function') {
+      return;
+    }
+    self.observedSizes = new Map();
+    self.resizeObserver = new window.ResizeObserver(function (entries) {
+      var changed = false;
+      entries.forEach(function (entry) {
+        var rect = entry.contentRect;
+        var last = self.observedSizes.get(entry.target);
+        if (!last || last.width !== rect.width || last.height !== rect.height) {
+          self.observedSizes.set(entry.target, {
+            width: rect.width,
+            height: rect.height,
+          });
+          changed = true;
+        }
+      });
+      if (!changed || self.disposed || self.resizeObserverFrame) {
+        return;
+      }
+      // coalesce bursts of notifications into one resize per frame
+      self.resizeObserverFrame = requestAnimationFrame(function () {
+        self.resizeObserverFrame = undefined;
+        if (self.disposed) {
+          return;
+        }
+        self.resize(true);
+      });
+    });
+    self.observeResizeTargets();
+  };
+  self.observeResizeTargets = function () {
+    if (!self.resizeObserver) {
+      return;
+    }
+    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) {
+      if (target && target.nodeType === 1) {
+        self.resizeObserver.observe(target);
+      }
+    });
+  };
+  self.unobserveResizeTargets = function () {
+    if (self.resizeObserver) {
+      self.resizeObserver.disconnect();
+    }
+  };
   /**
    * Ends editing, optionally aborting the edit.
    * @memberof canvasDatagrid
@@ -182,7 +260,11 @@ export default function (self) {
    */
   self.endEdit = function (abort) {
     var cell = self.input.editCell,
-      y = cell.rowIndex;
+      y = cell.rowIndex,
+      // Decide up front whether this is the "new row" placeholder. A
+      // beforeendedit handler may add or delete rows (#583), which would
+      // otherwise make the last real row look like the placeholder.
+      isNewRow = y === self.viewData.length;
     function abortEdit() {
       abort = true;
     }
@@ -198,14 +280,18 @@ export default function (self) {
       return false;
     }
     if (self.input.value !== cell.value && !abort) {
-      self.changes[y] = self.changes[y] || {};
-      self.changes[y][cell.header.name] = self.input.value;
+      // key the change log by the bound (data) row index rather than the
+      // view index so sorting/filtering cannot misattribute edits (#418)
+      var changeIndex =
+        cell.boundRowIndex === undefined ? y : cell.boundRowIndex;
+      self.changes[changeIndex] = self.changes[changeIndex] || {};
+      self.changes[changeIndex][cell.header.name] = self.input.value;
       if (!cell.data) {
-        self.data[cell.rowIndex] = {};
-        cell.data = self.data[cell.rowIndex];
+        self.originalData[cell.boundRowIndex] = {};
+        cell.data = self.originalData[cell.boundRowIndex];
       }
       cell.data[cell.header.name] = self.input.value;
-      if (y === self.data.length) {
+      if (isNewRow) {
         if (
           self.dispatchEvent('newrow', {
             value: self.input.value,
@@ -220,6 +306,10 @@ export default function (self) {
         self.addRow(cell.data);
         self.createNewRowData();
       }
+      self.dispatchDataChanged('edit', {
+        cell: cell,
+        value: self.input.value,
+      });
       self.draw(true);
     }
     if (self.input.parentNode) {
@@ -340,6 +430,15 @@ export default function (self) {
     self.input.style.position = 'absolute';
     self.input.editCell = cell;
     self.resizeEditInput();
+    if (enu && typeof self.input.showPicker === 'function') {
+      // open the enum <select> immediately (#230); browsers only allow this
+      // from a user gesture, so treat failure as harmless
+      try {
+        self.input.showPicker();
+      } catch (err) {
+        // no user activation
+      }
+    }
     self.input.style.zIndex = self.style.editCellZIndex;
     self.input.style.fontSize =
       parseInt(self.style.editCellFontSize, 10) * self.scale + 'px';
@@ -348,6 +447,19 @@ export default function (self) {
     var shouldClearCellValue = cellValueIsEmpty || inEnterMode;
 
     self.input.value = shouldClearCellValue ? '' : cell.value;
+    let width = Math.round(
+      self.input.value.length *
+        parseInt(self.style.editCellFontSize, 10) *
+        0.7 *
+        self.scale,
+    );
+    if (width + self.style.cellPaddingLeft < cell.width) {
+      width = cell.width - self.style.cellPaddingLeft;
+    } else if (width > self.width - cell.x - self.style.scrollBarWidth) {
+      width = self.width - cell.x - self.style.scrollBarWidth;
+      self.input.style.height = 'auto';
+    }
+    self.input.style.width = width + 'px';
     self.input.focus();
     self.input.addEventListener('click', self.stopPropagation);
     self.input.addEventListener('dblclick', self.stopPropagation);
@@ -369,7 +481,7 @@ export default function (self) {
         // Move to cell in next or previous row
         var nextRowIndex = e.shiftKey
           ? Math.max(0, ny - 1)
-          : Math.min(ny + 1, self.data.length - 1);
+          : Math.min(ny + 1, self.viewData.length - 1);
 
         if (nextRowIndex !== ny) {
           self.scrollIntoView(nx, nextRowIndex);
@@ -386,7 +498,7 @@ export default function (self) {
             ny = Math.max(0, ny - 1);
             break;
           case 'ArrowDown':
-            ny = Math.min(ny + 1, self.data.length - 1);
+            ny = Math.min(ny + 1, self.viewData.length - 1);
             break;
           case 'ArrowLeft':
             nx = Math.max(nx - 1, 0);
@@ -421,13 +533,27 @@ export default function (self) {
           ny += 1;
         }
         if (ny < 0) {
-          ny = self.data.length - 1;
+          ny = self.viewData.length - 1;
         }
-        if (ny > self.data.length - 1) {
+        if (ny > self.viewData.length - 1) {
           ny = 0;
         }
         self.scrollIntoView(nx, ny);
         self.beginEditAt(nx, ny, e);
+      } else {
+        let width = Math.round(
+          self.input.value.length *
+            parseInt(self.style.editCellFontSize, 10) *
+            0.7 *
+            self.scale,
+        );
+        if (width + self.style.cellPaddingLeft < cell.width) {
+          width = cell.width - self.style.cellPaddingLeft;
+        } else if (width > self.width - cell.x - self.style.scrollBarWidth) {
+          width = self.width - cell.x - self.style.scrollBarWidth;
+          self.input.style.height = 'auto';
+        }
+        self.input.style.width = width + 'px';
       }
     });
 
@@ -435,6 +561,96 @@ export default function (self) {
   };
   self.createInlineStyle = function (el, className) {
     var css = {
+      'canvas-datagrid-button-wrapper': {
+        display: 'inline-block',
+        padding: self.style.buttonPadding,
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: self.style.buttonBorderColor,
+        cursor: 'pointer',
+        background: self.style.buttonBackgroundColor,
+        userSelect: 'none',
+      },
+      'canvas-datagrid-button-wrapper:hover': {
+        borderColor: self.style.buttonBorderColor,
+        background: self.style.buttonHoverBackgroundColor,
+      },
+      'canvas-datagrid-button-wrapper:active': {
+        borderColor: self.style.buttonActiveBorderColor,
+        background: self.style.buttonActiveBackgroundColor,
+      },
+      'canvas-datagrid-button-icon': {
+        width: '18px',
+        height: '18px',
+        display: 'inline-block',
+        verticalAlign: 'middle',
+      },
+      'canvas-datagrid-button-arrow': {
+        display: 'inline-block',
+        color: self.style.buttonArrowColor,
+        fontSize: '9px',
+      },
+      'canvas-datagrid-button-menu-item-mobile': {
+        lineHeight: 'normal',
+        fontWeight: 'normal',
+        fontFamily: self.style.contextMenuFontFamily,
+        fontSize: self.style.contextMenuFontSize,
+        color: 'inherit',
+        background: 'inherit',
+        margin: self.style.contextMenuItemMargin,
+        borderRadius: self.style.contextMenuItemBorderRadius,
+        verticalAlign: 'middle',
+      },
+      'canvas-datagrid-button-menu-item': {
+        lineHeight: 'normal',
+        fontWeight: 'normal',
+        fontFamily: self.style.contextMenuFontFamily,
+        fontSize: self.style.contextMenuFontSize,
+        color: 'inherit',
+        background: 'inherit',
+        margin: self.style.contextMenuItemMargin,
+        borderRadius: self.style.contextMenuItemBorderRadius,
+        verticalAlign: 'middle',
+      },
+      'canvas-datagrid-button-menu-item:hover': {
+        background: self.style.contextMenuHoverBackground,
+        color: self.style.contextMenuHoverColor,
+      },
+      'canvas-datagrid-button-menu-label': {
+        margin: self.style.contextMenuLabelMargin,
+        display: self.style.contextMenuLabelDisplay,
+        minWidth: self.style.contextMenuLabelMinWidth,
+        maxWidth: self.style.contextMenuLabelMaxWidth,
+      },
+      'canvas-datagrid-button-menu-mobile': {
+        lineHeight: 'normal',
+        fontWeight: 'normal',
+        fontFamily: self.style.contextMenuFontFamily,
+        fontSize: self.style.contextMenuFontSize,
+        background: self.style.contextMenuBackground,
+        color: self.style.contextMenuColor,
+        border: self.style.contextMenuBorder,
+        padding: self.style.contextMenuPadding,
+        borderRadius: self.style.contextMenuBorderRadius,
+        opacity: self.style.contextMenuOpacity,
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+      },
+      'canvas-datagrid-button-menu': {
+        lineHeight: 'normal',
+        fontWeight: 'normal',
+        fontFamily: self.style.contextMenuFontFamily,
+        fontSize: self.style.contextMenuFontSize,
+        background: self.style.contextMenuBackground,
+        color: self.style.contextMenuColor,
+        border: self.style.contextMenuBorder,
+        padding: self.style.contextMenuPadding,
+        borderRadius: self.style.contextMenuBorderRadius,
+        opacity: self.style.contextMenuOpacity,
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        cursor: self.style.contextMenuCursor,
+      },
       'canvas-datagrid-context-menu-filter-input': {
         height: '19px',
         verticalAlign: 'bottom',
@@ -616,6 +832,7 @@ export default function (self) {
       Object.keys(css[className]).map(function (prop) {
         el.style[prop] = css[className][prop];
       });
+      el.className = className;
     }
     return;
   };
@@ -660,12 +877,15 @@ export default function (self) {
       }
     });
     self.eventParent.addEventListener('scroll', self.resize, false);
-    self.eventParent.addEventListener('touchstart', self.touchstart, false);
-    self.eventParent.addEventListener('mouseup', self.mouseup, false);
+    self.eventParent.addEventListener('touchstart', self.touchstart, {
+      passive: true,
+    });
     self.eventParent.addEventListener('mousedown', self.mousedown, false);
     self.eventParent.addEventListener('dblclick', self.dblclick, false);
     self.eventParent.addEventListener('click', self.click, false);
-    self.eventParent.addEventListener('mousemove', self.mousemove);
+    self.eventParent.addEventListener('mouseup', self.mouseup, false);
+    window.addEventListener('mouseup', self.mouseupOutsideGrid, false);
+    window.addEventListener('mousemove', self.mousemove);
     self[self.isChildGrid ? 'parentGrid' : 'eventParent'].addEventListener(
       'wheel',
       self.scrollWheel,
@@ -679,5 +899,6 @@ export default function (self) {
     self.controlInput.addEventListener('keyup', self.keyup, false);
     self.controlInput.addEventListener('keydown', self.keydown, false);
     window.addEventListener('resize', self.resize);
+    self.initResizeObserver();
   };
 }