canvas-datagrid 0.4.2 → 0.4.3

package/dist/types.d.ts

@@ -516,6 +516,18 @@ declare class canvasDatagrid {
      * @returns header with the selected name, or undefined.
      */
     static getHeaderByName(name: string): header;
+    /**
+     * Hide column/columns
+     */
+    static hideColumns: any;
+    /**
+     * Hide rows
+     */
+    static hideRows: any;
+    /**
+     * Unhide rows
+     */
+    static unhideRows: any;
     /**
      * Resizes a column to fit the longest value in the column. Call without a value to resize all columns.
      * Warning, can be slow on very large record sets (1m records ~3-5 seconds on an i7).
@@ -620,6 +632,12 @@ declare class canvasDatagrid {
      * @returns cell at the selected location.
      */
     static getVisibleCellByIndex(x: number, y: number): cell;
+    /**
+     * Get an unhide indicator at grid pixel coordinate x and y.
+     * @param x - Number of pixels from the left.
+     * @param y - Number of pixels from the top.
+     */
+    static getUnhideIndicator(x: number, y: number): void;
     /**
      * Get a column group at grid pixel coordinate x and y.
      * @param x - Number of pixels from the left.
@@ -2186,3 +2204,10 @@ declare namespace canvasDatagrid {
     }
 }
 
+/**
+ * Merge a new hidden row range into existed ranges array
+ * @param hiddenRowRanges - tuples: Array<[bgeinRowIndex, endRowIndex]>
+ * @param newRange - tuple: [beginRowIndex, endRowIndex]
+ */
+declare function mergeHiddenRowRanges(hiddenRowRanges: any[], newRange: number[]): boolean;
+

package/lib/contextMenu.js

@@ -538,8 +538,114 @@ export default function (self) {
       });
     }
   }
+
+  /**
+   * Return a tuple if the user selected contiguous columns, otherwise `null`.
+   * Info: Because the user may reorder the columns,
+   * the schemaIndex of the first item may be greater than the schemaIndex of the second item,
+   * but the columnIndex of the firs item must less than the columnIndex of the second item.
+   * @param {any[]} schema from `self.getSchema()`
+   * @returns {any[]} column schemas tuple (each schema has an additional field `schemaIndex`)
+   */
+  function getSelectedContiguousColumns(ev, schema) {
+    const memoKey = '__contiguousColumns';
+    if (Array.isArray(ev[memoKey]) || ev[memoKey] === null) return ev[memoKey];
+    ev[memoKey] = null;
+
+    if (!Array.isArray(self.selections) || self.selections.length === 0) return;
+    const selection = self.selections[0];
+    if (!selection || selection.length === 0) return;
+    for (let rowIndex = 0; rowIndex < self.viewData.length; rowIndex++) {
+      const row = self.viewData[rowIndex];
+      if (!row) continue;
+      const compare = self.selections[rowIndex];
+      if (!compare) return;
+      if (compare.length !== selection.length) return;
+      for (let i = 0; i < selection.length; i++)
+        if (selection[i] !== compare[i]) return;
+    }
+    selection.sort((a, b) => a - b);
+
+    /** @type {number[][]} */
+    const ranges = [];
+    let begin = selection[0];
+    let end = selection[0];
+    for (let i = 1; i < selection.length; i++) {
+      const orderIndex = selection[i];
+      if (orderIndex === end + 1) {
+        end = orderIndex;
+        continue;
+      }
+      ranges.push([begin, end]);
+      begin = orderIndex;
+      end = orderIndex;
+    }
+    ranges.push([begin, end]);
+
+    const currentOrderIndex = ev.cell.columnIndex;
+    const matchedRange = ranges.find(
+      (range) =>
+        currentOrderIndex >= range[0] &&
+        currentOrderIndex <= range[1] &&
+        range[0] !== range[1],
+    );
+    if (!matchedRange) return;
+
+    /** @type {number[]} orders[index] => columnIndex */
+    const orders = self.orders.columns;
+    if (!Array.isArray(orders)) return;
+
+    const matchedSchema = matchedRange.map((orderIndex) => {
+      const schemaIndex = orders[orderIndex];
+      const thisSchema = schema[schemaIndex];
+      return Object.assign({}, thisSchema, { orderIndex });
+    });
+    if (matchedSchema.findIndex((it) => !it) >= 0) return;
+    return (ev[memoKey] = matchedSchema);
+  }
+  /**
+   * @param {boolean} [allowOnlyOneRow]
+   * @returns {number[]} a rowIndex tuple. It can contains one row index or two row indexes.
+   */
+  function getSelectedContiguousRows(allowOnlyOneRow) {
+    let range = [];
+    let prev = -2;
+    let ok = true;
+    self.selections.forEach(function (row, index) {
+      if (!ok) return;
+      if (prev < -1) {
+        prev = index;
+        range[0] = index;
+        return;
+      }
+      if (index !== prev + 1 || !row || row.length === 0) {
+        ok = false;
+        return;
+      }
+      prev = index;
+      range[1] = index;
+    });
+    if (ok) {
+      if (range.length === 1) return allowOnlyOneRow ? range : null;
+      return range;
+    }
+  }
   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 ||
