office-viewer 0.2.1 → 0.3.0

package/esm/excel/lang/lang.d.ts

@@ -0,0 +1,30 @@
+import { EnKeys } from './en_US';
+declare const languages: {
+    en_US: {
+        'autoFilter.sortAscending': string;
+        'autoFilter.sortDescending': string;
+        'checkBox.selectAll': string;
+        'checkBox.search': string;
+        'customFilter.equal': string;
+        'customFilter.notEqual': string;
+        'customFilter.greaterThan': string;
+        'customFilter.greaterThanOrEqual': string;
+        'customFilter.lessThan': string;
+        'customFilter.lessThanOrEqual': string;
+        'customFilter.beginsWith': string;
+        'customFilter.notBeginsWith': string;
+        'customFilter.endsWith': string;
+        'customFilter.notEndsWith': string;
+        'customFilter.contains': string;
+        'customFilter.notContains': string;
+        'customFilter.and': string;
+        'customFilter.or': string;
+        average: string;
+        count: string;
+        sum: string;
+    };
+    zh_CN: Record<"count" | "sum" | "average" | "customFilter.equal" | "customFilter.notEqual" | "customFilter.beginsWith" | "customFilter.notBeginsWith" | "customFilter.endsWith" | "customFilter.notEndsWith" | "customFilter.contains" | "customFilter.notContains" | "customFilter.greaterThan" | "customFilter.greaterThanOrEqual" | "customFilter.lessThan" | "customFilter.lessThanOrEqual" | "autoFilter.sortAscending" | "autoFilter.sortDescending" | "checkBox.selectAll" | "checkBox.search" | "customFilter.and" | "customFilter.or", string>;
+};
+export type Language = keyof typeof languages;
+export declare function getTranslate(language: string): (key: EnKeys) => string;
+export {};

package/esm/excel/lang/lang.js

@@ -0,0 +1,19 @@
+import { en_US } from './en_US.js';
+import { zh_CN } from './zh_CN.js';
+
+var languages = {
+    en_US: en_US,
+    zh_CN: zh_CN
+};
+function getTranslate(language) {
+    language = language.replace('-', '_');
+    if (!(language in languages)) {
+        console.warn('language not found, use en_US instead', language);
+        language = 'en_US';
+    }
+    return function (key) {
+        return languages[language][key];
+    };
+}
+
+export { getTranslate };

package/esm/excel/lang/zh_CN.d.ts

@@ -0,0 +1,2 @@
+import type { EnKeys } from './en_US';
+export declare const zh_CN: Record<EnKeys, string>;

package/esm/excel/lang/zh_CN.js

@@ -0,0 +1,25 @@
+var zh_CN = {
+    'autoFilter.sortAscending': '升序',
+    'autoFilter.sortDescending': '降序',
+    'checkBox.selectAll': '全选',
+    'checkBox.search': '搜索',
+    'customFilter.equal': '等于',
+    'customFilter.notEqual': '不等于',
+    'customFilter.greaterThan': '大于',
+    'customFilter.greaterThanOrEqual': '大于或等于',
+    'customFilter.lessThan': '小于',
+    'customFilter.lessThanOrEqual': '小于或等于',
+    'customFilter.beginsWith': '开头是',
+    'customFilter.notBeginsWith': '开头不是',
+    'customFilter.endsWith': '结尾是',
+    'customFilter.notEndsWith': '结尾不是',
+    'customFilter.contains': '包含',
+    'customFilter.notContains': '不包含',
+    'customFilter.and': '与',
+    'customFilter.or': '或',
+    'average': '平均值',
+    'count': '计数',
+    'sum': '求和'
+};
+
+export { zh_CN };

package/esm/excel/print/printStyle.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 打印样式
+ */
+export declare function printStyle(gridLineColor: string): string;

package/esm/excel/print/printStyle.js

@@ -0,0 +1,8 @@
+/**
+ * 打印样式
+ */
+function printStyle(gridLineColor) {
+    return "\n<style>\n  html, body {\n    margin: 0;\n    padding: 8px;\n  }\n  @page {\n    size: auto;\n    margin: 0mm;\n  }\n  table {\n    border-collapse: collapse;\n    width: 100%;\n  }\n  table, th, td {\n    border: 1px solid ".concat(gridLineColor, ";\n  }\n</style>\n");
+}
+
+export { printStyle };

package/esm/excel/print/renderInIframe.d.ts

