office-viewer 0.1.0 → 0.1.3

package/lib/render/renderTable.js

@@ -2,8 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../node_modules/tslib/tslib.es6.js');
-var Types = require('../openxml/Types.js');
+var tslib = require('tslib');
 var Paragraph = require('../openxml/word/Paragraph.js');
 var Table = require('../openxml/word/Table.js');
 var dom = require('../util/dom.js');
@@ -18,51 +17,51 @@ var setElementStyle = require('./setElementStyle.js');
 function setTdClassName(rowIndex, colIndex, rowLength, colLength, element, rowBandSize, colBandSize) {
     // 左上角
     if (rowIndex === 0 && colIndex === 0) {
-        element.classList.add(Types.ST_TblStyleOverrideType.nwCell);
+        element.classList.add('nwCell');
     }
     // 右上角
     if (rowIndex === 0 && colIndex === colLength - 1) {
-        element.classList.add(Types.ST_TblStyleOverrideType.neCell);
+        element.classList.add('neCell');
     }
     // 左下角
     if (rowIndex === rowLength - 1 && colIndex === 0) {
-        element.classList.add(Types.ST_TblStyleOverrideType.swCell);
+        element.classList.add('swCell');
     }
     // 右下角
     if (rowIndex === rowLength - 1 && colIndex === colLength - 1) {
-        element.classList.add(Types.ST_TblStyleOverrideType.seCell);
+        element.classList.add('seCell');
     }
     // 第一行
     if (rowIndex === 0) {
-        element.classList.add(Types.ST_TblStyleOverrideType.firstRow);
+        element.classList.add('firstRow');
     }
     // 最后一行
     if (rowIndex === rowLength - 1) {
-        element.classList.add(Types.ST_TblStyleOverrideType.lastRow);
+        element.classList.add('lastRow');
     }
     // 第一列
     if (colIndex === 0) {
-        element.classList.add(Types.ST_TblStyleOverrideType.firstCol);
+        element.classList.add('firstCol');
     }
     // 最后一列
     if (colIndex === colLength - 1) {
-        element.classList.add(Types.ST_TblStyleOverrideType.lastCol);
+        element.classList.add('lastCol');
     }
     // 奇数行
     if (isOdd(rowIndex + 1)) {
-        element.classList.add(Types.ST_TblStyleOverrideType.band1Horz);
+        element.classList.add('band1Horz');
     }
     // 偶数行
     if (!isOdd(rowIndex + 1)) {
-        element.classList.add(Types.ST_TblStyleOverrideType.band2Horz);
+        element.classList.add('band2Horz');
     }
     // 奇数列
     if (isOdd(colIndex + 1)) {
-        element.classList.add(Types.ST_TblStyleOverrideType.band1Vert);
+        element.classList.add('band1Vert');
     }
     // 偶数列
     if (!isOdd(colIndex + 1)) {
-        element.classList.add(Types.ST_TblStyleOverrideType.band2Vert);
+        element.classList.add('band2Vert');
     }
 }
 /**
@@ -111,20 +110,20 @@ function renderTable(word, table) {
     tableEl.appendChild(tbody);
     var rowIndex = 0;
     try {
-        for (var _d = tslib_es6.__values(table.trs), _e = _d.next(); !_e.done; _e = _d.next()) {
+        for (var _d = tslib.__values(table.trs), _e = _d.next(); !_e.done; _e = _d.next()) {
             var tr = _e.value;
             var trEl = document.createElement('tr');
             tbody.appendChild(trEl);
             var colIndex = 0;
             try {
-                for (var _f = (e_2 = void 0, tslib_es6.__values(tr.tcs)), _g = _f.next(); !_g.done; _g = _f.next()) {
+                for (var _f = (e_2 = void 0, tslib.__values(tr.tcs)), _g = _f.next(); !_g.done; _g = _f.next()) {
                     var tc = _g.value;
                     var tdEl = document.createElement('td');
                     trEl.appendChild(tdEl);
                     setTdClassName(rowIndex, colIndex, table.trs.length, tr.tcs.length, tdEl, properties.rowBandSize, properties.colBandSize);
                     // tr 也能设置 tc style，所以先应用这个
                     if (tr.properties.tcStyle) {
-                        dom.setStyle(tdEl, tr.properties.tcStyle);
+                        dom.applyStyle(tdEl, tr.properties.tcStyle);
                     }
                     var tcPr = tc.properties;
                     setElementStyle.setElementStyle(word, tdEl, tcPr);
@@ -134,17 +133,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, tslib_es6.__values(tc.children)), _j = _h.next(); !_j.done; _j = _h.next()) {
+                        for (var _h = (e_3 = void 0, tslib.__values(tc.children)), _j = _h.next(); !_j.done; _j = _h.next()) {
                             var tcChild = _j.value;
                             if (tcChild instanceof Paragraph.Paragraph) {
-                                var p = renderParagraph["default"](word, tcChild, !hasTable);
+                                var p = renderParagraph["default"](word, tcChild, renderSpace);
                                 dom.appendChild(tdEl, p);
                             }
                             else if (tcChild instanceof Table.Table) {
-                                hasTable = true;
+                                // 如果已经有表格的话，就不再渲染空段落了，避免底部多个空行
+                                renderSpace = false;
                                 dom.appendChild(tdEl, renderTable(word, tcChild));
                             }
                             else {

package/lib/render/setElementStyle.js

@@ -12,7 +12,12 @@ function setElementStyle(word, element, properties) {
         return;
     }
     if (properties.cssStyle) {
-        dom.setStyle(element, properties.cssStyle);
+        dom.applyStyle(element, properties.cssStyle);
+        // 需要依赖这个 class 才能实现水平分布
+        // https://stackoverflow.com/a/21199162
+        if (properties.cssStyle['text-align'] === 'justify') {
+            dom.addClassName(element, 'justify');
+        }
     }
     if (properties.pStyle) {
         dom.addClassNames(element, word.getStyleClassName(properties.pStyle));

package/lib/render/zindex.d.ts

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

package/lib/util/blob.js

@@ -5,15 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 /**
  * 将 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
@@ -40,5 +31,4 @@ function downloadBlob(blob, name) {
     document.body.removeChild(link);
 }
 
-exports.blobToDataURL = blobToDataURL;
 exports.downloadBlob = downloadBlob;

package/lib/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/lib/util/color.js

@@ -0,0 +1,215 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 处理颜色相关的函数，目前只支持 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;
+}());
+
+exports.Color = Color;

package/lib/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/lib/util/createObject.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+
+/**
+ * 拷贝自 amis 里的方法，避免依赖
+ */
+function createObject(superProps, props, properties) {
+    if (superProps && Object.isFrozen(superProps)) {
+        superProps = cloneObject(superProps);
+    }
+    var obj = superProps
+        ? Object.create(superProps, tslib.__assign(tslib.__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));
+}
+
+exports.cloneObject = cloneObject;
+exports.createObject = createObject;
+exports.isObject = isObject;

