microboard-ui-temp 0.1.86 → 0.1.88

package/dist/index.js

@@ -215914,7 +215914,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();
@@ -250194,10 +250194,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);
@@ -250302,6 +250314,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()) {
@@ -255904,6 +255924,9 @@ class Card extends BaseItem {
   getImage() {
     return this.imageToRender;
   }
+  getIsRotatedPerpendicular() {
+    return Boolean(this.transformation.getRotation() % 180);
+  }
   render(context, left, top) {
     if (this.transformationRenderBlock) {
       return;
@@ -255916,7 +255939,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);
@@ -256041,6 +256064,7 @@ class Deck extends BaseItem {
   isCacheDirty = true;
   enableResize = false;
   path = null;
+  isPerpendicular = undefined;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -256052,6 +256076,9 @@ class Deck extends BaseItem {
     });
     this.updateMbr();
   }
+  getIsPerpendicular() {
+    return this.isPerpendicular;
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -256059,13 +256086,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();
@@ -374910,20 +374939,20 @@ function FlipDeck({ rounded = "none" }) {
   }));
 }
 
-// src/features/ContextPanel/Buttons/CardGame/Card/RotateCard.tsx
+// src/features/ContextPanel/Buttons/RotateItem.tsx
 var import_react290 = __toESM(require_react(), 1);
