canvas-datagrid 0.4.3 → 0.4.4

package/lib/events/index.js

@@ -386,9 +386,17 @@ export default function (self) {
     );
     // set canvas drawing related items
     if (!self.isChildGrid) {
-      self.canvas.width = self.width * ratio;
-      self.canvas.height = self.height * ratio;
-      self.ctx.scale(ratio, ratio);
+      const newWidth = self.width * ratio;
+      const newHeight = self.height * ratio;
+      // We need to check is settings size to canvas necessary,
+      // because settings the canvas'size will cause the canvas and its state be cleared
+      // even if the size is the same.
+      // Notes: Please don't call `self.resize()` without a subsequent call to `self.draw()`
+      if (self.canvas.width !== newWidth || self.canvas.height !== newHeight) {
+        self.canvas.width = newWidth;
+        self.canvas.height = newHeight;
+        self.ctx.scale(ratio, ratio);
+      }
     }
     // resize any open dom elements (input/textarea)
     self.resizeEditInput();
@@ -616,6 +624,9 @@ export default function (self) {
           dragBounds.top = -1;
           dragBounds.bottom = self.viewData.length - 1;
           if (dragBounds.left < 0) dragBounds.left = 0;
+          if (dragBounds.left != dragBounds.right)
+            self.isMultiColumnsSelected = true;
+          else self.isMultiRowsSelected = false;
         }
 
         if (
@@ -729,6 +740,8 @@ export default function (self) {
         ) {
           if (!(cell.hovered && self.hovers.onFilterButton)) {
             self.selections = [];
+            self.selectedRows = [];
+            self.selectedColumns = [];
           }
           if (dragBounds.top === -1) {
             dragBounds.top = 0;
@@ -740,8 +753,13 @@ export default function (self) {
             }
           } else {
             self.selectArea(sBounds, true);
-            if (sBounds.left == -1 && sBounds.top !== sBounds.bottom)
+            self.activeCell.rowIndex = sBounds.top;
+            self.activeCell.columnIndex = sBounds.left;
+            if (sBounds.left == -1 && sBounds.top !== sBounds.bottom) {
+              self.activeCell.columnIndex = 0;
               self.isMultiRowsSelected = true;
+              self.isMultiColumnsSelected = false;
+            }
           }
         }
 
@@ -981,12 +999,8 @@ export default function (self) {
     }
 
     self.resize();
-    document.body.removeEventListener(
-      'mousemove',
-      self.dragResizeColumn,
-      false,
-    );
-    document.body.removeEventListener('mouseup', self.stopDragResize, false);
+    window.removeEventListener('mousemove', self.dragResizeColumn, false);
+    window.removeEventListener('mouseup', self.stopDragResize, false);
     self.setStorageData();
     self.draw(true);
     self.ignoreNextClick = true;
@@ -1093,7 +1107,7 @@ export default function (self) {
     if (document.exitPointerLock) {
       document.exitPointerLock();
     }
-    document.removeEventListener('mousemove', self.scrollGrid, false);
+    window.removeEventListener('mousemove', self.scrollGrid, false);
   };
   self.dragReorder = function (e) {
     var pos,
@@ -1111,10 +1125,7 @@ export default function (self) {
       return;
     }
     if ((e.ctrlKey || e.metaKey || e.shiftKey) && self.reorderObject) {
-      if (
-        self.dragMode === 'column-reorder' &&
-        !self.isMultiColumnsSelected(self.draggingItem.header.index)
-      ) {
+      if (self.dragMode === 'column-reorder' && !self.isMultiColumnsSelected) {
         self.selectColumn(self.draggingItem.header.index, false, false);
       }
     }
@@ -1138,6 +1149,11 @@ export default function (self) {
           -1,
           self.activeCell.rowIndex,
         );
+      if (self.isMultiColumnsSelected)
+        self.reorderObject = self.getVisibleCellByIndex(
+          self.activeCell.columnIndex,
+          -1,
+        );
       if (!self.reorderObject) return;
       self.reorderTarget = self.currentCell;
       self.reorderObject.dragOffset = {
@@ -1164,8 +1180,8 @@ export default function (self) {
         'row-reorder': 'rowIndex',
         'column-reorder': 'sortColumnIndex',
       }[self.dragMode];
-    document.body.removeEventListener('mousemove', self.dragReorder, false);
-    document.body.removeEventListener('mouseup', self.stopDragReorder, false);
+    window.removeEventListener('mousemove', self.dragReorder, false);
+    window.removeEventListener('mouseup', self.stopDragReorder, false);
     if (
       self.reorderObject &&
       self.reorderTarget &&
@@ -1188,23 +1204,34 @@ export default function (self) {
       tIndex = cr[self.dragMode].indexOf(self.reorderTarget[i]);
       if (self.dragMode === 'column-reorder') {
         var sortColumnIndices = [];
-        var seletedColumnIndices = [];
+        var selectedColumnIndices = [];
         if (self.selections[0]) {
+          oIndex = self.selections[0][0];
           self.selections[0].forEach(function (value) {
             sortColumnIndices.push(self.orders.columns[value]);
           });
         }
         var deleteCount = sortColumnIndices.length;
-        cr[self.dragMode].splice(oIndex, deleteCount);
-        if (tIndex > oIndex) tIndex = tIndex - (deleteCount - 1);
-        for (var i = 0; i < sortColumnIndices.length; i++) {
-          seletedColumnIndices.push(tIndex + i);
-          cr[self.dragMode].splice(tIndex + i, 0, sortColumnIndices[i]);
+        if (
+          tIndex < oIndex ||
+          (tIndex > oIndex && Math.abs(tIndex - oIndex) >= deleteCount)
+        ) {
+          cr[self.dragMode].splice(oIndex, deleteCount);
+          if (tIndex > oIndex) tIndex = tIndex - (deleteCount - 1);
+
+          self.selectedColumns = [];
+          for (var i = 0; i < sortColumnIndices.length; i++) {
+            if (i === 0) self.activeCell.columnIndex = tIndex;
+            selectedColumnIndices.push(tIndex + i);
+            self.selectedColumns.push(sortColumnIndices[i]);
+            cr[self.dragMode].splice(tIndex + i, 0, sortColumnIndices[i]);
+          }
+
+          self.orders.columns = cr[self.dragMode];
+          self.viewData.forEach(function (row, rowIndex) {
+            self.selections[rowIndex] = selectedColumnIndices;
+          });
         }
-        self.orders.columns = cr[self.dragMode];
-        self.viewData.forEach(function (row, rowIndex) {
-          self.selections[rowIndex] = seletedColumnIndices;
-        });
       } else {
         var selectedRows = [];
         self.selections.forEach(function (row, rowIndex) {
@@ -1213,13 +1240,21 @@ export default function (self) {
             odata.push(self.viewData[rowIndex]);
           }
         });
-        self.viewData.splice(oIndex, odata.length);
-        self.selections = [];
-        if (tIndex > oIndex) tIndex = tIndex - (odata.length - 1);
-        self.activeCell.rowIndex = tIndex;
-        for (var i = 0; i < odata.length; i++) {
-          self.viewData.splice(tIndex + i, 0, odata[i]);
-          self.selections[tIndex + i] = selectedRows[i];
+        if (
+          tIndex < oIndex ||
+          (tIndex > oIndex && Math.abs(tIndex - oIndex) >= odata.length)
+        ) {
+          self.viewData.splice(oIndex, odata.length);
+          self.selections = [];
+          self.selectedRows = [];
+          if (tIndex > oIndex) tIndex = tIndex - (odata.length - 1);
+          self.activeCell.rowIndex = tIndex;
+
+          for (var i = 0; i < odata.length; i++) {
+            self.viewData.splice(tIndex + i, 0, odata[i]);
+            self.selections[tIndex + i] = selectedRows[i];
+            self.selectedRows.push(tIndex + i);
+          }
         }
       }
       self.resize();
@@ -1250,8 +1285,8 @@ export default function (self) {
     }
   };
   self.stopDragMove = function (e) {
-    document.body.removeEventListener('mousemove', self.dragMove, false);
-    document.body.removeEventListener('mouseup', self.stopDragMove, false);
+    window.removeEventListener('mousemove', self.dragMove, false);
+    window.removeEventListener('mouseup', self.stopDragMove, false);
     var b = self.getSelectionBounds();
     if (
       self.dispatchEvent('endmove', { NativeEvent: e, cell: self.currentCell })
@@ -1282,16 +1317,30 @@ export default function (self) {
     ) {
       return;
     }
-    var pos = self.getLayerPos(e),
+    var pos = self.getLayerPos(e);
+
+    self.ignoreNextClick = true;
+    self.freezeMarkerPosition = pos;
+    pos.x -= self.getRowGroupAreaWidth();
+    pos.y -= self.getColumnGroupAreaHeight();
+    if (
+      Math.abs(pos.x) > self.attributes.reorderDeadZone ||
+      Math.abs(pos.y) > self.attributes.reorderDeadZone
+    ) {
+      setTimeout(function () {
+        self.autoScrollZone(e, pos.x, pos.y, false);
+      }, 1);
+    }
+  };
+  self.stopFreezeMove = function (e) {
+    let pos = self.getLayerPos(e),
       bm = self.style.gridBorderCollapse === 'collapse' ? 1 : 2,
       columnHeaderCellBorder = self.style.columnHeaderCellBorderWidth * bm,
       columnHeaderCellHeight = self.getColumnHeaderCellHeight(),
       rowHeaderCellWidth = self.getRowHeaderCellWidth();
-
-    self.ignoreNextClick = true;
-    self.freezeMarkerPosition = pos;
     pos.x -= self.getRowGroupAreaWidth();
     pos.y -= self.getColumnGroupAreaHeight();
+
     if (
       self.currentCell &&
       self.currentCell.rowIndex !== undefined &&
@@ -1329,14 +1378,18 @@ export default function (self) {
     ) {
       const dataWidth = self.refreshScrollCacheX();
       self.scrollBox.scrollLeft = 0;
-      self.frozenColumn = self.currentCell.columnIndex + 1;
+      let x =
+        self.currentCell.x -
+        self.style.frozenMarkerWidth -
+        self.style.frozenMarkerBorderWidth;
+      if (pos.x > x + self.currentCell.width / 2)
+        self.frozenColumn = self.currentCell.columnIndex + 1;
+      else if (self.currentCell.columnIndex >= 0)
+        self.frozenColumn = self.currentCell.columnIndex;
       self.scrollBox.bar.h.x =
-        rowHeaderCellWidth + self.scrollCache.x[self.frozenColumn - 1];
-      self.scrollBox.box.h.x =
-        rowHeaderCellWidth + self.scrollCache.x[self.frozenColumn - 1];
-      // var dataWidth = self.scrollCache.x[self.scrollCache.x.length - 1];
+        rowHeaderCellWidth + self.scrollCache.x[self.frozenColumn];
       self.scrollBox.widthBoxRatio =
-        (self.scrollBox.width - self.scrollCache.x[self.frozenColumn - 1]) /
+        (self.scrollBox.width - self.scrollCache.x[self.frozenColumn]) /
         dataWidth;
       self.scrollBox.scrollBoxWidth =
         self.scrollBox.width * self.scrollBox.widthBoxRatio -
@@ -1355,10 +1408,9 @@ export default function (self) {
         self.autoScrollZone(e, pos.x, pos.y, false);
       }, 1);
     }
-  };
-  self.stopFreezeMove = function (e) {
-    document.body.removeEventListener('mousemove', self.freezeMove, false);
-    document.body.removeEventListener('mouseup', self.stopFreezeMove, false);
+
+    window.removeEventListener('mousemove', self.freezeMove, false);
+    window.removeEventListener('mouseup', self.stopFreezeMove, false);
     self.freezeMarkerPosition = undefined;
     if (
       self.dispatchEvent('endfreezemove', {
@@ -1372,6 +1424,7 @@ export default function (self) {
       return;
     }
     self.draw(true);
+    self.resize();
   };
   self.mousedown = function (e, overridePos) {
     self.lastMouseDownTarget = e.target;
@@ -1418,6 +1471,8 @@ export default function (self) {
         !(self.currentCell.hovered && self.hovers.onFilterButton)
       ) {
         self.selections = [];
+        self.selectedRows = [];
+        self.selectedColumns = [];
       }
     }
     if (self.dragStartObject.isGrid) {
@@ -1442,8 +1497,8 @@ export default function (self) {
         };
         self.canvas.requestPointerLock();
       }
-      document.addEventListener('mousemove', self.scrollGrid, false);
-      document.addEventListener('mouseup', self.stopScrollGrid, false);
+      window.addEventListener('mousemove', self.scrollGrid, false);
+      window.addEventListener('mouseup', self.stopScrollGrid, false);
       self.ignoreNextClick = true;
       return;
     }
@@ -1461,7 +1516,9 @@ export default function (self) {
         self.dragStartObject.columnIndex > -1
       ) {
         self.selectColumn(self.currentCell.header.index, ctrl, e.shiftKey);
-      } else if (self.attributes.selectionMode !== 'row') {
+        return;
+      }
+      if (self.attributes.selectionMode !== 'row') {
         self.mousemove(e);
       }
       return;
@@ -1478,8 +1535,8 @@ export default function (self) {
       ) {
         return;
       }
-      document.body.addEventListener('mousemove', self.dragMove, false);
-      document.body.addEventListener('mouseup', self.stopDragMove, false);
+      window.addEventListener('mousemove', self.dragMove, false);
+      window.addEventListener('mouseup', self.stopDragMove, false);
       return self.mousemove(e);
     }
     if (freeze) {
@@ -1491,8 +1548,12 @@ export default function (self) {
       if (self.dispatchEvent('beginfreezemove', { NativeEvent: e })) {
         return;
       }
-      document.body.addEventListener('mousemove', self.freezeMove, false);
-      document.body.addEventListener('mouseup', self.stopFreezeMove, false);
+
+      self.freezeMarkerPosition = self.getLayerPos(e);
+      self.freezeMarkerPosition.isGrab = true;
+
+      window.addEventListener('mousemove', self.freezeMove, false);
+      window.addEventListener('mouseup', self.stopFreezeMove, false);
       return self.mousemove(e);
     }
     if (resize && !onUnhideIndicator) {
@@ -1510,22 +1571,19 @@ export default function (self) {
             ? 'cornerCell'
             : self.draggingItem.sortColumnIndex
         ] || self.draggingItem.width;
-      document.body.addEventListener('mousemove', self.dragResizeColumn, false);
-      document.body.addEventListener('mouseup', self.stopDragResize, false);
+      window.addEventListener('mousemove', self.dragResizeColumn, false);
+      window.addEventListener('mouseup', self.stopDragResize, false);
       return;
     }
     if (['row-reorder', 'column-reorder'].indexOf(self.dragMode) !== -1) {
       self.draggingItem = self.dragStartObject;
-      if (
-        self.dragMode === 'column-reorder' &&
-        !self.isMultiColumnsSelected(self.currentCell.header.index)
-      ) {
+      if (self.dragMode === 'column-reorder' && !self.isMultiColumnsSelected) {
         self.selectColumn(self.currentCell.header.index, ctrl, e.shiftKey);
       } else if (self.dragMode === 'row-reorder' && !self.isMultiRowsSelected) {
         self.selectRow(self.dragStartObject.rowIndex, ctrl, null);
       }
-      document.body.addEventListener('mousemove', self.dragReorder, false);
-      document.body.addEventListener('mouseup', self.stopDragReorder, false);
+      window.addEventListener('mousemove', self.dragReorder, false);
+      window.addEventListener('mouseup', self.stopDragReorder, false);
       return;
     }
   };
@@ -1753,6 +1811,8 @@ export default function (self) {
       if (!e.shiftKey && self.attributes.selectionFollowsActiveCell) {
         if (!ctrl) {
           self.selections = [];
+          self.selectedRows = [];
+          self.selectedColumns = [];
         }
         self.selections[y] = self.selections[y] || [];
         self.selections[y].push(x);
@@ -1911,6 +1971,8 @@ export default function (self) {
       });
     } else {
       var selections = [];
+      self.selectedRows = [];
+      self.selectedColumns = [];
       for (var rowIndex = 0; rowIndex < rows.length; rowIndex++) {
         // Rows may have been moved by user, so get the actual row index
         // (instead of the row index at which the row is rendered):
@@ -1921,6 +1983,7 @@ export default function (self) {
         var newRowData = Object.assign({}, existingRowData);
 
         selections[realRowIndex] = [];
+        self.selectedRows.push(realRowIndex);
 
         for (var colIndex = 0; colIndex < cells.length; colIndex++) {
           var column = schema[startColIndex + colIndex];
@@ -1943,6 +2006,8 @@ export default function (self) {
           selections[realRowIndex].push(startColIndex + colIndex);
 
           newRowData[columnName] = cellData;
+          if (self.selectedColumns.indexOf(startColIndex + colIndex) === -1)
+            self.selectedColumns.push(startColIndex + colIndex);
         }
 
         self.originalData[self.boundRowIndexMap.get(realRowIndex)] = newRowData;

package/lib/intf.js

@@ -90,6 +90,8 @@ export default function (self, ctor) {
     trees: {},
   };
   self.selections = [];
+  self.selectedRows = [];
+  self.selectedColumns = [];
   self.filterable = {
     rows: [],
     columns: [],
@@ -175,6 +177,8 @@ export default function (self, ctor) {
     'cellmouseover',
     'click',
     'collapsetree',
+    'columnhide',
+    'columnunhide',
     'contextmenu',
     'copy',
     'datachanged',
@@ -377,7 +381,7 @@ export default function (self, ctor) {
         );
         const columnName = schema[boundColumnIndex].name;
 
-        self.originalData[boundRowIndex][columnName] = '';
+        self.viewData[boundRowIndex][columnName] = '';
 
         affectedCells.push([
           rowIndex,
@@ -903,7 +907,6 @@ export default function (self, ctor) {
     if (!self.isChildGrid) {
       document.body.removeChild(self.controlInput);
     }
-    self.eventParent.removeEventListener('mouseup', self.mouseup, false);
     self.eventParent.removeEventListener('mousedown', self.mousedown, false);
     self.eventParent.removeEventListener('dblclick', self.dblclick, false);
     self.eventParent.removeEventListener('click', self.click, false);
@@ -917,7 +920,8 @@ export default function (self, ctor) {
     self.controlInput.removeEventListener('keypress', self.keypress, false);
     self.controlInput.removeEventListener('keyup', self.keyup, false);
     self.controlInput.removeEventListener('keydown', self.keydown, false);
-    document.body.removeEventListener('mousemove', self.mousemove);
+    window.removeEventListener('mouseup', self.mouseup, false);
+    window.removeEventListener('mousemove', self.mousemove);
     window.removeEventListener('resize', self.resize);
     if (self.observer && self.observer.disconnect) {
       self.observer.disconnect();
@@ -1280,17 +1284,6 @@ export default function (self, ctor) {
     };
   };
 
-  self.unhideColumns = function (orderIndex0, orderIndex1) {
-    const orders = self.orders.columns;
-    const schema = self.getSchema();
-    for (let i = orderIndex0; i <= orderIndex1; i++) {
-      const columnIndex = orders[i];
-      const s = schema[columnIndex];
-      if (s && s.hidden) s.hidden = false;
-    }
-    self.refresh();
-  };
-
   self.getDomRoot = function () {
     return self.shadowRoot ? self.shadowRoot.host : self.parentNode;
   };
@@ -1522,6 +1515,7 @@ export default function (self, ctor) {
     self.intf.paste = self.paste;
     self.intf.setStyleProperty = self.setStyleProperty;
     self.intf.hideColumns = self.hideColumns;
+    self.intf.unhideColumns = self.unhideColumns;
     self.intf.hideRows = self.hideRows;
     self.intf.unhideRows = self.unhideRows;
     Object.defineProperty(self.intf, 'defaults', {