microboard-temp 0.4.89 → 0.4.91

package/dist/cjs/browser.js

@@ -47928,6 +47928,8 @@ var defaultDeckData = {
 class Deck extends BaseItem {
   subject = new Subject;
   shouldUseCustomRender = false;
+  cachedCanvas = null;
+  isCacheDirty = true;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -48025,6 +48027,9 @@ class Deck extends BaseItem {
   }
   apply(op) {
     super.apply(op);
+    if (op.class === "Deck") {
+      this.isCacheDirty = true;
+    }
     this.subject.publish(this);
   }
   updateMbr() {
@@ -48046,7 +48051,27 @@ class Deck extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
-    super.render(context);
+    const ctx = context.ctx;
+    if (this.isCacheDirty || !this.cachedCanvas) {
+      this.updateCache(context);
+      this.isCacheDirty = false;
+    }
+    if (this.cachedCanvas && this.cachedCanvas.width && this.cachedCanvas.height) {
+      ctx.save();
+      ctx.drawImage(this.cachedCanvas, this.left, this.top);
+      ctx.restore();
+    }
+  }
+  updateCache(context) {
+    const tempCanvas = document.createElement("canvas");
+    tempCanvas.width = this.getWidth();
+    tempCanvas.height = this.getHeight();
+    const tempCtx = tempCanvas.getContext("2d");
+    if (!tempCtx)
+      return;
+    const tempContext = { ...context, ctx: tempCtx };
+    this.index?.render(tempContext);
+    this.cachedCanvas = tempCanvas;
   }
 }
 registerItem({

package/dist/cjs/index.js

@@ -47928,6 +47928,8 @@ var defaultDeckData = {
 class Deck extends BaseItem {
   subject = new Subject;
   shouldUseCustomRender = false;
+  cachedCanvas = null;
+  isCacheDirty = true;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -48025,6 +48027,9 @@ class Deck extends BaseItem {
   }
   apply(op) {
     super.apply(op);
+    if (op.class === "Deck") {
+      this.isCacheDirty = true;
+    }
     this.subject.publish(this);
   }
   updateMbr() {
@@ -48046,7 +48051,27 @@ class Deck extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
-    super.render(context);
+    const ctx = context.ctx;
+    if (this.isCacheDirty || !this.cachedCanvas) {
+      this.updateCache(context);
+      this.isCacheDirty = false;
+    }
+    if (this.cachedCanvas && this.cachedCanvas.width && this.cachedCanvas.height) {
+      ctx.save();
+      ctx.drawImage(this.cachedCanvas, this.left, this.top);
+      ctx.restore();
+    }
+  }
+  updateCache(context) {
+    const tempCanvas = document.createElement("canvas");
+    tempCanvas.width = this.getWidth();
+    tempCanvas.height = this.getHeight();
+    const tempCtx = tempCanvas.getContext("2d");
+    if (!tempCtx)
+      return;
+    const tempContext = { ...context, ctx: tempCtx };
+    this.index?.render(tempContext);
+    this.cachedCanvas = tempCanvas;
   }
 }
 registerItem({

package/dist/cjs/node.js

@@ -50401,6 +50401,8 @@ var defaultDeckData = {
 class Deck extends BaseItem {
   subject = new Subject;
   shouldUseCustomRender = false;
+  cachedCanvas = null;
+  isCacheDirty = true;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -50498,6 +50500,9 @@ class Deck extends BaseItem {
   }
   apply(op) {
     super.apply(op);
+    if (op.class === "Deck") {
+      this.isCacheDirty = true;
+    }
     this.subject.publish(this);
   }
   updateMbr() {
@@ -50519,7 +50524,27 @@ class Deck extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
-    super.render(context);
+    const ctx = context.ctx;
+    if (this.isCacheDirty || !this.cachedCanvas) {
+      this.updateCache(context);
+      this.isCacheDirty = false;
+    }
+    if (this.cachedCanvas && this.cachedCanvas.width && this.cachedCanvas.height) {
+      ctx.save();
+      ctx.drawImage(this.cachedCanvas, this.left, this.top);
+      ctx.restore();
+    }
+  }
+  updateCache(context) {
+    const tempCanvas = document.createElement("canvas");
+    tempCanvas.width = this.getWidth();
+    tempCanvas.height = this.getHeight();
+    const tempCtx = tempCanvas.getContext("2d");
+    if (!tempCtx)
+      return;
+    const tempContext = { ...context, ctx: tempCtx };
+    this.index?.render(tempContext);
+    this.cachedCanvas = tempCanvas;
   }
 }
 registerItem({

package/dist/esm/browser.js

@@ -47777,6 +47777,8 @@ var defaultDeckData = {
 class Deck extends BaseItem {
   subject = new Subject;
   shouldUseCustomRender = false;
+  cachedCanvas = null;
+  isCacheDirty = true;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -47874,6 +47876,9 @@ class Deck extends BaseItem {
   }
   apply(op) {
     super.apply(op);
+    if (op.class === "Deck") {
+      this.isCacheDirty = true;
+    }
     this.subject.publish(this);
   }
   updateMbr() {
@@ -47895,7 +47900,27 @@ class Deck extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
-    super.render(context);
+    const ctx = context.ctx;
+    if (this.isCacheDirty || !this.cachedCanvas) {
+      this.updateCache(context);
+      this.isCacheDirty = false;
+    }
+    if (this.cachedCanvas && this.cachedCanvas.width && this.cachedCanvas.height) {
+      ctx.save();
+      ctx.drawImage(this.cachedCanvas, this.left, this.top);
+      ctx.restore();
+    }
+  }
+  updateCache(context) {
+    const tempCanvas = document.createElement("canvas");
+    tempCanvas.width = this.getWidth();
+    tempCanvas.height = this.getHeight();
+    const tempCtx = tempCanvas.getContext("2d");
+    if (!tempCtx)
+      return;
+    const tempContext = { ...context, ctx: tempCtx };
+    this.index?.render(tempContext);
+    this.cachedCanvas = tempCanvas;
   }
 }
 registerItem({

package/dist/esm/index.js

@@ -47770,6 +47770,8 @@ var defaultDeckData = {
 class Deck extends BaseItem {
   subject = new Subject;
   shouldUseCustomRender = false;
+  cachedCanvas = null;
+  isCacheDirty = true;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -47867,6 +47869,9 @@ class Deck extends BaseItem {
   }
   apply(op) {
     super.apply(op);
+    if (op.class === "Deck") {
+      this.isCacheDirty = true;
+    }
     this.subject.publish(this);
   }
   updateMbr() {
@@ -47888,7 +47893,27 @@ class Deck extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
-    super.render(context);
+    const ctx = context.ctx;
+    if (this.isCacheDirty || !this.cachedCanvas) {
+      this.updateCache(context);
+      this.isCacheDirty = false;
+    }
+    if (this.cachedCanvas && this.cachedCanvas.width && this.cachedCanvas.height) {
+      ctx.save();
+      ctx.drawImage(this.cachedCanvas, this.left, this.top);
+      ctx.restore();
+    }
+  }
+  updateCache(context) {
+    const tempCanvas = document.createElement("canvas");
+    tempCanvas.width = this.getWidth();
+    tempCanvas.height = this.getHeight();
+    const tempCtx = tempCanvas.getContext("2d");
+    if (!tempCtx)
+      return;
+    const tempContext = { ...context, ctx: tempCtx };
+    this.index?.render(tempContext);
+    this.cachedCanvas = tempCanvas;
   }
 }
 registerItem({

package/dist/esm/node.js

@@ -50238,6 +50238,8 @@ var defaultDeckData = {
 class Deck extends BaseItem {
   subject = new Subject;
   shouldUseCustomRender = false;
+  cachedCanvas = null;
+  isCacheDirty = true;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -50335,6 +50337,9 @@ class Deck extends BaseItem {
   }
   apply(op) {
     super.apply(op);
+    if (op.class === "Deck") {
+      this.isCacheDirty = true;
+    }
     this.subject.publish(this);
   }
   updateMbr() {
@@ -50356,7 +50361,27 @@ class Deck extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
-    super.render(context);
+    const ctx = context.ctx;
+    if (this.isCacheDirty || !this.cachedCanvas) {
+      this.updateCache(context);
+      this.isCacheDirty = false;
+    }
+    if (this.cachedCanvas && this.cachedCanvas.width && this.cachedCanvas.height) {
+      ctx.save();
+      ctx.drawImage(this.cachedCanvas, this.left, this.top);
+      ctx.restore();
+    }
+  }
+  updateCache(context) {
+    const tempCanvas = document.createElement("canvas");
+    tempCanvas.width = this.getWidth();
+    tempCanvas.height = this.getHeight();
+    const tempCtx = tempCanvas.getContext("2d");
+    if (!tempCtx)
+      return;
+    const tempContext = { ...context, ctx: tempCtx };
+    this.index?.render(tempContext);
+    this.cachedCanvas = tempCanvas;
   }
 }
 registerItem({

package/dist/types/Items/Examples/CardGame/Deck/Deck.d.ts

@@ -8,6 +8,8 @@ export declare const defaultDeckData: BaseItemData;
 export declare class Deck extends BaseItem {
     readonly subject: Subject<Deck>;
     shouldUseCustomRender: boolean;
+    private cachedCanvas;
+    private isCacheDirty;
     constructor(board: Board, id?: string);
     applyAddChildren(childIds: string[]): void;
     applyRemoveChildren(childIds: string[]): void;
@@ -20,4 +22,5 @@ export declare class Deck extends BaseItem {
     updateMbr(): void;
     deserialize(data: SerializedItemData): this;
     render(context: DrawingContext): void;
+    private updateCache;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "microboard-temp",
-  "version": "0.4.89",
+  "version": "0.4.91",
   "description": "A flexible interactive whiteboard library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",