canvas-datagrid 0.3.19 → 0.3.20

package/lib/draw.js

@@ -164,6 +164,34 @@ export default function (self) {
     self.ctx.fill();
     return ml + aw + mr;
   }
+  function drawFilterButtonArrow(x, y) {
+    var mt =
+        ((self.style.filterButtonHeight - self.style.filterButtonArrowHeight) /
+          2) *
+        self.scale,
+      ml =
+        ((self.style.filterButtonWidth - self.style.filterButtonArrowWidth) /
+          2) *
+        self.scale,
+      aw = self.style.filterButtonArrowWidth * self.scale,
+      ah = self.style.filterButtonArrowHeight * self.scale;
+    x += self.canvasOffsetLeft;
+    y += self.canvasOffsetTop;
+    self.ctx.fillStyle = self.style.filterButtonArrowColor;
+    self.ctx.strokeStyle = self.style.filterButtonArrowBorderColor;
+    self.ctx.beginPath();
+    x = x + ml;
+    y = y + mt;
+
+    self.ctx.moveTo(x, y);
+    self.ctx.lineTo(x + aw, y);
+    self.ctx.lineTo(x + aw * 0.5, y + ah);
+    self.ctx.moveTo(x, y);
+
+    self.ctx.stroke();
+    self.ctx.fill();
+    return ml + aw;
+  }
   function radiusRect(x, y, w, h, radius) {
     x += self.canvasOffsetLeft;
     y += self.canvasOffsetTop;
@@ -816,6 +844,9 @@ export default function (self) {
           isCorner = /cornerCell/.test(cellStyle),
           isRowHeader = 'rowHeaderCell' === cellStyle,
           isColumnHeader = 'columnHeaderCell' === cellStyle,
+          isFilterable =
+            self.filterable.rows.includes(rowIndex) &&
+            self.filterable.columns.includes(headerIndex),
           wrap = self.style.cellWhiteSpace !== 'nowrap',
           selected =
             self.selections[rowOrderIndex] &&
@@ -824,6 +855,9 @@ export default function (self) {
             self.hovers.rowIndex === rowOrderIndex &&
             (self.attributes.hoverMode === 'row' ||
               self.hovers.columnIndex === columnOrderIndex),
+          openedFilter =
+            self.selectedFilterButton.rowIndex == rowIndex &&
+            self.selectedFilterButton.columnIndex == headerIndex,
           active =
             self.activeCell.rowIndex === rowOrderIndex &&
             self.activeCell.columnIndex === columnOrderIndex,
@@ -915,6 +949,8 @@ export default function (self) {
           isColumnHeader: isColumnHeader,
           isColumnHeaderCellCap: isColumnHeaderCellCap,
           isRowHeader: isRowHeader,
+          isFilterable: isFilterable,
+          openedFilter: openedFilter,
           rowOpen: rowOpen,
           header: header,
 
@@ -1114,6 +1150,10 @@ export default function (self) {
         }
         self.ctx.restore();
 
+        if (isFilterable) {
+          drawFilterButton(cell);
+        }
+
         // Gaps may occur in row numbers between consecutively rendered rows
         // when we are filtering. We draw attention to this by drawing a thick
         // border overlapping the two consecutive row headers. If sorting, visible
@@ -1154,6 +1194,34 @@ export default function (self) {
         return cell.width;
       };
     }
+    function drawFilterButton(cell, ev) {
+      var posX = cell.x + cell.width - self.style.filterButtonWidth - 1;
+      var posY = cell.y + cell.height - self.style.filterButtonHeight - 2;
+      if (self.dispatchEvent('beforerenderfilterbutton', ev)) {
+        return;
+      }
+      self.ctx.save();
+      self.ctx.strokeStyle = self.style.filterButtonBorderColor;
+      self.ctx.fillStyle = self.style.filterButtonBackgroundColor;
+      if (cell.openedFilter) {
+        self.ctx.fillStyle = self.style.filterButtonActiveBackgroundColor;
+      } else if (cell.hovered && self.hovers.onFilterButton) {
+        self.ctx.fillStyle = self.style.filterButtonHoverBackgroundColor;
+      }
+      radiusRect(
+        posX,
+        posY,
+        self.style.filterButtonWidth,
+        self.style.filterButtonHeight,
+        self.style.filterButtonBorderRadius,
+      );
+      self.ctx.stroke();
+      self.ctx.fill();
+      drawFilterButtonArrow(posX, posY);
+      self.ctx.clip();
+      self.dispatchEvent('afterrenderfilterbutton', ev);
+      self.ctx.restore();
+    }
     function drawRowHeader(rowData, rowIndex, rowOrderIndex) {
       if (self.attributes.showRowHeaders) {
         x = 0;

package/lib/events/index.js

@@ -468,7 +468,18 @@ export default function (self) {
         self.hovers = {
           rowIndex: cell.rowIndex,
           columnIndex: cell.columnIndex,
+          onFilterButton: false,
         };
+        if (
+          cell.isFilterable &&
+          x > cell.x + cell.width - self.style.filterButtonWidth &&
+          x < cell.x + cell.width &&
+          y > cell.y + cell.height - self.style.filterButtonHeight &&
+          y < cell.y + cell.height
+        ) {
+          self.hovers.onFilterButton = true;
+          self.draw();
+        }
       }
       if (self.selecting || self.reorderObject) {
         delta = {
@@ -512,30 +523,57 @@ export default function (self) {
           ) {
             self.selectRow(cell.rowIndex, ctrl, null, true);
           } else if (self.attributes.selectionMode !== 'row') {
-            if (!self.dragAddToSelection && cell.rowIndex !== undefined) {
-              if (
-                self.selections[cell.rowIndex] &&
-                self.selections[cell.rowIndex].indexOf(cell.columnIndex) !== -1
-              ) {
-                self.selections[cell.rowIndex].splice(
-                  self.selections[cell.rowIndex].indexOf(cell.columnIndex),
-                  1,
-                );
+            if (cell.hovered && self.hovers.onFilterButton) {
+              if (cell.openedFilter) {
+                cell.openedFilter = false;
+                self.selectedFilterButton = {
+                  columnIndex: -1,
+                  rowIndex: -1,
+                };
+              } else {
+                self.selectedFilterButton.rowIndex = cell.rowIndex;
+                self.selectedFilterButton.columnIndex = cell.columnIndex;
+                self.contextmenuEvent(e, {
+                  x: cell.x + cell.width - self.style.filterButtonWidth,
+                  y: cell.y + cell.height,
+                  rect: { left: 0, top: 0 },
+                });
               }
+              self.draw();
+              return;
             } else {
-              self.selections[cell.rowIndex] =
-                self.selections[cell.rowIndex] || [];
-              if (
-                self.selections[cell.rowIndex].indexOf(cell.columnIndex) === -1
-              ) {
-                self.selections[cell.rowIndex].push(cell.columnIndex);
-                const event = {
-                  selections: self.selections,
-                  selectedData: self.getSelectedData(),
-                  selectedCells: self.getSelectedCells(),
-                  selectionBounds: self.getSelectionBounds(),
-                };
-                self.dispatchEvent('selectionchanged', event);
+              self.selectedFilterButton = {
+                columnIndex: -1,
+                rowIndex: -1,
+              };
+              if (self.hovers.onFilterButton) return;
+              if (!self.dragAddToSelection && cell.rowIndex !== undefined) {
+                if (
+                  self.selections[cell.rowIndex] &&
+                  self.selections[cell.rowIndex].indexOf(cell.columnIndex) !==
+                    -1
+                ) {
+                  self.selections[cell.rowIndex].splice(
+                    self.selections[cell.rowIndex].indexOf(cell.columnIndex),
+                    1,
+                  );
+                }
+              } else {
+                self.selections[cell.rowIndex] =
+                  self.selections[cell.rowIndex] || [];
+                if (
+                  self.selections[cell.rowIndex].indexOf(cell.columnIndex) ===
+                  -1
+                ) {
+                  self.selections[cell.rowIndex].push(cell.columnIndex);
+                  var event = {
+                    selections: self.selections,
+                    selectedData: self.getSelectedData(),
+                    selectedCells: self.getSelectedCells(),
+                    selectionBounds: self.getSelectionBounds(),
+                  };
+                  self.dispatchEvent('selectionchanged', event);
+                }
               }
             }
           }
@@ -548,13 +586,18 @@ export default function (self) {
             dragBounds.right !== self.selectionBounds.right) &&
           !ctrl
         ) {
-          self.selections = [];
+          if (!(cell.hovered && self.hovers.onFilterButton)) {
+            self.selections = [];
+          }
+          if (dragBounds.top === -1) {
+            dragBounds.top = 0;
+          }
           sBounds = dragBounds;
           if (self.attributes.selectionMode === 'row') {
             for (i = sBounds.top; i <= sBounds.bottom; i += 1) {
               self.selectRow(i, true, null, true);
             }
-          } else if (dragBounds.top !== -1) {
+          } else {
             self.selectArea(sBounds, true);
             if (sBounds.left == -1 && sBounds.top !== sBounds.bottom)
               self.isMultiRowsSelected = true;
@@ -632,7 +675,9 @@ export default function (self) {
         -1 &&
       !ctrl
     ) {
-      self.setActiveCell(i.columnIndex, i.rowIndex);
+      if (!self.hovers.onFilterButton) {
+        self.setActiveCell(i.columnIndex, i.rowIndex);
+      }
     }
     if (self.currentCell.context === 'cell') {
       if (self.currentCell.style === 'cornerCell') {
@@ -1173,8 +1218,12 @@ export default function (self) {
       !freeze &&
       !resize
     ) {
-      if (!(self.dragMode == 'row-reorder' && self.isMultiRowsSelected))
+      if (
+        !(self.dragMode == 'row-reorder' && self.isMultiRowsSelected) &&
+        !(self.currentCell.hovered && self.hovers.onFilterButton)
+      ) {
         self.selections = [];
+      }
     }
     if (self.dragStartObject.isGrid) {
       return;
@@ -1556,7 +1605,10 @@ export default function (self) {
       self.currentCell.style === 'cornerCell'
     ) {
       self.autosize();
-    } else if (['cell', 'activeCell'].indexOf(self.currentCell.style) !== -1) {
+    } else if (
+      ['cell', 'activeCell'].includes(self.currentCell.style) &&
+      !self.hovers.onFilterButton
+    ) {
       self.beginEditAt(self.currentCell.columnIndex, self.currentCell.rowIndex);
     }
   };

package/lib/intf.js

@@ -61,6 +61,14 @@ export default function (self, ctor) {
     trees: {},
   };
   self.selections = [];
+  self.filterable = {
+    rows: [],
+    columns: [],
+  };
+  self.selectedFilterButton = {
+    columnIndex: -1,
+    rowIndex: -1,
+  };
   self.hovers = {};
   self.attributes = {};
   self.style = {};
@@ -88,6 +96,7 @@ export default function (self, ctor) {
   self.eventNames = [
     'afterdraw',
     'afterrendercell',
+    'afterrenderfilterbutton',
     'attributechanged',
     'beforebeginedit',
     'beforecreatecellgrid',
@@ -95,6 +104,7 @@ export default function (self, ctor) {
     'beforeendedit',
     'beforerendercell',
     'beforerendercellgrid',
+    'beforerenderfilterbutton',
     'beginedit',
     'cellmouseout',
     'cellmouseover',
@@ -755,6 +765,7 @@ export default function (self, ctor) {
     self.intf.clearChangeLog = self.clearChangeLog;
     self.intf.gotoCell = self.gotoCell;
     self.intf.gotoRow = self.gotoRow;
+    self.intf.addButton = self.addButton;
     self.intf.getHeaderByName = self.getHeaderByName;
     self.intf.findColumnScrollLeft = self.findColumnScrollLeft;
     self.intf.findRowScrollTop = self.findRowScrollTop;
@@ -1534,6 +1545,9 @@ export default function (self, ctor) {
       if (!preventScrollEvent) {
         self.scroll();
       }
+      if (self.button) {
+        self.moveButtonPos();
+      }
     }
     function setScrollLeft(value, preventScrollEvent) {
       if (isNaN(value)) {
@@ -1552,6 +1566,9 @@ export default function (self, ctor) {
       if (!preventScrollEvent) {
         self.scroll();
       }
+      if (self.button) {
+        self.moveButtonPos();
+      }
     }
     self.scrollBox.toString = function () {
       return (

package/lib/main.js

@@ -9,6 +9,7 @@ import events from './events';
 import touch from './touch';
 import intf from './intf';
 import contextMenu from './contextMenu';
+import button from './button';
 import dom from './dom';
 import publicMethods from './publicMethods';
 
@@ -21,6 +22,7 @@ var modules = [
   touch,
   intf,
   contextMenu,
+  button,
   dom,
   publicMethods,
 ];

package/lib/publicMethods.js

@@ -206,6 +206,18 @@ export default function (self) {
       delete self.columnFilters[column];
     } else {
       self.columnFilters[column] = value;
+      if (self.attributes.showFilterInCell) {
+        self.filterable.rows.push(0);
+        self.orders.columns.forEach(function (value, index) {
+          self.filterable.columns.push(index);
+        });
+      }
+    }
+    if (!Object.keys(self.columnFilters).length) {
+      self.filterable = {
+        rows: [],
+        columns: [],
+      };
     }
     self.refresh();
   };
@@ -294,6 +306,31 @@ export default function (self) {
   self.gotoRow = function (y) {
     self.gotoCell(0, y);
   };
+  /**
+   * Add a button into the cell.
+   * @memberof canvasDatagrid
+   * @name addButton
+   * @method
+   * @param {number} columnIndex The column index of the cell to to add a button.
+   * @param {number} rowIndex The row index of the cell to to add a button.
+   * @param {object} offset Offset how far go away from cell.
+   * @param {object} items a list of items to add into button menu.
+   * @param {string} imgSrc icon path to add into button.
+   */
+  self.addButton = function (columnIndex, rowIndex, offset, items, imgSrc) {
+    var cells = self.visibleCells.filter(function (c) {
+      return c.sortColumnIndex === columnIndex && c.sortRowIndex === rowIndex;
+    });
+
+    self.attachButton(
+      {
+        top: cells[0].y + cells[0].height + offset.y,
+        left: cells[0].x + cells[0].width + offset.x,
+      },
+      items,
+      imgSrc,
+    );
+  };
   /**
    * Scrolls the cell at cell x, row y into view if it is not already.
    * @memberof canvasDatagrid

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "canvas-datagrid",
-  "version": "0.3.19",
+  "version": "0.3.20",
   "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",