sheet-happens 0.0.16 → 0.0.18

package/dist/index.d.ts

@@ -45,6 +45,7 @@ export interface SheetProps {
     displayData?: CellProperty<CellContentType>;
     editData?: CellProperty<string>;
     editKeys?: CellProperty<string>;
+    hideGridlines?: boolean;
     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;

package/dist/index.js

@@ -84,7 +84,7 @@ var scrollSpeed = 30;
 var resizeColumnRowMouseThreshold = 4;
 var minimumColumnWidth = 50;
 var minimumRowHeight = 22;
-var rowColHeaderSelectionColor = '#AAAAAA';
+var rowColHeaderSelectionColor = '#cccccc';
 var maxSearchableRowOrCol = 65536;
 var defaultCellStyle = {
   textAlign: 'left',
@@ -114,14 +114,7 @@ function resizeCanvas(canvas) {
       width = _canvas$getBoundingCl.width,
       height = _canvas$getBoundingCl.height;
 
-  var _window = window,
-      _window$devicePixelRa = _window.devicePixelRatio,
-      ratio = _window$devicePixelRa === void 0 ? 1 : _window$devicePixelRa;
-
-  if (ratio < 1) {
-    ratio = 1;
-  }
-
+  var ratio = 2;
   var newCanvasWidth = Math.round(width * ratio);
   var newCanvasHeight = Math.round(height * ratio);
 
@@ -503,7 +496,7 @@ function findInDisplayData(displayData, start, direction) {
   return i;
 }
 
-function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates) {
+function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, hideGridlines) {
   resizeCanvas(context.canvas);
   context.clearRect(0, 0, context.canvas.width, context.canvas.height);
   context.fillStyle = 'white';
@@ -580,15 +573,19 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
 
   if (selectionActive) {
     context.fillStyle = selBackColor;
-    var p1x = Math.max(-100, p1.x);
-    var p1y = Math.max(-100, p1.y);
 
     if (rowSelectionActive) {
+      var p1x = Math.max(-100, p1.x);
+      var p1y = Math.max(-100, p1.y);
       context.fillRect(p1x, p1y, 100000, p2.y - p1.y);
     } else if (colSelectionActive) {
-      context.fillRect(p1x, p1y, p2.x - p1.x, 100000);
+      var _p1x = Math.max(-100, p1.x);
+
+      var _p1y = Math.max(-100, p1.y);
+
+      context.fillRect(_p1x, _p1y, p2.x - p1.x, 100000);
     } else {
-      context.fillRect(p1x, p1y, p2.x - p1.x, p2.y - p1.y);
+      context.fillRect(p1.x, p1.y, p2.x - p1.x, p2.y - p1.y);
     }
   }
 
@@ -611,23 +608,41 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
   context.strokeStyle = gridColor;
   context.lineWidth = 1;
   var startX = rowHeaderWidth;
+  var startY = columnHeaderHeight;
+  var xGridlineEnd = hideGridlines ? rowHeaderWidth : context.canvas.width;
+  var yGridlineEnd = hideGridlines ? columnHeaderHeight : context.canvas.height;
+  var first = true;
 
   for (var _iterator3 = _createForOfIteratorHelperLoose(columnSizes.index), _step3; !(_step3 = _iterator3()).done;) {
     var col = _step3.value;
     context.beginPath();
     context.moveTo(startX, 0);
-    context.lineTo(startX, context.canvas.height);
+
+    if (first) {
+      context.lineTo(startX, context.canvas.height);
+      first = false;
+    } else {
+      context.lineTo(startX, yGridlineEnd);
+    }
+
     context.stroke();
     startX += cellWidth(col);
   }
 
-  var startY = columnHeaderHeight;
+  first = true;
 
   for (var _iterator4 = _createForOfIteratorHelperLoose(rowSizes.index), _step4; !(_step4 = _iterator4()).done;) {
     var row = _step4.value;
     context.beginPath();
     context.moveTo(0, startY);
-    context.lineTo(context.canvas.width, startY);
+
+    if (first) {
+      context.lineTo(context.canvas.width, startY);
+      first = false;
+    } else {
+      context.lineTo(xGridlineEnd, startY);
+    }
+
     context.stroke();
     startY += cellHeight(row);
   }
@@ -678,19 +693,22 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
   if (selectionActive) {
     context.strokeStyle = selBorderColor;
     context.lineWidth = 1;
-
-    var _p1x = Math.max(-100, p1.x);
-
-    var _p1y = Math.max(-100, p1.y);
-
     context.beginPath();
 
     if (rowSelectionActive) {
-      context.rect(_p1x, _p1y, 100000, p2.y - p1.y);
+      var _p1x2 = Math.max(-100, p1.x);
+
+      var _p1y2 = Math.max(-100, p1.y);
+
+      context.rect(_p1x2, _p1y2, 100000, p2.y - p1.y);
     } else if (colSelectionActive) {
-      context.rect(_p1x, _p1y, p2.x - p1.x, 100000);
+      var _p1x3 = Math.max(-100, p1.x);
+
+      var _p1y3 = Math.max(-100, p1.y);
+
+      context.rect(_p1x3, _p1y3, p2.x - p1.x, 100000);
     } else {
-      context.rect(_p1x, _p1y, p2.x - p1.x, p2.y - p1.y);
+      context.rect(p1.x, p1.y, p2.x - p1.x, p2.y - p1.y);
     }
 
     context.stroke();
@@ -1237,12 +1255,12 @@ function Sheet(props) {
     }
 
     var animationFrameId = window.requestAnimationFrame(function () {
-      renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates);
+      renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, props.hideGridlines || false);
     });
     return function () {
       window.cancelAnimationFrame(animationFrameId);
     };
-  }, [canvasRef, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates]);
+  }, [canvasRef, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, props.hideGridlines]);
 
   var setFocusToTextArea = function setFocusToTextArea() {
     if (copyPasteTextAreaRef.current) {
@@ -1809,8 +1827,9 @@ function Sheet(props) {
         }
 
         if (fx1 === -1 && fx2 === -1) {
+          var max = findApproxMaxEditDataIndex(editData);
           fx1 = 0;
-          fx2 = maxSearchableRowOrCol;
+          fx2 = max.x;
         }
 
         var srcY = sy1;
@@ -1839,8 +1858,10 @@ function Sheet(props) {
         }
 
         if (fy1 === -1 && fy2 === -1) {
+          var _max3 = findApproxMaxEditDataIndex(editData);
+
           fy1 = 0;
-          fy2 = maxSearchableRowOrCol;
+          fy2 = _max3.y;
         }
 
         var srcX = sx1;