canvas-datagrid 0.3.18 → 0.3.22

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;
@@ -601,15 +629,29 @@ export default function (self) {
         m = self.style.scrollBarBoxMargin * 2;
       self.ctx.strokeStyle = self.style.scrollBarBorderColor;
       self.ctx.lineWidth = self.style.scrollBarBorderWidth;
-      en.horizontalBox.x =
-        rowHeaderCellWidth +
-        self.style.scrollBarBoxMargin +
-        (en.horizontalBar.width - self.scrollBox.scrollBoxWidth) *
-          (self.scrollBox.scrollLeft / self.scrollBox.scrollWidth);
+      if (self.frozenColumn > 0) {
+        en.horizontalBox.x =
+          rowHeaderCellWidth +
+          self.style.scrollBarBoxMargin +
+          self.scrollCache.x[self.frozenColumn - 1] +
+          (en.horizontalBar.width -
+            self.scrollCache.x[self.frozenColumn - 1] -
+            self.scrollBox.scrollBoxWidth) *
+            (self.scrollBox.scrollLeft / self.scrollBox.scrollWidth);
+      } else {
+        en.horizontalBox.x =
+          rowHeaderCellWidth +
+          self.style.scrollBarBoxMargin +
+          (en.horizontalBar.width - self.scrollBox.scrollBoxWidth) *
+            (self.scrollBox.scrollLeft / self.scrollBox.scrollWidth);
+      }
       en.verticalBox.y =
         columnHeaderCellHeight +
         self.style.scrollBarBoxMargin +
-        (en.verticalBar.height - self.scrollBox.scrollBoxHeight) *
+        self.scrollCache.y[self.frozenRow] +
+        (en.verticalBar.height -
+          self.scrollBox.scrollBoxHeight -
+          self.scrollCache.y[self.frozenRow]) *
           (self.scrollBox.scrollTop / self.scrollBox.scrollHeight);
       if (self.scrollBox.horizontalBarVisible) {
         self.ctx.fillStyle = self.style.scrollBarBackgroundColor;
@@ -802,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] &&
@@ -810,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,
@@ -901,6 +949,8 @@ export default function (self) {
           isColumnHeader: isColumnHeader,
           isColumnHeaderCellCap: isColumnHeaderCellCap,
           isRowHeader: isRowHeader,
+          isFilterable: isFilterable,
+          openedFilter: openedFilter,
           rowOpen: rowOpen,
           header: header,
 
@@ -1100,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
@@ -1140,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;
@@ -1520,6 +1602,10 @@ export default function (self) {
       self.ctx.lineWidth = self.style.reorderMarkerBorderWidth;
       self.ctx.strokeStyle = self.style.reorderMarkerBorderColor;
       if (self.dragMode === 'row-reorder') {
+        for (var k = 0; k < self.selections.length; k++) {
+          if (!self.selections[k] || k == self.reorderObject.rowIndex) continue;
+          b.height += self.getRowHeight(k);
+        }
         b.width = w;
         b.x = 0;
         m.width = w;
@@ -1542,6 +1628,12 @@ export default function (self) {
           );
         }
       } else if (self.dragMode === 'column-reorder' && self.reorderObject) {
+        var selectedColumns = self.selections[0];
+        for (var k = 1; k < selectedColumns.length; k++) {
+          b.width += self.getColumnWidth(
+            self.orders.columns[selectedColumns[k]],
+          );
+        }
         b.height = h;
         b.y = 0;
         m.height = h;