@rowsncolumns/spreadsheet 10.2.68

package/dist/esm/hooks/use-embeds-charts.js

@@ -0,0 +1,276 @@
+import React, { useCallback, useMemo } from "react";
+import { useSelectedChartEmbed } from "../atoms";
+import { ChartComponent, EmbedComponent, EmbedDraggable, SlicerComponent, } from "../components/embeds";
+import { DEFAULT_OVERLAY_POSITION } from "../config";
+/**
+ * Get placement of an item based on anchor cell position
+ */
+export const getOverlayPlacement = (anchorCell, frozenRows, frozenColumns) => {
+    if (!anchorCell)
+        return "body";
+    const { rowIndex, columnIndex } = anchorCell;
+    const inFrozenRow = rowIndex < frozenRows;
+    const inFrozenColumn = columnIndex < frozenColumns;
+    if (inFrozenRow && inFrozenColumn)
+        return "intersection";
+    if (inFrozenRow)
+        return "frozenRow";
+    if (inFrozenColumn)
+        return "frozenColumn";
+    return "body";
+};
+const defaultGetChartComponent = (props) => (React.createElement(ChartComponent, { ...props }));
+const defaultGetEmbedComponent = (props) => (React.createElement(EmbedComponent, { ...props }));
+const defaultGetSlicerComponent = (props) => (React.createElement(SlicerComponent, { ...props }));
+// Validate embed object
+const validateEmbeds = (embedsOrCharts, sheetId) => {
+    return embedsOrCharts?.map((obj) => {
+        if (typeof obj.position !== "object") {
+            return {
+                ...obj,
+                position: {
+                    overlayPosition: DEFAULT_OVERLAY_POSITION,
+                    sheetId,
+                },
+            };
+        }
+        return obj;
+    });
+};
+export const useEmbedsCharts = ({ scale = 1, charts, embeds, slicers, sheetId, frozenRows = 0, frozenColumns = 0, getCellOffsetFromCoords, getCellCoordsFromOffset, getAbsolutePositionFromOffset, getBounds, selectedColor = "#1a73e8", onMoveChart, onResizeChart, onMoveEmbed, onResizeEmbed, onDeleteChart, onDeleteEmbed, onRequestEditEmbed, onMoveSlicer, onResizeSlicer, onDeleteSlicer, onRequestEditSlicer, onFilterTable, onFilterPivot, tables, pivotTables, getFormattedValue, getChartComponent = defaultGetChartComponent, getEmbedComponent = defaultGetEmbedComponent, getSlicerComponent = defaultGetSlicerComponent, readonly, theme, backgroundColor, disabled, }) => {
+    const [selectedIndex, setSelectedIndex] = useSelectedChartEmbed();
+    /**
+     * When user selects the sheet
+     */
+    const handleMouseDown = useCallback(() => {
+        setSelectedIndex(undefined);
+    }, [setSelectedIndex]);
+    const getCellPosition = useCallback((x, y) => {
+        const position = getAbsolutePositionFromOffset(x, y);
+        // Use includeFrozen=true to detect cells in all regions
+        const anchorCell = getCellCoordsFromOffset(position?.x ?? 0, position?.y ?? 0, true);
+        const cellPosition = anchorCell
+            ? getCellOffsetFromCoords(anchorCell)
+            : undefined;
+        if (anchorCell && cellPosition) {
+            return [anchorCell, x - cellPosition.x, y - cellPosition.y];
+        }
+    }, [
+        getCellOffsetFromCoords,
+        getCellCoordsFromOffset,
+        getAbsolutePositionFromOffset,
+    ]);
+    // Callback when user moves a chart
+    const handleMove = useCallback((id, x, y) => {
+        const position = getCellPosition(x, y);
+        if (!position) {
+            return;
+        }
+        const [anchorCell, offsetXPixels, offsetYPixels] = position;
+        onMoveChart?.(id, anchorCell, offsetXPixels, offsetYPixels);
+    }, [onMoveChart, getCellPosition]);
+    // Callback when resizes an embed
+    const handleEmbedResize = useCallback((id, x, y, width, height) => {
+        const position = getCellPosition(x, y);
+        if (!position) {
+            return;
+        }
+        const [anchorCell, offsetXPixels, offsetYPixels] = position;
+        onResizeEmbed?.(id, sheetId, anchorCell, offsetXPixels, offsetYPixels, width, height);
+    }, [onResizeEmbed, sheetId, getCellPosition]);
+    // Callback when user moves a chart
+    const handleEmbedMove = useCallback((id, x, y) => {
+        const position = getCellPosition(x, y);
+        if (!position) {
+            return;
+        }
+        const [anchorCell, offsetXPixels, offsetYPixels] = position;
+        onMoveEmbed?.(id, sheetId, anchorCell, offsetXPixels, offsetYPixels);
+    }, [onMoveEmbed, sheetId, getCellPosition]);
+    // Callback when resizes a chart
+    const handleResize = useCallback((id, x, y, width, height) => {
+        const position = getCellPosition(x, y);
+        if (!position) {
+            return;
+        }
+        const [anchorCell, offsetXPixels, offsetYPixels] = position;
+        onResizeChart?.(id, anchorCell, offsetXPixels, offsetYPixels, width, height);
+    }, [onResizeChart, getCellPosition]);
+    // Callback when user resizes a slicer
+    const handleSlicerResize = useCallback((id, x, y, width, height) => {
+        const position = getCellPosition(x, y);
+        if (!position) {
+            return;
+        }
+        const [anchorCell, offsetXPixels, offsetYPixels] = position;
+        onResizeSlicer?.(id, sheetId, anchorCell, offsetXPixels, offsetYPixels, width, height);
+    }, [onResizeSlicer, sheetId, getCellPosition]);
+    // Callback when user moves a slicer
+    const handleSlicerMove = useCallback((id, x, y) => {
+        const position = getCellPosition(x, y);
+        if (!position) {
+            return;
+        }
+        const [anchorCell, offsetXPixels, offsetYPixels] = position;
+        onMoveSlicer?.(id, sheetId, anchorCell, offsetXPixels, offsetYPixels);
+    }, [onMoveSlicer, sheetId, getCellPosition]);
+    // Chart components - categorized by frozen pane placement
+    const chartComponents = useMemo(() => {
+        const result = {
+            body: [],
+            frozenRow: [],
+            frozenColumn: [],
+            intersection: [],
+        };
+        // If user has no chartComponent, skip rendering
+        if (!getChartComponent || disabled) {
+            return result;
+        }
+        const bounds = getBounds();
+        validateEmbeds(charts, sheetId)
+            ?.filter((chart) => chart.position.sheetId === sheetId)
+            .forEach((chart) => {
+            const { chartId, position: { overlayPosition }, borderColor, draggable, resizable, } = chart;
+            const { anchorCell, widthPixels = 0, heightPixels = 0, offsetXPixels = 0, offsetYPixels = 0, } = overlayPosition;
+            const isSelected = selectedIndex === chartId;
+            const finalBorderColor = isSelected ? selectedColor : borderColor;
+            const placement = getOverlayPlacement(anchorCell, frozenRows, frozenColumns);
+            const component = (React.createElement(EmbedDraggable, { bounds: bounds, key: chartId, anchorCell: anchorCell, id: chartId, isSelected: isSelected, borderColor: finalBorderColor ?? undefined, onPointerDown: () => setSelectedIndex(chartId), height: (heightPixels ?? 0) * scale, width: (widthPixels ?? 0) * scale, offsetXPixels: offsetXPixels ?? 0, offsetYPixels: offsetYPixels ?? 0, onResize: handleResize, onMove: handleMove, scale: scale, onDelete: onDeleteChart, draggable: readonly ? false : draggable ?? undefined, resizable: readonly ? false : resizable ?? undefined }, (width, height) => getChartComponent?.({
+                chart,
+                width,
+                height,
+                theme,
+                backgroundColor,
+                isSelected,
+                onDeleteChart,
+                sheetId,
+                readonly,
+            })));
+            result[placement].push(component);
+        });
+        return result;
+    }, [
+        disabled,
+        readonly,
+        scale,
+        charts,
+        sheetId,
+        selectedColor,
+        selectedIndex,
+        setSelectedIndex,
+        handleMove,
+        handleResize,
+        getChartComponent,
+        theme,
+        onDeleteChart,
+        backgroundColor,
+        frozenRows,
+        frozenColumns,
+    ]);
+    // Embed components
+    const embedComponents = useMemo(() => {
+        // If user has no EmbedComponent, skip rendering
+        if (!getEmbedComponent || disabled) {
+            return [];
+        }
+        return (validateEmbeds(embeds, sheetId)
+            ?.filter((embed) => embed.position.sheetId === sheetId)
+            .map((embed) => {
+            const { embedId, position: { overlayPosition }, borderColor, lockAspectRatio, draggable, resizable, } = embed;
+            const { anchorCell, widthPixels = 0, heightPixels = 0, offsetXPixels = 0, offsetYPixels = 0, } = overlayPosition;
+            const bounds = getBounds();
+            const isSelected = selectedIndex === embedId;
+            const finalBorderColor = isSelected ? selectedColor : borderColor;
+            return (React.createElement(EmbedDraggable, { key: embedId, anchorCell: anchorCell, id: embedId, isSelected: isSelected, borderColor: finalBorderColor ?? undefined, onPointerDown: () => setSelectedIndex(embedId), height: (heightPixels ?? 0) * scale, width: (widthPixels ?? 0) * scale, offsetXPixels: offsetXPixels ?? 0, offsetYPixels: offsetYPixels ?? 0, onResize: handleEmbedResize, onMove: handleEmbedMove, bounds: bounds, scale: scale, onDelete: onDeleteEmbed, lockAspectRatio: lockAspectRatio ?? undefined, resizable: readonly ? false : resizable ?? undefined, draggable: readonly ? false : draggable ?? undefined }, (width, height) => getEmbedComponent?.({
+                embed,
+                width,
+                height,
+                theme,
+                backgroundColor,
+                isSelected,
+                onDeleteEmbed,
+                onRequestEditEmbed,
+                sheetId,
+                readonly,
+            })));
+        }) ?? []);
+    }, [
+        disabled,
+        scale,
+        embeds,
+        sheetId,
+        selectedColor,
+        readonly,
+        getBounds,
+        selectedIndex,
+        setSelectedIndex,
+        handleEmbedMove,
+        handleEmbedResize,
+        getEmbedComponent,
+        theme,
+        onDeleteEmbed,
+        onRequestEditEmbed,
+        backgroundColor,
+    ]);
+    // Slicer components
+    const slicerComponents = useMemo(() => {
+        // If user has no SlicerComponent, skip rendering
+        if (!getSlicerComponent || disabled) {
+            return [];
+        }
+        return (validateEmbeds(slicers, sheetId)
+            ?.filter((slicer) => slicer.position.sheetId === sheetId)
+            .map((slicer) => {
+            const { slicerId, position: { overlayPosition }, borderColor, draggable, resizable, } = slicer;
+            const { anchorCell, widthPixels = 0, heightPixels = 0, offsetXPixels = 0, offsetYPixels = 0, } = overlayPosition;
+            const bounds = getBounds();
+            const isSelected = selectedIndex === slicerId;
+            const finalBorderColor = isSelected ? selectedColor : borderColor;
+            return (React.createElement(EmbedDraggable, { key: slicerId, anchorCell: anchorCell, id: slicerId, isSelected: isSelected, borderColor: typeof finalBorderColor === "string"
+                    ? finalBorderColor
+                    : undefined, onPointerDown: () => setSelectedIndex(slicerId), height: (heightPixels ?? 0) * scale, width: (widthPixels ?? 0) * scale, offsetXPixels: offsetXPixels ?? 0, offsetYPixels: offsetYPixels ?? 0, onResize: handleSlicerResize, onMove: handleSlicerMove, bounds: bounds, scale: scale, onDelete: onDeleteSlicer, resizable: readonly ? false : resizable ?? undefined, draggable: readonly ? false : draggable ?? undefined }, (width, height) => getSlicerComponent?.({
+                slicer,
+                width,
+                height,
+                theme,
+                backgroundColor,
+                isSelected,
+                onDeleteSlicer,
+                onFilterTable,
+                onFilterPivot,
+                tables,
+                pivotTables,
+                getFormattedValue,
+                sheetId,
+                readonly,
+            })));
+        }) ?? []);
+    }, [
+        disabled,
+        scale,
+        slicers,
+        sheetId,
+        selectedColor,
+        readonly,
+        getBounds,
+        selectedIndex,
+        setSelectedIndex,
+        handleSlicerMove,
+        handleSlicerResize,
+        getSlicerComponent,
+        theme,
+        onDeleteSlicer,
+        onFilterTable,
+        onFilterPivot,
+        tables,
+        pivotTables,
+        getFormattedValue,
+        backgroundColor,
+    ]);
+    return useMemo(() => ({
+        chartComponents,
+        embedComponents,
+        slicerComponents,
+        onMouseDown: handleMouseDown,
+    }), [chartComponents, embedComponents, slicerComponents, handleMouseDown]);
+};

