canvas-datagrid 0.4.1 → 0.4.4

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 = [];
@@ -995,8 +1064,10 @@ export default function (self) {
           isGrid = header.type === 'canvas-datagrid',
           activeHeader =
             (self.orders.rows[self.activeCell.rowIndex] === rowOrderIndex ||
+              self.selectedRows.indexOf(rowOrderIndex) >= 0 ||
               self.orders.columns[self.activeCell.columnIndex] ===
-                headerIndex) &&
+                headerIndex ||
+              self.selectedColumns.indexOf(headerIndex) >= 0) &&
             (columnOrderIndex === -1 || rowOrderIndex === -1)
               ? isRowHeader
                 ? 'activeRowHeaderCell'
@@ -1369,6 +1440,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 +1468,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 +1640,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 +1670,14 @@ export default function (self) {
           -1,
           -1,
         );
+
+        if (
+          rowIndexOffsetByHiddenRows[0] &&
+          rowHeaderValue >= rowIndexOffsetByHiddenRows[0].from
+        ) {
+          const { plus } = rowIndexOffsetByHiddenRows.shift();
+          currentRowIndexOffset += plus;
+        }
       }
     }
     function drawHeaders() {
@@ -1593,7 +1820,7 @@ export default function (self) {
         }
       }
       //draw frozen columns
-      x = 0;
+      x = 1;
       if (self.attributes.showRowHeaders) {
         x += rowHeaderCellWidth;
       }
@@ -1675,12 +1902,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 +2111,7 @@ export default function (self) {
             leftX -= toggleHandlePadding + 1;
             if (containsEnd) rightX += toggleHandleSize;
           }
-          strokeLines(lineCoords);
+          drawLines(lineCoords);
           ctx.restore();
           pushToVisibleGroups(leftX, rightX);
         }
@@ -2054,7 +2289,7 @@ export default function (self) {
             // add more clickable area into `visibleGroups`
             if (containsEnd) bottomY += toggleHandleSize;
           }
-          strokeLines(lineCoords);
+          drawLines(lineCoords);
           ctx.restore();
           pushToVisibleGroups(topY, bottomY);
         }
@@ -2078,10 +2313,8 @@ export default function (self) {
       if (self.attributes.allowFreezingRows) {
         // HACK great, another stupid magic number.
         // Background will appear as a 0.5px artifact behind the row freeze bar without this hack
-        y +=
-          self.style.frozenMarkerBorderWidth +
-          self.style.frozenMarkerWidth -
-          0.4999999999;
+        if (y > columnHeaderCellHeight) y += self.style.frozenMarkerWidth;
+        y += self.style.frozenMarkerBorderWidth - 0.4999999999;
       }
       self.lastFrozenRowPixel = y;
     }
@@ -2208,6 +2441,7 @@ export default function (self) {
         self.ctx.lineWidth = self.style.reorderMarkerIndexBorderWidth;
         self.ctx.strokeStyle = self.style.reorderMarkerIndexBorderColor;
         if (
+          self.selectedRows.indexOf(self.reorderTarget.sortRowIndex) === -1 &&
           self.currentCell.rowIndex !== self.reorderObject.rowIndex &&
           self.currentCell.rowIndex > -1 &&
           self.currentCell.rowIndex < l
@@ -2221,10 +2455,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]],
-          );
+        if (selectedColumns) {
+          for (var k = 1; k < selectedColumns.length; k++) {
+            b.width += self.getColumnWidth(
+              self.orders.columns[selectedColumns[k]],
+            );
+          }
         }
         b.height = h;
         b.y = 0;
