sheet-happens 0.0.21 → 0.0.23

package/dist/index.d.ts

@@ -11,6 +11,16 @@ export interface SheetInputProps {
     onChange: (valiue: string) => void;
     style: InputStyle;
 }
+interface SelectionSpan {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}
+interface Selection {
+    span: SelectionSpan;
+    color: string;
+}
 export interface Change {
     x: number;
     y: number;
@@ -57,13 +67,14 @@ export interface SheetProps {
     editKeys?: CellProperty<string>;
     sheetStyle?: SheetStyle;
     dontCommitEditOnSelectionChange?: boolean;
+    secondarySelections?: Selection[];
     inputComponent?: (x: number, y: number, props: SheetInputProps, commitEditingCell?: () => void) => ReactElement | undefined;
     onSelectionChanged?: (x1: number, y1: number, x2: number, y2: number) => void;
     onRightClick?: (e: SheetMouseEvent) => void;
     onChange?: (changes: Array<Change>) => void;
     onCellWidthChange?: (indices: number[], value: number) => void;
     onCellHeightChange?: (indices: number[], value: number) => void;
-    onScrollChange?: (scrollX: number, scrolLY: number) => void;
+    onScrollChange?: (visibleRows: number[], visibleColumns: number[]) => void;
 }
 export interface Style {
     color?: string;

package/dist/index.js

@@ -335,6 +335,26 @@ function absCoordianteToCell(absX, absY, rowSizes, columnSizes) {
   };
 }
 
+function normalizeSelection(selection) {
+  var selx1 = selection.x1;
+  var selx2 = selection.x2;
+
+  if (selection.x1 > selection.x2) {
+    selx1 = selection.x2;
+    selx2 = selection.x1;
+  }
+
+  var sely1 = selection.y1;
+  var sely2 = selection.y2;
+
+  if (selection.y1 > selection.y2) {
+    sely1 = selection.y2;
+    sely2 = selection.y1;
+  }
+
+  return [selx1, sely1, selx2, sely2];
+}
+
 function cellToAbsCoordinate(cellX, cellY, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle) {
   var absX = sheetStyle.rowHeaderWidth;
   var indX = columnSizes.index.findIndex(function (i) {
@@ -503,7 +523,7 @@ function findInDisplayData(displayData, start, direction) {
   return i;
 }
 
-function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, sheetStyle) {
+function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, secondarySelections, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, sheetStyle) {
   resizeCanvas(context.canvas);
   context.clearRect(0, 0, context.canvas.width, context.canvas.height);
   context.fillStyle = 'white';
@@ -514,8 +534,8 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
     var y = _step2.value;
     var xCoord1 = sheetStyle.rowHeaderWidth;
 
-    for (var _iterator8 = _createForOfIteratorHelperLoose(columnSizes.index), _step8; !(_step8 = _iterator8()).done;) {
-      var x = _step8.value;
+    for (var _iterator9 = _createForOfIteratorHelperLoose(columnSizes.index), _step9; !(_step9 = _iterator9()).done;) {
+      var x = _step9.value;
       var style = cellStyle(x, y);
 
       if (style.fillColor) {
@@ -530,21 +550,12 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
   }
 
   var hideKnob = false;
-  var selx1 = selection.x1;
-  var selx2 = selection.x2;
-
-  if (selection.x1 > selection.x2) {
-    selx1 = selection.x2;
-    selx2 = selection.x1;
-  }
-
-  var sely1 = selection.y1;
-  var sely2 = selection.y2;
 
-  if (selection.y1 > selection.y2) {
-    sely1 = selection.y2;
-    sely2 = selection.y1;
-  }
+  var _normalizeSelection = normalizeSelection(selection),
+      selx1 = _normalizeSelection[0],
+      sely1 = _normalizeSelection[1],
+      selx2 = _normalizeSelection[2],
+      sely2 = _normalizeSelection[3];
 
   var selectionActive = selx1 !== -1 && selx2 !== -1 || sely1 !== -1 && sely2 !== -1;
   var rowSelectionActive = selx1 === -1 && selx2 === -1 && sely1 !== -1 && sely2 !== -1;
@@ -727,6 +738,70 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
     context.stroke();
   }
 
+  for (var _iterator7 = _createForOfIteratorHelperLoose(secondarySelections), _step7; !(_step7 = _iterator7()).done;) {
+    var secondarySelection = _step7.value;
+
+    var _normalizeSelection2 = normalizeSelection(secondarySelection.span),
+        _selx = _normalizeSelection2[0],
+        _sely = _normalizeSelection2[1],
+        _selx2 = _normalizeSelection2[2],
+        _sely2 = _normalizeSelection2[3];
+
+    var secondarySelectionActive = _selx !== -1 && _selx2 !== -1 || _sely !== -1 && _sely2 !== -1;
+
+    if (!secondarySelectionActive) {
+      continue;
+    }
+
+    var rowSecondarySelectionActive = _selx === -1 && _selx2 === -1 && _sely !== -1 && _sely2 !== -1;
+    var colSecondarySelectionActive = _selx !== -1 && _selx2 !== -1 && _sely === -1 && _sely2 === -1;
+
+    var _p = cellToAbsCoordinate(_selx, _sely, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
+
+    var _p2 = cellToAbsCoordinate(_selx2, _sely2, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
+
+    _p2.x += cellWidth(_selx2);
+    _p2.y += cellHeight(_sely2);
+
+    if (_p.x >= _p2.x) {
+      _p2.x = _p.x;
+      var _currentCol = _selx;
+
+      while (columnSizes.index.includes(_currentCol)) {
+        _p2.x += cellWidth(_currentCol);
+        _currentCol++;
+      }
+    }
+
+    if (_p.y >= _p2.y) {
+      _p2.y = _p.y;
+      var _currentRow = _sely;
+
+      while (rowSizes.index.includes(_currentRow)) {
+        _p2.y += cellHeight(_currentRow);
+        _currentRow++;
+      }
+    }
+
+    context.strokeStyle = secondarySelection.color;
+    context.lineWidth = 1;
+    context.beginPath();
+
+    if (rowSecondarySelectionActive) {
+      var _p1x2 = Math.max(-100, _p.x);
+
+      context.rect(_p1x2, _p.y, 100000, _p2.y - _p.y);
+    } else if (colSecondarySelectionActive) {
+      var _p1y2 = Math.max(-100, _p.y);
+
+      context.rect(_p.x, _p1y2, _p2.x - _p.x, 100000);
+    } else {
+      context.rect(_p.x, _p.y, _p2.x - _p.x, _p2.y - _p.y);
+    }
+
+    context.stroke();
+  }
+
   if (knobDragInProgress) {
     var kx1 = knobArea.x1;
     var kx2 = knobArea.x2;
@@ -771,14 +846,14 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
   context.textBaseline = 'middle';
   var yCoord = sheetStyle.columnHeaderHeight;
 
-  for (var _iterator7 = _createForOfIteratorHelperLoose(rowSizes.index), _step7; !(_step7 = _iterator7()).done;) {
-    var _y = _step7.value;
+  for (var _iterator8 = _createForOfIteratorHelperLoose(rowSizes.index), _step8; !(_step8 = _iterator8()).done;) {
+    var _y = _step8.value;
     var xCoord = sheetStyle.rowHeaderWidth;
 
     var _ch = cellHeight(_y);
 
-    for (var _iterator9 = _createForOfIteratorHelperLoose(columnSizes.index), _step9; !(_step9 = _iterator9()).done;) {
-      var _x = _step9.value;
+    for (var _iterator10 = _createForOfIteratorHelperLoose(columnSizes.index), _step10; !(_step10 = _iterator10()).done;) {
+      var _x = _step10.value;
 
       var _cellContent = displayData(_x, _y);
 
@@ -960,6 +1035,11 @@ function Sheet(props) {
   var rowSizes = React.useMemo(function () {
     return calculateRowsOrColsSizes(sheetStyle.freezeRows, cellHeight, sheetStyle.columnHeaderHeight, dataOffset.y, canvasHeight);
   }, [sheetStyle, cellHeight, dataOffset.y, canvasHeight]);
+  React.useEffect(function () {
+    if (props.onScrollChange) {
+      props.onScrollChange([].concat(rowSizes.index), [].concat(columnSizes.index));
+    }
+  }, [rowSizes, columnSizes, props.onScrollChange]);
 
   var changeSelection = function changeSelection(x1, y1, x2, y2, scrollToP2) {
     if (scrollToP2 === void 0) {
@@ -1092,23 +1172,23 @@ function Sheet(props) {
     }
 
     if (selection.x2 !== -1 && selection.y2 !== -1) {
-      var _selx = selection.x2;
+      var _selx3 = selection.x2;
 
       if (selection.x1 > selection.x2) {
-        _selx = selection.x1;
+        _selx3 = selection.x1;
       }
 
-      var _sely = selection.y2;
+      var _sely3 = selection.y2;
 
       if (selection.y1 > selection.y2) {
-        _sely = selection.y1;
+        _sely3 = selection.y1;
       }
 
-      var _c2 = cellToAbsCoordinate(_selx, _sely, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
+      var _c2 = cellToAbsCoordinate(_selx3, _sely3, rowSizes, columnSizes, dataOffset, cellWidth, cellHeight, sheetStyle);
 
       return {
-        x: _c2.x + cellWidth(_selx),
-        y: _c2.y + cellHeight(_sely)
+        x: _c2.x + cellWidth(_selx3),
+        y: _c2.y + cellHeight(_sely3)
       };
     }
 
@@ -1129,16 +1209,16 @@ function Sheet(props) {
     var yCoord = sheetStyle.columnHeaderHeight;
     var xCoord = sheetStyle.rowHeaderWidth;
 
-    for (var _iterator10 = _createForOfIteratorHelperLoose(columnSizes.index), _step10; !(_step10 = _iterator10()).done;) {
-      var x = _step10.value;
+    for (var _iterator11 = _createForOfIteratorHelperLoose(columnSizes.index), _step11; !(_step11 = _iterator11()).done;) {
+      var x = _step11.value;
       var ch = columnHeaders(x);
       var cellW = cellWidth(x);
 
       if (ch && typeof ch === 'object' && ch.items) {
         var finalStyle = void 0;
 
-        for (var _iterator12 = _createForOfIteratorHelperLoose(ch.items), _step12; !(_step12 = _iterator12()).done;) {
-          var obj = _step12.value;
+        for (var _iterator13 = _createForOfIteratorHelperLoose(ch.items), _step13; !(_step13 = _iterator13()).done;) {
+          var obj = _step13.value;
 
           if (obj.onClick) {
             if (!finalStyle) {
@@ -1184,12 +1264,12 @@ function Sheet(props) {
       xCoord += cellW;
     }
 
-    for (var _iterator11 = _createForOfIteratorHelperLoose(rowSizes.index), _step11; !(_step11 = _iterator11()).done;) {
-      var y = _step11.value;
+    for (var _iterator12 = _createForOfIteratorHelperLoose(rowSizes.index), _step12; !(_step12 = _iterator12()).done;) {
+      var y = _step12.value;
       xCoord = sheetStyle.rowHeaderWidth;
 
-      for (var _iterator13 = _createForOfIteratorHelperLoose(columnSizes.index), _step13; !(_step13 = _iterator13()).done;) {
-        var _x2 = _step13.value;
+      for (var _iterator14 = _createForOfIteratorHelperLoose(columnSizes.index), _step14; !(_step14 = _iterator14()).done;) {
+        var _x2 = _step14.value;
         var cellContent = displayData(_x2, y);
 
         var _cellW = cellWidth(_x2);
@@ -1205,8 +1285,8 @@ function Sheet(props) {
         if (typeof cellContent === 'object' && cellContent.items) {
           var _finalStyle = void 0;
 
-          for (var _iterator14 = _createForOfIteratorHelperLoose(cellContent.items), _step14; !(_step14 = _iterator14()).done;) {
-            var _obj = _step14.value;
+          for (var _iterator15 = _createForOfIteratorHelperLoose(cellContent.items), _step15; !(_step15 = _iterator15()).done;) {
+            var _obj = _step15.value;
 
             if (_obj.onClick) {
               if (!_finalStyle) {
@@ -1280,12 +1360,12 @@ function Sheet(props) {
     }
 
     var animationFrameId = window.requestAnimationFrame(function () {
-      renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, sheetStyle);
+      renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, props.secondarySelections || [], knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, sheetStyle);
     });
     return function () {
       window.cancelAnimationFrame(animationFrameId);
     };
-  }, [canvasRef, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, sheetStyle]);
+  }, [canvasRef, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, props.secondarySelections, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, sheetStyle]);
 
   var setFocusToTextArea = function setFocusToTextArea() {
     if (copyPasteTextAreaRef.current) {
@@ -1345,8 +1425,8 @@ function Sheet(props) {
   });
 
   var findTable = function findTable(element) {
-    for (var _iterator15 = _createForOfIteratorHelperLoose(element.children), _step15; !(_step15 = _iterator15()).done;) {
-      var child = _step15.value;
+    for (var _iterator16 = _createForOfIteratorHelperLoose(element.children), _step16; !(_step16 = _iterator16()).done;) {
+      var child = _step16.value;
 
       if (child.nodeName === 'TABLE') {
         return child;
@@ -1395,17 +1475,17 @@ function Sheet(props) {
       return;
     }
 
-    for (var _iterator16 = _createForOfIteratorHelperLoose(tableNode.children), _step16; !(_step16 = _iterator16()).done;) {
-      var tableChild = _step16.value;
+    for (var _iterator17 = _createForOfIteratorHelperLoose(tableNode.children), _step17; !(_step17 = _iterator17()).done;) {
+      var tableChild = _step17.value;
 
       if (tableChild.nodeName === 'TBODY') {
-        for (var _iterator17 = _createForOfIteratorHelperLoose(tableChild.children), _step17; !(_step17 = _iterator17()).done;) {
-          var tr = _step17.value;
+        for (var _iterator18 = _createForOfIteratorHelperLoose(tableChild.children), _step18; !(_step18 = _iterator18()).done;) {
+          var tr = _step18.value;
           x = pasteLocX;
 
           if (tr.nodeName === 'TR') {
-            for (var _iterator18 = _createForOfIteratorHelperLoose(tr.children), _step18; !(_step18 = _iterator18()).done;) {
-              var td = _step18.value;
+            for (var _iterator19 = _createForOfIteratorHelperLoose(tr.children), _step19; !(_step19 = _iterator19()).done;) {
+              var td = _step19.value;
 
               if (td.nodeName === 'TD') {
                 var str = '';
@@ -1626,10 +1706,6 @@ function Sheet(props) {
         x: cellX,
         y: cellY
       });
-
-      if (props.onScrollChange) {
-        props.onScrollChange(cellX, cellY);
-      }
     }
 
     var newMaxScroll = _extends({}, maxScroll);
@@ -1673,8 +1749,8 @@ function Sheet(props) {
     var hitTargetKeyY = Math.floor(y / yBinSize);
 
     if (hitMap[hitTargetKeyX] && hitMap[hitTargetKeyX][hitTargetKeyY]) {
-      for (var _iterator19 = _createForOfIteratorHelperLoose(hitMap[hitTargetKeyX][hitTargetKeyY]), _step19; !(_step19 = _iterator19()).done;) {
-        var hitTarget = _step19.value;
+      for (var _iterator20 = _createForOfIteratorHelperLoose(hitMap[hitTargetKeyX][hitTargetKeyY]), _step20; !(_step20 = _iterator20()).done;) {
+        var hitTarget = _step20.value;
 
         if (hitTarget.x <= x && x <= hitTarget.x + hitTarget.w && hitTarget.y <= y && y <= hitTarget.y + hitTarget.h) {
           setButtonClickMouseDownCoordinates({
@@ -1982,8 +2058,8 @@ function Sheet(props) {
     var hitTargetKeyY = Math.floor(y / yBinSize);
 
     if (hitMap[hitTargetKeyX] && hitMap[hitTargetKeyX][hitTargetKeyY]) {
-      for (var _iterator20 = _createForOfIteratorHelperLoose(hitMap[hitTargetKeyX][hitTargetKeyY]), _step20; !(_step20 = _iterator20()).done;) {
-        var hitTarget = _step20.value;
+      for (var _iterator21 = _createForOfIteratorHelperLoose(hitMap[hitTargetKeyX][hitTargetKeyY]), _step21; !(_step21 = _iterator21()).done;) {
+        var hitTarget = _step21.value;
 
         if (hitTarget.x <= x && x <= hitTarget.x + hitTarget.w && hitTarget.y <= y && y <= hitTarget.y + hitTarget.h) {
           window.document.body.style.cursor = 'pointer';
@@ -1994,8 +2070,8 @@ function Sheet(props) {
     if (!sheetStyle.hideColumnHeaders && props.onCellWidthChange && y < sheetStyle.columnHeaderHeight) {
       var xx = sheetStyle.rowHeaderWidth;
 
-      for (var _iterator21 = _createForOfIteratorHelperLoose(columnSizes.index), _step21; !(_step21 = _iterator21()).done;) {
-        var col = _step21.value;
+      for (var _iterator22 = _createForOfIteratorHelperLoose(columnSizes.index), _step22; !(_step22 = _iterator22()).done;) {
+        var col = _step22.value;
 
         if (Math.abs(xx - x) < resizeColumnRowMouseThreshold) {
           window.document.body.style.cursor = 'col-resize';
@@ -2009,8 +2085,8 @@ function Sheet(props) {
     if (!sheetStyle.hideRowHeaders && props.onCellHeightChange && x < sheetStyle.rowHeaderWidth) {
       var yy = sheetStyle.columnHeaderHeight;
 
-      for (var _iterator22 = _createForOfIteratorHelperLoose(rowSizes.index), _step22; !(_step22 = _iterator22()).done;) {
-        var row = _step22.value;
+      for (var _iterator23 = _createForOfIteratorHelperLoose(rowSizes.index), _step23; !(_step23 = _iterator23()).done;) {
+        var row = _step23.value;
 
         if (Math.abs(yy - y) < resizeColumnRowMouseThreshold) {
           window.document.body.style.cursor = 'row-resize';
@@ -2117,8 +2193,8 @@ function Sheet(props) {
     var hitTargetKeyY = Math.floor(y / yBinSize);
 
     if (hitMap[hitTargetKeyX] && hitMap[hitTargetKeyX][hitTargetKeyY]) {
-      for (var _iterator23 = _createForOfIteratorHelperLoose(hitMap[hitTargetKeyX][hitTargetKeyY]), _step23; !(_step23 = _iterator23()).done;) {
-        var hitTarget = _step23.value;
+      for (var _iterator24 = _createForOfIteratorHelperLoose(hitMap[hitTargetKeyX][hitTargetKeyY]), _step24; !(_step24 = _iterator24()).done;) {
+        var hitTarget = _step24.value;
 
         if (hitTarget.x <= x && x <= hitTarget.x + hitTarget.w && hitTarget.y <= y && y <= hitTarget.y + hitTarget.h) {
           return;