microboard-temp 0.5.136 → 0.5.138

package/dist/cjs/browser.js

@@ -7302,6 +7302,20 @@ class TransformationCommand {
   getReverse() {
     const op = this.operation;
     switch (this.operation.method) {
+      case "applyMatrix": {
+        const op2 = this.operation;
+        return mapItemsByOperation(this.transformation, () => ({
+          ...op2,
+          matrix: {
+            translateX: -op2.matrix.translateX,
+            translateY: -op2.matrix.translateY,
+            scaleX: 1 / op2.matrix.scaleX,
+            scaleY: 1 / op2.matrix.scaleY,
+            shearX: 0,
+            shearY: 0
+          }
+        }));
+      }
       case "translateTo":
         return mapItemsByOperation(this.transformation, (transformation) => {
           return {
@@ -7383,7 +7397,19 @@ class TransformationCommand {
         return transformation.map((currTrans) => {
           const op2 = operation.items[currTrans.getId()];
           let reverseOp;
-          if (op2.method === "scaleByTranslateBy") {
+          if (op2.method === "applyMatrix") {
+            reverseOp = {
+              ...op2,
+              matrix: {
+                translateX: -op2.matrix.translateX,
+                translateY: -op2.matrix.translateY,
+                scaleX: 1 / op2.matrix.scaleX,
+                scaleY: 1 / op2.matrix.scaleY,
+                shearX: 0,
+                shearY: 0
+              }
+            };
+          } else if (op2.method === "scaleByTranslateBy") {
             reverseOp = {
               ...op2,
               scale: { x: 1 / op2.scale.x, y: 1 / op2.scale.y },
@@ -7554,6 +7580,10 @@ class Transformation {
   apply(op) {
     this.previous = this.matrix.copy();
     switch (op.method) {
+      case "applyMatrix":
+        this.matrix.scale(op.matrix.scaleX, op.matrix.scaleY);
+        this.matrix.translate(op.matrix.translateX, op.matrix.translateY);
+        break;
       case "translateTo":
         this.applyTranslateTo(op.x, op.y);
         break;
@@ -7614,7 +7644,10 @@ class Transformation {
     this.matrix.translate(translate.x, translate.y);
   }
   applyTransformMany(op) {
-    if (op.method === "scaleByTranslateBy") {
+    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);
@@ -7681,66 +7714,75 @@ class Transformation {
   getId() {
     return this.id;
   }
-  translateTo(x, y, timeStamp) {
-    if (!this.id) {}
+  emitMatrix(matrix, timeStamp) {
     this.emit({
       class: "Transformation",
-      method: "translateTo",
+      method: "applyMatrix",
       item: [this.id],
-      x,
-      y,
+      matrix,
       timeStamp
     });
   }
+  translateTo(x, y, timeStamp) {
+    if (!this.id) {}
+    this.emitMatrix({
+      translateX: x - this.matrix.translateX,
+      translateY: y - this.matrix.translateY,
+      scaleX: 1,
+      scaleY: 1,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
+  }
   translateBy(x, y, timeStamp) {
     if (!this.id) {}
     if (x === 0 && y === 0) {
       return;
     }
-    this.emit({
-      class: "Transformation",
-      method: "translateBy",
-      item: [this.id],
-      x,
-      y,
-      timeStamp
-    });
+    this.emitMatrix({
+      translateX: x,
+      translateY: y,
+      scaleX: 1,
+      scaleY: 1,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
   }
   scaleTo(x, y, timeStamp) {
-    this.emit({
-      class: "Transformation",
-      method: "scaleTo",
-      item: [this.id],
-      x,
-      y,
-      timeStamp
-    });
+    this.emitMatrix({
+      translateX: 0,
+      translateY: 0,
+      scaleX: x / this.matrix.scaleX,
+      scaleY: y / this.matrix.scaleY,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
   }
   scaleBy(x, y, timeStamp) {
     if (x === 0 && y === 0) {
       return;
     }
-    this.emit({
-      class: "Transformation",
-      method: "scaleBy",
-      item: [this.id],
-      x,
-      y,
-      timeStamp
-    });
+    this.emitMatrix({
+      translateX: 0,
+      translateY: 0,
+      scaleX: x,
+      scaleY: y,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
   }
   scaleByTranslateBy(scale, translate, timeStamp) {
     if (scale.x === 0 && scale.y === 0 && translate.x === 0 && translate.y === 0) {
       return;
     }
-    this.emit({
-      class: "Transformation",
-      method: "scaleByTranslateBy",
-      item: [this.id],
-      scale,
-      translate,
-      timeStamp
-    });
+    this.emitMatrix({
+      translateX: translate.x,
+      translateY: translate.y,
+      scaleX: scale.x,
+      scaleY: scale.y,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
   }
   rotateTo(degree, timeStamp) {
     this.emit({
@@ -7760,27 +7802,28 @@ class Transformation {
       timeStamp
     });
   }
-  scaleToRelativeTo(x, y, point, timeStamp) {
-    this.emit({
-      class: "Transformation",
-      method: "scaleToRelativeTo",
-      item: [this.id],
-      x,
-      y,
-      point,
-      timeStamp
-    });
+  scaleToRelativeTo(x, y, _point, timeStamp) {
+    this.emitMatrix({
+      translateX: 0,
+      translateY: 0,
+      scaleX: x / this.matrix.scaleX,
+      scaleY: y / this.matrix.scaleY,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
   }
   scaleByRelativeTo(x, y, point, timeStamp) {
-    this.emit({
-      class: "Transformation",
-      method: "scaleByRelativeTo",
-      item: [this.id],
-      x,
-      y,
-      point,
-      timeStamp
-    });
+    const { scaleX: sx0, scaleY: sy0, translateX: tx0, translateY: ty0 } = this.matrix;
+    const newSx = sx0 * x;
+    const newSy = sy0 * y;
+    this.emitMatrix({
+      translateX: -point.x * newSx + point.x - tx0,
+      translateY: -point.y * newSy + point.y - ty0,
+      scaleX: x,
+      scaleY: y,
+      shearX: 0,
+      shearY: 0
+    }, timeStamp);
   }
   setIsLocked(isLocked, timestamp) {
     if (isLocked) {
@@ -37079,7 +37122,11 @@ class Connector2 extends BaseItem {
     this.transformation.subject.subscribe((_sub, op) => {
       if (op.method === "transformMany") {
         const operation = op.items[this.getId()];
-        if (operation.method === "scaleByTranslateBy" && (operation.scale.x !== 1 || operation.scale.y !== 1)) {
+        if (operation.method === "applyMatrix") {
+          if (operation.matrix.scaleX !== 1 || operation.matrix.scaleY !== 1) {
+            this.scalePoints();
+          }
+        } else if (operation.method === "scaleByTranslateBy" && (operation.scale.x !== 1 || operation.scale.y !== 1)) {
           this.scalePoints();
         }
       }
@@ -49326,6 +49373,7 @@ class Camera {
   trackingAnimationId = null;
   trackingTarget = null;
   lastTrackingTime = null;
+  springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
   constructor(boardPointer = new Pointer) {
     this.boardPointer = boardPointer;
     this.subject.subscribe((_camera) => {
@@ -49495,46 +49543,56 @@ class Camera {
     }
     this.isTrackingAnimation = true;
     this.lastTrackingTime = null;
-    const SMOOTHING = 7;
-    const SNAP_PX = 2;
+    const STIFFNESS = 150;
+    const DAMPING = 28;
+    const SNAP_PX = 0.5;
     const SNAP_SCALE = 0.0005;
+    const SNAP_VEL = 1;
+    const springStep = (pos, tgt, vel, dt) => {
+      const acc = STIFFNESS * (tgt - pos) - DAMPING * vel;
+      const newVel = vel + acc * dt;
+      return [pos + newVel * dt, newVel];
+    };
     const loop = () => {
-      const t3 = this.trackingTarget;
-      if (!t3) {
+      const tgt = this.trackingTarget;
+      if (!tgt) {
         this.trackingAnimationId = null;
         this.isTrackingAnimation = false;
         return;
       }
       const now = performance.now();
-      const dt = this.lastTrackingTime !== null ? Math.min(now - this.lastTrackingTime, 50) : 16;
+      const dt = Math.min(this.lastTrackingTime !== null ? now - this.lastTrackingTime : 16, 50) / 1000;
       this.lastTrackingTime = now;
-      const factor = 1 - Math.exp(-SMOOTHING * dt / 1000);
-      const dTx = t3.translateX - this.matrix.translateX;
-      const dTy = t3.translateY - this.matrix.translateY;
-      const dSx = t3.scaleX - this.matrix.scaleX;
-      const dSy = t3.scaleY - this.matrix.scaleY;
-      const dHx = t3.shearX - this.matrix.shearX;
-      const dHy = t3.shearY - this.matrix.shearY;
-      if (Math.abs(dTx) < SNAP_PX && Math.abs(dTy) < SNAP_PX && Math.abs(dSx) < SNAP_SCALE && Math.abs(dSy) < SNAP_SCALE) {
-        this.matrix.translateX = t3.translateX;
-        this.matrix.translateY = t3.translateY;
-        this.matrix.scaleX = t3.scaleX;
-        this.matrix.scaleY = t3.scaleY;
-        this.matrix.shearX = t3.shearX;
-        this.matrix.shearY = t3.shearY;
+      const v = this.springVelocity;
+      const [tx, vtx] = springStep(this.matrix.translateX, tgt.translateX, v.translateX, dt);
+      const [ty, vty] = springStep(this.matrix.translateY, tgt.translateY, v.translateY, dt);
+      const [sx, vsx] = springStep(this.matrix.scaleX, tgt.scaleX, v.scaleX, dt);
+      const [sy, vsy] = springStep(this.matrix.scaleY, tgt.scaleY, v.scaleY, dt);
+      const [hx, vhx] = springStep(this.matrix.shearX, tgt.shearX, v.shearX, dt);
+      const [hy, vhy] = springStep(this.matrix.shearY, tgt.shearY, v.shearY, dt);
+      this.matrix.translateX = tx;
+      this.matrix.translateY = ty;
+      this.matrix.scaleX = sx;
+      this.matrix.scaleY = sy;
+      this.matrix.shearX = hx;
+      this.matrix.shearY = hy;
+      this.springVelocity = { translateX: vtx, translateY: vty, scaleX: vsx, scaleY: vsy, shearX: vhx, shearY: vhy };
+      this.subject.publish(this);
+      const settled = Math.abs(tgt.translateX - tx) < SNAP_PX && Math.abs(tgt.translateY - ty) < SNAP_PX && Math.abs(tgt.scaleX - sx) < SNAP_SCALE && Math.abs(vtx) < SNAP_VEL && Math.abs(vty) < SNAP_VEL;
+      if (settled) {
+        this.matrix.translateX = tgt.translateX;
+        this.matrix.translateY = tgt.translateY;
+        this.matrix.scaleX = tgt.scaleX;
+        this.matrix.scaleY = tgt.scaleY;
+        this.matrix.shearX = tgt.shearX;
+        this.matrix.shearY = tgt.shearY;
         this.subject.publish(this);
+        this.springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
         this.trackingTarget = null;
         this.trackingAnimationId = null;
         this.isTrackingAnimation = false;
         return;
       }
-      this.matrix.translateX += dTx * factor;
-      this.matrix.translateY += dTy * factor;
-      this.matrix.scaleX += dSx * factor;
-      this.matrix.scaleY += dSy * factor;
-      this.matrix.shearX += dHx * factor;
-      this.matrix.shearY += dHy * factor;
-      this.subject.publish(this);
       this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
     };
     this.trackingAnimationId = safeRequestAnimationFrame(loop) || null;
@@ -49546,6 +49604,7 @@ class Camera {
     }
     this.trackingTarget = null;
     this.lastTrackingTime = null;
+    this.springVelocity = { translateX: 0, translateY: 0, scaleX: 0, scaleY: 0, shearX: 0, shearY: 0 };
     this.isTrackingAnimation = false;
   }
   useSavedSnapshot(optionalMatrix) {
@@ -51811,26 +51870,23 @@ function getRichTextTranslation({
     item.editor.setMaxWidth(item.getWidth() / item.transformation.getScale().x * matrix.scaleX);
     return {
       class: "Transformation",
-      method: "scaleByTranslateBy",
+      method: "applyMatrix",
       item: [item.getId()],
-      translate: { x: matrix.translateX, y: 0 },
-      scale: { x: matrix.scaleX, y: matrix.scaleX }
+      matrix: { translateX: matrix.translateX, translateY: 0, scaleX: matrix.scaleX, scaleY: matrix.scaleX, shearX: 0, shearY: 0 }
     };
   } else if (isHeight) {
     return {
       class: "Transformation",
-      method: "scaleByTranslateBy",
+      method: "applyMatrix",
       item: [item.getId()],
-      translate: { x: translateX, y: translateY },
-      scale: { x: 1, y: 1 }
+      matrix: { translateX, translateY, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 }
     };
   } else {
     return {
       class: "Transformation",
-      method: "scaleByTranslateBy",
+      method: "applyMatrix",
       item: [item.getId()],
-      translate: { x: translateX, y: translateY },
-      scale: { x: matrix.scaleX, y: matrix.scaleX }
+      matrix: { translateX, translateY, scaleX: matrix.scaleX, scaleY: matrix.scaleX, shearX: 0, shearY: 0 }
     };
   }
 }
@@ -51846,26 +51902,23 @@ function getAINodeTranslation({
     item.text.editor.setMaxWidth(item.text.getWidth() / item.transformation.getScale().x * matrix.scaleX);
     return {
       class: "Transformation",
-      method: "scaleByTranslateBy",
+      method: "applyMatrix",
       item: [item.getId()],
-      translate: { x: matrix.translateX, y: 0 },
-      scale: { x: matrix.scaleX, y: matrix.scaleX }
+      matrix: { translateX: matrix.translateX, translateY: 0, scaleX: matrix.scaleX, scaleY: matrix.scaleX, shearX: 0, shearY: 0 }
     };
   } else if (isHeight) {
     return {
       class: "Transformation",
-      method: "scaleByTranslateBy",
+      method: "applyMatrix",
       item: [item.getId()],
-      translate: { x: translateX, y: translateY },
-      scale: { x: 1, y: 1 }
+      matrix: { translateX, translateY, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 }
     };
   } else {
     return {
       class: "Transformation",
-      method: "scaleByTranslateBy",
+      method: "applyMatrix",
       item: [item.getId()],
-      translate: { x: translateX, y: translateY },
-      scale: { x: matrix.scaleX, y: matrix.scaleX }
+      matrix: { translateX, translateY, scaleX: matrix.scaleX, scaleY: matrix.scaleX, shearX: 0, shearY: 0 }
     };
   }
 }
@@ -51881,10 +51934,9 @@ function getItemTranslation({
   if (item instanceof Sticker && (isWidth || isHeight)) {
     return {
       class: "Transformation",
-      method: "scaleByTranslateBy",
+      method: "applyMatrix",
       item: [item.getId()],
-      translate: { x: translateX, y: translateY },
-      scale: { x: 1, y: 1 }
+      matrix: { translateX, translateY, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 }
     };
   } else {
     if (item instanceof Frame2 && item.getCanChangeRatio() && isShiftPressed && item.getFrameType() !== "Custom") {
@@ -51892,10 +51944,9 @@ function getItemTranslation({
     }
     return {
       class: "Transformation",
-      method: "scaleByTranslateBy",
+      method: "applyMatrix",
       item: [item.getId()],
-      translate: { x: translateX, y: translateY },
-      scale: { x: matrix.scaleX, y: matrix.scaleY }
+      matrix: { translateX, translateY, scaleX: matrix.scaleX, scaleY: matrix.scaleY, shearX: 0, shearY: 0 }
     };
   }
 }
@@ -54860,6 +54911,24 @@ function mergeTransformationOperations(opA, opB) {
   }
   const method = opA.method;
   switch (method) {
+    case "applyMatrix":
+      if (opB.method !== method) {
+        return;
+      }
+      return {
+        class: "Transformation",
+        method: "applyMatrix",
+        item: opA.item,
+        matrix: {
+          translateX: opA.matrix.translateX + opB.matrix.translateX,
+          translateY: opA.matrix.translateY + opB.matrix.translateY,
+          scaleX: opA.matrix.scaleX * opB.matrix.scaleX,
+          scaleY: opA.matrix.scaleY * opB.matrix.scaleY,
+          shearX: 0,
+          shearY: 0
+        },
+        timeStamp: opB.timeStamp
+      };
     case "translateBy":
       if (opB.method !== method) {
         return;
@@ -54971,7 +55040,23 @@ function mergeItems(opA, opB) {
     const items = {};
     Object.keys(opB.items).forEach((itemId) => {
       if (opA.items[itemId] !== undefined) {
-        if (opA.items[itemId].method === "scaleByTranslateBy") {
+        if (opA.items[itemId].method === "applyMatrix" && opB.items[itemId].method === "applyMatrix") {
+          const a2 = opA.items[itemId].matrix;
+          const b = opB.items[itemId].matrix;
+          items[itemId] = {
+            class: "Transformation",
+            method: "applyMatrix",
+            item: [itemId],
+            matrix: {
+              translateX: a2.translateX + b.translateX,
+              translateY: a2.translateY + b.translateY,
+              scaleX: a2.scaleX * b.scaleX,
+              scaleY: a2.scaleY * b.scaleY,
+              shearX: 0,
+              shearY: 0
+            }
+          };
+        } else if (opA.items[itemId].method === "scaleByTranslateBy") {
           const newTransformation = resolve2(opA.items[itemId].scale, opA.items[itemId].translate, opB.items[itemId]);
           items[itemId] = {
             class: "Transformation",