@idraw/renderer 0.3.0-alpha.4 → 0.3.0-alpha.7

package/dist/esm/lib/loader-event.d.ts

@@ -0,0 +1,33 @@
+import { TypeElement, TypeElemDesc } from '@idraw/types';
+export type TypeLoadDataItem = {
+    uuid: string;
+    type: 'image' | 'svg' | 'html';
+    status: 'null' | 'loaded' | 'fail';
+    content: null | HTMLImageElement | HTMLCanvasElement;
+    elemW: number;
+    elemH: number;
+    source: string;
+    element: TypeElement<keyof TypeElemDesc>;
+    error?: any;
+};
+export type TypeLoadData = {
+    [uuid: string]: TypeLoadDataItem;
+};
+export type TypeLoaderEventArgMap = {
+    'complete': void;
+    'load': TypeLoadData[string];
+    'error': TypeLoadData[string];
+};
+export interface TypeLoaderEvent {
+    on<T extends keyof TypeLoaderEventArgMap>(key: T, callback: (p: TypeLoaderEventArgMap[T]) => void): void;
+    off<T extends keyof TypeLoaderEventArgMap>(key: T, callback: (p: TypeLoaderEventArgMap[T]) => void): void;
+    trigger<T extends keyof TypeLoaderEventArgMap>(key: T, p: TypeLoaderEventArgMap[T]): void;
+}
+export declare class LoaderEvent implements TypeLoaderEvent {
+    private _listeners;
+    constructor();
+    on<T extends keyof TypeLoaderEventArgMap>(eventKey: T, callback: (p: TypeLoaderEventArgMap[T]) => void): void;
+    off<T extends keyof TypeLoaderEventArgMap>(eventKey: T, callback: (p: TypeLoaderEventArgMap[T]) => void): void;
+    trigger<T extends keyof TypeLoaderEventArgMap>(eventKey: T, arg: TypeLoaderEventArgMap[T]): boolean;
+    has<T extends keyof TypeLoaderEventArgMap>(name: string): boolean;
+}

package/dist/esm/lib/loader-event.js