package/lib/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/lib/util/dom.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 
 /**
  * dom 相关的操作
@@ -24,11 +24,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));
         }
     }
 }
@@ -38,6 +41,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);
+}
 /**
  * 添加子节点，会做一些判断避免报错
  */
@@ -46,6 +55,14 @@ function appendChild(parent, child) {
         parent.appendChild(child);
     }
 }
+/**
+ * 删除子节点，会做一些判断避免报错
+ */
+function removeChild(parent, child) {
+    if (parent && child) {
+        parent.removeChild(child);
+    }
+}
 /**
  * 添加 css 类
  */
@@ -60,13 +77,15 @@ function addClassName(el, className) {
 function addClassNames(el, classNames) {
     var _a;
     if (el && classNames) {
-        (_a = el.classList).add.apply(_a, tslib_es6.__spreadArray([], tslib_es6.__read(classNames), false));
+        (_a = el.classList).add.apply(_a, tslib.__spreadArray([], tslib.__read(classNames), false));
     }
 }
 
 exports.addClassName = addClassName;
 exports.addClassNames = addClassNames;
 exports.appendChild = appendChild;
+exports.applyStyle = applyStyle;
 exports.createElement = createElement;
-exports.setStyle = setStyle;
+exports.createSVGElement = createSVGElement;
+exports.removeChild = removeChild;
 exports.styleToText = styleToText;

package/lib/util/mergeRun.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 var parsePr = require('../parse/parsePr.js');
 
 /**
@@ -34,7 +34,7 @@ function canMerge(element) {
     var hasText = false;
     var textHasSpace = false;
     try {
-        for (var childChildren_1 = tslib_es6.__values(childChildren), childChildren_1_1 = childChildren_1.next(); !childChildren_1_1.done; childChildren_1_1 = childChildren_1.next()) {
+        for (var childChildren_1 = tslib.__values(childChildren), childChildren_1_1 = childChildren_1.next(); !childChildren_1_1.done; childChildren_1_1 = childChildren_1.next()) {
             var childChild = childChildren_1_1.value;
             if (childChild.tagName === 'w:t') {
                 hasText = true;
@@ -60,7 +60,7 @@ function mergeRunInP(word, p) {
     var newElements = [];
     var lastRun = null;
     try {
-        for (var _c = tslib_es6.__values(p.children), _d = _c.next(); !_d.done; _d = _c.next()) {
+        for (var _c = tslib.__values(p.children), _d = _c.next(); !_d.done; _d = _c.next()) {
             var child = _d.value;
             var tagName = child.tagName;
             // 避免图片和空格被合并了
@@ -100,7 +100,7 @@ function mergeRunInP(word, p) {
     }
     p.innerHTML = '';
     try {
-        for (var newElements_1 = tslib_es6.__values(newElements), newElements_1_1 = newElements_1.next(); !newElements_1_1.done; newElements_1_1 = newElements_1.next()) {
+        for (var newElements_1 = tslib.__values(newElements), newElements_1_1 = newElements_1.next(); !newElements_1_1.done; newElements_1_1 = newElements_1.next()) {
             var newElement = newElements_1_1.value;
             p.appendChild(newElement);
         }
@@ -121,7 +121,7 @@ function mergeRun(word, doc) {
     var e_4, _a;
     var ps = doc.getElementsByTagName('w:p');
     try {
-        for (var ps_1 = tslib_es6.__values(ps), ps_1_1 = ps_1.next(); !ps_1_1.done; ps_1_1 = ps_1.next()) {
+        for (var ps_1 = tslib.__values(ps), ps_1_1 = ps_1.next(); !ps_1_1.done; ps_1_1 = ps_1.next()) {
             var p = ps_1_1.value;
             mergeRunInP(word, p);
         }

package/lib/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/lib/util/print.d.ts

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