office-viewer 0.1.0 → 0.1.4

package/esm/render/renderTable.js

@@ -1,8 +1,7 @@
-import { __values } from '../node_modules/tslib/tslib.es6.js';
-import { ST_TblStyleOverrideType } from '../openxml/Types.js';
+import { __values } from 'tslib';
 import { Paragraph } from '../openxml/word/Paragraph.js';
 import { Table } from '../openxml/word/Table.js';
-import { addClassName, setStyle, appendChild } from '../util/dom.js';
+import { addClassName, applyStyle, appendChild } from '../util/dom.js';
 import renderParagraph from './renderParagraph.js';
 import { generateTableStyle } from './renderStyle.js';
 import { setElementStyle } from './setElementStyle.js';
@@ -14,51 +13,51 @@ import { setElementStyle } from './setElementStyle.js';
 function setTdClassName(rowIndex, colIndex, rowLength, colLength, element, rowBandSize, colBandSize) {
     // 左上角
     if (rowIndex === 0 && colIndex === 0) {
-        element.classList.add(ST_TblStyleOverrideType.nwCell);
+        element.classList.add('nwCell');
     }
     // 右上角
     if (rowIndex === 0 && colIndex === colLength - 1) {
-        element.classList.add(ST_TblStyleOverrideType.neCell);
+        element.classList.add('neCell');
     }
     // 左下角
     if (rowIndex === rowLength - 1 && colIndex === 0) {
-        element.classList.add(ST_TblStyleOverrideType.swCell);
+        element.classList.add('swCell');
     }
     // 右下角
     if (rowIndex === rowLength - 1 && colIndex === colLength - 1) {
-        element.classList.add(ST_TblStyleOverrideType.seCell);
+        element.classList.add('seCell');
     }
     // 第一行
     if (rowIndex === 0) {
-        element.classList.add(ST_TblStyleOverrideType.firstRow);
+        element.classList.add('firstRow');
     }
     // 最后一行
     if (rowIndex === rowLength - 1) {
-        element.classList.add(ST_TblStyleOverrideType.lastRow);
+        element.classList.add('lastRow');
     }
     // 第一列
     if (colIndex === 0) {
-        element.classList.add(ST_TblStyleOverrideType.firstCol);
+        element.classList.add('firstCol');
     }
     // 最后一列
     if (colIndex === colLength - 1) {
-        element.classList.add(ST_TblStyleOverrideType.lastCol);
+        element.classList.add('lastCol');
     }
     // 奇数行
     if (isOdd(rowIndex + 1)) {
-        element.classList.add(ST_TblStyleOverrideType.band1Horz);
+        element.classList.add('band1Horz');
     }
     // 偶数行
     if (!isOdd(rowIndex + 1)) {
-        element.classList.add(ST_TblStyleOverrideType.band2Horz);
+        element.classList.add('band2Horz');
     }
     // 奇数列
     if (isOdd(colIndex + 1)) {
-        element.classList.add(ST_TblStyleOverrideType.band1Vert);
+        element.classList.add('band1Vert');
     }
     // 偶数列
     if (!isOdd(colIndex + 1)) {
-        element.classList.add(ST_TblStyleOverrideType.band2Vert);
+        element.classList.add('band2Vert');
     }
 }
 /**
@@ -120,7 +119,7 @@ function renderTable(word, table) {
                     setTdClassName(rowIndex, colIndex, table.trs.length, tr.tcs.length, tdEl, properties.rowBandSize, properties.colBandSize);
                     // tr 也能设置 tc style，所以先应用这个
                     if (tr.properties.tcStyle) {
-                        setStyle(tdEl, tr.properties.tcStyle);
+                        applyStyle(tdEl, tr.properties.tcStyle);
                     }
                     var tcPr = tc.properties;
                     setElementStyle(word, tdEl, tcPr);
@@ -130,17 +129,21 @@ function renderTable(word, table) {
                     if (tcPr.rowSpan) {
                         tdEl.rowSpan = tcPr.rowSpan;
                     }
-                    // 如果已经有表格的话，就不再渲染空段落了，避免底部多个空行
-                    var hasTable = false;
+                    var renderSpace = true;
+                    // 如果有 tcPr.hideMark 就不渲染空格
+                    if (tcPr.hideMark) {
+                        renderSpace = false;
+                    }
                     try {
                         for (var _h = (e_3 = void 0, __values(tc.children)), _j = _h.next(); !_j.done; _j = _h.next()) {
                             var tcChild = _j.value;
                             if (tcChild instanceof Paragraph) {
-                                var p = renderParagraph(word, tcChild, !hasTable);
+                                var p = renderParagraph(word, tcChild, renderSpace);
                                 appendChild(tdEl, p);
                             }
                             else if (tcChild instanceof Table) {
-                                hasTable = true;
+                                // 如果已经有表格的话，就不再渲染空段落了，避免底部多个空行
+                                renderSpace = false;
                                 appendChild(tdEl, renderTable(word, tcChild));
                             }
                             else {

package/esm/render/setElementStyle.js

@@ -1,4 +1,4 @@
-import { setStyle, addClassNames } from '../util/dom.js';
+import { applyStyle, addClassName, addClassNames } from '../util/dom.js';
 
 /**
  * 设置元素样式，因为好几个地方用所以统一一下
@@ -8,7 +8,12 @@ function setElementStyle(word, element, properties) {
         return;
     }
     if (properties.cssStyle) {
-        setStyle(element, properties.cssStyle);
+        applyStyle(element, properties.cssStyle);
+        // 需要依赖这个 class 才能实现水平分布
+        // https://stackoverflow.com/a/21199162
+        if (properties.cssStyle['text-align'] === 'justify') {
+            addClassName(element, 'justify');
+        }
     }
     if (properties.pStyle) {
         addClassNames(element, word.getStyleClassName(properties.pStyle));

package/esm/render/zindex.d.ts

@@ -0,0 +1 @@
+export declare const behindIndex = "1";

package/esm/util/blob.js

@@ -1,15 +1,6 @@
 /**
  * 将 blob 转成 data url
  */
