@idraw/renderer 0.2.0-alpha.25 → 0.3.0-0.3.0-beta.6.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 idrawjs
+Copyright (c) 2021-present idrawjs
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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,26 @@
+import { IDrawData, IDrawContext } from '@idraw/types';
+import { RendererEvent } from './lib/renderer-event';
+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 | IDrawContext, originData: IDrawData, opts?: {
+        changeResourceUUIDs?: string[];
+    }): void;
+    getContext(): IDrawContext | null;
+    thaw(): void;
+    private _freeze;
+    private _drawFrame;
+    private _retainQueueOneItem;
+}
+export {};

package/dist/esm/index.js

@@ -0,0 +1,137 @@
+import { createUUID, deepClone, Context } from '@idraw/util';
+import { drawContext } from './lib/draw';
+import Loader from './lib/loader';
+import { RendererEvent } from './lib/renderer-event';
+const { requestAnimationFrame } = window;
+var DrawStatus;
+(function (DrawStatus) {
+    DrawStatus["NULL"] = "null";
+    DrawStatus["FREE"] = "free";
+    DrawStatus["DRAWING"] = "drawing";
+    DrawStatus["FREEZE"] = "freeze";
+})(DrawStatus || (DrawStatus = {}));
+export default class Renderer extends RendererEvent {
+    constructor(opts) {
+        super();
+        this._queue = [];
+        this._ctx = null;
+        this._status = DrawStatus.NULL;
+        this._opts = opts;
+        this._loader = new Loader({
+            maxParallelNum: 6
+        });
+        this._loader.on('load', (res) => {
+            this._drawFrame();
+            this.trigger('load', { element: res.element });
+        });
+        this._loader.on('error', (res) => {
+            this.trigger('error', { element: res.element, error: res.error });
+        });
+        this._loader.on('complete', () => {
+            this.trigger('loadComplete', { t: Date.now() });
+        });
+    }
+    render(target, originData, opts) {
+        const { changeResourceUUIDs = [] } = opts || {};
+        this._status = DrawStatus.FREE;
+        const data = deepClone(originData);
+        if (Array.isArray(data.elements)) {
+            data.elements.forEach((elem) => {
+                if (!(typeof elem.uuid === 'string' && elem.uuid)) {
+                    elem.uuid = createUUID();
+                }
+            });
+        }
+        if (!this._ctx) {
+            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;
+                canvas.height = height * devicePixelRatio;
+                const ctx2d = canvas.getContext('2d');
+                this._ctx = new Context(ctx2d, {
+                    width,
+                    height,
+                    contextWidth: contextWidth || width,
+                    contextHeight: contextHeight || height,
+                    devicePixelRatio
+                });
+            }
+            else if (target) {
+                this._ctx = target;
+            }
+        }
+        if ([DrawStatus.FREEZE].includes(this._status)) {
+            return;
+        }
+        const _data = deepClone({ data });
+        this._queue.push(_data);
+        this._drawFrame();
+        this._loader.load(data, changeResourceUUIDs || []);
+    }
+    getContext() {
+        return this._ctx;
+    }
+    thaw() {
+        this._status = DrawStatus.FREE;
+    }
+    _freeze() {
+        this._status = DrawStatus.FREEZE;
+    }
+    _drawFrame() {
+        if (this._status === DrawStatus.FREEZE) {
+            return;
+        }
+        requestAnimationFrame(() => {
+            if (this._status === DrawStatus.FREEZE) {
+                return;
+            }
+            const ctx = this._ctx;
+            let item = this._queue[0];
+            let isLastFrame = false;
+            if (this._queue.length > 1) {
+                item = this._queue.shift();
+            }
+            else {
+                isLastFrame = true;
+            }
+            if (this._loader.isComplete() !== true) {
+                this._drawFrame();
+                if (item && ctx) {
+                    drawContext(ctx, item.data, this._loader);
+                }
+            }
+            else if (item && ctx) {
+                drawContext(ctx, item.data, this._loader);
+                this._retainQueueOneItem();
+                if (!isLastFrame) {
+                    this._drawFrame();
+                }
+                else {
+                    this._status = DrawStatus.FREE;
+                }
+            }
+            else {
+                this._status = DrawStatus.FREE;
+            }
+            this.trigger('drawFrame', { t: Date.now() });
+            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);
+                }
+                this.trigger('drawFrameComplete', { t: Date.now() });
+                this._freeze();
+            }
+        });
+    }
+    _retainQueueOneItem() {
+        if (this._queue.length <= 1) {
+            return;
+        }
+        const lastOne = deepClone(this._queue[this._queue.length - 1]);
+        this._queue = [lastOne];
+    }
+}

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

@@ -0,0 +1,5 @@
+import { DataElement, DataElemDesc, Point } from '@idraw/types';
+export declare function parseRadianToAngle(radian: number): number;
+export declare function parseAngleToRadian(angle: number): number;
+export declare function calcElementCenter(elem: DataElement<keyof DataElemDesc>): Point;
+export declare function calcRadian(center: Point, start: Point, end: Point): 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 { DataElement, IDrawData, DataElemDesc } from '@idraw/types';
+export declare function isChangeImageElementResource(before: DataElement<'image'>, after: DataElement<'image'>): boolean;
+export declare function isChangeSVGElementResource(before: DataElement<'svg'>, after: DataElement<'svg'>): boolean;
+export declare function isChangeHTMLElementResource(before: DataElement<'html'>, after: DataElement<'html'>): boolean;
+export declare function diffElementResourceChange(before: DataElement<keyof DataElemDesc>, after: DataElement<keyof DataElemDesc>): string | null;
+export declare function diffElementResourceChangeList(before: IDrawData, after: IDrawData): string[];

package/dist/esm/lib/diff.js

@@ -0,0 +1,82 @@
+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 { IDrawContext, DataElement } from '@idraw/types';
+export declare function clearContext(ctx: IDrawContext): void;
+export declare function drawBgColor(ctx: IDrawContext, color: string): void;
+export declare function drawBox(ctx: IDrawContext, elem: DataElement<'text' | 'rect'>, pattern: string | CanvasPattern | null): void;
+export declare function drawBoxBorder(ctx: IDrawContext, elem: DataElement<'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 { IDrawContext, DataElement } from '@idraw/types';
+export declare function drawCircle(ctx: IDrawContext, elem: DataElement<'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 { IDrawContext, DataElement } from '@idraw/types';
+import Loader from '../loader';
+export declare function drawHTML(ctx: IDrawContext, elem: DataElement<'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 { IDrawContext, DataElement } from '@idraw/types';
+import Loader from '../loader';
+export declare function drawImage(ctx: IDrawContext, elem: DataElement<'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 { IDrawContext, IDrawData } from '@idraw/types';
+import Loader from '../loader';
+export declare function drawContext(ctx: IDrawContext, data: IDrawData, 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 { IDrawContext, DataElement } from '@idraw/types';
+export declare function drawRect(ctx: IDrawContext, elem: DataElement<'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 { IDrawContext, DataElement } from '@idraw/types';
+import Loader from '../loader';
+export declare function drawSVG(ctx: IDrawContext, elem: DataElement<'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 { IDrawContext, DataElement } from '@idraw/types';
+import Loader from '../loader';
+export declare function drawText(ctx: IDrawContext, elem: DataElement<'text'>, loader: Loader): void;