@@ -0,0 +1,50 @@
+export class LoaderEvent {
+    constructor() {
+        this._listeners = new Map();
+    }
+    on(eventKey, callback) {
+        if (this._listeners.has(eventKey)) {
+            const callbacks = this._listeners.get(eventKey);
+            callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
+            this._listeners.set(eventKey, callbacks || []);
+        }
+        else {
+            this._listeners.set(eventKey, [callback]);
+        }
+    }
+    off(eventKey, callback) {
+        if (this._listeners.has(eventKey)) {
+            const callbacks = this._listeners.get(eventKey);
+            if (Array.isArray(callbacks)) {
+                for (let i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
+                    if (callbacks[i] === callback) {
+                        callbacks.splice(i, 1);
+                        break;
+                    }
+                }
+            }
+            this._listeners.set(eventKey, callbacks || []);
+        }
+    }
+    trigger(eventKey, arg) {
+        const callbacks = this._listeners.get(eventKey);
+        if (Array.isArray(callbacks)) {
+            callbacks.forEach((cb) => {
+                cb(arg);
+            });
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    has(name) {
+        if (this._listeners.has(name)) {
+            const list = this._listeners.get(name);
+            if (Array.isArray(list) && list.length > 0) {
+                return true;
+            }
+        }
+        return false;
+    }
+}

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

@@ -0,0 +1,25 @@
+import { TypeData } from '@idraw/types';
+import { TypeLoaderEventArgMap } from './loader-event';
+type Options = {
+    maxParallelNum: number;
+};
+export default class Loader {
+    private _opts;
+    private _event;
+    private _currentLoadData;
+    private _currentUUIDQueue;
+    private _storageLoadData;
+    private _status;
+    private _waitingLoadQueue;
+    constructor(opts: Options);
+    load(data: TypeData, changeResourceUUIDs: string[]): void;
+    on<T extends keyof TypeLoaderEventArgMap>(name: T, callback: (arg: TypeLoaderEventArgMap[T]) => void): void;
+    off<T extends keyof TypeLoaderEventArgMap>(name: T, callback: (arg: TypeLoaderEventArgMap[T]) => void): void;
+    isComplete(): boolean;
+    getContent(uuid: string): null | HTMLImageElement | HTMLCanvasElement;
+    private _resetLoadData;
+    private _createEmptyLoadItem;
+    private _loadTask;
+    private _loadElementSource;
+}
+export {};

package/dist/esm/lib/loader.js

@@ -0,0 +1,238 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { loadImage, loadSVG, loadHTML, deepClone } from '@idraw/util';
+import { LoaderEvent } from './loader-event';
+import { filterScript } from './../util/filter';
+var LoaderStatus;
+(function (LoaderStatus) {
+    LoaderStatus["FREE"] = "free";
+    LoaderStatus["LOADING"] = "loading";
+    LoaderStatus["COMPLETE"] = "complete";
+})(LoaderStatus || (LoaderStatus = {}));
+export default class Loader {
+    constructor(opts) {
+        this._currentLoadData = {};
+        this._currentUUIDQueue = [];
+        this._storageLoadData = {};
+        this._status = LoaderStatus.FREE;
+        this._waitingLoadQueue = [];
+        this._opts = opts;
+        this._event = new LoaderEvent();
+        this._waitingLoadQueue = [];
+    }
+    load(data, changeResourceUUIDs) {
+        const [uuidQueue, loadData] = this._resetLoadData(data, changeResourceUUIDs);
+        if (this._status === LoaderStatus.FREE || this._status === LoaderStatus.COMPLETE) {
+            this._currentUUIDQueue = uuidQueue;
+            this._currentLoadData = loadData;
+            this._loadTask();
+        }
+        else if (this._status === LoaderStatus.LOADING && uuidQueue.length > 0) {
+            this._waitingLoadQueue.push({
+                uuidQueue,
+                loadData,
+            });
+        }
+    }
+    on(name, callback) {
+        this._event.on(name, callback);
+    }
+    off(name, callback) {
+        this._event.off(name, callback);
+    }
+    isComplete() {
+        return this._status === LoaderStatus.COMPLETE;
+    }
+    getContent(uuid) {
+        var _a;
+        if (((_a = this._storageLoadData[uuid]) === null || _a === void 0 ? void 0 : _a.status) === 'loaded') {
+            return this._storageLoadData[uuid].content;
+        }
+        return null;
+    }
+    _resetLoadData(data, changeResourceUUIDs) {
+        const loadData = {};
+        const uuidQueue = [];
+        const storageLoadData = this._storageLoadData;
+        for (let i = data.elements.length - 1; i >= 0; i--) {
+            const elem = data.elements[i];
+            if (['image', 'svg', 'html',].includes(elem.type)) {
+                if (!storageLoadData[elem.uuid]) {
+                    loadData[elem.uuid] = this._createEmptyLoadItem(elem);
+                    uuidQueue.push(elem.uuid);
+                }
+                else {
+                    if (changeResourceUUIDs.includes(elem.uuid)) {
+                        loadData[elem.uuid] = this._createEmptyLoadItem(elem);
+                        uuidQueue.push(elem.uuid);
+                    }
+                }
+            }
+        }
+        return [uuidQueue, loadData];
+    }
+    _createEmptyLoadItem(elem) {
+        let source = '';
+        const type = elem.type;
+        let elemW = elem.w;
+        let elemH = elem.h;
+        if (elem.type === 'image') {
+            const _elem = elem;
+            source = _elem.desc.src || '';
+        }
+        else if (elem.type === 'svg') {
+            const _elem = elem;
+            source = _elem.desc.svg || '';
+        }
+        else if (elem.type === 'html') {
+            const _elem = elem;
+            source = filterScript(_elem.desc.html || '');
+            elemW = _elem.desc.width || elem.w;
+            elemH = _elem.desc.height || elem.h;
+        }
+        return {
+            uuid: elem.uuid,
+            type: type,
+            status: 'null',
+            content: null,
+            source,
+            elemW,
+            elemH,
+            element: deepClone(elem),
+        };
+    }
+    _loadTask() {
+        if (this._status === LoaderStatus.LOADING) {
+            return;
+        }
+        this._status = LoaderStatus.LOADING;
+        if (this._currentUUIDQueue.length === 0) {
+            if (this._waitingLoadQueue.length === 0) {
+                this._status = LoaderStatus.COMPLETE;
+                this._event.trigger('complete', undefined);
+                return;
+            }
+            else {
+                const waitingItem = this._waitingLoadQueue.shift();
+                if (waitingItem) {
+                    const { uuidQueue, loadData } = waitingItem;
+                    this._currentLoadData = loadData;
+                    this._currentUUIDQueue = uuidQueue;
+                }
+            }
+        }
+        const { maxParallelNum } = this._opts;
+        const uuids = this._currentUUIDQueue.splice(0, maxParallelNum);
+        const uuidMap = {};
+        uuids.forEach((url, i) => {
+            uuidMap[url] = i;
+        });
+        const loadUUIDList = [];
+        const _loadAction = () => {
+            if (loadUUIDList.length >= maxParallelNum) {
+                return false;
+            }
+            if (uuids.length === 0) {
+                return true;
+            }
+            for (let i = loadUUIDList.length; i < maxParallelNum; i++) {
+                const uuid = uuids.shift();
+                if (uuid === undefined) {
+                    break;
+                }
+                loadUUIDList.push(uuid);
+                this._loadElementSource(this._currentLoadData[uuid]).then((image) => {
+                    var _a, _b;
+                    loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
+                    const status = _loadAction();
+                    this._storageLoadData[uuid] = {
+                        uuid,
+                        type: this._currentLoadData[uuid].type,
+                        status: 'loaded',
+                        content: image,
+                        source: this._currentLoadData[uuid].source,
+                        elemW: this._currentLoadData[uuid].elemW,
+                        elemH: this._currentLoadData[uuid].elemH,
+                        element: this._currentLoadData[uuid].element,
+                    };
+                    if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
+                        this._status = LoaderStatus.FREE;
+                        this._loadTask();
+                    }
+                    this._event.trigger('load', {
+                        uuid: (_a = this._storageLoadData[uuid]) === null || _a === void 0 ? void 0 : _a.uuid,
+                        type: this._storageLoadData[uuid].type,
+                        status: this._storageLoadData[uuid].status,
+                        content: this._storageLoadData[uuid].content,
+                        source: this._storageLoadData[uuid].source,
+                        elemW: this._storageLoadData[uuid].elemW,
+                        elemH: this._storageLoadData[uuid].elemH,
+                        element: (_b = this._storageLoadData[uuid]) === null || _b === void 0 ? void 0 : _b.element,
+                    });
+                }).catch((err) => {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+                    console.warn(err);
+                    loadUUIDList.splice(loadUUIDList.indexOf(uuid), 1);
+                    const status = _loadAction();
+                    if (this._currentLoadData[uuid]) {
+                        this._storageLoadData[uuid] = {
+                            uuid,
+                            type: (_a = this._currentLoadData[uuid]) === null || _a === void 0 ? void 0 : _a.type,
+                            status: 'fail',
+                            content: null,
+                            error: err,
+                            source: (_b = this._currentLoadData[uuid]) === null || _b === void 0 ? void 0 : _b.source,
+                            elemW: (_c = this._currentLoadData[uuid]) === null || _c === void 0 ? void 0 : _c.elemW,
+                            elemH: (_d = this._currentLoadData[uuid]) === null || _d === void 0 ? void 0 : _d.elemH,
+                            element: (_e = this._currentLoadData[uuid]) === null || _e === void 0 ? void 0 : _e.element,
+                        };
+                    }
+                    if (loadUUIDList.length === 0 && uuids.length === 0 && status === true) {
+                        this._status = LoaderStatus.FREE;
+                        this._loadTask();
+                    }
+                    if (this._currentLoadData[uuid]) {
+                        this._event.trigger('error', {
+                            uuid: uuid,
+                            type: (_f = this._storageLoadData[uuid]) === null || _f === void 0 ? void 0 : _f.type,
+                            status: (_g = this._storageLoadData[uuid]) === null || _g === void 0 ? void 0 : _g.status,
+                            content: (_h = this._storageLoadData[uuid]) === null || _h === void 0 ? void 0 : _h.content,
+                            source: (_j = this._storageLoadData[uuid]) === null || _j === void 0 ? void 0 : _j.source,
+                            elemW: (_k = this._storageLoadData[uuid]) === null || _k === void 0 ? void 0 : _k.elemW,
+                            elemH: (_l = this._storageLoadData[uuid]) === null || _l === void 0 ? void 0 : _l.elemH,
+                            element: (_m = this._storageLoadData[uuid]) === null || _m === void 0 ? void 0 : _m.element,
+                        });
+                    }
+                });
+            }
+            return false;
+        };
+        _loadAction();
+    }
+    _loadElementSource(params) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (params && params.type === 'image') {
+                const image = yield loadImage(params.source);
+                return image;
+            }
+            else if (params && params.type === 'svg') {
+                const image = yield loadSVG(params.source);
+                return image;
+            }
+            else if (params && params.type === 'html') {
+                const image = yield loadHTML(params.source, {
+                    width: params.elemW, height: params.elemH
+                });
+                return image;
+            }
+            throw Error('Element\'s source is not support!');
+        });
+    }
+}

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