-function RotateCard({ clockwise, rounded = "none" }) {
+function RotateItem({ clockwise, rounded = "none" }) {
   const { board } = useAppContext();
   const { t: t10 } = useTranslation();
   const handleClick = () => {
-    const cards = board.selection.items.list();
-    cards.forEach((card) => {
-      card.rotate(clockwise);
+    const items = board.selection.items.list();
+    items.forEach((item) => {
+      item.rotate(clockwise);
     });
   };
   return /* @__PURE__ */ import_react290.default.createElement(UiButton, {
     className: ContextPanelButton_module_default.contextPanelButton,
-    id: "rotate-card",
+    id: "rotate-item",
     tooltip: t10("contextPanel.gameItems.card.flip"),
     tooltipPosition: "top",
     onClick: handleClick,
@@ -375071,6 +375100,10 @@ function ContextPanel() {
     vertical: true
   }), /* @__PURE__ */ import_react291.default.createElement(RestOptionsMenu, null, /* @__PURE__ */ import_react291.default.createElement(BringToFront, null), /* @__PURE__ */ import_react291.default.createElement(SendToBack, null), /* @__PURE__ */ import_react291.default.createElement(CopyItemLink, null), /* @__PURE__ */ import_react291.default.createElement(SetLinkTo, null), /* @__PURE__ */ import_react291.default.createElement(Duplicate, null))), isImage && !isSelectUnderPointer && !isLocked && /* @__PURE__ */ import_react291.default.createElement(import_react291.default.Fragment, null, /* @__PURE__ */ import_react291.default.createElement(Lock, {
     rounded: "left"
+  }), /* @__PURE__ */ import_react291.default.createElement(RotateItem, {
+    clockwise: false
+  }), /* @__PURE__ */ import_react291.default.createElement(RotateItem, {
+    clockwise: true
   }), /* @__PURE__ */ import_react291.default.createElement(UiSeparator, {
     vertical: true
   }), /* @__PURE__ */ import_react291.default.createElement(Delete, null), /* @__PURE__ */ import_react291.default.createElement(UiSeparator, {
@@ -375144,9 +375177,9 @@ function ContextPanel() {
   }), /* @__PURE__ */ import_react291.default.createElement(CreateDeck, {
     onlyCards: true,
     rounded: "right"
-  }), /* @__PURE__ */ import_react291.default.createElement(RotateCard, {
+  }), /* @__PURE__ */ import_react291.default.createElement(RotateItem, {
     clockwise: false
-  }), /* @__PURE__ */ import_react291.default.createElement(RotateCard, {
+  }), /* @__PURE__ */ import_react291.default.createElement(RotateItem, {
     clockwise: true
   }), /* @__PURE__ */ import_react291.default.createElement(UiSeparator, {
     vertical: true

package/dist/spa.js

@@ -215914,7 +215914,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();
@@ -250194,10 +250194,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);
@@ -250302,6 +250314,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()) {
@@ -255904,6 +255924,9 @@ class Card extends BaseItem {
   getImage() {
     return this.imageToRender;
   }
+  getIsRotatedPerpendicular() {
+    return Boolean(this.transformation.getRotation() % 180);
+  }
   render(context, left, top) {
     if (this.transformationRenderBlock) {
       return;
@@ -255916,7 +255939,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);
@@ -256041,6 +256064,7 @@ class Deck extends BaseItem {
   isCacheDirty = true;
   enableResize = false;
   path = null;
+  isPerpendicular = undefined;
   constructor(board, id = "") {
     super(board, id, defaultDeckData, true);
     this.index.getUnderPoint = () => [];
@@ -256052,6 +256076,9 @@ class Deck extends BaseItem {
     });
     this.updateMbr();
   }
+  getIsPerpendicular() {
+    return this.isPerpendicular;
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -256059,13 +256086,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();
@@ -374910,20 +374939,20 @@ function FlipDeck({ rounded = "none" }) {
   }));
 }
 
-// src/features/ContextPanel/Buttons/CardGame/Card/RotateCard.tsx
+// src/features/ContextPanel/Buttons/RotateItem.tsx
 var import_react290 = __toESM(require_react(), 1);
-function RotateCard({ clockwise, rounded = "none" }) {
+function RotateItem({ clockwise, rounded = "none" }) {
   const { board } = useAppContext();
   const { t: t10 } = useTranslation();
   const handleClick = () => {
-    const cards = board.selection.items.list();
-    cards.forEach((card) => {
-      card.rotate(clockwise);
+    const items = board.selection.items.list();
+    items.forEach((item) => {
+      item.rotate(clockwise);
     });
   };
   return /* @__PURE__ */ import_react290.default.createElement(UiButton, {
     className: ContextPanelButton_module_default.contextPanelButton,
-    id: "rotate-card",
+    id: "rotate-item",
     tooltip: t10("contextPanel.gameItems.card.flip"),
     tooltipPosition: "top",
     onClick: handleClick,
@@ -375071,6 +375100,10 @@ function ContextPanel() {
     vertical: true
   }), /* @__PURE__ */ import_react291.default.createElement(RestOptionsMenu, null, /* @__PURE__ */ import_react291.default.createElement(BringToFront, null), /* @__PURE__ */ import_react291.default.createElement(SendToBack, null), /* @__PURE__ */ import_react291.default.createElement(CopyItemLink, null), /* @__PURE__ */ import_react291.default.createElement(SetLinkTo, null), /* @__PURE__ */ import_react291.default.createElement(Duplicate, null))), isImage && !isSelectUnderPointer && !isLocked && /* @__PURE__ */ import_react291.default.createElement(import_react291.default.Fragment, null, /* @__PURE__ */ import_react291.default.createElement(Lock, {
     rounded: "left"
+  }), /* @__PURE__ */ import_react291.default.createElement(RotateItem, {
+    clockwise: false
+  }), /* @__PURE__ */ import_react291.default.createElement(RotateItem, {
+    clockwise: true
   }), /* @__PURE__ */ import_react291.default.createElement(UiSeparator, {
     vertical: true
   }), /* @__PURE__ */ import_react291.default.createElement(Delete, null), /* @__PURE__ */ import_react291.default.createElement(UiSeparator, {
@@ -375144,9 +375177,9 @@ function ContextPanel() {
   }), /* @__PURE__ */ import_react291.default.createElement(CreateDeck, {
     onlyCards: true,
     rounded: "right"
-  }), /* @__PURE__ */ import_react291.default.createElement(RotateCard, {
+  }), /* @__PURE__ */ import_react291.default.createElement(RotateItem, {
     clockwise: false
-  }), /* @__PURE__ */ import_react291.default.createElement(RotateCard, {
+  }), /* @__PURE__ */ import_react291.default.createElement(RotateItem, {
     clockwise: true
   }), /* @__PURE__ */ import_react291.default.createElement(UiSeparator, {
     vertical: true

package/dist/types/features/ContextPanel/Buttons/{CardGame/Card/RotateCard.d.ts → RotateItem.d.ts}

@@ -2,5 +2,5 @@ interface Props {
     clockwise: boolean;
     rounded?: string;
 }
-export declare function RotateCard({ clockwise, rounded }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function RotateItem({ clockwise, rounded }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "microboard-ui-temp",
-  "version": "0.1.86",
+  "version": "0.1.88",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "type": "module",
@@ -60,7 +60,7 @@
     "i18next-browser-languagedetector": "^8.2.0",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
-    "microboard-temp": "^0.5.27",
+    "microboard-temp": "^0.5.29",
     "nanoid": "^5.1.5",
     "prop-types": "^15.8.1",
     "react-hot-toast": "2.4.1",