canvas-datagrid 0.3.17 → 0.3.21

package/dist/types.d.ts

@@ -392,6 +392,15 @@ declare class canvasDatagrid {
      * @param y - The row index of the cell to scroll to.
      */
     static gotoRow(y: number): void;
+    /**
+     * Add a button into the cell.
+     * @param columnIndex - The column index of the cell to to add a button.
+     * @param rowIndex - The row index of the cell to to add a button.
+     * @param offset - Offset how far go away from cell.
+     * @param items - a list of items to add into button menu.
+     * @param imgSrc - icon path to add into button.
+     */
+    static addButton(columnIndex: number, rowIndex: number, offset: any, items: any, imgSrc: string): void;
     /**
      * Scrolls the cell at cell x, row y into view if it is not already.
      * @param x - The column index of the cell to scroll into view.
@@ -416,6 +425,11 @@ declare class canvasDatagrid {
      * @param dontDraw - Suppress the draw method after the selection change.
      */
     static selectAll(dontDraw: boolean): void;
+    /**
+     * Returns true if indices of columns next to the selected columnIndex is selected on every row.
+     * @param columnIndex - The column index to check.
+     */
+    static isMultiColumnsSelected(columnIndex: number): void;
     /**
      * Returns true if the selected columnIndex is selected on every row.
      * @param columnIndex - The column index to check.
@@ -491,6 +505,11 @@ declare class canvasDatagrid {
      * @param offsetY - The number of rows to offset the selection.
      */
     static moveSelection(offsetX: number, offsetY: number): void;
+    /**
+     * Deletes currently selected data.
+     * @param dontDraw - Suppress the draw method after the selection change.
+     */
+    static deleteSelectedData(dontDraw: boolean): void;
     /**
      * Moves data in the provided selection to another position in the grid.  Moving data off the edge of the schema (columns/x) will truncate data.
      * @param sel - 2D array representing selected rows and columns.  `canvasDatagrid.selections` is in this format and can be used here.

package/lib/button.js

@@ -0,0 +1,326 @@
+/*jslint browser: true, unparam: true, todo: true*/
+/*globals define: true, MutationObserver: false, requestAnimationFrame: false, performance: false, btoa: false, Event: false*/
+'use strict';
+
+export default function (self) {
+  let zIndexTop;
+
+  function applyButtonMenuItemStyle(buttonMenuItemContainer) {
+    self.createInlineStyle(
+      buttonMenuItemContainer,
+      'canvas-datagrid-button-menu-item' + (self.mobile ? '-mobile' : ''),
+    );
+    buttonMenuItemContainer.addEventListener('mouseover', function () {
+      self.createInlineStyle(
+        buttonMenuItemContainer,
+        'canvas-datagrid-button-menu-item:hover',
+      );
+    });
+    buttonMenuItemContainer.addEventListener('mouseout', function () {
+      self.createInlineStyle(
+        buttonMenuItemContainer,
+        'canvas-datagrid-button-menu-item',
+      );
+    });
+  }
+
+  function applyButtonStyle(button) {
+    self.createInlineStyle(button, 'canvas-datagrid-button-wrapper');
+    button.addEventListener('mouseover', function () {
+      if (!self.buttonMenu) {
+        self.createInlineStyle(button, 'canvas-datagrid-button-wrapper:hover');
+      }
+    });
+    button.addEventListener('mouseout', function () {
+      if (!self.buttonMenu) {
+        self.createInlineStyle(button, 'canvas-datagrid-button-wrapper');
+      }
+    });
+  }
+
+  function createButton(pos, items, imgSrc) {
+    var wrapper = document.createElement('div'),
+      buttonArrow = document.createElement('div'),
+      buttonIcon = document.createElement('div'),
+      intf = {};
+
+    if (!Array.isArray(items)) {
+      throw new Error('createButton expects an array.');
+    }
+
+    function init() {
+      var loc = {},
+        s = self.scrollOffset(self.canvas);
+
+      if (zIndexTop === undefined) {
+        zIndexTop = self.style.buttonZIndex;
+      }
+
+      applyButtonStyle(wrapper);
+      self.createInlineStyle(buttonIcon, 'canvas-datagrid-button-icon');
+      self.createInlineStyle(buttonArrow, 'canvas-datagrid-button-arrow');
+
+      loc.x = pos.left - s.left;
+      loc.y = pos.top - s.top;
+      loc.height = 0;
+      zIndexTop += 1;
+      wrapper.style.position = 'absolute';
+      wrapper.style.zIndex = zIndexTop;
+      wrapper.style.left = loc.x + 'px';
+      wrapper.style.top = loc.y + 'px';
+      wrapper.left = pos.left + self.scrollBox.scrollLeft;
+      wrapper.top = pos.top + self.scrollBox.scrollTop;
+      buttonArrow.innerHTML = self.style.buttonArrowDownHTML;
+      if (imgSrc) {
+        let img = document.createElement('img');
+        img.setAttribute('src', imgSrc);
+        img.style.maxWidth = '100%';
+        img.style.height = '100%';
+        buttonIcon.appendChild(img);
+      }
+      wrapper.appendChild(buttonIcon);
+      wrapper.appendChild(buttonArrow);
+      document.body.appendChild(wrapper);
+      wrapper.addEventListener('click', toggleButtonMenu);
+    }
+
+    intf.wrapper = wrapper;
+    intf.items = items;
+    init();
+
+    intf.dispose = function () {
+      if (wrapper.parentNode) {
+        wrapper.parentNode.removeChild(wrapper);
+      }
+    };
+    return intf;
+  }
+
+  function toggleButtonMenu() {
+    function createDisposeEvent() {
+      requestAnimationFrame(function () {
+        document.addEventListener('click', self.disposeButtonMenu);
+      });
+    }
+    if (self.buttonMenu) {
+      self.disposeButtonMenu();
+    } else {
+      let pos = {
+        left: self.button.wrapper.left - self.scrollBox.scrollLeft,
+        top:
+          self.button.wrapper.top +
+          self.button.wrapper.offsetHeight -
+          self.scrollBox.scrollTop,
+      };
+      self.buttonMenu = createButtonMenu(pos, self.button.items);
+      self.createInlineStyle(
+        self.button.wrapper,
+        'canvas-datagrid-button-wrapper:active',
+      );
+      createDisposeEvent();
+    }
+  }
+
+  function createButtonMenu(pos, items) {
+    var buttonMenu = document.createElement('div'),
+      selectedIndex = -1,
+      intf = {},
+      rect;
+
+    function createItems() {
+      function addItem(item, menuItemContainer) {
+        function addContent(content) {
+          if (content === null) {
+            return;
+          }
+
+          if (typeof content === 'object') {
+            menuItemContainer.appendChild(content);
+            return;
+          }
+
+          applyButtonMenuItemStyle(menuItemContainer);
+          menuItemContainer.innerHTML = content;
+          return;
+        }
+
+        addContent(item.title);
+        item.buttonMenuItemContainer = menuItemContainer;
+
+        if (item.click) {
+          menuItemContainer.addEventListener('click', function (ev) {
+            item.click.apply(self, [ev]);
+            self.disposeButton();
+          });
+        }
+      }
+
+      for (let item of items) {
+        var buttonMenuItemContainer = document.createElement('div');
+        addItem(item, buttonMenuItemContainer);
+        buttonMenu.appendChild(buttonMenuItemContainer);
+      }
+    }
+
+    function clickIndex(idx) {
+      items[idx].buttonMenuItemContainer.dispatchEvent(new Event('click'));
+    }
+
+    function init() {
+      var loc = {},
+        s = self.scrollOffset(self.canvas);
+
+      if (zIndexTop === undefined) {
+        zIndexTop = self.style.buttonZIndex;
+      }
+
+      createItems();
+      self.createInlineStyle(
+        buttonMenu,
+        'canvas-datagrid-button-menu' + (self.mobile ? '-mobile' : ''),
+      );
+
+      loc.x = pos.left - s.left;
+      loc.y = pos.top - s.top;
+      loc.height = 0;
+      zIndexTop += 1;
+      buttonMenu.style.position = 'absolute';
+      buttonMenu.style.zIndex = zIndexTop;
+      buttonMenu.style.left = loc.x + 'px';
+      buttonMenu.style.top = loc.y + 'px';
+      document.body.appendChild(buttonMenu);
+      rect = buttonMenu.getBoundingClientRect();
+
+      if (rect.bottom > window.innerHeight) {
+        loc.y =
+          self.button.wrapper.top -
+          buttonMenu.offsetHeight -
+          self.scrollBox.scrollTop;
+        if (loc.y < 0) {
+          loc.y = self.style.buttonMenuWindowMargin;
+        }
+
+        if (
+          buttonMenu.offsetHeight >
+          window.innerHeight - self.style.buttonMenuWindowMargin
+        ) {
+          buttonMenu.style.height =
+            window.innerHeight - self.style.buttonMenuWindowMargin * 2 + 'px';
+        }
+      }
+
+      if (rect.right > window.innerWidth) {
+        loc.x -=
+          rect.right - window.innerWidth + self.style.buttonMenuWindowMargin;
+      }
+
+      if (loc.x < 0) {
+        loc.x = self.style.buttonMenuWindowMargin;
+      }
+
+      if (loc.y < 0) {
+        loc.y = self.style.buttonMenuWindowMargin;
+      }
+
+      buttonMenu.style.left = loc.x + 'px';
+      buttonMenu.style.top = loc.y + 'px';
+    }
+
+    intf.buttonMenu = buttonMenu;
+    init();
+    intf.clickIndex = clickIndex;
+    intf.rect = rect;
+    intf.items = items;
+
+    intf.dispose = function () {
+      if (buttonMenu.parentNode) {
+        buttonMenu.parentNode.removeChild(buttonMenu);
+      }
+    };
+
+    Object.defineProperty(intf, 'selectedIndex', {
+      get: function get() {
+        return selectedIndex;
+      },
+      set: function set(value) {
+        if (typeof value !== 'number' || isNaN(value) || !isFinite(value)) {
+          throw new Error('Button menu selected index must be a sane number.');
+        }
+
+        selectedIndex = value;
+
+        if (selectedIndex > items.length - 1) {
+          selectedIndex = items.length - 1;
+        }
+
+        if (selectedIndex < 0) {
+          selectedIndex = 0;
+        }
+
+        items.forEach(function (item, index) {
+          if (index === selectedIndex) {
+            return self.createInlineStyle(
+              item.buttonMenuItemContainer,
+              'canvas-datagrid-button-menu-item:hover',
+            );
+          }
+
+          self.createInlineStyle(
+            item.buttonMenuItemContainer,
+            'canvas-datagrid-button-menu-item',
+          );
+        });
+      },
+    });
+    return intf;
+  }
+
+  self.disposeButtonMenu = function () {
+    if (self.buttonMenu) {
+      document.removeEventListener('click', self.disposeButtonMenu);
+      self.buttonMenu.dispose();
+      self.buttonMenu = undefined;
+      self.createInlineStyle(
+        self.button.wrapper,
+        'canvas-datagrid-button-wrapper:hover',
+      );
+    }
+  };
+
+  self.disposeButton = function (e) {
+    if (e && e.keyCode !== 27) return;
+    document.removeEventListener('keydown', self.disposeButton);
+    zIndexTop = self.style.buttonZIndex;
+    self.disposeButtonMenu();
+
+    if (self.button) {
+      self.button.dispose();
+    }
+
+    self.button = undefined;
+  };
+
+  self.moveButtonPos = function () {
+    self.button.wrapper.style.left =
+      self.button.wrapper.left - self.scrollBox.scrollLeft + 'px';
+    self.button.wrapper.style.top =
+      self.button.wrapper.top - self.scrollBox.scrollTop + 'px';
+    self.disposeButtonMenu();
+  };
+
+  self.attachButton = function (pos, items, imgSrc) {
+    function createDisposeEvent() {
+      requestAnimationFrame(function () {
+        document.addEventListener('keydown', self.disposeButton);
+      });
+    }
+
+    if (self.button) {
+      self.disposeButton();
+    }
+
+    self.button = createButton(pos, items, imgSrc);
+    createDisposeEvent();
+  };
+  return;
+}

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', {
@@ -664,7 +691,7 @@ export default function (self) {
       autoCompleteContext = undefined;
     }
   };
