@rowsncolumns/spreadsheet 10.5.2 → 10.5.5

package/dist/cjs/hooks/use-editor-submit.js

@@ -94,7 +94,7 @@ var planEntryFill = function (value, activeCell, selections) {
 };
 exports.planEntryFill = planEntryFill;
 var useEditorSubmit = function (_a) {
-    var sheetId = _a.sheetId, onChangeActiveSheet = _a.onChangeActiveSheet, setActiveCell = _a.setActiveCell, onChange = _a.onChange, onComplete = _a.onComplete, getCommitValidation = _a.getCommitValidation, showValidationAlert = _a.showValidationAlert, selections = _a.selections, onChangeBatch = _a.onChangeBatch, formulaLocale = _a.formulaLocale;
+    var sheetId = _a.sheetId, onChangeActiveSheet = _a.onChangeActiveSheet, setActiveCell = _a.setActiveCell, onChange = _a.onChange, onComplete = _a.onComplete, getCommitValidation = _a.getCommitValidation, showValidationAlert = _a.showValidationAlert, selections = _a.selections, onChangeBatch = _a.onChangeBatch, batchHistory = _a.batchHistory, formulaLocale = _a.formulaLocale;
     var _b = tslib_1.__read((0, formula_mode_atom_1.useFormulaMode)(), 2), formulaMode = _b[0], setFormulaMode = _b[1];
     var _c = tslib_1.__read((0, editing_cell_atom_1.useEditingCell)(), 2), _ = _c[0], setEditingCellCoordinate = _c[1];
     var setActiveEditor = (0, atoms_1.useSetActiveEditor)();
@@ -124,25 +124,44 @@ var useEditorSubmit = function (_a) {
                         onComplete === null || onComplete === void 0 ? void 0 : onComplete();
                     };
                     commit = function () {
-                        var e_3, _a;
-                        var _b;
-                        onChange === null || onChange === void 0 ? void 0 : onChange(editingSheetId, activeCell, value, textFormatRuns, previousValue, isDirty);
+                        var _a;
+                        var writeActiveCell = function () {
+                            return onChange === null || onChange === void 0 ? void 0 : onChange(editingSheetId, activeCell, value, textFormatRuns, previousValue, isDirty);
+                        };
                         // Ctrl+Enter: the same entry into every other selected cell (formulas shift per cell).
                         // Explicit per-cell values — never a read-back of the cell just written — so the spread
-                        // is correct even when the engine applies `onChange` asynchronously (legacy setState).
-                        if ((options === null || options === void 0 ? void 0 : options.fillSelection) && onChangeBatch) {
-                            try {
-                                for (var _c = tslib_1.__values((0, exports.planEntryFill)(value, activeCell, (_b = selectionsRef.current) !== null && _b !== void 0 ? _b : [])), _d = _c.next(); !_d.done; _d = _c.next()) {
-                                    var write = _d.value;
-                                    onChangeBatch(editingSheetId, write.range, write.values);
-                                }
-                            }
-                            catch (e_3_1) { e_3 = { error: e_3_1 }; }
-                            finally {
+                        // is correct even when the engine applies `onChange` asynchronously (legacy setState),
+                        // and so the writes can share one history batch (the rnc batcher defers them all).
+                        var fillWrites = (options === null || options === void 0 ? void 0 : options.fillSelection) && onChangeBatch
+                            ? (0, exports.planEntryFill)(value, activeCell, (_a = selectionsRef.current) !== null && _a !== void 0 ? _a : [])
+                            : [];
+                        if (fillWrites.length === 0) {
+                            writeActiveCell();
+                        }
+                        else {
+                            // One gesture, one undo entry: the active cell and every rectangle together.
+                            var writeAll = function () {
+                                var e_3, _a;
+                                writeActiveCell();
                                 try {
-                                    if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
+                                    for (var fillWrites_1 = tslib_1.__values(fillWrites), fillWrites_1_1 = fillWrites_1.next(); !fillWrites_1_1.done; fillWrites_1_1 = fillWrites_1.next()) {
+                                        var write = fillWrites_1_1.value;
+                                        onChangeBatch === null || onChangeBatch === void 0 ? void 0 : onChangeBatch(editingSheetId, write.range, write.values);
+                                    }
                                 }
-                                finally { if (e_3) throw e_3.error; }
+                                catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                                finally {
+                                    try {
+                                        if (fillWrites_1_1 && !fillWrites_1_1.done && (_a = fillWrites_1.return)) _a.call(fillWrites_1);
+                                    }
+                                    finally { if (e_3) throw e_3.error; }
+                                }
+                            };
+                            if (batchHistory) {
+                                batchHistory(writeAll);
+                            }
+                            else {
+                                writeAll();
                             }
                         }
                         // Switch to active sheet
@@ -208,6 +227,7 @@ var useEditorSubmit = function (_a) {
         getCommitValidation,
         showValidationAlert,
         onChangeBatch,
+        batchHistory,
         formulaLocale,
     ]);
 };

package/dist/cjs/hooks/use-export-range.d.ts

@@ -1,24 +1,32 @@
-import type { CellInterface, CellPosition, ScrollCoords, ViewPortProps } from "@rowsncolumns/grid";
+import type { ScrollCoords } from "@rowsncolumns/grid";
 import type { Layer } from "konva/lib/Layer";
 import type { CanvasGridMethods, CanvasGridProps, ExportFormats } from "../components/canvas-grid/typings";
 import type { SheetRange } from "../types";
+export type GridDimensions = {
+    containerWidth: number;
+    containerHeight: number;
+    estimatedTotalWidth: number;
+    estimatedTotalHeight: number;
+};
 export type UseExportRangeProps = {
     sheetId: number;
     gridLineWidth: number;
     cellBackgroundColor: string;
+    /** Frozen row count as the grid sees it (the header row included). */
+    frozenRows: number;
+    /** Frozen column count as the grid sees it (the header column included). */
+    frozenColumns: number;
     getCanvasLayers: () => Layer[] | undefined;
     getRowHeaderCanvasLayer: () => Layer[] | undefined;
     getColumnHeaderCanvasLayer: () => Layer[] | undefined;
     getSheetName: CanvasGridProps["getSheetName"];
-    getCellOffsetFromCoords(cell: CellInterface): CellPosition | undefined;
     getR1C1AddressFromSelection: CanvasGridMethods["getR1C1AddressFromSelection"];
     getScrollPosition(): ScrollCoords;
-    getViewPort(): ViewPortProps;
     getRowOffset(rowIndex: number): number;
     getColumnOffset(columnIndex: number): number;
     getSheetDimensions(): readonly [number, number];
-    scrollTo?(scrollCoords: ScrollCoords, immediate?: boolean): void;
-    scrollToCell?: CanvasGridMethods["scrollToCell"];
+    getGridDimensions(): GridDimensions | undefined;
+    scrollTo(scrollCoords: ScrollCoords, immediate?: boolean): void;
     scale?: number;
     onChangeScale?(scale: number): void;
 };
@@ -32,5 +40,5 @@ export type ExportRangeOutput = {
     (range: SheetRange, options: ExportRangeOptions<"clipboard">): Promise<void>;
     (range: SheetRange, options?: ExportRangeOptions): Promise<ArrayBuffer | Blob | void> | undefined;
 };
-export declare const useExportRange: ({ sheetId, gridLineWidth, cellBackgroundColor, getCanvasLayers, getColumnHeaderCanvasLayer, getRowHeaderCanvasLayer, getSheetName, getCellOffsetFromCoords, getR1C1AddressFromSelection, getScrollPosition, getViewPort, getRowOffset, getColumnOffset, getSheetDimensions, scrollTo, scrollToCell, scale, onChangeScale, }: UseExportRangeProps) => ExportRangeOutput;
+export declare const useExportRange: ({ sheetId, gridLineWidth, cellBackgroundColor, frozenRows, frozenColumns, getCanvasLayers, getColumnHeaderCanvasLayer, getRowHeaderCanvasLayer, getSheetName, getR1C1AddressFromSelection, getScrollPosition, getRowOffset, getColumnOffset, getSheetDimensions, getGridDimensions, scrollTo, scale, onChangeScale, }: UseExportRangeProps) => ExportRangeOutput;
 //# sourceMappingURL=use-export-range.d.ts.map

package/dist/cjs/hooks/use-export-range.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-export-range.d.ts","sourceRoot":"","sources":["../../../hooks/use-export-range.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,aAAa,EACd,MAAM,oBAAoB,CAAC;AAG5B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAG7C,OAAO,KAAK,EACV,iBAAiB,EACjB,eAAe,EACf,aAAa,EACd,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG3C,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,eAAe,EAAE,MAAM,KAAK,EAAE,GAAG,SAAS,CAAC;IAC3C,uBAAuB,EAAE,MAAM,KAAK,EAAE,GAAG,SAAS,CAAC;IACnD,0BAA0B,EAAE,MAAM,KAAK,EAAE,GAAG,SAAS,CAAC;IACtD,YAAY,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;IAC9C,uBAAuB,CAAC,IAAI,EAAE,aAAa,GAAG,YAAY,GAAG,SAAS,CAAC;IACvE,2BAA2B,EAAE,iBAAiB,CAAC,6BAA6B,CAAC,CAAC;IAC9E,iBAAiB,IAAI,YAAY,CAAC;IAClC,WAAW,IAAI,aAAa,CAAC;IAC7B,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IACvC,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7C,kBAAkB,IAAI,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,QAAQ,CAAC,CAAC,YAAY,EAAE,YAAY,EAAE,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACjE,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,IAAI;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,CAAC;IACX,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,kBAAkB,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxE,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,kBAAkB,CAAC,WAAW,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7E,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,EAAE,kBAAkB,GAC5C,OAAO,CAAC,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC,GAClC,SAAS,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,6TAmB5B,mBAAmB,KAAG,iBAkTxB,CAAC"}
+{"version":3,"file":"use-export-range.d.ts","sourceRoot":"","sources":["../../../hooks/use-export-range.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAG7C,OAAO,KAAK,EACV,iBAAiB,EACjB,eAAe,EACf,aAAa,EACd,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAU3C,MAAM,MAAM,cAAc,GAAG;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,oBAAoB,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,sEAAsE;IACtE,UAAU,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,aAAa,EAAE,MAAM,CAAC;IACtB,eAAe,EAAE,MAAM,KAAK,EAAE,GAAG,SAAS,CAAC;IAC3C,uBAAuB,EAAE,MAAM,KAAK,EAAE,GAAG,SAAS,CAAC;IACnD,0BAA0B,EAAE,MAAM,KAAK,EAAE,GAAG,SAAS,CAAC;IACtD,YAAY,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;IAC9C,2BAA2B,EAAE,iBAAiB,CAAC,6BAA6B,CAAC,CAAC;IAC9E,iBAAiB,IAAI,YAAY,CAAC;IAClC,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;IACvC,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7C,kBAAkB,IAAI,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,iBAAiB,IAAI,cAAc,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,YAAY,EAAE,YAAY,EAAE,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,IAAI;IACxE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,CAAC,CAAC;IACX,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,kBAAkB,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxE,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,kBAAkB,CAAC,WAAW,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7E,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,EAAE,kBAAkB,GAC5C,OAAO,CAAC,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC,GAClC,SAAS,CAAC;CACf,CAAC;AA2EF,eAAO,MAAM,cAAc,GAAI,uTAmB5B,mBAAmB,KAAG,iBAoPxB,CAAC"}

package/dist/cjs/hooks/use-export-range.js

@@ -3,54 +3,107 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useExportRange = void 0;
 var tslib_1 = require("tslib");
 var grid_1 = require("@rowsncolumns/grid");
-var grid_2 = require("@rowsncolumns/grid");
 var react_1 = require("react");
+var export_range_tiles_1 = require("./export-range-tiles");
 var use_callback_ref_1 = require("./use-callback-ref");
+var use_stable_ref_1 = require("./use-stable-ref");
+/** The export zooms out this far to fit a range in the viewport before it tiles. */
+var MIN_EXPORT_SCALE = 0.25;
+/**
+ * Frames to keep waiting for a repaint that never comes (a host that ignores
+ * `onChangeScale`, a scroll the grid clamped elsewhere). The capture then goes
+ * on from whatever the grid did land on, so the output stays right.
+ */
+var PAINT_WAIT_FRAME_BUDGET = 120;
+/** A scrollbar-driven scroll can settle a hair off the requested offset on sheets taller than the scrollbar can address. */
+var SCROLL_TOLERANCE = 2;
+/**
+ * Resolves once the layer has repainted with `ready()` holding and a whole
+ * animation frame has then passed without another paint. The grid's canvas is
+ * drawn by react-konva's batched draw on the frame after a React commit, and a
+ * windowed engine folds the rows of a freshly scrolled-to viewport in a second
+ * commit right behind the first — the quiet frame is what lets that second
+ * paint land before the copy, instead of a fixed number of frames that may or
+ * may not cover it. Paints from before `ready()` held do not count.
+ */
+var waitForPaint = function (layer, ready) {
+    return new Promise(function (resolve) {
+        var paintedThisFrame = false;
+        var paintedWhileReady = false;
+        var frames = 0;
+        var onDraw = function () {
+            paintedThisFrame = true;
+        };
+        layer.on("draw", onDraw);
+        var finish = function () {
+            layer.off("draw", onDraw);
+            resolve();
+        };
+        var tick = function () {
+            frames += 1;
+            if (!ready()) {
+                paintedThisFrame = false;
+                paintedWhileReady = false;
+            }
+            else if (paintedThisFrame) {
+                paintedThisFrame = false;
+                paintedWhileReady = true;
+            }
+            else if (paintedWhileReady) {
+                finish();
+                return;
+            }
+            if (frames >= PAINT_WAIT_FRAME_BUDGET) {
+                finish();
+                return;
+            }
+            requestAnimationFrame(tick);
+        };
+        requestAnimationFrame(tick);
+    });
+};
+var isAtScroll = function (position, target) {
+    return Math.abs(position.scrollTop - target.scrollTop) <= SCROLL_TOLERANCE &&
+        Math.abs(position.scrollLeft - target.scrollLeft) <= SCROLL_TOLERANCE;
+};
+var getFileExtension = function (fmt) {
+    switch (fmt) {
+        case "image/jpeg":
+        case "image/jpg":
+            return ".jpg";
+        case "image/webp":
+            return ".webp";
+        case "image/png":
+        default:
+            return ".png";
+    }
+};
 var useExportRange = function (_a) {
-    var sheetId = _a.sheetId, gridLineWidth = _a.gridLineWidth, cellBackgroundColor = _a.cellBackgroundColor, getCanvasLayers = _a.getCanvasLayers, getColumnHeaderCanvasLayer = _a.getColumnHeaderCanvasLayer, getRowHeaderCanvasLayer = _a.getRowHeaderCanvasLayer, getSheetName = _a.getSheetName, getCellOffsetFromCoords = _a.getCellOffsetFromCoords, getR1C1AddressFromSelection = _a.getR1C1AddressFromSelection, getScrollPosition = _a.getScrollPosition, getViewPort = _a.getViewPort, getRowOffset = _a.getRowOffset, getColumnOffset = _a.getColumnOffset, getSheetDimensions = _a.getSheetDimensions, scrollTo = _a.scrollTo, scrollToCell = _a.scrollToCell, scale = _a.scale, onChangeScale = _a.onChangeScale;
+    var sheetId = _a.sheetId, gridLineWidth = _a.gridLineWidth, cellBackgroundColor = _a.cellBackgroundColor, frozenRows = _a.frozenRows, frozenColumns = _a.frozenColumns, getCanvasLayers = _a.getCanvasLayers, getColumnHeaderCanvasLayer = _a.getColumnHeaderCanvasLayer, getRowHeaderCanvasLayer = _a.getRowHeaderCanvasLayer, getSheetName = _a.getSheetName, getR1C1AddressFromSelection = _a.getR1C1AddressFromSelection, getScrollPosition = _a.getScrollPosition, getRowOffset = _a.getRowOffset, getColumnOffset = _a.getColumnOffset, getSheetDimensions = _a.getSheetDimensions, getGridDimensions = _a.getGridDimensions, scrollTo = _a.scrollTo, scale = _a.scale, onChangeScale = _a.onChangeScale;
+    // The capture spans renders; this is how it sees the scale the host applied.
+    var scaleRef = (0, use_stable_ref_1.useStableRef)(scale);
     return (0, use_callback_ref_1.useCallbackRef)((0, react_1.useCallback)(function (range, options) {
         var layers = getCanvasLayers();
-        if (!(layers === null || layers === void 0 ? void 0 : layers.length))
+        var layer = layers === null || layers === void 0 ? void 0 : layers[0];
+        if (!layer)
             return undefined;
         var _a = options || {}, filename = _a.filename, format = _a.format, includeHeaders = _a.includeHeaders;
         var baseScale = scale !== null && scale !== void 0 ? scale : 1;
-        var minExportScale = 0.25;
-        var waitForPaint = function () {
-            return new Promise(function (resolve) {
-                requestAnimationFrame(function () {
-                    requestAnimationFrame(function () { return resolve(); });
-                });
-            });
-        };
-        var normalizeRangeStart = function (rangeValue) { return (tslib_1.__assign(tslib_1.__assign({}, rangeValue), { startRowIndex: Math.max(1, rangeValue.startRowIndex), startColumnIndex: Math.max(1, rangeValue.startColumnIndex) })); };
-        var isStartInViewport = function (viewport, normalizedRange) {
-            return normalizedRange.startRowIndex >= viewport.visibleRowStartIndex &&
-                normalizedRange.startRowIndex <= viewport.visibleRowStopIndex &&
-                normalizedRange.startColumnIndex >=
-                    viewport.visibleColumnStartIndex &&
-                normalizedRange.startColumnIndex <= viewport.visibleColumnStopIndex;
-        };
-        var isRangeInViewport = function (viewport, normalizedRange) {
-            return normalizedRange.startRowIndex >= viewport.visibleRowStartIndex &&
-                normalizedRange.endRowIndex <= viewport.visibleRowStopIndex &&
-                normalizedRange.startColumnIndex >=
-                    viewport.visibleColumnStartIndex &&
-                normalizedRange.endColumnIndex <= viewport.visibleColumnStopIndex;
-        };
+        var normalizedRange = tslib_1.__assign(tslib_1.__assign({}, range), { startRowIndex: Math.max(1, range.startRowIndex), startColumnIndex: Math.max(1, range.startColumnIndex) });
         var exportRangeAsync = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
-            var initialScrollCoords, nextScale, didScroll, startX, endX, startY, endY, currentWidth, currentHeight, _a, viewWidth, viewHeight, unscaledWidth, unscaledHeight, fitScale, minScale, normalizedRange, viewport, viewportAfterStart, scrollCoords, tl, br, sheetName, dpr, baseX, baseY, baseWidth, baseHeight, headerWidth, headerHeight, destX, destY, width, height, finalFileName, getFileExtension, bodyCanvas, rowHeaderCanvas, columnHeaderCanvas, canvas, tempCanvas_1, tempCtx, intermediateCanvas, intermediateCtx, bodySourceX, bodySourceY, dataURL, anchor, shouldRestoreScale;
-            var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-            return tslib_1.__generator(this, function (_q) {
-                switch (_q.label) {
+            var initialScrollCoords, nextScale, startX, endX, startY, endY, currentWidth, currentHeight, _a, viewWidth, viewHeight, unscaledWidth, unscaledHeight, fitScale, minScale, dimensions, headerWidth, headerHeight, rangeLeft, rangeRight, rangeTop, rangeBottom, scrollAtPlan, stops, sheetName, dpr_1, width, height, finalFileName, canvases_1, tempCanvas_1, tempCtx_1, copyPiece, _loop_1, stops_1, stops_1_1, stop_1, e_1_1, dataURL, anchor, shouldRestoreScale, current;
+            var e_1, _b;
+            var _c, _d, _e, _f, _g, _h;
+            return tslib_1.__generator(this, function (_j) {
+                switch (_j.label) {
                     case 0:
                         initialScrollCoords = getScrollPosition();
                         nextScale = baseScale;
-                        didScroll = false;
                         if (onChangeScale) {
-                            startX = getColumnOffset(range.startColumnIndex);
-                            endX = getColumnOffset(range.endColumnIndex + 1);
-                            startY = getRowOffset(range.startRowIndex);
-                            endY = getRowOffset(range.endRowIndex + 1);
+                            startX = getColumnOffset(normalizedRange.startColumnIndex);
+                            endX = getColumnOffset(normalizedRange.endColumnIndex + 1);
+                            startY = getRowOffset(normalizedRange.startRowIndex);
+                            endY = getRowOffset(normalizedRange.endRowIndex + 1);
                             currentWidth = Math.max(endX - startX, 0);
                             currentHeight = Math.max(endY - startY, 0);
                             _a = tslib_1.__read(getSheetDimensions(), 2), viewWidth = _a[0], viewHeight = _a[1];
@@ -58,124 +111,148 @@ var useExportRange = function (_a) {
                                 unscaledWidth = currentWidth / baseScale;
                                 unscaledHeight = currentHeight / baseScale;
                                 fitScale = Math.min(viewWidth / unscaledWidth, viewHeight / unscaledHeight, baseScale);
-                                minScale = Math.min(minExportScale, baseScale);
+                                minScale = Math.min(MIN_EXPORT_SCALE, baseScale);
                                 nextScale = Math.min(Math.max(fitScale, minScale), baseScale);
                             }
                         }
-                        _q.label = 1;
+                        _j.label = 1;
                     case 1:
-                        _q.trys.push([1, , 10, 15]);
+                        _j.trys.push([1, , 14, 19]);
                         if (!(onChangeScale && nextScale !== baseScale)) return [3 /*break*/, 3];
                         onChangeScale(nextScale);
-                        return [4 /*yield*/, waitForPaint()];
+                        return [4 /*yield*/, waitForPaint(layer, function () { return scaleRef.current === nextScale; })];
                     case 2:
-                        _q.sent();
-                        _q.label = 3;
+                        _j.sent();
+                        _j.label = 3;
                     case 3:
-                        normalizedRange = normalizeRangeStart(range);
-                        viewport = getViewPort();
-                        if (!!isStartInViewport(viewport, normalizedRange)) return [3 /*break*/, 5];
-                        scrollToCell === null || scrollToCell === void 0 ? void 0 : scrollToCell({
-                            rowIndex: normalizedRange.startRowIndex,
-                            columnIndex: normalizedRange.startColumnIndex,
-                        }, grid_1.Align.start);
-                        didScroll = true;
-                        return [4 /*yield*/, waitForPaint()];
-                    case 4:
-                        _q.sent();
-                        _q.label = 5;
-                    case 5:
-                        viewportAfterStart = getViewPort();
-                        if (!!isRangeInViewport(viewportAfterStart, normalizedRange)) return [3 /*break*/, 7];
-                        scrollToCell === null || scrollToCell === void 0 ? void 0 : scrollToCell({
-                            rowIndex: normalizedRange.endRowIndex,
-                            columnIndex: normalizedRange.endColumnIndex,
-                        }, grid_1.Align.end);
-                        didScroll = true;
-                        return [4 /*yield*/, waitForPaint()];
-                    case 6:
-                        _q.sent();
-                        _q.label = 7;
-                    case 7:
-                        scrollCoords = getScrollPosition();
-                        tl = getCellOffsetFromCoords({
-                            rowIndex: normalizedRange.startRowIndex,
-                            columnIndex: normalizedRange.startColumnIndex,
-                        });
-                        br = getCellOffsetFromCoords({
-                            rowIndex: normalizedRange.endRowIndex,
-                            columnIndex: normalizedRange.endColumnIndex,
-                        });
-                        // @ts-ignore
-                        tl.x -= scrollCoords.scrollLeft;
-                        // @ts-ignore
-                        tl.y -= scrollCoords.scrollTop;
-                        // @ts-ignore
-                        br.x -= scrollCoords.scrollLeft;
-                        // @ts-ignore
-                        br.y -= scrollCoords.scrollTop;
-                        sheetName = getSheetName === null || getSheetName === void 0 ? void 0 : getSheetName((_b = range.sheetId) !== null && _b !== void 0 ? _b : sheetId);
-                        dpr = (0, grid_2.getDevicePixelRatio)();
-                        baseX = (_c = tl === null || tl === void 0 ? void 0 : tl.x) !== null && _c !== void 0 ? _c : 0;
-                        baseY = (_d = tl === null || tl === void 0 ? void 0 : tl.y) !== null && _d !== void 0 ? _d : 0;
-                        baseWidth = ((_e = br === null || br === void 0 ? void 0 : br.x) !== null && _e !== void 0 ? _e : 0) - baseX + ((_f = br === null || br === void 0 ? void 0 : br.width) !== null && _f !== void 0 ? _f : 0) + gridLineWidth;
-                        baseHeight = ((_g = br === null || br === void 0 ? void 0 : br.y) !== null && _g !== void 0 ? _g : 0) - baseY + ((_h = br === null || br === void 0 ? void 0 : br.height) !== null && _h !== void 0 ? _h : 0) + gridLineWidth;
+                        dimensions = getGridDimensions();
+                        if (!dimensions)
+                            return [2 /*return*/, undefined];
                         headerWidth = includeHeaders ? getColumnOffset(1) : 0;
                         headerHeight = includeHeaders ? getRowOffset(1) : 0;
-                        destX = headerWidth;
-                        destY = headerHeight;
-                        width = baseWidth + headerWidth;
-                        height = baseHeight + headerHeight;
-                        finalFileName = filename !== null && filename !== void 0 ? filename : (_j = getR1C1AddressFromSelection === null || getR1C1AddressFromSelection === void 0 ? void 0 : getR1C1AddressFromSelection(normalizedRange, sheetName)) === null || _j === void 0 ? void 0 : _j.substring(1);
-                        getFileExtension = function (fmt) {
-                            switch (fmt) {
-                                case "image/jpeg":
-                                case "image/jpg":
-                                    return ".jpg";
-                                case "image/webp":
-                                    return ".webp";
-                                case "image/png":
-                                default:
-                                    return ".png";
-                            }
+                        rangeLeft = getColumnOffset(normalizedRange.startColumnIndex);
+                        rangeRight = getColumnOffset(normalizedRange.endColumnIndex + 1) +
+                            gridLineWidth;
+                        rangeTop = getRowOffset(normalizedRange.startRowIndex);
+                        rangeBottom = getRowOffset(normalizedRange.endRowIndex + 1) + gridLineWidth;
+                        scrollAtPlan = getScrollPosition();
+                        stops = (0, export_range_tiles_1.planExportStops)({
+                            x: {
+                                rangeStart: rangeLeft,
+                                rangeEnd: rangeRight,
+                                frozenSize: getColumnOffset(frozenColumns),
+                                viewportSize: dimensions.containerWidth,
+                                maxScroll: Math.max(0, dimensions.estimatedTotalWidth - dimensions.containerWidth),
+                                currentScroll: scrollAtPlan.scrollLeft,
+                                headerSize: headerWidth,
+                            },
+                            y: {
+                                rangeStart: rangeTop,
+                                rangeEnd: rangeBottom,
+                                frozenSize: getRowOffset(frozenRows),
+                                viewportSize: dimensions.containerHeight,
+                                maxScroll: Math.max(0, dimensions.estimatedTotalHeight - dimensions.containerHeight),
+                                currentScroll: scrollAtPlan.scrollTop,
+                                headerSize: headerHeight,
+                            },
+                        });
+                        sheetName = getSheetName === null || getSheetName === void 0 ? void 0 : getSheetName((_c = range.sheetId) !== null && _c !== void 0 ? _c : sheetId);
+                        dpr_1 = (0, grid_1.getDevicePixelRatio)();
+                        width = rangeRight - rangeLeft + headerWidth;
+                        height = rangeBottom - rangeTop + headerHeight;
+                        finalFileName = filename !== null && filename !== void 0 ? filename : (_d = getR1C1AddressFromSelection === null || getR1C1AddressFromSelection === void 0 ? void 0 : getR1C1AddressFromSelection(normalizedRange, sheetName)) === null || _d === void 0 ? void 0 : _d.substring(1);
+                        canvases_1 = {
+                            body: layer.getCanvas()._canvas,
+                            rowHeader: includeHeaders
+                                ? (_f = (_e = getRowHeaderCanvasLayer()) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.getCanvas()._canvas
+                                : null,
+                            columnHeader: includeHeaders
+                                ? (_h = (_g = getColumnHeaderCanvasLayer()) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.getCanvas()._canvas
+                                : null,
                         };
-                        bodyCanvas = (_k = layers[0]) === null || _k === void 0 ? void 0 : _k.getCanvas()._canvas;
-                        rowHeaderCanvas = includeHeaders
-                            ? (_m = (_l = getRowHeaderCanvasLayer()) === null || _l === void 0 ? void 0 : _l[0]) === null || _m === void 0 ? void 0 : _m.getCanvas()._canvas
-                            : null;
-                        columnHeaderCanvas = includeHeaders
-                            ? (_p = (_o = getColumnHeaderCanvasLayer()) === null || _o === void 0 ? void 0 : _o[0]) === null || _p === void 0 ? void 0 : _p.getCanvas()._canvas
-                            : null;
-                        if (!bodyCanvas)
+                        if (!canvases_1.body)
                             return [2 /*return*/, undefined];
-                        canvas = bodyCanvas;
                         tempCanvas_1 = document.createElement("canvas");
-                        tempCanvas_1.width = width * dpr;
-                        tempCanvas_1.height = height * dpr;
-                        tempCtx = tempCanvas_1.getContext("2d");
-                        intermediateCanvas = document.createElement("canvas");
-                        intermediateCanvas.width = width * dpr;
-                        intermediateCanvas.height = height * dpr;
-                        intermediateCtx = intermediateCanvas.getContext("2d");
-                        bodySourceX = baseX;
-                        bodySourceY = baseY;
-                        if (intermediateCtx) {
-                            intermediateCtx.drawImage(canvas, bodySourceX * dpr, bodySourceY * dpr, baseWidth * dpr, baseHeight * dpr, destX * dpr, destY * dpr, baseWidth * dpr, baseHeight * dpr);
+                        tempCanvas_1.width = width * dpr_1;
+                        tempCanvas_1.height = height * dpr_1;
+                        tempCtx_1 = tempCanvas_1.getContext("2d");
+                        if (tempCtx_1) {
+                            tempCtx_1.fillStyle = cellBackgroundColor;
+                            tempCtx_1.fillRect(0, 0, tempCanvas_1.width, tempCanvas_1.height);
                         }
-                        if (tempCtx) {
-                            tempCtx.fillStyle = cellBackgroundColor;
-                            tempCtx.fillRect(0, 0, tempCanvas_1.width, tempCanvas_1.height);
-                            tempCtx.drawImage(intermediateCanvas, 0, 0);
-                            if (includeHeaders) {
-                                if (columnHeaderCanvas) {
-                                    tempCtx.drawImage(columnHeaderCanvas, baseX * dpr, 0, baseWidth * dpr, headerHeight * dpr, destX * dpr, 0, baseWidth * dpr, headerHeight * dpr);
-                                }
-                                if (rowHeaderCanvas) {
-                                    tempCtx.drawImage(rowHeaderCanvas, 0, baseY * dpr, headerWidth * dpr, baseHeight * dpr, 0, destY * dpr, headerWidth * dpr, baseHeight * dpr);
+                        copyPiece = function (piece, landed) {
+                            var source = canvases_1[piece.canvas];
+                            if (!tempCtx_1 || !source)
+                                return;
+                            var sx = (0, export_range_tiles_1.sourceOffset)(piece.x, landed.scrollLeft);
+                            var sy = (0, export_range_tiles_1.sourceOffset)(piece.y, landed.scrollTop);
+                            tempCtx_1.drawImage(source, sx * dpr_1, sy * dpr_1, piece.x.size * dpr_1, piece.y.size * dpr_1, piece.x.dest * dpr_1, piece.y.dest * dpr_1, piece.x.size * dpr_1, piece.y.size * dpr_1);
+                        };
+                        _loop_1 = function (stop_1) {
+                            var target, landed, _k, _l, piece;
+                            var e_2, _m;
+                            return tslib_1.__generator(this, function (_o) {
+                                switch (_o.label) {
+                                    case 0:
+                                        target = {
+                                            scrollTop: stop_1.scrollTop,
+                                            scrollLeft: stop_1.scrollLeft,
+                                        };
+                                        if (!!isAtScroll(getScrollPosition(), target)) return [3 /*break*/, 2];
+                                        scrollTo(target, true);
+                                        return [4 /*yield*/, waitForPaint(layer, function () {
+                                                return isAtScroll(getScrollPosition(), target);
+                                            })];
+                                    case 1:
+                                        _o.sent();
+                                        _o.label = 2;
+                                    case 2:
+                                        landed = getScrollPosition();
+                                        try {
+                                            for (_k = (e_2 = void 0, tslib_1.__values(stop_1.pieces)), _l = _k.next(); !_l.done; _l = _k.next()) {
+                                                piece = _l.value;
+                                                copyPiece(piece, landed);
+                                            }
+                                        }
+                                        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                                        finally {
+                                            try {
+                                                if (_l && !_l.done && (_m = _k.return)) _m.call(_k);
+                                            }
+                                            finally { if (e_2) throw e_2.error; }
+                                        }
+                                        return [2 /*return*/];
                                 }
-                            }
+                            });
+                        };
+                        _j.label = 4;
+                    case 4:
+                        _j.trys.push([4, 9, 10, 11]);
+                        stops_1 = tslib_1.__values(stops), stops_1_1 = stops_1.next();
+                        _j.label = 5;
+                    case 5:
+                        if (!!stops_1_1.done) return [3 /*break*/, 8];
+                        stop_1 = stops_1_1.value;
+                        return [5 /*yield**/, _loop_1(stop_1)];
+                    case 6:
+                        _j.sent();
+                        _j.label = 7;
+                    case 7:
+                        stops_1_1 = stops_1.next();
+                        return [3 /*break*/, 5];
+                    case 8: return [3 /*break*/, 11];
+                    case 9:
+                        e_1_1 = _j.sent();
+                        e_1 = { error: e_1_1 };
+                        return [3 /*break*/, 11];
+                    case 10:
+                        try {
+                            if (stops_1_1 && !stops_1_1.done && (_b = stops_1.return)) _b.call(stops_1);
                         }
-                        if (!(format === "clipboard")) return [3 /*break*/, 9];
+                        finally { if (e_1) throw e_1.error; }
+                        return [7 /*endfinally*/];
+                    case 11:
+                        if (!(format === "clipboard")) return [3 /*break*/, 13];
                         return [4 /*yield*/, new Promise(function (resolve, reject) {
                                 tempCanvas_1.toBlob(function (blob) {
                                     if (!blob) {
@@ -186,10 +263,10 @@ var useExportRange = function (_a) {
                                     navigator.clipboard.write([item]).then(resolve).catch(reject);
                                 }, "image/png");
                             })];
-                    case 8:
-                        _q.sent();
+                    case 12:
+                        _j.sent();
                         return [2 /*return*/, undefined];
-                    case 9:
+                    case 13:
                         if (format === "blob") {
                             return [2 /*return*/, new Promise(function (resolve, reject) {
                                     tempCanvas_1.toBlob(function (blob) {
@@ -214,23 +291,27 @@ var useExportRange = function (_a) {
                                     blob === null || blob === void 0 ? void 0 : blob.arrayBuffer().then(resolve);
                                 });
                             })];
-                    case 10:
+                    case 14:
                         shouldRestoreScale = onChangeScale && nextScale !== baseScale;
-                        if (!shouldRestoreScale) return [3 /*break*/, 12];
+                        if (!shouldRestoreScale) return [3 /*break*/, 16];
                         onChangeScale(baseScale);
-                        return [4 /*yield*/, waitForPaint()];
-                    case 11:
-                        _q.sent();
-                        _q.label = 12;
-                    case 12:
-                        if (!(didScroll || shouldRestoreScale)) return [3 /*break*/, 14];
-                        scrollTo === null || scrollTo === void 0 ? void 0 : scrollTo(initialScrollCoords, true);
-                        return [4 /*yield*/, waitForPaint()];
-                    case 13:
-                        _q.sent();
-                        _q.label = 14;
-                    case 14: return [7 /*endfinally*/];
-                    case 15: return [2 /*return*/];
+                        return [4 /*yield*/, waitForPaint(layer, function () { return scaleRef.current === baseScale; })];
+                    case 15:
+                        _j.sent();
+                        _j.label = 16;
+                    case 16:
+                        current = getScrollPosition();
+                        if (!(current.scrollTop !== initialScrollCoords.scrollTop ||
+                            current.scrollLeft !== initialScrollCoords.scrollLeft)) return [3 /*break*/, 18];
+                        scrollTo(initialScrollCoords, true);
+                        return [4 /*yield*/, waitForPaint(layer, function () {
+                                return isAtScroll(getScrollPosition(), initialScrollCoords);
+                            })];
+                    case 17:
+                        _j.sent();
+                        _j.label = 18;
+                    case 18: return [7 /*endfinally*/];
+                    case 19: return [2 /*return*/];
                 }
             });
         }); };
@@ -239,21 +320,22 @@ var useExportRange = function (_a) {
         sheetId,
         gridLineWidth,
         cellBackgroundColor,
+        frozenRows,
+        frozenColumns,
         getCanvasLayers,
-        getCellOffsetFromCoords,
         getSheetName,
         getR1C1AddressFromSelection,
         getScrollPosition,
-        getViewPort,
         getColumnHeaderCanvasLayer,
         getRowHeaderCanvasLayer,
         getRowOffset,
         getColumnOffset,
         getSheetDimensions,
+        getGridDimensions,
         scrollTo,
-        scrollToCell,
         scale,
         onChangeScale,
+        scaleRef,
     ]));
 };
 exports.useExportRange = useExportRange;