sheet-happens 0.0.16 → 0.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -81,7 +81,7 @@ var scrollSpeed = 30;
81
81
  var resizeColumnRowMouseThreshold = 4;
82
82
  var minimumColumnWidth = 50;
83
83
  var minimumRowHeight = 22;
84
- var rowColHeaderSelectionColor = '#AAAAAA';
84
+ var rowColHeaderSelectionColor = '#cccccc';
85
85
  var maxSearchableRowOrCol = 65536;
86
86
  var defaultCellStyle = {
87
87
  textAlign: 'left',
@@ -111,14 +111,7 @@ function resizeCanvas(canvas) {
111
111
  width = _canvas$getBoundingCl.width,
112
112
  height = _canvas$getBoundingCl.height;
113
113
 
114
- var _window = window,
115
- _window$devicePixelRa = _window.devicePixelRatio,
116
- ratio = _window$devicePixelRa === void 0 ? 1 : _window$devicePixelRa;
117
-
118
- if (ratio < 1) {
119
- ratio = 1;
120
- }
121
-
114
+ var ratio = 2;
122
115
  var newCanvasWidth = Math.round(width * ratio);
123
116
  var newCanvasHeight = Math.round(height * ratio);
124
117
 
@@ -500,7 +493,7 @@ function findInDisplayData(displayData, start, direction) {
500
493
  return i;
501
494
  }
502
495
 
503
- function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates) {
496
+ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, hideGridlines) {
504
497
  resizeCanvas(context.canvas);
505
498
  context.clearRect(0, 0, context.canvas.width, context.canvas.height);
506
499
  context.fillStyle = 'white';
@@ -577,15 +570,19 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
577
570
 
578
571
  if (selectionActive) {
579
572
  context.fillStyle = selBackColor;
580
- var p1x = Math.max(-100, p1.x);
581
- var p1y = Math.max(-100, p1.y);
582
573
 
583
574
  if (rowSelectionActive) {
575
+ var p1x = Math.max(-100, p1.x);
576
+ var p1y = Math.max(-100, p1.y);
584
577
  context.fillRect(p1x, p1y, 100000, p2.y - p1.y);
585
578
  } else if (colSelectionActive) {
586
- context.fillRect(p1x, p1y, p2.x - p1.x, 100000);
579
+ var _p1x = Math.max(-100, p1.x);
580
+
581
+ var _p1y = Math.max(-100, p1.y);
582
+
583
+ context.fillRect(_p1x, _p1y, p2.x - p1.x, 100000);
587
584
  } else {
588
- context.fillRect(p1x, p1y, p2.x - p1.x, p2.y - p1.y);
585
+ context.fillRect(p1.x, p1.y, p2.x - p1.x, p2.y - p1.y);
589
586
  }
590
587
  }
591
588
 
@@ -608,23 +605,41 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
608
605
  context.strokeStyle = gridColor;
609
606
  context.lineWidth = 1;
610
607
  var startX = rowHeaderWidth;
608
+ var startY = columnHeaderHeight;
609
+ var xGridlineEnd = hideGridlines ? rowHeaderWidth : context.canvas.width;
610
+ var yGridlineEnd = hideGridlines ? columnHeaderHeight : context.canvas.height;
611
+ var first = true;
611
612
 
612
613
  for (var _iterator3 = _createForOfIteratorHelperLoose(columnSizes.index), _step3; !(_step3 = _iterator3()).done;) {
613
614
  var col = _step3.value;
614
615
  context.beginPath();
615
616
  context.moveTo(startX, 0);
616
- context.lineTo(startX, context.canvas.height);
617
+
618
+ if (first) {
619
+ context.lineTo(startX, context.canvas.height);
620
+ first = false;
621
+ } else {
622
+ context.lineTo(startX, yGridlineEnd);
623
+ }
624
+
617
625
  context.stroke();
618
626
  startX += cellWidth(col);
619
627
  }
620
628
 
621
- var startY = columnHeaderHeight;
629
+ first = true;
622
630
 
623
631
  for (var _iterator4 = _createForOfIteratorHelperLoose(rowSizes.index), _step4; !(_step4 = _iterator4()).done;) {
624
632
  var row = _step4.value;
625
633
  context.beginPath();
626
634
  context.moveTo(0, startY);
627
- context.lineTo(context.canvas.width, startY);
635
+
636
+ if (first) {
637
+ context.lineTo(context.canvas.width, startY);
638
+ first = false;
639
+ } else {
640
+ context.lineTo(xGridlineEnd, startY);
641
+ }
642
+
628
643
  context.stroke();
629
644
  startY += cellHeight(row);
630
645
  }
@@ -675,19 +690,22 @@ function renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, ce
675
690
  if (selectionActive) {
676
691
  context.strokeStyle = selBorderColor;
677
692
  context.lineWidth = 1;
678
-
679
- var _p1x = Math.max(-100, p1.x);
680
-
681
- var _p1y = Math.max(-100, p1.y);
682
-
683
693
  context.beginPath();
684
694
 
685
695
  if (rowSelectionActive) {
686
- context.rect(_p1x, _p1y, 100000, p2.y - p1.y);
696
+ var _p1x2 = Math.max(-100, p1.x);
697
+
698
+ var _p1y2 = Math.max(-100, p1.y);
699
+
700
+ context.rect(_p1x2, _p1y2, 100000, p2.y - p1.y);
687
701
  } else if (colSelectionActive) {
688
- context.rect(_p1x, _p1y, p2.x - p1.x, 100000);
702
+ var _p1x3 = Math.max(-100, p1.x);
703
+
704
+ var _p1y3 = Math.max(-100, p1.y);
705
+
706
+ context.rect(_p1x3, _p1y3, p2.x - p1.x, 100000);
689
707
  } else {
690
- context.rect(_p1x, _p1y, p2.x - p1.x, p2.y - p1.y);
708
+ context.rect(p1.x, p1.y, p2.x - p1.x, p2.y - p1.y);
691
709
  }
692
710
 
693
711
  context.stroke();
@@ -1234,12 +1252,12 @@ function Sheet(props) {
1234
1252
  }
1235
1253
 
1236
1254
  var animationFrameId = window.requestAnimationFrame(function () {
1237
- renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates);
1255
+ renderOnCanvas(context, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, props.hideGridlines || false);
1238
1256
  });
1239
1257
  return function () {
1240
1258
  window.cancelAnimationFrame(animationFrameId);
1241
1259
  };
1242
- }, [canvasRef, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates]);
1260
+ }, [canvasRef, rowSizes, columnSizes, cellStyle, cellWidth, cellHeight, selection, knobDragInProgress, columnHeaders, columnHeaderStyle, knobArea, displayData, dataOffset, knobCoordinates, props.hideGridlines]);
1243
1261
 
1244
1262
  var setFocusToTextArea = function setFocusToTextArea() {
1245
1263
  if (copyPasteTextAreaRef.current) {
@@ -1806,8 +1824,9 @@ function Sheet(props) {
1806
1824
  }
1807
1825
 
1808
1826
  if (fx1 === -1 && fx2 === -1) {
1827
+ var max = findApproxMaxEditDataIndex(editData);
1809
1828
  fx1 = 0;
1810
- fx2 = maxSearchableRowOrCol;
1829
+ fx2 = max.x;
1811
1830
  }
1812
1831
 
1813
1832
  var srcY = sy1;
@@ -1836,8 +1855,10 @@ function Sheet(props) {
1836
1855
  }
1837
1856
 
1838
1857
  if (fy1 === -1 && fy2 === -1) {
1858
+ var _max3 = findApproxMaxEditDataIndex(editData);
1859
+
1839
1860
  fy1 = 0;
1840
- fy2 = maxSearchableRowOrCol;
1861
+ fy2 = _max3.y;
1841
1862
  }
1842
1863
 
1843
1864
  var srcX = sx1;