sheet-happens 0.0.51 → 0.0.52

package/dist/autosize.d.ts

@@ -1,3 +1,3 @@
-import { RowOrColumnPropertyFunction, RowOrColumnPropertyStyledFunction, CellPropertyFunction, CellPropertyStyledFunction, CellContentType, Style } from './types';
-export declare const useAutoSizeColumn: (rows: number[], displayData: CellPropertyStyledFunction<CellContentType>, cellStyle: CellPropertyFunction<Style>, columnHeaders: RowOrColumnPropertyStyledFunction<CellContentType>, columnHeaderStyle: RowOrColumnPropertyFunction<Style>, canvasWidth: number) => (x: number) => number;
-export declare const useAutoSizeRow: (columns: number[], displayData: CellPropertyStyledFunction<CellContentType>, cellStyle: CellPropertyFunction<Style>, columnHeaders: RowOrColumnPropertyStyledFunction<CellContentType>, columnHeaderStyle: RowOrColumnPropertyFunction<Style>, cellWidth: RowOrColumnPropertyFunction<number>, canvasHeight: number) => (y: number) => number;
+import { RowOrColumnPropertyFunction, RowOrColumnPropertyStyledFunction, CellLayout, CellPropertyFunction, CellPropertyStyledFunction, CellContentType, Style } from './types';
+export declare const useAutoSizeColumn: (rows: number[], displayData: CellPropertyStyledFunction<CellContentType>, cellLayout: CellLayout, cellStyle: CellPropertyFunction<Style>, columnHeaders: RowOrColumnPropertyStyledFunction<CellContentType>, columnHeaderStyle: RowOrColumnPropertyFunction<Style>, canvasWidth: number, frozenColumns: number) => (x: number) => number;
+export declare const useAutoSizeRow: (columns: number[], displayData: CellPropertyStyledFunction<CellContentType>, cellLayout: CellLayout, cellStyle: CellPropertyFunction<Style>, columnHeaders: RowOrColumnPropertyStyledFunction<CellContentType>, columnHeaderStyle: RowOrColumnPropertyFunction<Style>, cellWidth: RowOrColumnPropertyFunction<number>, canvasHeight: number, frozenRows: number) => (y: number) => number;

package/dist/index.js