-function blobToDataURL(blob) {
-    return new Promise(function (resolve, reject) {
-        var reader = new FileReader();
-        reader.onload = function (_e) { return resolve(reader.result); };
-        reader.onerror = function (_e) { return reject(reader.error); };
-        reader.onabort = function (_e) { return reject(new Error('Read aborted')); };
-        reader.readAsDataURL(blob);
-    });
-}
 /**
  * 下载 blob
  * https://dev.to/nombrekeff/download-file-from-blob-21ho
@@ -36,4 +27,4 @@ function downloadBlob(blob, name) {
     document.body.removeChild(link);
 }
 
-export { blobToDataURL, downloadBlob };
+export { downloadBlob };

package/esm/util/color.d.ts

@@ -0,0 +1,48 @@
+/**
+ * 处理颜色相关的函数，目前只支持 rgb
+ */
+export declare class Color {
+    r: number;
+    g: number;
+    b: number;
+    isValid: boolean;
+    constructor(input: string);
+    static fromHSL(h: number, s: number, l: number): Color;
+    static fromRGB(r: number, g: number, b: number): Color;
+    /**
+     * 设置 lum
+     */
+    lum(l: number): this;
+    /**
+     * 改变 lum 百分比，其实不太对，但差不太多
+     * @param l 百分比，比如 2 相当于 200 %
+     */
+    lumMod(l: number): this;
+    /**
+     * 改变百分比
+     * @param l 百分比，比如 -0.2 相当于减少 20 %
+     */
+    lumOff(l: number): this;
+    /**
+     * h 取值范围是 0-1
+     */
+    hue(h: number): this;
+    hueMod(h: number): this;
+    hueOff(h: number): this;
+    sat(s: number): this;
+    satMod(s: number): this;
+    satOff(s: number): this;
+    /**
+     * 修改 hsl 中某个部分的值
+     */
+    changeHsl(num: number, com: 'h' | 's' | 'l', changeType: 'set' | 'mod' | 'off'): this;
+    /**
+     * 互补色
+     */
+    comp(): this;
+    shade(s: number): void;
+    tint(t: number): void;
+    inv(): this;
+    toHex(): string;
+    toRgba(alpha: number): string;
+}

package/esm/util/color.js

