microboard-temp 0.5.38 → 0.5.40

package/dist/cjs/browser.js

@@ -7070,7 +7070,8 @@ var conf = {
   cursorsMap,
   DECK_HORIZONTAL_OFFSET: 2,
   DECK_VERTICAL_OFFSET: 2,
-  CARD_DIMENSIONS: { width: 250, height: 400 }
+  CARD_DIMENSIONS: { width: 250, height: 400 },
+  DEFAULT_GAME_ITEM_DIMENSIONS: { width: 200, height: 200 }
 };
 initDefaultI18N();
 
@@ -21485,6 +21486,7 @@ class BaseItem extends Mbr {
   shouldRenderOutsideViewRect = true;
   shouldUseRelativeAlignment = true;
   enableResize = true;
+  onlyProportionalResize = false;
   itemType = "";
   children = [];
   constructor(board, id = "", defaultItemData, isGroupItem) {
@@ -47853,7 +47855,8 @@ var defaultCardData = {
   itemType: "Card",
   isOpen: false,
   faceUrl: "",
-  backsideUrl: ""
+  backsideUrl: "",
+  dimensions: { width: conf.CARD_DIMENSIONS.width, height: conf.CARD_DIMENSIONS.height }
 };
 
 class Card extends BaseItem {
@@ -47866,9 +47869,13 @@ class Card extends BaseItem {
   backside = null;
   imageToRender = null;
   shouldUseCustomRender = false;
-  enableResize = false;
-  constructor(board, id = "", urls) {
+  onlyProportionalResize = true;
+  dimensions = { width: conf.CARD_DIMENSIONS.width, height: conf.CARD_DIMENSIONS.height };
+  constructor(board, id = "", urls, dimensions) {
     super(board, id, defaultCardData);
+    if (dimensions) {
+      this.dimensions = dimensions;
+    }
     if (urls) {
       this.faceUrl = urls.faceUrl;
       this.backsideUrl = urls.backsideUrl;
@@ -47886,6 +47893,9 @@ class Card extends BaseItem {
     });
     this.updateMbr();
   }
+  getDimensions() {
+    return this.dimensions;
+  }
   createImages() {
     this.face = conf.documentFactory.createElement("img");
     this.backside = conf.documentFactory.createElement("img");
@@ -47941,8 +47951,8 @@ class Card extends BaseItem {
     const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
     div.id = this.getId();
-    div.style.width = `${conf.CARD_DIMENSIONS.width}px`;
-    div.style.height = `${conf.CARD_DIMENSIONS.height}px`;
+    div.style.width = `${this.dimensions.width}px`;
+    div.style.height = `${this.dimensions.height}px`;
     div.style.transformOrigin = "top left";
     div.style.transform = transform;
     div.style.position = "absolute";
@@ -47953,8 +47963,8 @@ class Card extends BaseItem {
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     const rotation = this.transformation.getRotation();
-    const height3 = conf.CARD_DIMENSIONS.height * scaleY;
-    const width2 = conf.CARD_DIMENSIONS.width * scaleX;
+    const height3 = this.dimensions.height * scaleY;
+    const width2 = this.dimensions.width * scaleX;
     if (rotation % 180 === 0) {
       this.left = translateX;
       this.top = translateY;
@@ -48095,7 +48105,9 @@ class Deck extends BaseItem {
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
-        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular());
+        const firstCard = this.getFirstCard();
+        const firstCardDimensions = firstCard?.getDimensions();
+        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular()) && (!firstCardDimensions || firstCardDimensions.width === foundItem.getDimensions().width && firstCardDimensions.height === foundItem.getDimensions().height);
         if (canAddItem) {
           this.isPerpendicular = foundItem.getIsRotatedPerpendicular();
           foundItem.transformation.apply({
@@ -48105,6 +48117,19 @@ class Deck extends BaseItem {
             x: this.left + (this.index?.list().length || 0) * (this.isPerpendicular ? 0 : conf.DECK_HORIZONTAL_OFFSET),
             y: this.top + (this.index?.list().length || 0) * (this.isPerpendicular ? conf.DECK_VERTICAL_OFFSET : 0)
           });
+          if (firstCard) {
+            const { scaleX, scaleY } = foundItem.transformation.matrix;
+            const { scaleX: targetScaleX, scaleY: targetScaleY } = firstCard.transformation.matrix;
+            if (scaleX !== targetScaleX || scaleY !== targetScaleY) {
+              foundItem.transformation.apply({
+                class: "Transformation",
+                method: "scaleTo",
+                item: [this.id],
+                x: targetScaleX,
+                y: targetScaleY
+              });
+            }
+          }
           this.board.selection.remove(foundItem);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
@@ -48269,6 +48294,9 @@ class Deck extends BaseItem {
     this.isCacheDirty = false;
     this.updateMbr();
   }
+  getFirstCard() {
+    return this.index?.list()[0];
+  }
 }
 registerItem({
   item: Deck,
@@ -51777,7 +51805,7 @@ function transformItems({
   setSnapCursorPos
 }) {
   const items = selection.items.list();
-  const includesProportionalItem = items.some((item) => item.itemType === "Sticker" || item.itemType === "RichText" || item.itemType === "AINode" || item.itemType === "Video" || item.itemType === "Audio");
+  const includesProportionalItem = items.some((item) => item.itemType === "Sticker" || item.itemType === "RichText" || item.itemType === "AINode" || item.itemType === "Video" || item.itemType === "Audio" || item instanceof BaseItem && item.onlyProportionalResize);
   if (includesProportionalItem && (isWidth || isHeight)) {
     return null;
   }

package/dist/cjs/index.js

@@ -7070,7 +7070,8 @@ var conf = {
   cursorsMap,
   DECK_HORIZONTAL_OFFSET: 2,
   DECK_VERTICAL_OFFSET: 2,
-  CARD_DIMENSIONS: { width: 250, height: 400 }
+  CARD_DIMENSIONS: { width: 250, height: 400 },
+  DEFAULT_GAME_ITEM_DIMENSIONS: { width: 200, height: 200 }
 };
 initDefaultI18N();
 
@@ -21485,6 +21486,7 @@ class BaseItem extends Mbr {
   shouldRenderOutsideViewRect = true;
   shouldUseRelativeAlignment = true;
   enableResize = true;
+  onlyProportionalResize = false;
   itemType = "";
   children = [];
   constructor(board, id = "", defaultItemData, isGroupItem) {
@@ -47853,7 +47855,8 @@ var defaultCardData = {
   itemType: "Card",
   isOpen: false,
   faceUrl: "",
-  backsideUrl: ""
+  backsideUrl: "",
+  dimensions: { width: conf.CARD_DIMENSIONS.width, height: conf.CARD_DIMENSIONS.height }
 };
 
 class Card extends BaseItem {
@@ -47866,9 +47869,13 @@ class Card extends BaseItem {
   backside = null;
   imageToRender = null;
   shouldUseCustomRender = false;
-  enableResize = false;
-  constructor(board, id = "", urls) {
+  onlyProportionalResize = true;
+  dimensions = { width: conf.CARD_DIMENSIONS.width, height: conf.CARD_DIMENSIONS.height };
+  constructor(board, id = "", urls, dimensions) {
     super(board, id, defaultCardData);
+    if (dimensions) {
+      this.dimensions = dimensions;
+    }
     if (urls) {
       this.faceUrl = urls.faceUrl;
       this.backsideUrl = urls.backsideUrl;
@@ -47886,6 +47893,9 @@ class Card extends BaseItem {
     });
     this.updateMbr();
   }
+  getDimensions() {
+    return this.dimensions;
+  }
   createImages() {
     this.face = conf.documentFactory.createElement("img");
     this.backside = conf.documentFactory.createElement("img");
@@ -47941,8 +47951,8 @@ class Card extends BaseItem {
     const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
     div.id = this.getId();
-    div.style.width = `${conf.CARD_DIMENSIONS.width}px`;
-    div.style.height = `${conf.CARD_DIMENSIONS.height}px`;
+    div.style.width = `${this.dimensions.width}px`;
+    div.style.height = `${this.dimensions.height}px`;
     div.style.transformOrigin = "top left";
     div.style.transform = transform;
     div.style.position = "absolute";
@@ -47953,8 +47963,8 @@ class Card extends BaseItem {
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     const rotation = this.transformation.getRotation();
-    const height3 = conf.CARD_DIMENSIONS.height * scaleY;
-    const width2 = conf.CARD_DIMENSIONS.width * scaleX;
+    const height3 = this.dimensions.height * scaleY;
+    const width2 = this.dimensions.width * scaleX;
     if (rotation % 180 === 0) {
       this.left = translateX;
       this.top = translateY;
@@ -48095,7 +48105,9 @@ class Deck extends BaseItem {
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
-        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular());
+        const firstCard = this.getFirstCard();
+        const firstCardDimensions = firstCard?.getDimensions();
+        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular()) && (!firstCardDimensions || firstCardDimensions.width === foundItem.getDimensions().width && firstCardDimensions.height === foundItem.getDimensions().height);
         if (canAddItem) {
           this.isPerpendicular = foundItem.getIsRotatedPerpendicular();
           foundItem.transformation.apply({
@@ -48105,6 +48117,19 @@ class Deck extends BaseItem {
             x: this.left + (this.index?.list().length || 0) * (this.isPerpendicular ? 0 : conf.DECK_HORIZONTAL_OFFSET),
             y: this.top + (this.index?.list().length || 0) * (this.isPerpendicular ? conf.DECK_VERTICAL_OFFSET : 0)
           });
+          if (firstCard) {
+            const { scaleX, scaleY } = foundItem.transformation.matrix;
+            const { scaleX: targetScaleX, scaleY: targetScaleY } = firstCard.transformation.matrix;
+            if (scaleX !== targetScaleX || scaleY !== targetScaleY) {
+              foundItem.transformation.apply({
+                class: "Transformation",
+                method: "scaleTo",
+                item: [this.id],
+                x: targetScaleX,
+                y: targetScaleY
+              });
+            }
+          }
           this.board.selection.remove(foundItem);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
@@ -48269,6 +48294,9 @@ class Deck extends BaseItem {
     this.isCacheDirty = false;
     this.updateMbr();
   }
+  getFirstCard() {
+    return this.index?.list()[0];
+  }
 }
 registerItem({
   item: Deck,
@@ -51777,7 +51805,7 @@ function transformItems({
   setSnapCursorPos
 }) {
   const items = selection.items.list();
-  const includesProportionalItem = items.some((item) => item.itemType === "Sticker" || item.itemType === "RichText" || item.itemType === "AINode" || item.itemType === "Video" || item.itemType === "Audio");
+  const includesProportionalItem = items.some((item) => item.itemType === "Sticker" || item.itemType === "RichText" || item.itemType === "AINode" || item.itemType === "Video" || item.itemType === "Audio" || item instanceof BaseItem && item.onlyProportionalResize);
   if (includesProportionalItem && (isWidth || isHeight)) {
     return null;
   }

package/dist/cjs/node.js

@@ -8107,7 +8107,8 @@ var conf = {
   cursorsMap,
   DECK_HORIZONTAL_OFFSET: 2,
   DECK_VERTICAL_OFFSET: 2,
-  CARD_DIMENSIONS: { width: 250, height: 400 }
+  CARD_DIMENSIONS: { width: 250, height: 400 },
+  DEFAULT_GAME_ITEM_DIMENSIONS: { width: 200, height: 200 }
 };
 initDefaultI18N();
 
@@ -23957,6 +23958,7 @@ class BaseItem extends Mbr {
   shouldRenderOutsideViewRect = true;
   shouldUseRelativeAlignment = true;
   enableResize = true;
+  onlyProportionalResize = false;
   itemType = "";
   children = [];
   constructor(board, id = "", defaultItemData, isGroupItem) {
@@ -50326,7 +50328,8 @@ var defaultCardData = {
   itemType: "Card",
   isOpen: false,
   faceUrl: "",
-  backsideUrl: ""
+  backsideUrl: "",
+  dimensions: { width: conf.CARD_DIMENSIONS.width, height: conf.CARD_DIMENSIONS.height }
 };
 
 class Card extends BaseItem {
@@ -50339,9 +50342,13 @@ class Card extends BaseItem {
   backside = null;
   imageToRender = null;
   shouldUseCustomRender = false;
-  enableResize = false;
-  constructor(board, id = "", urls) {
+  onlyProportionalResize = true;
+  dimensions = { width: conf.CARD_DIMENSIONS.width, height: conf.CARD_DIMENSIONS.height };
+  constructor(board, id = "", urls, dimensions) {
     super(board, id, defaultCardData);
+    if (dimensions) {
+      this.dimensions = dimensions;
+    }
     if (urls) {
       this.faceUrl = urls.faceUrl;
       this.backsideUrl = urls.backsideUrl;
@@ -50359,6 +50366,9 @@ class Card extends BaseItem {
     });
     this.updateMbr();
   }
+  getDimensions() {
+    return this.dimensions;
+  }
   createImages() {
     this.face = conf.documentFactory.createElement("img");
     this.backside = conf.documentFactory.createElement("img");
@@ -50414,8 +50424,8 @@ class Card extends BaseItem {
     const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
     div.id = this.getId();
-    div.style.width = `${conf.CARD_DIMENSIONS.width}px`;
-    div.style.height = `${conf.CARD_DIMENSIONS.height}px`;
+    div.style.width = `${this.dimensions.width}px`;
+    div.style.height = `${this.dimensions.height}px`;
     div.style.transformOrigin = "top left";
     div.style.transform = transform;
     div.style.position = "absolute";
@@ -50426,8 +50436,8 @@ class Card extends BaseItem {
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     const rotation = this.transformation.getRotation();
-    const height3 = conf.CARD_DIMENSIONS.height * scaleY;
-    const width2 = conf.CARD_DIMENSIONS.width * scaleX;
+    const height3 = this.dimensions.height * scaleY;
+    const width2 = this.dimensions.width * scaleX;
     if (rotation % 180 === 0) {
       this.left = translateX;
       this.top = translateY;
@@ -50568,7 +50578,9 @@ class Deck extends BaseItem {
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
-        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular());
+        const firstCard = this.getFirstCard();
+        const firstCardDimensions = firstCard?.getDimensions();
+        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular()) && (!firstCardDimensions || firstCardDimensions.width === foundItem.getDimensions().width && firstCardDimensions.height === foundItem.getDimensions().height);
         if (canAddItem) {
           this.isPerpendicular = foundItem.getIsRotatedPerpendicular();
           foundItem.transformation.apply({
@@ -50578,6 +50590,19 @@ class Deck extends BaseItem {
             x: this.left + (this.index?.list().length || 0) * (this.isPerpendicular ? 0 : conf.DECK_HORIZONTAL_OFFSET),
             y: this.top + (this.index?.list().length || 0) * (this.isPerpendicular ? conf.DECK_VERTICAL_OFFSET : 0)
           });
+          if (firstCard) {
+            const { scaleX, scaleY } = foundItem.transformation.matrix;
+            const { scaleX: targetScaleX, scaleY: targetScaleY } = firstCard.transformation.matrix;
+            if (scaleX !== targetScaleX || scaleY !== targetScaleY) {
+              foundItem.transformation.apply({
+                class: "Transformation",
+                method: "scaleTo",
+                item: [this.id],
+                x: targetScaleX,
+                y: targetScaleY
+              });
+            }
+          }
           this.board.selection.remove(foundItem);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
@@ -50742,6 +50767,9 @@ class Deck extends BaseItem {
     this.isCacheDirty = false;
     this.updateMbr();
   }
+  getFirstCard() {
+    return this.index?.list()[0];
+  }
 }
 registerItem({
   item: Deck,
@@ -54250,7 +54278,7 @@ function transformItems({
   setSnapCursorPos
 }) {
   const items = selection.items.list();
-  const includesProportionalItem = items.some((item) => item.itemType === "Sticker" || item.itemType === "RichText" || item.itemType === "AINode" || item.itemType === "Video" || item.itemType === "Audio");
+  const includesProportionalItem = items.some((item) => item.itemType === "Sticker" || item.itemType === "RichText" || item.itemType === "AINode" || item.itemType === "Video" || item.itemType === "Audio" || item instanceof BaseItem && item.onlyProportionalResize);
   if (includesProportionalItem && (isWidth || isHeight)) {
     return null;
   }

package/dist/esm/browser.js

@@ -6907,7 +6907,8 @@ var conf = {
   cursorsMap,
   DECK_HORIZONTAL_OFFSET: 2,
   DECK_VERTICAL_OFFSET: 2,
-  CARD_DIMENSIONS: { width: 250, height: 400 }
+  CARD_DIMENSIONS: { width: 250, height: 400 },
+  DEFAULT_GAME_ITEM_DIMENSIONS: { width: 200, height: 200 }
 };
 initDefaultI18N();
 
@@ -21331,6 +21332,7 @@ class BaseItem extends Mbr {
   shouldRenderOutsideViewRect = true;
   shouldUseRelativeAlignment = true;
   enableResize = true;
+  onlyProportionalResize = false;
   itemType = "";
   children = [];
   constructor(board, id = "", defaultItemData, isGroupItem) {
@@ -47699,7 +47701,8 @@ var defaultCardData = {
   itemType: "Card",
   isOpen: false,
   faceUrl: "",
-  backsideUrl: ""
+  backsideUrl: "",
+  dimensions: { width: conf.CARD_DIMENSIONS.width, height: conf.CARD_DIMENSIONS.height }
 };
 
 class Card extends BaseItem {
@@ -47712,9 +47715,13 @@ class Card extends BaseItem {
   backside = null;
   imageToRender = null;
   shouldUseCustomRender = false;
-  enableResize = false;
-  constructor(board, id = "", urls) {
+  onlyProportionalResize = true;
+  dimensions = { width: conf.CARD_DIMENSIONS.width, height: conf.CARD_DIMENSIONS.height };
+  constructor(board, id = "", urls, dimensions) {
     super(board, id, defaultCardData);
+    if (dimensions) {
+      this.dimensions = dimensions;
+    }
     if (urls) {
       this.faceUrl = urls.faceUrl;
       this.backsideUrl = urls.backsideUrl;
@@ -47732,6 +47739,9 @@ class Card extends BaseItem {
     });
     this.updateMbr();
   }
+  getDimensions() {
+    return this.dimensions;
+  }
   createImages() {
     this.face = conf.documentFactory.createElement("img");
     this.backside = conf.documentFactory.createElement("img");
@@ -47787,8 +47797,8 @@ class Card extends BaseItem {
     const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
     div.id = this.getId();
-    div.style.width = `${conf.CARD_DIMENSIONS.width}px`;
-    div.style.height = `${conf.CARD_DIMENSIONS.height}px`;
+    div.style.width = `${this.dimensions.width}px`;
+    div.style.height = `${this.dimensions.height}px`;
     div.style.transformOrigin = "top left";
     div.style.transform = transform;
     div.style.position = "absolute";
@@ -47799,8 +47809,8 @@ class Card extends BaseItem {
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     const rotation = this.transformation.getRotation();
-    const height3 = conf.CARD_DIMENSIONS.height * scaleY;
-    const width2 = conf.CARD_DIMENSIONS.width * scaleX;
+    const height3 = this.dimensions.height * scaleY;
+    const width2 = this.dimensions.width * scaleX;
     if (rotation % 180 === 0) {
       this.left = translateX;
       this.top = translateY;
@@ -47941,7 +47951,9 @@ class Deck extends BaseItem {
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
-        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular());
+        const firstCard = this.getFirstCard();
+        const firstCardDimensions = firstCard?.getDimensions();
+        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular()) && (!firstCardDimensions || firstCardDimensions.width === foundItem.getDimensions().width && firstCardDimensions.height === foundItem.getDimensions().height);
         if (canAddItem) {
           this.isPerpendicular = foundItem.getIsRotatedPerpendicular();
           foundItem.transformation.apply({
@@ -47951,6 +47963,19 @@ class Deck extends BaseItem {
             x: this.left + (this.index?.list().length || 0) * (this.isPerpendicular ? 0 : conf.DECK_HORIZONTAL_OFFSET),
             y: this.top + (this.index?.list().length || 0) * (this.isPerpendicular ? conf.DECK_VERTICAL_OFFSET : 0)
           });
+          if (firstCard) {
+            const { scaleX, scaleY } = foundItem.transformation.matrix;
+            const { scaleX: targetScaleX, scaleY: targetScaleY } = firstCard.transformation.matrix;
+            if (scaleX !== targetScaleX || scaleY !== targetScaleY) {
+              foundItem.transformation.apply({
+                class: "Transformation",
+                method: "scaleTo",
+                item: [this.id],
+                x: targetScaleX,
+                y: targetScaleY
+              });
+            }
+          }
           this.board.selection.remove(foundItem);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
@@ -48115,6 +48140,9 @@ class Deck extends BaseItem {
     this.isCacheDirty = false;
     this.updateMbr();
   }
+  getFirstCard() {
+    return this.index?.list()[0];
+  }
 }
 registerItem({
   item: Deck,
@@ -51623,7 +51651,7 @@ function transformItems({
   setSnapCursorPos
 }) {
   const items = selection.items.list();
-  const includesProportionalItem = items.some((item) => item.itemType === "Sticker" || item.itemType === "RichText" || item.itemType === "AINode" || item.itemType === "Video" || item.itemType === "Audio");
+  const includesProportionalItem = items.some((item) => item.itemType === "Sticker" || item.itemType === "RichText" || item.itemType === "AINode" || item.itemType === "Video" || item.itemType === "Audio" || item instanceof BaseItem && item.onlyProportionalResize);
   if (includesProportionalItem && (isWidth || isHeight)) {
     return null;
   }

package/dist/esm/index.js

@@ -6900,7 +6900,8 @@ var conf = {
   cursorsMap,
   DECK_HORIZONTAL_OFFSET: 2,
   DECK_VERTICAL_OFFSET: 2,
-  CARD_DIMENSIONS: { width: 250, height: 400 }
+  CARD_DIMENSIONS: { width: 250, height: 400 },
+  DEFAULT_GAME_ITEM_DIMENSIONS: { width: 200, height: 200 }
 };
 initDefaultI18N();
 
@@ -21324,6 +21325,7 @@ class BaseItem extends Mbr {
   shouldRenderOutsideViewRect = true;
   shouldUseRelativeAlignment = true;
   enableResize = true;
+  onlyProportionalResize = false;
   itemType = "";
   children = [];
   constructor(board, id = "", defaultItemData, isGroupItem) {
@@ -47692,7 +47694,8 @@ var defaultCardData = {
   itemType: "Card",
   isOpen: false,
   faceUrl: "",
-  backsideUrl: ""
+  backsideUrl: "",
+  dimensions: { width: conf.CARD_DIMENSIONS.width, height: conf.CARD_DIMENSIONS.height }
 };
 
 class Card extends BaseItem {
@@ -47705,9 +47708,13 @@ class Card extends BaseItem {
   backside = null;
   imageToRender = null;
   shouldUseCustomRender = false;
-  enableResize = false;
-  constructor(board, id = "", urls) {
+  onlyProportionalResize = true;
+  dimensions = { width: conf.CARD_DIMENSIONS.width, height: conf.CARD_DIMENSIONS.height };
+  constructor(board, id = "", urls, dimensions) {
     super(board, id, defaultCardData);
+    if (dimensions) {
+      this.dimensions = dimensions;
+    }
     if (urls) {
       this.faceUrl = urls.faceUrl;
       this.backsideUrl = urls.backsideUrl;
@@ -47725,6 +47732,9 @@ class Card extends BaseItem {
     });
     this.updateMbr();
   }
+  getDimensions() {
+    return this.dimensions;
+  }
   createImages() {
     this.face = conf.documentFactory.createElement("img");
     this.backside = conf.documentFactory.createElement("img");
@@ -47780,8 +47790,8 @@ class Card extends BaseItem {
     const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
     div.id = this.getId();
-    div.style.width = `${conf.CARD_DIMENSIONS.width}px`;
-    div.style.height = `${conf.CARD_DIMENSIONS.height}px`;
+    div.style.width = `${this.dimensions.width}px`;
+    div.style.height = `${this.dimensions.height}px`;
     div.style.transformOrigin = "top left";
     div.style.transform = transform;
     div.style.position = "absolute";
@@ -47792,8 +47802,8 @@ class Card extends BaseItem {
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     const rotation = this.transformation.getRotation();
-    const height3 = conf.CARD_DIMENSIONS.height * scaleY;
-    const width2 = conf.CARD_DIMENSIONS.width * scaleX;
+    const height3 = this.dimensions.height * scaleY;
+    const width2 = this.dimensions.width * scaleX;
     if (rotation % 180 === 0) {
       this.left = translateX;
       this.top = translateY;
@@ -47934,7 +47944,9 @@ class Deck extends BaseItem {
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
-        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular());
+        const firstCard = this.getFirstCard();
+        const firstCardDimensions = firstCard?.getDimensions();
+        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular()) && (!firstCardDimensions || firstCardDimensions.width === foundItem.getDimensions().width && firstCardDimensions.height === foundItem.getDimensions().height);
         if (canAddItem) {
           this.isPerpendicular = foundItem.getIsRotatedPerpendicular();
           foundItem.transformation.apply({
@@ -47944,6 +47956,19 @@ class Deck extends BaseItem {
             x: this.left + (this.index?.list().length || 0) * (this.isPerpendicular ? 0 : conf.DECK_HORIZONTAL_OFFSET),
             y: this.top + (this.index?.list().length || 0) * (this.isPerpendicular ? conf.DECK_VERTICAL_OFFSET : 0)
           });
+          if (firstCard) {
+            const { scaleX, scaleY } = foundItem.transformation.matrix;
+            const { scaleX: targetScaleX, scaleY: targetScaleY } = firstCard.transformation.matrix;
+            if (scaleX !== targetScaleX || scaleY !== targetScaleY) {
+              foundItem.transformation.apply({
+                class: "Transformation",
+                method: "scaleTo",
+                item: [this.id],
+                x: targetScaleX,
+                y: targetScaleY
+              });
+            }
+          }
           this.board.selection.remove(foundItem);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
@@ -48108,6 +48133,9 @@ class Deck extends BaseItem {
     this.isCacheDirty = false;
     this.updateMbr();
   }
+  getFirstCard() {
+    return this.index?.list()[0];
+  }
 }
 registerItem({
   item: Deck,
@@ -51616,7 +51644,7 @@ function transformItems({
   setSnapCursorPos
 }) {
   const items = selection.items.list();
-  const includesProportionalItem = items.some((item) => item.itemType === "Sticker" || item.itemType === "RichText" || item.itemType === "AINode" || item.itemType === "Video" || item.itemType === "Audio");
+  const includesProportionalItem = items.some((item) => item.itemType === "Sticker" || item.itemType === "RichText" || item.itemType === "AINode" || item.itemType === "Video" || item.itemType === "Audio" || item instanceof BaseItem && item.onlyProportionalResize);
   if (includesProportionalItem && (isWidth || isHeight)) {
     return null;
   }

package/dist/esm/node.js

@@ -7684,7 +7684,8 @@ var conf = {
   cursorsMap,
   DECK_HORIZONTAL_OFFSET: 2,
   DECK_VERTICAL_OFFSET: 2,
-  CARD_DIMENSIONS: { width: 250, height: 400 }
+  CARD_DIMENSIONS: { width: 250, height: 400 },
+  DEFAULT_GAME_ITEM_DIMENSIONS: { width: 200, height: 200 }
 };
 initDefaultI18N();
 
@@ -23791,6 +23792,7 @@ class BaseItem extends Mbr {
   shouldRenderOutsideViewRect = true;
   shouldUseRelativeAlignment = true;
   enableResize = true;
+  onlyProportionalResize = false;
   itemType = "";
   children = [];
   constructor(board, id = "", defaultItemData, isGroupItem) {
@@ -50160,7 +50162,8 @@ var defaultCardData = {
   itemType: "Card",
   isOpen: false,
   faceUrl: "",
-  backsideUrl: ""
+  backsideUrl: "",
+  dimensions: { width: conf.CARD_DIMENSIONS.width, height: conf.CARD_DIMENSIONS.height }
 };
 
 class Card extends BaseItem {
@@ -50173,9 +50176,13 @@ class Card extends BaseItem {
   backside = null;
   imageToRender = null;
   shouldUseCustomRender = false;
-  enableResize = false;
-  constructor(board, id = "", urls) {
+  onlyProportionalResize = true;
+  dimensions = { width: conf.CARD_DIMENSIONS.width, height: conf.CARD_DIMENSIONS.height };
+  constructor(board, id = "", urls, dimensions) {
     super(board, id, defaultCardData);
+    if (dimensions) {
+      this.dimensions = dimensions;
+    }
     if (urls) {
       this.faceUrl = urls.faceUrl;
       this.backsideUrl = urls.backsideUrl;
@@ -50193,6 +50200,9 @@ class Card extends BaseItem {
     });
     this.updateMbr();
   }
+  getDimensions() {
+    return this.dimensions;
+  }
   createImages() {
     this.face = conf.documentFactory.createElement("img");
     this.backside = conf.documentFactory.createElement("img");
@@ -50248,8 +50258,8 @@ class Card extends BaseItem {
     const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
     div.id = this.getId();
-    div.style.width = `${conf.CARD_DIMENSIONS.width}px`;
-    div.style.height = `${conf.CARD_DIMENSIONS.height}px`;
+    div.style.width = `${this.dimensions.width}px`;
+    div.style.height = `${this.dimensions.height}px`;
     div.style.transformOrigin = "top left";
     div.style.transform = transform;
     div.style.position = "absolute";
@@ -50260,8 +50270,8 @@ class Card extends BaseItem {
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
     const rotation = this.transformation.getRotation();
-    const height3 = conf.CARD_DIMENSIONS.height * scaleY;
-    const width2 = conf.CARD_DIMENSIONS.width * scaleX;
+    const height3 = this.dimensions.height * scaleY;
+    const width2 = this.dimensions.width * scaleX;
     if (rotation % 180 === 0) {
       this.left = translateX;
       this.top = translateY;
@@ -50402,7 +50412,9 @@ class Deck extends BaseItem {
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
-        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular());
+        const firstCard = this.getFirstCard();
+        const firstCardDimensions = firstCard?.getDimensions();
+        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular()) && (!firstCardDimensions || firstCardDimensions.width === foundItem.getDimensions().width && firstCardDimensions.height === foundItem.getDimensions().height);
         if (canAddItem) {
           this.isPerpendicular = foundItem.getIsRotatedPerpendicular();
           foundItem.transformation.apply({
@@ -50412,6 +50424,19 @@ class Deck extends BaseItem {
             x: this.left + (this.index?.list().length || 0) * (this.isPerpendicular ? 0 : conf.DECK_HORIZONTAL_OFFSET),
             y: this.top + (this.index?.list().length || 0) * (this.isPerpendicular ? conf.DECK_VERTICAL_OFFSET : 0)
           });
+          if (firstCard) {
+            const { scaleX, scaleY } = foundItem.transformation.matrix;
+            const { scaleX: targetScaleX, scaleY: targetScaleY } = firstCard.transformation.matrix;
+            if (scaleX !== targetScaleX || scaleY !== targetScaleY) {
+              foundItem.transformation.apply({
+                class: "Transformation",
+                method: "scaleTo",
+                item: [this.id],
+                x: targetScaleX,
+                y: targetScaleY
+              });
+            }
+          }
           this.board.selection.remove(foundItem);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
@@ -50576,6 +50601,9 @@ class Deck extends BaseItem {
     this.isCacheDirty = false;
     this.updateMbr();
   }
+  getFirstCard() {
+    return this.index?.list()[0];
+  }
 }
 registerItem({
   item: Deck,
@@ -54084,7 +54112,7 @@ function transformItems({
   setSnapCursorPos
 }) {
   const items = selection.items.list();
-  const includesProportionalItem = items.some((item) => item.itemType === "Sticker" || item.itemType === "RichText" || item.itemType === "AINode" || item.itemType === "Video" || item.itemType === "Audio");
+  const includesProportionalItem = items.some((item) => item.itemType === "Sticker" || item.itemType === "RichText" || item.itemType === "AINode" || item.itemType === "Video" || item.itemType === "Audio" || item instanceof BaseItem && item.onlyProportionalResize);
   if (includesProportionalItem && (isWidth || isHeight)) {
     return null;
   }

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

@@ -38,6 +38,7 @@ export declare class BaseItem extends Mbr implements Geometry {
     shouldRenderOutsideViewRect: boolean;
     shouldUseRelativeAlignment: boolean;
     enableResize: boolean;
+    onlyProportionalResize: boolean;
     itemType: string;
     children: string[];
     constructor(board: Board, id?: string, defaultItemData?: BaseItemData | undefined, isGroupItem?: boolean);

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

@@ -17,11 +17,22 @@ export declare class Card extends BaseItem {
     backside: HTMLImageElement | null;
     private imageToRender;
     shouldUseCustomRender: boolean;
-    enableResize: boolean;
+    onlyProportionalResize: boolean;
+    dimensions: {
+        width: number;
+        height: number;
+    };
     constructor(board: Board, id?: string, urls?: {
         faceUrl: string;
         backsideUrl: string;
+    }, dimensions?: {
+        width: number;
+        height: number;
     });
+    getDimensions(): {
+        width: number;
+        height: number;
+    };
     createImages(): void;
     updateImageToRender(): void;
     getImage(): HTMLImageElement | null;

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

@@ -31,5 +31,6 @@ export declare class Deck extends BaseItem {
     render(context: DrawingContext): void;
     renderHTML(documentFactory: DocumentFactory): HTMLElement;
     private updateCache;
+    getFirstCard(): Card | undefined;
 }
 export declare function createDeck(event?: KeyboardEvent, board?: Board): void;

package/dist/types/Settings.d.ts

@@ -236,6 +236,10 @@ export declare const conf: {
         width: number;
         height: number;
     };
+    DEFAULT_GAME_ITEM_DIMENSIONS: {
+        width: number;
+        height: number;
+    };
 };
 export type Settings = typeof conf;
 export {};

package/package.json

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