office-viewer 0.1.0 → 0.1.4

package/lib/openxml/drawing/svg/arcToA.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 将 arc 定义转成 SVG PATH 里的 A 命令
+ */
+/**
+ * 将 arc 转成 A 指令，但目前看来不太正确，比如 curvedRightArrow 的显示就不对
+ */
+export default function arcToPathA(wR: number, hR: number, stAng: number, swAng: number, preX: number, preY: number): {
+    path: string;
+    end: {
+        x: number;
+        y: number;
+    };
+};

package/lib/openxml/drawing/svg/arcToA.js

@@ -0,0 +1,92 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 将 arc 定义转成 SVG PATH 里的 A 命令
+ */
+function floatEqual(a, b) {
+    if (a === b) {
+        return true;
+    }
+    var diff = Math.abs(a - b);
+    if (diff < Number.EPSILON) {
+        return true;
+    }
+    return diff <= Number.EPSILON * Math.min(Math.abs(a), Math.abs(b));
+}
+/**
+ * 计算角度
+ */
+var radians = function (deg) { return Math.PI * (deg / 60000 / 180); };
+/**
+ * 将 arc 转成 A 指令，但目前看来不太正确，比如 curvedRightArrow 的显示就不对
+ */
+function arcToPathA(wR, hR, stAng, swAng, preX, preY) {
+    var startR = radians(stAng);
+    var swAngR = radians(swAng);
+    var endR = radians(stAng + swAng);
+    if (floatEqual(swAng, 60000 * 360)) {
+        // 如果是圆会变成点，所以减少一下避免这种情况
+        endR = endR - 0.0001;
+    }
+    var end = getEndPoint(wR, hR, startR, endR, 0, preX, preY);
+    // 是否是大弧
+    var largeArcFlag = Math.abs(swAngR) > Math.PI ? 1 : 0;
+    // 是否是顺时针
+    var sweepFlag = swAng > 0 ? 1 : 0;
+    var path = "A ".concat(wR, " ").concat(hR, " 0 ").concat(largeArcFlag, " ").concat(sweepFlag, " ").concat(end.x, ",").concat(end.y);
+    return {
+        path: path,
+        end: end
+    };
+}
+/**
+ * 简单实现的矩阵相乘，只支持一种输入
+ */
+function matrixMul(first, second) {
+    return [
+        first[0][0] * second[0] + first[0][1] * second[1],
+        first[1][0] * second[0] + first[1][1] * second[1]
+    ];
+}
+/**
+ * 算出结束点位置，公式来自
+ * https://www.cnblogs.com/ryzen/p/15191386.html
+ * https://wiki.documentfoundation.org/Development/Improve_handles_of_DrawingML_shapes
+ *
+ * @param rx 半长轴半径
+ * @param ry 半短轴半径
+ * @param stAng 起始角度
+ * @param swAng 旋转角度
+ * @param rotate 旋转
+ * @param x 起始点 x 坐标
+ * @param y 起始点 y 坐标
+ * @returns 结束点位置
+ */
+function getEndPoint(rx, ry, stAng, swAng, rotate, x, y) {
+    var startR = stAng;
+    var endR = swAng;
+    // 起始节点坐标
+    var matrixX1Y1 = [x, y];
+    var matrix1 = [
+        [Math.cos(rotate), -Math.sin(rotate)],
+        [Math.sin(rotate), Math.cos(rotate)]
+    ];
+    var matrix2 = [rx * Math.cos(startR), ry * Math.sin(startR)];
+    // 公式第二部分
+    var secondPart = matrixMul(matrix1, matrix2);
+    var matrixCxCy = [
+        matrixX1Y1[0] - secondPart[0],
+        matrixX1Y1[1] - secondPart[1]
+    ];
+    var matrix3 = [rx * Math.cos(endR), ry * Math.sin(endR)];
+    var firstPart = matrixMul(matrix1, matrix3);
+    var result = [matrixCxCy[0] + firstPart[0], matrixCxCy[1] + firstPart[1]];
+    return {
+        x: result[0],
+        y: result[1]
+    };
+}
+
+exports["default"] = arcToPathA;