@@ -0,0 +1,7 @@
+import { Workbook } from '../Workbook';
+/**
+ * 目前打印基于拷贝功能实现，所以还不支持图表及图片等 drawing 元素
+ * @param iframe
+ * @param workbook
+ */
+export declare function renderInIframe(iframe: HTMLIFrameElement, workbook: Workbook): void;

package/esm/excel/print/renderInIframe.js

@@ -0,0 +1,26 @@
+import { MAX_ROW, MAX_COL } from '../render/Consts.js';
+import { rangeToHTML } from '../render/selection/buildHTML/rangeToHTML.js';
+import { printStyle } from './printStyle.js';
+
+/**
+ * 目前打印基于拷贝功能实现，所以还不支持图表及图片等 drawing 元素
+ * @param iframe
+ * @param workbook
+ */
+function renderInIframe(iframe, workbook) {
+    var printDocument = iframe.contentDocument;
+    var allRange = {
+        startRow: 0,
+        startCol: 0,
+        endRow: MAX_ROW,
+        endCol: MAX_COL
+    };
+    var table = rangeToHTML(workbook, allRange).table;
+    var borderColor = workbook.renderOptions.gridLineColor;
+    if (workbook.getActiveSheet().showGridLines() === false) {
+        borderColor = 'transparent';
+    }
+    printDocument.write(printStyle(borderColor) + table);
+}
+
+export { renderInIframe };

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

@@ -0,0 +1,108 @@
+/**
+ * Canvas 的简单封装，方便绘制图形
+ */
+import { Line } from './Line';
+import { Widget } from './widget/Widget';
+export declare class Canvas {
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    width: number;
+    height: number;
+    widgets: Map<string, Widget>;
+    /**
+     * 缩放比例
+     */
+    zoom: number;
+    ratio: number;
+    constructor(width: number, height: number, zoom: number, className: string);
+    private setZoom;
+    renderWidget(widget: Widget): Promise<void>;
+    lastTarget: Widget | null;
+    /**
+     * 鼠标移动的时候判断是否在某个 widget 上
+     */
+    handleMousemove(event: MouseEvent): void;
+    updateCursor(cursor: string): void;
+    hasWidget(key: string): boolean;
+    addWidget(key: string, widget: Widget): void;
+    getRealRatio(): number;
+    getCanvasElement(): HTMLCanvasElement;
+    getContext(): CanvasRenderingContext2D;
+    updateZoom(zoom: number): void;
+    /**
+     * 清空画布
+     */
+    clear(width?: number, height?: number): void;
+    clearRect(x: number, y: number, width: number, height: number): void;
+    clearRectPadding(x: number, y: number, width: number, height: number, padding: number): void;
+    /**
+     * 绘制线条
+     * @param line 线条配置
+     * @param color
+     * @param width
+     */
+    drawLine(line: Line, color: string, width?: number): void;
+    setLineDash(line: Line, segments: number[], color: string, width?: number): void;
+    /**
+     * 绘制多个线条
+     * @param line 多个线条配置
+     * @param width
+     * @param height
+     * @param color
+     */
+    drawLines(lines: Line[], color: string, width?: number): void;
+    /**
+     * 绘制字体
+     * @param font
+     * @param color
+     * @param text
+     * @param x
+     * @param y
+     * @param textBaseline
+     */
+    drawText(font: string, color: string | undefined, text: string, x: number, y: number, textBaseline?: CanvasTextBaseline): void;
+    /**
+     * 绘制矩形
+     */
+    drawRect(x: number, y: number, width: number, height: number, color: string): void;
+    /**
+     * 绘制带 padding 的矩形
+     */
+    drawRectWithPadding(x: number, y: number, width: number, height: number, color: string, padding: number): void;
+    drawRectLinearGradientWithPadding(x: number, y: number, width: number, height: number, color: string, colorEnd: string, padding: number): void;
+    /**
+     * 绘制带透明度的矩形
+     */
+    drawAlphaRect(x: number, y: number, width: number, height: number, color: string, alpha: number): void;
+    /**
+     * 绘制带透明度的矩形，加 padding
+     */
+    drawAlphaRectPadding(x: number, y: number, width: number, height: number, padding: number, color: string, alpha: number): void;
+    /**
+     * 绘制矩形边框
+     */
+    drawStrokeRect(x: number, y: number, width: number, height: number, color: string, lineWidth?: number): void;
+    /**
+     * 绘制带 padding 的矩形边框
+     */
+    drawStrokeRectPadding(x: number, y: number, width: number, height: number, color: string, lineWidth?: number, padding?: number): void;
+    drawImage(url: string, x: number, y: number, width: number, height: number): void;
+    imageCache: Map<string, OffscreenCanvas>;
+    /**
+     * 绘制图片，并使用缓存
+     * @param url
+     * @param x
+     * @param y
+     * @param width
+     * @param height
+     */
+    drawImageWithCache(url: string, x: number, y: number, width: number, height: number): Promise<void>;
+    /**
+     * 运行绘制并缓存
+     */
+    customDrawWithCache(cacheKey: string, x: number, y: number, width: number, height: number, func: (ctx: OffscreenCanvasRenderingContext2D, ratio: number) => void): Promise<void>;
+    /**
+     * 清空缓存
+     */
+    clearCache(): void;
+}

