microboard-temp 0.4.88 → 0.4.90

package/dist/cjs/browser.js

@@ -47836,8 +47836,10 @@ class Card extends BaseItem {
     this.throttledBringToFront = throttle(() => {
       this.board.bringToFront(this);
     }, 1000);
-    this.transformation.subject.subscribe(() => {
-      this.throttledBringToFront();
+    this.transformation.subject.subscribe((_, op) => {
+      if (this.parent === "Board" && op.method === "translateBy" || op.method === "transformMany" && !Object.keys(op.items).length) {
+        this.throttledBringToFront();
+      }
       this.updateMbr();
       this.subject.publish(this);
     });
@@ -47926,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 = () => [];
@@ -48023,6 +48027,9 @@ class Deck extends BaseItem {
   }
   apply(op) {
     super.apply(op);
+    if (op.class === "Deck") {
+      this.isCacheDirty = true;
+    }
     this.subject.publish(this);
   }
   updateMbr() {
@@ -48044,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) {
+      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

@@ -47836,8 +47836,10 @@ class Card extends BaseItem {
     this.throttledBringToFront = throttle(() => {
       this.board.bringToFront(this);
     }, 1000);
-    this.transformation.subject.subscribe(() => {
-      this.throttledBringToFront();
+    this.transformation.subject.subscribe((_, op) => {
+      if (this.parent === "Board" && op.method === "translateBy" || op.method === "transformMany" && !Object.keys(op.items).length) {
+        this.throttledBringToFront();
+      }
       this.updateMbr();
       this.subject.publish(this);
     });
@@ -47926,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 = () => [];
@@ -48023,6 +48027,9 @@ class Deck extends BaseItem {
   }
   apply(op) {
     super.apply(op);
+    if (op.class === "Deck") {
+      this.isCacheDirty = true;
+    }
     this.subject.publish(this);
   }
   updateMbr() {
@@ -48044,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) {
+      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

@@ -50309,8 +50309,10 @@ class Card extends BaseItem {
     this.throttledBringToFront = throttle(() => {
       this.board.bringToFront(this);
     }, 1000);
-    this.transformation.subject.subscribe(() => {
-      this.throttledBringToFront();
+    this.transformation.subject.subscribe((_, op) => {
+      if (this.parent === "Board" && op.method === "translateBy" || op.method === "transformMany" && !Object.keys(op.items).length) {
+        this.throttledBringToFront();
+      }
       this.updateMbr();
       this.subject.publish(this);
     });
@@ -50399,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 = () => [];
@@ -50496,6 +50500,9 @@ class Deck extends BaseItem {
   }
   apply(op) {
     super.apply(op);
+    if (op.class === "Deck") {
+      this.isCacheDirty = true;
+    }
     this.subject.publish(this);
   }
   updateMbr() {
@@ -50517,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) {
+      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

@@ -47685,8 +47685,10 @@ class Card extends BaseItem {
     this.throttledBringToFront = throttle(() => {
       this.board.bringToFront(this);
     }, 1000);
-    this.transformation.subject.subscribe(() => {
-      this.throttledBringToFront();
+    this.transformation.subject.subscribe((_, op) => {
+      if (this.parent === "Board" && op.method === "translateBy" || op.method === "transformMany" && !Object.keys(op.items).length) {
+        this.throttledBringToFront();
+      }
       this.updateMbr();
       this.subject.publish(this);
     });
@@ -47775,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 = () => [];
@@ -47872,6 +47876,9 @@ class Deck extends BaseItem {
   }
   apply(op) {
     super.apply(op);
+    if (op.class === "Deck") {
+      this.isCacheDirty = true;
+    }
     this.subject.publish(this);
   }
   updateMbr() {
@@ -47893,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) {
+      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

@@ -47678,8 +47678,10 @@ class Card extends BaseItem {
     this.throttledBringToFront = throttle(() => {
       this.board.bringToFront(this);
     }, 1000);
-    this.transformation.subject.subscribe(() => {
-      this.throttledBringToFront();
+    this.transformation.subject.subscribe((_, op) => {
+      if (this.parent === "Board" && op.method === "translateBy" || op.method === "transformMany" && !Object.keys(op.items).length) {
+        this.throttledBringToFront();
+      }
       this.updateMbr();
       this.subject.publish(this);
     });
@@ -47768,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 = () => [];
@@ -47865,6 +47869,9 @@ class Deck extends BaseItem {
   }
   apply(op) {
     super.apply(op);
+    if (op.class === "Deck") {
+      this.isCacheDirty = true;
+    }
     this.subject.publish(this);
   }
   updateMbr() {
@@ -47886,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) {
+      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

@@ -50146,8 +50146,10 @@ class Card extends BaseItem {
     this.throttledBringToFront = throttle(() => {
       this.board.bringToFront(this);
     }, 1000);
-    this.transformation.subject.subscribe(() => {
-      this.throttledBringToFront();
+    this.transformation.subject.subscribe((_, op) => {
+      if (this.parent === "Board" && op.method === "translateBy" || op.method === "transformMany" && !Object.keys(op.items).length) {
+        this.throttledBringToFront();
+      }
       this.updateMbr();
       this.subject.publish(this);
     });
@@ -50236,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 = () => [];
@@ -50333,6 +50337,9 @@ class Deck extends BaseItem {
   }
   apply(op) {
     super.apply(op);
+    if (op.class === "Deck") {
+      this.isCacheDirty = true;
+    }
     this.subject.publish(this);
   }
   updateMbr() {
@@ -50354,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) {
+      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.88",
+  "version": "0.4.90",
   "description": "A flexible interactive whiteboard library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",