@@ -993,8 +993,8 @@ var useMouse = function useMouse(hitmapRef, selection, knobArea, editMode, editD
         _normalizeSelection2$2 = _normalizeSelection2[1],
         maxX = _normalizeSelection2$2[0],
         maxY = _normalizeSelection2$2[1];
-      var cellX = pixelToColumn(x, 0.5);
-      var cellY = pixelToRow(y, 0.5);
+      var cellX = Math.max(0, pixelToColumn(x, 0.5));
+      var cellY = Math.max(0, pixelToRow(y, 0.5));
       if (columnDrag) {
         var indices = columnDrag.indices;
         var insideSelection = cellX >= minX && cellX <= maxX + 1;
@@ -2018,12 +2018,13 @@ var wrapText = function wrapText(context, text, style, itemAlign, xCoord, yCoord
   newline(n);
 };
 
-var useAutoSizeColumn = function useAutoSizeColumn(rows, displayData, cellStyle, columnHeaders, columnHeaderStyle, canvasWidth) {
+var useAutoSizeColumn = function useAutoSizeColumn(rows, displayData, cellLayout, cellStyle, columnHeaders, columnHeaderStyle, canvasWidth, frozenColumns) {
   var context = React.useMemo(function () {
     return document.createElement('canvas').getContext('2d');
   }, []);
   var getAutoSizeWidth = React.useCallback(function (x) {
     if (!context) return 0;
+    var viewWidth = canvasWidth - cellLayout.columnToAbsolute(x < frozenColumns ? 0 : frozenColumns);
     var getWidth = function getWidth(cellContent, style) {
       context.font = style.fontWeight + ' ' + style.fontSize + 'px ' + style.fontFamily;
       var inlineMargin = style.marginLeft + style.marginRight;
@@ -2067,22 +2068,23 @@ var useAutoSizeColumn = function useAutoSizeColumn(rows, displayData, cellStyle,
         maxWidth = Math.max(maxWidth, getWidth(cellContent, style));
       }
     }
-    return Math.ceil(Math.min(canvasWidth, maxWidth));
-  }, [context, displayData, cellStyle, columnHeaders, columnHeaderStyle]);
+    return Math.ceil(Math.min(viewWidth, maxWidth));
+  }, [context, rows, displayData, cellLayout, cellStyle, columnHeaders, columnHeaderStyle, canvasWidth, frozenColumns]);
   return getAutoSizeWidth;
 };
-var useAutoSizeRow = function useAutoSizeRow(columns, displayData, cellStyle, columnHeaders, columnHeaderStyle, cellWidth, canvasHeight) {
+var useAutoSizeRow = function useAutoSizeRow(columns, displayData, cellLayout, cellStyle, columnHeaders, columnHeaderStyle, cellWidth, canvasHeight, frozenRows) {
   var context = React.useMemo(function () {
     return document.createElement('canvas').getContext('2d');
   }, []);
   var getAutoSizeHeight = React.useCallback(function (y) {
     if (!context) return 0;
+    var viewHeight = canvasHeight - cellLayout.rowToAbsolute(y < frozenRows ? 0 : frozenRows);
     var measureTextHeight = function measureTextHeight(text, style, columnWidth) {
       var maxY = 0;
       var measureY = function measureY(_t, _x, y) {
         maxY = y + style.lineHeight;
       };
-      wrapText(context, text, style, undefined, 0, 0, columnWidth, canvasHeight, measureY);
+      wrapText(context, text, style, undefined, 0, 0, columnWidth, viewHeight, measureY);
       return maxY;
     };
     var getHeight = function getHeight(cellContent, style, columnWidth) {
@@ -2093,13 +2095,19 @@ var useAutoSizeRow = function useAutoSizeRow(columns, displayData, cellStyle, co
         return height + verticalMargin;
       } else if (typeof cellContent === 'object') {
         var _maxHeight = 0;
-        for (var _iterator3 = _createForOfIteratorHelperLoose(cellContent.items), _step3; !(_step3 = _iterator3()).done;) {
-          var item = _step3.value;
-          if (item.absolute) continue;
+        var flexLayout = resolveCellFlexLayout(context, cellContent, 0, 0, columnWidth, 0);
+        for (var _iterator3 = _createForOfIteratorHelperLoose(flexLayout), _step3; !(_step3 = _iterator3()).done;) {
+          var _step3$value = _step3.value,
+            box = _step3$value.box,
+            item = _step3$value.item;
           if (item.height != null) {
             _maxHeight = Math.max(_maxHeight, item.height);
           } else if (item.display === 'inline' && item.text != null) {
-            var _height = measureTextHeight(item.text.toString(), style, columnWidth);
+            var _box$ = box[0],
+              left = _box$[0],
+              _box$2 = box[1],
+              right = _box$2[0];
+            var _height = measureTextHeight(item.text.toString(), style, right - left);
             _maxHeight = Math.max(_maxHeight, _height);
           }
         }
@@ -2118,8 +2126,8 @@ var useAutoSizeRow = function useAutoSizeRow(columns, displayData, cellStyle, co
         maxHeight = Math.max(maxHeight, getHeight(cellContent, style, columnWidth));
       }
     }
-    return Math.ceil(Math.min(canvasHeight, maxHeight));
-  }, [context, displayData, cellStyle, cellWidth]);
+    return Math.ceil(Math.min(viewHeight, maxHeight));
+  }, [context, columns, displayData, cellLayout, cellStyle, columnHeaders, columnHeaderStyle, cellWidth, canvasHeight, frozenRows]);
   return getAutoSizeHeight;
 };
 
@@ -3156,9 +3164,11 @@ var renderCell = function renderCell(context, imageRenderer, cellContent, style,
     var renderedFlex = resolveCellFlexLayout(context, cellContent, innerX, innerY, innerWidth, innerHeight);
     var renderedAbsolute = resolveCellAbsoluteLayout(cellContent, innerX, innerY, innerWidth, innerHeight);
     var rendered = [].concat(renderedFlex, renderedAbsolute);
-    clipToBox(context, innerX, innerY, innerWidth, innerHeight, function () {
+    clipToBox(context, xCoord, yCoord, cellWidth, cellHeight, function () {
       var _loop = function _loop() {
-        var render = _step12.value;
+        var _step12$value = _step12.value,
+          i = _step12$value[0],
+          render = _step12$value[1];
         var box = render.box,
           item = render.item;
         var _box$ = box[0],
@@ -3174,7 +3184,10 @@ var renderCell = function renderCell(context, imageRenderer, cellContent, style,
           context.strokeStyle = '#ff00ff';
           context.strokeRect(left + 0.5, top + 0.5, width - 0.5, height - 0.5);
         }
-        clipToBox(context, left, top, width, height, function () {
+        var clipLeft = i > 0 ? left : xCoord;
+        var clipRight = i < rendered.length ? right : yCoord + cellWidth;
+        var clipWidth = clipRight - clipLeft;
+        clipToBox(context, clipLeft, yCoord, clipWidth, cellHeight, function () {
           if (item.display === 'inline') {
             var text = item.text;
             if (text != null) {
@@ -3186,7 +3199,7 @@ var renderCell = function renderCell(context, imageRenderer, cellContent, style,
           }
         });
       };
-      for (var _iterator12 = _createForOfIteratorHelperLoose(rendered), _step12; !(_step12 = _iterator12()).done;) {
+      for (var _iterator12 = _createForOfIteratorHelperLoose(rendered.entries()), _step12; !(_step12 = _iterator12()).done;) {
         _loop();
       }
     });
@@ -3621,8 +3634,8 @@ var Sheet = React.forwardRef(function (props, ref) {
     clipboardApi = _useClipboardAPI.clipboardApi,
     onClipboardCopy = _useClipboardAPI.onClipboardCopy;
   var onScroll = useScroll(dataOffset, maxScroll, cellLayout, setDataOffset, setMaxScroll);
-  var getAutoSizeWidth = useAutoSizeColumn(visibleCells.rows, displayData, cellStyle, columnHeaders, columnHeaderStyle, canvasWidth);
-  var getAutoSizeHeight = useAutoSizeRow(visibleCells.columns, displayData, cellStyle, columnHeaders, columnHeaderStyle, cellWidth, canvasHeight);
+  var getAutoSizeWidth = useAutoSizeColumn(visibleCells.rows, displayData, cellLayout, cellStyle, columnHeaders, columnHeaderStyle, canvasWidth, freezeColumns);
+  var getAutoSizeHeight = useAutoSizeRow(visibleCells.columns, displayData, cellLayout, cellStyle, columnHeaders, columnHeaderStyle, cellWidth, canvasHeight, freezeRows);
   var _useMouse = useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, getAutoSizeWidth, getAutoSizeHeight, startEditingCell, commitEditingCell, setKnobArea, setDragIndices, setDragOffset, setDropTarget, changeSelection, setFocused, props.cacheLayout ? columnLayout.clearAfter : undefined, props.cacheLayout ? rowLayout.clearAfter : undefined, props.onChange, props.onColumnOrderChange, props.onRowOrderChange, props.onCellWidthChange, props.onCellHeightChange, props.onRightClick, props.dontCommitEditOnSelectionChange, props.dontChangeSelectionOnOrderChange),
     mouseHandlers = _useMouse.mouseHandlers,
     knobPosition = _useMouse.knobPosition;
@@ -3657,6 +3670,9 @@ var Sheet = React.forwardRef(function (props, ref) {
   var editTextAlign = 'right';
   var editTextLineHeight = '';
   var editTextMargin = '';
+  var editTextFontSize = DEFAULT_CELL_STYLE.fontSize;
+  var editTextFontFamily = DEFAULT_CELL_STYLE.fontFamily;
+  var editTextFontWeight = DEFAULT_CELL_STYLE.fontWeight;
   if (editMode) {
     var style = _extends({}, DEFAULT_CELL_STYLE, cellStyle.apply(void 0, editCell));
     editTextPosition = cellToPixel(editCell);
@@ -3665,6 +3681,9 @@ var Sheet = React.forwardRef(function (props, ref) {
     editTextHeight = cellHeight(editCellY) - 3;
     editTextAlign = style.textAlign;
     editTextLineHeight = style.lineHeight + "px";
+    editTextFontSize = style.fontSize;
+    editTextFontFamily = style.fontFamily;
+    editTextFontWeight = style.fontWeight;
     var yNudge = getDpiNudge();
     editTextMargin = style.marginTop - 1 + yNudge + "px " + (style.marginRight - 2) + "px " + (style.marginBottom - 2) + "px " + (style.marginLeft - 1) + "px";
     var editKey = editKeys.apply(void 0, editCell);
@@ -3692,8 +3711,9 @@ var Sheet = React.forwardRef(function (props, ref) {
       textAlign: editTextAlign,
       lineHeight: editTextLineHeight,
       color: 'black',
-      fontSize: DEFAULT_CELL_STYLE.fontSize,
-      fontFamily: 'sans-serif',
+      fontSize: editTextFontSize,
+      fontFamily: editTextFontFamily,
+      fontWeight: editTextFontWeight,
       resize: 'none'
     }
   };