automatic placeholder generation

lib/custom-element/api/base-api.js

@@ -32,10 +32,19 @@ class BaseAPI {
   /**
    *
    */
-  constructor(uid, width = 200, height = 200) {
-    this.element = window[uid];
-    delete window[uid];
-    this.canvas = document.createElement(`canvas`);
+  constructor(uid, width = 200, height = 200, canvasBuildFunction) {
+    if (uid) {
+      this.element = window[uid];
+      delete window[uid];
+    }
+    if (canvasBuildFunction) {
+      const { canvas, ctx } = canvasBuildFunction(width, height);
+      this.canvas = canvas;
+      this.ctx = enhanceContext(ctx);
+      this.preSized = true;
+    } else {
+      this.canvas = document.createElement(`canvas`);
+    }
     this.addListeners();
     this.setSize(width, height);
     this.setup();
@@ -47,8 +56,10 @@ class BaseAPI {
    */
   addListeners() {
     const canvas = this.canvas;
-    const element = this.element;
-    element.setGraphic(this);
+
+    if (this.element) {
+      this.element.setGraphic(this);
+    }
 
     this.cursor = {};
 
@@ -185,10 +196,12 @@ class BaseAPI {
   setSize(w, h) {
     this.width = w || this.width;
     this.height = h || this.height;
-    this.canvas.width = this.width;
-    this.canvas.style.width = `${this.width}px`;
-    this.canvas.height = this.height;
-    this.ctx = enhanceContext(this.canvas.getContext(`2d`));
+    if (!this.preSized) {
+      this.canvas.width = this.width;
+      this.canvas.style.width = `${this.width}px`;
+      this.canvas.height = this.height;
+      this.ctx = enhanceContext(this.canvas.getContext(`2d`));
+    }
   }
 
   /**
@@ -223,19 +236,21 @@ class BaseAPI {
 function enhanceContext(ctx) {
   const styles = [];
   ctx.cacheStyle = () => {
+    let m = ctx.currentTransform || ctx.getTransform();
     let e = {
       strokeStyle: ctx.strokeStyle,
       fillStyle: ctx.fillStyle,
       lineWidth: ctx.lineWidth,
-      transform: ctx.getTransform(),
+      transform: [m.a, m.b, m.c, m.d, m.e, m.f],
     };
     styles.push(e);
   };
   ctx.restoreStyle = () => {
     const v = styles.pop();
     Object.keys(v).forEach((k) => {
-      if (k !== `transform`) ctx[k] = v[k];
-      else ctx.setTransform(v[k]);
+      let val = v[k];
+      if (k !== `transform`) ctx[k] = val;
+      else ctx.setTransform(val[0], val[1], val[2], val[3], val[4], val[5]);
     });
   };
   return ctx;