microboard-temp 0.5.27 → 0.5.29

package/dist/cjs/browser.js

@@ -7069,7 +7069,7 @@ var conf = {
   FALLBACK_LNG: "en",
   cursorsMap,
   DECK_HORIZONTAL_OFFSET: 2,
-  DECK_VERTICAL_OFFSET: 0,
+  DECK_VERTICAL_OFFSET: 2,
   CARD_DIMENSIONS: { width: 250, height: 400 }
 };
 initDefaultI18N();
@@ -42121,10 +42121,22 @@ class ImageItem extends BaseItem {
   };
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
-    this.left = translateX;
-    this.top = translateY;
-    this.right = this.left + this.image.width * scaleX;
-    this.bottom = this.top + this.image.height * scaleY;
+    const rotation = this.transformation.getRotation();
+    const width2 = this.image.width * scaleX;
+    const height2 = this.image.height * scaleY;
+    if (rotation % 180 === 0) {
+      this.left = translateX;
+      this.top = translateY;
+      this.right = this.left + width2;
+      this.bottom = this.top + height2;
+    } else {
+      const centerX = translateX + width2 / 2;
+      const centerY = translateY + height2 / 2;
+      this.left = centerX - height2 / 2;
+      this.top = centerY - width2 / 2;
+      this.right = this.left + height2;
+      this.bottom = this.top + width2;
+    }
   }
   doOnceBeforeOnLoad = (callback) => {
     this.loadCallbacks.push(callback);
@@ -42229,6 +42241,14 @@ class ImageItem extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     this.transformation.matrix.applyToContext(ctx);
+    const rotation = this.transformation.getRotation();
+    if (rotation !== 0) {
+      const imgWidth = this.image.width || 0;
+      const imgHeight = this.image.height || 0;
+      ctx.translate(imgWidth / 2, imgHeight / 2);
+      ctx.rotate(rotation * Math.PI / 180);
+      ctx.translate(-imgWidth / 2, -imgHeight / 2);
+    }
     ctx.drawImage(this.image, 0, 0);
     ctx.restore();
     if (this.getLinkTo()) {
@@ -47874,6 +47894,9 @@ class Card extends BaseItem {
   getImage() {
     return this.imageToRender;
   }
+  getIsRotatedPerpendicular() {
+    return Boolean(this.transformation.getRotation() % 180);
+  }
   render(context, left, top) {
     if (this.transformationRenderBlock) {
       return;
@@ -47886,7 +47909,7 @@ class Card extends BaseItem {
       const height3 = this.getHeight();
       if (typeof left === "number" && typeof top === "number") {
         centerX = left + width2 / 2;
-        centerX = top + height3 / 2;
+        centerY = top + height3 / 2;
       }
       ctx.translate(centerX, centerY);
       ctx.rotate(this.transformation.getRotation() * Math.PI / 180);
@@ -48014,6 +48037,7 @@ class Deck extends BaseItem {
   isCacheDirty = true;
   enableResize = false;
   path = null;
+  isPerpendicular = undefined;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -48025,6 +48049,9 @@ class Deck extends BaseItem {
     });
     this.updateMbr();
   }
+  getIsPerpendicular() {
+    return this.isPerpendicular;
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -48032,13 +48059,15 @@ class Deck extends BaseItem {
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
-        if (!this.index?.getById(childId) && foundItem?.itemType === "Card") {
+        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular());
+        if (canAddItem) {
+          this.isPerpendicular = foundItem.getIsRotatedPerpendicular();
           foundItem.transformation.apply({
             class: "Transformation",
             method: "translateTo",
             item: [this.id],
-            x: this.left + (this.index?.list().length || 0) * conf.DECK_HORIZONTAL_OFFSET,
-            y: this.top - (this.index?.list().length || 0) * conf.DECK_VERTICAL_OFFSET
+            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)
           });
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();

package/dist/cjs/index.js

@@ -7069,7 +7069,7 @@ var conf = {
   FALLBACK_LNG: "en",
   cursorsMap,
   DECK_HORIZONTAL_OFFSET: 2,
-  DECK_VERTICAL_OFFSET: 0,
+  DECK_VERTICAL_OFFSET: 2,
   CARD_DIMENSIONS: { width: 250, height: 400 }
 };
 initDefaultI18N();
@@ -42121,10 +42121,22 @@ class ImageItem extends BaseItem {
   };
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
-    this.left = translateX;
-    this.top = translateY;
-    this.right = this.left + this.image.width * scaleX;
-    this.bottom = this.top + this.image.height * scaleY;
+    const rotation = this.transformation.getRotation();
+    const width2 = this.image.width * scaleX;
+    const height2 = this.image.height * scaleY;
+    if (rotation % 180 === 0) {
+      this.left = translateX;
+      this.top = translateY;
+      this.right = this.left + width2;
+      this.bottom = this.top + height2;
+    } else {
+      const centerX = translateX + width2 / 2;
+      const centerY = translateY + height2 / 2;
+      this.left = centerX - height2 / 2;
+      this.top = centerY - width2 / 2;
+      this.right = this.left + height2;
+      this.bottom = this.top + width2;
+    }
   }
   doOnceBeforeOnLoad = (callback) => {
     this.loadCallbacks.push(callback);
@@ -42229,6 +42241,14 @@ class ImageItem extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     this.transformation.matrix.applyToContext(ctx);
+    const rotation = this.transformation.getRotation();
+    if (rotation !== 0) {
+      const imgWidth = this.image.width || 0;
+      const imgHeight = this.image.height || 0;
+      ctx.translate(imgWidth / 2, imgHeight / 2);
+      ctx.rotate(rotation * Math.PI / 180);
+      ctx.translate(-imgWidth / 2, -imgHeight / 2);
+    }
     ctx.drawImage(this.image, 0, 0);
     ctx.restore();
     if (this.getLinkTo()) {
@@ -47874,6 +47894,9 @@ class Card extends BaseItem {
   getImage() {
     return this.imageToRender;
   }
+  getIsRotatedPerpendicular() {
+    return Boolean(this.transformation.getRotation() % 180);
+  }
   render(context, left, top) {
     if (this.transformationRenderBlock) {
       return;
@@ -47886,7 +47909,7 @@ class Card extends BaseItem {
       const height3 = this.getHeight();
       if (typeof left === "number" && typeof top === "number") {
         centerX = left + width2 / 2;
-        centerX = top + height3 / 2;
+        centerY = top + height3 / 2;
       }
       ctx.translate(centerX, centerY);
       ctx.rotate(this.transformation.getRotation() * Math.PI / 180);
@@ -48014,6 +48037,7 @@ class Deck extends BaseItem {
   isCacheDirty = true;
   enableResize = false;
   path = null;
+  isPerpendicular = undefined;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -48025,6 +48049,9 @@ class Deck extends BaseItem {
     });
     this.updateMbr();
   }
+  getIsPerpendicular() {
+    return this.isPerpendicular;
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -48032,13 +48059,15 @@ class Deck extends BaseItem {
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
-        if (!this.index?.getById(childId) && foundItem?.itemType === "Card") {
+        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular());
+        if (canAddItem) {
+          this.isPerpendicular = foundItem.getIsRotatedPerpendicular();
           foundItem.transformation.apply({
             class: "Transformation",
             method: "translateTo",
             item: [this.id],
-            x: this.left + (this.index?.list().length || 0) * conf.DECK_HORIZONTAL_OFFSET,
-            y: this.top - (this.index?.list().length || 0) * conf.DECK_VERTICAL_OFFSET
+            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)
           });
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();

package/dist/cjs/node.js

@@ -8106,7 +8106,7 @@ var conf = {
   FALLBACK_LNG: "en",
   cursorsMap,
   DECK_HORIZONTAL_OFFSET: 2,
-  DECK_VERTICAL_OFFSET: 0,
+  DECK_VERTICAL_OFFSET: 2,
   CARD_DIMENSIONS: { width: 250, height: 400 }
 };
 initDefaultI18N();
@@ -44594,10 +44594,22 @@ class ImageItem extends BaseItem {
   };
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
-    this.left = translateX;
-    this.top = translateY;
-    this.right = this.left + this.image.width * scaleX;
-    this.bottom = this.top + this.image.height * scaleY;
+    const rotation = this.transformation.getRotation();
+    const width2 = this.image.width * scaleX;
+    const height2 = this.image.height * scaleY;
+    if (rotation % 180 === 0) {
+      this.left = translateX;
+      this.top = translateY;
+      this.right = this.left + width2;
+      this.bottom = this.top + height2;
+    } else {
+      const centerX = translateX + width2 / 2;
+      const centerY = translateY + height2 / 2;
+      this.left = centerX - height2 / 2;
+      this.top = centerY - width2 / 2;
+      this.right = this.left + height2;
+      this.bottom = this.top + width2;
+    }
   }
   doOnceBeforeOnLoad = (callback) => {
     this.loadCallbacks.push(callback);
@@ -44702,6 +44714,14 @@ class ImageItem extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     this.transformation.matrix.applyToContext(ctx);
+    const rotation = this.transformation.getRotation();
+    if (rotation !== 0) {
+      const imgWidth = this.image.width || 0;
+      const imgHeight = this.image.height || 0;
+      ctx.translate(imgWidth / 2, imgHeight / 2);
+      ctx.rotate(rotation * Math.PI / 180);
+      ctx.translate(-imgWidth / 2, -imgHeight / 2);
+    }
     ctx.drawImage(this.image, 0, 0);
     ctx.restore();
     if (this.getLinkTo()) {
@@ -50347,6 +50367,9 @@ class Card extends BaseItem {
   getImage() {
     return this.imageToRender;
   }
+  getIsRotatedPerpendicular() {
+    return Boolean(this.transformation.getRotation() % 180);
+  }
   render(context, left, top) {
     if (this.transformationRenderBlock) {
       return;
@@ -50359,7 +50382,7 @@ class Card extends BaseItem {
       const height3 = this.getHeight();
       if (typeof left === "number" && typeof top === "number") {
         centerX = left + width2 / 2;
-        centerX = top + height3 / 2;
+        centerY = top + height3 / 2;
       }
       ctx.translate(centerX, centerY);
       ctx.rotate(this.transformation.getRotation() * Math.PI / 180);
@@ -50487,6 +50510,7 @@ class Deck extends BaseItem {
   isCacheDirty = true;
   enableResize = false;
   path = null;
+  isPerpendicular = undefined;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -50498,6 +50522,9 @@ class Deck extends BaseItem {
     });
     this.updateMbr();
   }
+  getIsPerpendicular() {
+    return this.isPerpendicular;
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -50505,13 +50532,15 @@ class Deck extends BaseItem {
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
-        if (!this.index?.getById(childId) && foundItem?.itemType === "Card") {
+        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular());
+        if (canAddItem) {
+          this.isPerpendicular = foundItem.getIsRotatedPerpendicular();
           foundItem.transformation.apply({
             class: "Transformation",
             method: "translateTo",
             item: [this.id],
-            x: this.left + (this.index?.list().length || 0) * conf.DECK_HORIZONTAL_OFFSET,
-            y: this.top - (this.index?.list().length || 0) * conf.DECK_VERTICAL_OFFSET
+            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)
           });
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();

package/dist/esm/browser.js

@@ -6906,7 +6906,7 @@ var conf = {
   FALLBACK_LNG: "en",
   cursorsMap,
   DECK_HORIZONTAL_OFFSET: 2,
-  DECK_VERTICAL_OFFSET: 0,
+  DECK_VERTICAL_OFFSET: 2,
   CARD_DIMENSIONS: { width: 250, height: 400 }
 };
 initDefaultI18N();
@@ -41967,10 +41967,22 @@ class ImageItem extends BaseItem {
   };
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
-    this.left = translateX;
-    this.top = translateY;
-    this.right = this.left + this.image.width * scaleX;
-    this.bottom = this.top + this.image.height * scaleY;
+    const rotation = this.transformation.getRotation();
+    const width2 = this.image.width * scaleX;
+    const height2 = this.image.height * scaleY;
+    if (rotation % 180 === 0) {
+      this.left = translateX;
+      this.top = translateY;
+      this.right = this.left + width2;
+      this.bottom = this.top + height2;
+    } else {
+      const centerX = translateX + width2 / 2;
+      const centerY = translateY + height2 / 2;
+      this.left = centerX - height2 / 2;
+      this.top = centerY - width2 / 2;
+      this.right = this.left + height2;
+      this.bottom = this.top + width2;
+    }
   }
   doOnceBeforeOnLoad = (callback) => {
     this.loadCallbacks.push(callback);
@@ -42075,6 +42087,14 @@ class ImageItem extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     this.transformation.matrix.applyToContext(ctx);
+    const rotation = this.transformation.getRotation();
+    if (rotation !== 0) {
+      const imgWidth = this.image.width || 0;
+      const imgHeight = this.image.height || 0;
+      ctx.translate(imgWidth / 2, imgHeight / 2);
+      ctx.rotate(rotation * Math.PI / 180);
+      ctx.translate(-imgWidth / 2, -imgHeight / 2);
+    }
     ctx.drawImage(this.image, 0, 0);
     ctx.restore();
     if (this.getLinkTo()) {
@@ -47720,6 +47740,9 @@ class Card extends BaseItem {
   getImage() {
     return this.imageToRender;
   }
+  getIsRotatedPerpendicular() {
+    return Boolean(this.transformation.getRotation() % 180);
+  }
   render(context, left, top) {
     if (this.transformationRenderBlock) {
       return;
@@ -47732,7 +47755,7 @@ class Card extends BaseItem {
       const height3 = this.getHeight();
       if (typeof left === "number" && typeof top === "number") {
         centerX = left + width2 / 2;
-        centerX = top + height3 / 2;
+        centerY = top + height3 / 2;
       }
       ctx.translate(centerX, centerY);
       ctx.rotate(this.transformation.getRotation() * Math.PI / 180);
@@ -47860,6 +47883,7 @@ class Deck extends BaseItem {
   isCacheDirty = true;
   enableResize = false;
   path = null;
+  isPerpendicular = undefined;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -47871,6 +47895,9 @@ class Deck extends BaseItem {
     });
     this.updateMbr();
   }
+  getIsPerpendicular() {
+    return this.isPerpendicular;
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -47878,13 +47905,15 @@ class Deck extends BaseItem {
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
-        if (!this.index?.getById(childId) && foundItem?.itemType === "Card") {
+        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular());
+        if (canAddItem) {
+          this.isPerpendicular = foundItem.getIsRotatedPerpendicular();
           foundItem.transformation.apply({
             class: "Transformation",
             method: "translateTo",
             item: [this.id],
-            x: this.left + (this.index?.list().length || 0) * conf.DECK_HORIZONTAL_OFFSET,
-            y: this.top - (this.index?.list().length || 0) * conf.DECK_VERTICAL_OFFSET
+            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)
           });
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();

package/dist/esm/index.js

@@ -6899,7 +6899,7 @@ var conf = {
   FALLBACK_LNG: "en",
   cursorsMap,
   DECK_HORIZONTAL_OFFSET: 2,
-  DECK_VERTICAL_OFFSET: 0,
+  DECK_VERTICAL_OFFSET: 2,
   CARD_DIMENSIONS: { width: 250, height: 400 }
 };
 initDefaultI18N();
@@ -41960,10 +41960,22 @@ class ImageItem extends BaseItem {
   };
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
-    this.left = translateX;
-    this.top = translateY;
-    this.right = this.left + this.image.width * scaleX;
-    this.bottom = this.top + this.image.height * scaleY;
+    const rotation = this.transformation.getRotation();
+    const width2 = this.image.width * scaleX;
+    const height2 = this.image.height * scaleY;
+    if (rotation % 180 === 0) {
+      this.left = translateX;
+      this.top = translateY;
+      this.right = this.left + width2;
+      this.bottom = this.top + height2;
+    } else {
+      const centerX = translateX + width2 / 2;
+      const centerY = translateY + height2 / 2;
+      this.left = centerX - height2 / 2;
+      this.top = centerY - width2 / 2;
+      this.right = this.left + height2;
+      this.bottom = this.top + width2;
+    }
   }
   doOnceBeforeOnLoad = (callback) => {
     this.loadCallbacks.push(callback);
@@ -42068,6 +42080,14 @@ class ImageItem extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     this.transformation.matrix.applyToContext(ctx);
+    const rotation = this.transformation.getRotation();
+    if (rotation !== 0) {
+      const imgWidth = this.image.width || 0;
+      const imgHeight = this.image.height || 0;
+      ctx.translate(imgWidth / 2, imgHeight / 2);
+      ctx.rotate(rotation * Math.PI / 180);
+      ctx.translate(-imgWidth / 2, -imgHeight / 2);
+    }
     ctx.drawImage(this.image, 0, 0);
     ctx.restore();
     if (this.getLinkTo()) {
@@ -47713,6 +47733,9 @@ class Card extends BaseItem {
   getImage() {
     return this.imageToRender;
   }
+  getIsRotatedPerpendicular() {
+    return Boolean(this.transformation.getRotation() % 180);
+  }
   render(context, left, top) {
     if (this.transformationRenderBlock) {
       return;
@@ -47725,7 +47748,7 @@ class Card extends BaseItem {
       const height3 = this.getHeight();
       if (typeof left === "number" && typeof top === "number") {
         centerX = left + width2 / 2;
-        centerX = top + height3 / 2;
+        centerY = top + height3 / 2;
       }
       ctx.translate(centerX, centerY);
       ctx.rotate(this.transformation.getRotation() * Math.PI / 180);
@@ -47853,6 +47876,7 @@ class Deck extends BaseItem {
   isCacheDirty = true;
   enableResize = false;
   path = null;
+  isPerpendicular = undefined;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -47864,6 +47888,9 @@ class Deck extends BaseItem {
     });
     this.updateMbr();
   }
+  getIsPerpendicular() {
+    return this.isPerpendicular;
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -47871,13 +47898,15 @@ class Deck extends BaseItem {
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
-        if (!this.index?.getById(childId) && foundItem?.itemType === "Card") {
+        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular());
+        if (canAddItem) {
+          this.isPerpendicular = foundItem.getIsRotatedPerpendicular();
           foundItem.transformation.apply({
             class: "Transformation",
             method: "translateTo",
             item: [this.id],
-            x: this.left + (this.index?.list().length || 0) * conf.DECK_HORIZONTAL_OFFSET,
-            y: this.top - (this.index?.list().length || 0) * conf.DECK_VERTICAL_OFFSET
+            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)
           });
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();

package/dist/esm/node.js

@@ -7683,7 +7683,7 @@ var conf = {
   FALLBACK_LNG: "en",
   cursorsMap,
   DECK_HORIZONTAL_OFFSET: 2,
-  DECK_VERTICAL_OFFSET: 0,
+  DECK_VERTICAL_OFFSET: 2,
   CARD_DIMENSIONS: { width: 250, height: 400 }
 };
 initDefaultI18N();
@@ -44428,10 +44428,22 @@ class ImageItem extends BaseItem {
   };
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
-    this.left = translateX;
-    this.top = translateY;
-    this.right = this.left + this.image.width * scaleX;
-    this.bottom = this.top + this.image.height * scaleY;
+    const rotation = this.transformation.getRotation();
+    const width2 = this.image.width * scaleX;
+    const height2 = this.image.height * scaleY;
+    if (rotation % 180 === 0) {
+      this.left = translateX;
+      this.top = translateY;
+      this.right = this.left + width2;
+      this.bottom = this.top + height2;
+    } else {
+      const centerX = translateX + width2 / 2;
+      const centerY = translateY + height2 / 2;
+      this.left = centerX - height2 / 2;
+      this.top = centerY - width2 / 2;
+      this.right = this.left + height2;
+      this.bottom = this.top + width2;
+    }
   }
   doOnceBeforeOnLoad = (callback) => {
     this.loadCallbacks.push(callback);
@@ -44536,6 +44548,14 @@ class ImageItem extends BaseItem {
     const ctx = context.ctx;
     ctx.save();
     this.transformation.matrix.applyToContext(ctx);
+    const rotation = this.transformation.getRotation();
+    if (rotation !== 0) {
+      const imgWidth = this.image.width || 0;
+      const imgHeight = this.image.height || 0;
+      ctx.translate(imgWidth / 2, imgHeight / 2);
+      ctx.rotate(rotation * Math.PI / 180);
+      ctx.translate(-imgWidth / 2, -imgHeight / 2);
+    }
     ctx.drawImage(this.image, 0, 0);
     ctx.restore();
     if (this.getLinkTo()) {
@@ -50181,6 +50201,9 @@ class Card extends BaseItem {
   getImage() {
     return this.imageToRender;
   }
+  getIsRotatedPerpendicular() {
+    return Boolean(this.transformation.getRotation() % 180);
+  }
   render(context, left, top) {
     if (this.transformationRenderBlock) {
       return;
@@ -50193,7 +50216,7 @@ class Card extends BaseItem {
       const height3 = this.getHeight();
       if (typeof left === "number" && typeof top === "number") {
         centerX = left + width2 / 2;
-        centerX = top + height3 / 2;
+        centerY = top + height3 / 2;
       }
       ctx.translate(centerX, centerY);
       ctx.rotate(this.transformation.getRotation() * Math.PI / 180);
@@ -50321,6 +50344,7 @@ class Deck extends BaseItem {
   isCacheDirty = true;
   enableResize = false;
   path = null;
+  isPerpendicular = undefined;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -50332,6 +50356,9 @@ class Deck extends BaseItem {
     });
     this.updateMbr();
   }
+  getIsPerpendicular() {
+    return this.isPerpendicular;
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -50339,13 +50366,15 @@ class Deck extends BaseItem {
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
-        if (!this.index?.getById(childId) && foundItem?.itemType === "Card") {
+        const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular());
+        if (canAddItem) {
+          this.isPerpendicular = foundItem.getIsRotatedPerpendicular();
           foundItem.transformation.apply({
             class: "Transformation",
             method: "translateTo",
             item: [this.id],
-            x: this.left + (this.index?.list().length || 0) * conf.DECK_HORIZONTAL_OFFSET,
-            y: this.top - (this.index?.list().length || 0) * conf.DECK_VERTICAL_OFFSET
+            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)
           });
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();

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

@@ -25,6 +25,7 @@ export declare class Card extends BaseItem {
     createImages(): void;
     updateImageToRender(): void;
     getImage(): HTMLImageElement | null;
+    getIsRotatedPerpendicular(): boolean;
     render(context: DrawingContext, left?: number, top?: number): void;
     renderHTML(documentFactory: DocumentFactory): HTMLElement;
     updateMbr(): void;

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

@@ -14,7 +14,9 @@ export declare class Deck extends BaseItem {
     private isCacheDirty;
     enableResize: boolean;
     path: Path | null;
+    private isPerpendicular;
     constructor(board: Board, id?: string);
+    getIsPerpendicular(): boolean | undefined;
     applyAddChildren(childIds: string[]): void;
     applyRemoveChildren(childIds: string[]): void;
     getDeck(): Card[];

package/package.json

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