microboard-temp 0.13.5 → 0.13.7

package/dist/cjs/browser.js

@@ -4674,7 +4674,13 @@ var conf = {
   CARD_DIMENSIONS: { width: 250, height: 400 },
   DEFAULT_GAME_ITEM_DIMENSIONS: { width: 200, height: 200 },
   MAX_CARD_SIZE: 500,
-  CONNECTOR_ITEM_OFFSET: 20
+  CONNECTOR_ITEM_OFFSET: 20,
+  GRAVITY_G: 80,
+  GRAVITY_G_CENTER: 120,
+  GRAVITY_DAMPING: 0.96,
+  GRAVITY_RESTITUTION: 0.5,
+  GRAVITY_REPULSION: 200,
+  GRAVITY_MAX_DISTANCE: 3000
 };
 initDefaultI18N();
 
@@ -22202,6 +22208,7 @@ class RichText extends BaseItem {
   autoSizeScale = 1;
   containerMaxWidth;
   linkTo;
+  localArea;
   maxHeight;
   selection;
   transformationRenderBlock = undefined;
@@ -22223,6 +22230,7 @@ class RichText extends BaseItem {
     this.autoSize = autoSize;
     this.insideOf = insideOf;
     this.initialTextStyles = initialTextStyles;
+    this.localArea = container.copy();
     counter = counter + 1;
     this.rtCounter = counter;
     this.linkTo = linkTo || new LinkTo(this.id, this.board.events);
@@ -22375,7 +22383,7 @@ class RichText extends BaseItem {
         this.layoutNodes.width = this.containerMaxWidth;
       }
     }
-    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+    this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
     this.transformCanvas();
     this.subject.publish(this);
     this.updateRequired = false;
@@ -22455,7 +22463,7 @@ class RichText extends BaseItem {
       this.right = transformed.right;
       this.bottom = transformed.bottom;
     } else {
-      this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+      this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
     }
     this.setClipPath();
     if (!this.isInShape && !this.autoSize) {
@@ -22483,16 +22491,16 @@ class RichText extends BaseItem {
     }
   }
   setClipPath() {
-    const container = this.getTransformedContainer();
-    const width = container.getWidth();
-    const height = container.getHeight();
+    const width = this.localArea.getWidth();
+    const height = this.localArea.getHeight();
     this.clipPath = new conf.path2DFactory;
     this.clipPath.rect(0, 0, width, height);
   }
   setContainer(container) {
     this.isContainerSet = true;
+    this.localArea = container.copy();
     this.container = container;
-    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+    this.updateElement();
   }
   applyMaxWidth(maxWidth) {
     const shouldNotShrink = this.insideOf !== "RichText" && this.insideOf !== "AINode" && this.containerMaxWidth && this.shrinkWidth;
@@ -22515,8 +22523,8 @@ class RichText extends BaseItem {
       matrix = this.transformation.toMatrix();
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
-    return this.container.getTransformed(scaledMatrix);
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    return this.localArea.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -22858,7 +22866,7 @@ class RichText extends BaseItem {
     if (typeof document !== "undefined") {
       document.fonts.ready.then(() => {
         this.layoutNodes = getBlockNodes(this.getBlockNodes(), this.shrinkWidth ? Infinity : this.getMaxWidth() || 0, this.shrinkWidth, this.insideOf === "Frame");
-        this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+        this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
         this.transformCanvas();
       });
     }
@@ -22888,7 +22896,7 @@ class RichText extends BaseItem {
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
     context.matrix = scaledMatrix;
     context.applyChanges();
-    ctx.translate(this.container.left, this.container.top);
+    ctx.translate(this.left, this.top);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -23029,7 +23037,7 @@ class RichText extends BaseItem {
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    const transform = `translate(${scaledMatrix.translateX + this.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    const transform = `translate(${scaledMatrix.translateX + this.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
     const transformedWidth = this.getMbr().getWidth();
     const transformedHeight = this.getMbr().getHeight();
     const div = documentFactory.createElement("rich-text");
@@ -23125,6 +23133,19 @@ class RichText extends BaseItem {
   getPrevMbr() {
     return this.prevMbr;
   }
+  getMbr() {
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
+    }
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    return new Mbr(this.left, this.top, this.right, this.bottom).getTransformed(scaledMatrix);
+  }
 }
 
 // src/Items/Mbr/updateRects.ts
@@ -41024,6 +41045,8 @@ class DefaultFrameData {
 
 // src/Items/Frame/Frame.ts
 var defaultFrameData = new DefaultFrameData;
+var HEADING_TOP_OFFSET = -45;
+var HEADING_BOTTOM_OFFSET = -12;
 
 class Frame2 extends BaseItem {
   getItemById;
@@ -41061,14 +41084,14 @@ class Frame2 extends BaseItem {
     this.borderStyle = borderStyle;
     this.borderWidth = borderWidth;
     this.textContainer = Frames[this.shapeType].textBounds.copy();
+    this.textContainer.top = HEADING_TOP_OFFSET;
+    this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
     this.path = Frames[this.shapeType].path.copy();
     this.transformation = new Transformation(this.id, board.events);
     this.linkTo = new LinkTo(this.id, board.events);
     this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontSize: 18, fontColor: FRAME_TITLE_COLOR });
     this.text.editor.verticalAlignment = "bottom";
     this.text.setSelectionHorisontalAlignment("left");
-    this.textContainer.top = -45;
-    this.textContainer.bottom = -12;
     this.text.customTransformationMatrix = () => {
       const matrix = this.transformation.toMatrix();
       return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
@@ -41101,6 +41124,8 @@ class Frame2 extends BaseItem {
   initPath() {
     this.path = Frames[this.shapeType].path.copy();
     this.textContainer = Frames[this.shapeType].textBounds.copy();
+    this.textContainer.top = HEADING_TOP_OFFSET;
+    this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
     this.text.setContainer(this.textContainer.copy());
     this.text.updateElement();
   }
@@ -41245,6 +41270,9 @@ class Frame2 extends BaseItem {
     }
     if (data.text) {
       this.text.deserialize(data.text);
+      this.textContainer.top = HEADING_TOP_OFFSET;
+      this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
+      this.text.setContainer(this.textContainer.copy());
     }
     this.canChangeRatio = data.canChangeRatio ?? this.canChangeRatio;
     this.subject.publish(this);
@@ -54348,14 +54376,8 @@ class GravityEngine {
   tickTimer = null;
   syncTimer = null;
   lastSyncedPositions = new Map;
-  G = 80;
-  G_CENTER = 120;
-  DAMPING = 0.96;
-  RESTITUTION = 0.5;
-  REPULSION = 200;
   TICK_MS = 33;
   SYNC_MS = 300;
-  MAX_DISTANCE = 3000;
   SOFTENING_SQ = 50 * 50;
   MIN_MOVE_PX = 0.1;
   constructor(board) {
@@ -54424,8 +54446,8 @@ class GravityEngine {
       const dcx = centerX - s1.cx;
       const dcy = centerY - s1.cy;
       const distCenter = Math.sqrt(dcx * dcx + dcy * dcy) + 1;
-      ax += this.G_CENTER * dcx / distCenter;
-      ay += this.G_CENTER * dcy / distCenter;
+      ax += conf.GRAVITY_G_CENTER * dcx / distCenter;
+      ay += conf.GRAVITY_G_CENTER * dcy / distCenter;
       for (let j = 0;j < snap.length; j++) {
         if (i === j)
           continue;
@@ -54433,7 +54455,7 @@ class GravityEngine {
         const dx = s2.cx - s1.cx;
         const dy = s2.cy - s1.cy;
         const dist = Math.sqrt(dx * dx + dy * dy) + 0.001;
-        if (dist > this.MAX_DISTANCE)
+        if (dist > conf.GRAVITY_MAX_DISTANCE)
           continue;
         const overlapping = s1.right > s2.left && s2.right > s1.left && s1.bottom > s2.top && s2.bottom > s1.top;
         if (overlapping) {
@@ -54442,26 +54464,26 @@ class GravityEngine {
           if (overlapX < overlapY) {
             const sign = s1.cx < s2.cx ? -1 : 1;
             if (sign * vel.vx < 0)
-              vel.vx = -vel.vx * this.RESTITUTION;
-            ax += sign * this.REPULSION * overlapX;
+              vel.vx = -vel.vx * conf.GRAVITY_RESTITUTION;
+            ax += sign * conf.GRAVITY_REPULSION * overlapX;
           } else {
             const sign = s1.cy < s2.cy ? -1 : 1;
             if (sign * vel.vy < 0)
-              vel.vy = -vel.vy * this.RESTITUTION;
-            ay += sign * this.REPULSION * overlapY;
+              vel.vy = -vel.vy * conf.GRAVITY_RESTITUTION;
+            ay += sign * conf.GRAVITY_REPULSION * overlapY;
           }
         } else {
           const touchDist = (s1.w + s2.w + s1.h + s2.h) * 0.25;
           if (dist < touchDist + 5)
             continue;
           const distSq = dx * dx + dy * dy;
-          const gravAcc = this.G * s2.mass / (distSq + this.SOFTENING_SQ);
+          const gravAcc = conf.GRAVITY_G * s2.mass / (distSq + this.SOFTENING_SQ);
           ax += gravAcc * dx / dist;
           ay += gravAcc * dy / dist;
         }
       }
-      vel.vx = (vel.vx + ax * dt) * this.DAMPING;
-      vel.vy = (vel.vy + ay * dt) * this.DAMPING;
+      vel.vx = (vel.vx + ax * dt) * conf.GRAVITY_DAMPING;
+      vel.vy = (vel.vy + ay * dt) * conf.GRAVITY_DAMPING;
       const moveX = vel.vx * dt;
       const moveY = vel.vy * dt;
       if (Math.abs(moveX) >= this.MIN_MOVE_PX || Math.abs(moveY) >= this.MIN_MOVE_PX) {

package/dist/cjs/index.js

@@ -4674,7 +4674,13 @@ var conf = {
   CARD_DIMENSIONS: { width: 250, height: 400 },
   DEFAULT_GAME_ITEM_DIMENSIONS: { width: 200, height: 200 },
   MAX_CARD_SIZE: 500,
-  CONNECTOR_ITEM_OFFSET: 20
+  CONNECTOR_ITEM_OFFSET: 20,
+  GRAVITY_G: 80,
+  GRAVITY_G_CENTER: 120,
+  GRAVITY_DAMPING: 0.96,
+  GRAVITY_RESTITUTION: 0.5,
+  GRAVITY_REPULSION: 200,
+  GRAVITY_MAX_DISTANCE: 3000
 };
 initDefaultI18N();
 
@@ -22202,6 +22208,7 @@ class RichText extends BaseItem {
   autoSizeScale = 1;
   containerMaxWidth;
   linkTo;
+  localArea;
   maxHeight;
   selection;
   transformationRenderBlock = undefined;
@@ -22223,6 +22230,7 @@ class RichText extends BaseItem {
     this.autoSize = autoSize;
     this.insideOf = insideOf;
     this.initialTextStyles = initialTextStyles;
+    this.localArea = container.copy();
     counter = counter + 1;
     this.rtCounter = counter;
     this.linkTo = linkTo || new LinkTo(this.id, this.board.events);
@@ -22375,7 +22383,7 @@ class RichText extends BaseItem {
         this.layoutNodes.width = this.containerMaxWidth;
       }
     }
-    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+    this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
     this.transformCanvas();
     this.subject.publish(this);
     this.updateRequired = false;
@@ -22455,7 +22463,7 @@ class RichText extends BaseItem {
       this.right = transformed.right;
       this.bottom = transformed.bottom;
     } else {
-      this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+      this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
     }
     this.setClipPath();
     if (!this.isInShape && !this.autoSize) {
@@ -22483,16 +22491,16 @@ class RichText extends BaseItem {
     }
   }
   setClipPath() {
-    const container = this.getTransformedContainer();
-    const width = container.getWidth();
-    const height = container.getHeight();
+    const width = this.localArea.getWidth();
+    const height = this.localArea.getHeight();
     this.clipPath = new conf.path2DFactory;
     this.clipPath.rect(0, 0, width, height);
   }
   setContainer(container) {
     this.isContainerSet = true;
+    this.localArea = container.copy();
     this.container = container;
-    this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+    this.updateElement();
   }
   applyMaxWidth(maxWidth) {
     const shouldNotShrink = this.insideOf !== "RichText" && this.insideOf !== "AINode" && this.containerMaxWidth && this.shrinkWidth;
@@ -22515,8 +22523,8 @@ class RichText extends BaseItem {
       matrix = this.transformation.toMatrix();
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
-    const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
-    return this.container.getTransformed(scaledMatrix);
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    return this.localArea.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -22858,7 +22866,7 @@ class RichText extends BaseItem {
     if (typeof document !== "undefined") {
       document.fonts.ready.then(() => {
         this.layoutNodes = getBlockNodes(this.getBlockNodes(), this.shrinkWidth ? Infinity : this.getMaxWidth() || 0, this.shrinkWidth, this.insideOf === "Frame");
-        this.alignInRectangle(this.getTransformedContainer(), this.editor.verticalAlignment);
+        this.alignInRectangle(this.localArea, this.editor.verticalAlignment);
         this.transformCanvas();
       });
     }
@@ -22888,7 +22896,7 @@ class RichText extends BaseItem {
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
     context.matrix = scaledMatrix;
     context.applyChanges();
-    ctx.translate(this.container.left, this.container.top);
+    ctx.translate(this.left, this.top);
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
       ctx.clip(this.clipPath.nativePath);
@@ -23029,7 +23037,7 @@ class RichText extends BaseItem {
     }
     const { translateX, translateY, scaleX, scaleY } = matrix;
     const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
-    const transform = `translate(${scaledMatrix.translateX + this.container.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.container.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
+    const transform = `translate(${scaledMatrix.translateX + this.left * scaledMatrix.scaleX}px, ${scaledMatrix.translateY + this.top * scaledMatrix.scaleY}px) scale(${scaledMatrix.scaleX}, ${scaledMatrix.scaleY})`;
     const transformedWidth = this.getMbr().getWidth();
     const transformedHeight = this.getMbr().getHeight();
     const div = documentFactory.createElement("rich-text");
@@ -23125,6 +23133,19 @@ class RichText extends BaseItem {
   getPrevMbr() {
     return this.prevMbr;
   }
+  getMbr() {
+    const cameraScale = this.board.camera.getScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
+    }
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX * extraScale, scaleY * extraScale);
+    return new Mbr(this.left, this.top, this.right, this.bottom).getTransformed(scaledMatrix);
+  }
 }
 
 // src/Items/Mbr/updateRects.ts
@@ -41024,6 +41045,8 @@ class DefaultFrameData {
 
 // src/Items/Frame/Frame.ts
 var defaultFrameData = new DefaultFrameData;
+var HEADING_TOP_OFFSET = -45;
+var HEADING_BOTTOM_OFFSET = -12;
 
 class Frame2 extends BaseItem {
   getItemById;
@@ -41061,14 +41084,14 @@ class Frame2 extends BaseItem {
     this.borderStyle = borderStyle;
     this.borderWidth = borderWidth;
     this.textContainer = Frames[this.shapeType].textBounds.copy();
+    this.textContainer.top = HEADING_TOP_OFFSET;
+    this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
     this.path = Frames[this.shapeType].path.copy();
     this.transformation = new Transformation(this.id, board.events);
     this.linkTo = new LinkTo(this.id, board.events);
     this.text = new RichText(board, this.textContainer, this.id, this.transformation, this.linkTo, this.name, true, false, "Frame", { ...conf.DEFAULT_TEXT_STYLES, fontSize: 18, fontColor: FRAME_TITLE_COLOR });
     this.text.editor.verticalAlignment = "bottom";
     this.text.setSelectionHorisontalAlignment("left");
-    this.textContainer.top = -45;
-    this.textContainer.bottom = -12;
     this.text.customTransformationMatrix = () => {
       const matrix = this.transformation.toMatrix();
       return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
@@ -41101,6 +41124,8 @@ class Frame2 extends BaseItem {
   initPath() {
     this.path = Frames[this.shapeType].path.copy();
     this.textContainer = Frames[this.shapeType].textBounds.copy();
+    this.textContainer.top = HEADING_TOP_OFFSET;
+    this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
     this.text.setContainer(this.textContainer.copy());
     this.text.updateElement();
   }
@@ -41245,6 +41270,9 @@ class Frame2 extends BaseItem {
     }
     if (data.text) {
       this.text.deserialize(data.text);
+      this.textContainer.top = HEADING_TOP_OFFSET;
+      this.textContainer.bottom = HEADING_BOTTOM_OFFSET;
+      this.text.setContainer(this.textContainer.copy());
     }
     this.canChangeRatio = data.canChangeRatio ?? this.canChangeRatio;
     this.subject.publish(this);
@@ -54348,14 +54376,8 @@ class GravityEngine {
   tickTimer = null;
   syncTimer = null;
   lastSyncedPositions = new Map;
-  G = 80;
-  G_CENTER = 120;
-  DAMPING = 0.96;
-  RESTITUTION = 0.5;
-  REPULSION = 200;
   TICK_MS = 33;
   SYNC_MS = 300;
-  MAX_DISTANCE = 3000;
   SOFTENING_SQ = 50 * 50;
   MIN_MOVE_PX = 0.1;
   constructor(board) {
@@ -54424,8 +54446,8 @@ class GravityEngine {
       const dcx = centerX - s1.cx;
       const dcy = centerY - s1.cy;
       const distCenter = Math.sqrt(dcx * dcx + dcy * dcy) + 1;
-      ax += this.G_CENTER * dcx / distCenter;
-      ay += this.G_CENTER * dcy / distCenter;
+      ax += conf.GRAVITY_G_CENTER * dcx / distCenter;
+      ay += conf.GRAVITY_G_CENTER * dcy / distCenter;
       for (let j = 0;j < snap.length; j++) {
         if (i === j)
           continue;
@@ -54433,7 +54455,7 @@ class GravityEngine {
         const dx = s2.cx - s1.cx;
         const dy = s2.cy - s1.cy;
         const dist = Math.sqrt(dx * dx + dy * dy) + 0.001;
-        if (dist > this.MAX_DISTANCE)
+        if (dist > conf.GRAVITY_MAX_DISTANCE)
           continue;
         const overlapping = s1.right > s2.left && s2.right > s1.left && s1.bottom > s2.top && s2.bottom > s1.top;
         if (overlapping) {
@@ -54442,26 +54464,26 @@ class GravityEngine {
           if (overlapX < overlapY) {
             const sign = s1.cx < s2.cx ? -1 : 1;
             if (sign * vel.vx < 0)
-              vel.vx = -vel.vx * this.RESTITUTION;
-            ax += sign * this.REPULSION * overlapX;
+              vel.vx = -vel.vx * conf.GRAVITY_RESTITUTION;
+            ax += sign * conf.GRAVITY_REPULSION * overlapX;
           } else {
             const sign = s1.cy < s2.cy ? -1 : 1;
             if (sign * vel.vy < 0)
-              vel.vy = -vel.vy * this.RESTITUTION;
-            ay += sign * this.REPULSION * overlapY;
+              vel.vy = -vel.vy * conf.GRAVITY_RESTITUTION;
+            ay += sign * conf.GRAVITY_REPULSION * overlapY;
           }
         } else {
           const touchDist = (s1.w + s2.w + s1.h + s2.h) * 0.25;
           if (dist < touchDist + 5)
             continue;
           const distSq = dx * dx + dy * dy;
-          const gravAcc = this.G * s2.mass / (distSq + this.SOFTENING_SQ);
+          const gravAcc = conf.GRAVITY_G * s2.mass / (distSq + this.SOFTENING_SQ);
           ax += gravAcc * dx / dist;
           ay += gravAcc * dy / dist;
         }
       }
-      vel.vx = (vel.vx + ax * dt) * this.DAMPING;
-      vel.vy = (vel.vy + ay * dt) * this.DAMPING;
+      vel.vx = (vel.vx + ax * dt) * conf.GRAVITY_DAMPING;
+      vel.vy = (vel.vy + ay * dt) * conf.GRAVITY_DAMPING;
       const moveX = vel.vx * dt;
       const moveY = vel.vy * dt;
       if (Math.abs(moveX) >= this.MIN_MOVE_PX || Math.abs(moveY) >= this.MIN_MOVE_PX) {