office-viewer 0.2.0 → 0.3.0

package/esm/excel/render/ExcelRender.d.ts

@@ -0,0 +1,120 @@
+/**
+ * 实现 Excel 渲染
+ */
+import type { Workbook } from '../Workbook';
+import { ScrollBar } from './ScrollBar';
+import type { ExcelRenderOptions } from '../sheet/ExcelRenderOptions';
+import { IDataProvider } from '../types/IDataProvider';
+import { FontSize } from '../types/FontSize';
+import { SelectionCanvas } from './SelectionCanvas';
+import { Scroll } from './scroll/Scroll';
+import { LinkPosition } from './cell/LinkPosition';
+import { ResizeBox } from './drawing/ResizeBox';
+import { AutoFilterIconUI } from './autoFilter/AutoFilterIconUI';
+export declare class ExcelRender {
+    /**
+     * 主内容区
+     */
+    private contentContainer;
+    /**
+     * 数据区
+     */
+    private dataContainer;
+    private workbook;
+    /**
+     * 主内容区的 Canvas
+     */
+    private sheetCanvas;
+    /**
+     * 选区的 Canvas
+     */
+    private selectionCanvas;
+    /**
+     * 滚动条
+     */
+    scrollbar: ScrollBar;
+    /**
+     * 调整大小的操作框
+     */
+    resizeBox: ResizeBox;
+    renderOptions: ExcelRenderOptions;
+    dataProvider: IDataProvider;
+    /**
+     * 默认字体大小，用于一些计算
+     */
+    defaultFontSize: FontSize;
+    /**
+     * 上一次滚动的位置，这个是为了滚动时固定某个方向
+     */
+    lastScroll: Scroll;
+    linkPositionCache: LinkPosition[];
+    autoFiltersUI: AutoFilterIconUI[];
+    constructor(contentContainer: HTMLElement, dataContainer: HTMLElement, workbook: Workbook, dataProvider: IDataProvider, renderOptions: ExcelRenderOptions);
+    lastScrollDirection: 'vertical' | 'horizontal';
+    lastScrollDirectionTime: number;
+    scrollDirectionLockTime: number;
+    getSelectionCanvas(): SelectionCanvas;
+    watchResize(): void;
+    /**
+     * 处理滚轮事件
+     */
+    handleWheel(event: WheelEvent): boolean;
+    /**
+     * 处理单元格双击事件
+     */
+    handleDblclick(event: MouseEvent): void;
+    /**
+     * 处理鼠标按下事件
+     */
+    handleMousedown(event: MouseEvent): void;
+    /**
+     * 处理鼠标松开事件，目前主要是处理点击链接的场景
+     */
+    handleMouseup(event: MouseEvent): void;
+    /**
+     * 处理鼠标移动事件
+     */
+    handleMousemove(event: MouseEvent): void;
+    /**
+     * 获取鼠标相对位置，会考虑缩放
+     */
+    getMouseRelativePosition(event: MouseEvent): {
+        offsetX: number;
+        offsetY: number;
+    };
+    /**
+     * 是否忽略这个滚动方向
+     * @param isScrollingHorizontally
+     * @returns 如果返回 true 说明被锁定了，这时要忽略后面的行为
+     */
+    ignoreScrollDirection(isScrollingHorizontally: boolean): boolean;
+    afterScroll(scroll: Scroll): void;
+    /**
+     * 获取可视区域高宽
+     */
+    getWidthAndHeight(): {
+        width: number;
+        height: number;
+    };
+    /**
+     * 是否需要重新绘制，主要是渲染过程中发现行高变化等情况
+     */
+    needReDraw: boolean | number;
+    /**
+     * 渲染总入库，包括数据区域和选区
+     */
+    draw(fromReRender?: boolean): Promise<void>;
+    /**
+     * 已经加载的字体
+     */
+    loadedFont: Set<string>;
+    /**
+     * 加载字体
+     */
+    loadFont(): Promise<void>;
+    setNeedReDraw(): void;
+    /**
+     * 销毁
+     */
+    destroy(): void;
+}

package/esm/excel/render/ExcelRender.js