package/dist/esm/hooks/use-expand-cell.d.ts

@@ -0,0 +1,35 @@
+import type { CellInterface, CellPosition, ScrollCoords } from "@rowsncolumns/grid";
+import React from "react";
+import type { CanvasGridProps, SpreadsheetTheme } from "../components/canvas-grid/typings";
+import type { AXIS } from "../types";
+type UseExpandCellProps = {
+    sheetId: number;
+    activeCell?: CellInterface | null;
+    theme: SpreadsheetTheme;
+    iconColor: string;
+    /**
+     * Grid references
+     */
+    getCellOffsetFromCoords(cell: CellInterface): CellPosition | undefined;
+    /**
+     * Get current scroll position
+     */
+    getScrollPosition: () => ScrollCoords | undefined;
+    /**
+     * Is frozen row
+     * @param rowIndex
+     */
+    isFrozenRow(rowIndex: number): boolean;
+    /**
+     * Is frozen column
+     * @param columnIndex
+     */
+    isFrozenColumn(columnIndex: number): boolean;
+    onChangeActiveCell?: CanvasGridProps["onChangeActiveCell"];
+    cellExpandPredicate: CanvasGridProps["cellExpandPredicate"];
+    onRequestExpand: CanvasGridProps["onRequestExpand"];
+    getCellSpacing: (sheetId: number, rowIndex: number, columnIndex: number, axis: AXIS) => number;
+};
+export declare const useExpandCell: ({ activeCell, sheetId, theme, iconColor, isFrozenColumn, isFrozenRow, getCellOffsetFromCoords, cellExpandPredicate, onRequestExpand, getScrollPosition, onChangeActiveCell, }: UseExpandCellProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=use-expand-cell.d.ts.map

package/dist/esm/hooks/use-expand-cell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-expand-cell.d.ts","sourceRoot":"","sources":["../../../hooks/use-expand-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,YAAY,EACZ,YAAY,EACb,MAAM,oBAAoB,CAAC;AAG5B,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EACV,eAAe,EACf,gBAAgB,EACjB,MAAM,mCAAmC,CAAC;AAE3C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,kBAAkB,GAAG;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,aAAa,GAAG,IAAI,CAAC;IAClC,KAAK,EAAE,gBAAgB,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,uBAAuB,CAAC,IAAI,EAAE,aAAa,GAAG,YAAY,GAAG,SAAS,CAAC;IACvE;;OAEG;IACH,iBAAiB,EAAE,MAAM,YAAY,GAAG,SAAS,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC;IACvC;;;OAGG;IACH,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7C,kBAAkB,CAAC,EAAE,eAAe,CAAC,oBAAoB,CAAC,CAAC;IAC3D,mBAAmB,EAAE,eAAe,CAAC,qBAAqB,CAAC,CAAC;IAC5D,eAAe,EAAE,eAAe,CAAC,iBAAiB,CAAC,CAAC;IACpD,cAAc,EAAE,CACd,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,EACnB,IAAI,EAAE,IAAI,KACP,MAAM,CAAC;CACb,CAAC;AACF,eAAO,MAAM,aAAa,GAAI,+KAY3B,kBAAkB,6BAkEpB,CAAC"}

package/dist/esm/hooks/use-expand-cell.js

@@ -0,0 +1,46 @@
+import { ExpandIcon } from "@rowsncolumns/icons";
+import { IconButton } from "@rowsncolumns/ui";
+import React, { useCallback } from "react";
+import { getStringifiedColor } from "../themes";
+export const useExpandCell = ({ activeCell, sheetId, theme, iconColor, isFrozenColumn, isFrozenRow, getCellOffsetFromCoords, cellExpandPredicate, onRequestExpand, getScrollPosition, onChangeActiveCell, }) => {
+    /**
+     * Popover position
+     */
+    const getCellPosition = useCallback((popoverCell) => {
+        const scrollPosition = getScrollPosition();
+        const cellOffset = getCellOffsetFromCoords(popoverCell);
+        return {
+            x: cellOffset?.x ?? 0,
+            y: cellOffset?.y ?? 0,
+            width: cellOffset?.width ?? 0,
+            height: cellOffset?.height ?? 0,
+            scrollLeft: isFrozenColumn(popoverCell.columnIndex)
+                ? 0
+                : scrollPosition?.scrollLeft ?? 0,
+            scrollTop: isFrozenRow(popoverCell.rowIndex)
+                ? 0
+                : scrollPosition?.scrollTop ?? 0,
+        };
+    }, [getScrollPosition, getCellOffsetFromCoords, isFrozenColumn, isFrozenRow]);
+    if (activeCell &&
+        cellExpandPredicate?.(sheetId, activeCell.rowIndex, activeCell.columnIndex)) {
+        const { x, y, width } = getCellPosition(activeCell);
+        const color = getStringifiedColor(iconColor, theme);
+        const iconDim = 16;
+        const spacing = 3;
+        return (React.createElement(IconButton, { variant: "outline", className: "absolute border border-solid bg-rnc-background rounded-none min-w-px min-h-full p-0 top-0 left-0 pointer-events-auto select-none", size: "sm", style: {
+                transform: `translate3d(${x + width - iconDim - spacing}px, ${y + 2}px, 0)`,
+                height: iconDim,
+                width: iconDim,
+                color: color,
+                borderColor: color,
+            }, tooltip: "Expand cell contents", onClick: () => {
+                // Update active cell
+                onChangeActiveCell?.(sheetId, activeCell);
+                // Send request to expand
+                onRequestExpand?.(sheetId, activeCell.rowIndex, activeCell.columnIndex);
+            } },
+            React.createElement(ExpandIcon, { className: "text-base" })));
+    }
+    return null;
+};

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

@@ -0,0 +1,36 @@
+import type { CellInterface, CellPosition, ScrollCoords, ViewPortProps } 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 UseExportRangeProps = {
+    sheetId: number;
+    gridLineWidth: number;
+    cellBackgroundColor: string;
+    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"];
+    scale?: number;
+    onChangeScale?(scale: number): void;
+};
+export type ExportRangeOptions<F extends ExportFormats = ExportFormats> = {
+    filename?: string;
+    format?: F;
+    includeHeaders?: boolean;
+};
+export type ExportRangeOutput = {
+    (range: SheetRange, options: ExportRangeOptions<"blob">): Promise<Blob>;
+    (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;
+//# sourceMappingURL=use-export-range.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,227 @@
+import { Align } from "@rowsncolumns/grid";
+import { getDevicePixelRatio } from "@rowsncolumns/grid";
+import { useCallback } from "react";
+import { useCallbackRef } from "./use-callback-ref";
+export const useExportRange = ({ sheetId, gridLineWidth, cellBackgroundColor, getCanvasLayers, getColumnHeaderCanvasLayer, getRowHeaderCanvasLayer, getSheetName, getCellOffsetFromCoords, getR1C1AddressFromSelection, getScrollPosition, getViewPort, getRowOffset, getColumnOffset, getSheetDimensions, scrollTo, scrollToCell, scale, onChangeScale, }) => {
+    return useCallbackRef(useCallback((range, options) => {
+        const layers = getCanvasLayers();
+        if (!layers?.length)
+            return undefined;
+        const { filename, format, includeHeaders } = options || {};
+        const baseScale = scale ?? 1;
+        const minExportScale = 0.25;
+        const waitForPaint = () => new Promise((resolve) => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => resolve());
+            });
+        });
+        const normalizeRangeStart = (rangeValue) => ({
+            ...rangeValue,
+            startRowIndex: Math.max(1, rangeValue.startRowIndex),
+            startColumnIndex: Math.max(1, rangeValue.startColumnIndex),
+        });
+        const isStartInViewport = (viewport, normalizedRange) => normalizedRange.startRowIndex >= viewport.visibleRowStartIndex &&
+            normalizedRange.startRowIndex <= viewport.visibleRowStopIndex &&
+            normalizedRange.startColumnIndex >=
+                viewport.visibleColumnStartIndex &&
+            normalizedRange.startColumnIndex <= viewport.visibleColumnStopIndex;
+        const isRangeInViewport = (viewport, normalizedRange) => normalizedRange.startRowIndex >= viewport.visibleRowStartIndex &&
+            normalizedRange.endRowIndex <= viewport.visibleRowStopIndex &&
+            normalizedRange.startColumnIndex >=
+                viewport.visibleColumnStartIndex &&
+            normalizedRange.endColumnIndex <= viewport.visibleColumnStopIndex;
+        const exportRangeAsync = async () => {
+            const initialScrollCoords = getScrollPosition();
+            let nextScale = baseScale;
+            let didScroll = false;
+            if (onChangeScale) {
+                const startX = getColumnOffset(range.startColumnIndex);
+                const endX = getColumnOffset(range.endColumnIndex + 1);
+                const startY = getRowOffset(range.startRowIndex);
+                const endY = getRowOffset(range.endRowIndex + 1);
+                const currentWidth = Math.max(endX - startX, 0);
+                const currentHeight = Math.max(endY - startY, 0);
+                const [viewWidth, viewHeight] = getSheetDimensions();
+                if (currentWidth > 0 && currentHeight > 0) {
+                    const unscaledWidth = currentWidth / baseScale;
+                    const unscaledHeight = currentHeight / baseScale;
+                    const fitScale = Math.min(viewWidth / unscaledWidth, viewHeight / unscaledHeight, baseScale);
+                    const minScale = Math.min(minExportScale, baseScale);
+                    nextScale = Math.min(Math.max(fitScale, minScale), baseScale);
+                }
+            }
+            try {
+                if (onChangeScale && nextScale !== baseScale) {
+                    onChangeScale(nextScale);
+                    await waitForPaint();
+                }
+                const normalizedRange = normalizeRangeStart(range);
+                const viewport = getViewPort();
+                if (!isStartInViewport(viewport, normalizedRange)) {
+                    scrollToCell?.({
+                        rowIndex: normalizedRange.startRowIndex,
+                        columnIndex: normalizedRange.startColumnIndex,
+                    }, Align.start);
+                    didScroll = true;
+                    await waitForPaint();
+                }
+                const viewportAfterStart = getViewPort();
+                if (!isRangeInViewport(viewportAfterStart, normalizedRange)) {
+                    scrollToCell?.({
+                        rowIndex: normalizedRange.endRowIndex,
+                        columnIndex: normalizedRange.endColumnIndex,
+                    }, Align.end);
+                    didScroll = true;
+                    await waitForPaint();
+                }
+                const scrollCoords = getScrollPosition();
+                const tl = getCellOffsetFromCoords({
+                    rowIndex: normalizedRange.startRowIndex,
+                    columnIndex: normalizedRange.startColumnIndex,
+                });
+                const 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;
+                const sheetName = getSheetName?.(range.sheetId ?? sheetId);
+                const dpr = getDevicePixelRatio();
+                const baseX = tl?.x ?? 0;
+                const baseY = tl?.y ?? 0;
+                const baseWidth = (br?.x ?? 0) - baseX + (br?.width ?? 0) + gridLineWidth;
+                const baseHeight = (br?.y ?? 0) - baseY + (br?.height ?? 0) + gridLineWidth;
+                const headerWidth = includeHeaders ? getColumnOffset(1) : 0;
+                const headerHeight = includeHeaders ? getRowOffset(1) : 0;
+                const destX = headerWidth;
+                const destY = headerHeight;
+                const width = baseWidth + headerWidth;
+                const height = baseHeight + headerHeight;
+                const finalFileName = filename ??
+                    getR1C1AddressFromSelection?.(normalizedRange, sheetName)?.substring(1);
+                const getFileExtension = (fmt) => {
+                    switch (fmt) {
+                        case "image/jpeg":
+                        case "image/jpg":
+                            return ".jpg";
+                        case "image/webp":
+                            return ".webp";
+                        case "image/png":
+                        default:
+                            return ".png";
+                    }
+                };
+                const bodyCanvas = layers[0]?.getCanvas()._canvas;
+                const rowHeaderCanvas = includeHeaders
+                    ? getRowHeaderCanvasLayer()?.[0]?.getCanvas()._canvas
+                    : null;
+                const columnHeaderCanvas = includeHeaders
+                    ? getColumnHeaderCanvasLayer()?.[0]?.getCanvas()._canvas
+                    : null;
+                if (!bodyCanvas)
+                    return undefined;
+                const canvas = bodyCanvas;
+                const tempCanvas = document.createElement("canvas");
+                tempCanvas.width = width * dpr;
+                tempCanvas.height = height * dpr;
+                const tempCtx = tempCanvas.getContext("2d");
+                const intermediateCanvas = document.createElement("canvas");
+                intermediateCanvas.width = width * dpr;
+                intermediateCanvas.height = height * dpr;
+                const intermediateCtx = intermediateCanvas.getContext("2d");
+                const bodySourceX = baseX;
+                const bodySourceY = baseY;
+                if (intermediateCtx) {
+                    intermediateCtx.drawImage(canvas, bodySourceX * dpr, bodySourceY * dpr, baseWidth * dpr, baseHeight * dpr, destX * dpr, destY * dpr, baseWidth * dpr, baseHeight * dpr);
+                }
+                if (tempCtx) {
+                    tempCtx.fillStyle = cellBackgroundColor;
+                    tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.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);
+                        }
+                    }
+                }
+                if (format === "clipboard") {
+                    await new Promise((resolve, reject) => {
+                        tempCanvas.toBlob((blob) => {
+                            if (!blob) {
+                                reject(new Error("Failed to create blob from canvas"));
+                                return;
+                            }
+                            const item = new ClipboardItem({ "image/png": blob });
+                            navigator.clipboard.write([item]).then(resolve).catch(reject);
+                        }, "image/png");
+                    });
+                    return undefined;
+                }
+                if (format === "blob") {
+                    return new Promise((resolve, reject) => {
+                        tempCanvas.toBlob((blob) => {
+                            if (!blob) {
+                                reject(new Error("Failed to create blob from canvas"));
+                                return;
+                            }
+                            resolve(blob);
+                        }, "image/png");
+                    });
+                }
+                if (format) {
+                    const dataURL = tempCanvas.toDataURL(format);
+                    const anchor = document.createElement("a");
+                    anchor.download = `${finalFileName}.${getFileExtension(format)}`;
+                    anchor.href = dataURL;
+                    anchor.dispatchEvent(new MouseEvent("click"));
+                    return undefined;
+                }
+                return new Promise((resolve) => {
+                    tempCanvas.toBlob((blob) => {
+                        blob?.arrayBuffer().then(resolve);
+                    });
+                });
+            }
+            finally {
+                const shouldRestoreScale = onChangeScale && nextScale !== baseScale;
+                if (shouldRestoreScale) {
+                    onChangeScale(baseScale);
+                    await waitForPaint();
+                }
+                if (didScroll || shouldRestoreScale) {
+                    scrollTo?.(initialScrollCoords, true);
+                    await waitForPaint();
+                }
+            }
+        };
+        return exportRangeAsync();
+    }, [
+        sheetId,
+        gridLineWidth,
+        cellBackgroundColor,
+        getCanvasLayers,
+        getCellOffsetFromCoords,
+        getSheetName,
+        getR1C1AddressFromSelection,
+        getScrollPosition,
+        getViewPort,
+        getColumnHeaderCanvasLayer,
+        getRowHeaderCanvasLayer,
+        getRowOffset,
+        getColumnOffset,
+        getSheetDimensions,
+        scrollTo,
+        scrollToCell,
+        scale,
+        onChangeScale,
+    ]));
+};