@idraw/renderer 0.3.0 → 0.4.0-alpha.2

package/dist/esm/draw/text.js

@@ -0,0 +1,113 @@
+import { rotateElement } from '@idraw/util';
+import { is, isColorStr } from '@idraw/util';
+import { drawBox } from './base';
+export function drawText(ctx, elem, opts) {
+    const { calculator, viewScaleInfo, viewSizeInfo } = opts;
+    const { x, y, w, h, angle } = calculator.elementSize(elem, viewScaleInfo, viewSizeInfo);
+    const viewElem = Object.assign(Object.assign({}, elem), { x, y, w, h, angle });
+    rotateElement(ctx, { x, y, w, h, angle }, () => {
+        drawBox(ctx, viewElem, {
+            originElem: elem,
+            calcElemSize: { x, y, w, h, angle },
+            viewScaleInfo,
+            viewSizeInfo,
+            renderContent: () => {
+                const detail = Object.assign({
+                    fontSize: 12,
+                    fontFamily: 'sans-serif',
+                    textAlign: 'center'
+                }, elem.detail);
+                const fontSize = detail.fontSize * viewScaleInfo.scale;
+                const lineHeight = detail.lineHeight ? detail.lineHeight * viewScaleInfo.scale : fontSize;
+                ctx.fillStyle = elem.detail.color;
+                ctx.textBaseline = 'top';
+                ctx.$setFont({
+                    fontWeight: detail.fontWeight,
+                    fontSize: fontSize,
+                    fontFamily: detail.fontFamily
+                });
+                const detailText = detail.text.replace(/\r\n/gi, '\n');
+                const fontHeight = lineHeight;
+                const detailTextList = detailText.split('\n');
+                const lines = [];
+                let lineNum = 0;
+                detailTextList.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.$doPixelRatio(w)) {
+                                lineText += tempText[i] || '';
+                            }
+                            else {
+                                lines.push({
+                                    text: lineText,
+                                    width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
+                                });
+                                lineText = tempText[i] || '';
+                                lineNum++;
+                            }
+                            if ((lineNum + 1) * fontHeight > h) {
+                                break;
+                            }
+                            if (tempText.length - 1 === i) {
+                                if ((lineNum + 1) * fontHeight < h) {
+                                    lines.push({
+                                        text: lineText,
+                                        width: ctx.$undoPixelRatio(ctx.measureText(lineText).width)
+                                    });
+                                    if (idx < detailTextList.length - 1) {
+                                        lineNum++;
+                                    }
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                    else {
+                        lines.push({
+                            text: '',
+                            width: 0
+                        });
+                    }
+                });
+                let startY = 0;
+                if (lines.length * fontHeight < h) {
+                    if (elem.detail.verticalAlign === 'top') {
+                        startY = 0;
+                    }
+                    else if (elem.detail.verticalAlign === 'bottom') {
+                        startY += h - lines.length * fontHeight;
+                    }
+                    else {
+                        startY += (h - lines.length * fontHeight) / 2;
+                    }
+                }
+                {
+                    const _y = y + startY;
+                    if (detail.textShadowColor !== undefined && isColorStr(detail.textShadowColor)) {
+                        ctx.shadowColor = detail.textShadowColor;
+                    }
+                    if (detail.textShadowOffsetX !== undefined && is.number(detail.textShadowOffsetX)) {
+                        ctx.shadowOffsetX = detail.textShadowOffsetX;
+                    }
+                    if (detail.textShadowOffsetY !== undefined && is.number(detail.textShadowOffsetY)) {
+                        ctx.shadowOffsetY = detail.textShadowOffsetY;
+                    }
+                    if (detail.textShadowBlur !== undefined && is.number(detail.textShadowBlur)) {
+                        ctx.shadowBlur = detail.textShadowBlur;
+                    }
+                    lines.forEach((line, i) => {
+                        let _x = x;
+                        if (detail.textAlign === 'center') {
+                            _x = x + (w - line.width) / 2;
+                        }
+                        else if (detail.textAlign === 'right') {
+                            _x = x + (w - line.width);
+                        }
+                        ctx.fillText(line.text, _x, _y + fontHeight * i);
+                    });
+                }
+            }
+        });
+    });
+}

package/dist/esm/index.d.ts

