microboard-temp 0.5.26 → 0.5.28

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();
@@ -42229,6 +42229,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 +47882,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 +47897,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 +48025,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 +48037,9 @@ class Deck extends BaseItem {
     });
     this.updateMbr();
   }
+  getIsPerpendicular() {
+    return this.isPerpendicular;
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -48032,13 +48047,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();
@@ -56544,11 +56561,11 @@ function handleBoardSubscriptionCompletedMsg(msg, board) {
   }
   handleBoardEventListApplication(msg.eventsSinceLastSnapshot, board);
   board.setInterfaceType(msg.mode);
+  board.subject.publish();
   onBoardLoad(board);
 }
 function handleSeqNumApplication(initialSequenceNumber, board) {
   const { log } = board.events;
-  console.log(`upd seq number from ${log.currentSequenceNumber.toString()} to ${initialSequenceNumber}`);
   log.currentSequenceNumber = initialSequenceNumber;
   if (log.pendingEvent) {
     log.pendingEvent.sequenceNumber = log.currentSequenceNumber;

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();
@@ -42229,6 +42229,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 +47882,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 +47897,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 +48025,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 +48037,9 @@ class Deck extends BaseItem {
     });
     this.updateMbr();
   }
+  getIsPerpendicular() {
+    return this.isPerpendicular;
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -48032,13 +48047,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();
@@ -56544,11 +56561,11 @@ function handleBoardSubscriptionCompletedMsg(msg, board) {
   }
   handleBoardEventListApplication(msg.eventsSinceLastSnapshot, board);
   board.setInterfaceType(msg.mode);
+  board.subject.publish();
   onBoardLoad(board);
 }
 function handleSeqNumApplication(initialSequenceNumber, board) {
   const { log } = board.events;
-  console.log(`upd seq number from ${log.currentSequenceNumber.toString()} to ${initialSequenceNumber}`);
   log.currentSequenceNumber = initialSequenceNumber;
   if (log.pendingEvent) {
     log.pendingEvent.sequenceNumber = log.currentSequenceNumber;

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();
@@ -44702,6 +44702,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 +50355,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 +50370,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 +50498,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 +50510,9 @@ class Deck extends BaseItem {
     });
     this.updateMbr();
   }
+  getIsPerpendicular() {
+    return this.isPerpendicular;
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -50505,13 +50520,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();
@@ -59017,11 +59034,11 @@ function handleBoardSubscriptionCompletedMsg(msg, board) {
   }
   handleBoardEventListApplication(msg.eventsSinceLastSnapshot, board);
   board.setInterfaceType(msg.mode);
+  board.subject.publish();
   onBoardLoad(board);
 }
 function handleSeqNumApplication(initialSequenceNumber, board) {
   const { log } = board.events;
-  console.log(`upd seq number from ${log.currentSequenceNumber.toString()} to ${initialSequenceNumber}`);
   log.currentSequenceNumber = initialSequenceNumber;
   if (log.pendingEvent) {
     log.pendingEvent.sequenceNumber = log.currentSequenceNumber;

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();
@@ -42075,6 +42075,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 +47728,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 +47743,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 +47871,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 +47883,9 @@ class Deck extends BaseItem {
     });
     this.updateMbr();
   }
+  getIsPerpendicular() {
+    return this.isPerpendicular;
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -47878,13 +47893,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();
@@ -56390,11 +56407,11 @@ function handleBoardSubscriptionCompletedMsg(msg, board) {
   }
   handleBoardEventListApplication(msg.eventsSinceLastSnapshot, board);
   board.setInterfaceType(msg.mode);
+  board.subject.publish();
   onBoardLoad(board);
 }
 function handleSeqNumApplication(initialSequenceNumber, board) {
   const { log } = board.events;
-  console.log(`upd seq number from ${log.currentSequenceNumber.toString()} to ${initialSequenceNumber}`);
   log.currentSequenceNumber = initialSequenceNumber;
   if (log.pendingEvent) {
     log.pendingEvent.sequenceNumber = log.currentSequenceNumber;

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();
@@ -42068,6 +42068,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 +47721,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 +47736,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 +47864,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 +47876,9 @@ class Deck extends BaseItem {
     });
     this.updateMbr();
   }
+  getIsPerpendicular() {
+    return this.isPerpendicular;
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -47871,13 +47886,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();
@@ -56383,11 +56400,11 @@ function handleBoardSubscriptionCompletedMsg(msg, board) {
   }
   handleBoardEventListApplication(msg.eventsSinceLastSnapshot, board);
   board.setInterfaceType(msg.mode);
+  board.subject.publish();
   onBoardLoad(board);
 }
 function handleSeqNumApplication(initialSequenceNumber, board) {
   const { log } = board.events;
-  console.log(`upd seq number from ${log.currentSequenceNumber.toString()} to ${initialSequenceNumber}`);
   log.currentSequenceNumber = initialSequenceNumber;
   if (log.pendingEvent) {
     log.pendingEvent.sequenceNumber = log.currentSequenceNumber;

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();
@@ -44536,6 +44536,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 +50189,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 +50204,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 +50332,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 +50344,9 @@ class Deck extends BaseItem {
     });
     this.updateMbr();
   }
+  getIsPerpendicular() {
+    return this.isPerpendicular;
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -50339,13 +50354,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();
@@ -58851,11 +58868,11 @@ function handleBoardSubscriptionCompletedMsg(msg, board) {
   }
   handleBoardEventListApplication(msg.eventsSinceLastSnapshot, board);
   board.setInterfaceType(msg.mode);
+  board.subject.publish();
   onBoardLoad(board);
 }
 function handleSeqNumApplication(initialSequenceNumber, board) {
   const { log } = board.events;
-  console.log(`upd seq number from ${log.currentSequenceNumber.toString()} to ${initialSequenceNumber}`);
   log.currentSequenceNumber = initialSequenceNumber;
   if (log.pendingEvent) {
     log.pendingEvent.sequenceNumber = log.currentSequenceNumber;

package/dist/types/Events/MessageRouter/handleBoardSubscriptionCompletedMsg.d.ts

@@ -1,5 +1,5 @@
-import { Board } from '../../Board';
-import { BoardSubscriptionCompletedMsg } from './boardMessageInterface';
+import { Board } from "../../Board";
+import { BoardSubscriptionCompletedMsg } from "./boardMessageInterface";
 export declare function handleBoardSubscriptionCompletedMsg(msg: BoardSubscriptionCompletedMsg, board: Board): void;
 export declare function handleSeqNumApplication(initialSequenceNumber: number, board: Board): void;
 export declare function startIntervals(board: Board): void;

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.26",
+  "version": "0.5.28",
   "description": "A flexible interactive whiteboard library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",