microboard-temp 0.4.96 → 0.4.97

package/dist/cjs/browser.js

@@ -7064,7 +7064,9 @@ var conf = {
   FORCE_HOTKEYS: "auto",
   debug: false,
   FALLBACK_LNG: "en",
-  cursorsMap
+  cursorsMap,
+  DECK_HORIZONTAL_OFFSET: 2,
+  DECK_VERTICAL_OFFSET: 0
 };
 initDefaultI18N();
 
@@ -47863,6 +47865,9 @@ class Card extends BaseItem {
       this.imageToRender = this.face;
     }
   }
+  getImage() {
+    return this.imageToRender;
+  }
   render(context, left, top) {
     if (this.transformationRenderBlock) {
       return;
@@ -47952,8 +47957,8 @@ class Deck extends BaseItem {
             class: "Transformation",
             method: "translateTo",
             item: [this.id],
-            x: this.left + (this.index?.list().length || 0) * 2,
-            y: this.top
+            x: this.left + (this.index?.list().length || 0) * conf.DECK_HORIZONTAL_OFFSET,
+            y: this.top - (this.index?.list().length || 0) * conf.DECK_VERTICAL_OFFSET
           });
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
@@ -48055,7 +48060,6 @@ class Deck extends BaseItem {
     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();
@@ -48064,9 +48068,12 @@ class Deck extends BaseItem {
     }
   }
   updateCache(context) {
+    const cards = this.index?.list();
+    const topCard = cards[cards.length - 1];
+    const topCardImage = topCard?.getImage();
     const width2 = this.getWidth();
     const height3 = this.getHeight();
-    if (!width2 || !height3) {
+    if (!width2 || !height3 || !topCardImage || !topCardImage.complete) {
       return;
     }
     const tempCanvas = conf.documentFactory.createElement("canvas");
@@ -48076,10 +48083,11 @@ class Deck extends BaseItem {
     if (!tempCtx)
       return;
     const tempContext = { ...context, ctx: tempCtx };
-    this.index?.list().forEach((item, index2) => {
-      item.render(tempContext, index2 * 2, 0);
+    cards.forEach((_, index2) => {
+      topCard.render(tempContext, index2 * conf.DECK_HORIZONTAL_OFFSET, index2 * conf.DECK_VERTICAL_OFFSET);
     });
     this.cachedCanvas = tempCanvas;
+    this.isCacheDirty = false;
   }
 }
 registerItem({

package/dist/cjs/index.js

@@ -7064,7 +7064,9 @@ var conf = {
   FORCE_HOTKEYS: "auto",
   debug: false,
   FALLBACK_LNG: "en",
-  cursorsMap
+  cursorsMap,
+  DECK_HORIZONTAL_OFFSET: 2,
+  DECK_VERTICAL_OFFSET: 0
 };
 initDefaultI18N();
 
@@ -47863,6 +47865,9 @@ class Card extends BaseItem {
       this.imageToRender = this.face;
     }
   }
+  getImage() {
+    return this.imageToRender;
+  }
   render(context, left, top) {
     if (this.transformationRenderBlock) {
       return;
@@ -47952,8 +47957,8 @@ class Deck extends BaseItem {
             class: "Transformation",
             method: "translateTo",
             item: [this.id],
-            x: this.left + (this.index?.list().length || 0) * 2,
-            y: this.top
+            x: this.left + (this.index?.list().length || 0) * conf.DECK_HORIZONTAL_OFFSET,
+            y: this.top - (this.index?.list().length || 0) * conf.DECK_VERTICAL_OFFSET
           });
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
@@ -48055,7 +48060,6 @@ class Deck extends BaseItem {
     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();
@@ -48064,9 +48068,12 @@ class Deck extends BaseItem {
     }
   }
   updateCache(context) {
+    const cards = this.index?.list();
+    const topCard = cards[cards.length - 1];
+    const topCardImage = topCard?.getImage();
     const width2 = this.getWidth();
     const height3 = this.getHeight();
-    if (!width2 || !height3) {
+    if (!width2 || !height3 || !topCardImage || !topCardImage.complete) {
       return;
     }
     const tempCanvas = conf.documentFactory.createElement("canvas");
@@ -48076,10 +48083,11 @@ class Deck extends BaseItem {
     if (!tempCtx)
       return;
     const tempContext = { ...context, ctx: tempCtx };
-    this.index?.list().forEach((item, index2) => {
-      item.render(tempContext, index2 * 2, 0);
+    cards.forEach((_, index2) => {
+      topCard.render(tempContext, index2 * conf.DECK_HORIZONTAL_OFFSET, index2 * conf.DECK_VERTICAL_OFFSET);
     });
     this.cachedCanvas = tempCanvas;
+    this.isCacheDirty = false;
   }
 }
 registerItem({

package/dist/cjs/node.js

@@ -8101,7 +8101,9 @@ var conf = {
   FORCE_HOTKEYS: "auto",
   debug: false,
   FALLBACK_LNG: "en",
-  cursorsMap
+  cursorsMap,
+  DECK_HORIZONTAL_OFFSET: 2,
+  DECK_VERTICAL_OFFSET: 0
 };
 initDefaultI18N();
 
@@ -50336,6 +50338,9 @@ class Card extends BaseItem {
       this.imageToRender = this.face;
     }
   }
+  getImage() {
+    return this.imageToRender;
+  }
   render(context, left, top) {
     if (this.transformationRenderBlock) {
       return;
@@ -50425,8 +50430,8 @@ class Deck extends BaseItem {
             class: "Transformation",
             method: "translateTo",
             item: [this.id],
-            x: this.left + (this.index?.list().length || 0) * 2,
-            y: this.top
+            x: this.left + (this.index?.list().length || 0) * conf.DECK_HORIZONTAL_OFFSET,
+            y: this.top - (this.index?.list().length || 0) * conf.DECK_VERTICAL_OFFSET
           });
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
@@ -50528,7 +50533,6 @@ class Deck extends BaseItem {
     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();
@@ -50537,9 +50541,12 @@ class Deck extends BaseItem {
     }
   }
   updateCache(context) {
+    const cards = this.index?.list();
+    const topCard = cards[cards.length - 1];
+    const topCardImage = topCard?.getImage();
     const width2 = this.getWidth();
     const height3 = this.getHeight();
-    if (!width2 || !height3) {
+    if (!width2 || !height3 || !topCardImage || !topCardImage.complete) {
       return;
     }
     const tempCanvas = conf.documentFactory.createElement("canvas");
@@ -50549,10 +50556,11 @@ class Deck extends BaseItem {
     if (!tempCtx)
       return;
     const tempContext = { ...context, ctx: tempCtx };
-    this.index?.list().forEach((item, index2) => {
-      item.render(tempContext, index2 * 2, 0);
+    cards.forEach((_, index2) => {
+      topCard.render(tempContext, index2 * conf.DECK_HORIZONTAL_OFFSET, index2 * conf.DECK_VERTICAL_OFFSET);
     });
     this.cachedCanvas = tempCanvas;
+    this.isCacheDirty = false;
   }
 }
 registerItem({

package/dist/esm/browser.js

@@ -6904,7 +6904,9 @@ var conf = {
   FORCE_HOTKEYS: "auto",
   debug: false,
   FALLBACK_LNG: "en",
-  cursorsMap
+  cursorsMap,
+  DECK_HORIZONTAL_OFFSET: 2,
+  DECK_VERTICAL_OFFSET: 0
 };
 initDefaultI18N();
 
@@ -47712,6 +47714,9 @@ class Card extends BaseItem {
       this.imageToRender = this.face;
     }
   }
+  getImage() {
+    return this.imageToRender;
+  }
   render(context, left, top) {
     if (this.transformationRenderBlock) {
       return;
@@ -47801,8 +47806,8 @@ class Deck extends BaseItem {
             class: "Transformation",
             method: "translateTo",
             item: [this.id],
-            x: this.left + (this.index?.list().length || 0) * 2,
-            y: this.top
+            x: this.left + (this.index?.list().length || 0) * conf.DECK_HORIZONTAL_OFFSET,
+            y: this.top - (this.index?.list().length || 0) * conf.DECK_VERTICAL_OFFSET
           });
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
@@ -47904,7 +47909,6 @@ class Deck extends BaseItem {
     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();
@@ -47913,9 +47917,12 @@ class Deck extends BaseItem {
     }
   }
   updateCache(context) {
+    const cards = this.index?.list();
+    const topCard = cards[cards.length - 1];
+    const topCardImage = topCard?.getImage();
     const width2 = this.getWidth();
     const height3 = this.getHeight();
-    if (!width2 || !height3) {
+    if (!width2 || !height3 || !topCardImage || !topCardImage.complete) {
       return;
     }
     const tempCanvas = conf.documentFactory.createElement("canvas");
@@ -47925,10 +47932,11 @@ class Deck extends BaseItem {
     if (!tempCtx)
       return;
     const tempContext = { ...context, ctx: tempCtx };
-    this.index?.list().forEach((item, index2) => {
-      item.render(tempContext, index2 * 2, 0);
+    cards.forEach((_, index2) => {
+      topCard.render(tempContext, index2 * conf.DECK_HORIZONTAL_OFFSET, index2 * conf.DECK_VERTICAL_OFFSET);
     });
     this.cachedCanvas = tempCanvas;
+    this.isCacheDirty = false;
   }
 }
 registerItem({

package/dist/esm/index.js

@@ -6897,7 +6897,9 @@ var conf = {
   FORCE_HOTKEYS: "auto",
   debug: false,
   FALLBACK_LNG: "en",
-  cursorsMap
+  cursorsMap,
+  DECK_HORIZONTAL_OFFSET: 2,
+  DECK_VERTICAL_OFFSET: 0
 };
 initDefaultI18N();
 
@@ -47705,6 +47707,9 @@ class Card extends BaseItem {
       this.imageToRender = this.face;
     }
   }
+  getImage() {
+    return this.imageToRender;
+  }
   render(context, left, top) {
     if (this.transformationRenderBlock) {
       return;
@@ -47794,8 +47799,8 @@ class Deck extends BaseItem {
             class: "Transformation",
             method: "translateTo",
             item: [this.id],
-            x: this.left + (this.index?.list().length || 0) * 2,
-            y: this.top
+            x: this.left + (this.index?.list().length || 0) * conf.DECK_HORIZONTAL_OFFSET,
+            y: this.top - (this.index?.list().length || 0) * conf.DECK_VERTICAL_OFFSET
           });
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
@@ -47897,7 +47902,6 @@ class Deck extends BaseItem {
     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();
@@ -47906,9 +47910,12 @@ class Deck extends BaseItem {
     }
   }
   updateCache(context) {
+    const cards = this.index?.list();
+    const topCard = cards[cards.length - 1];
+    const topCardImage = topCard?.getImage();
     const width2 = this.getWidth();
     const height3 = this.getHeight();
-    if (!width2 || !height3) {
+    if (!width2 || !height3 || !topCardImage || !topCardImage.complete) {
       return;
     }
     const tempCanvas = conf.documentFactory.createElement("canvas");
@@ -47918,10 +47925,11 @@ class Deck extends BaseItem {
     if (!tempCtx)
       return;
     const tempContext = { ...context, ctx: tempCtx };
-    this.index?.list().forEach((item, index2) => {
-      item.render(tempContext, index2 * 2, 0);
+    cards.forEach((_, index2) => {
+      topCard.render(tempContext, index2 * conf.DECK_HORIZONTAL_OFFSET, index2 * conf.DECK_VERTICAL_OFFSET);
     });
     this.cachedCanvas = tempCanvas;
+    this.isCacheDirty = false;
   }
 }
 registerItem({

package/dist/esm/node.js

@@ -7681,7 +7681,9 @@ var conf = {
   FORCE_HOTKEYS: "auto",
   debug: false,
   FALLBACK_LNG: "en",
-  cursorsMap
+  cursorsMap,
+  DECK_HORIZONTAL_OFFSET: 2,
+  DECK_VERTICAL_OFFSET: 0
 };
 initDefaultI18N();
 
@@ -50173,6 +50175,9 @@ class Card extends BaseItem {
       this.imageToRender = this.face;
     }
   }
+  getImage() {
+    return this.imageToRender;
+  }
   render(context, left, top) {
     if (this.transformationRenderBlock) {
       return;
@@ -50262,8 +50267,8 @@ class Deck extends BaseItem {
             class: "Transformation",
             method: "translateTo",
             item: [this.id],
-            x: this.left + (this.index?.list().length || 0) * 2,
-            y: this.top
+            x: this.left + (this.index?.list().length || 0) * conf.DECK_HORIZONTAL_OFFSET,
+            y: this.top - (this.index?.list().length || 0) * conf.DECK_VERTICAL_OFFSET
           });
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
@@ -50365,7 +50370,6 @@ class Deck extends BaseItem {
     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();
@@ -50374,9 +50378,12 @@ class Deck extends BaseItem {
     }
   }
   updateCache(context) {
+    const cards = this.index?.list();
+    const topCard = cards[cards.length - 1];
+    const topCardImage = topCard?.getImage();
     const width2 = this.getWidth();
     const height3 = this.getHeight();
-    if (!width2 || !height3) {
+    if (!width2 || !height3 || !topCardImage || !topCardImage.complete) {
       return;
     }
     const tempCanvas = conf.documentFactory.createElement("canvas");
@@ -50386,10 +50393,11 @@ class Deck extends BaseItem {
     if (!tempCtx)
       return;
     const tempContext = { ...context, ctx: tempCtx };
-    this.index?.list().forEach((item, index2) => {
-      item.render(tempContext, index2 * 2, 0);
+    cards.forEach((_, index2) => {
+      topCard.render(tempContext, index2 * conf.DECK_HORIZONTAL_OFFSET, index2 * conf.DECK_VERTICAL_OFFSET);
     });
     this.cachedCanvas = tempCanvas;
+    this.isCacheDirty = false;
   }
 }
 registerItem({

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

@@ -26,6 +26,7 @@ export declare class Card extends BaseItem {
     });
     createImages(): void;
     updateImageToRender(): void;
+    getImage(): HTMLImageElement | null;
     render(context: DrawingContext, left?: number, top?: number): void;
     updateMbr(): void;
     getPath(): Path | Paths;

package/dist/types/Settings.d.ts

@@ -230,6 +230,8 @@ export declare const conf: {
     debug: boolean;
     FALLBACK_LNG: string;
     cursorsMap: Partial<Record<import("./Pointer/Cursor").CursorName, string>>;
+    DECK_HORIZONTAL_OFFSET: number;
+    DECK_VERTICAL_OFFSET: number;
 };
 export type Settings = typeof conf;
 export {};

package/package.json

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