package/esm/excel/render/Canvas.js

@@ -0,0 +1,332 @@
+import { __awaiter, __generator, __values } from 'tslib';
+import { drawOffscreenCanvas } from './canvas/drawOffscreenCanvas.js';
+import { setPixelRatio } from './canvas/setPixelRatio.js';
+
+/**
+ * Canvas 的简单封装，方便绘制图形
+ */
+var Canvas = /** @class */ (function () {
+    function Canvas(width, height, zoom, className) {
+        this.widgets = new Map();
+        /**
+         * 缩放比例
+         */
+        this.zoom = 1;
+        this.ratio = 1;
+        this.lastTarget = null;
+        this.imageCache = new Map();
+        this.canvas = document.createElement('canvas');
+        this.ctx = this.canvas.getContext('2d');
+        this.width = width;
+        this.height = height;
+        this.ratio = setPixelRatio(this.canvas, width, height);
+        this.canvas.className = className;
+        this.zoom = zoom;
+        this.setZoom();
+        this.canvas.addEventListener('mousemove', this.handleMousemove.bind(this));
+    }
+    Canvas.prototype.setZoom = function () {
+        var zoom = this.zoom;
+        if (zoom && zoom !== 1) {
+            this.ctx.scale(zoom, zoom);
+        }
+    };
+    Canvas.prototype.renderWidget = function (widget) {
+        return __awaiter(this, void 0, void 0, function () {
+            var ratio, _a, x, y, imageData;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        ratio = this.ratio * this.zoom;
+                        _a = widget.getClientBounding(), x = _a.x, y = _a.y, _a.width, _a.height;
+                        return [4 /*yield*/, widget.draw()];
+                    case 1:
+                        imageData = _b.sent();
+                        this.ctx.putImageData(imageData, x * ratio, y * ratio);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * 鼠标移动的时候判断是否在某个 widget 上
+     */
+    Canvas.prototype.handleMousemove = function (event) {
+        var e_1, _a;
+        var offsetX = event.offsetX, offsetY = event.offsetY;
+        offsetX = offsetX / this.zoom;
+        offsetY = offsetY / this.zoom;
+        try {
+            for (var _b = __values(this.widgets.values()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var widget = _c.value;
+                if (widget.isPointInWidget(offsetX, offsetY)) {
+                    if (this.lastTarget && this.lastTarget !== widget) {
+                        this.lastTarget.onMouseout();
+                    }
+                    else {
+                        this.lastTarget = widget;
+                        widget.onMouseover();
+                    }
+                }
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+    };
+    Canvas.prototype.updateCursor = function (cursor) {
+        this.canvas.style.cursor = cursor;
+    };
+    Canvas.prototype.hasWidget = function (key) {
+        return this.widgets.has(key);
+    };
+    Canvas.prototype.addWidget = function (key, widget) {
+        this.widgets.set(key, widget);
+        this.renderWidget(widget);
+    };
+    Canvas.prototype.getRealRatio = function () {
+        return this.ratio * this.zoom;
+    };
+    Canvas.prototype.getCanvasElement = function () {
+        return this.canvas;
+    };
+    Canvas.prototype.getContext = function () {
+        return this.ctx;
+    };
+    Canvas.prototype.updateZoom = function (zoom) {
+        this.zoom = zoom;
+        this.ctx.resetTransform();
+        this.ctx.scale(this.ratio * zoom, this.ratio * zoom);
+        this.clearCache();
+    };
+    /**
+     * 清空画布
+     */
+    Canvas.prototype.clear = function (width, height) {
+        var ctx = this.ctx;
+        ctx.clearRect(0, 0, (width || this.width) / this.zoom, (height || this.height) / this.zoom);
+    };
+    Canvas.prototype.clearRect = function (x, y, width, height) {
+        var ctx = this.ctx;
+        ctx.clearRect(x, y, width, height);
+    };
+    Canvas.prototype.clearRectPadding = function (x, y, width, height, padding) {
+        this.clearRect(x + padding, y + padding, width - padding * 2, height - padding * 2);
+    };
+    /**
+     * 绘制线条
+     * @param line 线条配置
+     * @param color
+     * @param width
+     */
+    Canvas.prototype.drawLine = function (line, color, width) {
+        if (width === void 0) { width = 1; }
+        var ctx = this.ctx;
+        ctx.beginPath();
+        ctx.moveTo(line.x1, line.y1);
+        ctx.lineTo(line.x2, line.y2);
+        ctx.strokeStyle = color;
+        ctx.lineWidth = width;
+        ctx.stroke();
+    };
+    Canvas.prototype.setLineDash = function (line, segments, color, width) {
+        if (width === void 0) { width = 1; }
+        var ctx = this.ctx;
+        ctx.beginPath();
+        ctx.moveTo(line.x1, line.y1);
+        ctx.lineTo(line.x2, line.y2);
+        ctx.strokeStyle = color;
+        ctx.lineWidth = width;
+        ctx.setLineDash(segments);
+        ctx.stroke();
+        ctx.setLineDash([]);
+    };
+    /**
+     * 绘制多个线条
+     * @param line 多个线条配置
+     * @param width
+     * @param height
+     * @param color
+     */
+    Canvas.prototype.drawLines = function (lines, color, width) {
+        if (width === void 0) { width = 1; }
+        var ctx = this.ctx;
+        ctx.beginPath();
+        lines.forEach(function (line) {
+            ctx.moveTo(line.x1, line.y1);
+            ctx.lineTo(line.x2, line.y2);
+        });
+        ctx.strokeStyle = color;
+        ctx.lineWidth = width;
+        ctx.stroke();
+    };
+    /**
+     * 绘制字体
+     * @param font
+     * @param color
+     * @param text
+     * @param x
+     * @param y
+     * @param textBaseline
+     */
+    Canvas.prototype.drawText = function (font, color, text, x, y, textBaseline) {
+        if (color === void 0) { color = '#000'; }
+        if (textBaseline === void 0) { textBaseline = 'middle'; }
+        var ctx = this.ctx;
+        ctx.font = font;
+        ctx.fillStyle = color;
+        ctx.textBaseline = textBaseline;
+        ctx.fillText(text, x, y);
+    };
+    /**
+     * 绘制矩形
+     */
+    Canvas.prototype.drawRect = function (x, y, width, height, color) {
+        var ctx = this.ctx;
+        ctx.fillStyle = color;
+        ctx.fillRect(x, y, width, height);
+    };
+    /**
+     * 绘制带 padding 的矩形
+     */
+    Canvas.prototype.drawRectWithPadding = function (x, y, width, height, color, padding) {
+        var ctx = this.ctx;
+        ctx.fillStyle = color;
+        ctx.fillRect(x + padding, y + padding, width - padding * 2, height - padding * 2);
+    };
+    Canvas.prototype.drawRectLinearGradientWithPadding = function (x, y, width, height, color, colorEnd, padding) {
+        var displayWidth = Math.max(1, width - padding * 2);
+        var ctx = this.ctx;
+        // gradient 坐标是全局的
+        var grd = ctx.createLinearGradient(x + padding, y + padding, x + padding + displayWidth, y + padding);
+        grd.addColorStop(0, color);
+        grd.addColorStop(1, colorEnd);
+        ctx.fillStyle = grd;
+        ctx.fillRect(x + padding, y + padding, displayWidth, height - padding * 2);
+    };
+    /**
+     * 绘制带透明度的矩形
+     */
+    Canvas.prototype.drawAlphaRect = function (x, y, width, height, color, alpha) {
+        var ctx = this.ctx;
+        ctx.globalAlpha = alpha;
+        ctx.fillStyle = color;
+        ctx.fillRect(x, y, width, height);
+        ctx.globalAlpha = 1;
+    };
+    /**
+     * 绘制带透明度的矩形，加 padding
+     */
+    Canvas.prototype.drawAlphaRectPadding = function (x, y, width, height, padding, color, alpha) {
+        return this.drawAlphaRect(x + padding, y + padding, width - padding * 2, height - padding * 2, color, alpha);
+    };
+    /**
+     * 绘制矩形边框
+     */
+    Canvas.prototype.drawStrokeRect = function (x, y, width, height, color, lineWidth) {
+        if (lineWidth === void 0) { lineWidth = 1; }
+        var ctx = this.ctx;
+        ctx.strokeStyle = color;
+        ctx.lineWidth = lineWidth;
+        ctx.strokeRect(x, y, width, height);
+    };
+    /**
+     * 绘制带 padding 的矩形边框
+     */
+    Canvas.prototype.drawStrokeRectPadding = function (x, y, width, height, color, lineWidth, padding) {
+        if (lineWidth === void 0) { lineWidth = 1; }
+        if (padding === void 0) { padding = 1; }
+        this.drawStrokeRect(x + padding, y + padding, width - padding * 2, height - padding * 2, color, lineWidth);
+    };
+    Canvas.prototype.drawImage = function (url, x, y, width, height) {
+        var _this = this;
+        var img = new Image();
+        img.src = url;
+        img.onload = function () {
+            _this.ctx.drawImage(img, x, y, width, height);
+        };
+    };
+    /**
+     * 绘制图片，并使用缓存
+     * @param url
+     * @param x
+     * @param y
+     * @param width
+     * @param height
+     */
+    Canvas.prototype.drawImageWithCache = function (url, x, y, width, height) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                return [2 /*return*/, new Promise(function (resolve, reject) {
+                        var ratio = _this.ratio * _this.zoom;
+                        var cacheKey = "".concat(url, "-").concat(width, "-").concat(height);
+                        // 根据 mdn 文档，最好是整数
+                        // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas#avoid_floating-point_coordinates_and_use_integers_instead
+                        width = Math.floor(width);
+                        height = Math.floor(height);
+                        // 避免报错
+                        if (width === 0 || height === 0) {
+                            resolve();
+                            return;
+                        }
+                        var cache = _this.imageCache.get(cacheKey);
+                        if (cache) {
+                            _this.ctx.drawImage(cache, x, y, width, height);
+                            resolve();
+                            return;
+                        }
+                        var img = new Image();
+                        img.src = url;
+                        img.onload = function () {
+                            var imageBitmap = drawOffscreenCanvas(ratio, width, height, function (ctx) {
+                                ctx.drawImage(img, 0, 0, width, height);
+                            });
+                            _this.ctx.drawImage(imageBitmap, x, y, width, height);
+                            _this.imageCache.set(cacheKey, imageBitmap);
+                            resolve();
+                        };
+                        img.onerror = reject;
+                    })];
+            });
+        });
+    };
+    /**
+     * 运行绘制并缓存
+     */
+    Canvas.prototype.customDrawWithCache = function (cacheKey, x, y, width, height, func) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                return [2 /*return*/, new Promise(function (resolve, reject) {
+                        var ratio = _this.ratio * _this.zoom;
+                        var cache = _this.imageCache.get(cacheKey);
+                        if (cache) {
+                            _this.ctx.drawImage(cache, x, y, width, height);
+                            resolve();
+                            return;
+                        }
+                        var imageBitmap = drawOffscreenCanvas(ratio, width, height, function (ctx) {
+                            func(ctx, ratio);
+                        });
+                        _this.ctx.drawImage(imageBitmap, x, y, width, height);
+                        _this.imageCache.set(cacheKey, imageBitmap);
+                        resolve();
+                    })];
+            });
+        });
+    };
+    /**
+     * 清空缓存
+     */
+    Canvas.prototype.clearCache = function () {
+        this.imageCache.clear();
+    };
+    return Canvas;
+}());
+
+export { Canvas };

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