@@ -0,0 +1,422 @@
+import { __awaiter, __generator, __values } from 'tslib';
+import { ScrollBar } from './ScrollBar.js';
+import { SheetCanvas } from './SheetCanvas.js';
+import { drawGridLines } from './grid/drawGridLines.js';
+import { drawCells } from './cell/drawCells.js';
+import { drawRowColHeaders } from './header/drawRowColHeaders.js';
+import { debounce } from '../../util/debounce.js';
+import { drawFrozen } from './cell/frozen/drawFrozen.js';
+import { SelectionCanvas } from './SelectionCanvas.js';
+import { updateCursor } from './selection/updateCursor.js';
+import { handleMousedown, dragState } from './dnd/handleMousedown.js';
+import { drawDrawing } from './drawing/drawDrawing.js';
+import { drawSparkline } from './sparkline/drawSparkline.js';
+import { isPointerOnLink } from './cell/isPointerOnLink.js';
+import { ResizeBox } from './drawing/ResizeBox.js';
+import { renderAutoFilter } from './autoFilter/renderAutoFilter.js';
+import { getMouseRelativePosition } from './dnd/getMouseRelativePosition.js';
+import { CellEditor } from '../edit/ui/CellEditor.js';
+import { getAllNotAvailableFont } from './cell/checkFont.js';
+import { inValidTextSizeCache } from './cell/measureTextWithCache.js';
+
+/**
+ * 实现 Excel 渲染
+ */
+var ExcelRender = /** @class */ (function () {
+    function ExcelRender(contentContainer, dataContainer, workbook, dataProvider, renderOptions) {
+        var _this = this;
+        /**
+         * 上一次滚动的位置，这个是为了滚动时固定某个方向
+         */
+        this.lastScroll = { left: 0, top: 0 };
+        this.linkPositionCache = [];
+        this.autoFiltersUI = [];
+        this.lastScrollDirection = 'vertical';
+        this.lastScrollDirectionTime = 0;
+        this.scrollDirectionLockTime = 100;
+        /**
+         * 是否需要重新绘制，主要是渲染过程中发现行高变化等情况
+         */
+        this.needReDraw = false;
+        /**
+         * 已经加载的字体
+         */
+        this.loadedFont = new Set();
+        this.contentContainer = contentContainer;
+        this.dataContainer = dataContainer;
+        this.workbook = workbook;
+        this.renderOptions = renderOptions;
+        this.contentContainer.addEventListener('wheel', this.handleWheel.bind(this), {
+            passive: false
+        });
+        this.contentContainer.addEventListener('mousedown', this.handleMousedown.bind(this));
+        this.contentContainer.addEventListener('mouseup', this.handleMouseup.bind(this));
+        this.contentContainer.addEventListener('touchstart', this.handleMousedown.bind(this));
+        // 避免过于频繁
+        this.handleMousemove = debounce(this.handleMousemove, 16);
+        this.contentContainer.addEventListener('mousemove', this.handleMousemove.bind(this));
+        this.dataContainer.addEventListener('dblclick', this.handleDblclick.bind(this));
+        this.sheetCanvas = new SheetCanvas(workbook, dataProvider);
+        var sheetCanvasElement = this.sheetCanvas.getCanvasElement();
+        this.contentContainer.appendChild(sheetCanvasElement);
+        this.selectionCanvas = new SelectionCanvas(workbook, dataProvider);
+        this.contentContainer.appendChild(this.selectionCanvas.getCanvasElement());
+        this.scrollbar = new ScrollBar(contentContainer, workbook);
+        this.resizeBox = new ResizeBox(contentContainer);
+        this.defaultFontSize = dataProvider.getDefaultFontSize();
+        this.dataProvider = dataProvider;
+        this.draw = this.draw.bind(this);
+        workbook.uiEvent.on('SWITCH_SHEET', function (sheet) {
+            // 这里面会有一些 HTML，清空一下避免问题
+            _this.dataContainer.innerHTML = '';
+            _this.draw();
+        });
+        workbook.uiEvent.on('CHANGE_ZOOM_LEVEL', function (scale) {
+            _this.sheetCanvas.updateZoom(scale);
+            _this.selectionCanvas.updateZoom(scale);
+            _this.draw();
+            _this.selectionCanvas.draw();
+        });
+        workbook.uiEvent.on('SCROLL_X', function (x) {
+            _this.workbook.getActiveSheet().setScrollLeft(x);
+            _this.draw();
+        });
+        workbook.uiEvent.on('SCROLL_Y', function (y) {
+            _this.workbook.getActiveSheet().setScrollTop(y);
+            _this.draw();
+        });
+        workbook.uiEvent.on('APPLY_AUTO_FILTER', function (sheetIndex) {
+            var currentSheetIndex = _this.workbook.getActiveSheet().getIndex();
+            if (currentSheetIndex === sheetIndex) {
+                _this.draw();
+            }
+        });
+        workbook.uiEvent.on('UPDATE_RANGE', function (sheetIndex) {
+            // 目前简单处理，后面需要支持局部渲染
+            var currentSheetIndex = _this.workbook.getActiveSheet().getIndex();
+            if (currentSheetIndex === sheetIndex) {
+                _this.draw();
+            }
+        });
+        workbook.uiEvent.on('UPDATE_ROW_HEIGHT', function (row, height) {
+            _this.draw();
+        });
+        workbook.uiEvent.on('UPDATE_COL_WIDTH', function (col, width) {
+            _this.draw();
+        });
+        this.watchResize();
+    }
+    ExcelRender.prototype.getSelectionCanvas = function () {
+        return this.selectionCanvas;
+    };
+    ExcelRender.prototype.watchResize = function () {
+        var _this = this;
+        var contentContainer = this.contentContainer;
+        // 监听容器大小变化
+        var lastWidth = contentContainer.clientWidth;
+        var lastHeight = contentContainer.clientHeight;
+        var containerObserver = new ResizeObserver(function (entries) {
+            var entry = entries[0];
+            var _a = entry.contentRect, width = _a.width, height = _a.height;
+            if (Math.floor(lastWidth) === Math.floor(width) &&
+                Math.floor(lastHeight) === Math.floor(height)) {
+                return;
+            }
+            lastWidth = width;
+            lastHeight = height;
+            _this.draw();
+        });
+        containerObserver.observe(contentContainer);
+    };
+    /**
+     * 处理滚轮事件
+     */
+    ExcelRender.prototype.handleWheel = function (event) {
+        var deltaX = event.deltaX, deltaY = event.deltaY; event.deltaMode;
+        var currentSheet = this.workbook.getActiveSheet();
+        // 按住 shift 键就当成水平滚动
+        var isScrollingHorizontally = event.shiftKey || Math.abs(deltaX) > Math.abs(deltaY);
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.ignoreScrollDirection(isScrollingHorizontally)) {
+            return false;
+        }
+        deltaX = Math.floor(deltaX);
+        deltaY = Math.floor(deltaY);
+        // 按住 shift 就只有水平滚动
+        if (isScrollingHorizontally) {
+            currentSheet.deltaScrollLeft(deltaX);
+        }
+        else {
+            currentSheet.deltaScrollTop(deltaY);
+        }
+        var scroll = {
+            left: Math.floor(currentSheet.getScrollLeft()),
+            top: Math.floor(currentSheet.getScrollTop())
+        };
+        if (this.lastScroll.left !== scroll.left ||
+            this.lastScroll.top !== scroll.top) {
+            this.lastScroll = scroll;
+            this.draw();
+            // 滚动结束后触发
+            this.afterScroll(scroll);
+        }
+        return false;
+    };
+    /**
+     * 处理单元格双击事件
+     */
+    ExcelRender.prototype.handleDblclick = function (event) {
+        if (this.renderOptions.editable === false) {
+            return;
+        }
+        var _a = this.getMouseRelativePosition(event), offsetX = _a.offsetX, offsetY = _a.offsetY;
+        var hitTestResult = this.workbook
+            .getActiveSheet()
+            .hitTest(offsetX, offsetY);
+        if (hitTestResult && hitTestResult.type === 'cell') {
+            new CellEditor(this.dataContainer, this.workbook, hitTestResult);
+        }
+    };
+    /**
+     * 处理鼠标按下事件
+     */
+    ExcelRender.prototype.handleMousedown = function (event) {
+        var _a = this.getMouseRelativePosition(event), offsetX = _a.offsetX, offsetY = _a.offsetY;
+        var hitTestResult = this.workbook
+            .getActiveSheet()
+            .hitTest(offsetX, offsetY);
+        if (hitTestResult) {
+            handleMousedown(this.workbook, hitTestResult, this.contentContainer, event);
+        }
+    };
+    /**
+     * 处理鼠标松开事件，目前主要是处理点击链接的场景
+     */
+    ExcelRender.prototype.handleMouseup = function (event) {
+        // 拖动过程中就不处理这个事件
+        if (dragState.isDragging) {
+            return;
+        }
+        var _a = this.getMouseRelativePosition(event), offsetX = _a.offsetX, offsetY = _a.offsetY;
+        var pointerOnLink = isPointerOnLink(offsetX, offsetY, this.linkPositionCache);
+        if (pointerOnLink) {
+            window.open(pointerOnLink);
+        }
+        var hitTestResult = this.workbook
+            .getActiveSheet()
+            .hitTest(offsetX, offsetY);
+        this.resizeBox.hide();
+        if (hitTestResult) {
+            if (hitTestResult.type === 'drawing') {
+                this.selectionCanvas.clearSelection();
+                this.resizeBox.updatePosition(hitTestResult.x, hitTestResult.y, hitTestResult.width, hitTestResult.height);
+            }
+        }
+    };
+    /**
+     * 处理鼠标移动事件
+     */
+    ExcelRender.prototype.handleMousemove = function (event) {
+        var _a, _b;
+        // 拖动过程中就不处理这个事件
+        if (dragState.isDragging) {
+            return;
+        }
+        var _c = this.getMouseRelativePosition(event), offsetX = _c.offsetX, offsetY = _c.offsetY;
+        offsetX = Math.round(offsetX);
+        offsetY = Math.round(offsetY);
+        // 重置鼠标样式
+        this.contentContainer.style.cursor = 'cell';
+        var hitTestResult = this.workbook
+            .getActiveSheet()
+            .hitTest(offsetX, offsetY);
+        // 用于快速了解当前鼠标位置
+        if (this.renderOptions.debug) {
+            (_b = (_a = this.renderOptions).mousePositionTracker) === null || _b === void 0 ? void 0 : _b.call(_a, offsetX, offsetY, hitTestResult);
+        }
+        // 是否在链接上
+        var pointerOnLink = isPointerOnLink(offsetX, offsetY, this.linkPositionCache);
+        updateCursor(this.contentContainer, hitTestResult, pointerOnLink);
+    };
+    /**
+     * 获取鼠标相对位置，会考虑缩放
+     */
+    ExcelRender.prototype.getMouseRelativePosition = function (event) {
+        var _a = getMouseRelativePosition(this.contentContainer, event), offsetX = _a.offsetX, offsetY = _a.offsetY;
+        var zoomLevel = this.workbook.getActiveSheet().getZoomLevel();
+        offsetX = offsetX / zoomLevel;
+        offsetY = offsetY / zoomLevel;
+        return { offsetX: offsetX, offsetY: offsetY };
+    };
+    /**
+     * 是否忽略这个滚动方向
+     * @param isScrollingHorizontally
+     * @returns 如果返回 true 说明被锁定了，这时要忽略后面的行为
+     */
+    ExcelRender.prototype.ignoreScrollDirection = function (isScrollingHorizontally) {
+        // 避免滚动方向频繁切换，在短时间内只允许一个方向
+        if (Date.now() - this.lastScrollDirectionTime <
+            this.scrollDirectionLockTime) {
+            if (this.lastScrollDirection === 'horizontal' &&
+                !isScrollingHorizontally) {
+                return true;
+            }
+            if (this.lastScrollDirection === 'vertical' && isScrollingHorizontally) {
+                return true;
+            }
+        }
+        this.lastScrollDirection = isScrollingHorizontally
+            ? 'horizontal'
+            : 'vertical';
+        this.lastScrollDirectionTime = Date.now();
+        return false;
+    };
+    ExcelRender.prototype.afterScroll = function (scroll) {
+        this.workbook.uiEvent.emit('AFTER_SCROLL', scroll);
+    };
+    /**
+     * 获取可视区域高宽
+     */
+    ExcelRender.prototype.getWidthAndHeight = function () {
+        var _a = this.workbook.getViewpointSize(), width = _a.width, height = _a.height;
+        return {
+            width: width,
+            height: height
+        };
+    };
+    /**
+     * 渲染总入库，包括数据区域和选区
+     */
+    ExcelRender.prototype.draw = function (fromReRender) {
+        if (fromReRender === void 0) { fromReRender = false; }
+        return __awaiter(this, void 0, void 0, function () {
+            var startDraw, mainCanvas, currentSheet, _a, width, height, viewRange, displayData, frozenViewRange;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        startDraw = performance.now();
+                        mainCanvas = this.sheetCanvas;
+                        currentSheet = this.workbook.getActiveSheet();
+                        _a = this.getWidthAndHeight(), width = _a.width, height = _a.height;
+                        this.linkPositionCache = [];
+                        viewRange = currentSheet.getViewPointRange(width, height);
+                        this.workbook.getActiveSheet().updateViewRange(viewRange);
+                        displayData = currentSheet.getViewPointData(viewRange);
+                        mainCanvas.clear();
+                        // 这个需要提前执行，保证 rowHeaderWidth 是正确的
+                        currentSheet.updateRowHeaderWidth(viewRange);
+                        // 绘制网格线
+                        drawGridLines(currentSheet, viewRange, mainCanvas, height, width, this.renderOptions);
+                        // 绘制 Sparkline，这个要在单元格前面
+                        drawSparkline(currentSheet, viewRange, mainCanvas);
+                        // 绘制单元格
+                        drawCells(this, currentSheet, this.renderOptions, mainCanvas, displayData, this.linkPositionCache);
+                        // 绘制自动筛选功能
+                        renderAutoFilter(currentSheet, this.dataContainer);
+                        // 绘制图片及文本框
+                        drawDrawing(this, currentSheet, viewRange, mainCanvas);
+                        // 表头晚于内容区绘制
+                        drawRowColHeaders(currentSheet, viewRange, mainCanvas, this.renderOptions, this.defaultFontSize, this.dataProvider.getDefaultFontStyle());
+                        frozenViewRange = drawFrozen(this, currentSheet, this.dataProvider, this.renderOptions, mainCanvas, height, width, this.linkPositionCache);
+                        this.workbook.getActiveSheet().updateFrozenViewRange(frozenViewRange);
+                        if (this.renderOptions.debug) {
+                            console.log('draw time', (performance.now() - startDraw).toFixed(2), 'ms');
+                        }
+                        // 目前只有渲染后才知道字体是否加载
+                        return [4 /*yield*/, this.loadFont()];
+                    case 1:
+                        // 目前只有渲染后才知道字体是否加载
+                        _b.sent();
+                        if (this.needReDraw && fromReRender === false) {
+                            this.needReDraw = false;
+                            // 避免死循环
+                            this.draw(true);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * 加载字体
+     */
+    ExcelRender.prototype.loadFont = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var fontURL, notAvailableFonts, needReDraw, notAvailableFonts_1, notAvailableFonts_1_1, font, fontFace, e_1_1;
+            var e_1, _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        fontURL = this.renderOptions.fontURL;
+                        notAvailableFonts = getAllNotAvailableFont();
+                        needReDraw = false;
+                        _b.label = 1;
+                    case 1:
+                        _b.trys.push([1, 7, 8, 9]);
+                        notAvailableFonts_1 = __values(notAvailableFonts), notAvailableFonts_1_1 = notAvailableFonts_1.next();
+                        _b.label = 2;
+                    case 2:
+                        if (!!notAvailableFonts_1_1.done) return [3 /*break*/, 6];
+                        font = notAvailableFonts_1_1.value;
+                        if (this.loadedFont.has(font)) {
+                            return [3 /*break*/, 5];
+                        }
+                        if (!(font in fontURL)) return [3 /*break*/, 4];
+                        this.loadedFont.add(font);
+                        fontFace = new FontFace(font, "url(".concat(fontURL[font], ")"));
+                        return [4 /*yield*/, fontFace.load()];
+                    case 3:
+                        _b.sent();
+                        document.fonts.add(fontFace);
+                        needReDraw = true;
+                        return [3 /*break*/, 5];
+                    case 4:
+                        console.warn('font not found', font);
+                        _b.label = 5;
+                    case 5:
+                        notAvailableFonts_1_1 = notAvailableFonts_1.next();
+                        return [3 /*break*/, 2];
+                    case 6: return [3 /*break*/, 9];
+                    case 7:
+                        e_1_1 = _b.sent();
+                        e_1 = { error: e_1_1 };
+                        return [3 /*break*/, 9];
+                    case 8:
+                        try {
+                            if (notAvailableFonts_1_1 && !notAvailableFonts_1_1.done && (_a = notAvailableFonts_1.return)) _a.call(notAvailableFonts_1);
+                        }
+                        finally { if (e_1) throw e_1.error; }
+                        return [7 /*endfinally*/];
+                    case 9:
+                        if (needReDraw) {
+                            // 宽度可能变化
+                            inValidTextSizeCache();
+                            this.setNeedReDraw();
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    ExcelRender.prototype.setNeedReDraw = function () {
+        var now = new Date().getTime();
+        if (this.needReDraw) {
+            // 避免频繁调用
+            if (now - this.needReDraw < 100) {
+                return;
+            }
+        }
+        this.needReDraw = new Date().getTime();
+    };
+    /**
+     * 销毁
+     */
+    ExcelRender.prototype.destroy = function () {
+        this.contentContainer.removeEventListener('wheel', this.handleWheel);
+        this.contentContainer.removeEventListener('mousedown', this.handleMousedown);
+    };
+    return ExcelRender;
+}());
+
+export { ExcelRender };

package/esm/excel/render/Icons.d.ts

@@ -0,0 +1,13 @@
+/** generated by genIcons.ts, do not edit */
+export declare const Icons: {
+    filter: string;
+    filterDown: string;
+    filterUp: string;
+    hasFilter: string;
+    left: string;
+    menu: string;
+    plus: string;
+    right: string;
+    sortDown: string;
+    sortUP: string;
+};

package/esm/excel/render/Icons.js

@@ -0,0 +1,15 @@
+/** generated by genIcons.ts, do not edit */
+var Icons = {
+    filter: '<?xml version="1.0" encoding="UTF-8"?>\n<svg width="217px" height="217px" viewBox="0 0 217 217" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n    <title>filter</title>\n    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n        <g id="filter" transform="translate(2, 2)" stroke="#717171">\n            <rect id="Rectangle" stroke-width="4" fill="#FFFFFF" x="0" y="0" width="213" height="213"></rect>\n            <g id="Group" transform="translate(57, 79.7096)" stroke-linecap="square" stroke-width="8">\n                <line x1="0" y1="0.290367902" x2="48.9405681" y2="48.9300718" id="Line"></line>\n                <line x1="49.5" y1="48.7903679" x2="98.2903679" y2="1.0658141e-14" id="Line-2"></line>\n            </g>\n        </g>\n    </g>\n</svg>',
+    filterDown: '<?xml version="1.0" encoding="UTF-8"?>\n<svg width="217px" height="217px" viewBox="0 0 217 217" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n    <title>filterDown</title>\n    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n        <g id="filterDown" transform="translate(2, 2)">\n            <rect id="Rectangle" stroke="#717171" stroke-width="4" x="0" y="0" width="213" height="213"></rect>\n            <path d="M192.487604,49.3238637 C193.452114,51.6534092 193.054963,53.6420455 191.29615,55.2897728 L149.339943,97.3068182 L149.339943,160.545454 C149.339943,162.931818 148.233592,164.607954 146.020892,165.573864 C145.283325,165.857955 144.574126,166 143.893295,166 C142.361426,166 141.084867,165.460227 140.063621,164.380682 L118.277031,142.5625 C117.199048,141.482955 116.660057,140.204545 116.660057,138.727273 L116.660057,97.3068182 L74.7038504,55.2897728 C72.9450371,53.6420455 72.5478857,51.6534092 73.5123962,49.3238637 C74.4769068,47.1079547 76.1506161,46 78.5335243,46 L187.466476,46 C189.849384,46 191.523093,47.1079546 192.487604,49.3238637 Z" id="Path" fill="#717171" fill-rule="nonzero"></path>\n            <polygon id="down_arrow" fill="#717171" fill-rule="nonzero" transform="translate(50, 113) rotate(180) translate(-50, -113)" points="42.4971879 82.9240649 42.4971879 173 57.5028121 173 57.5028121 82.9240649 80 82.9240649 50 53 20 82.9240649"></polygon>\n        </g>\n    </g>\n</svg>',
+    filterUp: '<?xml version="1.0" encoding="UTF-8"?>\n<svg width="217px" height="217px" viewBox="0 0 217 217" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n    <title>filterUp</title>\n    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n        <g id="filterUp" transform="translate(2, 2)">\n            <rect id="Rectangle" stroke="#717171" stroke-width="4" fill="#FFFFFF" x="0" y="0" width="213" height="213"></rect>\n            <path d="M191.487604,49.3238637 C192.452114,51.6534092 192.054963,53.6420455 190.29615,55.2897728 L148.339943,97.3068182 L148.339943,160.545454 C148.339943,162.931818 147.233592,164.607954 145.020892,165.573864 C144.283325,165.857955 143.574126,166 142.893295,166 C141.361426,166 140.084867,165.460227 139.063621,164.380682 L117.277031,142.5625 C116.199048,141.482955 115.660057,140.204545 115.660057,138.727273 L115.660057,97.3068182 L73.7038504,55.2897728 C71.9450371,53.6420455 71.5478857,51.6534092 72.5123962,49.3238637 C73.4769068,47.1079547 75.1506161,46 77.5335243,46 L186.466476,46 C188.849384,46 190.523093,47.1079546 191.487604,49.3238637 Z" id="Path" fill="#717171" fill-rule="nonzero"></path>\n            <polygon id="up_arrow" fill="#717171" fill-rule="nonzero" points="42.4971879 82.9240649 42.4971879 173 57.5028121 173 57.5028121 82.9240649 80 82.9240649 50 53 20 82.9240649"></polygon>\n        </g>\n    </g>\n</svg>',
+    hasFilter: '<?xml version="1.0" encoding="UTF-8"?>\n<svg width="217px" height="217px" viewBox="0 0 217 217" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n    <title>hasFilter</title>\n    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n        <g id="hasFilter" transform="translate(2, 2)">\n            <rect id="Rectangle" stroke="#717171" stroke-width="4" fill="#FFFFFF" x="0" y="0" width="213" height="213"></rect>\n            <path d="M185.487604,49.3238637 C186.452114,51.6534092 186.054963,53.6420455 184.29615,55.2897728 L142.339943,97.3068182 L142.339943,160.545454 C142.339943,162.931818 141.233592,164.607954 139.020892,165.573864 C138.283325,165.857955 137.574126,166 136.893295,166 C135.361426,166 134.084867,165.460227 133.063621,164.380682 L111.277031,142.5625 C110.199048,141.482955 109.660057,140.204545 109.660057,138.727273 L109.660057,97.3068182 L67.7038504,55.2897728 C65.9450371,53.6420455 65.5478857,51.6534092 66.5123962,49.3238637 C67.4769068,47.1079547 69.1506161,46 71.5335243,46 L180.466476,46 C182.849384,46 184.523093,47.1079546 185.487604,49.3238637 Z" id="Path" fill="#717171" fill-rule="nonzero"></path>\n            <polygon id="Path" fill="#717171" fill-rule="nonzero" points="80 126 53.5 166 27 126"></polygon>\n        </g>\n    </g>\n</svg>',
+    left: '<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">\n    <path\n        d="M8.84182 3.13514C9.04327 3.32401 9.05348 3.64042 8.86462 3.84188L5.43521 7.49991L8.86462 11.1579C9.05348 11.3594 9.04327 11.6758 8.84182 11.8647C8.64036 12.0535 8.32394 12.0433 8.13508 11.8419L4.38508 7.84188C4.20477 7.64955 4.20477 7.35027 4.38508 7.15794L8.13508 3.15794C8.32394 2.95648 8.64036 2.94628 8.84182 3.13514Z"\n        fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>\n</svg>\n',
+    menu: '<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">\n    <path\n        d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"\n        fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>\n</svg>\n',
+    plus: '<?xml version="1.0" encoding="UTF-8"?>\n<svg width="323.854906px" height="323.854906px" viewBox="0 0 323.854906 323.854906" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n    <title>plus</title>\n    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n        <g id="plus" transform="translate(161.9275, 161.9275) rotate(45) translate(-161.9275, -161.9275)translate(47.4275, 47.4275)" fill="#717171" fill-rule="nonzero">\n            <path d="M5.94750569,5.94752344 C9.99382822,2.01749219 16.4317421,2.01749219 20.4780646,5.94752344 L223.051151,208.52183 C226.98295,212.453652 226.98295,218.949706 223.051151,223.052477 C219.004829,226.982508 212.566915,226.982508 208.520592,223.052477 L5.94750569,20.4781699 C2.0174981,16.431823 2.0174981,9.99387034 5.94750569,5.94752344 Z" id="Path"></path>\n            <path d="M226.057525,2.94115239 C229.980825,6.86447578 229.980825,13.3464883 226.057525,17.440391 L17.4402889,226.058848 C13.4027118,229.980384 6.97871231,229.980384 2.94113518,226.058848 C-0.980378394,222.021247 -0.980378394,215.59721 2.94113518,211.559609 L211.558371,2.94115239 C215.595948,-0.980384132 222.019948,-0.980384132 226.057525,2.94115239 Z" id="Path"></path>\n        </g>\n    </g>\n</svg>',
+    right: '<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">\n    <path\n        d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z"\n        fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path>\n</svg>\n',
+    sortDown: '<?xml version="1.0" encoding="UTF-8"?>\n<svg width="186px" height="231px" viewBox="0 0 186 231" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n    <title>sortDown</title>\n    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n        <g id="sortDown">\n            <polygon id="Path" fill="#323130" fill-rule="nonzero" points="113 172.593818 120.432357 165.292299 144.358438 189.022234 144.358438 22 154.743375 22 154.743375 189.022234 178.669456 165.292299 186 172.593818 149.550907 209"></polygon>\n            <text id="A" font-family="Helvetica" font-size="96" font-weight="normal" fill="#108CEE">\n                <tspan x="0" y="209">A</tspan>\n            </text>\n            <text id="Z" font-family="Helvetica" font-size="96" font-weight="normal" fill="#323130">\n                <tspan x="0" y="93">Z</tspan>\n            </text>\n        </g>\n    </g>\n</svg>',
+    sortUP: '<?xml version="1.0" encoding="UTF-8"?>\n<svg width="186px" height="230px" viewBox="0 0 186 230" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n    <title>sortUP</title>\n    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\n        <g id="sortUP">\n            <polygon id="Path" fill="#323130" fill-rule="nonzero" points="113 171.593818 120.432357 164.292299 144.358438 188.022234 144.358438 21 154.743375 21 154.743375 188.022234 178.669456 164.292299 186 171.593818 149.550907 208"></polygon>\n            <text id="A" font-family="Helvetica" font-size="96" font-weight="normal" fill="#108CEE">\n                <tspan x="0" y="93">A</tspan>\n            </text>\n            <text id="Z" font-family="Helvetica" font-size="96" font-weight="normal" fill="#323130">\n                <tspan x="0" y="208">Z</tspan>\n            </text>\n        </g>\n    </g>\n</svg>'
+};
+
+export { Icons };

package/esm/excel/render/IndexedColors.d.ts

@@ -0,0 +1 @@
+export declare const IndexedColors: string[];

package/esm/excel/render/IndexedColors.js

@@ -0,0 +1,70 @@
+var IndexedColors = [
+    '000000',
+    'FFFFFF',
+    'FF0000',
+    '00FF00',
+    '0000FF',
+    'FFFF00',
+    'FF00FF',
+    '00FFFF',
+    '000000',
+    'FFFFFF',
+    'FF0000',
+    '00FF00',
+    '0000FF',
+    'FFFF00',
+    'FF00FF',
+    '00FFFF',
+    '800000',
+    '008000',
+    '000080',
+    '808000',
+    '800080',
+    '008080',
+    'C0C0C0',
+    '808080',
+    '9999FF',
+    '993366',
+    'FFFFCC',
+    'CCFFFF',
+    '660066',
+    'FF8080',
+    '0066CC',
+    'CCCCFF',
+    '000080',
+    'FF00FF',
+    'FFFF00',
+    '00FFFF',
+    '800080',
+    '800000',
+    '008080',
+    '0000FF',
+    '00CCFF',
+    'CCFFFF',
+    'CCFFCC',
+    'FFFF99',
+    '99CCFF',
+    'FF99CC',
+    'CC99FF',
+    'FFCC99',
+    '3366FF',
+    '33CCCC',
+    '99CC00',
+    'FFCC00',
+    'FF9900',
+    'FF6600',
+    '666699',
+    '969696',
+    '003366',
+    '339966',
+    '003300',
+    '333300',
+    '993300',
+    '993366',
+    '333399',
+    '333333',
+    '000000',
+    'FFFFFF'
+];
+
+export { IndexedColors };

package/esm/excel/render/Line.d.ts

@@ -0,0 +1,6 @@
+export interface Line {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}