microboard-temp 0.5.22 → 0.5.24

package/dist/cjs/browser.js

@@ -7493,14 +7493,7 @@ class Transformation {
       this.isLocked = data.isLocked;
     }
     if (data.rotate) {
-      if (data.dimension) {
-        this.matrix.rotateByObjectCenter(data.rotate, {
-          width: data.dimension.width,
-          height: data.dimension.height
-        }, { x: data.scaleX, y: data.scaleY });
-      } else {
-        this.matrix.rotateBy(data.rotate);
-      }
+      this.rotate = data.rotate;
     }
     this.subject.publish(this, {
       class: "Transformation",
@@ -7635,7 +7628,6 @@ class Transformation {
       }
     }
     this.rotate = degree;
-    this.matrix.rotateBy(degree);
   }
   applyRotateBy(degree) {
     this.rotateTo(this.rotate + degree);
@@ -21554,6 +21546,9 @@ class BaseItem extends Mbr {
       newData: { childIds: childrenArr.map((child) => child.getId()) }
     });
   }
+  rotate(clockwise = true) {
+    this.transformation.rotateBy(clockwise ? 90 : -90);
+  }
   emitNesting(children) {
     const itemsToAdd = [];
     const itemsToRemove = [];
@@ -21586,6 +21581,9 @@ class BaseItem extends Mbr {
     }
     return false;
   }