-  self.disposeContextMenu = function () {
+  self.disposeContextMenu = function (event) {
     document.removeEventListener('click', self.disposeContextMenu);
     zIndexTop = self.style.contextMenuZIndex;
     self.disposeAutocomplete();
@@ -672,15 +699,20 @@ 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() {
+    function createDisposeEvent() {
       requestAnimationFrame(function () {
         document.addEventListener('click', self.disposeContextMenu);
-        document.removeEventListener('mouseup', createDiposeEvent);
+        document.removeEventListener('mouseup', createDisposeEvent);
       });
     }
     var contextPosition,
@@ -694,7 +726,7 @@ export default function (self) {
     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 +754,15 @@ export default function (self) {
         contextPosition.width =
           self.width - self.style.mobileContextMenuMargin * 2 + 'px';
       }
+      if (e.type == 'mousedown') {
+        contextPosition.top += self.style.filterButtonMenuOffsetTop;
+      }
       self.contextMenu = createContextMenu(ev, contextPosition, items);
-      document.addEventListener('mouseup', createDiposeEvent);
+      if (e.type == 'mousedown') {
+        document.addEventListener('mouseup', createDisposeEvent);
+      } else {
+        createDisposeEvent();
+      }
       e.preventDefault();
     }
   };

package/lib/defaults.js

@@ -16,6 +16,8 @@ export default function (self) {
       ['allowRowResize', true],
       ['allowRowResizeFromCell', false],
       ['allowSorting', true],
+      ['animationDurationShowContextMenu', 50],
+      ['animationDurationHideContextMenu', 50],
       ['autoGenerateSchema', false],
       ['autoResizeColumns', false],
       ['autoResizeRows', false],
@@ -67,6 +69,7 @@ export default function (self) {
       ['showColumnSelector', true],
       ['showCopy', false],
       ['showFilter', true],
+      ['showFilterInCell', false],
       ['showNewRow', false],
       ['showOrderByOption', true],
       ['showOrderByOptionTextAsc', 'Order by %s ascending'],
@@ -118,6 +121,16 @@ export default function (self) {
       ['autocompleteBottomMargin', 60],
       ['autosizeHeaderCellPadding', 8],
       ['autosizePadding', 5],
+      ['buttonActiveBackgroundColor', 'rgba(255, 255, 255, 1)'],
+      ['buttonActiveBorderColor', 'rgba(110, 168, 255, 1)'],
+      ['buttonArrowColor', 'rgba(50, 50, 50, 1)'],
+      ['buttonArrowDownHTML', '▼'],
+      ['buttonZIndex', 10000],
+      ['buttonBackgroundColor', 'rgba(255, 255, 255, 1)'],
+      ['buttonBorderColor', 'rgba(172, 172, 172, 1)'],
+      ['buttonHoverBackgroundColor', 'rgba(240, 240, 240, 1)'],
+      ['buttonMenuWindowMargin', 30],
+      ['buttonPadding', '3px'],
       ['cellAutoResizePadding', 13],
       ['cellBackgroundColor', 'rgba(255, 255, 255, 1)'],
       ['cellBorderColor', 'rgba(195, 199, 202, 1)'],
@@ -232,6 +245,20 @@ export default function (self) {
       ['editCellFontSize', '16px'],
       ['editCellPaddingLeft', 4],
       ['editCellZIndex', 10000],
+      ['filterButtonActiveBackgroundColor', 'rgba(225, 225, 225, 1)'],
+      ['filterButtonArrowBorderColor', 'rgba(195, 199, 202, 1)'],
+      ['filterButtonArrowBorderWidth', 1],
+      ['filterButtonArrowClickRadius', 5],
+      ['filterButtonArrowColor', 'rgba(50, 50, 50, 1)'],
+      ['filterButtonArrowHeight', 5],
+      ['filterButtonArrowWidth', 8],
+      ['filterButtonBackgroundColor', 'rgba(240, 240, 240, 1)'],
+      ['filterButtonBorderColor', 'rgba(172, 172, 172, 1)'],
+      ['filterButtonBorderRadius', 3],
+      ['filterButtonHeight', 20],
+      ['filterButtonHoverBackgroundColor', 'rgba(235, 235, 235, 1)'],
+      ['filterButtonMenuOffsetTop', 10],
+      ['filterButtonWidth', 20],
       ['frozenMarkerHoverColor', 'rgba(236, 243, 255, 1)'],
       ['frozenMarkerHoverBorderColor', 'rgba(110, 168, 255, 1)'],
       ['frozenMarkerActiveColor', 'rgba(236, 243, 255, 1)'],

package/lib/docs.js

@@ -460,6 +460,14 @@
  * @param {object} e.boundRowIndexMap Mapping of view data row to bound data row index.
  * @param {object} e.boundColumnIndexMap Mapping of view column order to bound column order.
  */
+/**
+ * Fires when the selected is deleted by pressing backspace or delete key.
+ * @event
+ * @name canvasDatagrid#afterdelete
+ * @param {object} e Event object.
+ * @param {object} e.ctx Canvas context.
+ * @param {array} e.cells Cells affected by the delete action. Each item in the array is a tuple of [rowIndex, columnIndex, boundRowIndex, boundColumnIndex].
+ */
 /**
  * Fires when the user clicks on the "drill in" arrow.  When the arrow is clicked a new
  * grid is created and nested inside of the row.  The grid, the row data and row index are passed
@@ -552,7 +560,7 @@
  * @name canvasDatagrid#afterpaste
  * @param {object} e Event object
  * @param {object} e.ctx Canvas context.
- * @param {array} e.cells Cells affected by the paste action. Each item in the array is a tuple of [rowIndex, columnIndex].
+ * @param {array} e.cells Cells affected by the paste action. Each item in the array is a tuple of [rowIndex, columnIndex, boundRowIndex, boundColumnIndex].
  */
 /**
  * Fired just before a cell is drawn onto the canvas.  `e.preventDefault();` prevents the cell from being drawn.

package/lib/dom.js

@@ -435,6 +435,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',