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.
- package/dist/index.d.ts +1 -0
- package/dist/index.js +50 -29
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +50 -29
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.modern.js
CHANGED
|
@@ -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 = '#
|
|
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
|
|
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
|
-
|
|
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(
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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(
|
|
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 =
|
|
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 =
|
|
1861
|
+
fy2 = _max3.y;
|
|
1841
1862
|
}
|
|
1842
1863
|
|
|
1843
1864
|
var srcX = sx1;
|