microboard-temp 0.5.23 → 0.5.25

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,10 +7628,9 @@ class Transformation {
       }
     }
     this.rotate = degree;
-    this.matrix.rotateBy(degree);
   }
   applyRotateBy(degree) {
-    this.rotateTo(this.rotate + degree);
+    this.applyRotateTo(this.rotate + degree);
   }
   applyLocked(locked) {
     this.isLocked = locked;
@@ -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,20 @@ 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);
+      if (width2 > height3) {
+        ctx.drawImage(this.imageToRender, -width2 / 2, -height3 / 2, height3, width2);
+      } else {
+        ctx.drawImage(this.imageToRender, -width2 / 2, -height3 / 2, width2, height3);
+      }
       ctx.restore();
     }
   }
@@ -47903,10 +47914,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());

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,10 +7628,9 @@ class Transformation {
       }
     }
     this.rotate = degree;
-    this.matrix.rotateBy(degree);
   }
   applyRotateBy(degree) {
-    this.rotateTo(this.rotate + degree);
+    this.applyRotateTo(this.rotate + degree);
   }
   applyLocked(locked) {
     this.isLocked = locked;
@@ -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,20 @@ 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);
+      if (width2 > height3) {
+        ctx.drawImage(this.imageToRender, -width2 / 2, -height3 / 2, height3, width2);
+      } else {
+        ctx.drawImage(this.imageToRender, -width2 / 2, -height3 / 2, width2, height3);
+      }
       ctx.restore();
     }
   }
@@ -47903,10 +47914,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());

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,10 +8665,9 @@ class Transformation {
       }
     }
     this.rotate = degree;
-    this.matrix.rotateBy(degree);
   }
   applyRotateBy(degree) {
-    this.rotateTo(this.rotate + degree);
+    this.applyRotateTo(this.rotate + degree);
   }
   applyLocked(locked) {
     this.isLocked = locked;
@@ -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,20 @@ 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);
+      if (width2 > height3) {
+        ctx.drawImage(this.imageToRender, -width2 / 2, -height3 / 2, height3, width2);
+      } else {
+        ctx.drawImage(this.imageToRender, -width2 / 2, -height3 / 2, width2, height3);
+      }
       ctx.restore();
     }
   }
@@ -50376,10 +50387,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());

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,10 +7465,9 @@ class Transformation {
       }
     }
     this.rotate = degree;
-    this.matrix.rotateBy(degree);
   }
   applyRotateBy(degree) {
-    this.rotateTo(this.rotate + degree);
+    this.applyRotateTo(this.rotate + degree);
   }
   applyLocked(locked) {
     this.isLocked = locked;
@@ -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,20 @@ 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);
+      if (width2 > height3) {
+        ctx.drawImage(this.imageToRender, -width2 / 2, -height3 / 2, height3, width2);
+      } else {
+        ctx.drawImage(this.imageToRender, -width2 / 2, -height3 / 2, width2, height3);
+      }
       ctx.restore();
     }
   }
@@ -47749,10 +47760,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());

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,10 +7458,9 @@ class Transformation {
       }
     }
     this.rotate = degree;
-    this.matrix.rotateBy(degree);
   }
   applyRotateBy(degree) {
-    this.rotateTo(this.rotate + degree);
+    this.applyRotateTo(this.rotate + degree);
   }
   applyLocked(locked) {
     this.isLocked = locked;
@@ -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,20 @@ 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);
+      if (width2 > height3) {
+        ctx.drawImage(this.imageToRender, -width2 / 2, -height3 / 2, height3, width2);
+      } else {
+        ctx.drawImage(this.imageToRender, -width2 / 2, -height3 / 2, width2, height3);
+      }
       ctx.restore();
     }
   }
@@ -47742,10 +47753,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());

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,10 +8242,9 @@ class Transformation {
       }
     }
     this.rotate = degree;
-    this.matrix.rotateBy(degree);
   }
   applyRotateBy(degree) {
-    this.rotateTo(this.rotate + degree);
+    this.applyRotateTo(this.rotate + degree);
   }
   applyLocked(locked) {
     this.isLocked = locked;
@@ -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,20 @@ 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);
+      if (width2 > height3) {
+        ctx.drawImage(this.imageToRender, -width2 / 2, -height3 / 2, height3, width2);
+      } else {
+        ctx.drawImage(this.imageToRender, -width2 / 2, -height3 / 2, width2, height3);
+      }
       ctx.restore();
     }
   }
@@ -50210,10 +50221,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());

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