@idraw/renderer 0.2.0-alpha.26 → 0.3.0-alpha.2

package/esm/index.js

@@ -0,0 +1,136 @@
+var _a, _b, _c;
+import { createUUID, deepClone, Context } from '@idraw/util';
+import { drawContext } from './lib/draw';
+import Loader from './lib/loader';
+import { RendererEvent } from './lib/renderer-event';
+import { _queue, _ctx, _status, _loader, _opts, _freeze, _drawFrame, _retainQueueOneItem } from './names';
+const { requestAnimationFrame } = window;
+var DrawStatus;
+(function (DrawStatus) {
+    DrawStatus["NULL"] = "null";
+    DrawStatus["FREE"] = "free";
+    DrawStatus["DRAWING"] = "drawing";
+    DrawStatus["FREEZE"] = "freeze";
+})(DrawStatus || (DrawStatus = {}));
+export class Renderer extends RendererEvent {
+    constructor(opts) {
+        super();
+        this[_a] = [];
+        this[_b] = null;
+        this[_c] = 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;
+    }
+    [(_a = _queue, _b = _ctx, _c = _status, _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/esm/names.d.ts

@@ -0,0 +1,9 @@
+declare const _queue: unique symbol;
+declare const _ctx: unique symbol;
+declare const _status: unique symbol;
+declare const _loader: unique symbol;
+declare const _opts: unique symbol;
+declare const _freeze: unique symbol;
+declare const _drawFrame: unique symbol;
+declare const _retainQueueOneItem: unique symbol;
+export { _queue, _ctx, _status, _loader, _opts, _freeze, _drawFrame, _retainQueueOneItem };

package/esm/names.js

@@ -0,0 +1,9 @@
+const _queue = Symbol('_queue');
+const _ctx = Symbol('_ctx');
+const _status = Symbol('_status');
+const _loader = Symbol('_loader');
+const _opts = Symbol('_opts');
+const _freeze = Symbol('_freeze');
+const _drawFrame = Symbol('_drawFrame');
+const _retainQueueOneItem = Symbol('_retainQueueOneItem');
+export { _queue, _ctx, _status, _loader, _opts, _freeze, _drawFrame, _retainQueueOneItem };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@idraw/renderer",
-  "version": "0.2.0-alpha.26",
+  "version": "0.3.0-alpha.2",
   "description": "",
   "main": "dist/index.cjs.js",
-  "module": "dist/index.es.js",
+  "module": "dist/index.esm.js",
   "unpkg": "dist/index.global.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -11,7 +11,9 @@
   },
   "files": [
     "dist/*.ts",
-    "dist/*.js"
+    "dist/*.js",
+    "esm/*.ts",
+    "esm/*.js"
   ],
   "repository": {
     "type": "git",
@@ -24,13 +26,13 @@
   "author": "chenshenhai",
   "license": "MIT",
   "devDependencies": {
-    "@idraw/types": "^0.2.0-alpha.26"
+    "@idraw/types": "^0.3.0-alpha.2"
   },
   "dependencies": {
-    "@idraw/util": "^0.2.0-alpha.26"
+    "@idraw/util": "^0.3.0-alpha.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "464b223dbd3d5899a63bc6a0aff46e79d7ba3269"
+  "gitHead": "36f2aa4ef4e834ef329b3e4385b21b849e7f460f"
 }