office-viewer 0.1.0 → 0.1.4

package/lib/render/renderStyle.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 dom = require('../util/dom.js');
 
 /**
@@ -13,6 +12,7 @@ var dom = require('../util/dom.js');
  * 文档基础默认样式
  */
 function generateDefaultStyle(word) {
+    var _a;
     var styles = word.styles;
     var defaultStyle = styles.defaultStyle;
     var defaultPStyle = '';
@@ -23,8 +23,9 @@ function generateDefaultStyle(word) {
     if (defaultStyle === null || defaultStyle === void 0 ? void 0 : defaultStyle.rPr) {
         defaultRStyle = dom.styleToText(defaultStyle.rPr.cssStyle);
     }
+    var hyphens = ((_a = word.settings) === null || _a === void 0 ? void 0 : _a.autoHyphenation) ? 'hyphens: auto;' : '';
     var classPrefix = word.getClassPrefix();
-    return "\n  .".concat(word.wrapClassName, " {\n\n  }\n\n  .").concat(word.wrapClassName, " > article > section {\n    background: white;\n  }\n\n  /** docDefaults **/\n\n  .").concat(classPrefix, " p {\n    margin: 0;\n    padding: 0;\n  }\n\n  .").concat(classPrefix, " table {\n    border-spacing: 0;\n  }\n\n  .").concat(classPrefix, " .").concat(classPrefix, "-p {\n    ").concat(defaultPStyle, "\n  }\n\n  .").concat(classPrefix, " .").concat(classPrefix, "-r {\n    white-space: pre-wrap;\n    overflow-wrap: break-word;\n    ").concat(defaultRStyle, "\n  }\n  ");
+    return "\n\n\n  /** docDefaults **/\n  .".concat(classPrefix, " {\n    --docx-theme-font-minorHAnsi: Calibri,  Helvetica, Arial, 'Helvetica Neue';\n    --docx-theme-font-minorEastAsia: 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', 'STHeiti',\n    'Microsoft YaHei';\n  }\n\n  .").concat(classPrefix, " p {\n    margin: 0;\n    padding: 0;\n    line-height: 1.5;\n    ").concat(hyphens, "\n  }\n\n  .").concat(classPrefix, " .justify:after {\n    content: \"\";\n    display: inline-block;\n    width: 100%;\n  }\n\n  .").concat(classPrefix, " table {\n    border-spacing: 0;\n  }\n\n  .").concat(classPrefix, " .").concat(classPrefix, "-p {\n    ").concat(defaultPStyle, "\n  }\n\n  .").concat(classPrefix, " .").concat(classPrefix, "-r {\n    overflow-wrap: break-word;\n    ").concat(defaultRStyle, "\n  }\n  ");
 }
 /**
  * 生成表格级别样式
@@ -54,81 +55,81 @@ function generateTableStyle(classPrefix, styleDisplayId, style) {
     return tblStyleText;
 }
 // 用于生成表格 override 相关的样式，用于行或列
-function genTblOverrideStyle(prefix, overrideType, tblStylePrStyle) {
+function genTblOverrideStyle(tblPrefix, classPrefix, overrideType, tblStylePrStyle) {
     var _a, _b, _c, _d, _e, _f;
     var styleText = '';
     var trStyle = dom.styleToText((_a = tblStylePrStyle.trPr) === null || _a === void 0 ? void 0 : _a.cssStyle);
     var enableType = '';
     // 在 tblLook 里可以通过这些属性来控制是否启用
     switch (overrideType) {
-        case Types.ST_TblStyleOverrideType.firstCol:
+        case 'firstCol':
             enableType = 'enable-firstColumn';
             break;
-        case Types.ST_TblStyleOverrideType.lastCol:
+        case 'lastCol':
             enableType = 'enable-lastColumn';
             break;
-        case Types.ST_TblStyleOverrideType.firstRow:
+        case 'firstRow':
             enableType = 'enable-firstRow';
             break;
-        case Types.ST_TblStyleOverrideType.lastRow:
+        case 'lastRow':
             enableType = 'enable-lastRow';
             break;
-        case Types.ST_TblStyleOverrideType.band1Horz:
-        case Types.ST_TblStyleOverrideType.band2Horz:
+        case 'band1Horz':
+        case 'band2Horz':
             enableType = 'enable-hBand';
             break;
-        case Types.ST_TblStyleOverrideType.band1Vert:
-        case Types.ST_TblStyleOverrideType.band2Vert:
+        case 'band1Vert':
+        case 'band2Vert':
             enableType = 'enable-vBand';
             break;
     }
     if (trStyle) {
-        styleText += "\n    ".concat(prefix, ".").concat(enableType, " > tbody > tr.").concat(overrideType, "{\n       ").concat(trStyle, "\n    }\n    ");
+        styleText += "\n    ".concat(tblPrefix, ".").concat(enableType, " > tbody > tr.").concat(overrideType, "{\n       ").concat(trStyle, "\n    }\n    ");
     }
     var tcStyle = dom.styleToText((_b = tblStylePrStyle.tcPr) === null || _b === void 0 ? void 0 : _b.cssStyle);
     if (tcStyle) {
-        styleText += "\n    ".concat(prefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " {\n       ").concat(tcStyle, "\n    }\n    ");
+        styleText += "\n    ".concat(tblPrefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " {\n       ").concat(tcStyle, "\n    }\n    ");
         if ((_c = tblStylePrStyle.tcPr) === null || _c === void 0 ? void 0 : _c.insideBorder) {
             var insideBorder = (_d = tblStylePrStyle.tcPr) === null || _d === void 0 ? void 0 : _d.insideBorder;
             if (insideBorder.H) {
-                styleText += "\n          ".concat(prefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " {\n            border-top: ").concat(insideBorder.H, ";\n          }");
+                styleText += "\n          ".concat(tblPrefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " {\n            border-top: ").concat(insideBorder.H, ";\n          }");
             }
             if (insideBorder.V) {
                 // 这个主要是为了应对 GridTable5Dark-Accent5 里 firstRow 的情况，它其实有 right 设置，也得去掉
                 if (insideBorder.V === 'none') {
-                    styleText += "\n          ".concat(prefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " {\n            border-left: none;\n            border-right: none;\n          }");
+                    styleText += "\n          ".concat(tblPrefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " {\n            border-left: none;\n            border-right: none;\n          }");
                 }
                 else {
-                    styleText += "\n          ".concat(prefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " {\n            border-left: ").concat(insideBorder.V, ";\n          }");
+                    styleText += "\n          ".concat(tblPrefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " {\n            border-left: ").concat(insideBorder.V, ";\n          }");
                 }
             }
         }
     }
     var pStyle = dom.styleToText((_e = tblStylePrStyle.pPr) === null || _e === void 0 ? void 0 : _e.cssStyle);
     if (pStyle) {
-        styleText += "\n    ".concat(prefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " > .p {\n       ").concat(pStyle, "\n    }\n    ");
+        styleText += "\n    ".concat(tblPrefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " > .").concat(classPrefix, "-p {\n       ").concat(pStyle, "\n    }\n    ");
     }
     var rStyle = dom.styleToText((_f = tblStylePrStyle.rPr) === null || _f === void 0 ? void 0 : _f.cssStyle);
     if (rStyle) {
-        styleText += "\n    ".concat(prefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " > .p > .r {\n       ").concat(rStyle, "\n    }\n    ");
+        styleText += "\n    ".concat(tblPrefix, ".").concat(enableType, " > tbody > tr > td.").concat(overrideType, " > .").concat(classPrefix, "-p > .").concat(classPrefix, "-r {\n       ").concat(rStyle, "\n    }\n    ");
     }
     return styleText;
 }
 // 表格覆盖样式的顺序，权重高的放后面
 var overrideTypeOrder = new Set([
-    Types.ST_TblStyleOverrideType.wholeTable,
-    Types.ST_TblStyleOverrideType.band1Horz,
-    Types.ST_TblStyleOverrideType.band2Horz,
-    Types.ST_TblStyleOverrideType.band1Vert,
-    Types.ST_TblStyleOverrideType.band2Vert,
-    Types.ST_TblStyleOverrideType.firstCol,
-    Types.ST_TblStyleOverrideType.firstRow,
-    Types.ST_TblStyleOverrideType.lastCol,
-    Types.ST_TblStyleOverrideType.lastRow,
-    Types.ST_TblStyleOverrideType.neCell,
-    Types.ST_TblStyleOverrideType.nwCell,
-    Types.ST_TblStyleOverrideType.seCell,
-    Types.ST_TblStyleOverrideType.swCell
+    'wholeTable',
+    'band1Horz',
+    'band2Horz',
+    'band1Vert',
+    'band2Vert',
+    'firstCol',
+    'firstRow',
+    'lastCol',
+    'lastRow',
+    'neCell',
+    'nwCell',
+    'seCell',
+    'swCell'
 ]);
 // 生成表格覆盖样式
 function genOverrideTblStylePr(classPrefix, styleDisplayId, tblStylePr) {
@@ -139,11 +140,11 @@ function genOverrideTblStylePr(classPrefix, styleDisplayId, tblStylePr) {
     var tblStylePrText = '';
     var stylePrefix = ".".concat(classPrefix, " .").concat(styleDisplayId);
     try {
-        for (var overrideTypeOrder_1 = tslib_es6.__values(overrideTypeOrder), overrideTypeOrder_1_1 = overrideTypeOrder_1.next(); !overrideTypeOrder_1_1.done; overrideTypeOrder_1_1 = overrideTypeOrder_1.next()) {
+        for (var overrideTypeOrder_1 = tslib.__values(overrideTypeOrder), overrideTypeOrder_1_1 = overrideTypeOrder_1.next(); !overrideTypeOrder_1_1.done; overrideTypeOrder_1_1 = overrideTypeOrder_1.next()) {
             var overrideType = overrideTypeOrder_1_1.value;
             if (overrideType in tblStylePr) {
                 var overrideStylePr = tblStylePr[overrideType];
-                tblStylePrText += genTblOverrideStyle(stylePrefix, overrideType, overrideStylePr);
+                tblStylePrText += genTblOverrideStyle(stylePrefix, classPrefix, overrideType, overrideStylePr);
             }
         }
     }
@@ -176,7 +177,7 @@ function generateStyle(word) {
         var rStyleText = '';
         if (styleData.rPr) {
             var rStyle = dom.styleToText(styleData.rPr.cssStyle);
-            rStyleText = "\n      .".concat(classPrefix, " .").concat(styleDisplayId, " > .r {\n        ").concat(rStyle, "\n      }\n      ");
+            rStyleText = "\n      .".concat(classPrefix, " .").concat(styleDisplayId, " > .").concat(classPrefix, "-r {\n        ").concat(rStyle, "\n      }\n      ");
         }
         var tblStyleText = generateTableStyle(classPrefix, styleDisplayId, styleData);
         var tblStylePr = genOverrideTblStylePr(classPrefix, styleDisplayId, styleData.tblStylePr);
@@ -191,7 +192,7 @@ function renderStyle(word) {
     var style = dom.createElement('style');
     var docDefaults = generateDefaultStyle(word);
     var styleText = generateStyle(word);
-    style.innerHTML = "\n  ".concat(docDefaults, "\n\n  ").concat(styleText, "\n  ");
+    style.textContent = "\n  ".concat(docDefaults, "\n\n  ").concat(styleText, "\n  ");
     return style;
 }
 

package/lib/render/renderTab.d.ts

@@ -2,6 +2,7 @@ import { Tab } from '../openxml/word/Tab';
 import Word from '../Word';
 /**
  * 渲染 tab
+ * 不支持 tabs 里的自定义宽度，因为要算渲染后的宽度，比较麻烦
  * http://officeopenxml.com/WPtab.php
  */
-export declare function renderTab(word: Word, tab: Tab): HTMLElement;
+export declare function renderTab(word: Word, tab: Tab, renderWidth?: boolean): HTMLElement;

package/lib/render/renderTab.js

@@ -2,20 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Types = require('../openxml/Types.js');
 var dom = require('../util/dom.js');
 
 /**
  * 渲染 tab
+ * 不支持 tabs 里的自定义宽度，因为要算渲染后的宽度，比较麻烦
  * http://officeopenxml.com/WPtab.php
  */
-function renderTab(word, tab) {
+function renderTab(word, tab, renderWidth) {
+    if (renderWidth === void 0) { renderWidth = false; }
     var tabElement = dom.createElement('span');
     tabElement.style.display = 'inline-block';
-    tabElement.style.width = tab.pos;
-    tabElement.innerHTML = ' ';
-    if (tab.leader === Types.ST_TabTlc.dot) {
-        tabElement.style.borderBottom = '1px dotted';
+    tabElement.style.width = '2em';
+    tabElement.innerHTML = ' ';
+    if (tab.leader === 'dot') {
+        tabElement.style.borderBottom = '1pt dotted';
+    }
+    if (renderWidth && tab.pos && (tab.type === 'start' || tab.type == 'left')) {
+        tabElement.style.width = tab.pos;
     }
     return tabElement;
 }

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;