@idraw/renderer 0.3.0-alpha.6 → 0.3.0-alpha.8

package/dist/esm/constant/element.d.ts

@@ -0,0 +1,2 @@
+export declare const elementNames: string[];
+export declare const LIMIT_QBLIQUE_ANGLE = 15;

package/dist/esm/constant/element.js

@@ -0,0 +1,10 @@
+const elementTypes = {
+    'text': {},
+    'rect': {},
+    'image': {},
+    'svg': {},
+    'circle': {},
+    'html': {},
+};
+export const elementNames = Object.keys(elementTypes);
+export const LIMIT_QBLIQUE_ANGLE = 15;

package/dist/esm/constant/static.d.ts

@@ -0,0 +1,11 @@
+export declare enum Mode {
+    NULL = "null",
+    SELECT_ELEMENT = "select-element",
+    SELECT_ELEMENT_LIST = "select-element-list",
+    SELECT_ELEMENT_WRAPPER_CONTROLLER = "select-element-wrapper-controller",
+    SELECT_AREA = "select-area"
+}
+export declare enum CursorStatus {
+    DRAGGING = "dragging",
+    NULL = "null"
+}

package/dist/esm/constant/static.js

@@ -0,0 +1,13 @@
+export var Mode;
+(function (Mode) {
+    Mode["NULL"] = "null";
+    Mode["SELECT_ELEMENT"] = "select-element";
+    Mode["SELECT_ELEMENT_LIST"] = "select-element-list";
+    Mode["SELECT_ELEMENT_WRAPPER_CONTROLLER"] = "select-element-wrapper-controller";
+    Mode["SELECT_AREA"] = "select-area";
+})(Mode || (Mode = {}));
+export var CursorStatus;
+(function (CursorStatus) {
+    CursorStatus["DRAGGING"] = "dragging";
+    CursorStatus["NULL"] = "null";
+})(CursorStatus || (CursorStatus = {}));

package/dist/esm/index.d.ts

@@ -0,0 +1,27 @@
+import { TypeData, TypeContext } from '@idraw/types';
+import { RendererEvent } from './lib/renderer-event';
+import { _queue, _ctx, _status, _loader, _opts, _freeze, _drawFrame, _retainQueueOneItem } from './names';
+type Options = {
+    width: number;
+    height: number;
+    contextWidth?: number;
+    contextHeight?: number;
+    devicePixelRatio: number;
+};
+export default class Renderer extends RendererEvent {
+    private [_queue];
+    private [_ctx];
+    private [_status];
+    private [_loader];
+    private [_opts]?;
+    constructor(opts?: Options);
+    render(target: HTMLCanvasElement | TypeContext, originData: TypeData, opts?: {
+        changeResourceUUIDs?: string[];
+    }): void;
+    getContext(): TypeContext | null;
+    thaw(): void;
+    private [_freeze];
+    private [_drawFrame];
+    private [_retainQueueOneItem];
+}
+export {};

package/{esm → dist/esm}/index.js

@@ -12,7 +12,7 @@ var DrawStatus;
     DrawStatus["DRAWING"] = "drawing";
     DrawStatus["FREEZE"] = "freeze";
 })(DrawStatus || (DrawStatus = {}));