@@ -2237,8 +2473,11 @@ export default function (self) {
         self.ctx.lineWidth = self.style.reorderMarkerIndexBorderWidth;
         self.ctx.strokeStyle = self.style.reorderMarkerIndexBorderColor;
         if (
+          self.selectedColumns.indexOf(self.reorderTarget.sortColumnIndex) ===
+            -1 &&
           self.currentCell.sortColumnIndex !==
             self.reorderObject.sortColumnIndex &&
+          self.reorderTarget.columnIndex !== self.reorderObject.columnIndex &&
           self.currentCell.sortColumnIndex > -1 &&
           self.currentCell.sortColumnIndex < schema.length
         ) {
@@ -2359,81 +2598,172 @@ export default function (self) {
       self.ctx.restore();
     }
     function drawFrozenMarkers() {
-      if (self.dragStartObject !== undefined) return;
       var my = self.lastFrozenRowPixel - self.style.frozenMarkerWidth,
-        mx = self.lastFrozenColumnPixel - self.style.frozenMarkerBorderWidth,
+        mx = self.lastFrozenColumnPixel - self.style.frozenMarkerWidth,
         xHover =
           self.currentCell && self.currentCell.style === 'frozen-row-marker',
         yHover =
           self.currentCell && self.currentCell.style === 'frozen-column-marker';
+      let rowHeaderCellWidth = self.getRowHeaderCellWidth();
       self.ctx.lineWidth = self.style.frozenMarkerBorderWidth;
       if (self.attributes.allowFreezingColumns) {
-        self.ctx.fillStyle = yHover
-          ? self.style.frozenMarkerHoverColor
-          : self.style.frozenMarkerColor;
-        self.ctx.strokeStyle = yHover
-          ? self.style.frozenMarkerHoverBorderColor
-          : self.style.frozenMarkerBorderColor;
-        fillRect(mx, 0, self.style.frozenMarkerWidth, self.height);
-        strokeRect(mx, 0, self.style.frozenMarkerWidth, self.height);
-        self.visibleCells.unshift({
-          x: mx,
-          y: 0,
-          height: self.height,
-          width:
-            self.style.frozenMarkerWidth + self.style.frozenMarkerBorderWidth,
-          style: 'frozen-column-marker',
-        });
+        if (
+          !self.freezeMarkerPosition ||
+          (self.freezeMarkerPosition && self.dragMode === 'frozen-row-marker')
+        ) {
+          if (mx > self.style.rowHeaderCellWidth) {
+            self.ctx.fillStyle = self.style.frozenMarkerColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerBorderColor;
+            fillRect(mx, 0, self.style.frozenMarkerWidth, self.height);
+            strokeRect(mx, 0, self.style.frozenMarkerWidth, self.height);
+          }
+          self.ctx.fillStyle = yHover
+            ? self.style.frozenMarkerHoverColor
+            : self.style.frozenMarkerHeaderColor;
+          self.ctx.strokeStyle = yHover
+            ? self.style.frozenMarkerHoverBorderColor
+            : self.style.frozenMarkerHeaderColor;
+          fillRect(
+            mx,
+            0,
+            self.style.frozenMarkerWidth,
+            self.style.columnHeaderCellHeight,
+          );
+          strokeRect(
+            mx,
+            0,
+            self.style.frozenMarkerWidth,
+            self.style.columnHeaderCellHeight,
+          );
+        }
+
+        if (
+          !self.dragStartObject ||
+          (self.dragStartObject &&
+            self.dragStartObject.style !== 'rowHeaderCell')
+        ) {
+          self.visibleCells.unshift({
+            x: mx,
+            y: 0,
+            height: self.height,
+            width: self.style.frozenMarkerWidth, // + self.style.frozenMarkerBorderWidth,
+            style: 'frozen-column-marker',
+          });
+        }
       }
       if (self.attributes.allowFreezingRows) {
-        self.ctx.fillStyle = xHover
-          ? self.style.frozenMarkerHoverColor
-          : self.style.frozenMarkerColor;
-        self.ctx.strokeStyle = xHover
-          ? self.style.frozenMarkerHoverBorderColor
-          : self.style.frozenMarkerBorderColor;
-        fillRect(0, my, self.width, self.style.frozenMarkerWidth);
-        strokeRect(0, my, self.width, self.style.frozenMarkerWidth);
-        const height =
+        if (
+          !self.freezeMarkerPosition ||
+          (self.freezeMarkerPosition &&
+            self.dragMode === 'frozen-column-marker')
+        ) {
+          if (my > rowHeaderCellWidth) {
+            self.ctx.fillStyle = self.style.frozenMarkerColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerBorderColor;
+            fillRect(0, my, self.width, self.style.frozenMarkerWidth);
+            strokeRect(0, my, self.width, self.style.frozenMarkerWidth);
+          }
+          self.ctx.fillStyle = xHover
+            ? self.style.frozenMarkerHoverColor
+            : self.style.frozenMarkerHeaderColor;
+          self.ctx.strokeStyle = xHover
+            ? self.style.frozenMarkerHoverBorderColor
+            : self.style.frozenMarkerHeaderColor;
+          fillRect(0, my, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+          strokeRect(0, my, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+        }
+        var height =
           self.style.frozenMarkerWidth + self.style.frozenMarkerBorderWidth;
-        self.visibleCells.unshift({
-          x: 0,
-          y: my,
-          height,
-          width: self.width,
-          style: 'frozen-row-marker',
-        });
+        if (
+          !self.dragStartObject ||
+          (self.dragStartObject &&
+            self.dragStartObject.style !== 'columnHeaderCell')
+        ) {
+          self.visibleCells.unshift({
+            x: 0,
+            y: my,
+            height: height,
+            width: self.width,
+            style: 'frozen-row-marker',
+          });
+        }
         rowGroupsFrozenInfo = { y: my, h: height };
       }
       if (self.freezeMarkerPosition) {
         self.ctx.fillStyle = self.style.frozenMarkerActiveColor;
         self.ctx.strokeStyle = self.style.frozenMarkerActiveBorderColor;
         if (self.dragMode === 'frozen-column-marker') {
+          let posX = self.freezeMarkerPosition.x;
+          let nearCell = self.getCellAt(posX, 0);
+          if (self.freezeMarkerPosition.isGrab) posX = mx;
+          if (posX > rowHeaderCellWidth) {
+            let x =
+              nearCell.x -
+              self.style.frozenMarkerWidth -
+              self.style.frozenMarkerBorderWidth;
+            if (posX > x + nearCell.width / 2) x = x + nearCell.width;
+            self.ctx.fillStyle = self.style.frozenMarkerColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerBorderColor;
+            fillRect(x, 0, self.style.frozenMarkerWidth, self.height);
+            strokeRect(x, 0, self.style.frozenMarkerWidth, self.height);
+            self.ctx.fillStyle = self.style.frozenMarkerHeaderColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerHeaderColor;
+            fillRect(
+              x,
+              0,
+              self.style.frozenMarkerWidth,
+              self.style.columnHeaderCellHeight,
+            );
+            strokeRect(
+              x,
+              0,
+              self.style.frozenMarkerWidth,
+              self.style.columnHeaderCellHeight,
+            );
+          }
+          self.ctx.fillStyle = self.style.frozenMarkerActiveHeaderColor;
+          self.ctx.strokeStyle = self.style.frozenMarkerActiveBorderColor;
           fillRect(
-            self.freezeMarkerPosition.x,
+            posX,
             0,
             self.style.frozenMarkerWidth,
-            self.height,
+            self.style.columnHeaderCellHeight,
           );
           strokeRect(
-            self.freezeMarkerPosition.x,
+            posX,
             0,
             self.style.frozenMarkerWidth,
-            self.height,
+            self.style.columnHeaderCellHeight,
           );
+          self.ctx.fillStyle = self.style.frozenMarkerActiveColor;
+          fillRect(posX, 0, self.style.frozenMarkerWidth, self.height);
+          strokeRect(posX, 0, self.style.frozenMarkerWidth, self.height);
         } else {
-          fillRect(
-            0,
-            self.freezeMarkerPosition.y,
-            self.width,
-            self.style.frozenMarkerWidth,
-          );
-          strokeRect(
-            0,
-            self.freezeMarkerPosition.y,
-            self.width,
-            self.style.frozenMarkerWidth,
-          );
+          let posY = self.freezeMarkerPosition.y;
+          let nearCell = self.getCellAt(0, posY);
+          if (self.freezeMarkerPosition.isGrab) posY = my;
+          if (posY > self.style.columnHeaderCellHeight) {
+            let y =
+              nearCell.y -
+              self.style.frozenMarkerWidth -
+              self.style.frozenMarkerBorderWidth;
+            if (posY > y + nearCell.height / 2) y = y + nearCell.height;
+            self.ctx.fillStyle = self.style.frozenMarkerColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerBorderColor;
+            fillRect(0, y, self.width, self.style.frozenMarkerWidth);
+            strokeRect(0, y, self.width, self.style.frozenMarkerWidth);
+            self.ctx.fillStyle = self.style.frozenMarkerHeaderColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerHeaderColor;
+            fillRect(0, y, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+            strokeRect(0, y, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+          }
+          self.ctx.fillStyle = self.style.frozenMarkerActiveHeaderColor;
+          self.ctx.strokeStyle = self.style.frozenMarkerActiveBorderColor;
+          fillRect(0, posY, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+          strokeRect(0, posY, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+          self.ctx.fillStyle = self.style.frozenMarkerActiveColor;
+          fillRect(0, posY, self.width, self.style.frozenMarkerWidth);
+          strokeRect(0, posY, self.width, self.style.frozenMarkerWidth);
         }
       }
     }