microboard-temp 0.4.103 → 0.4.104

package/dist/cjs/browser.js

@@ -7066,7 +7066,8 @@ var conf = {
   FALLBACK_LNG: "en",
   cursorsMap,
   DECK_HORIZONTAL_OFFSET: 2,
-  DECK_VERTICAL_OFFSET: 0
+  DECK_VERTICAL_OFFSET: 0,
+  CARD_DIMENSIONS: { width: 250, height: 400 }
 };
 initDefaultI18N();
 
@@ -21490,6 +21491,7 @@ class BaseItem extends Mbr {
   shouldUseRelativeAlignment = true;
   enableResize = true;
   itemType = "";
+  children = [];
   constructor(board, id = "", defaultItemData, isGroupItem) {
     super();
     this.defaultItemData = defaultItemData;
@@ -21507,6 +21509,9 @@ class BaseItem extends Mbr {
     this.linkTo = new LinkTo(this.id, board.events);
     this.transformation = new Transformation(this.id, board.events);
   }
+  updateChildrenIds() {
+    this.children = this.index?.items.listAll().map((item) => item.getId()) || [];
+  }
   getId() {
     return this.id;
   }
@@ -21592,6 +21597,7 @@ class BaseItem extends Mbr {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -21609,6 +21615,7 @@ class BaseItem extends Mbr {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -47824,7 +47831,6 @@ var defaultCardData = {
   faceUrl: "",
   backsideUrl: ""
 };
-var CARD_DIMENSIONS = { width: 250, height: 400 };
 
 class Card extends BaseItem {
   subject = new Subject;
@@ -47885,7 +47891,7 @@ class Card extends BaseItem {
     const ctx = context.ctx;
     if (this.imageToRender && this.imageToRender.complete) {
       ctx.save();
-      ctx.drawImage(this.imageToRender, typeof left === "number" ? left : this.left, typeof top === "number" ? top : this.top, CARD_DIMENSIONS.width, CARD_DIMENSIONS.height);
+      ctx.drawImage(this.imageToRender, typeof left === "number" ? left : this.left, typeof top === "number" ? top : this.top, conf.CARD_DIMENSIONS.width, conf.CARD_DIMENSIONS.height);
       ctx.restore();
     }
   }
@@ -47893,8 +47899,8 @@ class Card extends BaseItem {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     this.left = translateX;
     this.top = translateY;
-    this.right = this.left + CARD_DIMENSIONS.width * scaleX;
-    this.bottom = this.top + CARD_DIMENSIONS.height * scaleY;
+    this.right = this.left + conf.CARD_DIMENSIONS.width * scaleX;
+    this.bottom = this.top + conf.CARD_DIMENSIONS.height * scaleY;
   }
   getPath() {
     return new Path(this.getMbr().getLines());
@@ -47945,6 +47951,7 @@ class Deck extends BaseItem {
   cachedCanvas = null;
   isCacheDirty = true;
   enableResize = false;
+  path = new Path;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -47978,6 +47985,7 @@ class Deck extends BaseItem {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -47996,6 +48004,7 @@ class Deck extends BaseItem {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -48045,14 +48054,18 @@ class Deck extends BaseItem {
   updateMbr() {
     const { translateX, translateY } = this.transformation.matrix;
     const items = this.index.list();
-    const itemsMbr = items[0]?.getMbr().combine(items.slice(1).map((item) => item.getMbr()));
+    const itemsMbr = items[0].getMbr().combine(items.slice(1).map((item) => item.getMbr()));
     this.left = translateX;
     this.top = translateY;
-    this.right = translateX + (itemsMbr?.getWidth() || 0);
-    this.bottom = translateY + (itemsMbr?.getHeight() || 0);
+    this.right = translateX + (itemsMbr?.getWidth() || conf.CARD_DIMENSIONS.width + conf.DECK_HORIZONTAL_OFFSET * ((this.children.length || 1) - 1));
+    this.bottom = translateY + (itemsMbr?.getHeight() || conf.CARD_DIMENSIONS.height - conf.DECK_VERTICAL_OFFSET * ((this.children.length || 1) - 1));
+    this.path = new Path(this.getMbr().getLines(), true, "#FFFFFF");
   }
   deserialize(data) {
     super.deserialize(data);
+    if (data.children) {
+      this.children = data.children;
+    }
     this.updateMbr();
     this.subject.publish(this);
     return this;
@@ -48064,6 +48077,7 @@ class Deck extends BaseItem {
     const ctx = context.ctx;
     if (this.isCacheDirty || !this.cachedCanvas) {
       this.updateCache(context);
+      this.path.render(context);
     }
     if (this.cachedCanvas && this.cachedCanvas.width && this.cachedCanvas.height) {
       ctx.save();

package/dist/cjs/index.js

@@ -7066,7 +7066,8 @@ var conf = {
   FALLBACK_LNG: "en",
   cursorsMap,
   DECK_HORIZONTAL_OFFSET: 2,
-  DECK_VERTICAL_OFFSET: 0
+  DECK_VERTICAL_OFFSET: 0,
+  CARD_DIMENSIONS: { width: 250, height: 400 }
 };
 initDefaultI18N();
 
@@ -21490,6 +21491,7 @@ class BaseItem extends Mbr {
   shouldUseRelativeAlignment = true;
   enableResize = true;
   itemType = "";
+  children = [];
   constructor(board, id = "", defaultItemData, isGroupItem) {
     super();
     this.defaultItemData = defaultItemData;
@@ -21507,6 +21509,9 @@ class BaseItem extends Mbr {
     this.linkTo = new LinkTo(this.id, board.events);
     this.transformation = new Transformation(this.id, board.events);
   }
+  updateChildrenIds() {
+    this.children = this.index?.items.listAll().map((item) => item.getId()) || [];
+  }
   getId() {
     return this.id;
   }
@@ -21592,6 +21597,7 @@ class BaseItem extends Mbr {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -21609,6 +21615,7 @@ class BaseItem extends Mbr {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -47824,7 +47831,6 @@ var defaultCardData = {
   faceUrl: "",
   backsideUrl: ""
 };
-var CARD_DIMENSIONS = { width: 250, height: 400 };
 
 class Card extends BaseItem {
   subject = new Subject;
@@ -47885,7 +47891,7 @@ class Card extends BaseItem {
     const ctx = context.ctx;
     if (this.imageToRender && this.imageToRender.complete) {
       ctx.save();
-      ctx.drawImage(this.imageToRender, typeof left === "number" ? left : this.left, typeof top === "number" ? top : this.top, CARD_DIMENSIONS.width, CARD_DIMENSIONS.height);
+      ctx.drawImage(this.imageToRender, typeof left === "number" ? left : this.left, typeof top === "number" ? top : this.top, conf.CARD_DIMENSIONS.width, conf.CARD_DIMENSIONS.height);
       ctx.restore();
     }
   }
@@ -47893,8 +47899,8 @@ class Card extends BaseItem {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     this.left = translateX;
     this.top = translateY;
-    this.right = this.left + CARD_DIMENSIONS.width * scaleX;
-    this.bottom = this.top + CARD_DIMENSIONS.height * scaleY;
+    this.right = this.left + conf.CARD_DIMENSIONS.width * scaleX;
+    this.bottom = this.top + conf.CARD_DIMENSIONS.height * scaleY;
   }
   getPath() {
     return new Path(this.getMbr().getLines());
@@ -47945,6 +47951,7 @@ class Deck extends BaseItem {
   cachedCanvas = null;
   isCacheDirty = true;
   enableResize = false;
+  path = new Path;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -47978,6 +47985,7 @@ class Deck extends BaseItem {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -47996,6 +48004,7 @@ class Deck extends BaseItem {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -48045,14 +48054,18 @@ class Deck extends BaseItem {
   updateMbr() {
     const { translateX, translateY } = this.transformation.matrix;
     const items = this.index.list();
-    const itemsMbr = items[0]?.getMbr().combine(items.slice(1).map((item) => item.getMbr()));
+    const itemsMbr = items[0].getMbr().combine(items.slice(1).map((item) => item.getMbr()));
     this.left = translateX;
     this.top = translateY;
-    this.right = translateX + (itemsMbr?.getWidth() || 0);
-    this.bottom = translateY + (itemsMbr?.getHeight() || 0);
+    this.right = translateX + (itemsMbr?.getWidth() || conf.CARD_DIMENSIONS.width + conf.DECK_HORIZONTAL_OFFSET * ((this.children.length || 1) - 1));
+    this.bottom = translateY + (itemsMbr?.getHeight() || conf.CARD_DIMENSIONS.height - conf.DECK_VERTICAL_OFFSET * ((this.children.length || 1) - 1));
+    this.path = new Path(this.getMbr().getLines(), true, "#FFFFFF");
   }
   deserialize(data) {
     super.deserialize(data);
+    if (data.children) {
+      this.children = data.children;
+    }
     this.updateMbr();
     this.subject.publish(this);
     return this;
@@ -48064,6 +48077,7 @@ class Deck extends BaseItem {
     const ctx = context.ctx;
     if (this.isCacheDirty || !this.cachedCanvas) {
       this.updateCache(context);
+      this.path.render(context);
     }
     if (this.cachedCanvas && this.cachedCanvas.width && this.cachedCanvas.height) {
       ctx.save();

package/dist/cjs/node.js

@@ -8103,7 +8103,8 @@ var conf = {
   FALLBACK_LNG: "en",
   cursorsMap,
   DECK_HORIZONTAL_OFFSET: 2,
-  DECK_VERTICAL_OFFSET: 0
+  DECK_VERTICAL_OFFSET: 0,
+  CARD_DIMENSIONS: { width: 250, height: 400 }
 };
 initDefaultI18N();
 
@@ -23962,6 +23963,7 @@ class BaseItem extends Mbr {
   shouldUseRelativeAlignment = true;
   enableResize = true;
   itemType = "";
+  children = [];
   constructor(board, id = "", defaultItemData, isGroupItem) {
     super();
     this.defaultItemData = defaultItemData;
@@ -23979,6 +23981,9 @@ class BaseItem extends Mbr {
     this.linkTo = new LinkTo(this.id, board.events);
     this.transformation = new Transformation(this.id, board.events);
   }
+  updateChildrenIds() {
+    this.children = this.index?.items.listAll().map((item) => item.getId()) || [];
+  }
   getId() {
     return this.id;
   }
@@ -24064,6 +24069,7 @@ class BaseItem extends Mbr {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -24081,6 +24087,7 @@ class BaseItem extends Mbr {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -50297,7 +50304,6 @@ var defaultCardData = {
   faceUrl: "",
   backsideUrl: ""
 };
-var CARD_DIMENSIONS = { width: 250, height: 400 };
 
 class Card extends BaseItem {
   subject = new Subject;
@@ -50358,7 +50364,7 @@ class Card extends BaseItem {
     const ctx = context.ctx;
     if (this.imageToRender && this.imageToRender.complete) {
       ctx.save();
-      ctx.drawImage(this.imageToRender, typeof left === "number" ? left : this.left, typeof top === "number" ? top : this.top, CARD_DIMENSIONS.width, CARD_DIMENSIONS.height);
+      ctx.drawImage(this.imageToRender, typeof left === "number" ? left : this.left, typeof top === "number" ? top : this.top, conf.CARD_DIMENSIONS.width, conf.CARD_DIMENSIONS.height);
       ctx.restore();
     }
   }
@@ -50366,8 +50372,8 @@ class Card extends BaseItem {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     this.left = translateX;
     this.top = translateY;
-    this.right = this.left + CARD_DIMENSIONS.width * scaleX;
-    this.bottom = this.top + CARD_DIMENSIONS.height * scaleY;
+    this.right = this.left + conf.CARD_DIMENSIONS.width * scaleX;
+    this.bottom = this.top + conf.CARD_DIMENSIONS.height * scaleY;
   }
   getPath() {
     return new Path(this.getMbr().getLines());
@@ -50418,6 +50424,7 @@ class Deck extends BaseItem {
   cachedCanvas = null;
   isCacheDirty = true;
   enableResize = false;
+  path = new Path;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -50451,6 +50458,7 @@ class Deck extends BaseItem {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -50469,6 +50477,7 @@ class Deck extends BaseItem {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -50518,14 +50527,18 @@ class Deck extends BaseItem {
   updateMbr() {
     const { translateX, translateY } = this.transformation.matrix;
     const items = this.index.list();
-    const itemsMbr = items[0]?.getMbr().combine(items.slice(1).map((item) => item.getMbr()));
+    const itemsMbr = items[0].getMbr().combine(items.slice(1).map((item) => item.getMbr()));
     this.left = translateX;
     this.top = translateY;
-    this.right = translateX + (itemsMbr?.getWidth() || 0);
-    this.bottom = translateY + (itemsMbr?.getHeight() || 0);
+    this.right = translateX + (itemsMbr?.getWidth() || conf.CARD_DIMENSIONS.width + conf.DECK_HORIZONTAL_OFFSET * ((this.children.length || 1) - 1));
+    this.bottom = translateY + (itemsMbr?.getHeight() || conf.CARD_DIMENSIONS.height - conf.DECK_VERTICAL_OFFSET * ((this.children.length || 1) - 1));
+    this.path = new Path(this.getMbr().getLines(), true, "#FFFFFF");
   }
   deserialize(data) {
     super.deserialize(data);
+    if (data.children) {
+      this.children = data.children;
+    }
     this.updateMbr();
     this.subject.publish(this);
     return this;
@@ -50537,6 +50550,7 @@ class Deck extends BaseItem {
     const ctx = context.ctx;
     if (this.isCacheDirty || !this.cachedCanvas) {
       this.updateCache(context);
+      this.path.render(context);
     }
     if (this.cachedCanvas && this.cachedCanvas.width && this.cachedCanvas.height) {
       ctx.save();

package/dist/esm/browser.js

@@ -6906,7 +6906,8 @@ var conf = {
   FALLBACK_LNG: "en",
   cursorsMap,
   DECK_HORIZONTAL_OFFSET: 2,
-  DECK_VERTICAL_OFFSET: 0
+  DECK_VERTICAL_OFFSET: 0,
+  CARD_DIMENSIONS: { width: 250, height: 400 }
 };
 initDefaultI18N();
 
@@ -21339,6 +21340,7 @@ class BaseItem extends Mbr {
   shouldUseRelativeAlignment = true;
   enableResize = true;
   itemType = "";
+  children = [];
   constructor(board, id = "", defaultItemData, isGroupItem) {
     super();
     this.defaultItemData = defaultItemData;
@@ -21356,6 +21358,9 @@ class BaseItem extends Mbr {
     this.linkTo = new LinkTo(this.id, board.events);
     this.transformation = new Transformation(this.id, board.events);
   }
+  updateChildrenIds() {
+    this.children = this.index?.items.listAll().map((item) => item.getId()) || [];
+  }
   getId() {
     return this.id;
   }
@@ -21441,6 +21446,7 @@ class BaseItem extends Mbr {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -21458,6 +21464,7 @@ class BaseItem extends Mbr {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -47673,7 +47680,6 @@ var defaultCardData = {
   faceUrl: "",
   backsideUrl: ""
 };
-var CARD_DIMENSIONS = { width: 250, height: 400 };
 
 class Card extends BaseItem {
   subject = new Subject;
@@ -47734,7 +47740,7 @@ class Card extends BaseItem {
     const ctx = context.ctx;
     if (this.imageToRender && this.imageToRender.complete) {
       ctx.save();
-      ctx.drawImage(this.imageToRender, typeof left === "number" ? left : this.left, typeof top === "number" ? top : this.top, CARD_DIMENSIONS.width, CARD_DIMENSIONS.height);
+      ctx.drawImage(this.imageToRender, typeof left === "number" ? left : this.left, typeof top === "number" ? top : this.top, conf.CARD_DIMENSIONS.width, conf.CARD_DIMENSIONS.height);
       ctx.restore();
     }
   }
@@ -47742,8 +47748,8 @@ class Card extends BaseItem {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     this.left = translateX;
     this.top = translateY;
-    this.right = this.left + CARD_DIMENSIONS.width * scaleX;
-    this.bottom = this.top + CARD_DIMENSIONS.height * scaleY;
+    this.right = this.left + conf.CARD_DIMENSIONS.width * scaleX;
+    this.bottom = this.top + conf.CARD_DIMENSIONS.height * scaleY;
   }
   getPath() {
     return new Path(this.getMbr().getLines());
@@ -47794,6 +47800,7 @@ class Deck extends BaseItem {
   cachedCanvas = null;
   isCacheDirty = true;
   enableResize = false;
+  path = new Path;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -47827,6 +47834,7 @@ class Deck extends BaseItem {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -47845,6 +47853,7 @@ class Deck extends BaseItem {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -47894,14 +47903,18 @@ class Deck extends BaseItem {
   updateMbr() {
     const { translateX, translateY } = this.transformation.matrix;
     const items = this.index.list();
-    const itemsMbr = items[0]?.getMbr().combine(items.slice(1).map((item) => item.getMbr()));
+    const itemsMbr = items[0].getMbr().combine(items.slice(1).map((item) => item.getMbr()));
     this.left = translateX;
     this.top = translateY;
-    this.right = translateX + (itemsMbr?.getWidth() || 0);
-    this.bottom = translateY + (itemsMbr?.getHeight() || 0);
+    this.right = translateX + (itemsMbr?.getWidth() || conf.CARD_DIMENSIONS.width + conf.DECK_HORIZONTAL_OFFSET * ((this.children.length || 1) - 1));
+    this.bottom = translateY + (itemsMbr?.getHeight() || conf.CARD_DIMENSIONS.height - conf.DECK_VERTICAL_OFFSET * ((this.children.length || 1) - 1));
+    this.path = new Path(this.getMbr().getLines(), true, "#FFFFFF");
   }
   deserialize(data) {
     super.deserialize(data);
+    if (data.children) {
+      this.children = data.children;
+    }
     this.updateMbr();
     this.subject.publish(this);
     return this;
@@ -47913,6 +47926,7 @@ class Deck extends BaseItem {
     const ctx = context.ctx;
     if (this.isCacheDirty || !this.cachedCanvas) {
       this.updateCache(context);
+      this.path.render(context);
     }
     if (this.cachedCanvas && this.cachedCanvas.width && this.cachedCanvas.height) {
       ctx.save();

package/dist/esm/index.js

@@ -6899,7 +6899,8 @@ var conf = {
   FALLBACK_LNG: "en",
   cursorsMap,
   DECK_HORIZONTAL_OFFSET: 2,
-  DECK_VERTICAL_OFFSET: 0
+  DECK_VERTICAL_OFFSET: 0,
+  CARD_DIMENSIONS: { width: 250, height: 400 }
 };
 initDefaultI18N();
 
@@ -21332,6 +21333,7 @@ class BaseItem extends Mbr {
   shouldUseRelativeAlignment = true;
   enableResize = true;
   itemType = "";
+  children = [];
   constructor(board, id = "", defaultItemData, isGroupItem) {
     super();
     this.defaultItemData = defaultItemData;
@@ -21349,6 +21351,9 @@ class BaseItem extends Mbr {
     this.linkTo = new LinkTo(this.id, board.events);
     this.transformation = new Transformation(this.id, board.events);
   }
+  updateChildrenIds() {
+    this.children = this.index?.items.listAll().map((item) => item.getId()) || [];
+  }
   getId() {
     return this.id;
   }
@@ -21434,6 +21439,7 @@ class BaseItem extends Mbr {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -21451,6 +21457,7 @@ class BaseItem extends Mbr {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -47666,7 +47673,6 @@ var defaultCardData = {
   faceUrl: "",
   backsideUrl: ""
 };
-var CARD_DIMENSIONS = { width: 250, height: 400 };
 
 class Card extends BaseItem {
   subject = new Subject;
@@ -47727,7 +47733,7 @@ class Card extends BaseItem {
     const ctx = context.ctx;
     if (this.imageToRender && this.imageToRender.complete) {
       ctx.save();
-      ctx.drawImage(this.imageToRender, typeof left === "number" ? left : this.left, typeof top === "number" ? top : this.top, CARD_DIMENSIONS.width, CARD_DIMENSIONS.height);
+      ctx.drawImage(this.imageToRender, typeof left === "number" ? left : this.left, typeof top === "number" ? top : this.top, conf.CARD_DIMENSIONS.width, conf.CARD_DIMENSIONS.height);
       ctx.restore();
     }
   }
@@ -47735,8 +47741,8 @@ class Card extends BaseItem {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     this.left = translateX;
     this.top = translateY;
-    this.right = this.left + CARD_DIMENSIONS.width * scaleX;
-    this.bottom = this.top + CARD_DIMENSIONS.height * scaleY;
+    this.right = this.left + conf.CARD_DIMENSIONS.width * scaleX;
+    this.bottom = this.top + conf.CARD_DIMENSIONS.height * scaleY;
   }
   getPath() {
     return new Path(this.getMbr().getLines());
@@ -47787,6 +47793,7 @@ class Deck extends BaseItem {
   cachedCanvas = null;
   isCacheDirty = true;
   enableResize = false;
+  path = new Path;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -47820,6 +47827,7 @@ class Deck extends BaseItem {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -47838,6 +47846,7 @@ class Deck extends BaseItem {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -47887,14 +47896,18 @@ class Deck extends BaseItem {
   updateMbr() {
     const { translateX, translateY } = this.transformation.matrix;
     const items = this.index.list();
-    const itemsMbr = items[0]?.getMbr().combine(items.slice(1).map((item) => item.getMbr()));
+    const itemsMbr = items[0].getMbr().combine(items.slice(1).map((item) => item.getMbr()));
     this.left = translateX;
     this.top = translateY;
-    this.right = translateX + (itemsMbr?.getWidth() || 0);
-    this.bottom = translateY + (itemsMbr?.getHeight() || 0);
+    this.right = translateX + (itemsMbr?.getWidth() || conf.CARD_DIMENSIONS.width + conf.DECK_HORIZONTAL_OFFSET * ((this.children.length || 1) - 1));
+    this.bottom = translateY + (itemsMbr?.getHeight() || conf.CARD_DIMENSIONS.height - conf.DECK_VERTICAL_OFFSET * ((this.children.length || 1) - 1));
+    this.path = new Path(this.getMbr().getLines(), true, "#FFFFFF");
   }
   deserialize(data) {
     super.deserialize(data);
+    if (data.children) {
+      this.children = data.children;
+    }
     this.updateMbr();
     this.subject.publish(this);
     return this;
@@ -47906,6 +47919,7 @@ class Deck extends BaseItem {
     const ctx = context.ctx;
     if (this.isCacheDirty || !this.cachedCanvas) {
       this.updateCache(context);
+      this.path.render(context);
     }
     if (this.cachedCanvas && this.cachedCanvas.width && this.cachedCanvas.height) {
       ctx.save();

package/dist/esm/node.js

@@ -7683,7 +7683,8 @@ var conf = {
   FALLBACK_LNG: "en",
   cursorsMap,
   DECK_HORIZONTAL_OFFSET: 2,
-  DECK_VERTICAL_OFFSET: 0
+  DECK_VERTICAL_OFFSET: 0,
+  CARD_DIMENSIONS: { width: 250, height: 400 }
 };
 initDefaultI18N();
 
@@ -23799,6 +23800,7 @@ class BaseItem extends Mbr {
   shouldUseRelativeAlignment = true;
   enableResize = true;
   itemType = "";
+  children = [];
   constructor(board, id = "", defaultItemData, isGroupItem) {
     super();
     this.defaultItemData = defaultItemData;
@@ -23816,6 +23818,9 @@ class BaseItem extends Mbr {
     this.linkTo = new LinkTo(this.id, board.events);
     this.transformation = new Transformation(this.id, board.events);
   }
+  updateChildrenIds() {
+    this.children = this.index?.items.listAll().map((item) => item.getId()) || [];
+  }
   getId() {
     return this.id;
   }
@@ -23901,6 +23906,7 @@ class BaseItem extends Mbr {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -23918,6 +23924,7 @@ class BaseItem extends Mbr {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -50134,7 +50141,6 @@ var defaultCardData = {
   faceUrl: "",
   backsideUrl: ""
 };
-var CARD_DIMENSIONS = { width: 250, height: 400 };
 
 class Card extends BaseItem {
   subject = new Subject;
@@ -50195,7 +50201,7 @@ class Card extends BaseItem {
     const ctx = context.ctx;
     if (this.imageToRender && this.imageToRender.complete) {
       ctx.save();
-      ctx.drawImage(this.imageToRender, typeof left === "number" ? left : this.left, typeof top === "number" ? top : this.top, CARD_DIMENSIONS.width, CARD_DIMENSIONS.height);
+      ctx.drawImage(this.imageToRender, typeof left === "number" ? left : this.left, typeof top === "number" ? top : this.top, conf.CARD_DIMENSIONS.width, conf.CARD_DIMENSIONS.height);
       ctx.restore();
     }
   }
@@ -50203,8 +50209,8 @@ class Card extends BaseItem {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     this.left = translateX;
     this.top = translateY;
-    this.right = this.left + CARD_DIMENSIONS.width * scaleX;
-    this.bottom = this.top + CARD_DIMENSIONS.height * scaleY;
+    this.right = this.left + conf.CARD_DIMENSIONS.width * scaleX;
+    this.bottom = this.top + conf.CARD_DIMENSIONS.height * scaleY;
   }
   getPath() {
     return new Path(this.getMbr().getLines());
@@ -50255,6 +50261,7 @@ class Deck extends BaseItem {
   cachedCanvas = null;
   isCacheDirty = true;
   enableResize = false;
+  path = new Path;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -50288,6 +50295,7 @@ class Deck extends BaseItem {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -50306,6 +50314,7 @@ class Deck extends BaseItem {
         }
       }
     });
+    this.updateChildrenIds();
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -50355,14 +50364,18 @@ class Deck extends BaseItem {
   updateMbr() {
     const { translateX, translateY } = this.transformation.matrix;
     const items = this.index.list();
-    const itemsMbr = items[0]?.getMbr().combine(items.slice(1).map((item) => item.getMbr()));
+    const itemsMbr = items[0].getMbr().combine(items.slice(1).map((item) => item.getMbr()));
     this.left = translateX;
     this.top = translateY;
-    this.right = translateX + (itemsMbr?.getWidth() || 0);
-    this.bottom = translateY + (itemsMbr?.getHeight() || 0);
+    this.right = translateX + (itemsMbr?.getWidth() || conf.CARD_DIMENSIONS.width + conf.DECK_HORIZONTAL_OFFSET * ((this.children.length || 1) - 1));
+    this.bottom = translateY + (itemsMbr?.getHeight() || conf.CARD_DIMENSIONS.height - conf.DECK_VERTICAL_OFFSET * ((this.children.length || 1) - 1));
+    this.path = new Path(this.getMbr().getLines(), true, "#FFFFFF");
   }
   deserialize(data) {
     super.deserialize(data);
+    if (data.children) {
+      this.children = data.children;
+    }
     this.updateMbr();
     this.subject.publish(this);
     return this;
@@ -50374,6 +50387,7 @@ class Deck extends BaseItem {
     const ctx = context.ctx;
     if (this.isCacheDirty || !this.cachedCanvas) {
       this.updateCache(context);
+      this.path.render(context);
     }
     if (this.cachedCanvas && this.cachedCanvas.width && this.cachedCanvas.height) {
       ctx.save();

package/dist/types/Items/BaseItem/BaseItem.d.ts

@@ -39,7 +39,9 @@ export declare class BaseItem extends Mbr implements Geometry {
     shouldUseRelativeAlignment: boolean;
     enableResize: boolean;
     itemType: string;
+    children: string[];
     constructor(board: Board, id?: string, defaultItemData?: BaseItemData | undefined, isGroupItem?: boolean);
+    updateChildrenIds(): void;
     getId(): string;
     setId(id: string): this;
     getChildrenIds(): string[] | null;

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

@@ -6,10 +6,6 @@ import { Subject } from "Subject";
 import { Paths } from "Items/Path/Paths";
 import { CardOperation } from "Items/Examples/CardGame/Card/CardOperation";
 export declare const defaultCardData: BaseItemData;
-export declare const CARD_DIMENSIONS: {
-    width: number;
-    height: number;
-};
 export declare class Card extends BaseItem {
     readonly subject: Subject<Card>;
     private faceUrl;

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

@@ -4,6 +4,7 @@ import { Subject } from "Subject";
 import { Card } from "Items/Examples/CardGame/Card/Card";
 import { DrawingContext } from "Items/DrawingContext";
 import { DeckOperation } from "Items/Examples/CardGame/Deck/DeckOperation";
+import { Path } from "../../../Path";
 export declare const defaultDeckData: BaseItemData;
 export declare class Deck extends BaseItem {
     readonly subject: Subject<Deck>;
@@ -11,6 +12,7 @@ export declare class Deck extends BaseItem {
     private cachedCanvas;
     private isCacheDirty;
     enableResize: boolean;
+    path: Path;
     constructor(board: Board, id?: string);
     applyAddChildren(childIds: string[]): void;
     applyRemoveChildren(childIds: string[]): void;

package/dist/types/Settings.d.ts

@@ -232,6 +232,10 @@ export declare const conf: {
     cursorsMap: Partial<Record<import("./Pointer/Cursor").CursorName, string>>;
     DECK_HORIZONTAL_OFFSET: number;
     DECK_VERTICAL_OFFSET: number;
+    CARD_DIMENSIONS: {
+        width: number;
+        height: number;
+    };
 };
 export type Settings = typeof conf;
 export {};

package/package.json

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