@@ -0,0 +1,2 @@
+import { TypeData } from '@idraw/types';
+export declare function parseData(data: any): TypeData;

package/dist/esm/lib/parse.js

@@ -0,0 +1,32 @@
+import { elementNames } from './../constant/element';
+export function parseData(data) {
+    const result = {
+        elements: []
+    };
+    if (Array.isArray(data === null || data === void 0 ? void 0 : data.elements)) {
+        data === null || data === void 0 ? void 0 : data.elements.forEach((elem = {}) => {
+            if (isElement(elem)) {
+                result.elements.push(elem);
+            }
+        });
+    }
+    if (typeof data.bgColor === 'string') {
+        result.bgColor = data.bgColor;
+    }
+    return result;
+}
+function isElement(elem) {
+    if (!(isNumber(elem.x) &&
+        isNumber(elem.y) &&
+        isNumber(elem.w) &&
+        isNumber(elem.h))) {
+        return false;
+    }
+    if (!(typeof elem.type === 'string' && elementNames.includes(elem.type))) {
+        return false;
+    }
+    return true;
+}
+function isNumber(num) {
+    return num >= 0 || num < 0;
+}

package/dist/esm/lib/renderer-event.d.ts

@@ -0,0 +1,32 @@
+import { TypeElement, TypeElemDesc } from '@idraw/types';
+export type TypeRendererEventArgMap = {
+    'drawFrame': {
+        t: number;
+    };
+    'drawFrameComplete': {
+        t: number;
+    };
+    'load': {
+        element: TypeElement<keyof TypeElemDesc>;
+    };
+    'loadComplete': {
+        t: number;
+    };
+    'error': {
+        element: TypeElement<keyof TypeElemDesc>;
+        error: any;
+    };
+};
+export interface TypeRendererEvent {
+    on<T extends keyof TypeRendererEventArgMap>(key: T, callback: (p: TypeRendererEventArgMap[T]) => void): void;
+    off<T extends keyof TypeRendererEventArgMap>(key: T, callback: (p: TypeRendererEventArgMap[T]) => void): void;
+    trigger<T extends keyof TypeRendererEventArgMap>(key: T, p: TypeRendererEventArgMap[T]): void;
+}
+export declare class RendererEvent implements TypeRendererEvent {
+    private _listeners;
+    constructor();
+    on<T extends keyof TypeRendererEventArgMap>(eventKey: T, callback: (p: TypeRendererEventArgMap[T]) => void): void;
+    off<T extends keyof TypeRendererEventArgMap>(eventKey: T, callback: (p: TypeRendererEventArgMap[T]) => void): void;
+    trigger<T extends keyof TypeRendererEventArgMap>(eventKey: T, arg: TypeRendererEventArgMap[T]): boolean;
+    has<T extends keyof TypeRendererEventArgMap>(name: string): boolean;
+}

