microboard-temp 0.6.0 → 0.6.2

package/dist/cjs/index.js

@@ -7367,13 +7367,6 @@ class TransformationCommand {
           };
         });
       }
-      case "rotateTo":
-        return mapItemsByOperation(this.transformation, (transformation) => {
-          return {
-            ...this.operation,
-            degree: transformation.getRotation()
-          };
-        });
       case "scaleByTranslateBy": {
         const op2 = this.operation;
         const scaleTransformation = mapItemsByOperation(this.transformation, () => {
@@ -7395,6 +7388,13 @@ class TransformationCommand {
         });
         return scaleTransformation;
       }
+      case "rotateTo":
+        return mapItemsByOperation(this.transformation, (transformation) => {
+          return {
+            ...this.operation,
+            degree: transformation.getRotation()
+          };
+        });
       case "rotateBy": {
         const op2 = this.operation;
         return mapItemsByOperation(this.transformation, () => {
@@ -7484,7 +7484,7 @@ class Transformation {
   id;
   events;
   subject = new SubjectOperation;
-  matrix = new Matrix2;
+  _matrix = new Matrix2;
   previous = new Matrix2;
   rotate = defaultData.rotate;
   isLocked = false;
@@ -7492,29 +7492,73 @@ class Transformation {
     this.id = id;
     this.events = events;
   }
+  getMatrixData() {
+    const { translateX, translateY, scaleX, scaleY, shearX, shearY } = this._matrix;
+    return { translateX, translateY, scaleX, scaleY, shearX, shearY };
+  }
+  toMatrix() {
+    return this._matrix.copy();
+  }
+  applyToContext(ctx) {
+    this._matrix.applyToContext(ctx);
+  }
+  getTranslation() {
+    return { x: this._matrix.translateX, y: this._matrix.translateY };
+  }
+  getScale() {
+    return { x: this._matrix.scaleX, y: this._matrix.scaleY };
+  }
+  getRotation() {
+    return this.rotate;
+  }
+  setLocal(xOrData, y, scaleX, scaleY) {
+    this.previous = this._matrix.copy();
+    if (typeof xOrData === "object") {
+      if (xOrData.translateX !== undefined)
+        this._matrix.translateX = xOrData.translateX;
+      if (xOrData.translateY !== undefined)
+        this._matrix.translateY = xOrData.translateY;
+      if (xOrData.scaleX !== undefined)
+        this._matrix.scaleX = xOrData.scaleX;
+      if (xOrData.scaleY !== undefined)
+        this._matrix.scaleY = xOrData.scaleY;
+    } else {
+      this._matrix.translateX = xOrData;
+      this._matrix.translateY = y;
+      if (scaleX !== undefined)
+        this._matrix.scaleX = scaleX;
+      if (scaleY !== undefined)
+        this._matrix.scaleY = scaleY;
+    }
+    this.subject.publish(this, {
+      class: "Transformation",
+      method: "applyMatrix",
+      items: [{ id: this.id, matrix: this.getMatrixData() }]
+    });
+  }
   serialize() {
     return {
-      translateX: this.matrix.translateX,
-      translateY: this.matrix.translateY,
-      scaleX: this.matrix.scaleX,
-      scaleY: this.matrix.scaleY,
+      translateX: this._matrix.translateX,
+      translateY: this._matrix.translateY,
+      scaleX: this._matrix.scaleX,
+      scaleY: this._matrix.scaleY,
       rotate: this.rotate,
       isLocked: this.isLocked
     };
   }
   deserialize(data) {
-    this.previous = this.matrix.copy();
+    this.previous = this._matrix.copy();
     if (data.translateX) {
-      this.matrix.translateX = data.translateX;
+      this._matrix.translateX = data.translateX;
     }
     if (data.translateY) {
-      this.matrix.translateY = data.translateY;
+      this._matrix.translateY = data.translateY;
     }
     if (data.scaleX) {
-      this.matrix.scaleX = data.scaleX;
+      this._matrix.scaleX = data.scaleX;
     }
     if (data.scaleY) {
-      this.matrix.scaleY = data.scaleY;
+      this._matrix.scaleY = data.scaleY;
     }
     if (data.isLocked) {
       this.isLocked = data.isLocked;
@@ -7531,7 +7575,7 @@ class Transformation {
     return this;
   }
   copy(id) {
-    const { translateX, translateY, scaleX, scaleY } = this.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this._matrix;
     const { rotate } = this;
     return new Transformation(id || "", this.events).deserialize({
       translateX,
@@ -7542,6 +7586,17 @@ class Transformation {
       isLocked: false
     });
   }
+  getInverse() {
+    const copy2 = this.copy();
+    copy2._matrix.invert();
+    return copy2;
+  }
+  getId() {
+    return this.id;
+  }
+  setId(id) {
+    this.id = id;
+  }
   emit(operation) {
     if (this.events) {
       const command = new TransformationCommand([this], operation);
@@ -7551,150 +7606,6 @@ class Transformation {
       this.apply(operation);
     }
   }
-  setId(id) {
-    this.id = id;
-  }
-  apply(op) {
-    this.previous = this.matrix.copy();
-    switch (op.method) {
-      case "applyMatrix": {
-        const itemOp = op.items.find((i) => i.id === this.id);
-        if (itemOp) {
-          this.matrix.scale(itemOp.matrix.scaleX, itemOp.matrix.scaleY);
-          this.matrix.translate(itemOp.matrix.translateX, itemOp.matrix.translateY);
-        }
-        break;
-      }
-      case "translateTo":
-        this.applyTranslateTo(op.x, op.y);
-        break;
-      case "translateBy":
-        this.applyTranslateBy(op.x, op.y);
-        break;
-      case "scaleTo":
-        this.applyScaleTo(op.x, op.y);
-        break;
-      case "scaleBy":
-        this.applyScaleBy(op.x, op.y);
-        break;
-      case "scaleToRelativeTo":
-        this.applyScaleToRelativeTo(op.x, op.y, op.point);
-        break;
-      case "scaleByRelativeTo":
-        this.applyScaleByRelativeTo(op.x, op.y, op.point);
-        break;
-      case "rotateTo":
-        this.applyRotateTo(op.degree);
-        break;
-      case "rotateBy":
-        this.applyRotateBy(op.degree);
-        break;
-      case "scaleByTranslateBy":
-        this.applyScaleByTranslateBy(op.scale, op.translate);
-        break;
-      case "transformMany":
-        this.applyTransformMany(op.items[this.id]);
-        break;
-      case "locked":
-        this.applyLocked(op.locked);
-        break;
-      case "unlocked":
-        this.applyUnlocked(op.locked);
-        break;
-      default:
-        return;
-    }
-    this.subject.publish(this, op);
-  }
-  applyTranslateTo(x, y) {
-    this.matrix.translateX = x;
-    this.matrix.translateY = y;
-  }
-  applyTranslateBy(x, y) {
-    this.matrix.translate(x, y);
-  }
-  applyScaleTo(x, y) {
-    this.matrix.scaleX = x;
-    this.matrix.scaleY = y;
-  }
-  applyScaleBy(x, y) {
-    this.matrix.scale(x, y);
-  }
-  applyScaleByTranslateBy(scale, translate) {
-    this.matrix.scale(scale.x, scale.y);
-    this.matrix.translate(translate.x, translate.y);
-  }
-  applyTransformMany(op) {
-    if (op.method === "applyMatrix") {
-      this.matrix.scale(op.matrix.scaleX, op.matrix.scaleY);
-      this.matrix.translate(op.matrix.translateX, op.matrix.translateY);
-    } else if (op.method === "scaleByTranslateBy") {
-      this.applyScaleByTranslateBy(op.scale, op.translate);
-    } else if (op.method === "scaleBy") {
-      this.applyScaleBy(op.x, op.y);
-    } else if (op.method === "translateBy") {
-      this.applyTranslateBy(op.x, op.y);
-    } else if (op.method === "translateTo") {
-      this.applyTranslateTo(op.x, op.y);
-    }
-  }
-  applyScaleByRelativeTo(x, y, point) {
-    const scaleX = this.matrix.scaleX * x;
-    const scaleY = this.matrix.scaleY * y;
-    this.matrix.translateX = -point.x * scaleX + point.x;
-    this.matrix.translateY = -point.y * scaleY + point.y;
-    this.matrix.scaleX = scaleX;
-    this.matrix.scaleY = scaleY;
-  }
-  applyScaleToRelativeTo(x, y, point) {
-    this.applyTranslateBy(-point.x, -point.y);
-    this.applyScaleTo(x, y);
-    this.applyTranslateBy(point.x, point.y);
-  }
-  applyRotateTo(degree) {
-    if (degree > 0) {
-      while (degree > 360) {
-        degree -= 360;
-      }
-      if (degree === 360) {
-        degree = 0;
-      }
-    } else {
-      while (degree < -360) {
-        degree += 360;
-      }
-      if (degree === -360) {
-        degree = 0;
-      }
-    }
-    this.rotate = degree;
-  }
-  applyRotateBy(degree) {
-    this.applyRotateTo(this.rotate + degree);
-  }
-  applyLocked(locked) {
-    this.isLocked = locked;
-  }
-  applyUnlocked(locked) {
-    this.isLocked = locked;
-  }
-  getTranslation() {
-    return { x: this.matrix.translateX, y: this.matrix.translateY };
-  }
-  getScale() {
-    return { x: this.matrix.scaleX, y: this.matrix.scaleY };
-  }
-  getRotation() {
-    return this.rotate;
-  }
-  getInverse() {
-    const copy2 = this.copy();
-    copy2.matrix.invert();
-    return copy2;
-  }
-  getId() {
-    return this.id;
-  }
   emitMatrix(matrix, timeStamp) {
     this.emit({
       class: "Transformation",
@@ -7706,8 +7617,8 @@ class Transformation {
   translateTo(x, y, timeStamp) {
     if (!this.id) {}
     this.emitMatrix({
-      translateX: x - this.matrix.translateX,
-      translateY: y - this.matrix.translateY,
+      translateX: x - this._matrix.translateX,
+      translateY: y - this._matrix.translateY,
       scaleX: 1,
       scaleY: 1,
       shearX: 0,
@@ -7732,8 +7643,8 @@ class Transformation {
     this.emitMatrix({
       translateX: 0,
       translateY: 0,
-      scaleX: x / this.matrix.scaleX,
-      scaleY: y / this.matrix.scaleY,
+      scaleX: x / this._matrix.scaleX,
+      scaleY: y / this._matrix.scaleY,
       shearX: 0,
       shearY: 0
     }, timeStamp);
@@ -7786,14 +7697,14 @@ class Transformation {
     this.emitMatrix({
       translateX: 0,
       translateY: 0,
-      scaleX: x / this.matrix.scaleX,
-      scaleY: y / this.matrix.scaleY,
+      scaleX: x / this._matrix.scaleX,
+      scaleY: y / this._matrix.scaleY,
       shearX: 0,
       shearY: 0
     }, timeStamp);
   }
   scaleByRelativeTo(x, y, point, timeStamp) {
-    const { scaleX: sx0, scaleY: sy0, translateX: tx0, translateY: ty0 } = this.matrix;
+    const { scaleX: sx0, scaleY: sy0, translateX: tx0, translateY: ty0 } = this._matrix;
     const newSx = sx0 * x;
     const newSy = sy0 * y;
     this.emitMatrix({
@@ -7824,6 +7735,130 @@ class Transformation {
       });
     }
   }
+  apply(op) {
+    this.previous = this._matrix.copy();
+    switch (op.method) {
+      case "applyMatrix": {
+        const itemOp = op.items.find((i) => i.id === this.id);
+        if (itemOp) {
+          this._matrix.scale(itemOp.matrix.scaleX, itemOp.matrix.scaleY);
+          this._matrix.translate(itemOp.matrix.translateX, itemOp.matrix.translateY);
+        }
+        break;
+      }
+      case "translateTo":
+        this.applyTranslateTo(op.x, op.y);
+        break;
+      case "translateBy":
+        this.applyTranslateBy(op.x, op.y);
+        break;
+      case "scaleTo":
+        this.applyScaleTo(op.x, op.y);
+        break;
+      case "scaleBy":
+        this.applyScaleBy(op.x, op.y);
+        break;
+      case "scaleToRelativeTo":
+        this.applyScaleToRelativeTo(op.x, op.y, op.point);
+        break;
+      case "scaleByRelativeTo":
+        this.applyScaleByRelativeTo(op.x, op.y, op.point);
+        break;
+      case "scaleByTranslateBy":
+        this.applyScaleByTranslateBy(op.scale, op.translate);
+        break;
+      case "rotateTo":
+        this.applyRotateTo(op.degree);
+        break;
+      case "rotateBy":
+        this.applyRotateBy(op.degree);
+        break;
+      case "transformMany":
+        this.applyTransformMany(op.items[this.id]);
+        break;
+      case "locked":
+        this.applyLocked(op.locked);
+        break;
+      case "unlocked":
+        this.applyUnlocked(op.locked);
+        break;
+      default:
+        return;
+    }
+    this.subject.publish(this, op);
+  }
+  applyTranslateTo(x, y) {
+    this._matrix.translateX = x;
+    this._matrix.translateY = y;
+  }
+  applyTranslateBy(x, y) {
+    this._matrix.translate(x, y);
+  }
+  applyScaleTo(x, y) {
+    this._matrix.scaleX = x;
+    this._matrix.scaleY = y;
+  }
+  applyScaleBy(x, y) {
+    this._matrix.scale(x, y);
+  }
+  applyScaleByTranslateBy(scale, translate) {
+    this._matrix.scale(scale.x, scale.y);
+    this._matrix.translate(translate.x, translate.y);
+  }
+  applyTransformMany(op) {
+    if (op.method === "applyMatrix") {
+      this._matrix.scale(op.matrix.scaleX, op.matrix.scaleY);
+      this._matrix.translate(op.matrix.translateX, op.matrix.translateY);
+    } else if (op.method === "scaleByTranslateBy") {
+      this.applyScaleByTranslateBy(op.scale, op.translate);
+    } else if (op.method === "scaleBy") {
+      this.applyScaleBy(op.x, op.y);
+    } else if (op.method === "translateBy") {
+      this.applyTranslateBy(op.x, op.y);
+    } else if (op.method === "translateTo") {
+      this.applyTranslateTo(op.x, op.y);
+    }
+  }
+  applyScaleByRelativeTo(x, y, point) {
+    const scaleX = this._matrix.scaleX * x;
+    const scaleY = this._matrix.scaleY * y;
+    this._matrix.translateX = -point.x * scaleX + point.x;
+    this._matrix.translateY = -point.y * scaleY + point.y;
+    this._matrix.scaleX = scaleX;
+    this._matrix.scaleY = scaleY;
+  }
+  applyScaleToRelativeTo(x, y, point) {
+    this.applyTranslateBy(-point.x, -point.y);
+    this.applyScaleTo(x, y);
+    this.applyTranslateBy(point.x, point.y);
+  }
+  applyRotateTo(degree) {
+    if (degree > 0) {
+      while (degree > 360) {
+        degree -= 360;
+      }
+      if (degree === 360) {
+        degree = 0;
+      }
+    } else {
+      while (degree < -360) {
+        degree += 360;
+      }
+      if (degree === -360) {
+        degree = 0;
+      }
+    }
+    this.rotate = degree;
+  }
+  applyRotateBy(degree) {
+    this.applyRotateTo(this.rotate + degree);
+  }
+  applyLocked(locked) {
+    this.isLocked = locked;
+  }
+  applyUnlocked(locked) {
+    this.isLocked = locked;
+  }
 }
 // src/Items/DrawingContext.ts
 class DrawingContext {
@@ -19252,12 +19287,11 @@ class Comment {
     });
   }
   transform() {
-    const matrix = this.transformation.matrix;
-    if (matrix.translateX && matrix.translateY) {
-      this.anchor = new Point(matrix.translateX, matrix.translateY);
+    const { translateX, translateY } = this.transformation.getMatrixData();
+    if (translateX && translateY) {
+      this.anchor = new Point(translateX, translateY);
     } else {
-      matrix.translateX = this.anchor.x;
-      matrix.translateY = this.anchor.y;
+      this.transformation.setLocal(this.anchor.x, this.anchor.y);
     }
   }
   getUnreadMessages(userId = ANONYMOUS_ID) {
@@ -19366,7 +19400,7 @@ class Comment {
   render(context) {}
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("comment-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.transformOrigin = "top left";
     div.style.transform = transform;
@@ -21310,6 +21344,9 @@ class Items {
         item.render(context);
       }
     });
+    items.forEach((item) => {
+      item.renderHoverHighlight(context);
+    });
   }
   renderHTML(documentFactory) {
     const items = this.getItemsInView();
@@ -21873,20 +21910,23 @@ class BaseItem extends Mbr {
     this.isHoverHighlighted = false;
     this.subject.publish(this);
   }
+  renderHoverHighlight(context) {
+    if (!this.isHoverHighlighted) {
+      return;
+    }
+    const mbr = this.getMbr();
+    mbr.strokeWidth = 2 / context.matrix.scaleX;
+    mbr.borderColor = BaseItem.HOVER_HIGHLIGHT_COLOR;
+    mbr.render(context);
+  }
   render(context) {
     if (this.index) {
       this.index.render(context);
     }
-    if (this.isHoverHighlighted) {
-      const mbr = this.getMbr();
-      mbr.strokeWidth = 2 / context.matrix.scaleX;
-      mbr.borderColor = BaseItem.HOVER_HIGHLIGHT_COLOR;
-      mbr.render(context);
-    }
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("base-item");
-    const { translateX, translateY } = this.transformation.matrix;
+    const { translateX, translateY } = this.transformation.getMatrixData();
     const transform = `translate(${translateX}px, ${translateY}px) scale(1, 1)`;
     div.style.backgroundColor = "#b2b0c3";
     div.id = this.getId();
@@ -22028,7 +22068,7 @@ class RichText extends BaseItem {
         mbr.right += 20;
         mbr.bottom += 20;
       }
-      const linkMbr = mbr.getTransformed(this.transformation.matrix);
+      const linkMbr = mbr.getTransformed(this.transformation.toMatrix());
       if (linkMbr.isUnderPoint(point3)) {
         return { hyperLink, linkMbr };
       }
@@ -22225,12 +22265,13 @@ class RichText extends BaseItem {
     return this.shrinkWidth;
   }
   getTransformedContainer() {
-    let matrix = this.transformation.matrix;
     if (this.insideOf === "Frame") {
+      const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
       const scaleY = this.getMbr().getHeight() * 2 / 10;
-      matrix = new Matrix2(matrix.translateX, matrix.translateY, matrix.scaleX, scaleY);
+      const matrix = new Matrix2(translateX, translateY, scaleX, scaleY);
+      return this.container.getTransformed(matrix);
     }
-    return this.container.getTransformed(matrix);
+    return this.container.getTransformed(this.transformation.toMatrix());
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -22591,7 +22632,7 @@ class RichText extends BaseItem {
     ctx.translate(this.left, this.top);
     const shouldScale = !this.isInShape && !this.autoSize;
     if (shouldScale) {
-      const { scaleX, scaleY } = this.transformation.matrix;
+      const { scaleX, scaleY } = this.transformation.getMatrixData();
       ctx.scale(scaleX, scaleY);
     }
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
@@ -22724,7 +22765,7 @@ class RichText extends BaseItem {
       return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
     };
     const elements = this.editor.editor.children.map(renderNode);
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     const transformedWidth = this.getTransformedContainer().getWidth();
     const transformedHeight = this.getTransformedContainer().getHeight();
@@ -35956,17 +35997,17 @@ class AINode extends BaseItem {
   }
   transformPath() {
     const { left, right, top, bottom } = this.text.getTransformedContainer();
-    const { scaleX, scaleY } = this.transformation.matrix;
+    const { scaleX, scaleY, translateX: nodeTranslateX, translateY: nodeTranslateY } = this.transformation.getMatrixData();
     const minScale = Math.min(scaleX, scaleY);
     const leftOffset = 20 * minScale;
     const topOffset = 20 * minScale;
     const nodeRight = right + 80 * minScale;
     const nodeBottom = bottom + (bottom - top > 400 ? 60 : 40) * minScale;
     if (!this.path || this.text.left < this.path.getMbr().left + leftOffset && this.text.top < this.path.getMbr().top + topOffset) {
-      this.text.left = this.transformation.matrix.translateX + leftOffset;
-      this.text.top = this.transformation.matrix.translateY + topOffset;
+      this.text.left = nodeTranslateX + leftOffset;
+      this.text.top = nodeTranslateY + topOffset;
     }
-    this.path = createNodePath(new Mbr(left, top, nodeRight, nodeBottom), this.transformation.matrix);
+    this.path = createNodePath(new Mbr(left, top, nodeRight, nodeBottom), this.transformation.toMatrix());
     const scaledSize = BUTTON_SIZE * minScale;
     this.buttonMbr = new Mbr(nodeRight - scaledSize * 2, nodeBottom - scaledSize * 2, nodeRight - scaledSize, nodeBottom - scaledSize);
   }
@@ -36127,7 +36168,7 @@ class AINode extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("ainode-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const mbr = this.getMbr();
     const width = mbr.getWidth();
     const height = mbr.getHeight();
@@ -37600,7 +37641,7 @@ class Connector2 extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("connector-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const mbr = this.getMbr();
     const width = mbr.getWidth();
     const height = mbr.getHeight();
@@ -37665,7 +37706,7 @@ class Connector2 extends BaseItem {
     return div;
   }
   renderPathHTML(documentFactory, path2) {
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const pathElement = path2.renderHTML(documentFactory);
     const paths = Array.isArray(pathElement) ? pathElement : [pathElement];
     paths.forEach((element4) => {
@@ -37687,8 +37728,7 @@ class Connector2 extends BaseItem {
     text5.transformation = undefined;
     const mbr = this.getMbr();
     const transformation = new Transformation;
-    transformation.matrix.translateX = mbr.left;
-    transformation.matrix.translateY = mbr.top;
+    transformation.setLocal(mbr.left, mbr.top);
     return {
       itemType: "Connector",
       transformation: transformation.serialize(),
@@ -37768,7 +37808,7 @@ class Connector2 extends BaseItem {
     previous2.translateX = 0;
     previous2.translateY = 0;
     previous2.invert();
-    const currUnscaled = this.transformation.matrix.copy();
+    const currUnscaled = this.transformation.toMatrix();
     currUnscaled.translateX = 0;
     currUnscaled.translateY = 0;
     const delta = previous2.multiplyByMatrix(currUnscaled);
@@ -37795,7 +37835,7 @@ class Connector2 extends BaseItem {
     previous2.scaleX = 1;
     previous2.scaleY = 1;
     previous2.invert();
-    const currUnscaled = this.transformation.matrix.copy();
+    const currUnscaled = this.transformation.toMatrix();
     currUnscaled.scaleX = 1;
     currUnscaled.scaleY = 1;
     const delta = previous2.multiplyByMatrix(currUnscaled);
@@ -39762,7 +39802,7 @@ class Shape extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("shape-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const mbr = this.getMbr();
     const width = mbr.getWidth();
     const height = mbr.getHeight();
@@ -39851,8 +39891,8 @@ class Shape extends BaseItem {
     this.path = Shapes[this.shapeType].createPath(this.mbr);
     this.textContainer = Shapes[this.shapeType].textBounds.copy();
     this.text.setContainer(this.textContainer.copy());
-    this.textContainer.transform(this.transformation.matrix);
-    this.path.transform(this.transformation.matrix);
+    this.textContainer.transform(this.transformation.toMatrix());
+    this.path.transform(this.transformation.toMatrix());
     this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBackgroundOpacity(this.backgroundOpacity);
     this.path.setBorderColor(this.borderColor);
@@ -39867,7 +39907,7 @@ class Shape extends BaseItem {
     const anchorPoints = Shapes[this.shapeType].anchorPoints;
     const points = [];
     for (const anchorPoint of anchorPoints) {
-      points.push(anchorPoint.getTransformed(this.transformation.matrix));
+      points.push(anchorPoint.getTransformed(this.transformation.toMatrix()));
     }
     return points;
   }
@@ -40037,10 +40077,9 @@ class Sticker extends BaseItem {
     }
     this.stickerPath = StickerShape.stickerPath.copy();
     this.textContainer = StickerShape.textBounds.copy();
-    const matrix = this.transformation.matrix;
-    this.stickerPath.transform(matrix);
+    this.stickerPath.transform(this.transformation.toMatrix());
     this.text.setContainer(this.textContainer.copy());
-    this.textContainer.transform(this.transformation.matrix);
+    this.textContainer.transform(this.transformation.toMatrix());
     this.stickerPath.setBackgroundColor(this.backgroundColor);
     this.saveStickerData();
   }
@@ -40141,7 +40180,7 @@ class Sticker extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("sticker-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const transform = `translate(${Math.round(translateX)}px, ${Math.round(translateY)}px) scale(${scaleX}, ${scaleY})`;
     const itemMbr = this.getMbr();
     const height2 = itemMbr.getHeight();
@@ -40222,7 +40261,7 @@ class Sticker extends BaseItem {
     const anchorPoints = StickerShape.anchorPoints;
     const points = [];
     for (const anchorPoint of anchorPoints) {
-      points.push(anchorPoint.getTransformed(this.transformation.matrix));
+      points.push(anchorPoint.getTransformed(this.transformation.toMatrix()));
     }
     return points;
   }
@@ -40236,20 +40275,7 @@ class Sticker extends BaseItem {
     if (line.end.y < line.start.y) {
       y -= l * height;
     }
-    this.transformation.apply({
-      class: "Transformation",
-      method: "translateTo",
-      item: [this.id],
-      x,
-      y
-    });
-    this.transformation.apply({
-      class: "Transformation",
-      method: "scaleTo",
-      item: [this.id],
-      x: l,
-      y: l
-    });
+    this.transformation.setLocal(x, y, l, l);
     this.saveStickerData();
   }
   applyTransformToCenter(pt, newWidth) {
@@ -40257,35 +40283,9 @@ class Sticker extends BaseItem {
       const scale = newWidth / width;
       const w = width * scale;
       const h2 = height * scale;
-      this.transformation.apply({
-        class: "Transformation",
-        method: "translateTo",
-        item: [this.id],
-        x: pt.x - w / 2,
-        y: pt.y - h2 / 2
-      });
-      this.transformation.apply({
-        class: "Transformation",
-        method: "scaleTo",
-        item: [this.id],
-        x: scale,
-        y: scale
-      });
+      this.transformation.setLocal(pt.x - w / 2, pt.y - h2 / 2, scale, scale);
     } else {
-      this.transformation.apply({
-        class: "Transformation",
-        method: "translateTo",
-        item: [this.id],
-        x: pt.x - width / 2,
-        y: pt.y - height / 2
-      });
-      this.transformation.apply({
-        class: "Transformation",
-        method: "scaleTo",
-        item: [this.id],
-        x: 1,
-        y: 1
-      });
+      this.transformation.setLocal(pt.x - width / 2, pt.y - height / 2, 1, 1);
     }
   }
   doResize(resizeType, pointer, mbr, opposite, startMbr, timeStamp) {
@@ -40591,7 +40591,7 @@ class Frame2 extends BaseItem {
     const res = this.getCanChangeRatio() ? getResize(resizeType, pointer, mbr, opposite) : getProportionalResize(resizeType, pointer, mbr, opposite);
     if (!res) {
       return {
-        matrix: this.transformation.matrix,
+        matrix: this.transformation.toMatrix(),
         mbr: this.getMbr()
       };
     }
@@ -40690,8 +40690,9 @@ class Frame2 extends BaseItem {
     return this;
   }
   getSavedProportionsMatrix() {
-    const newScale = Math.min(this.transformation.matrix.scaleX, this.transformation.matrix.scaleY);
-    const newMatrix = this.transformation.matrix.copy();
+    const { scaleX, scaleY } = this.transformation.getMatrixData();
+    const newScale = Math.min(scaleX, scaleY);
+    const newMatrix = this.transformation.toMatrix();
     newMatrix.scaleX = newScale;
     newMatrix.scaleY = newScale;
     return newMatrix;
@@ -40705,8 +40706,8 @@ class Frame2 extends BaseItem {
       this.textContainer.transform(newMatrix);
       this.transformation.applyScaleTo(newMatrix.scaleX, newMatrix.scaleY);
     } else {
-      this.path.transform(this.transformation.matrix);
-      this.textContainer.transform(this.transformation.matrix);
+      this.path.transform(this.transformation.toMatrix());
+      this.textContainer.transform(this.transformation.toMatrix());
     }
     this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBackgroundOpacity(this.backgroundOpacity);
@@ -40762,7 +40763,7 @@ class Frame2 extends BaseItem {
     const anchorPoints = Frames[this.shapeType].anchorPoints;
     const points = [];
     for (const anchorPoint of anchorPoints) {
-      points.push(anchorPoint.getTransformed(this.transformation.matrix));
+      points.push(anchorPoint.getTransformed(this.transformation.toMatrix()));
     }
     return points;
   }
@@ -40938,7 +40939,7 @@ class Frame2 extends BaseItem {
     div.style.borderColor = this.borderColor;
     div.style.borderWidth = `${this.borderWidth}px`;
     div.style.borderStyle = this.borderStyle;
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const transform = `translate(${Math.round(translateX)}px, ${Math.round(translateY)}px) scale(1, 1)`;
     const width2 = this.getMbr().getWidth();
     const height2 = this.getMbr().getHeight();
@@ -41251,13 +41252,13 @@ class VideoItem extends BaseItem {
     this.shootLoadCallbacks();
   };
   updateMbr() {
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     this.left = translateX;
     this.top = translateY;
     this.right = this.left + this.videoDimension.width * scaleX;
     this.bottom = this.top + this.videoDimension.height * scaleY;
     const playBtnSize = 50;
-    const scaledPlayBtn = playBtnSize * this.transformation.matrix.scaleX;
+    const scaledPlayBtn = playBtnSize * this.transformation.getMatrixData().scaleX;
     this.playBtnMbr = new Mbr(this.left + this.getWidth() / 2 - scaledPlayBtn / 2, this.top + this.getHeight() / 2 - scaledPlayBtn / 2, this.right - this.getWidth() / 2 + scaledPlayBtn / 2, this.bottom - this.getHeight() / 2 + scaledPlayBtn / 2);
   }
   render(context) {
@@ -41273,7 +41274,7 @@ class VideoItem extends BaseItem {
       return;
     }
     ctx.save();
-    this.transformation.matrix.applyToContext(ctx);
+    this.transformation.applyToContext(ctx);
     ctx.drawImage(this.preview, 0, 0);
     if (this.shouldShowControls && this.previewUrl) {
       ctx.restore();
@@ -41294,7 +41295,7 @@ class VideoItem extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("video-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.backgroundImage = this.previewUrl ? `url(${this.previewUrl})` : `url(${createPlaceholderImage(this.videoDimension.width, this.videoDimension.height).src})`;
     div.id = this.getId();
@@ -41752,7 +41753,7 @@ class AudioItem extends BaseItem {
     this.shootLoadCallbacks();
   };
   updateMbr() {
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     this.left = translateX;
     this.top = translateY;
     this.right = this.left + conf.AUDIO_DIMENSIONS.width * scaleX;
@@ -41782,7 +41783,7 @@ class AudioItem extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("audio-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.id = this.getId();
     div.style.width = `${conf.AUDIO_DIMENSIONS.width}px`;
@@ -42134,7 +42135,7 @@ class Placeholder extends BaseItem {
     const anchorPoints = Shapes[this.shapeType].anchorPoints;
     const points = [];
     for (const anchorPoint of anchorPoints) {
-      points.push(anchorPoint.getTransformed(this.transformation.matrix));
+      points.push(anchorPoint.getTransformed(this.transformation.toMatrix()));
     }
     return points;
   }
@@ -42152,7 +42153,7 @@ class Placeholder extends BaseItem {
   }
   transformPath() {
     this.path = Shapes[this.shapeType].createPath(this.mbr);
-    this.path.transform(this.transformation.matrix);
+    this.path.transform(this.transformation.toMatrix());
     this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBorderColor("transparent");
   }
@@ -42348,7 +42349,7 @@ class ImageItem extends BaseItem {
     this.subject.publish(this);
   };
   updateMbr() {
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const rotation = this.transformation.getRotation();
     const width2 = this.image.width * scaleX;
     const height2 = this.image.height * scaleY;
@@ -42391,10 +42392,11 @@ class ImageItem extends BaseItem {
     };
   }
   setCoordinates() {
-    this.left = this.transformation.matrix.translateX;
-    this.top = this.transformation.matrix.translateY;
-    this.right = this.left + this.image.width * this.transformation.matrix.scaleX;
-    this.bottom = this.top + this.image.height * this.transformation.matrix.scaleY;
+    const { translateX: coordX, translateY: coordY, scaleX: coordScaleX, scaleY: coordScaleY } = this.transformation.getMatrixData();
+    this.left = coordX;
+    this.top = coordY;
+    this.right = this.left + this.image.width * coordScaleX;
+    this.bottom = this.top + this.image.height * coordScaleY;
     this.subject.publish(this);
   }
   shootBeforeLoadCallbacks() {
@@ -42461,7 +42463,7 @@ class ImageItem extends BaseItem {
     }
     const ctx = context.ctx;
     ctx.save();
-    this.transformation.matrix.applyToContext(ctx);
+    this.transformation.applyToContext(ctx);
     const rotation = this.transformation.getRotation();
     if (rotation !== 0) {
       const imgWidth = this.image.width || 0;
@@ -42479,7 +42481,7 @@ class ImageItem extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("image-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.backgroundImage = `url(${this.storageLink})`;
     div.id = this.getId();
@@ -42632,7 +42634,7 @@ class Drawing extends BaseItem {
     untransformedMbr.top -= offset;
     untransformedMbr.right += offset;
     untransformedMbr.bottom += offset;
-    const mbr = untransformedMbr.getTransformed(this.transformation.matrix);
+    const mbr = untransformedMbr.getTransformed(this.transformation.toMatrix());
     this.left = mbr.left;
     this.top = mbr.top;
     this.right = mbr.right;
@@ -42679,7 +42681,7 @@ class Drawing extends BaseItem {
   }
   updateLines() {
     this.lines = [];
-    const matrix = this.transformation.matrix;
+    const matrix = this.transformation.toMatrix();
     if (this.points.length < 2) {
       return;
     }
@@ -42727,7 +42729,7 @@ class Drawing extends BaseItem {
     ctx.lineWidth = this.strokeWidth;
     ctx.lineCap = "round";
     ctx.setLineDash(this.linePattern);
-    this.transformation.matrix.applyToContext(ctx);
+    this.transformation.applyToContext(ctx);
     ctx.stroke(this.path2d.nativePath);
     ctx.restore();
     if (this.getLinkTo()) {
@@ -42737,7 +42739,7 @@ class Drawing extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("drawing-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const mbr = this.getMbr();
     const width2 = mbr.getWidth();
     const height2 = mbr.getHeight();
@@ -42926,8 +42928,9 @@ class Drawing extends BaseItem {
     return null;
   }
   isPointNearLine(point5, threshold = 10) {
-    const transformedMouseX = (point5.x - this.transformation.matrix.translateX) / this.transformation.matrix.scaleX;
-    const transformedMouseY = (point5.y - this.transformation.matrix.translateY) / this.transformation.matrix.scaleY;
+    const { translateX: drawingTranslateX, translateY: drawingTranslateY, scaleX: drawingScaleX, scaleY: drawingScaleY } = this.transformation.getMatrixData();
+    const transformedMouseX = (point5.x - drawingTranslateX) / drawingScaleX;
+    const transformedMouseY = (point5.y - drawingTranslateY) / drawingScaleY;
     const transformedMouse = new Point(transformedMouseX, transformedMouseY);
     for (let i = 0;i < this.points.length - 1; i++) {
       const p1 = this.points[i];
@@ -44254,40 +44257,16 @@ class AddFrame extends BoardTool {
     this.applyTranslateBy(-this.frame.getMbr().getWidth() / 2, -this.frame.getMbr().getHeight() / 2);
   }
   applyScaleTo(x, y) {
-    this.frame.transformation.apply({
-      class: "Transformation",
-      method: "scaleTo",
-      item: [this.frame.getId()],
-      x,
-      y
-    });
+    this.frame.transformation.setLocal({ scaleX: x, scaleY: y });
   }
   applyScaleBy(x, y) {
-    this.frame.transformation.apply({
-      class: "Transformation",
-      method: "scaleBy",
-      item: [this.frame.getId()],
-      x,
-      y
-    });
+    this.frame.transformation.scaleBy(x, y);
   }
   applyTranslateTo(x, y) {
-    this.frame.transformation.apply({
-      class: "Transformation",
-      method: "translateTo",
-      item: [this.frame.getId()],
-      x,
-      y
-    });
+    this.frame.transformation.setLocal(x, y);
   }
   applyTranslateBy(x, y) {
-    this.frame.transformation.apply({
-      class: "Transformation",
-      method: "translateBy",
-      item: [this.frame.getId()],
-      x,
-      y
-    });
+    this.frame.transformation.translateBy(x, y);
   }
   applyAddChildren(children) {
     const childrenIds = children.map((child) => {
@@ -44355,20 +44334,7 @@ class AddShape extends BoardTool {
   initTransformation(sx, sy) {
     sx = sx || this.bounds.getWidth() / 100;
     sy = sy || this.bounds.getHeight() / 100;
-    this.shape.transformation.apply({
-      class: "Transformation",
-      method: "translateTo",
-      item: [this.shape.getId()],
-      x: this.bounds.left,
-      y: this.bounds.top
-    });
-    this.shape.transformation.apply({
-      class: "Transformation",
-      method: "scaleTo",
-      item: [this.shape.getId()],
-      x: sx,
-      y: sy
-    });
+    this.shape.transformation.setLocal(this.bounds.left, this.bounds.top, sx, sy);
   }
   leftButtonDown() {
     if (this.type === "None") {
@@ -44903,7 +44869,7 @@ class ExportSnapshot extends Tool {
   }
   rectMoveTo(x, y) {
     this.transformation.translateTo(x, y);
-    this.mbr.transform(this.transformation.matrix);
+    this.mbr.transform(this.transformation.toMatrix());
     this.board.tools.publish();
   }
   resize() {
@@ -47094,20 +47060,7 @@ class ShapeTool extends CustomTool {
   initTransformation(sx, sy) {
     sx = sx || this.bounds.getWidth() / 100;
     sy = sy || this.bounds.getHeight() / 100;
-    this.item.transformation.apply({
-      class: "Transformation",
-      method: "translateTo",
-      item: [this.item.getId()],
-      x: this.bounds.left,
-      y: this.bounds.top
-    });
-    this.item.transformation.apply({
-      class: "Transformation",
-      method: "scaleTo",
-      item: [this.item.getId()],
-      x: sx,
-      y: sy
-    });
+    this.item.transformation.setLocal(this.bounds.left, this.bounds.top, sx, sy);
   }
   pointerDown() {
     this.isDown = true;
@@ -47178,22 +47131,10 @@ class StickerTool extends CustomTool {
   }
   pointerDown() {
     const point5 = this.board.pointer.point;
-    this.item.transformation.apply({
-      class: "Transformation",
-      method: "translateTo",
-      item: [this.item.getId()],
-      x: point5.x - this.settings.width / 2,
-      y: point5.y - this.settings.height / 2
-    });
+    this.item.transformation.setLocal(point5.x - this.settings.width / 2, point5.y - this.settings.height / 2);
     const width2 = this.item.getWidth();
     const height3 = this.item.getHeight();
-    this.item.transformation.apply({
-      class: "Transformation",
-      method: "scaleBy",
-      item: [this.item.getId()],
-      x: width2 / this.settings.width,
-      y: height3 / this.settings.height
-    });
+    this.item.transformation.scaleBy(width2 / this.settings.width, height3 / this.settings.height);
     const addedItem = this.board.add(this.item);
     this.board.selection.removeAll();
     this.board.selection.add(addedItem);
@@ -47811,7 +47752,7 @@ class Star2 extends BaseItem {
   }
   transformPath() {
     this.path = starPath.copy();
-    this.path.transform(this.transformation.matrix);
+    this.path.transform(this.transformation.toMatrix());
     this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
@@ -47839,7 +47780,7 @@ class Star2 extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("star-item");
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const mbr = this.getMbr();
     const unscaledWidth = mbr.getWidth() / scaleX;
     const unscaledHeight = mbr.getHeight() / scaleY;
@@ -47926,13 +47867,7 @@ class AddCounter extends StickerTool {
     const x = (left + right) / 2 - COUNTER_DIMENSIONS.width / 2;
     const y = (top + bottom) / 2 - COUNTER_DIMENSIONS.height / 2;
     const counter2 = new Counter(this.board, "");
-    counter2.transformation.apply({
-      class: "Transformation",
-      method: "translateTo",
-      item: [counter2.getId()],
-      x,
-      y
-    });
+    counter2.transformation.setLocal(x, y);
     const addedCounter = this.board.add(counter2);
     this.board.selection.add(addedCounter);
   }
@@ -47972,7 +47907,7 @@ class Counter extends BaseItem {
     }
   }
   updateMbr() {
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     this.left = translateX;
     this.top = translateY;
     this.right = this.left + COUNTER_DIMENSIONS.width * scaleX;
@@ -48169,7 +48104,7 @@ class Card extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = super.renderHTML(documentFactory);
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.backgroundImage = `url(${this.imageToRender?.src || this.backsideUrl})`;
     div.id = this.getId();
@@ -48183,7 +48118,7 @@ class Card extends BaseItem {
     return div;
   }
   updateMbr() {
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const rotation = this.transformation.getRotation();
     const height3 = this.dimensions.height * scaleY;
     const width2 = this.dimensions.width * scaleX;
@@ -48334,24 +48269,12 @@ class Deck extends BaseItem {
         const canAddItem = !this.index?.getById(childId) && foundItem instanceof Card && (typeof this.isPerpendicular === "undefined" || this.isPerpendicular === foundItem.getIsRotatedPerpendicular()) && (!firstCardDimensions || firstCardDimensions.width === foundItem.getDimensions().width && firstCardDimensions.height === foundItem.getDimensions().height);
         if (canAddItem) {
           this.isPerpendicular = foundItem.getIsRotatedPerpendicular();
-          foundItem.transformation.apply({
-            class: "Transformation",
-            method: "translateTo",
-            item: [this.id],
-            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)
-          });
+          foundItem.transformation.setLocal(this.left + (this.index?.list().length || 0) * (this.isPerpendicular ? 0 : conf.DECK_HORIZONTAL_OFFSET), this.top + (this.index?.list().length || 0) * (this.isPerpendicular ? conf.DECK_VERTICAL_OFFSET : 0));
           if (firstCard) {
-            const { scaleX, scaleY } = foundItem.transformation.matrix;
-            const { scaleX: targetScaleX, scaleY: targetScaleY } = firstCard.transformation.matrix;
+            const { scaleX, scaleY } = foundItem.transformation.getMatrixData();
+            const { scaleX: targetScaleX, scaleY: targetScaleY } = firstCard.transformation.getMatrixData();
             if (scaleX !== targetScaleX || scaleY !== targetScaleY) {
-              foundItem.transformation.apply({
-                class: "Transformation",
-                method: "scaleTo",
-                item: [this.id],
-                x: targetScaleX,
-                y: targetScaleY
-              });
+              foundItem.transformation.setLocal({ scaleX: targetScaleX, scaleY: targetScaleY });
             }
           }
           this.board.selection.remove(foundItem);
@@ -48453,7 +48376,7 @@ class Deck extends BaseItem {
     this.subject.publish(this);
   }
   updateMbr() {
-    const { translateX, translateY } = this.transformation.matrix;
+    const { translateX, translateY } = this.transformation.getMatrixData();
     const items = this.index.list();
     const itemsMbr = items[0]?.getMbr().combine(items.slice(1).map((item) => item.getMbr()));
     this.left = translateX;
@@ -48527,7 +48450,7 @@ class Deck extends BaseItem {
     if (!topCard) {
       return div;
     }
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const transform = `translate(${translateX}px, ${translateY}px) scale(1, 1)`;
     const topCardElement = topCard.renderHTML(documentFactory);
     div.appendChild(topCardElement);
@@ -48682,13 +48605,7 @@ function createDeck(event, board) {
   const onlyCards = board.selection.items.isAllItemsType("Card");
   if (onlyCards) {
     const deck = new Deck(board, "");
-    deck.transformation.apply({
-      class: "Transformation",
-      method: "translateTo",
-      item: [deck.getId()],
-      x: cardsOrDecks[cardsOrDecks.length - 1].left,
-      y: cardsOrDecks[cardsOrDecks.length - 1].top
-    });
+    deck.transformation.setLocal(cardsOrDecks[cardsOrDecks.length - 1].left, cardsOrDecks[cardsOrDecks.length - 1].top);
     const addedDeck = board.add(deck);
     board.selection.items.removeAll();
     addedDeck.addChildItems(cardsOrDecks);
@@ -48775,7 +48692,7 @@ class Dice extends BaseItem {
   }
   transformPath() {
     this.path = createRoundedRectanglePath(this).copy();
-    this.path.transform(this.transformation.matrix);
+    this.path.transform(this.transformation.toMatrix());
     this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
@@ -48997,7 +48914,7 @@ class Dice extends BaseItem {
   }
   renderHTML(documentFactory) {
     const div = super.renderHTML(documentFactory);
-    const { translateX, translateY, scaleX, scaleY } = this.transformation.matrix;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
     const mbr = this.getMbr();
     const width2 = mbr.getWidth();
     const height3 = mbr.getHeight();
@@ -49248,7 +49165,7 @@ class Screen extends BaseItem {
   }
   transformPath() {
     this.path = screenPath.copy();
-    this.path.transform(this.transformation.matrix);
+    this.path.transform(this.transformation.toMatrix());
     this.path.setBackgroundColor(this.backgroundColor);
     this.path.setBorderColor(this.borderColor);
     this.path.setBorderWidth(this.borderWidth);
@@ -51864,8 +51781,8 @@ function handleMultipleItemsResize({
     let itemX = item.getMbr().left;
     let itemY = item.getMbr().top;
     if (item.itemType === "Drawing") {
-      itemX = item.transformation.matrix.translateX;
-      itemY = item.transformation.matrix.translateY;
+      itemX = item.transformation.getMatrixData().translateX;
+      itemY = item.transformation.getMatrixData().translateY;
     }
     const deltaX = itemX - initMbr.left;
     const translateX = deltaX * matrix.scaleX - deltaX + matrix.translateX;