office-viewer 0.1.0 → 0.1.3

package/esm/parse/parseColor.js

@@ -1,28 +1,13 @@
 import { getVal } from '../OpenXML.js';
-import { ST_Shd } from '../openxml/Types.js';
+import { PresetColorMap } from './colorNameMap.js';
 
 /**
  * 解析颜色，转成 css 的颜色
  */
-var knownColors = [
-    'black',
-    'blue',
-    'cyan',
-    'darkBlue',
-    'darkCyan',
-    'darkGray',
-    'darkGreen',
-    'darkMagenta',
-    'darkRed',
-    'darkYellow',
-    'green',
-    'lightGray',
-    'magenta',
-    'none',
-    'red',
-    'white',
-    'yellow'
-];
+/**
+ * css 里可以识别的颜色
+ */
+var cssColors = ['black', 'blue', 'green', 'red', 'white', 'yellow'];
 /**
  *
  * 解析属性上的 color，比如  <w:top w:val="single" w:sz="24" w:space="1" w:color="FF0000" />
@@ -37,10 +22,16 @@ function parseColorAttr(word, element, attrName, autoColor) {
     if (color) {
         if (color == 'auto') {
             return autoColor;
+            /**
+             * css 里可以识别的颜色
+             */
         }
-        else if (typeof color === 'string' && knownColors.includes(color)) {
+        else if (cssColors.includes(color)) {
             return color;
         }
+        else if (color in PresetColorMap) {
+            return PresetColorMap[color];
+        }
         return "#".concat(color);
     }
     var themeColor = element.getAttribute('w:themeColor');