@@ -1,26 +1,11 @@
-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;
+import { EventEmitter } from '@idraw/util';
+import type { Data, BoardRenderer, RendererOptions, RendererEventMap, RendererDrawOptions } from '@idraw/types';
+export declare class Renderer extends EventEmitter<RendererEventMap> implements BoardRenderer {
+    private _opts;
     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;
+    constructor(opts: RendererOptions);
+    private _init;
+    updateOptions(opts: RendererOptions): void;
+    drawData(data: Data, opts: RendererDrawOptions): void;
+    scale(num: number): void;
 }
-export {};

package/dist/esm/index.js

@@ -1,137 +1,59 @@
-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 {
+import { EventEmitter } from '@idraw/util';
+import { drawElementList } from './draw/index';
+import { Loader } from './loader';
+export class Renderer extends EventEmitter {
     constructor(opts) {
         super();
-        this._queue = [];
-        this._ctx = null;
-        this._status = DrawStatus.NULL;
+        this._loader = new Loader();
         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._init();
+    }
+    _init() {
+        const { _loader: loader } = this;
+        loader.on('load', (e) => {
+            this.trigger('load', e);
         });
-        this._loader.on('complete', () => {
-            this.trigger('loadComplete', { t: Date.now() });
+        loader.on('error', () => {
         });
     }
-    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, {
+    updateOptions(opts) {
+        this._opts = opts;
+    }
+    drawData(data, opts) {
+        const { _loader: loader } = this;
+        const { calculator } = this._opts;
+        const { viewContext } = this._opts.viewContent;
+        viewContext.clearRect(0, 0, viewContext.canvas.width, viewContext.canvas.height);
+        const parentElementSize = {
+            x: 0,
+            y: 0,
+            w: opts.viewSizeInfo.width,
+            h: opts.viewSizeInfo.height
+        };
+        drawElementList(viewContext, data, Object.assign({ loader,
+            calculator,
+            parentElementSize, elementAssets: data.assets }, opts));
+    }
+    scale(num) {
+        const { sharer } = this._opts;
+        const { data, offsetTop, offsetBottom, offsetLeft, offsetRight, width, height, contextHeight, contextWidth, devicePixelRatio } = sharer.getActiveStoreSnapshot();
+        if (data) {
+            this.drawData(data, {
+                viewScaleInfo: {
+                    scale: num,
+                    offsetTop,
+                    offsetBottom,
+                    offsetLeft,
+                    offsetRight
+                },
+                viewSizeInfo: {
                     width,
                     height,
-                    contextWidth: contextWidth || width,
-                    contextHeight: contextHeight || height,
+                    contextHeight,
+                    contextWidth,
                     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/loader.d.ts

@@ -0,0 +1,17 @@
+import type { RendererLoader, LoaderEventMap, LoadContent, LoadElementType, Element, ElementAssets } from '@idraw/types';
+import { EventEmitter } from '@idraw/util';
+export declare class Loader extends EventEmitter<LoaderEventMap> implements RendererLoader {
+    private _loadFuncMap;
+    private _currentLoadItemMap;
+    private _storageLoadItemMap;
+    constructor();
+    private _registerLoadFunc;
+    private _getLoadElementSource;
+    private _createLoadItem;
+    private _emitLoad;
+    private _emitError;
+    private _loadResource;
+    private _isExistingErrorStorage;
+    load(element: Element<LoadElementType>, assets: ElementAssets): void;
+    getContent(uuid: string): LoadContent | null;
+}

package/dist/esm/loader.js

@@ -0,0 +1,151 @@
+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, loadHTML, loadSVG, EventEmitter, deepClone } from '@idraw/util';
+const supportElementTypes = ['image', 'svg', 'html'];
+export class Loader extends EventEmitter {
+    constructor() {
+        super();
+        this._loadFuncMap = {};
+        this._currentLoadItemMap = {};
+        this._storageLoadItemMap = {};
+        this._registerLoadFunc('image', (elem, assets) => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const src = ((_a = assets[elem.detail.src]) === null || _a === void 0 ? void 0 : _a.value) || elem.detail.src;
+            const content = yield loadImage(src);
+            return {
+                uuid: elem.uuid,
+                lastModified: Date.now(),
+                content
+            };
+        }));
+        this._registerLoadFunc('html', (elem, assets) => __awaiter(this, void 0, void 0, function* () {
+            var _b;
+            const html = ((_b = assets[elem.detail.html]) === null || _b === void 0 ? void 0 : _b.value) || elem.detail.html;
+            const content = yield loadHTML(html, {
+                width: elem.detail.width || elem.w,
+                height: elem.detail.height || elem.h
+            });
+            return {
+                uuid: elem.uuid,
+                lastModified: Date.now(),
+                content
+            };
+        }));
+        this._registerLoadFunc('svg', (elem, assets) => __awaiter(this, void 0, void 0, function* () {
+            var _c;
+            const svg = ((_c = assets[elem.detail.svg]) === null || _c === void 0 ? void 0 : _c.value) || elem.detail.svg;
+            const content = yield loadSVG(svg);
+            return {
+                uuid: elem.uuid,
+                lastModified: Date.now(),
+                content
+            };
+        }));
+    }
+    _registerLoadFunc(type, func) {
+        this._loadFuncMap[type] = func;
+    }
+    _getLoadElementSource(element) {
+        var _a, _b, _c;
+        let source = null;
+        if (element.type === 'image') {
+            source = ((_a = element === null || element === void 0 ? void 0 : element.detail) === null || _a === void 0 ? void 0 : _a.src) || null;
+        }
+        else if (element.type === 'svg') {
+            source = ((_b = element === null || element === void 0 ? void 0 : element.detail) === null || _b === void 0 ? void 0 : _b.svg) || null;
+        }
+        else if (element.type === 'html') {
+            source = ((_c = element === null || element === void 0 ? void 0 : element.detail) === null || _c === void 0 ? void 0 : _c.html) || null;
+        }
+        return source;
+    }
+    _createLoadItem(element) {
+        return {
+            element,
+            status: 'null',
+            content: null,
+            error: null,
+            startTime: -1,
+            endTime: -1,
+            source: this._getLoadElementSource(element)
+        };
+    }
+    _emitLoad(item) {
+        const uuid = item.element.uuid;
+        const storageItem = this._storageLoadItemMap[uuid];
+        if (storageItem) {
+            if (storageItem.startTime < item.startTime) {
+                this._storageLoadItemMap[uuid] = item;
+                this.trigger('load', Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
+            }
+        }
+        else {
+            this._storageLoadItemMap[uuid] = item;
+            this.trigger('load', Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
+        }
+    }
+    _emitError(item) {
+        const uuid = item.element.uuid;
+        const storageItem = this._storageLoadItemMap[uuid];
+        if (storageItem) {
+            if (storageItem.startTime < item.startTime) {
+                this._storageLoadItemMap[uuid] = item;
+                this.trigger('error', Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
+            }
+        }
+        else {
+            this._storageLoadItemMap[uuid] = item;
+            this.trigger('error', Object.assign(Object.assign({}, item), { countTime: item.endTime - item.startTime }));
+        }
+    }
+    _loadResource(element, assets) {
+        const item = this._createLoadItem(element);
+        this._currentLoadItemMap[element.uuid] = item;
+        const loadFunc = this._loadFuncMap[element.type];
+        if (typeof loadFunc === 'function') {
+            item.startTime = Date.now();
+            loadFunc(element, assets)
+                .then((result) => {
+                item.content = result.content;
+                item.endTime = Date.now();
+                item.status = 'load';
+                this._emitLoad(item);
+            })
+                .catch((err) => {
+                console.warn(`Load element source "${item.source}" fail`, err, element);
+                item.endTime = Date.now();
+                item.status = 'error';
+                item.error = err;
+                this._emitError(item);
+            });
+        }
+    }
+    _isExistingErrorStorage(element) {
+        var _a;
+        const existItem = (_a = this._currentLoadItemMap) === null || _a === void 0 ? void 0 : _a[element === null || element === void 0 ? void 0 : element.uuid];
+        if (existItem && existItem.status === 'error' && existItem.source && existItem.source === this._getLoadElementSource(element)) {
+            return true;
+        }
+        return false;
+    }
+    load(element, assets) {
+        if (this._isExistingErrorStorage(element)) {
+            return;
+        }
+        if (supportElementTypes.includes(element.type)) {
+            const elem = deepClone(element);
+            this._loadResource(elem, assets);
+        }
+    }
+    getContent(uuid) {
+        var _a, _b;
+        return ((_b = (_a = this._storageLoadItemMap) === null || _a === void 0 ? void 0 : _a[uuid]) === null || _b === void 0 ? void 0 : _b.content) || null;
+    }
+}