sheet-happens 0.0.17 → 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';
@@ -615,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);
   }
@@ -1244,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) {