@@ -0,0 +1,211 @@
+/**
+ * 处理颜色相关的函数，目前只支持 rgb
+ */
+// 颜色转换来自 https://gist.github.com/mjackson/5311256
+function rgbToHsl(r, g, b) {
+    (r /= 255), (g /= 255), (b /= 255);
+    var max = Math.max(r, g, b), min = Math.min(r, g, b);
+    var h = 0, s, l = (max + min) / 2;
+    if (max == min) {
+        h = s = 0; // achromatic
+    }
+    else {
+        var d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+        h /= 6;
+    }
+    return { h: h, s: s, l: l };
+}
+function hue2rgb(p, q, t) {
+    if (t < 0)
+        t += 1;
+    if (t > 1)
+        t -= 1;
+    if (t < 1 / 6)
+        return p + (q - p) * 6 * t;
+    if (t < 1 / 2)
+        return q;
+    if (t < 2 / 3)
+        return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+}
+/**
+ * Converts an HSL color value to RGB. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+ * Assumes h, s, and l are contained in the set [0, 1] and
+ * returns r, g, and b in the set [0, 255].
+ *
+ * @param   Number  h       The hue
+ * @param   Number  s       The saturation
+ * @param   Number  l       The lightness
+ * @return  Array           The RGB representation
+ */
+function hslToRgb(h, s, l) {
+    if (h > 1) {
+        h = h / 360;
+    }
+    var r, g, b;
+    if (s == 0) {
+        r = g = b = l; // achromatic
+    }
+    else {
+        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        var p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+    }
+    return { r: r * 255, g: g * 255, b: b * 255 };
+}
+function pad2(c) {
+    return c.length == 1 ? '0' + c : '' + c;
+}
+// `rgbToHex`
+// Converts an RGB color to hex
+// Assumes r, g, and b are contained in the set [0, 255]
+// Returns a 3 or 6 character hex
+function rgbToHex(r, g, b) {
+    var hex = [
+        pad2(Math.round(r).toString(16)),
+        pad2(Math.round(g).toString(16)),
+        pad2(Math.round(b).toString(16))
+    ];
+    return hex.join('').toUpperCase();
+}
+/**
+ * 避免颜色值超出范围，适用于 rgb
+ */
+function toValidColor(c) {
+    return Math.min(Math.max(c, 0), 255);
+}
+var Color = /** @class */ (function () {
+    function Color(input) {
+        var m = input.match(/^#?([0-9a-f]{6})$/i);
+        if (m) {
+            this.r = parseInt(m[1].substring(0, 2), 16);
+            this.g = parseInt(m[1].substring(2, 4), 16);
+            this.b = parseInt(m[1].substring(4, 6), 16);
+            this.isValid = true;
+        }
+    }
+    Color.fromHSL = function (h, s, l) {
+        var rgb = hslToRgb(h, s, l);
+        return new Color("#".concat(rgbToHex(rgb.r, rgb.g, rgb.b)));
+    };
+    Color.fromRGB = function (r, g, b) {
+        var rgb = rgbToHex(r, g, b);
+        return new Color("#".concat(rgb));
+    };
+    /**
+     * 设置 lum
+     */
+    Color.prototype.lum = function (l) {
+        return this.changeHsl(l, 'l', 'set');
+    };
+    /**
+     * 改变 lum 百分比，其实不太对，但差不太多
+     * @param l 百分比，比如 2 相当于 200 %
+     */
+    Color.prototype.lumMod = function (l) {
+        return this.changeHsl(l, 'l', 'mod');
+    };
+    /**
+     * 改变百分比
+     * @param l 百分比，比如 -0.2 相当于减少 20 %
+     */
+    Color.prototype.lumOff = function (l) {
+        return this.changeHsl(l, 'l', 'off');
+    };
+    /**
+     * h 取值范围是 0-1
+     */
+    Color.prototype.hue = function (h) {
+        return this.changeHsl(h, 'h', 'set');
+    };
+    Color.prototype.hueMod = function (h) {
+        return this.changeHsl(h, 'h', 'mod');
+    };
+    Color.prototype.hueOff = function (h) {
+        return this.changeHsl(h, 'h', 'off');
+    };
+    Color.prototype.sat = function (s) {
+        return this.changeHsl(s, 's', 'set');
+    };
+    Color.prototype.satMod = function (s) {
+        return this.changeHsl(s, 's', 'mod');
+    };
+    Color.prototype.satOff = function (s) {
+        return this.changeHsl(s, 's', 'off');
+    };
+    /**
+     * 修改 hsl 中某个部分的值
+     */
+    Color.prototype.changeHsl = function (num, com, changeType) {
+        var hsl = rgbToHsl(this.r, this.g, this.b);
+        if (changeType === 'set') {
+            hsl[com] = num;
+        }
+        else if (changeType === 'mod') {
+            hsl[com] = hsl[com] * num;
+        }
+        else if (changeType === 'off') {
+            hsl[com] += hsl[com] * num;
+        }
+        var rgb = hslToRgb(hsl.h, hsl.s, hsl.l);
+        this.r = rgb.r;
+        this.g = rgb.g;
+        this.b = rgb.b;
+        return this;
+    };
+    /**
+     * 互补色
+     */
+    Color.prototype.comp = function () {
+        var hsl = rgbToHsl(this.r, this.g, this.b);
+        hsl.h = hsl.h + 0.5;
+        if (hsl.h > 1) {
+            hsl.h -= 1;
+        }
+        var rgb = hslToRgb(hsl.h, hsl.s, hsl.l);
+        this.r = rgb.r;
+        this.g = rgb.g;
+        this.b = rgb.b;
+        return this;
+    };
+    Color.prototype.shade = function (s) {
+        this.r = toValidColor(this.r - 256 * s);
+        this.g = toValidColor(this.g - 256 * s);
+        this.b = toValidColor(this.b - 256 * s);
+    };
+    Color.prototype.tint = function (t) {
+        this.r = toValidColor(this.r + 256 * t);
+        this.g = toValidColor(this.g + 256 * t);
+        this.b = toValidColor(this.b + 256 * t);
+    };
+    Color.prototype.inv = function () {
+        this.r = 255 - this.r;
+        this.g = 255 - this.g;
+        this.b = 255 - this.b;
+        return this;
+    };
+    Color.prototype.toHex = function () {
+        return '#' + rgbToHex(this.r, this.g, this.b);
+    };
+    Color.prototype.toRgba = function (alpha) {
+        return "rgba(".concat(this.r, ", ").concat(this.g, ", ").concat(this.b, ", ").concat(alpha, ")");
+    };
+    return Color;
+}());
+
+export { Color };

package/esm/util/createObject.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 拷贝自 amis 里的方法，避免依赖
+ */
+export declare function createObject(superProps?: {
+    [propName: string]: any;
+}, props?: {
+    [propName: string]: any;
+}, properties?: any): object;
+export declare function cloneObject(target: any, persistOwnProps?: boolean): any;
+export declare function isObject(obj: any): any;

package/esm/util/createObject.js

@@ -0,0 +1,48 @@
+import { __assign } from 'tslib';
+
+/**
+ * 拷贝自 amis 里的方法，避免依赖
+ */
+function createObject(superProps, props, properties) {
+    if (superProps && Object.isFrozen(superProps)) {
+        superProps = cloneObject(superProps);
+    }
+    var obj = superProps
+        ? Object.create(superProps, __assign(__assign({}, properties), { __super: {
+                value: superProps,
+                writable: false,
+                enumerable: false
+            } }))
+        : Object.create(Object.prototype, properties);
+    props &&
+        isObject(props) &&
+        Object.keys(props).forEach(function (key) { return (obj[key] = props[key]); });
+    return obj;
+}
+function cloneObject(target, persistOwnProps) {
+    if (persistOwnProps === void 0) { persistOwnProps = true; }
+    var obj = target && target.__super
+        ? Object.create(target.__super, {
+            __super: {
+                value: target.__super,
+                writable: false,
+                enumerable: false
+            }
+        })
+        : Object.create(Object.prototype);
+    persistOwnProps &&
+        target &&
+        Object.keys(target).forEach(function (key) { return (obj[key] = target[key]); });
+    return obj;
+}
+function isObject(obj) {
+    var typename = typeof obj;
+    return (obj &&
+        typename !== 'string' &&
+        typename !== 'number' &&
+        typename !== 'boolean' &&
+        typename !== 'function' &&
+        !Array.isArray(obj));
+}
+
+export { cloneObject, createObject, isObject };

package/esm/util/dom.d.ts

@@ -9,19 +9,23 @@ export declare function styleToText(style?: CSSStyle): string;
 /**
  * 设置元素样式
  */
-export declare function setStyle(el: HTMLElement, style: CSSStyle): void;
+export declare function applyStyle(el: HTMLElement, style?: CSSStyle): void;
 /**
  * 创建元素
  */
 export declare function createElement(tagName: string): HTMLElement;
 /**
- * 创建片段
+ * 创建 SVG 元素
  */
-export declare function createDocumentFragment(): DocumentFragment;
+export declare function createSVGElement(tagName: string): SVGElement;
 /**
  * 添加子节点，会做一些判断避免报错
  */
-export declare function appendChild(parent: HTMLElement, child: HTMLElement | null): void;
+export declare function appendChild(parent: HTMLElement, child?: Node | null): void;
+/**
+ * 删除子节点，会做一些判断避免报错
+ */
+export declare function removeChild(parent: HTMLElement, child?: Node | null): void;
 /**
  * 添加注释节点
  */

package/esm/util/dom.js

@@ -1,4 +1,4 @@
-import { __spreadArray, __read } from '../node_modules/tslib/tslib.es6.js';
+import { __spreadArray, __read } from 'tslib';
 
 /**
  * dom 相关的操作
@@ -20,11 +20,14 @@ function styleToText(style) {
 /**
  * 设置元素样式
  */
-function setStyle(el, style) {
+function applyStyle(el, style) {
+    if (!style) {
+        return;
+    }
     for (var key in style) {
         var value = style[key];
         if (value != null && value !== '') {
-            el.style.setProperty(key, style[key]);
+            el.style.setProperty(key, String(value));
         }
     }
 }
@@ -34,6 +37,12 @@ function setStyle(el, style) {
 function createElement(tagName) {
     return document.createElement(tagName);
 }
+/**
+ * 创建 SVG 元素
+ */
+function createSVGElement(tagName) {
+    return document.createElementNS('http://www.w3.org/2000/svg', tagName);
+}
 /**
  * 添加子节点，会做一些判断避免报错
  */
@@ -42,6 +51,14 @@ function appendChild(parent, child) {
         parent.appendChild(child);
     }
 }
+/**
+ * 删除子节点，会做一些判断避免报错
+ */
+function removeChild(parent, child) {
+    if (parent && child) {
+        parent.removeChild(child);
+    }
+}
 /**
  * 添加 css 类
  */
@@ -60,4 +77,4 @@ function addClassNames(el, classNames) {
     }
 }
 
-export { addClassName, addClassNames, appendChild, createElement, setStyle, styleToText };
+export { addClassName, addClassNames, appendChild, applyStyle, createElement, createSVGElement, removeChild, styleToText };

package/esm/util/get.d.ts

@@ -0,0 +1,4 @@
+/**
+ * https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_get
+ */
+export declare const get: (obj: any, path: string, defaultValue?: undefined) => any;

package/esm/util/get.js

@@ -0,0 +1,18 @@
+/**
+ * https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_get
+ */
+var get = function (obj, path, defaultValue) {
+    if (defaultValue === void 0) { defaultValue = undefined; }
+    var travel = function (regexp) {
+        return String.prototype.split
+            .call(path, regexp)
+            .filter(Boolean)
+            .reduce(function (res, key) {
+            return res !== null && res !== undefined ? res[key] : res;
+        }, obj);
+    };
+    var result = travel(/[,[\]]+?/) || travel(/[,[\].]+?/);
+    return result === undefined || result === obj ? defaultValue : result;
+};
+
+export { get };

package/esm/util/mergeRun.js

@@ -1,4 +1,4 @@
-import { __values } from '../node_modules/tslib/tslib.es6.js';
+import { __values } from 'tslib';
 import { parsePr } from '../parse/parsePr.js';
 
 /**

package/esm/util/parseSides.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 来自 https://github.com/jednano/parse-css-sides/blob/master/src/index.ts
+ */
+export interface ISides {
+    top: string;
+    right: string;
+    bottom: string;
+    left: string;
+    important?: boolean;
+}
+export default function parseSides(value: string): ISides;

package/esm/util/print.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 打印 iframe，参考了 print.js 里的部分实现
+ * @param iframe
+ */
+export declare function printIframe(iframe: HTMLIFrameElement): void;

package/esm/util/print.js

@@ -0,0 +1,54 @@
+import { __awaiter, __generator } from 'tslib';
+
+function loadIframeImages(images) {
+    var _this = this;
+    var promises = images.map(function (image) { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(image.src && image.src !== window.location.href)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, loadIframeImage(image)];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); });
+    return Promise.all(promises);
+}
+function loadIframeImage(image) {
+    return new Promise(function (resolve) {
+        var pollImage = function () {
+            !image ||
+                typeof image.naturalWidth === 'undefined' ||
+                image.naturalWidth === 0 ||
+                !image.complete
+                ? setTimeout(pollImage, 500)
+                : resolve();
+        };
+        pollImage();
+    });
+}
+function performPrint(iframe) {
+    var _a, _b;
+    (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.print();
+    (_b = iframe.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(iframe);
+}
+/**
+ * 打印 iframe，参考了 print.js 里的部分实现
+ * @param iframe
+ */
+function printIframe(iframe) {
+    var printDocument = iframe.contentDocument;
+    // If printing images, wait for them to load inside the iframe
+    var images = printDocument.getElementsByTagName('img');
+    if (images.length > 0) {
+        loadIframeImages(Array.from(images)).then(function () { return performPrint(iframe); });
+    }
+    else {
+        performPrint(iframe);
+    }
+}
+
+export { printIframe };

package/esm/util/replaceVar.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 执行变量替换，和普通变量不同，这个支持数组，但因为是提前执行好的，没法再动态生效了
+ * 为了避免 word 里不必要的标签要先执行 mergeRun
+ */
+import Word from '../Word';
+/**
+ * 替换单个文本变量
+ */
+export declare function replaceT(word: Word, t: Element, data: any): void;
+export declare function replaceVar(word: Word, documentData: Document): void;