package/lib/openxml/drawing/svg/formulas.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 计算公式 20.1.9.11
+ */
+export declare const formulas: {
+    '*/': (x: number, y: number, z: number) => number;
+    '+-': (x: number, y: number, z: number) => number;
+    '+/': (x: number, y: number, z: number) => number;
+    '?:': (x: number, y: number, z: number) => number;
+    abs: (x: number) => number;
+    at2: (x: number, y: number) => number;
+    cat2: (x: number, y: number, z: number) => number;
+    cos: (x: number, y: number) => number;
+    max: (x: number, y: number) => number;
+    min: (x: number, y: number) => number;
+    mod: (x: number, y: number, z: number) => number;
+    pin: (x: number, y: number, z: number) => number;
+    sat2: (x: number, y: number, z: number) => number;
+    sin: (x: number, y: number) => number;
+    sqrt: (x: number) => number;
+    tan: (x: number, y: number) => number;
+    val: (a: string) => number;
+};
+/**
+ * 执行公式计算并返回结果
+ * @param fmla 公式
+ * @param vars 变量值
+ * @returns
+ */
+export declare function evalFmla(name: string, fmla: string, vars: Record<string, number>): number;

package/lib/openxml/drawing/svg/formulas.js

@@ -0,0 +1,108 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 计算公式 20.1.9.11
+ */
+var angleFactor = (1 / 60000 / 180) * Math.PI;
+var formulas = {
+    '*/': function (x, y, z) {
+        return (x * y) / z;
+    },
+    '+-': function (x, y, z) {
+        return x + y - z;
+    },
+    '+/': function (x, y, z) {
+        return (x + y) / z;
+    },
+    '?:': function (x, y, z) {
+        return x > 0 ? y : z;
+    },
+    'abs': function (x) {
+        return Math.abs(x);
+    },
+    'at2': function (x, y) {
+        // 转回角度，因为后续的计算是基于角度的
+        return (Math.atan2(y, x) * 180 * 60000) / Math.PI;
+    },
+    'cat2': function (x, y, z) {
+        return x * Math.cos(Math.atan2(z, y));
+    },
+    'cos': function (x, y) {
+        return x * Math.cos(y * angleFactor);
+    },
+    'max': function (x, y) {
+        return Math.max(x, y);
+    },
+    'min': function (x, y) {
+        return Math.min(x, y);
+    },
+    'mod': function (x, y, z) {
+        return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2) + Math.pow(z, 2));
+    },
+    'pin': function (x, y, z) {
+        return y < x ? x : y > z ? z : y;
+    },
+    'sat2': function (x, y, z) {
+        return x * Math.sin(Math.atan2(z, y));
+    },
+    'sin': function (x, y) {
+        return x * Math.sin(y * angleFactor);
+    },
+    'sqrt': function (x) {
+        return Math.sqrt(x);
+    },
+    'tan': function (x, y) {
+        return x * Math.tan(y * angleFactor);
+    },
+    'val': function (a) {
+        var parse = parseInt(a, 10);
+        if (isNaN(parse)) {
+            return parse;
+        }
+        return parse;
+    }
+};
+/**
+ * 执行公式计算并返回结果
+ * @param fmla 公式
+ * @param vars 变量值
+ * @returns
+ */
+function evalFmla(name, fmla, vars) {
+    var fmlaArr = fmla.split(/[ ]+/);
+    if (fmlaArr.length <= 1) {
+        console.warn('fmla format error', fmla);
+    }
+    var fmlaName = fmlaArr[0];
+    var fmlaArgs = fmlaArr.slice(1);
+    // 这里要求 gd 定义必须顺序，不然就找不到之前的值了
+    var fmlaArgsNum = fmlaArgs.map(function (arg) {
+        if (arg in vars) {
+            return vars[arg];
+        }
+        var parse = parseInt(arg, 10);
+        if (isNaN(parse)) {
+            console.warn('fmla arg error', arg, fmla);
+            return 0;
+        }
+        else {
+            return parse;
+        }
+    });
+    if (fmlaName in formulas) {
+        var val = formulas[fmlaName].apply(null, fmlaArgsNum);
+        if (isNaN(val)) {
+            console.warn('fmla eval error', fmla, name);
+            return 0;
+        }
+        else {
+            vars[name] = val;
+        }
+    }
+    return 0;
+}
+
+exports.evalFmla = evalFmla;
+exports.formulas = formulas;