@@ -0,0 +1,20 @@
+/**
+ * 统一放一些常量方便修改
+ */
+export declare const DEFAULT_FONT_SIZE = 12;
+/**
+ * 默认颜色，目前应该就是边框用到
+ */
+export declare const AUTO_COLOR = "#000000";
+/**
+ * 单元格的 padding
+ */
+export declare const PADDING_SIZE = 4;
+/**
+ * 最长列数，从 0 开始
+ */
+export declare const MAX_COL = 16383;
+/**
+ * 最大行数，从 0 开始
+ */
+export declare const MAX_ROW = 1048575;

package/esm/excel/render/Consts.js

@@ -0,0 +1,22 @@
+/**
+ * 统一放一些常量方便修改
+ */
+var DEFAULT_FONT_SIZE = 12;
+/**
+ * 默认颜色，目前应该就是边框用到
+ */
+var AUTO_COLOR = '#000000';
+/**
+ * 单元格的 padding
+ */
+var PADDING_SIZE = 4;
+/**
+ * 最长列数，从 0 开始
+ */
+var MAX_COL = 16383;
+/**
+ * 最大行数，从 0 开始
+ */
+var MAX_ROW = 1048575;
+
+export { AUTO_COLOR, DEFAULT_FONT_SIZE, MAX_COL, MAX_ROW, PADDING_SIZE };