package/dist/esm/lib/renderer-event.js

@@ -0,0 +1,50 @@
+export class RendererEvent {
+    constructor() {
+        this._listeners = new Map();
+    }
+    on(eventKey, callback) {
+        if (this._listeners.has(eventKey)) {
+            const callbacks = this._listeners.get(eventKey);
+            callbacks === null || callbacks === void 0 ? void 0 : callbacks.push(callback);
+            this._listeners.set(eventKey, callbacks || []);
+        }
+        else {
+            this._listeners.set(eventKey, [callback]);
+        }
+    }
+    off(eventKey, callback) {
+        if (this._listeners.has(eventKey)) {
+            const callbacks = this._listeners.get(eventKey);
+            if (Array.isArray(callbacks)) {
+                for (let i = 0; i < (callbacks === null || callbacks === void 0 ? void 0 : callbacks.length); i++) {
+                    if (callbacks[i] === callback) {
+                        callbacks.splice(i, 1);
+                        break;
+                    }
+                }
+            }
+            this._listeners.set(eventKey, callbacks || []);
+        }
+    }
+    trigger(eventKey, arg) {
+        const callbacks = this._listeners.get(eventKey);
+        if (Array.isArray(callbacks)) {
+            callbacks.forEach((cb) => {
+                cb(arg);
+            });
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    has(name) {
+        if (this._listeners.has(name)) {
+            const list = this._listeners.get(name);
+            if (Array.isArray(list) && list.length > 0) {
+                return true;
+            }
+        }
+        return false;
+    }
+}

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

@@ -0,0 +1,22 @@
+import { TypeHelperWrapperControllerDirection, TypePoint } from '@idraw/types';
+import { Mode, CursorStatus } from './../constant/static';
+type TempDataDesc = {
+    hasInited: boolean;
+    onlyRender: boolean;
+    mode: Mode;
+    cursorStatus: CursorStatus;
+    selectedUUID: string | null;
+    selectedUUIDList: string[];
+    hoverUUID: string | null;
+    selectedControllerDirection: TypeHelperWrapperControllerDirection | null;
+    hoverControllerDirection: TypeHelperWrapperControllerDirection | null;
+    prevPoint: TypePoint | null;
+};
+export declare class TempData {
+    private _temp;
+    constructor();
+    set<T extends keyof TempDataDesc>(name: T, value: TempDataDesc[T]): void;
+    get<T extends keyof TempDataDesc>(name: T): TempDataDesc[T];
+    clear(): void;
+}
+export {};

package/dist/esm/lib/temp.js

@@ -0,0 +1,29 @@
+import { Mode, CursorStatus } from './../constant/static';
+function createData() {
+    return {
+        onlyRender: false,
+        hasInited: false,
+        mode: Mode.NULL,
+        cursorStatus: CursorStatus.NULL,
+        selectedUUID: null,
+        selectedUUIDList: [],
+        hoverUUID: null,
+        selectedControllerDirection: null,
+        hoverControllerDirection: null,
+        prevPoint: null,
+    };
+}
+export class TempData {
+    constructor() {
+        this._temp = createData();
+    }
+    set(name, value) {
+        this._temp[name] = value;
+    }
+    get(name) {
+        return this._temp[name];
+    }
+    clear() {
+        this._temp = createData();
+    }
+}

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

@@ -0,0 +1,4 @@
+import { TypeContext, TypePoint, TypeElement, TypeElemDesc } from '@idraw/types';
+declare function rotateElement(ctx: TypeContext, elem: TypeElement<keyof TypeElemDesc>, callback: (ctx: TypeContext) => void): void;
+declare function rotateContext(ctx: TypeContext, center: TypePoint | undefined, radian: number, callback: (ctx: TypeContext) => void): void;
+export { rotateContext, rotateElement, };

package/dist/esm/lib/transform.js

@@ -0,0 +1,20 @@
+import { calcElementCenter, parseAngleToRadian } from './calculate';
+function rotateElement(ctx, elem, callback) {
+    const center = calcElementCenter(elem);
+    const radian = parseAngleToRadian(elem.angle || 0);
+    return rotateContext(ctx, center, radian || 0, callback);
+}
+function rotateContext(ctx, center, radian, callback) {
+    if (center && (radian > 0 || radian < 0)) {
+        ctx.translate(center.x, center.y);
+        ctx.rotate(radian);
+        ctx.translate(-center.x, -center.y);
+    }
+    callback(ctx);
+    if (center && (radian > 0 || radian < 0)) {
+        ctx.translate(center.x, center.y);
+        ctx.rotate(-radian);
+        ctx.translate(-center.x, -center.y);
+    }
+}
+export { rotateContext, rotateElement, };

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

@@ -0,0 +1,2 @@
+export declare function limitNum(num: number): number;
+export declare function limitAngle(angle: number): number;

package/dist/esm/lib/value.js

@@ -0,0 +1,7 @@
+export function limitNum(num) {
+    const numStr = num.toFixed(2);
+    return parseFloat(numStr);
+}
+export function limitAngle(angle) {
+    return limitNum(angle % 360);
+}

package/dist/esm/util/filter.d.ts

@@ -0,0 +1 @@
+export declare function filterScript(html: string): string;

package/dist/esm/util/filter.js

@@ -0,0 +1,3 @@
+export function filterScript(html) {
+    return html.replace(/<script[\s\S]*?<\/script>/ig, '');
+}