package/lib/openxml/drawing/svg/generateDefines.d.ts

@@ -0,0 +1,12 @@
+import { Path } from '../Path';
+export type Var = Record<string, number>;
+export type Point = {
+    x: number;
+    y: number;
+};
+/**
+ *
+ * 转成 svg path 里的定义
+ * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
+ */
+export declare function generateDefines(path: Path, vars: Var, prevPoint: Point[]): string;

package/lib/openxml/drawing/svg/generateDefines.js

@@ -0,0 +1,148 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var arcToA = require('./arcToA.js');
+
+function getVal(name, vars, scale) {
+    var result = 0;
+    if (name in vars) {
+        result = vars[name];
+    }
+    else {
+        result = parseInt(name, 10);
+        if (isNaN(result)) {
+            console.warn('var not found', name);
+            return 0;
+        }
+    }
+    if (scale) {
+        return result * scale;
+    }
+    else {
+        return result;
+    }
+}
+/**
+ *
+ * 转成 svg path 里的定义
+ * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
+ */
+function generateDefines(path, vars, prevPoint) {
+    var e_1, _a;
+    var defines = path.defines;
+    var paths = [];
+    var w = path.w;
+    var h = path.h;
+    var wScale = 1;
+    var hScale = 1;
+    if (w) {
+        wScale = vars['w'] / w;
+    }
+    if (h) {
+        hScale = vars['h'] / h;
+    }
+    try {
+        for (var defines_1 = tslib.__values(defines), defines_1_1 = defines_1.next(); !defines_1_1.done; defines_1_1 = defines_1.next()) {
+            var def = defines_1_1.value;
+            switch (def.type) {
+                case 'moveTo': {
+                    var pt = def.pt;
+                    var x = getVal(pt.x, vars, wScale);
+                    var y = getVal(pt.y, vars, hScale);
+                    paths.push("M ".concat(x, " ").concat(y));
+                    prevPoint.push({ x: x, y: y });
+                    break;
+                }
+                case 'lnTo': {
+                    var pt = def.pt;
+                    var x = getVal(pt.x, vars, wScale);
+                    var y = getVal(pt.y, vars, hScale);
+                    paths.push("L ".concat(x, " ").concat(y));
+                    prevPoint.push({ x: x, y: y });
+                    break;
+                }
+                case 'arcTo': {
+                    var arc = def;
+                    var wR = getVal(arc.wR, vars, wScale);
+                    var hR = getVal(arc.hR, vars, hScale);
+                    var stAng = getVal(arc.stAng, vars);
+                    var swAng = getVal(arc.swAng, vars);
+                    var prev = {
+                        x: 0,
+                        y: 0
+                    };
+                    if (prevPoint.length > 0) {
+                        prev = prevPoint[prevPoint.length - 1];
+                    }
+                    var aPath = arcToA["default"](wR, hR, stAng, swAng, prev.x, prev.y);
+                    paths.push(aPath.path);
+                    prevPoint.push({ x: aPath.end.x, y: aPath.end.y });
+                    break;
+                }
+                case 'quadBezTo': {
+                    var quadBezTo = def;
+                    if (quadBezTo.pts.length >= 2) {
+                        var pt1 = quadBezTo.pts[0];
+                        var pt2 = quadBezTo.pts[1];
+                        var x1 = getVal(pt1.x, vars, wScale);
+                        var y1 = getVal(pt1.y, vars, hScale);
+                        var x2 = getVal(pt2.x, vars, wScale);
+                        var y2 = getVal(pt2.y, vars, hScale);
+                        paths.push("Q ".concat(x1, ",").concat(y1, " ").concat(x2, ",").concat(y2));
+                        if (quadBezTo.pts.length > 2) {
+                            var pt3 = quadBezTo.pts[2];
+                            var x3 = getVal(pt3.x, vars, wScale);
+                            var y3 = getVal(pt3.y, vars, hScale);
+                            paths.push("T ".concat(x3, ",").concat(y3));
+                            prevPoint.push({ x: x3, y: y3 });
+                        }
+                        else {
+                            prevPoint.push({ x: x2, y: y2 });
+                        }
+                    }
+                    else {
+                        console.warn('quadBezTo pts length must large than 2', def);
+                    }
+                    break;
+                }
+                case 'cubicBezTo': {
+                    var cubicBezTo = def;
+                    if (cubicBezTo.pts.length === 3) {
+                        var pt1 = cubicBezTo.pts[0];
+                        var pt2 = cubicBezTo.pts[1];
+                        var pt3 = cubicBezTo.pts[2];
+                        var x1 = getVal(pt1.x, vars, wScale);
+                        var y1 = getVal(pt1.y, vars, hScale);
+                        var x2 = getVal(pt2.x, vars, wScale);
+                        var y2 = getVal(pt2.y, vars, hScale);
+                        var x3 = getVal(pt3.x, vars, wScale);
+                        var y3 = getVal(pt3.y, vars, hScale);
+                        paths.push("C ".concat(x1, ",").concat(y1, " ").concat(x2, ",").concat(y2, " ").concat(x3, ",").concat(y3));
+                        prevPoint.push({ x: x3, y: y3 });
+                    }
+                    else {
+                        console.warn('cubicBezTo pts length must be 3', def);
+                    }
+                    break;
+                }
+                case 'close':
+                    paths.push('Z');
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (defines_1_1 && !defines_1_1.done && (_a = defines_1.return)) _a.call(defines_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return paths.join(' ');
+}
+
+exports.generateDefines = generateDefines;

package/lib/openxml/drawing/svg/presetVal.d.ts

@@ -0,0 +1,43 @@
+/**
+ * 获取默认 val，20.1.10.56
+ *
+ * @param width
+ * @param height
+ */
+export declare function presetVal(w: number, h: number): {
+    t: number;
+    '3cd4': number;
+    '3cd8': number;
+    '5cd8': number;
+    '7cd8': number;
+    b: number;
+    cd2: number;
+    cd4: number;
+    cd8: number;
+    h: number;
+    hd2: number;
+    hd3: number;
+    hd4: number;
+    hd6: number;
+    hd8: number;
+    l: number;
+    ls: number;
+    r: number;
+    ss: number;
+    ssd2: number;
+    ssd6: number;
+    ssd8: number;
+    ssd16: number;
+    ssd32: number;
+    hc: number;
+    vc: number;
+    w: number;
+    wd2: number;
+    wd3: number;
+    wd4: number;
+    wd6: number;
+    wd8: number;
+    wd10: number;
+    wd16: number;
+    wd32: number;
+};

package/lib/openxml/drawing/svg/presetVal.js

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * 获取默认 val，20.1.10.56
+ *
+ * @param width
+ * @param height
+ */
+function presetVal(w, h) {
+    var ss = Math.min(w, h);
+    var ssd2 = ss / 6;
+    var ssd6 = ss / 6;
+    var ssd8 = ss / 8;
+    var ssd32 = ss / 32;
+    var ssd16 = ss / 16;
+    return {
+        't': 0,
+        '3cd4': 16200000,
+        '3cd8': 8100000,
+        '5cd8': 13500000,
+        '7cd8': 18900000,
+        'b': h,
+        'cd2': 10800000,
+        'cd4': 5400000,
+        'cd8': 2700000,
+        h: h,
+        'hd2': h / 2,
+        'hd3': h / 3,
+        'hd4': h / 4,
+        'hd6': h / 6,
+        'hd8': h / 8,
+        'l': 0,
+        'ls': Math.max(w, h),
+        'r': w,
+        ss: ss,
+        ssd2: ssd2,
+        ssd6: ssd6,
+        ssd8: ssd8,
+        ssd16: ssd16,
+        ssd32: ssd32,
+        'hc': w / 2,
+        'vc': h / 2,
+        w: w,
+        'wd2': w / 2,
+        'wd3': w / 3,
+        'wd4': w / 4,
+        'wd6': w / 6,
+        'wd8': w / 8,
+        'wd10': w / 10,
+        'wd16': w / 16,
+        'wd32': w / 32
+    };
+}
+
+exports.presetVal = presetVal;

package/lib/openxml/drawing/svg/shapeToSVG.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 将 shape 转成 svg 格式
+ *
+ * https://wiki.documentfoundation.org/Development/Improve_handles_of_DrawingML_shapes
+ */
+import { WPSStyle } from '../../word/wps/WPSStyle';
+import { Shape, ShapeGuide } from '../Shape';
+import { ShapePr } from '../ShapeProperties';
+export declare function shapeToSVG(shape: Shape, avLst: ShapeGuide[], shapePr: ShapePr, width: number, height: number, wpsStyle?: WPSStyle): SVGElement;

package/lib/openxml/drawing/svg/shapeToSVG.js

@@ -0,0 +1,155 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var color = require('../../../util/color.js');
+var dom = require('../../../util/dom.js');
+var formulas = require('./formulas.js');
+var generateDefines = require('./generateDefines.js');
+var presetVal = require('./presetVal.js');
+
+/**
+ * 将 shape 转成 svg 格式
+ *
+ * https://wiki.documentfoundation.org/Development/Improve_handles_of_DrawingML_shapes
+ */
+function shapeToSVG(shape, avLst, shapePr, width, height, wpsStyle) {
+    var e_1, _a, e_2, _b, e_3, _c, e_4, _d;
+    var svg = dom.createSVGElement('svg');
+    svg.style.display = 'block';
+    // 边框有时候会超过
+    // block 是为了避免被 text-align 影响
+    // z-index 是因为后面可能会有文字，避免遮挡
+    svg.setAttribute('style', 'display: block; overflow: visible; position: absolute; z-index: -1');
+    svg.setAttribute('width', width.toString() + 'px');
+    svg.setAttribute('height', height.toString() + 'px');
+    // 变量值
+    var vars = presetVal.presetVal(width, height);
+    try {
+        // 先执行 avLst 定义初始变量
+        for (var _e = tslib.__values(shape.avLst || []), _f = _e.next(); !_f.done; _f = _e.next()) {
+            var gd = _f.value;
+            formulas.evalFmla(gd.n, gd.f, vars);
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (_f && !_f.done && (_a = _e.return)) _a.call(_e);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    try {
+        // 自定义 avLst
+        for (var avLst_1 = tslib.__values(avLst), avLst_1_1 = avLst_1.next(); !avLst_1_1.done; avLst_1_1 = avLst_1.next()) {
+            var gd = avLst_1_1.value;
+            formulas.evalFmla(gd.n, gd.f, vars);
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (avLst_1_1 && !avLst_1_1.done && (_b = avLst_1.return)) _b.call(avLst_1);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
+    try {
+        // 执行 gdLst
+        for (var _g = tslib.__values(shape.gdLst || []), _h = _g.next(); !_h.done; _h = _g.next()) {
+            var gd = _h.value;
+            formulas.evalFmla(gd.n, gd.f, vars);
+        }
+    }
+    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+    finally {
+        try {
+            if (_h && !_h.done && (_c = _g.return)) _c.call(_g);
+        }
+        finally { if (e_3) throw e_3.error; }
+    }
+    var outline = shapePr.outline;
+    var prevPoint = [];
+    try {
+        for (var _j = tslib.__values(shape.pathLst || []), _k = _j.next(); !_k.done; _k = _j.next()) {
+            var path = _k.value;
+            var pathEl = dom.createSVGElement('path');
+            var d = generateDefines.generateDefines(path, vars, prevPoint);
+            pathEl.setAttribute('d', d);
+            if (shapePr.fillColor) {
+                pathEl.setAttribute('fill', shapePr.fillColor);
+            }
+            else if (wpsStyle && wpsStyle.fillColor) {
+                pathEl.setAttribute('fill', wpsStyle.fillColor);
+            }
+            else {
+                pathEl.setAttribute('fill', 'none');
+            }
+            if (outline) {
+                if (outline.color) {
+                    pathEl.setAttribute('stroke', outline.color);
+                }
+                if (outline.width) {
+                    pathEl.setAttribute('stroke-width', outline.width);
+                }
+                if (outline.style === 'none') {
+                    pathEl.setAttribute('stroke', 'none');
+                }
+            }
+            else if (wpsStyle && wpsStyle.lineColor) {
+                pathEl.setAttribute('stroke', wpsStyle.lineColor);
+            }
+            else {
+                pathEl.setAttribute('stroke', 'none');
+            }
+            var fillColor = pathEl.getAttribute('fill');
+            if (fillColor && fillColor !== 'none') {
+                var color$1 = new color.Color(fillColor);
+                var fillMode = path.fill;
+                var changeColor = '';
+                switch (fillMode) {
+                    // 这些值目前是瞎编的，官方规范里没说
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/DrawingML/ST_PathFillMode.html
+                    case 'darken':
+                        changeColor = color$1.lumOff(-0.5).toHex();
+                        break;
+                    case 'darkenLess':
+                        changeColor = color$1.lumOff(-0.2).toHex();
+                        break;
+                    case 'lighten':
+                        changeColor = color$1.lumOff(0.5).toHex();
+                        break;
+                    case 'lightenLess':
+                        changeColor = color$1.lumOff(0.2).toHex();
+                        break;
+                }
+                if (changeColor) {
+                    pathEl.setAttribute('fill', changeColor);
+                }
+            }
+            if (path.fill === 'none') {
+                pathEl.setAttribute('fill', 'none');
+            }
+            if (path.stroke === false) {
+                pathEl.setAttribute('stroke', 'none');
+                if (!path.fill) {
+                    pathEl.setAttribute('fill', 'none');
+                }
+            }
+            if (shapePr.noFill) {
+                pathEl.setAttribute('fill', 'none');
+            }
+            svg.appendChild(pathEl);
+        }
+    }
+    catch (e_4_1) { e_4 = { error: e_4_1 }; }
+    finally {
+        try {
+            if (_k && !_k.done && (_d = _j.return)) _d.call(_j);
+        }
+        finally { if (e_4) throw e_4.error; }
+    }
+    return svg;
+}
+
+exports.shapeToSVG = shapeToSVG;

package/lib/openxml/math/OMath.d.ts

@@ -0,0 +1,5 @@
+import Word from '../../Word';
+export declare class OMath {
+    element: Element;
+    static fromXML(word: Word, element: Element): OMath;
+}

package/lib/openxml/math/OMath.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var OMath = /** @class */ (function () {
+    function OMath() {
+    }
+    OMath.fromXML = function (word, element) {
+        var math = new OMath();
+        math.element = element;
+        return math;
+    };
+    return OMath;
+}());
+
+exports.OMath = OMath;