+  getMbr() {
+    return new Mbr(this.left, this.top, this.right, this.bottom);
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -47883,7 +47881,16 @@ class Card extends BaseItem {
     const ctx = context.ctx;
     if (this.imageToRender && this.imageToRender.complete) {
       ctx.save();
-      ctx.drawImage(this.imageToRender, typeof left === "number" ? left : this.left, typeof top === "number" ? top : this.top, conf.CARD_DIMENSIONS.width, conf.CARD_DIMENSIONS.height);
+      let { x: centerX, y: centerY } = this.getMbr().getCenter();
+      const width2 = this.getWidth();
+      const height3 = this.getHeight();
+      if (typeof left === "number" && typeof top === "number") {
+        centerX = left + width2 / 2;
+        centerX = top + height3 / 2;
+      }
+      ctx.translate(centerX, centerY);
+      ctx.rotate(this.transformation.getRotation() * Math.PI / 180);
+      ctx.drawImage(this.imageToRender, -width2 / 2, -height3 / 2, width2, height3);
       ctx.restore();
     }
   }
@@ -47903,10 +47910,22 @@ class Card extends BaseItem {
   }
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
-    this.left = translateX;
-    this.top = translateY;
-    this.right = this.left + conf.CARD_DIMENSIONS.width * scaleX;
-    this.bottom = this.top + conf.CARD_DIMENSIONS.height * scaleY;
+    const rotation = this.transformation.getRotation();
+    const height3 = conf.CARD_DIMENSIONS.height * scaleY;
+    const width2 = conf.CARD_DIMENSIONS.width * scaleX;
+    if (rotation % 180 === 0) {
+      this.left = translateX;
+      this.top = translateY;
+      this.right = this.left + width2;
+      this.bottom = this.top + height3;
+    } else {
+      const centerX = translateX + width2 / 2;
+      const centerY = translateY + height3 / 2;
+      this.left = centerX - height3 / 2;
+      this.top = centerY - width2 / 2;
+      this.right = this.left + height3;
+      this.bottom = this.top + width2;
+    }
   }
   getPath() {
     return new Path(this.getMbr().getLines());
@@ -54081,7 +54100,7 @@ class Board {
         itemData.transformation.translateX = translateX - minX + x;
         itemData.transformation.translateY = translateY - minY + y;
       }
-      if ("children" in itemData && itemData.children?.length) {
+      if (itemData.itemType !== "RichText" && "children" in itemData && itemData.children?.length) {
         itemData.children = itemData.children.map((childId) => newItemIdMap[childId]);
       }
       newMap[newItemId] = itemData;

package/dist/cjs/index.js

@@ -7493,14 +7493,7 @@ class Transformation {
       this.isLocked = data.isLocked;
     }
     if (data.rotate) {
-      if (data.dimension) {
-        this.matrix.rotateByObjectCenter(data.rotate, {
-          width: data.dimension.width,
-          height: data.dimension.height
-        }, { x: data.scaleX, y: data.scaleY });
-      } else {
-        this.matrix.rotateBy(data.rotate);
-      }
+      this.rotate = data.rotate;
     }
     this.subject.publish(this, {
       class: "Transformation",
@@ -7635,7 +7628,6 @@ class Transformation {
       }
     }
     this.rotate = degree;
-    this.matrix.rotateBy(degree);
   }
   applyRotateBy(degree) {
     this.rotateTo(this.rotate + degree);
@@ -21554,6 +21546,9 @@ class BaseItem extends Mbr {
       newData: { childIds: childrenArr.map((child) => child.getId()) }
     });
   }
+  rotate(clockwise = true) {
+    this.transformation.rotateBy(clockwise ? 90 : -90);
+  }
   emitNesting(children) {
     const itemsToAdd = [];
     const itemsToRemove = [];
@@ -21586,6 +21581,9 @@ class BaseItem extends Mbr {
     }
     return false;
   }
+  getMbr() {
+    return new Mbr(this.left, this.top, this.right, this.bottom);
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -47883,7 +47881,16 @@ class Card extends BaseItem {
     const ctx = context.ctx;
     if (this.imageToRender && this.imageToRender.complete) {
       ctx.save();
-      ctx.drawImage(this.imageToRender, typeof left === "number" ? left : this.left, typeof top === "number" ? top : this.top, conf.CARD_DIMENSIONS.width, conf.CARD_DIMENSIONS.height);
+      let { x: centerX, y: centerY } = this.getMbr().getCenter();
+      const width2 = this.getWidth();
+      const height3 = this.getHeight();
+      if (typeof left === "number" && typeof top === "number") {
+        centerX = left + width2 / 2;
+        centerX = top + height3 / 2;
+      }
+      ctx.translate(centerX, centerY);
+      ctx.rotate(this.transformation.getRotation() * Math.PI / 180);
+      ctx.drawImage(this.imageToRender, -width2 / 2, -height3 / 2, width2, height3);
       ctx.restore();
     }
   }
@@ -47903,10 +47910,22 @@ class Card extends BaseItem {
   }
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
-    this.left = translateX;
-    this.top = translateY;
-    this.right = this.left + conf.CARD_DIMENSIONS.width * scaleX;
-    this.bottom = this.top + conf.CARD_DIMENSIONS.height * scaleY;
+    const rotation = this.transformation.getRotation();
+    const height3 = conf.CARD_DIMENSIONS.height * scaleY;
+    const width2 = conf.CARD_DIMENSIONS.width * scaleX;
+    if (rotation % 180 === 0) {
+      this.left = translateX;
+      this.top = translateY;
+      this.right = this.left + width2;
+      this.bottom = this.top + height3;
+    } else {
+      const centerX = translateX + width2 / 2;
+      const centerY = translateY + height3 / 2;
+      this.left = centerX - height3 / 2;
+      this.top = centerY - width2 / 2;
+      this.right = this.left + height3;
+      this.bottom = this.top + width2;
+    }
   }
   getPath() {
     return new Path(this.getMbr().getLines());
@@ -54081,7 +54100,7 @@ class Board {
         itemData.transformation.translateX = translateX - minX + x;
         itemData.transformation.translateY = translateY - minY + y;
       }
-      if ("children" in itemData && itemData.children?.length) {
+      if (itemData.itemType !== "RichText" && "children" in itemData && itemData.children?.length) {
         itemData.children = itemData.children.map((childId) => newItemIdMap[childId]);
       }
       newMap[newItemId] = itemData;

package/dist/cjs/node.js

@@ -8530,14 +8530,7 @@ class Transformation {
       this.isLocked = data.isLocked;
     }
     if (data.rotate) {
-      if (data.dimension) {
-        this.matrix.rotateByObjectCenter(data.rotate, {
-          width: data.dimension.width,
-          height: data.dimension.height
-        }, { x: data.scaleX, y: data.scaleY });
-      } else {
-        this.matrix.rotateBy(data.rotate);
-      }
+      this.rotate = data.rotate;
     }
     this.subject.publish(this, {
       class: "Transformation",
@@ -8672,7 +8665,6 @@ class Transformation {
       }
     }
     this.rotate = degree;
-    this.matrix.rotateBy(degree);
   }
   applyRotateBy(degree) {
     this.rotateTo(this.rotate + degree);
@@ -24026,6 +24018,9 @@ class BaseItem extends Mbr {
       newData: { childIds: childrenArr.map((child) => child.getId()) }
     });
   }
+  rotate(clockwise = true) {
+    this.transformation.rotateBy(clockwise ? 90 : -90);
+  }
   emitNesting(children) {
     const itemsToAdd = [];
     const itemsToRemove = [];
@@ -24058,6 +24053,9 @@ class BaseItem extends Mbr {
     }
     return false;
   }
+  getMbr() {
+    return new Mbr(this.left, this.top, this.right, this.bottom);
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -50356,7 +50354,16 @@ class Card extends BaseItem {
     const ctx = context.ctx;
     if (this.imageToRender && this.imageToRender.complete) {
       ctx.save();
-      ctx.drawImage(this.imageToRender, typeof left === "number" ? left : this.left, typeof top === "number" ? top : this.top, conf.CARD_DIMENSIONS.width, conf.CARD_DIMENSIONS.height);
+      let { x: centerX, y: centerY } = this.getMbr().getCenter();
+      const width2 = this.getWidth();
+      const height3 = this.getHeight();
+      if (typeof left === "number" && typeof top === "number") {
+        centerX = left + width2 / 2;
+        centerX = top + height3 / 2;
+      }
+      ctx.translate(centerX, centerY);
+      ctx.rotate(this.transformation.getRotation() * Math.PI / 180);
+      ctx.drawImage(this.imageToRender, -width2 / 2, -height3 / 2, width2, height3);
       ctx.restore();
     }
   }
@@ -50376,10 +50383,22 @@ class Card extends BaseItem {
   }
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
-    this.left = translateX;
-    this.top = translateY;
-    this.right = this.left + conf.CARD_DIMENSIONS.width * scaleX;
-    this.bottom = this.top + conf.CARD_DIMENSIONS.height * scaleY;
+    const rotation = this.transformation.getRotation();
+    const height3 = conf.CARD_DIMENSIONS.height * scaleY;
+    const width2 = conf.CARD_DIMENSIONS.width * scaleX;
+    if (rotation % 180 === 0) {
+      this.left = translateX;
+      this.top = translateY;
+      this.right = this.left + width2;
+      this.bottom = this.top + height3;
+    } else {
+      const centerX = translateX + width2 / 2;
+      const centerY = translateY + height3 / 2;
+      this.left = centerX - height3 / 2;
+      this.top = centerY - width2 / 2;
+      this.right = this.left + height3;
+      this.bottom = this.top + width2;
+    }
   }
   getPath() {
     return new Path(this.getMbr().getLines());
@@ -56554,7 +56573,7 @@ class Board {
         itemData.transformation.translateX = translateX - minX + x;
         itemData.transformation.translateY = translateY - minY + y;
       }
-      if ("children" in itemData && itemData.children?.length) {
+      if (itemData.itemType !== "RichText" && "children" in itemData && itemData.children?.length) {
         itemData.children = itemData.children.map((childId) => newItemIdMap[childId]);
       }
       newMap[newItemId] = itemData;

package/dist/esm/browser.js

@@ -7330,14 +7330,7 @@ class Transformation {
       this.isLocked = data.isLocked;
     }
     if (data.rotate) {
-      if (data.dimension) {
-        this.matrix.rotateByObjectCenter(data.rotate, {
-          width: data.dimension.width,
-          height: data.dimension.height
-        }, { x: data.scaleX, y: data.scaleY });
-      } else {
-        this.matrix.rotateBy(data.rotate);
-      }
+      this.rotate = data.rotate;
     }
     this.subject.publish(this, {
       class: "Transformation",
@@ -7472,7 +7465,6 @@ class Transformation {
       }
     }
     this.rotate = degree;
-    this.matrix.rotateBy(degree);
   }
   applyRotateBy(degree) {
     this.rotateTo(this.rotate + degree);
@@ -21400,6 +21392,9 @@ class BaseItem extends Mbr {
       newData: { childIds: childrenArr.map((child) => child.getId()) }
     });
   }
+  rotate(clockwise = true) {
+    this.transformation.rotateBy(clockwise ? 90 : -90);
+  }
   emitNesting(children) {
     const itemsToAdd = [];
     const itemsToRemove = [];
@@ -21432,6 +21427,9 @@ class BaseItem extends Mbr {
     }
     return false;
   }
+  getMbr() {
+    return new Mbr(this.left, this.top, this.right, this.bottom);
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -47729,7 +47727,16 @@ class Card extends BaseItem {
     const ctx = context.ctx;
     if (this.imageToRender && this.imageToRender.complete) {
       ctx.save();
-      ctx.drawImage(this.imageToRender, typeof left === "number" ? left : this.left, typeof top === "number" ? top : this.top, conf.CARD_DIMENSIONS.width, conf.CARD_DIMENSIONS.height);
+      let { x: centerX, y: centerY } = this.getMbr().getCenter();
+      const width2 = this.getWidth();
+      const height3 = this.getHeight();
+      if (typeof left === "number" && typeof top === "number") {
+        centerX = left + width2 / 2;
+        centerX = top + height3 / 2;
+      }
+      ctx.translate(centerX, centerY);
+      ctx.rotate(this.transformation.getRotation() * Math.PI / 180);
+      ctx.drawImage(this.imageToRender, -width2 / 2, -height3 / 2, width2, height3);
       ctx.restore();
     }
   }
@@ -47749,10 +47756,22 @@ class Card extends BaseItem {
   }
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
-    this.left = translateX;
-    this.top = translateY;
-    this.right = this.left + conf.CARD_DIMENSIONS.width * scaleX;
-    this.bottom = this.top + conf.CARD_DIMENSIONS.height * scaleY;
+    const rotation = this.transformation.getRotation();
+    const height3 = conf.CARD_DIMENSIONS.height * scaleY;
+    const width2 = conf.CARD_DIMENSIONS.width * scaleX;
+    if (rotation % 180 === 0) {
+      this.left = translateX;
+      this.top = translateY;
+      this.right = this.left + width2;
+      this.bottom = this.top + height3;
+    } else {
+      const centerX = translateX + width2 / 2;
+      const centerY = translateY + height3 / 2;
+      this.left = centerX - height3 / 2;
+      this.top = centerY - width2 / 2;
+      this.right = this.left + height3;
+      this.bottom = this.top + width2;
+    }
   }
   getPath() {
     return new Path(this.getMbr().getLines());
@@ -53927,7 +53946,7 @@ class Board {
         itemData.transformation.translateX = translateX - minX + x;
         itemData.transformation.translateY = translateY - minY + y;
       }
-      if ("children" in itemData && itemData.children?.length) {
+      if (itemData.itemType !== "RichText" && "children" in itemData && itemData.children?.length) {
         itemData.children = itemData.children.map((childId) => newItemIdMap[childId]);
       }
       newMap[newItemId] = itemData;

package/dist/esm/index.js

@@ -7323,14 +7323,7 @@ class Transformation {
       this.isLocked = data.isLocked;
     }
     if (data.rotate) {
-      if (data.dimension) {
-        this.matrix.rotateByObjectCenter(data.rotate, {
-          width: data.dimension.width,
-          height: data.dimension.height
-        }, { x: data.scaleX, y: data.scaleY });
-      } else {
-        this.matrix.rotateBy(data.rotate);
-      }
+      this.rotate = data.rotate;
     }
     this.subject.publish(this, {
       class: "Transformation",
@@ -7465,7 +7458,6 @@ class Transformation {
       }
     }
     this.rotate = degree;
-    this.matrix.rotateBy(degree);
   }
   applyRotateBy(degree) {
     this.rotateTo(this.rotate + degree);
@@ -21393,6 +21385,9 @@ class BaseItem extends Mbr {
       newData: { childIds: childrenArr.map((child) => child.getId()) }
     });
   }
+  rotate(clockwise = true) {
+    this.transformation.rotateBy(clockwise ? 90 : -90);
+  }
   emitNesting(children) {
     const itemsToAdd = [];
     const itemsToRemove = [];
@@ -21425,6 +21420,9 @@ class BaseItem extends Mbr {
     }
     return false;
   }
+  getMbr() {
+    return new Mbr(this.left, this.top, this.right, this.bottom);
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -47722,7 +47720,16 @@ class Card extends BaseItem {
     const ctx = context.ctx;
     if (this.imageToRender && this.imageToRender.complete) {
       ctx.save();
-      ctx.drawImage(this.imageToRender, typeof left === "number" ? left : this.left, typeof top === "number" ? top : this.top, conf.CARD_DIMENSIONS.width, conf.CARD_DIMENSIONS.height);
+      let { x: centerX, y: centerY } = this.getMbr().getCenter();
+      const width2 = this.getWidth();
+      const height3 = this.getHeight();
+      if (typeof left === "number" && typeof top === "number") {
+        centerX = left + width2 / 2;
+        centerX = top + height3 / 2;
+      }
+      ctx.translate(centerX, centerY);
+      ctx.rotate(this.transformation.getRotation() * Math.PI / 180);
+      ctx.drawImage(this.imageToRender, -width2 / 2, -height3 / 2, width2, height3);
       ctx.restore();
     }
   }
@@ -47742,10 +47749,22 @@ class Card extends BaseItem {
   }
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
-    this.left = translateX;
-    this.top = translateY;
-    this.right = this.left + conf.CARD_DIMENSIONS.width * scaleX;
-    this.bottom = this.top + conf.CARD_DIMENSIONS.height * scaleY;
+    const rotation = this.transformation.getRotation();
+    const height3 = conf.CARD_DIMENSIONS.height * scaleY;
+    const width2 = conf.CARD_DIMENSIONS.width * scaleX;
+    if (rotation % 180 === 0) {
+      this.left = translateX;
+      this.top = translateY;
+      this.right = this.left + width2;
+      this.bottom = this.top + height3;
+    } else {
+      const centerX = translateX + width2 / 2;
+      const centerY = translateY + height3 / 2;
+      this.left = centerX - height3 / 2;
+      this.top = centerY - width2 / 2;
+      this.right = this.left + height3;
+      this.bottom = this.top + width2;
+    }
   }
   getPath() {
     return new Path(this.getMbr().getLines());
@@ -53920,7 +53939,7 @@ class Board {
         itemData.transformation.translateX = translateX - minX + x;
         itemData.transformation.translateY = translateY - minY + y;
       }
-      if ("children" in itemData && itemData.children?.length) {
+      if (itemData.itemType !== "RichText" && "children" in itemData && itemData.children?.length) {
         itemData.children = itemData.children.map((childId) => newItemIdMap[childId]);
       }
       newMap[newItemId] = itemData;

package/dist/esm/node.js

@@ -8107,14 +8107,7 @@ class Transformation {
       this.isLocked = data.isLocked;
     }
     if (data.rotate) {
-      if (data.dimension) {
-        this.matrix.rotateByObjectCenter(data.rotate, {
-          width: data.dimension.width,
-          height: data.dimension.height
-        }, { x: data.scaleX, y: data.scaleY });
-      } else {
-        this.matrix.rotateBy(data.rotate);
-      }
+      this.rotate = data.rotate;
     }
     this.subject.publish(this, {
       class: "Transformation",
@@ -8249,7 +8242,6 @@ class Transformation {
       }
     }
     this.rotate = degree;
-    this.matrix.rotateBy(degree);
   }
   applyRotateBy(degree) {
     this.rotateTo(this.rotate + degree);
@@ -23860,6 +23852,9 @@ class BaseItem extends Mbr {
       newData: { childIds: childrenArr.map((child) => child.getId()) }
     });
   }
+  rotate(clockwise = true) {
+    this.transformation.rotateBy(clockwise ? 90 : -90);
+  }
   emitNesting(children) {
     const itemsToAdd = [];
     const itemsToRemove = [];
@@ -23892,6 +23887,9 @@ class BaseItem extends Mbr {
     }
     return false;
   }
+  getMbr() {
+    return new Mbr(this.left, this.top, this.right, this.bottom);
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -50190,7 +50188,16 @@ class Card extends BaseItem {
     const ctx = context.ctx;
     if (this.imageToRender && this.imageToRender.complete) {
       ctx.save();
-      ctx.drawImage(this.imageToRender, typeof left === "number" ? left : this.left, typeof top === "number" ? top : this.top, conf.CARD_DIMENSIONS.width, conf.CARD_DIMENSIONS.height);
+      let { x: centerX, y: centerY } = this.getMbr().getCenter();
+      const width2 = this.getWidth();
+      const height3 = this.getHeight();
+      if (typeof left === "number" && typeof top === "number") {
+        centerX = left + width2 / 2;
+        centerX = top + height3 / 2;
+      }
+      ctx.translate(centerX, centerY);
+      ctx.rotate(this.transformation.getRotation() * Math.PI / 180);
+      ctx.drawImage(this.imageToRender, -width2 / 2, -height3 / 2, width2, height3);
       ctx.restore();
     }
   }
@@ -50210,10 +50217,22 @@ class Card extends BaseItem {
   }
   updateMbr() {
     const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
-    this.left = translateX;
-    this.top = translateY;
-    this.right = this.left + conf.CARD_DIMENSIONS.width * scaleX;
-    this.bottom = this.top + conf.CARD_DIMENSIONS.height * scaleY;
+    const rotation = this.transformation.getRotation();
+    const height3 = conf.CARD_DIMENSIONS.height * scaleY;
+    const width2 = conf.CARD_DIMENSIONS.width * scaleX;
+    if (rotation % 180 === 0) {
+      this.left = translateX;
+      this.top = translateY;
+      this.right = this.left + width2;
+      this.bottom = this.top + height3;
+    } else {
+      const centerX = translateX + width2 / 2;
+      const centerY = translateY + height3 / 2;
+      this.left = centerX - height3 / 2;
+      this.top = centerY - width2 / 2;
+      this.right = this.left + height3;
+      this.bottom = this.top + width2;
+    }
   }
   getPath() {
     return new Path(this.getMbr().getLines());
@@ -56388,7 +56407,7 @@ class Board {
         itemData.transformation.translateX = translateX - minX + x;
         itemData.transformation.translateY = translateY - minY + y;
       }
-      if ("children" in itemData && itemData.children?.length) {
+      if (itemData.itemType !== "RichText" && "children" in itemData && itemData.children?.length) {
         itemData.children = itemData.children.map((childId) => newItemIdMap[childId]);
       }
       newMap[newItemId] = itemData;

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

@@ -47,11 +47,13 @@ export declare class BaseItem extends Mbr implements Geometry {
     getChildrenIds(): string[] | null;
     addChildItems(children: BaseItem[]): void;
     removeChildItems(children: BaseItem[] | BaseItem): void;
+    rotate(clockwise?: boolean): void;
     emitNesting(children: BaseItem[]): void;
     handleNesting(item: BaseItem | Mbr, options?: {
         onlyForOut?: boolean;
         cancelIfChild?: boolean;
     }): boolean;
+    getMbr(): Mbr;
     applyAddChildren(childIds: string[]): void;
     applyRemoveChildren(childIds: string[]): void;
     updateMbr(): void;

package/package.json

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