canvas-datagrid 0.25.3 → 0.26.0

package/lib/contextMenu.js

@@ -173,6 +173,33 @@ export default function (self) {
         self.parentDOMNode.appendChild(downArrow);
       }
     }
+    function fade(element) {
+      var opacity = 1;
+      var timer = setInterval(function () {
+        if (opacity <= 0.1) {
+          clearInterval(timer);
+          element.style.display = 'none';
+          if (element.parentNode) {
+            element.parentNode.removeChild(element);
+          }
+        }
+        element.style.opacity = opacity;
+        element.style.filter = 'alpha(opacity=' + opacity * 100 + ')';
+        opacity -= opacity * 0.1;
+      }, self.attributes.animationDurationHideContextMenu * 0.1);
+    }
+    function unfade(element) {
+      var opacity = 0.1;
+      element.style.display = 'block';
+      var timer = setInterval(function () {
+        if (opacity >= 1) {
+          clearInterval(timer);
+        }
+        element.style.opacity = opacity;
+        element.style.filter = 'alpha(opacity=' + opacity * 100 + ')';
+        opacity += opacity * 0.1;
+      }, self.attributes.animationDurationShowContextMenu * 0.1);
+    }
     function startHoverScroll(type) {
       return function t() {
         var a = self.attributes.contextHoverScrollAmount;
@@ -210,6 +237,7 @@ export default function (self) {
       loc.y = pos.top - s.top;
       loc.height = 0;
       zIndexTop += 1;
+      container.style.opacity = 0;
       container.style.position = 'absolute';
       upArrow.style.color = self.style.contextMenuArrowColor;
       downArrow.style.color = self.style.contextMenuArrowColor;
@@ -246,6 +274,7 @@ export default function (self) {
       container.appendChild(upArrow);
       document.body.appendChild(downArrow);
       document.body.appendChild(container);
+      unfade(container);
       rect = container.getBoundingClientRect();
       // TODO: fix !(parentContextMenu && parentContextMenu.inputDropdown) state (autocomplete)
       if (rect.bottom > window.innerHeight) {
@@ -307,9 +336,7 @@ export default function (self) {
         c.dispose();
       });
       [downArrow, upArrow, container].forEach(function (el) {
-        if (el.parentNode) {
-          el.parentNode.removeChild(el);
-        }
+        fade(el);
       });
     };
     Object.defineProperty(intf, 'selectedIndex', {
@@ -317,7 +344,7 @@ export default function (self) {
         return selectedIndex;
       },
       set: function (value) {
-        if (typeof value !== 'number' || isNaN(value || !isFinite(value))) {
+        if (typeof value !== 'number' || isNaN(value) || !isFinite(value)) {
           throw new Error('Context menu selected index must be a sane number.');
         }
         selectedIndex = value;
@@ -367,7 +394,7 @@ export default function (self) {
       var items = {};
       var blanksItem = [];
 
-      self.data.forEach(function (row) {
+      self.viewData.forEach(function (row) {
         var cellValue =
           row[e.cell.header.name] == null
             ? row[e.cell.header.name]
@@ -511,8 +538,23 @@ export default function (self) {
       });
     }
   }
+
   function addDefaultContextMenuItem(e) {
-    var isNormalCell =
+    const schema = self.getSchema();
+    /**
+     * A map between columnIndex and column data
+     * @type {Map<string,any>}
+     */
+    let columns;
+    const getColumnsMap = () => {
+      if (!columns)
+        columns = new Map(schema.map((_col) => [_col.columnIndex, _col]));
+      return columns;
+    };
+    const isSorting =
+      self.orderings.columns && self.orderings.columns.length > 0;
+
+    const isNormalCell =
       !(
         e.cell.isBackground ||
         e.cell.isColumnHeaderCellCap ||
@@ -523,12 +565,7 @@ export default function (self) {
     if (self.attributes.showFilter && isNormalCell) {
       createFilterContextMenuItems(e);
     }
-    if (
-      self.attributes.showCopy &&
-      self.selections.reduce(function (p, r) {
-        return p + r.length;
-      }, 0) > 0
-    ) {
+    if (self.attributes.showCopy && self.canSelectionsBeCopied()) {
       e.items.push({
         title: self.attributes.copyText,
         click: function () {
@@ -542,7 +579,11 @@ export default function (self) {
       e.items.push({
         title: self.attributes.pasteText,
         click: function () {
-          self.paste(self.clipBoardData, e.cell.columnIndex, e.cell.rowIndex);
+          // Original function call:
+          // self.paste(self.clipBoardData, e.cell.columnIndex, e.cell.rowIndex);
+          // We can remove the last two parameters follow
+          // because this function only need one parameter by following the function declaration
+          self.paste(self.clipBoardData);
           self.draw();
         },
       });
@@ -582,20 +623,35 @@ export default function (self) {
         },
       });
       if (e.cell && e.cell.header && e.cell.columnIndex > -1) {
+        // This variable represents the order index because of the following codes from `draw.js`:
+        //     columnIndex: columnOrderIndex,
+        const columnOrderIndex = e.cell.columnIndex;
+        const columnIndex = self.orders.columns[columnOrderIndex];
+
+        const contiguousColumns = self.getSelectedContiguousColumns(schema);
+        let title = '';
+        if (contiguousColumns) {
+          title = contiguousColumns
+            .map((col) => col.title || col.name)
+            .join('-');
+        } else {
+          const column = schema[columnIndex];
+          if (column) title = column.title || column.name;
+        }
         e.items.push({
-          title: self.attributes.hideColumnText.replace(
-            /%s/gi,
-            e.cell.header.title || e.cell.header.name,
-          ),
+          title: self.attributes.hideColumnText.replace(/%s/gi, title),
           click: function (ev) {
-            self.getSchema()[e.cell.columnIndex].hidden = true;
             ev.preventDefault();
             self.stopPropagation(ev);
             self.disposeContextMenu();
-            self.setStorageData();
-            setTimeout(function () {
-              self.resize(true);
-            }, 10);
+            if (contiguousColumns) {
+              self.hideColumns(
+                contiguousColumns[0].orderIndex,
+                contiguousColumns[1].orderIndex,
+              );
+            } else {
+              self.hideColumns(columnOrderIndex);
+            }
           },
         });
       }
@@ -618,8 +674,8 @@ export default function (self) {
           self.dispatchEvent('resizecolumn', {
             columnWidth: self.style.cellWidth,
           });
-          self.dispatchEvent('resizerow', {
-            cellHeight: self.style.cellHeight,
+          self.dispatchResizeRow({
+            height: self.style.cellHeight,
           });
           self.setStorageData();
           self.resize(true);
@@ -657,6 +713,254 @@ export default function (self) {
         },
       });
     }
+
+    //#region hide rows
+    const canHideRows = !isSorting && e.cell.isRowHeader && e.cell.header;
+    if (canHideRows) {
+      const range = self.getSelectedContiguousRows(true);
+      if (range) {
+        const boundRowIndexes = range.map((viewRowIndex) =>
+          self.getBoundRowIndexFromViewRowIndex(viewRowIndex),
+        );
+        let title;
+        if (boundRowIndexes.length === 1) {
+          if (typeof boundRowIndexes[0] === 'number')
+            title = boundRowIndexes[0] + 1;
+          else title = range[0] + 1;
+
+          title = self.attributes.showHideRow.replace('%s', title);
+          // hide one row
+          e.items.push({
+            title,
+            click: function (ev) {
+              ev.preventDefault();
+              self.hideRows(boundRowIndexes[0], boundRowIndexes[0]);
+            },
+          });
+        } else if (boundRowIndexes[0] <= boundRowIndexes[1]) {
+          title = boundRowIndexes
+            .map((it, index) => {
+              if (typeof it === 'number') return it + 1;
+              return range[index] + 1;
+            })
+            .join('-');
+          title = self.attributes.showHideRows.replace('%s', title);
+          // hide rows
+          e.items.push({
+            title,
+            click: function (ev) {
+              ev.preventDefault();
+              self.hideRows(boundRowIndexes[0], boundRowIndexes[1]);
+            },
+          });
+        }
+      }
+    }
+    //#endregion hide rows
+
+    //#region group/ungroup columns
+    const groupAreaHeight = self.getColumnGroupAreaHeight();
+    const groupAreaWidth = self.getRowGroupAreaWidth();
+    const setCollapseStateForAllGroups = (allGroups, collapsed) => {
+      if (allGroups.length === 0) return;
+      for (let i = 0; i < allGroups.length; i++) {
+        const groups = allGroups[i];
+        for (let j = 0; j < groups.length; j++) {
+          const group = groups[j];
+          group.collapsed = collapsed;
+        }
+      }
+      self.refresh();
+    };
+    if (e.pos && e.pos.y < groupAreaHeight) {
+      e.items.push({
+        title: self.attributes.showRemoveAllGroupColumns,
+        click: function (ev) {
+          ev.preventDefault();
+          self.groupedColumns = [];
+          self.refresh();
+        },
+      });
+      e.items.push({
+        title: self.attributes.showExpandAllGroupColumns,
+        click: function (ev) {
+          ev.preventDefault();
+          setCollapseStateForAllGroups(self.groupedColumns, false);
+        },
+      });
+      e.items.push({
+        title: self.attributes.showCollapseAllGroupColumns,
+        click: function (ev) {
+          ev.preventDefault();
+          setCollapseStateForAllGroups(self.groupedColumns, true);
+        },
+      });
+    }
+    if (e.pos && e.pos.x < groupAreaWidth) {
+      e.items.push({
+        title: self.attributes.showRemoveAllGroupRows,
+        click: function (ev) {
+          ev.preventDefault();
+          self.groupedRows = [];
+          self.refresh();
+        },
+      });
+      e.items.push({
+        title: self.attributes.showExpandAllGroupRows,
+        click: function (ev) {
+          ev.preventDefault();
+          setCollapseStateForAllGroups(self.groupedRows, false);
+        },
+      });
+      e.items.push({
+        title: self.attributes.showCollapseAllGroupRows,
+        click: function (ev) {
+          ev.preventDefault();
+          setCollapseStateForAllGroups(self.groupedRows, true);
+        },
+      });
+    }
+
+    const canGroupByColumns =
+      self.attributes.allowGroupingColumns &&
+      e.cell.isColumnHeader &&
+      e.cell.header &&
+      e.cell.header.index > 0;
+    const canUngroupColumns =
+      self.attributes.allowGroupingColumns && e.cell.isColumnHeader;
+    const canGroupByRows =
+      !isSorting &&
+      self.attributes.allowGroupingRows &&
+      e.cell.isRowHeader &&
+      e.cell.header;
+    const canUngroupRows =
+      self.attributes.allowGroupingRows && e.cell.isRowHeader;
+
+    if (canGroupByColumns) {
+      /** @type {number[]} */
+      const groupIndexes = [];
+      /** @type {number} */
+      const headerIndex = e.cell.header.index;
+      let col = headerIndex;
+      for (; col >= 0; col--) {
+        if (!self.isColumnSelected(col)) break;
+        groupIndexes[0] = col;
+      }
+      for (col = headerIndex; ; col++) {
+        if (!self.isColumnSelected(col)) break;
+        groupIndexes[1] = col;
+      }
+      if (
+        col !== headerIndex &&
+        groupIndexes.length === 2 &&
+        groupIndexes[1] > groupIndexes[0] &&
+        self.isNewGroupRangeValid(
+          self.groupedColumns,
+          groupIndexes[0],
+          groupIndexes[1],
+        )
+      ) {
+        const columns = getColumnsMap();
+        const groupTitles = [];
+        const groupNames = [];
+        for (let i = 0; i < groupIndexes.length; i++) {
+          const columnIndex = groupIndexes[i];
+          const column = columns.get(columnIndex);
+          if (column) {
+            groupNames.push(column.name);
+            groupTitles.push(column.title || column.name || column.index);
+          }
+        }
+        if (groupNames[0] && groupNames[1]) {
+          // show group options
+          e.items.push({
+            title: self.attributes.showGroupColumns.replace(
+              '%s',
+              groupTitles[0] + '-' + groupTitles[1],
+            ),
+            click: function (ev) {
+              ev.preventDefault();
+              self.groupColumns(groupNames[0], groupNames[1]);
+              self.controlInput.focus();
+            },
+          });
+        }
+      }
+    }
+    if (canUngroupColumns) {
+      const columnIndex = e.cell.columnIndex;
+      const groups = self.getGroupsColumnBelongsTo(columnIndex);
+      const columns = getColumnsMap();
+      for (let i = 0; i < groups.length; i++) {
+        const { from, to } = groups[i];
+        const cell0 = columns.get(from);
+        const cell1 = columns.get(to);
+        if (cell0 && cell1) {
+          const formatArgs =
+            (cell0.title || cell0.name || cell0.index) +
+            '-' +
+            (cell1.title || cell1.name || cell1.index);
+          e.items.push({
+            title: self.attributes.showRemoveGroupColumns.replace(
+              '%s',
+              formatArgs,
+            ),
+            click: function (ev) {
+              ev.preventDefault();
+              self.removeGroupColumns(cell0.name, cell1.name);
+              self.controlInput.focus();
+            },
+          });
+        } else {
+          console.warn(`Cannot find column ${from} or column ${to}`);
+        }
+      }
+    }
+    if (canGroupByRows) {
+      const range = self.getSelectedContiguousRows(false) || [];
+      const rangeTitle = range
+        .map((rowIndex) => {
+          const index = self.getBoundRowIndexFromViewRowIndex(rowIndex);
+          if (typeof index === 'number') return index + 1;
+          return rowIndex + 1;
+        })
+        .join('-');
+      if (
+        range.length === 2 &&
+        self.isNewGroupRangeValid(self.groupedRows, range[0], range[1])
+      ) {
+        e.items.push({
+          title: self.attributes.showGroupRows.replace('%s', rangeTitle),
+          click: function (ev) {
+            ev.preventDefault();
+            self.groupRows(range[0], range[1]);
+          },
+        });
+      }
+    }
+    if (canUngroupRows) {
+      const rowIndex = e.cell.rowIndex;
+      const groups = self.getGroupsRowBelongsTo(rowIndex);
+      for (let i = 0; i < groups.length; i++) {
+        const { from, to } = groups[i];
+        const rangeTitle = [from, to]
+          .map((rowIndex) => {
+            const index = self.getBoundRowIndexFromViewRowIndex(rowIndex);
+            if (typeof index === 'number') return index + 1;
+            return rowIndex + 1;
+          })
+          .join('-');
+        e.items.push({
+          title: self.attributes.showRemoveGroupRows.replace('%s', rangeTitle),
+          click: function (ev) {
+            ev.preventDefault();
+            self.removeGroupRows(from, to);
+            self.controlInput.focus();
+          },
+        });
+      }
+    }
+    //#endregion group/ungroup columns
   }
   self.disposeAutocomplete = function () {
     if (autoCompleteContext) {
@@ -664,7 +968,18 @@ export default function (self) {
       autoCompleteContext = undefined;
     }
   };
-  self.disposeContextMenu = function () {
+  self.disposeContextMenu = function (event) {
+    if (
+      event &&
+      event.type === 'click' &&
+      event.ctrlKey &&
+      self.contextMenuOpenedAt !== undefined &&
+      performance.now() - self.contextMenuOpenedAt < 500
+    ) {
+      // macOS Safari dispatches a click right after a ctrl-click contextmenu,
+      // which would close the menu immediately (#521)
+      return;
+    }
     document.removeEventListener('click', self.disposeContextMenu);
     zIndexTop = self.style.contextMenuZIndex;
     self.disposeAutocomplete();
@@ -672,15 +987,67 @@ export default function (self) {
       self.contextMenu.dispose();
     }
     self.contextMenu = undefined;
+    if (event) {
+      self.canvas.focus();
+      self.mousedown(event);
+      self.mouseup(event);
+    }
   };
   self.contextmenuEvent = function (e, overridePos) {
     if (!self.hasFocus && e.target !== self.canvas) {
       return;
     }
-    function createDiposeEvent() {
+    // don't create context menu for parents if current position is located in child grid
+    const children = Object.keys(self.childGrids);
+    for (let i = 0; i < children.length; i++) {
+      const childGrid = self.childGrids[children[i]];
+      const parentNode = childGrid && childGrid.parentNode;
+      if (!parentNode) continue;
+      const { offsetLeft, offsetWidth, offsetTop, offsetHeight } = parentNode;
+      if ((e.x >= offsetLeft && e.x <= offsetLeft + offsetWidth) === false)
+        continue;
+      if ((e.y >= offsetTop && e.y <= offsetTop + offsetHeight) === false)
+        continue;
+      return; // in child grid
+    }
+    // don't create context menu for child if current position is located in parent grid
+    if (self.isChildGrid && self.parentNode) {
+      //#region check is current child grid closed
+      const childGridsOfParent = self.parentGrid && self.parentGrid.childGrids;
+      if (!childGridsOfParent || !Array.isArray(childGridsOfParent)) return;
+      const matchedMe = childGridsOfParent.find((grid) => {
+        const nodeA = grid.parentNode;
+        const nodeB = self.parentNode;
+        return (
+          nodeA.offsetTop == nodeB.offsetTop &&
+          nodeA.offsetLeft === nodeB.offsetLeft
+        );
+      });
+      if (!matchedMe) return;
+      //#endregion
+
+      let x0 = self.parentNode.offsetLeft;
+      let x1 = self.parentNode.offsetLeft + self.parentNode.offsetWidth;
+      let y0 = self.parentNode.offsetTop;
+      let y1 = self.parentNode.offsetTop + self.parentNode.offsetHeight;
+      let node = self.parentNode.parentNode;
+      while (node) {
+        const { offsetLeft, offsetWidth, offsetTop, offsetHeight } = node;
+        if (offsetLeft > x0) x0 = offsetLeft;
+        if (offsetTop > y0) y0 = offsetTop;
+        const newX1 = offsetLeft + offsetWidth;
+        const newY1 = offsetTop + offsetHeight;
+        if (newX1 < x1) x1 = newX1;
+        if (newY1 < y1) y1 = newY1;
+        if (node.nodeType !== 'canvas-datagrid-tree') break;
+        node = node.parentNode;
+      }
+      if ((e.x >= x0 && e.x <= x1 && e.y >= y0 && e.y <= y1) === false) return;
+    }
+    function createDisposeEvent() {
       requestAnimationFrame(function () {
         document.addEventListener('click', self.disposeContextMenu);
-        document.removeEventListener('mouseup', createDiposeEvent);
+        window.removeEventListener('mouseup', createDisposeEvent);
       });
     }
     var contextPosition,
@@ -689,12 +1056,13 @@ export default function (self) {
       ev = {
         NativeEvent: e,
         cell: self.getCellAt(pos.x, pos.y),
+        pos,
         items: items,
       };
     if (!ev.cell.isGrid) {
       addDefaultContextMenuItem(ev);
     }
-    if (self.dispatchEvent('contextmenu', ev)) {
+    if (e.type !== 'mousedown' && self.dispatchEvent('contextmenu', ev)) {
       return;
     }
     if (!ev.cell.isGrid) {
@@ -722,8 +1090,18 @@ export default function (self) {
         contextPosition.width =
           self.width - self.style.mobileContextMenuMargin * 2 + 'px';
       }
-      self.contextMenu = createContextMenu(ev, contextPosition, items);
-      document.addEventListener('mouseup', createDiposeEvent);
+      if (e.type == 'mousedown') {
+        contextPosition.top += self.style.filterButtonMenuOffsetTop;
+      }
+      // use ev.items, not the captured array: a listener may assign a new
+      // array to e.items (#263)
+      self.contextMenu = createContextMenu(ev, contextPosition, ev.items);
+      self.contextMenuOpenedAt = performance.now();
+      if (e.type == 'mousedown') {
+        window.addEventListener('mouseup', createDisposeEvent);
+      } else {
+        createDisposeEvent();
+      }
       e.preventDefault();
     }
   };