-export class Renderer extends RendererEvent {
+export default class Renderer extends RendererEvent {
     constructor(opts) {
         super();
         this[_a] = [];
@@ -45,7 +45,8 @@ export class Renderer extends RendererEvent {
             });
         }
         if (!this[_ctx]) {
-            if (this[_opts] && Object.prototype.toString.call(target) === '[object HTMLCanvasElement]') {
+            if (this[_opts] &&
+                Object.prototype.toString.call(target) === '[object HTMLCanvasElement]') {
                 const { width, height, contextWidth, contextHeight, devicePixelRatio } = this[_opts];
                 const canvas = target;
                 canvas.width = width * devicePixelRatio;
@@ -66,7 +67,7 @@ export class Renderer extends RendererEvent {
         if ([DrawStatus.FREEZE].includes(this[_status])) {
             return;
         }
-        const _data = deepClone({ data, });
+        const _data = deepClone({ data });
         this[_queue].push(_data);
         this[_drawFrame]();
         this[_loader].load(data, changeResourceUUIDs || []);
@@ -117,7 +118,9 @@ export class Renderer extends RendererEvent {
                 this[_status] = DrawStatus.FREE;
             }
             this.trigger('drawFrame', { t: Date.now() });
-            if (this[_loader].isComplete() === true && this[_queue].length === 1 && this[_status] === DrawStatus.FREE) {
+            if (this[_loader].isComplete() === true &&
+                this[_queue].length === 1 &&
+                this[_status] === DrawStatus.FREE) {
                 if (ctx && this[_queue][0] && this[_queue][0].data) {
                     drawContext(ctx, this[_queue][0].data, this[_loader]);
                 }

package/dist/esm/lib/calculate.d.ts

@@ -0,0 +1,5 @@
+import { TypeElement, TypeElemDesc, TypePoint } from '@idraw/types';
+export declare function parseRadianToAngle(radian: number): number;
+export declare function parseAngleToRadian(angle: number): number;
+export declare function calcElementCenter(elem: TypeElement<keyof TypeElemDesc>): TypePoint;
+export declare function calcRadian(center: TypePoint, start: TypePoint, end: TypePoint): number;

package/dist/esm/lib/calculate.js

@@ -0,0 +1,64 @@
+export function parseRadianToAngle(radian) {
+    return radian / Math.PI * 180;
+}
+export function parseAngleToRadian(angle) {
+    return angle / 180 * Math.PI;
+}
+export function calcElementCenter(elem) {
+    const p = {
+        x: elem.x + elem.w / 2,
+        y: elem.y + elem.h / 2,
+    };
+    return p;
+}
+export function calcRadian(center, start, end) {
+    const startAngle = calcLineAngle(center, start);
+    const endAngle = calcLineAngle(center, end);
+    if (endAngle !== null && startAngle !== null) {
+        if (startAngle > Math.PI * 3 / 2 && endAngle < Math.PI / 2) {
+            return endAngle + (Math.PI * 2 - startAngle);
+        }
+        else if (endAngle > Math.PI * 3 / 2 && startAngle < Math.PI / 2) {
+            return startAngle + (Math.PI * 2 - endAngle);
+        }
+        else {
+            return endAngle - startAngle;
+        }
+    }
+    else {
+        return 0;
+    }
+}
+function calcLineAngle(center, p) {
+    const x = p.x - center.x;
+    const y = center.y - p.y;
+    if (x === 0) {
+        if (y < 0) {
+            return Math.PI / 2;
+        }
+        else if (y > 0) {
+            return Math.PI * (3 / 2);
+        }
+    }
+    else if (y === 0) {
+        if (x < 0) {
+            return Math.PI;
+        }
+        else if (x > 0) {
+            return 0;
+        }
+    }
+    if (x > 0 && y < 0) {
+        return Math.atan(Math.abs(y) / Math.abs(x));
+    }
+    else if (x < 0 && y < 0) {
+        return Math.PI - Math.atan(Math.abs(y) / Math.abs(x));
+    }
+    else if (x < 0 && y > 0) {
+        return Math.PI + Math.atan(Math.abs(y) / Math.abs(x));
+    }
+    else if (x > 0 && y > 0) {
+        return Math.PI * 2 - Math.atan(Math.abs(y) / Math.abs(x));
+    }
+    return null;
+}

package/dist/esm/lib/diff.d.ts

@@ -0,0 +1,6 @@
+import { TypeElement, TypeData, TypeElemDesc } from '@idraw/types';
+export declare function isChangeImageElementResource(before: TypeElement<'image'>, after: TypeElement<'image'>): boolean;
+export declare function isChangeSVGElementResource(before: TypeElement<'svg'>, after: TypeElement<'svg'>): boolean;
+export declare function isChangeHTMLElementResource(before: TypeElement<'html'>, after: TypeElement<'html'>): boolean;
+export declare function diffElementResourceChange(before: TypeElement<keyof TypeElemDesc>, after: TypeElement<keyof TypeElemDesc>): string | null;
+export declare function diffElementResourceChangeList(before: TypeData, after: TypeData): string[];

package/dist/esm/lib/diff.js

@@ -0,0 +1,80 @@
+export function isChangeImageElementResource(before, after) {
+    var _a, _b;
+    return (((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.src) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.src));
+}
+export function isChangeSVGElementResource(before, after) {
+    var _a, _b;
+    return (((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.svg) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.svg));
+}
+export function isChangeHTMLElementResource(before, after) {
+    var _a, _b, _c, _d, _e, _f;
+    return (((_a = before === null || before === void 0 ? void 0 : before.desc) === null || _a === void 0 ? void 0 : _a.html) !== ((_b = after === null || after === void 0 ? void 0 : after.desc) === null || _b === void 0 ? void 0 : _b.html)
+        || ((_c = before === null || before === void 0 ? void 0 : before.desc) === null || _c === void 0 ? void 0 : _c.width) !== ((_d = after === null || after === void 0 ? void 0 : after.desc) === null || _d === void 0 ? void 0 : _d.width)
+        || ((_e = before === null || before === void 0 ? void 0 : before.desc) === null || _e === void 0 ? void 0 : _e.height) !== ((_f = after === null || after === void 0 ? void 0 : after.desc) === null || _f === void 0 ? void 0 : _f.height));
+}
+export function diffElementResourceChange(before, after) {
+    let result = null;
+    let isChange = false;
+    switch (after.type) {
+        case 'image': {
+            isChange = isChangeImageElementResource(before, after);
+            break;
+        }
+        case 'svg': {
+            isChange = isChangeSVGElementResource(before, after);
+            break;
+        }
+        case 'html': {
+            isChange = isChangeHTMLElementResource(before, after);
+            break;
+        }
+        default: break;
+    }
+    if (isChange === true) {
+        result = after.uuid;
+    }
+    return result;
+}
+export function diffElementResourceChangeList(before, after) {
+    var _a;
+    const uuids = [];
+    const beforeMap = parseDataElementMap(before);
+    const afterMap = parseDataElementMap(after);
+    for (const uuid in afterMap) {
+        if (['image', 'svg', 'html'].includes((_a = afterMap[uuid]) === null || _a === void 0 ? void 0 : _a.type) !== true) {
+            continue;
+        }
+        if (beforeMap[uuid]) {
+            let isChange = false;
+            switch (beforeMap[uuid].type) {
+                case 'image': {
+                    isChange = isChangeImageElementResource(beforeMap[uuid], afterMap[uuid]);
+                    break;
+                }
+                case 'svg': {
+                    isChange = isChangeSVGElementResource(beforeMap[uuid], afterMap[uuid]);
+                    break;
+                }
+                case 'html': {
+                    isChange = isChangeHTMLElementResource(beforeMap[uuid], afterMap[uuid]);
+                    break;
+                }
+                default: break;
+            }
+            if (isChange === true) {
+                uuids.push(uuid);
+            }
+        }
+        else {
+            uuids.push(uuid);
+        }
+    }
+    return uuids;
+}
+function parseDataElementMap(data) {
+    const elemMap = {};
+    data.elements.forEach((elem) => {
+        elemMap[elem.uuid] = elem;
+    });
+    return elemMap;
+}

package/dist/esm/lib/draw/base.d.ts

@@ -0,0 +1,5 @@
+import { TypeContext, TypeElement } from '@idraw/types';
+export declare function clearContext(ctx: TypeContext): void;
+export declare function drawBgColor(ctx: TypeContext, color: string): void;
+export declare function drawBox(ctx: TypeContext, elem: TypeElement<'text' | 'rect'>, pattern: string | CanvasPattern | null): void;
+export declare function drawBoxBorder(ctx: TypeContext, elem: TypeElement<'text' | 'rect'>): void;

package/dist/esm/lib/draw/base.js

@@ -0,0 +1,89 @@
+import { is, istype, isColorStr } from '@idraw/util';
+import { rotateElement } from './../transform';
+export function clearContext(ctx) {
+    ctx.setFillStyle('#000000');
+    ctx.setStrokeStyle('#000000');
+    ctx.setLineDash([]);
+    ctx.setGlobalAlpha(1);
+    ctx.setShadowColor('#00000000');
+    ctx.setShadowOffsetX(0);
+    ctx.setShadowOffsetY(0);
+    ctx.setShadowBlur(0);
+}
+export function drawBgColor(ctx, color) {
+    const size = ctx.getSize();
+    ctx.setFillStyle(color);
+    ctx.fillRect(0, 0, size.contextWidth, size.contextHeight);
+}
+export function drawBox(ctx, elem, pattern) {
+    clearContext(ctx);
+    drawBoxBorder(ctx, elem);
+    clearContext(ctx);
+    rotateElement(ctx, elem, () => {
+        const { x, y, w, h } = elem;
+        let r = elem.desc.borderRadius || 0;
+        r = Math.min(r, w / 2, h / 2);
+        if (w < r * 2 || h < r * 2) {
+            r = 0;
+        }
+        ctx.beginPath();
+        ctx.moveTo(x + r, y);
+        ctx.arcTo(x + w, y, x + w, y + h, r);
+        ctx.arcTo(x + w, y + h, x, y + h, r);
+        ctx.arcTo(x, y + h, x, y, r);
+        ctx.arcTo(x, y, x + w, y, r);
+        ctx.closePath();
+        if (typeof pattern === 'string') {
+            ctx.setFillStyle(pattern);
+        }
+        else if (['CanvasPattern'].includes(istype.type(pattern))) {
+            ctx.setFillStyle(pattern);
+        }
+        ctx.fill();
+    });
+}
+export function drawBoxBorder(ctx, elem) {
+    clearContext(ctx);
+    rotateElement(ctx, elem, () => {
+        if (!(elem.desc.borderWidth && elem.desc.borderWidth > 0)) {
+            return;
+        }
+        const bw = elem.desc.borderWidth;
+        let borderColor = '#000000';
+        if (isColorStr(elem.desc.borderColor) === true) {
+            borderColor = elem.desc.borderColor;
+        }
+        const x = elem.x - bw / 2;
+        const y = elem.y - bw / 2;
+        const w = elem.w + bw;
+        const h = elem.h + bw;
+        let r = elem.desc.borderRadius || 0;
+        r = Math.min(r, w / 2, h / 2);
+        if (r < w / 2 && r < h / 2) {
+            r = r + bw / 2;
+        }
+        const { desc } = elem;
+        if (desc.shadowColor !== undefined && isColorStr(desc.shadowColor)) {
+            ctx.setShadowColor(desc.shadowColor);
+        }
+        if (desc.shadowOffsetX !== undefined && is.number(desc.shadowOffsetX)) {
+            ctx.setShadowOffsetX(desc.shadowOffsetX);
+        }
+        if (desc.shadowOffsetY !== undefined && is.number(desc.shadowOffsetY)) {
+            ctx.setShadowOffsetY(desc.shadowOffsetY);
+        }
+        if (desc.shadowBlur !== undefined && is.number(desc.shadowBlur)) {
+            ctx.setShadowBlur(desc.shadowBlur);
+        }
+        ctx.beginPath();
+        ctx.setLineWidth(bw);
+        ctx.setStrokeStyle(borderColor);
+        ctx.moveTo(x + r, y);
+        ctx.arcTo(x + w, y, x + w, y + h, r);
+        ctx.arcTo(x + w, y + h, x, y + h, r);
+        ctx.arcTo(x, y + h, x, y, r);
+        ctx.arcTo(x, y, x + w, y, r);
+        ctx.closePath();
+        ctx.stroke();
+    });
+}

package/dist/esm/lib/draw/circle.d.ts

@@ -0,0 +1,2 @@
+import { TypeContext, TypeElement } from '@idraw/types';
+export declare function drawCircle(ctx: TypeContext, elem: TypeElement<'circle'>): void;

package/dist/esm/lib/draw/circle.js

@@ -0,0 +1,28 @@
+import { rotateElement } from './../transform';
+import { clearContext } from './base';
+export function drawCircle(ctx, elem) {
+    clearContext(ctx);
+    rotateElement(ctx, elem, (ctx) => {
+        const { x, y, w, h, desc } = elem;
+        const { bgColor = '#000000', borderColor = '#000000', borderWidth = 0, } = desc;
+        const a = w / 2;
+        const b = h / 2;
+        const centerX = x + a;
+        const centerY = y + b;
+        if (borderWidth && borderWidth > 0) {
+            const ba = borderWidth / 2 + a;
+            const bb = borderWidth / 2 + b;
+            ctx.beginPath();
+            ctx.setStrokeStyle(borderColor);
+            ctx.setLineWidth(borderWidth);
+            ctx.ellipse(centerX, centerY, ba, bb, 0, 0, 2 * Math.PI);
+            ctx.closePath();
+            ctx.stroke();
+        }
+        ctx.beginPath();
+        ctx.setFillStyle(bgColor);
+        ctx.ellipse(centerX, centerY, a, b, 0, 0, 2 * Math.PI);
+        ctx.closePath();
+        ctx.fill();
+    });
+}

package/dist/esm/lib/draw/html.d.ts

@@ -0,0 +1,3 @@
+import { TypeContext, TypeElement } from '@idraw/types';
+import Loader from '../loader';
+export declare function drawHTML(ctx: TypeContext, elem: TypeElement<'html'>, loader: Loader): void;

package/dist/esm/lib/draw/html.js

@@ -0,0 +1,9 @@
+import { rotateElement } from '../transform';
+export function drawHTML(ctx, elem, loader) {
+    const content = loader.getContent(elem.uuid);
+    rotateElement(ctx, elem, () => {
+        if (content) {
+            ctx.drawImage(content, elem.x, elem.y, elem.w, elem.h);
+        }
+    });
+}

package/dist/esm/lib/draw/image.d.ts

@@ -0,0 +1,3 @@
+import { TypeContext, TypeElement } from '@idraw/types';
+import Loader from '../loader';
+export declare function drawImage(ctx: TypeContext, elem: TypeElement<'image'>, loader: Loader): void;

package/dist/esm/lib/draw/image.js

@@ -0,0 +1,9 @@
+import { rotateElement } from '../transform';
+export function drawImage(ctx, elem, loader) {
+    const content = loader.getContent(elem.uuid);
+    rotateElement(ctx, elem, () => {
+        if (content) {
+            ctx.drawImage(content, elem.x, elem.y, elem.w, elem.h);
+        }
+    });
+}

package/dist/esm/lib/draw/index.d.ts

@@ -0,0 +1,3 @@
+import { TypeContext, TypeData } from '@idraw/types';
+import Loader from '../loader';
+export declare function drawContext(ctx: TypeContext, data: TypeData, loader: Loader): void;

package/dist/esm/lib/draw/index.js

@@ -0,0 +1,55 @@
+import { isColorStr } from '@idraw/util';
+import { clearContext, drawBgColor } from './base';
+import { drawRect } from './rect';
+import { drawImage } from './image';
+import { drawSVG } from './svg';
+import { drawHTML } from './html';
+import { drawText } from './text';
+import { drawCircle } from './circle';
+export function drawContext(ctx, data, loader) {
+    var _a;
+    clearContext(ctx);
+    const size = ctx.getSize();
+    ctx.clearRect(0, 0, size.contextWidth, size.contextHeight);
+    if (typeof data.bgColor === 'string' && isColorStr(data.bgColor)) {
+        drawBgColor(ctx, data.bgColor);
+    }
+    if (!(data.elements.length > 0)) {
+        return;
+    }
+    for (let i = 0; i < data.elements.length; i++) {
+        const elem = data.elements[i];
+        if (((_a = elem === null || elem === void 0 ? void 0 : elem.operation) === null || _a === void 0 ? void 0 : _a.invisible) === true) {
+            continue;
+        }
+        switch (elem.type) {
+            case 'rect': {
+                drawRect(ctx, elem);
+                break;
+            }
+            case 'text': {
+                drawText(ctx, elem, loader);
+                break;
+            }
+            case 'image': {
+                drawImage(ctx, elem, loader);
+                break;
+            }
+            case 'svg': {
+                drawSVG(ctx, elem, loader);
+                break;
+            }
+            case 'html': {
+                drawHTML(ctx, elem, loader);
+                break;
+            }
+            case 'circle': {
+                drawCircle(ctx, elem);
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+    }
+}

package/dist/esm/lib/draw/rect.d.ts

@@ -0,0 +1,2 @@
+import { TypeContext, TypeElement } from '@idraw/types';
+export declare function drawRect(ctx: TypeContext, elem: TypeElement<'rect'>): void;

package/dist/esm/lib/draw/rect.js

@@ -0,0 +1,4 @@
+import { drawBox } from './base';
+export function drawRect(ctx, elem) {
+    drawBox(ctx, elem, elem.desc.bgColor);
+}

package/dist/esm/lib/draw/svg.d.ts

@@ -0,0 +1,3 @@
+import { TypeContext, TypeElement } from '@idraw/types';
+import Loader from '../loader';
+export declare function drawSVG(ctx: TypeContext, elem: TypeElement<'svg'>, loader: Loader): void;

package/dist/esm/lib/draw/svg.js

@@ -0,0 +1,9 @@
+import { rotateElement } from '../transform';
+export function drawSVG(ctx, elem, loader) {
+    const content = loader.getContent(elem.uuid);
+    rotateElement(ctx, elem, () => {
+        if (content) {
+            ctx.drawImage(content, elem.x, elem.y, elem.w, elem.h);
+        }
+    });
+}

package/dist/esm/lib/draw/text.d.ts

@@ -0,0 +1,3 @@
+import { TypeContext, TypeElement } from '@idraw/types';
+import Loader from '../loader';
+export declare function drawText(ctx: TypeContext, elem: TypeElement<'text'>, loader: Loader): void;

package/dist/esm/lib/draw/text.js

@@ -0,0 +1,116 @@
+import { is, isColorStr } from '@idraw/util';
+import { clearContext, drawBox } from './base';
+import { rotateElement } from './../transform';
+export function drawText(ctx, elem, loader) {
+    clearContext(ctx);
+    drawBox(ctx, elem, elem.desc.bgColor || 'transparent');
+    rotateElement(ctx, elem, () => {
+        const desc = Object.assign({
+            fontSize: 12,
+            fontFamily: 'sans-serif',
+            textAlign: 'center',
+        }, elem.desc);
+        ctx.setFillStyle(elem.desc.color);
+        ctx.setTextBaseline('top');
+        ctx.setFont({
+            fontWeight: desc.fontWeight,
+            fontSize: desc.fontSize,
+            fontFamily: desc.fontFamily
+        });
+        const descText = desc.text.replace(/\r\n/ig, '\n');
+        const fontHeight = desc.lineHeight || desc.fontSize;
+        const descTextList = descText.split('\n');
+        const lines = [];
+        let lineNum = 0;
+        descTextList.forEach((tempText, idx) => {
+            let lineText = '';
+            if (tempText.length > 0) {
+                for (let i = 0; i < tempText.length; i++) {
+                    if (ctx.measureText(lineText + (tempText[i] || '')).width < ctx.calcDeviceNum(elem.w)) {
+                        lineText += (tempText[i] || '');
+                    }
+                    else {
+                        lines.push({
+                            text: lineText,
+                            width: ctx.calcScreenNum(ctx.measureText(lineText).width),
+                        });
+                        lineText = (tempText[i] || '');
+                        lineNum++;
+                    }
+                    if ((lineNum + 1) * fontHeight > elem.h) {
+                        break;
+                    }
+                    if (tempText.length - 1 === i) {
+                        if ((lineNum + 1) * fontHeight < elem.h) {
+                            lines.push({
+                                text: lineText,
+                                width: ctx.calcScreenNum(ctx.measureText(lineText).width),
+                            });
+                            if (idx < descTextList.length - 1) {
+                                lineNum++;
+                            }
+                            break;
+                        }
+                    }
+                }
+            }
+            else {
+                lines.push({
+                    text: '',
+                    width: 0,
+                });
+            }
+        });
+        {
+            let _y = elem.y;
+            if (lines.length * fontHeight < elem.h) {
+                _y += ((elem.h - lines.length * fontHeight) / 2);
+            }
+            if (desc.textShadowColor !== undefined && isColorStr(desc.textShadowColor)) {
+                ctx.setShadowColor(desc.textShadowColor);
+            }
+            if (desc.textShadowOffsetX !== undefined && is.number(desc.textShadowOffsetX)) {
+                ctx.setShadowOffsetX(desc.textShadowOffsetX);
+            }
+            if (desc.textShadowOffsetY !== undefined && is.number(desc.textShadowOffsetY)) {
+                ctx.setShadowOffsetY(desc.textShadowOffsetY);
+            }
+            if (desc.textShadowBlur !== undefined && is.number(desc.textShadowBlur)) {
+                ctx.setShadowBlur(desc.textShadowBlur);
+            }
+            lines.forEach((line, i) => {
+                let _x = elem.x;
+                if (desc.textAlign === 'center') {
+                    _x = elem.x + (elem.w - line.width) / 2;
+                }
+                else if (desc.textAlign === 'right') {
+                    _x = elem.x + (elem.w - line.width);
+                }
+                ctx.fillText(line.text, _x, _y + fontHeight * i);
+            });
+            clearContext(ctx);
+        }
+        if (isColorStr(desc.strokeColor) && desc.strokeWidth !== undefined && desc.strokeWidth > 0) {
+            let _y = elem.y;
+            if (lines.length * fontHeight < elem.h) {
+                _y += ((elem.h - lines.length * fontHeight) / 2);
+            }
+            lines.forEach((line, i) => {
+                let _x = elem.x;
+                if (desc.textAlign === 'center') {
+                    _x = elem.x + (elem.w - line.width) / 2;
+                }
+                else if (desc.textAlign === 'right') {
+                    _x = elem.x + (elem.w - line.width);
+                }
+                if (desc.strokeColor !== undefined) {
+                    ctx.setStrokeStyle(desc.strokeColor);
+                }
+                if (desc.strokeWidth !== undefined && desc.strokeWidth > 0) {
+                    ctx.setLineWidth(desc.strokeWidth);
+                }
+                ctx.strokeText(line.text, _x, _y + fontHeight * i);
+            });
+        }
+    });
+}

package/dist/esm/lib/index.d.ts

@@ -0,0 +1,6 @@
+export * from './diff';
+export * from './loader-event';
+export * from './loader';
+export * from './parse';
+export * from './temp';
+export * from './value';

package/dist/esm/lib/index.js

@@ -0,0 +1,6 @@
+export * from './diff';
+export * from './loader-event';
+export * from './loader';
+export * from './parse';
+export * from './temp';
+export * from './value';