@@ -614,20 +720,30 @@ export default function (self) {
         const columnOrderIndex = e.cell.columnIndex;
         const columnIndex = self.orders.columns[columnOrderIndex];
 
+        const contiguousColumns = getSelectedContiguousColumns(e, 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()[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);
+            }
           },
         });
       }
@@ -689,6 +805,51 @@ export default function (self) {
         },
       });
     }
+
+    //#region hide rows
+    const canHideRows = !isSorting && e.cell.isRowHeader && e.cell.header;
+    if (canHideRows) {
+      const range = 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();
@@ -760,28 +921,13 @@ export default function (self) {
     const canUngroupColumns =
       self.attributes.allowGroupingColumns && e.cell.isColumnHeader;
     const canGroupByRows =
-      self.attributes.allowGroupingRows && e.cell.isRowHeader && e.cell.header;
+      !isSorting &&
+      self.attributes.allowGroupingRows &&
+      e.cell.isRowHeader &&
+      e.cell.header;
     const canUngroupRows =
       self.attributes.allowGroupingRows && e.cell.isRowHeader;
 
-    /**
-     * The value for storing the return value from `self.getSchema()`
-     * @type {any[]}
-     */
-    let schema;
-    /**
-     * A map between columnIndex and column data
-     * @type {Map<string,any>}
-     */
-    let columns;
-    const getColumnsMap = () => {
-      if (!columns) {
-        if (!schema) schema = self.getSchema();
-        columns = new Map(schema.map((_col) => [_col.columnIndex, _col]));
-      }
-      return columns;
-    };
-
     if (canGroupByColumns) {
       /** @type {number[]} */
       const groupIndexes = [];
@@ -863,23 +1009,7 @@ export default function (self) {
       }
     }
     if (canGroupByRows) {
-      let range = [];
-      let prev = -2;
-      let ok = true;
-      self.selections.forEach(function (row, index) {
-        if (!ok) return;
-        if (prev < -1) {
-          prev = index;
-          range[0] = index;
-          return;
-        }
-        if (index !== prev + 1 || !row || row.length === 0) {
-          ok = false;
-          return;
-        }
-        prev = index;
-        range[1] = index;
-      });
+      const range = getSelectedContiguousRows(false) || [];
       const rangeTitle = range
         .map((rowIndex) => {
           const index = self.getBoundRowIndexFromViewRowIndex(rowIndex);
@@ -888,7 +1018,6 @@ export default function (self) {
         })
         .join('-');
       if (
-        ok &&
         range.length === 2 &&
         self.isNewGroupRangeValid(self.groupedRows, range[0], range[1])
       ) {

package/lib/defaults.js

@@ -45,6 +45,10 @@ export default function (self) {
       ['filterFrozenRows', true],
       ['globalRowResize', false],
       ['hideColumnText', 'Hide %s'],
+      ['showUnhideColumnsIndicator', false],
+      ['showUnhideRowsIndicator', false],
+      ['showHideRow', 'Hide row %s'],
+      ['showHideRows', 'Hide rows %s'],
       ['hoverMode', 'cell'],
       ['keepFocusOnMouseOut', false],
       ['maxAutoCompleteItems', 200],
@@ -377,6 +381,10 @@ export default function (self) {
       ['treeArrowMarginTop', 6],
       ['treeArrowWidth', 13],
       ['treeGridHeight', 250],
+      ['unhideIndicatorColor', 'rgba(0, 0, 0, 1)'],
+      ['unhideIndicatorBackgroundColor', 'rgba(255, 255, 255, 1)'],
+      ['unhideIndicatorBorderColor', 'rgba(174, 193, 232, 1)'],
+      ['unhideIndicatorSize', 16],
       ['width', 'auto'],
     ],
   };

package/lib/draw.js

@@ -110,8 +110,9 @@ export default function (self) {
   }
   /**
    * @param {number[]} coords [x0,y0, x1,y1, x2,y2, ...]
+   * @param {boolean} [fill] fill the area that construct by these lines but not stroke
    */
-  function strokeLines(coords) {
+  function drawLines(coords, fill) {
     if (coords.length < 4) return;
     self.ctx.beginPath();
     self.ctx.moveTo(
@@ -123,7 +124,8 @@ export default function (self) {
       const y = coords[i + 1] + self.canvasOffsetTop;
       self.ctx.lineTo(x, y);
     }
-    self.ctx.stroke();
+    if (fill) self.ctx.fill();
+    else self.ctx.stroke();
   }
   /**
    * @param {number} x based-X (left-top)
@@ -136,8 +138,67 @@ export default function (self) {
     strokeRect(x, y, width, width);
     const cx = x + width * 0.5;
     const cy = y + width * 0.5;
-    strokeLines([x + width * 0.2, cy, x + width * 0.78, cy]);
-    if (collapsed) strokeLines([cx, y + width * 0.22, cx, y + width * 0.8]);
+    drawLines([x + width * 0.2, cy, x + width * 0.78, cy]);
+    if (collapsed) drawLines([cx, y + width * 0.22, cx, y + width * 0.8]);
+  }
+  /**
+   * @param {number} x
+   * @param {number} y
+   * @param {number} size
+   * @param {string} dir Direction of the triangle, one of the 't','b','l' and 'r'
+   * @param {boolean} [active]
+   */
+  function drawUnhideIndicator(x, y, size, dir, active) {
+    const minPadding = size * 0.2;
+    const maxPadding = size * 0.3;
+    /** The long edge width of the triangle */
+    const longEdge = size - 2 * minPadding;
+    /** The median width of the triangle */
+    const median = size - 2 * maxPadding;
+    const halfLongEdge = longEdge * 0.5;
+    let x0, y0;
+    let coords, borderCoords;
+    switch (dir) {
+      case 'r':
+        x0 = x + maxPadding;
+        y0 = y + minPadding;
+        borderCoords = [x, y, x + size, y, x + size, y + size, x, y + size];
+        coords = [x0, y0, x0, y0 + longEdge, x0 + median, y0 + halfLongEdge];
+        break;
+      case 'l':
+        x0 = x + size - maxPadding;
+        y0 = y + minPadding;
+        borderCoords = [x + size, y, x, y, x, y + size, x + size, y + size];
+        coords = [x0, y0, x0, y0 + longEdge, x0 - median, y0 + halfLongEdge];
+        break;
+      case 't':
+        x0 = x + minPadding;
+        y0 = y + size - maxPadding;
+        borderCoords = [x, y + size, x, y, x + size, y, x + size, y + size];
+        coords = [x0, y0, x0 + longEdge, y0, x0 + halfLongEdge, y0 - median];
+        break;
+      case 'b':
+        x0 = x + minPadding;
+        y0 = y + maxPadding;
+        borderCoords = [x, y, x, y + size, x + size, y + size, x + size, y];
+        coords = [x0, y0, x0 + longEdge, y0, x0 + halfLongEdge, y0 + median];
+        break;
+    }
+
+    if (active) {
+      self.ctx.strokeStyle = self.style.unhideIndicatorBorderColor;
+      self.ctx.lineWidth = 2;
+      drawLines(borderCoords);
+
+      self.ctx.fillStyle = self.style.unhideIndicatorBackgroundColor;
+      let offset = dir === 'r' || dir === 'b' ? 1 : 0;
+      if (dir === 'l' || dir === 'r')
+        fillRect(x - offset, y, size + offset, size);
+      else fillRect(x, y - offset, size, size + offset);
+    }
+
+    self.ctx.fillStyle = self.style.unhideIndicatorColor;
+    drawLines(coords, true);
   }
   function drawOrderByArrow(x, y) {
     var mt = self.style.columnHeaderOrderByArrowMarginTop * self.scale,
@@ -719,7 +780,15 @@ export default function (self) {
       columnGroupsRectInfo = {},
       collapsedColumnGroups = self.getCollapsedColumnGroups(),
       collapsedRowGroups = self.getCollapsedRowGroups(),
-      cellHeight = self.style.cellHeight;
+      cellHeight = self.style.cellHeight,
+      currentRowIndexOffset = 0,
+      /** @type {Array<{from:number,plus:number}>} */
+      rowIndexOffsetByHiddenRows = self.hiddenRowRanges
+        .map((range) => ({
+          from: range[0],
+          plus: range[1] - range[0] + 1,
+        }))
+        .sort((a, b) => a.from - b.from);
     drawCount += 1;
     p = performance.now();
     self.visibleRowHeights = [];
@@ -1369,6 +1438,19 @@ export default function (self) {
                   group.to === cell.boundRowIndex,
               ) >= 0;
           }
+          // We don't treat the row index difference from hidden rows as the row gap.
+          if (hasRowGap && self.hiddenRowRanges.length > 0) {
+            for (let i = 0; i < self.hiddenRowRanges.length; i++) {
+              const [beginRowIndex, endRowIndex] = self.hiddenRowRanges[i];
+              if (
+                cell.boundRowIndex === endRowIndex + 1 &&
+                previousRowNumber === beginRowIndex - 1
+              ) {
+                hasRowGap = false;
+                break;
+              }
+            }
+          }
 
           if (hasRowGap) {
             const barHeight = self.style.rowHeaderCellRowNumberGapHeight;
@@ -1384,9 +1466,141 @@ export default function (self) {
           }
         }
 
+        //#region draw unhide indicator for column headers
+        if (isColumnHeader && self.attributes.showUnhideColumnsIndicator) {
+          const hovered = self.hovers.unhideIndicator;
+          const size = self.style.unhideIndicatorSize;
+          const cellX = x;
+          const topY = cell.y + Math.max(0.5 * (cell.height - size), 0);
+
+          const isActive = (orderIndex) =>
+            hovered &&
+            (hovered.dir === 'l' || hovered.dir === 'r') &&
+            orderIndex >= hovered.orderIndex0 &&
+            orderIndex <= hovered.orderIndex1;
+          const isHiddenColumn = (columnIndex) =>
+            columnIndex >= 0 &&
+            schema[columnIndex] &&
+            schema[columnIndex].hidden;
+
+          let orderIndex0, orderIndex1;
+          const drawIndicator = (leftX, dir, active) => {
+            self.visibleUnhideIndicators.push({
+              x: leftX - 1,
+              y: topY - 1,
+              x2: leftX + size + 2,
+              y2: topY + size + 2,
+              orderIndex0,
+              orderIndex1,
+              dir,
+            });
+            if (!active) {
+              const line = cell.text && cell.text.lines && cell.text.lines[0];
+              if (line) {
+                const iconsWidth = orderByArrowSize + treeArrowSize;
+                const lineX0 = iconsWidth > 0 ? iconsWidth : line.x;
+                const lineX1 = line.x + line.width;
+                if (leftX + size >= lineX0 && leftX <= lineX1) return;
+              }
+            }
+            drawUnhideIndicator(leftX, topY, size, dir, active);
+          }; // end of drawIndicator
+
+          let orderIndexPtr = columnOrderIndex - 1;
+          const prevColumnIndex = self.orders.columns[orderIndexPtr];
+          if (isHiddenColumn(prevColumnIndex)) {
+            const active = isActive(prevColumnIndex);
+            orderIndex0 = orderIndexPtr;
+            orderIndex1 = orderIndexPtr;
+            while (--orderIndexPtr >= 0) {
+              if (isHiddenColumn(self.orders.columns[orderIndexPtr]))
+                orderIndex0 = orderIndexPtr;
+              else break;
+            }
+            drawIndicator(cellX, 'r', active);
+          }
+
+          orderIndexPtr = columnOrderIndex + 1;
+          const nextColumnIndex = self.orders.columns[orderIndexPtr];
+          if (isHiddenColumn(nextColumnIndex)) {
+            const active = isActive(nextColumnIndex);
+            orderIndex0 = orderIndexPtr;
+            orderIndex1 = orderIndexPtr;
+            while (++orderIndexPtr < self.orders.columns.length) {
+              if (isHiddenColumn(self.orders.columns[orderIndexPtr]))
+                orderIndex1 = orderIndexPtr;
+              else break;
+            }
+            const indicatorX = x + cell.width - size;
+            drawIndicator(indicatorX, 'l', active);
+          }
+        }
+        //#endregion draw unhide indicator for column headers
+
+        //#region draw unhide indicator for row headers
+        if (
+          isRowHeader &&
+          self.attributes.showUnhideRowsIndicator &&
+          self.hiddenRowRanges.length > 0
+        ) {
+          // Leo's comment:
+          // from the first row to the last row, `rowIndex` is from 0 to the count of rows
+          // but `boundRowIndex` can be disordered if there are any ordered columns or filtered columns
+          // Like this statement:
+          // console.log(rowIndex, cell.boundRowIndex, cell.formattedValue);
+          // can output the result like this:
+          // 0 1 '2'
+          // 1 3 '4'
+          const hovered = self.hovers.unhideIndicator;
+          const size = self.style.unhideIndicatorSize;
+          const leftX = cell.x + cell.width - size - 2;
+          const cellY = y;
+          const topIndicators = {};
+          const bottomIndicators = {};
+          self.hiddenRowRanges.forEach((it) => {
+            topIndicators[it[0] - 1] = it;
+            bottomIndicators[it[1] + 1] = it;
+          });
+
+          const rowIndex = cell.rowIndex + currentRowIndexOffset;
+          const isActive = () =>
+            hovered &&
+            (hovered.dir === 't' || hovered.dir === 'b') &&
+            rowIndex >= hovered.orderIndex0 - 1 &&
+            rowIndex <= hovered.orderIndex1 + 1;
+
+          let orderIndex0, orderIndex1;
+          const drawIndicator = (topY, dir, active) => {
+            self.visibleUnhideIndicators.push({
+              x: leftX - 1,
+              y: topY - 1,
+              x2: leftX + size + 2,
+              y2: topY + size + 2,
+              orderIndex0,
+              orderIndex1,
+              dir,
+            });
+            drawUnhideIndicator(leftX, topY, size, dir, active);
+          }; // end of drawIndicator
+
+          let matched = topIndicators[rowIndex];
+          if (matched) {
+            const indicatorY = cellY + cell.height - size;
+            [orderIndex0, orderIndex1] = matched;
+            drawIndicator(indicatorY, 't', isActive());
+          }
+          matched = bottomIndicators[rowIndex];
+          if (matched) {
+            const indicatorY = cellY;
+            [orderIndex0, orderIndex1] = matched;
+            drawIndicator(indicatorY, 'b', isActive());
+          }
+        }
+        //#endregion draw unhide indicator for row headers
+
         x += cell.width + (bc ? 0 : self.style.cellBorderWidth);
         return cell.width;
-      };
+      }; // end of drawEach
     }
     function drawFilterButton(cell, ev) {
       var posX = cell.x + cell.width - self.style.filterButtonWidth - 1;
@@ -1424,17 +1638,20 @@ export default function (self) {
         // as it is in the unfiltered data, instead of simply the viewed
         // row index + 1. If rowIndex > viewData.length, it's a new row
         // added to the end, and we want to render that new row's number
-        const filteredRowNumber =
-          self.viewData && rowIndex < self.viewData.length
-            ? self.getBoundRowIndexFromViewRowIndex(rowIndex) + 1
-            : self.originalData
+        let filteredRowNumber;
+        if (self.viewData && rowIndex < self.viewData.length)
+          filteredRowNumber =
+            self.getBoundRowIndexFromViewRowIndex(rowIndex) + 1;
+        else
+          filteredRowNumber = self.originalData
             ? self.originalData.length + 1
             : rowOrderIndex + 1;
 
-        const rowHeaderValue =
+        let rowHeaderValue =
           self.hasActiveFilters() || self.hasCollapsedRowGroup()
             ? filteredRowNumber
             : rowIndex + 1;
+        rowHeaderValue += currentRowIndexOffset;
 
         const rowHeaderCell = { rowHeaderCell: rowHeaderValue };
         const headerDescription = {
@@ -1451,6 +1668,14 @@ export default function (self) {
           -1,
           -1,
         );
+
+        if (
+          rowIndexOffsetByHiddenRows[0] &&
+          rowHeaderValue >= rowIndexOffsetByHiddenRows[0].from
+        ) {
+          const { plus } = rowIndexOffsetByHiddenRows.shift();
+          currentRowIndexOffset += plus;
+        }
       }
     }
     function drawHeaders() {
@@ -1675,12 +1900,20 @@ export default function (self) {
       schema = self.getSchema();
       self.visibleCells = [];
       self.visibleGroups = [];
+      self.visibleUnhideIndicators = [];
       self.canvasOffsetTop = self.isChildGrid ? self.parentNode.offsetTop : 0.5;
       self.canvasOffsetLeft = self.isChildGrid
         ? self.parentNode.offsetLeft
         : -0.5;
       h = self.height;
       w = self.width;
+
+      // patch for first row being hidden
+      const firstRowIndexOffset = rowIndexOffsetByHiddenRows[0];
+      if (firstRowIndexOffset && firstRowIndexOffset.from === 0) {
+        currentRowIndexOffset = firstRowIndexOffset.plus;
+        rowIndexOffsetByHiddenRows.shift();
+      }
     }
     function drawBackground() {
       radiusRect(0, 0, w, h, 0);
@@ -1876,7 +2109,7 @@ export default function (self) {
             leftX -= toggleHandlePadding + 1;
             if (containsEnd) rightX += toggleHandleSize;
           }
-          strokeLines(lineCoords);
+          drawLines(lineCoords);
           ctx.restore();
           pushToVisibleGroups(leftX, rightX);
         }
@@ -2054,7 +2287,7 @@ export default function (self) {
             // add more clickable area into `visibleGroups`
             if (containsEnd) bottomY += toggleHandleSize;
           }
-          strokeLines(lineCoords);
+          drawLines(lineCoords);
           ctx.restore();
           pushToVisibleGroups(topY, bottomY);
         }