canvas-datagrid 0.4.5 → 0.4.6

package/lib/draw.js

@@ -2,6 +2,8 @@
 /*globals XMLSerializer: false, define: true, Blob: false, MutationObserver: false, requestAnimationFrame: false, performance: false, btoa: false*/
 'use strict';
 
+import { isCellSelected } from './selections/util';
+
 export default function (self) {
   var perfCounters = [],
     cachedImagesDrawn = false,
@@ -995,21 +997,23 @@ export default function (self) {
       propPrefix,
       offsetPoint,
     ) {
-      offsetPoint = offsetPoint || { x: 0, y: 0 };
       cell.selectionBorder = '';
-      if (
-        !cell.isRowHeader &&
-        self.selections[cell.rowIndex + -offsetPoint.y] &&
-        self.selections[cell.rowIndex + -offsetPoint.y].indexOf(
-          cell.columnIndex + -offsetPoint.x,
-        ) !== -1
-      ) {
+      // TODO: optimize it by `getSelectionStateFromCells`
+      const isSelected = offsetPoint
+        ? (row, col) =>
+            isCellSelected(
+              self.selections,
+              row - offsetPoint.y,
+              col - offsetPoint.x,
+            )
+        : (row, col) => isCellSelected(self.selections, row, col);
+      const lastColumnIndex = Math.max(schema.length - 1, 0);
+      const lastRowIndex = Math.max(viewData.length - 1, 0);
+      const { isRowHeader, rowIndex, columnIndex } = cell;
+
+      if (!isRowHeader && isSelected(rowIndex, columnIndex)) {
         if (
-          (!self.selections[cell.rowIndex - 1 + -offsetPoint.y] ||
-            self.selections[cell.rowIndex - 1 + -offsetPoint.y].indexOf(
-              cell.columnIndex + -offsetPoint.x,
-            ) === -1 ||
-            cell.rowIndex === 0) &&
+          (!isSelected(rowIndex - 1, columnIndex) || rowIndex === 0) &&
           !cell.isHeader
         ) {
           drawArray.push([cell, 't']);
@@ -1017,32 +1021,21 @@ export default function (self) {
           cell[propPrefix + 'Border'] += 't';
         }
         if (
-          !self.selections[cell.rowIndex + 1 + -offsetPoint.y] ||
-          self.selections[cell.rowIndex + 1 + -offsetPoint.y].indexOf(
-            cell.columnIndex + -offsetPoint.x,
-          ) === -1
+          rowIndex >= lastRowIndex ||
+          !isSelected(rowIndex + 1, columnIndex)
         ) {
           drawArray.push([cell, 'b']);
           cell[propPrefix + 'BorderBottom'] = true;
           cell[propPrefix + 'Border'] += 'b';
         }
-        if (
-          !self.selections[cell.rowIndex + -offsetPoint.y] ||
-          cell.columnIndex === 0 ||
-          self.selections[cell.rowIndex + -offsetPoint.y].indexOf(
-            cell.columnIndex - 1 + -offsetPoint.x,
-          ) === -1
-        ) {
+        if (columnIndex === 0 || !isSelected(rowIndex, columnIndex - 1)) {
           drawArray.push([cell, 'l']);
           cell[propPrefix + 'BorderLeft'] = true;
           cell[propPrefix + 'Border'] += 'l';
         }
         if (
-          !self.selections[cell.rowIndex + -offsetPoint.y] ||
-          cell.columnIndex === schema.length ||
-          self.selections[cell.rowIndex + -offsetPoint.y].indexOf(
-            cell.columnIndex + 1 + -offsetPoint.x,
-          ) === -1
+          columnIndex >= lastColumnIndex ||
+          !isSelected(rowIndex, columnIndex + 1)
         ) {
           drawArray.push([cell, 'r']);
           cell[propPrefix + 'BorderRight'] = true;
@@ -1051,6 +1044,10 @@ export default function (self) {
       }
     }
     function drawCell(rowData, rowOrderIndex, rowIndex) {
+      const isActiveRowHeader =
+        self.orders.rows[self.activeCell.rowIndex] === rowOrderIndex ||
+        self.isRowSelected(rowOrderIndex);
+
       return function drawEach(header, headerIndex, columnOrderIndex) {
         if (header.hidden) {
           return 0;
@@ -1066,9 +1063,12 @@ export default function (self) {
             self.filterable.rows.includes(rowIndex) &&
             self.filterable.columns.includes(headerIndex),
           wrap = self.style.cellWhiteSpace !== 'nowrap',
-          selected =
-            self.selections[rowOrderIndex] &&
-            self.selections[rowOrderIndex].indexOf(columnOrderIndex) !== -1,
+          // TODO: optimize it by `getSelectionStateFromCells`
+          selected = isCellSelected(
+            self.selections,
+            rowOrderIndex,
+            columnOrderIndex,
+          ),
           hovered =
             self.hovers.rowIndex === rowOrderIndex &&
             (self.attributes.hoverMode === 'row' ||
@@ -1082,17 +1082,6 @@ export default function (self) {
           isColumnHeaderCellCap = cellStyle === 'columnHeaderCellCap',
           rawValue = rowData ? rowData[header.name] : undefined,
           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 ||
-              self.selectedColumns.indexOf(headerIndex) >= 0) &&
-            (columnOrderIndex === -1 || rowOrderIndex === -1)
-              ? isRowHeader
-                ? 'activeRowHeaderCell'
-                : 'activeColumnHeaderCell'
-              : false,
           val,
           f = self.formatters[header.type || 'string'],
           orderByArrowSize = 0,
@@ -1103,6 +1092,19 @@ export default function (self) {
             row: rowData,
             header: header,
           };
+
+        const isActiveColumnHeader =
+          self.orders.columns[self.activeCell.columnIndex] === headerIndex ||
+          self.isColumnSelected(self.activeCell.viewColumnIndex);
+        let activeHeader = false;
+        if (
+          (isActiveColumnHeader || isActiveRowHeader) &&
+          (columnOrderIndex === -1 || rowOrderIndex === -1)
+        )
+          activeHeader = isRowHeader
+            ? 'activeRowHeaderCell'
+            : 'activeColumnHeaderCell';
+
         if (isColumnHeaderCellCap) {
           cellWidth = w - x;
         }
@@ -2447,10 +2449,7 @@ 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.height = self.getSelectedRowsHeight();
         b.width = w;
         b.x = 0;
         m.width = w;
@@ -2461,7 +2460,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.isRowSelected(self.reorderTarget.sortRowIndex) &&
           self.currentCell.rowIndex !== self.reorderObject.rowIndex &&
           self.currentCell.rowIndex > -1 &&
           self.currentCell.rowIndex < l
@@ -2474,14 +2473,7 @@ export default function (self) {
           );
         }
       } else if (self.dragMode === 'column-reorder' && self.reorderObject) {
-        var selectedColumns = self.selections[0];
-        if (selectedColumns) {
-          for (var k = 1; k < selectedColumns.length; k++) {
-            b.width += self.getColumnWidth(
-              self.orders.columns[selectedColumns[k]],
-            );
-          }
-        }
+        b.width = self.getSelectedColumnsWidth();
         b.height = h;
         b.y = 0;
         m.height = h;
@@ -2493,8 +2485,7 @@ 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.isColumnSelected(self.reorderTarget.sortColumnIndex) &&
           self.currentCell.sortColumnIndex !==
             self.reorderObject.sortColumnIndex &&
           self.reorderTarget.columnIndex !== self.reorderObject.columnIndex &&
@@ -2510,6 +2501,31 @@ export default function (self) {
         }
       }
     }
+    function drawResizeMarkers() {
+      if (
+        !self.attributes.resizeAfterDragged ||
+        !self.draggingItem ||
+        !self.pendingDragResize ||
+        (self.dragMode != 'ew-resize' && self.dragMode != 'ns-resize')
+      ) {
+        return;
+      }
+
+      const resizingRow = self.dragMode == 'ns-resize';
+      const height = resizingRow ? self.style.resizeMarkerSize : self.height;
+      const width = resizingRow ? self.width : self.style.resizeMarkerSize;
+      const minX =
+        self.dragStart.x -
+        (self.resizingStartingWidth - self.style.minColumnWidth);
+      const minY =
+        self.dragStart.y -
+        (self.resizingStartingHeight - self.style.minRowHeight);
+      const x = resizingRow ? 0 : Math.max(self.pendingDragResize.x, minX);
+      const y = !resizingRow ? 0 : Math.max(self.pendingDragResize.y, minY);
+
+      self.ctx.fillStyle = self.style.resizeMarkerColor;
+      fillRect(x, y, width, height);
+    }
     function drawBorder() {
       self.ctx.lineWidth = self.style.gridBorderWidth;
       self.ctx.strokeStyle = self.style.gridBorderColor;
@@ -3064,6 +3080,7 @@ export default function (self) {
     drawSelectionHandles();
     drawReorderMarkers();
     drawMoveMarkers();
+    drawResizeMarkers();
     drawBorder();
     drawSelectionBorders();
     drawScrollBars();