@@ -54,55 +45,55 @@ function parseShdColor(word, element) {
     var color = element.getAttribute('w:fill') || '';
     var val = getVal(element);
     if (color === 'auto') {
-        color = 'inherit';
+        color = 'FFFFFF';
     }
     if (color.length === 6) {
         switch (val) {
-            case ST_Shd.clear:
+            case 'clear':
                 return "#".concat(color);
-            case ST_Shd.pct10:
+            case 'pct10':
                 return colorPercent(color, 0.1);
-            case ST_Shd.pct12:
+            case 'pct12':
                 return colorPercent(color, 0.125);
-            case ST_Shd.pct15:
+            case 'pct15':
                 return colorPercent(color, 0.15);
-            case ST_Shd.pct20:
+            case 'pct20':
                 return colorPercent(color, 0.2);
-            case ST_Shd.pct25:
+            case 'pct25':
                 return colorPercent(color, 0.25);
-            case ST_Shd.pct30:
+            case 'pct30':
                 return colorPercent(color, 0.3);
-            case ST_Shd.pct35:
+            case 'pct35':
                 return colorPercent(color, 0.35);
-            case ST_Shd.pct37:
+            case 'pct37':
                 return colorPercent(color, 0.375);
-            case ST_Shd.pct40:
+            case 'pct40':
                 return colorPercent(color, 0.4);
-            case ST_Shd.pct45:
+            case 'pct45':
                 return colorPercent(color, 0.45);
-            case ST_Shd.pct5:
+            case 'pct5':
                 return colorPercent(color, 0.05);
-            case ST_Shd.pct50:
+            case 'pct50':
                 return colorPercent(color, 0.5);
-            case ST_Shd.pct55:
+            case 'pct55':
                 return colorPercent(color, 0.55);
-            case ST_Shd.pct60:
+            case 'pct60':
                 return colorPercent(color, 0.6);
-            case ST_Shd.pct65:
+            case 'pct65':
                 return colorPercent(color, 0.65);
-            case ST_Shd.pct70:
+            case 'pct70':
                 return colorPercent(color, 0.7);
-            case ST_Shd.pct75:
+            case 'pct75':
                 return colorPercent(color, 0.75);
-            case ST_Shd.pct80:
+            case 'pct80':
                 return colorPercent(color, 0.8);
-            case ST_Shd.pct85:
+            case 'pct85':
                 return colorPercent(color, 0.85);
-            case ST_Shd.pct87:
+            case 'pct87':
                 return colorPercent(color, 0.87);
-            case ST_Shd.pct90:
+            case 'pct90':
                 return colorPercent(color, 0.9);
-            case ST_Shd.pct95:
+            case 'pct95':
                 return colorPercent(color, 0.95);
             default:
                 console.warn('unsupport shd val', val);
@@ -115,6 +106,10 @@ function parseShdColor(word, element) {
  * 用 alpha 来模拟 ptc 功能
  */
 function colorPercent(color, percent) {
+    // 白色取 alpha 没什么意义，转成黑色
+    if (color === 'FFFFFF') {
+        color = '000000';
+    }
     var r = parseInt(color.substring(0, 2), 16);
     var g = parseInt(color.substring(2, 4), 16);
     var b = parseInt(color.substring(4, 6), 16);
@@ -128,4 +123,4 @@ function parseColor(word, element) {
     return parseColorAttr(word, element, 'w:val');
 }
 
-export { parseColor, parseColorAttr, parseShdColor };
+export { cssColors, parseColor, parseColorAttr, parseShdColor };

package/esm/parse/parseEndnotes.d.ts

@@ -0,0 +1,3 @@
+import Word from '../Word';
+import { Note } from '../openxml/word/Note';
+export declare function parseEndnotes(word: Word, doc: Document): Record<string, Note>;

package/esm/parse/parseEndnotes.js

@@ -0,0 +1,25 @@
+import { __values } from 'tslib';
+import { Note } from '../openxml/word/Note.js';
+
+function parseEndnotes(word, doc) {
+    var e_1, _a;
+    var endnotes = {};
+    var endnotesElement = [].slice.call(doc.getElementsByTagName('w:endnote'));
+    try {
+        for (var endnotesElement_1 = __values(endnotesElement), endnotesElement_1_1 = endnotesElement_1.next(); !endnotesElement_1_1.done; endnotesElement_1_1 = endnotesElement_1.next()) {
+            var endnoteElement = endnotesElement_1_1.value;
+            var endnote = Note.fromXML(word, endnoteElement);
+            endnotes[endnoteElement.getAttribute('w:id')] = endnote;
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (endnotesElement_1_1 && !endnotesElement_1_1.done && (_a = endnotesElement_1.return)) _a.call(endnotesElement_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return endnotes;
+}
+
+export { parseEndnotes };

package/esm/parse/parseFont.js

@@ -1,4 +1,4 @@
-import { __values } from '../node_modules/tslib/tslib.es6.js';
+import { __values } from 'tslib';
 
 /**
  * 解析字体

package/esm/parse/parseInsideBorders.d.ts

@@ -0,0 +1,9 @@
+import Word from '../Word';
+/**
+ * parseBorders 不支持 insideH 和 insideV，所以单独支持一下
+ * 实际显示时需要过滤掉第一列
+ */
+export declare function parseInsideBorders(word: Word, element: Element): {
+    H: string | undefined;
+    V: string | undefined;
+};

package/esm/parse/parseInsideBorders.js

@@ -0,0 +1,24 @@
+import { parseBorder } from './parseBorder.js';
+
+/**
+ * parseBorders 不支持 insideH 和 insideV，所以单独支持一下
+ * 实际显示时需要过滤掉第一列
+ */
+function parseInsideBorders(word, element) {
+    var H;
+    var insideH = element.getElementsByTagName('w:insideH').item(0);
+    if (insideH) {
+        H = parseBorder(word, insideH);
+    }
+    var V;
+    var insideV = element.getElementsByTagName('w:insideV').item(0);
+    if (insideV) {
+        V = parseBorder(word, insideV);
+    }
+    return {
+        H: H,
+        V: V
+    };
+}
+
+export { parseInsideBorders };

package/esm/parse/parsePr.d.ts

@@ -1,3 +1,6 @@
+/**
+ * 包括 rPr 及 pPr 的解析，参考了 docxjs 里的实现
+ */
 import { CSSStyle } from '../openxml/Style';
 import Word from '../Word';
 /**

package/esm/parse/parsePr.js

@@ -1,9 +1,9 @@
-import { __values } from '../node_modules/tslib/tslib.es6.js';
-import { ST_TextAlignment, ST_VerticalAlignRun } from '../openxml/Types.js';
+import { __values } from 'tslib';
 import { parseSize, LengthUsage } from './parseSize.js';
-import { getValBoolean, getVal } from '../OpenXML.js';
+import { getValBoolean, getValNumber, getVal } from '../OpenXML.js';
 import { parseBorder, parseBorders } from './parseBorder.js';
 import { parseColorAttr, parseShdColor, parseColor } from './parseColor.js';
+import { parseChildColor } from './parseChildColor.js';
 import { parseInd } from './parseInd.js';
 import { parseSpacing } from './parseSpacing.js';
 import { parseFont } from './parseFont.js';
@@ -11,6 +11,9 @@ import { parseTrHeight } from './parseTrHeight.js';
 import { jcToTextAlign } from './jcToTextAlign.js';
 import { parseTextDirection } from './parseTextDirection.js';
 
+/**
+ * 包括 rPr 及 pPr 的解析，参考了 docxjs 里的实现
+ */
 /**
  * 解析 underline 并附上样式
  * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/u.html
@@ -72,6 +75,7 @@ function parseFrame(element, style) {
             switch (name_1) {
                 case 'w:dropCap':
                     if (value === 'drop') {
+                        // initial-letter 很少浏览器支持，所以用 float 代替
                         style['float'] = 'left';
                     }
                     break;
@@ -85,6 +89,17 @@ function parseFrame(element, style) {
                         style['width'] = parseSize(value, 'w:w');
                     }
                     break;
+                case 'w:hAnchor':
+                case 'w:vAnchor':
+                case 'w:lines':
+                    // 目前没有办法做到这些属性的控制
+                    break;
+                case 'w:wrap':
+                    // 其它不支持，先报错
+                    if (value !== 'around') {
+                        console.warn('parseFrame: w:wrap not support ' + value);
+                    }
+                    break;
                 default:
                     console.warn('parseFrame: unknown attribute ' + name_1, attribute);
             }
@@ -98,7 +113,30 @@ function parseFrame(element, style) {
         finally { if (e_1) throw e_1.error; }
     }
 }
-var HighLightColor = 'transparent';
+/**
+ * 将 em 转成 css 里对应的 text-emphasis 值
+ * http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/ST_Em.html
+ */
+function convertEm(em, style) {
+    switch (em) {
+        case 'dot':
+            style['text-emphasis'] = 'filled';
+            // 按规范里描述应该是在文字上面，但在 word 实际显示的时候是在下面
+            // 怀疑是中文场景下做了特殊处理
+            style['text-emphasis-position'] = 'under right';
+            break;
+        case 'comma':
+            style['text-emphasis'] = 'filled sesame';
+            break;
+        case 'circle':
+            style['text-emphasis'] = 'open';
+            break;
+        case 'underDot':
+            style['text-emphasis'] = 'filled';
+            style['text-emphasis-position'] = 'under right';
+            break;
+    }
+}
 /**
  * 解析各种 pPr 及 rPr，返回样式
  * @param type 所属类型
@@ -144,16 +182,16 @@ function parsePr(word, element, type) {
                 case 'w:highlight':
                     // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/highlight.html
                     // 这个按文档是重要性高于 shd
-                    style['background-color'] = parseColorAttr(word, child, 'w:fill', HighLightColor);
+                    style['background-color'] = parseColorAttr(word, child, 'w:val', 'yellow');
                     break;
                 case 'w:vertAlign':
                     // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/vertAlign.html
                     // 这个其实和 position 有冲突，但预计这两个同时出现的概率不高
                     var vertAlign = getVal(child);
-                    if (vertAlign === ST_VerticalAlignRun.superscript) {
+                    if (vertAlign === 'superscript') {
                         style['vertical-align'] = 'super';
                     }
-                    else if (vertAlign === ST_VerticalAlignRun.subscript) {
+                    else if (vertAlign === 'subscript') {
                         style['vertical-align'] = 'sub';
                     }
                     break;
@@ -227,7 +265,7 @@ function parsePr(word, element, type) {
                     // );
                     break;
                 case 'w:pStyle':
-                    // 这个需要特殊处理
+                    // 这个在 paragraph 里处理了
                     break;
                 case 'w:lang':
                 case 'w:noProof':
@@ -250,7 +288,14 @@ function parsePr(word, element, type) {
                     // 这个在 parseParagraphProperties 里处理了
                     break;
                 case 'w:rPr':
-                    // TODO: 这个有时候会不正确，需要再看看
+                    // TODO: 这个有时候和 r 里的 rPr 不一致，不知道如何处理
+                    var reflection = child.getElementsByTagName('w14:reflection').item(0);
+                    if (reflection) {
+                        // css 只支持在块级节点设置
+                        // 只支持一小部分设置项，另外因为只支持块级别的情况，所以看起来差异较大
+                        var reflectionDistance = parseSize(reflection, 'w4:dist', LengthUsage.Emu) || '0px';
+                        style['-webkit-box-reflect'] = "below ".concat(reflectionDistance, " linear-gradient(transparent, white)");
+                    }
                     break;
                 case 'w:rStyle':
                     // 在 Run 里地方处理了
@@ -266,6 +311,9 @@ function parsePr(word, element, type) {
                     // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/snapToGrid_2.html
                     // 目前还不支持 grid
                     break;
+                case 'w:topLinePunct':
+                    // 没法支持
+                    break;
                 case 'w:wordWrap':
                     // 不太确定这里是用 word-break 还是 overflow-wrap
                     if (getValBoolean(child)) {
@@ -275,10 +323,10 @@ function parsePr(word, element, type) {
                 case 'w:textAlignment':
                     // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/textAlignment.html
                     var alignment = getVal(child);
-                    if (alignment === ST_TextAlignment.center) {
+                    if (alignment === 'center') {
                         style['vertical-align'] = 'middle';
                     }
-                    else if (alignment !== ST_TextAlignment.auto) {
+                    else if (alignment !== 'auto') {
                         style['vertical-align'] = alignment;
                     }
                     break;
@@ -307,6 +355,55 @@ function parsePr(word, element, type) {
                     // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/overflowPunct.html
                     // 支持不了
                     break;
+                case 'w:em':
+                    convertEm(getVal(child), style);
+                    break;
+                case 'w:w':
+                    // http://webapp.docx4java.org/OnlineDemo/ecma376/WordML/w_1.html
+                    // 看起来应该是把文字拉伸
+                    var w = getValNumber(child);
+                    style['transform'] = "scaleX(".concat(w / 100, ")");
+                    style['display'] = 'inline-block'; // 需要这样才能生效
+                    break;
+                case 'w:outline':
+                    style['text-shadow'] =
+                        '-1px -1px 0 #AAA, 1px -1px 0 #AAA, -1px 1px 0 #AAA, 1px 1px 0 #AAA';
+                    break;
+                case 'w:shadown':
+                case 'w:imprint':
+                    if (getValBoolean(child, true)) {
+                        style['text-shadow'] = '1px 1px 2px rgba(0, 0, 0, 0.6)';
+                    }
+                    break;
+                case 'w14:shadow':
+                    var blurRad = parseSize(child, 'w14:blurRad', LengthUsage.Emu) || '4px';
+                    // 其它结果算出来不像就先忽略了
+                    var color = 'rgba(0, 0, 0, 0.6)';
+                    var childColor = parseChildColor(word, child);
+                    if (childColor) {
+                        color = childColor;
+                    }
+                    style['text-shadow'] = "1px 1px ".concat(blurRad, " ").concat(color);
+                    break;
+                case 'w14:textOutline':
+                    var outlineWidth = parseSize(child, 'w14:w', LengthUsage.Emu) || '1px';
+                    style['-webkit-text-stroke-width'] = outlineWidth;
+                    var outlineColor = 'white';
+                    var fillColor = child.getElementsByTagName('w14:solidFill');
+                    if (fillColor.length > 0) {
+                        outlineColor = parseChildColor(word, fillColor.item(0)) || 'white';
+                    }
+                    style['-webkit-text-stroke-color'] = outlineColor;
+                    break;
+                case 'w14:reflection':
+                    // 在 rPr 里处理了
+                    break;
+                case 'w14:textFill':
+                    // color 已经够用了，为了避免 lumMod 计算不正确反而导致问题，所以就不支持了
+                    break;
+                case 'w14:ligatures':
+                    // 没文档，不知道
+                    break;
                 default:
                     console.warn('parsePr Unknown tagName', tagName, child);
             }

package/esm/parse/parseRelationship.js

@@ -1,4 +1,4 @@
-import { __values } from '../node_modules/tslib/tslib.es6.js';
+import { __values } from 'tslib';
 
 /**
  * 解析 _rels/.rels 文件

package/esm/parse/parseSdt.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 17.5.2 Structured Document Tags
+ * 目前 sdt 的做法就是直接忽略，将它的 stdContent 子节点融入上级节点
+ */
+export declare function parseSdt(element: Element, arr: Element[], index: number): void;

package/esm/parse/parseShape.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 解析 shape
+ */
+import { Path, PathPoint } from '../openxml/drawing/Path';
+import { Shape, ShapeGuide } from '../openxml/drawing/Shape';
+export declare function parsePts(element: Element): PathPoint[];
+export declare function parsePath(element: Element): Path;
+export declare function parsePathLst(element: Element): Path[];
+export declare function parseShapeGuide(element: Element): ShapeGuide[];
+export declare function parseShape(element: Element): Shape;