microboard-ui-temp 0.10.0 → 0.10.2

package/dist/{chunk-kh8veacg.js → chunk-e1r2sk6e.js}

@@ -248398,7 +248398,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();
 var BG_LIGHT = "rgb(248, 249, 251)";
@@ -265469,7 +265475,7 @@ class BaseItem extends Mbr {
     if (!this.isHoverHighlighted) {
       return;
     }
-    const mbr = this.getMbr();
+    const mbr = this.getWorldMbr();
     mbr.strokeWidth = 2 / context.matrix.scaleX;
     mbr.borderColor = BaseItem.HOVER_HIGHLIGHT_COLOR;
     mbr.render(context);
@@ -265528,6 +265534,8 @@ class RichText extends BaseItem {
   _onLimitReached = () => {};
   shrinkWidth = false;
   prevMbr = null;
+  customTransformationMatrix;
+  renderingScale;
   rtCounter = 0;
   constructor(board, container, id2 = "", transformation = new Transformation(id2, board.events), linkTo, placeholderText = conf.i18n?.t("board.textPlaceholder"), isInShape = false, autoSize = false, insideOf, initialTextStyles = conf.DEFAULT_TEXT_STYLES) {
     super(board, id2);
@@ -265650,10 +265658,10 @@ class RichText extends BaseItem {
     const shouldUpdateLayout = this.getTextWidth() > (maxWidth || 0);
     if (shouldUpdateLayout) {
       this.updateElement();
-      this.subject.publish(this);
     } else {
       this.transformCanvas();
       this.recoordinate(maxWidth);
+      this.subject.publish(this);
     }
   }
   handleFocus = () => {
@@ -265717,10 +265725,10 @@ class RichText extends BaseItem {
   }
   getMaxWidth() {
     if (this.autoSize) {
-      return this.editor.maxWidth || this.getTransformedContainer().getWidth();
+      return this.editor.maxWidth || this.container.getWidth();
     }
     if (this.isContainerSet) {
-      return this.getTransformedContainer().getWidth();
+      return this.container.getWidth();
     } else {
       return this.containerMaxWidth || this.editor.maxWidth;
     }
@@ -265821,13 +265829,17 @@ class RichText extends BaseItem {
     return this.shrinkWidth;
   }
   getTransformedContainer() {
-    if (this.insideOf === "Frame") {
-      const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
-      const scaleY = this.getMbr().getHeight() * 2 / 10;
-      const matrix = new Matrix(translateX, translateY, scaleX, scaleY);
-      return this.container.getTransformed(matrix);
+    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();
     }
-    return this.container.getTransformed(this.transformation.toMatrix());
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -266186,10 +266198,20 @@ class RichText extends BaseItem {
     const { ctx } = context;
     ctx.save();
     ctx.translate(this.left, this.top);
+    const cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
+    }
+    const { scaleX, scaleY } = matrix;
     const shouldScale = !this.isInShape && !this.autoSize;
     if (shouldScale) {
-      const { scaleX, scaleY } = this.transformation.getMatrixData();
-      ctx.scale(scaleX, scaleY);
+      ctx.scale(scaleX * extraScale, scaleY * extraScale);
+    } else if (extraScale !== 1) {
+      ctx.scale(extraScale, extraScale);
     }
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
@@ -266321,10 +266343,18 @@ 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.getMatrixData();
-    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
-    const transformedWidth = this.getTransformedContainer().getWidth();
-    const transformedHeight = this.getTransformedContainer().getHeight();
+    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 { scaleX, scaleY } = matrix;
+    const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
+    const transformedWidth = this.getMbr().getWidth();
+    const transformedHeight = this.getMbr().getHeight();
     const div = documentFactory.createElement("rich-text");
     div.id = this.getId();
     div.style.width = `${transformedWidth + 5}px`;
@@ -282909,7 +282939,9 @@ class Shape extends BaseItem {
       this.subject.publish(this);
     });
     this.text.insideOf = this.itemType;
+    this.transformPath();
     this.updateMbr();
+    this.subject.publish(this);
   }
   saveShapeData() {
     tempStorage.setShapeData({
@@ -283458,6 +283490,8 @@ class Sticker extends BaseItem {
       this.subject.publish(this);
     });
     this.text.updateElement();
+    this.transformPath();
+    this.subject.publish(this);
   }
   emit(operation) {
     if (this.board.events) {
@@ -283844,11 +283878,11 @@ function convertBlobToDataUrl(blob) {
     };
   });
 }
-var FRAME_BORDER_COLOR = "rgba(10, 15, 41, 0.08)";
+var FRAME_BORDER_COLOR = semanticColor("contrastGray");
 var FRAME_HIGHLIGHTER_BORDER_COLOR = "#93AFF6";
 var FRAME_CHILDREN_HIGHLIGHTER_COLOR = "rgb(10, 15, 41, .08)";
 var FRAME_CHILDREN_HIGHLIGHTER_BORDER_COLOR = "#4778F5";
-var FRAME_TITLE_COLOR = "rgb(107, 110, 120)";
+var FRAME_TITLE_COLOR = semanticColor("contrastNeutral");
 var FRAME_TYPES = [
   { id: "Custom", label: "Custom" },
   { id: "Frame16x9", label: "16:9" },
@@ -283893,7 +283927,7 @@ class DefaultFrameData {
   canChangeRatio;
   linkTo;
   itemType = "Frame";
-  constructor(shapeType = "Custom", backgroundColor = fixedColor(FRAME_FILL_COLOR), backgroundOpacity = 1, borderColor = fixedColor(FRAME_BORDER_COLOR), borderOpacity = 0.08, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
+  constructor(shapeType = "Custom", backgroundColor = semanticColor("contrastNeutral"), backgroundOpacity = 1, borderColor = FRAME_BORDER_COLOR, borderOpacity = 1, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
     this.shapeType = shapeType;
     this.backgroundColor = backgroundColor;
     this.backgroundOpacity = backgroundOpacity;
@@ -283909,6 +283943,8 @@ class DefaultFrameData {
   }
 }
 var defaultFrameData = new DefaultFrameData;
+var HEADING_TOP_OFFSET = -33;
+var HEADING_BOTTOM_OFFSET = -5;
 
 class Frame2 extends BaseItem {
   getItemById;
@@ -283924,7 +283960,7 @@ class Frame2 extends BaseItem {
   parent = "Board";
   transformation;
   subject = new Subject;
-  textContainer;
+  textContainer = new Mbr;
   path;
   children = [];
   mbr = new Mbr;
@@ -283945,12 +283981,23 @@ class Frame2 extends BaseItem {
     this.borderOpacity = borderOpacity;
     this.borderStyle = borderStyle;
     this.borderWidth = borderWidth;
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
     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, fontColor: FRAME_TITLE_COLOR });
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
+    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.text.customTransformationMatrix = () => {
+      const matrix = this.transformation.toMatrix();
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
+    };
+    this.text.renderingScale = (cameraScale) => {
+      return Math.max(1, Math.min(6, 1.2 / cameraScale));
+    };
     this.transformation.subject.subscribe(() => {
       this.transformPath();
       this.updateMbr();
@@ -283975,9 +284022,17 @@ class Frame2 extends BaseItem {
   }
   initPath() {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
-    this.text.setContainer(this.textContainer.copy());
-    this.text.updateElement();
+    this.updateTextContainer();
+  }
+  updateTextContainer() {
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
+    if (this.text) {
+      this.text.setContainer(this.textContainer.copy());
+      this.text.updateElement();
+    }
   }
   getPaths() {
     return this.path;
@@ -284120,6 +284175,7 @@ class Frame2 extends BaseItem {
     }
     if (data.text) {
       this.text.deserialize(data.text);
+      this.updateTextContainer();
     }
     this.canChangeRatio = data.canChangeRatio ?? this.canChangeRatio;
     this.subject.publish(this);
@@ -284135,15 +284191,13 @@ class Frame2 extends BaseItem {
   }
   transformPath(saveProportions = false) {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
+    this.updateTextContainer();
     if (saveProportions) {
       const newMatrix = this.getSavedProportionsMatrix();
       this.path.transform(newMatrix);
-      this.textContainer.transform(newMatrix);
       this.transformation.applyScaleTo(newMatrix.scaleX, newMatrix.scaleY);
     } else {
       this.path.transform(this.transformation.toMatrix());
-      this.textContainer.transform(this.transformation.toMatrix());
     }
     this.path.setBackgroundOpacity(this.backgroundOpacity);
     this.path.setBorderWidth(this.borderWidth);
@@ -288931,8 +288985,9 @@ function getQuickAddButtons(selection, board) {
   let quickAddItems = undefined;
   function calculateQuickAddPosition(index2, selectedItem, connectorStartPoint) {
     const connectorStorage = new SessionStorage;
-    const currMbr = selectedItem.getPathMbr();
+    const currMbr = selectedItem instanceof BaseItem ? selectedItem.getWorldMbr() : selectedItem.getPathMbr();
     const selectedItemData = selectedItem.serialize();
+    const selectedMatrix = selectedItem instanceof BaseItem ? selectedItem.getWorldMatrix() : new Matrix(selectedItemData.transformation?.translateX || 0, selectedItemData.transformation?.translateY || 0);
     const width2 = currMbr.getWidth();
     const height3 = currMbr.getHeight();
     let offsetX = width2;
@@ -288972,8 +289027,8 @@ function getQuickAddButtons(selection, board) {
     const adjustment = baseAdjustments[index2];
     const newItemData = { ...itemData };
     if (newItemData.transformation) {
-      newItemData.transformation.translateX = adjustment.translateX + (selectedItemData.transformation?.translateX || 0);
-      newItemData.transformation.translateY = adjustment.translateY + (selectedItemData.transformation?.translateY || 0) + height3 / 2 - newHeight / 2;
+      newItemData.transformation.translateX = adjustment.translateX + selectedMatrix.translateX;
+      newItemData.transformation.translateY = adjustment.translateY + selectedMatrix.translateY + height3 / 2 - newHeight / 2;
     }
     const newMbr = new Mbr(newItemData.transformation?.translateX, newItemData.transformation?.translateY, (newItemData.transformation?.translateX || 0) + newWidth, (newItemData.transformation?.translateY || 0) + newHeight);
     let step = 1;
@@ -289064,7 +289119,7 @@ function getQuickAddButtons(selection, board) {
   }
   function getQuickButtonsPositions(customMbr) {
     const single = selection.items.getSingle();
-    const itemMbr = customMbr ? customMbr : single?.getMbr();
+    const itemMbr = customMbr ? customMbr : single instanceof BaseItem ? single.getWorldMbr() : single?.getMbr();
     if (!itemMbr || single?.itemType !== "Sticker" && single?.itemType !== "Shape" && single?.itemType !== "AINode" && single?.itemType !== "RichText") {
       return;
     }
@@ -296469,9 +296524,9 @@ class BoardSelection {
     }
     const selectedMbr = selected.reduce((acc, item) => {
       if (!acc) {
-        return item.getMbr();
+        return item instanceof BaseItem ? item.getWorldMbr() : item.getMbr();
       }
-      return acc.combine(item.getMbr());
+      return acc.combine(item instanceof BaseItem ? item.getWorldMbr() : item.getMbr());
     }, undefined);
     if (selectedMbr) {
       const selectedMap = Object.fromEntries(selected.map((item) => [item.getId(), { item, nested: false }]));
@@ -296503,7 +296558,7 @@ class BoardSelection {
           const childrenIds = val.item.getChildrenIds();
           if (childrenIds) {
             const currGroup = val.item;
-            const currMbr = currGroup.getMbr();
+            const currMbr = currGroup.getWorldMbr();
             const children = childrenIds.map((childId) => this.board.items.getById(childId)).filter((item) => !!item);
             const underGroup = this.board.items.getEnclosedOrCrossed(currMbr.left, currMbr.top, currMbr.right, currMbr.bottom).filter((item) => item.parent === "Board" || item.parent === currGroup.getId());
             const uniqueItems = new Set;
@@ -296984,7 +297039,7 @@ class BoardSelection {
     };
   }
   renderItemMbr(context, item, customScale) {
-    const mbr = item.getMbr();
+    const mbr = item instanceof BaseItem ? item.getWorldMbr() : item.getMbr();
     mbr.strokeWidth = !customScale ? 1 / context.matrix.scaleX : 1 / customScale;
     const selectionColor = item.transformation.isLocked ? conf.SELECTION_LOCKED_COLOR : conf.SELECTION_COLOR;
     mbr.borderColor = selectionColor;
@@ -297041,7 +297096,7 @@ class BoardSelection {
         path22.setBackgroundColor("none");
         path22.render(context);
       } else {
-        const itemRect = item.getMbr();
+        const itemRect = item instanceof BaseItem ? item.getWorldMbr() : item.getMbr();
         itemRect.borderColor = CONTEXT_NODE_HIGHLIGHT_COLOR;
         itemRect.strokeWidth = 2;
         itemRect.render(context);
@@ -297057,13 +297112,8 @@ class GravityEngine {
   tickTimer = null;
   syncTimer = null;
   lastSyncedPositions = new Map;
-  G = 80;
-  G_CENTER = 120;
-  DAMPING = 0.92;
-  REPULSION = 800;
   TICK_MS = 33;
   SYNC_MS = 300;
-  MAX_DISTANCE = 3000;
   SOFTENING_SQ = 50 * 50;
   MIN_MOVE_PX = 0.1;
   constructor(board) {
@@ -297132,8 +297182,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;
@@ -297141,7 +297191,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) {
@@ -297149,20 +297199,27 @@ class GravityEngine {
           const overlapY = Math.min(s1.bottom, s2.bottom) - Math.max(s1.top, s2.top);
           if (overlapX < overlapY) {
             const sign = s1.cx < s2.cx ? -1 : 1;
-            ax += sign * this.REPULSION * overlapX;
+            if (sign * vel.vx < 0)
+              vel.vx = -vel.vx * conf.GRAVITY_RESTITUTION;
+            ax += sign * conf.GRAVITY_REPULSION * overlapX;
           } else {
             const sign = s1.cy < s2.cy ? -1 : 1;
-            ay += sign * this.REPULSION * overlapY;
+            if (sign * vel.vy < 0)
+              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/example.html

@@ -44,7 +44,7 @@
         document.documentElement.setAttribute("data-theme", t);
       })();
     </script>
-  <link rel="stylesheet" crossorigin href="/chunk-ccbp3q1g.css"><script type="module" crossorigin src="/chunk-kh8veacg.js"></script></head>
+  <link rel="stylesheet" crossorigin href="/chunk-ccbp3q1g.css"><script type="module" crossorigin src="/chunk-e1r2sk6e.js"></script></head>
 
   <body
     style="

package/dist/index.html

@@ -44,7 +44,7 @@
         document.documentElement.setAttribute("data-theme", t);
       })();
     </script>
-  <link rel="stylesheet" crossorigin href="/chunk-ccbp3q1g.css"><script type="module" crossorigin src="/chunk-kh8veacg.js"></script></head>
+  <link rel="stylesheet" crossorigin href="/chunk-ccbp3q1g.css"><script type="module" crossorigin src="/chunk-e1r2sk6e.js"></script></head>
 
   <body
     style="

package/dist/index.js

@@ -248398,7 +248398,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();
 var BG_LIGHT = "rgb(248, 249, 251)";
@@ -265469,7 +265475,7 @@ class BaseItem extends Mbr {
     if (!this.isHoverHighlighted) {
       return;
     }
-    const mbr = this.getMbr();
+    const mbr = this.getWorldMbr();
     mbr.strokeWidth = 2 / context.matrix.scaleX;
     mbr.borderColor = BaseItem.HOVER_HIGHLIGHT_COLOR;
     mbr.render(context);
@@ -265528,6 +265534,8 @@ class RichText extends BaseItem {
   _onLimitReached = () => {};
   shrinkWidth = false;
   prevMbr = null;
+  customTransformationMatrix;
+  renderingScale;
   rtCounter = 0;
   constructor(board, container, id2 = "", transformation = new Transformation(id2, board.events), linkTo, placeholderText = conf.i18n?.t("board.textPlaceholder"), isInShape = false, autoSize = false, insideOf, initialTextStyles = conf.DEFAULT_TEXT_STYLES) {
     super(board, id2);
@@ -265650,10 +265658,10 @@ class RichText extends BaseItem {
     const shouldUpdateLayout = this.getTextWidth() > (maxWidth || 0);
     if (shouldUpdateLayout) {
       this.updateElement();
-      this.subject.publish(this);
     } else {
       this.transformCanvas();
       this.recoordinate(maxWidth);
+      this.subject.publish(this);
     }
   }
   handleFocus = () => {
@@ -265717,10 +265725,10 @@ class RichText extends BaseItem {
   }
   getMaxWidth() {
     if (this.autoSize) {
-      return this.editor.maxWidth || this.getTransformedContainer().getWidth();
+      return this.editor.maxWidth || this.container.getWidth();
     }
     if (this.isContainerSet) {
-      return this.getTransformedContainer().getWidth();
+      return this.container.getWidth();
     } else {
       return this.containerMaxWidth || this.editor.maxWidth;
     }
@@ -265821,13 +265829,17 @@ class RichText extends BaseItem {
     return this.shrinkWidth;
   }
   getTransformedContainer() {
-    if (this.insideOf === "Frame") {
-      const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
-      const scaleY = this.getMbr().getHeight() * 2 / 10;
-      const matrix = new Matrix(translateX, translateY, scaleX, scaleY);
-      return this.container.getTransformed(matrix);
+    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();
     }
-    return this.container.getTransformed(this.transformation.toMatrix());
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -266186,10 +266198,20 @@ class RichText extends BaseItem {
     const { ctx } = context;
     ctx.save();
     ctx.translate(this.left, this.top);
+    const cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
+    }
+    const { scaleX, scaleY } = matrix;
     const shouldScale = !this.isInShape && !this.autoSize;
     if (shouldScale) {
-      const { scaleX, scaleY } = this.transformation.getMatrixData();
-      ctx.scale(scaleX, scaleY);
+      ctx.scale(scaleX * extraScale, scaleY * extraScale);
+    } else if (extraScale !== 1) {
+      ctx.scale(extraScale, extraScale);
     }
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
@@ -266321,10 +266343,18 @@ 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.getMatrixData();
-    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
-    const transformedWidth = this.getTransformedContainer().getWidth();
-    const transformedHeight = this.getTransformedContainer().getHeight();
+    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 { scaleX, scaleY } = matrix;
+    const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
+    const transformedWidth = this.getMbr().getWidth();
+    const transformedHeight = this.getMbr().getHeight();
     const div = documentFactory.createElement("rich-text");
     div.id = this.getId();
     div.style.width = `${transformedWidth + 5}px`;
@@ -282909,7 +282939,9 @@ class Shape extends BaseItem {
       this.subject.publish(this);
     });
     this.text.insideOf = this.itemType;
+    this.transformPath();
     this.updateMbr();
+    this.subject.publish(this);
   }
   saveShapeData() {
     tempStorage.setShapeData({
@@ -283458,6 +283490,8 @@ class Sticker extends BaseItem {
       this.subject.publish(this);
     });
     this.text.updateElement();
+    this.transformPath();
+    this.subject.publish(this);
   }
   emit(operation) {
     if (this.board.events) {
@@ -283844,11 +283878,11 @@ function convertBlobToDataUrl(blob) {
     };
   });
 }
-var FRAME_BORDER_COLOR = "rgba(10, 15, 41, 0.08)";
+var FRAME_BORDER_COLOR = semanticColor("contrastGray");
 var FRAME_HIGHLIGHTER_BORDER_COLOR = "#93AFF6";
 var FRAME_CHILDREN_HIGHLIGHTER_COLOR = "rgb(10, 15, 41, .08)";
 var FRAME_CHILDREN_HIGHLIGHTER_BORDER_COLOR = "#4778F5";
-var FRAME_TITLE_COLOR = "rgb(107, 110, 120)";
+var FRAME_TITLE_COLOR = semanticColor("contrastNeutral");
 var FRAME_TYPES = [
   { id: "Custom", label: "Custom" },
   { id: "Frame16x9", label: "16:9" },
@@ -283893,7 +283927,7 @@ class DefaultFrameData {
   canChangeRatio;
   linkTo;
   itemType = "Frame";
-  constructor(shapeType = "Custom", backgroundColor = fixedColor(FRAME_FILL_COLOR), backgroundOpacity = 1, borderColor = fixedColor(FRAME_BORDER_COLOR), borderOpacity = 0.08, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
+  constructor(shapeType = "Custom", backgroundColor = semanticColor("contrastNeutral"), backgroundOpacity = 1, borderColor = FRAME_BORDER_COLOR, borderOpacity = 1, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
     this.shapeType = shapeType;
     this.backgroundColor = backgroundColor;
     this.backgroundOpacity = backgroundOpacity;
@@ -283909,6 +283943,8 @@ class DefaultFrameData {
   }
 }
 var defaultFrameData = new DefaultFrameData;
+var HEADING_TOP_OFFSET = -33;
+var HEADING_BOTTOM_OFFSET = -5;
 
 class Frame2 extends BaseItem {
   getItemById;
@@ -283924,7 +283960,7 @@ class Frame2 extends BaseItem {
   parent = "Board";
   transformation;
   subject = new Subject;
-  textContainer;
+  textContainer = new Mbr;
   path;
   children = [];
   mbr = new Mbr;
@@ -283945,12 +283981,23 @@ class Frame2 extends BaseItem {
     this.borderOpacity = borderOpacity;
     this.borderStyle = borderStyle;
     this.borderWidth = borderWidth;
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
     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, fontColor: FRAME_TITLE_COLOR });
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
+    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.text.customTransformationMatrix = () => {
+      const matrix = this.transformation.toMatrix();
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
+    };
+    this.text.renderingScale = (cameraScale) => {
+      return Math.max(1, Math.min(6, 1.2 / cameraScale));
+    };
     this.transformation.subject.subscribe(() => {
       this.transformPath();
       this.updateMbr();
@@ -283975,9 +284022,17 @@ class Frame2 extends BaseItem {
   }
   initPath() {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
-    this.text.setContainer(this.textContainer.copy());
-    this.text.updateElement();
+    this.updateTextContainer();
+  }
+  updateTextContainer() {
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
+    if (this.text) {
+      this.text.setContainer(this.textContainer.copy());
+      this.text.updateElement();
+    }
   }
   getPaths() {
     return this.path;
@@ -284120,6 +284175,7 @@ class Frame2 extends BaseItem {
     }
     if (data.text) {
       this.text.deserialize(data.text);
+      this.updateTextContainer();
     }
     this.canChangeRatio = data.canChangeRatio ?? this.canChangeRatio;
     this.subject.publish(this);
@@ -284135,15 +284191,13 @@ class Frame2 extends BaseItem {
   }
   transformPath(saveProportions = false) {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
+    this.updateTextContainer();
     if (saveProportions) {
       const newMatrix = this.getSavedProportionsMatrix();
       this.path.transform(newMatrix);
-      this.textContainer.transform(newMatrix);
       this.transformation.applyScaleTo(newMatrix.scaleX, newMatrix.scaleY);
     } else {
       this.path.transform(this.transformation.toMatrix());
-      this.textContainer.transform(this.transformation.toMatrix());
     }
     this.path.setBackgroundOpacity(this.backgroundOpacity);
     this.path.setBorderWidth(this.borderWidth);
@@ -288931,8 +288985,9 @@ function getQuickAddButtons(selection, board) {
   let quickAddItems = undefined;
   function calculateQuickAddPosition(index2, selectedItem, connectorStartPoint) {
     const connectorStorage = new SessionStorage;
-    const currMbr = selectedItem.getPathMbr();
+    const currMbr = selectedItem instanceof BaseItem ? selectedItem.getWorldMbr() : selectedItem.getPathMbr();
     const selectedItemData = selectedItem.serialize();
+    const selectedMatrix = selectedItem instanceof BaseItem ? selectedItem.getWorldMatrix() : new Matrix(selectedItemData.transformation?.translateX || 0, selectedItemData.transformation?.translateY || 0);
     const width2 = currMbr.getWidth();
     const height3 = currMbr.getHeight();
     let offsetX = width2;
@@ -288972,8 +289027,8 @@ function getQuickAddButtons(selection, board) {
     const adjustment = baseAdjustments[index2];
     const newItemData = { ...itemData };
     if (newItemData.transformation) {
-      newItemData.transformation.translateX = adjustment.translateX + (selectedItemData.transformation?.translateX || 0);
-      newItemData.transformation.translateY = adjustment.translateY + (selectedItemData.transformation?.translateY || 0) + height3 / 2 - newHeight / 2;
+      newItemData.transformation.translateX = adjustment.translateX + selectedMatrix.translateX;
+      newItemData.transformation.translateY = adjustment.translateY + selectedMatrix.translateY + height3 / 2 - newHeight / 2;
     }
     const newMbr = new Mbr(newItemData.transformation?.translateX, newItemData.transformation?.translateY, (newItemData.transformation?.translateX || 0) + newWidth, (newItemData.transformation?.translateY || 0) + newHeight);
     let step = 1;
@@ -289064,7 +289119,7 @@ function getQuickAddButtons(selection, board) {
   }
   function getQuickButtonsPositions(customMbr) {
     const single = selection.items.getSingle();
-    const itemMbr = customMbr ? customMbr : single?.getMbr();
+    const itemMbr = customMbr ? customMbr : single instanceof BaseItem ? single.getWorldMbr() : single?.getMbr();
     if (!itemMbr || single?.itemType !== "Sticker" && single?.itemType !== "Shape" && single?.itemType !== "AINode" && single?.itemType !== "RichText") {
       return;
     }
@@ -296469,9 +296524,9 @@ class BoardSelection {
     }
     const selectedMbr = selected.reduce((acc, item) => {
       if (!acc) {
-        return item.getMbr();
+        return item instanceof BaseItem ? item.getWorldMbr() : item.getMbr();
       }
-      return acc.combine(item.getMbr());
+      return acc.combine(item instanceof BaseItem ? item.getWorldMbr() : item.getMbr());
     }, undefined);
     if (selectedMbr) {
       const selectedMap = Object.fromEntries(selected.map((item) => [item.getId(), { item, nested: false }]));
@@ -296503,7 +296558,7 @@ class BoardSelection {
           const childrenIds = val.item.getChildrenIds();
           if (childrenIds) {
             const currGroup = val.item;
-            const currMbr = currGroup.getMbr();
+            const currMbr = currGroup.getWorldMbr();
             const children = childrenIds.map((childId) => this.board.items.getById(childId)).filter((item) => !!item);
             const underGroup = this.board.items.getEnclosedOrCrossed(currMbr.left, currMbr.top, currMbr.right, currMbr.bottom).filter((item) => item.parent === "Board" || item.parent === currGroup.getId());
             const uniqueItems = new Set;
@@ -296984,7 +297039,7 @@ class BoardSelection {
     };
   }
   renderItemMbr(context, item, customScale) {
-    const mbr = item.getMbr();
+    const mbr = item instanceof BaseItem ? item.getWorldMbr() : item.getMbr();
     mbr.strokeWidth = !customScale ? 1 / context.matrix.scaleX : 1 / customScale;
     const selectionColor = item.transformation.isLocked ? conf.SELECTION_LOCKED_COLOR : conf.SELECTION_COLOR;
     mbr.borderColor = selectionColor;
@@ -297041,7 +297096,7 @@ class BoardSelection {
         path22.setBackgroundColor("none");
         path22.render(context);
       } else {
-        const itemRect = item.getMbr();
+        const itemRect = item instanceof BaseItem ? item.getWorldMbr() : item.getMbr();
         itemRect.borderColor = CONTEXT_NODE_HIGHLIGHT_COLOR;
         itemRect.strokeWidth = 2;
         itemRect.render(context);
@@ -297057,13 +297112,8 @@ class GravityEngine {
   tickTimer = null;
   syncTimer = null;
   lastSyncedPositions = new Map;
-  G = 80;
-  G_CENTER = 120;
-  DAMPING = 0.92;
-  REPULSION = 800;
   TICK_MS = 33;
   SYNC_MS = 300;
-  MAX_DISTANCE = 3000;
   SOFTENING_SQ = 50 * 50;
   MIN_MOVE_PX = 0.1;
   constructor(board) {
@@ -297132,8 +297182,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;
@@ -297141,7 +297191,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) {
@@ -297149,20 +297199,27 @@ class GravityEngine {
           const overlapY = Math.min(s1.bottom, s2.bottom) - Math.max(s1.top, s2.top);
           if (overlapX < overlapY) {
             const sign = s1.cx < s2.cx ? -1 : 1;
-            ax += sign * this.REPULSION * overlapX;
+            if (sign * vel.vx < 0)
+              vel.vx = -vel.vx * conf.GRAVITY_RESTITUTION;
+            ax += sign * conf.GRAVITY_REPULSION * overlapX;
           } else {
             const sign = s1.cy < s2.cy ? -1 : 1;
-            ay += sign * this.REPULSION * overlapY;
+            if (sign * vel.vy < 0)
+              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/spa.css

@@ -2883,12 +2883,6 @@ a.link_jFMnzg {
   background-color: #f7f7f8;
 }
 
-.quaternary_Lhh5GA {
-  color: #fff;
-  background-color: #924fe8;
-  border: 1px solid #924fe8;
-}
-
 .quaternary_Lhh5GA:hover {
   background-color: #b799f5;
   border: 1px solid #924fe8;

package/dist/spa.js

@@ -248398,7 +248398,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();
 var BG_LIGHT = "rgb(248, 249, 251)";
@@ -265469,7 +265475,7 @@ class BaseItem extends Mbr {
     if (!this.isHoverHighlighted) {
       return;
     }
-    const mbr = this.getMbr();
+    const mbr = this.getWorldMbr();
     mbr.strokeWidth = 2 / context.matrix.scaleX;
     mbr.borderColor = BaseItem.HOVER_HIGHLIGHT_COLOR;
     mbr.render(context);
@@ -265528,6 +265534,8 @@ class RichText extends BaseItem {
   _onLimitReached = () => {};
   shrinkWidth = false;
   prevMbr = null;
+  customTransformationMatrix;
+  renderingScale;
   rtCounter = 0;
   constructor(board, container, id2 = "", transformation = new Transformation(id2, board.events), linkTo, placeholderText = conf.i18n?.t("board.textPlaceholder"), isInShape = false, autoSize = false, insideOf, initialTextStyles = conf.DEFAULT_TEXT_STYLES) {
     super(board, id2);
@@ -265650,10 +265658,10 @@ class RichText extends BaseItem {
     const shouldUpdateLayout = this.getTextWidth() > (maxWidth || 0);
     if (shouldUpdateLayout) {
       this.updateElement();
-      this.subject.publish(this);
     } else {
       this.transformCanvas();
       this.recoordinate(maxWidth);
+      this.subject.publish(this);
     }
   }
   handleFocus = () => {
@@ -265717,10 +265725,10 @@ class RichText extends BaseItem {
   }
   getMaxWidth() {
     if (this.autoSize) {
-      return this.editor.maxWidth || this.getTransformedContainer().getWidth();
+      return this.editor.maxWidth || this.container.getWidth();
     }
     if (this.isContainerSet) {
-      return this.getTransformedContainer().getWidth();
+      return this.container.getWidth();
     } else {
       return this.containerMaxWidth || this.editor.maxWidth;
     }
@@ -265821,13 +265829,17 @@ class RichText extends BaseItem {
     return this.shrinkWidth;
   }
   getTransformedContainer() {
-    if (this.insideOf === "Frame") {
-      const { translateX, translateY, scaleX } = this.transformation.getMatrixData();
-      const scaleY = this.getMbr().getHeight() * 2 / 10;
-      const matrix = new Matrix(translateX, translateY, scaleX, scaleY);
-      return this.container.getTransformed(matrix);
+    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();
     }
-    return this.container.getTransformed(this.transformation.toMatrix());
+    const { translateX, translateY, scaleX, scaleY } = matrix;
+    const scaledMatrix = new Matrix(translateX, translateY, scaleX, scaleY);
+    return this.container.getTransformed(scaledMatrix);
   }
   emitWithoutApplying = (op) => {
     if (this.board.events) {
@@ -266186,10 +266198,20 @@ class RichText extends BaseItem {
     const { ctx } = context;
     ctx.save();
     ctx.translate(this.left, this.top);
+    const cameraScale = context.getCameraScale();
+    const extraScale = this.renderingScale ? this.renderingScale(cameraScale) : 1;
+    let matrix;
+    if (this.customTransformationMatrix) {
+      matrix = this.customTransformationMatrix();
+    } else {
+      matrix = this.transformation.toMatrix();
+    }
+    const { scaleX, scaleY } = matrix;
     const shouldScale = !this.isInShape && !this.autoSize;
     if (shouldScale) {
-      const { scaleX, scaleY } = this.transformation.getMatrixData();
-      ctx.scale(scaleX, scaleY);
+      ctx.scale(scaleX * extraScale, scaleY * extraScale);
+    } else if (extraScale !== 1) {
+      ctx.scale(extraScale, extraScale);
     }
     const shouldClip = this.insideOf === "Shape" || this.insideOf === "Sticker";
     if (shouldClip) {
@@ -266321,10 +266343,18 @@ 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.getMatrixData();
-    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
-    const transformedWidth = this.getTransformedContainer().getWidth();
-    const transformedHeight = this.getTransformedContainer().getHeight();
+    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 { scaleX, scaleY } = matrix;
+    const transform = `translate(${this.left}px, ${this.top}px) scale(${scaleX * extraScale}, ${scaleY * extraScale})`;
+    const transformedWidth = this.getMbr().getWidth();
+    const transformedHeight = this.getMbr().getHeight();
     const div = documentFactory.createElement("rich-text");
     div.id = this.getId();
     div.style.width = `${transformedWidth + 5}px`;
@@ -282909,7 +282939,9 @@ class Shape extends BaseItem {
       this.subject.publish(this);
     });
     this.text.insideOf = this.itemType;
+    this.transformPath();
     this.updateMbr();
+    this.subject.publish(this);
   }
   saveShapeData() {
     tempStorage.setShapeData({
@@ -283458,6 +283490,8 @@ class Sticker extends BaseItem {
       this.subject.publish(this);
     });
     this.text.updateElement();
+    this.transformPath();
+    this.subject.publish(this);
   }
   emit(operation) {
     if (this.board.events) {
@@ -283844,11 +283878,11 @@ function convertBlobToDataUrl(blob) {
     };
   });
 }
-var FRAME_BORDER_COLOR = "rgba(10, 15, 41, 0.08)";
+var FRAME_BORDER_COLOR = semanticColor("contrastGray");
 var FRAME_HIGHLIGHTER_BORDER_COLOR = "#93AFF6";
 var FRAME_CHILDREN_HIGHLIGHTER_COLOR = "rgb(10, 15, 41, .08)";
 var FRAME_CHILDREN_HIGHLIGHTER_BORDER_COLOR = "#4778F5";
-var FRAME_TITLE_COLOR = "rgb(107, 110, 120)";
+var FRAME_TITLE_COLOR = semanticColor("contrastNeutral");
 var FRAME_TYPES = [
   { id: "Custom", label: "Custom" },
   { id: "Frame16x9", label: "16:9" },
@@ -283893,7 +283927,7 @@ class DefaultFrameData {
   canChangeRatio;
   linkTo;
   itemType = "Frame";
-  constructor(shapeType = "Custom", backgroundColor = fixedColor(FRAME_FILL_COLOR), backgroundOpacity = 1, borderColor = fixedColor(FRAME_BORDER_COLOR), borderOpacity = 0.08, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
+  constructor(shapeType = "Custom", backgroundColor = semanticColor("contrastNeutral"), backgroundOpacity = 1, borderColor = FRAME_BORDER_COLOR, borderOpacity = 1, borderStyle = "solid", borderWidth = 0.2, transformation = new DefaultTransformationData, children = [], text5 = new DefaultRichTextData([], "top", 600), canChangeRatio = true, linkTo) {
     this.shapeType = shapeType;
     this.backgroundColor = backgroundColor;
     this.backgroundOpacity = backgroundOpacity;
@@ -283909,6 +283943,8 @@ class DefaultFrameData {
   }
 }
 var defaultFrameData = new DefaultFrameData;
+var HEADING_TOP_OFFSET = -33;
+var HEADING_BOTTOM_OFFSET = -5;
 
 class Frame2 extends BaseItem {
   getItemById;
@@ -283924,7 +283960,7 @@ class Frame2 extends BaseItem {
   parent = "Board";
   transformation;
   subject = new Subject;
-  textContainer;
+  textContainer = new Mbr;
   path;
   children = [];
   mbr = new Mbr;
@@ -283945,12 +283981,23 @@ class Frame2 extends BaseItem {
     this.borderOpacity = borderOpacity;
     this.borderStyle = borderStyle;
     this.borderWidth = borderWidth;
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
     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, fontColor: FRAME_TITLE_COLOR });
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
+    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.text.customTransformationMatrix = () => {
+      const matrix = this.transformation.toMatrix();
+      return new Matrix(matrix.translateX, matrix.translateY, 1, 1);
+    };
+    this.text.renderingScale = (cameraScale) => {
+      return Math.max(1, Math.min(6, 1.2 / cameraScale));
+    };
     this.transformation.subject.subscribe(() => {
       this.transformPath();
       this.updateMbr();
@@ -283975,9 +284022,17 @@ class Frame2 extends BaseItem {
   }
   initPath() {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
-    this.text.setContainer(this.textContainer.copy());
-    this.text.updateElement();
+    this.updateTextContainer();
+  }
+  updateTextContainer() {
+    const textBounds = Frames[this.shapeType].textBounds.copy();
+    textBounds.top = HEADING_TOP_OFFSET;
+    textBounds.bottom = HEADING_BOTTOM_OFFSET;
+    this.textContainer = textBounds;
+    if (this.text) {
+      this.text.setContainer(this.textContainer.copy());
+      this.text.updateElement();
+    }
   }
   getPaths() {
     return this.path;
@@ -284120,6 +284175,7 @@ class Frame2 extends BaseItem {
     }
     if (data.text) {
       this.text.deserialize(data.text);
+      this.updateTextContainer();
     }
     this.canChangeRatio = data.canChangeRatio ?? this.canChangeRatio;
     this.subject.publish(this);
@@ -284135,15 +284191,13 @@ class Frame2 extends BaseItem {
   }
   transformPath(saveProportions = false) {
     this.path = Frames[this.shapeType].path.copy();
-    this.textContainer = Frames[this.shapeType].textBounds.copy();
+    this.updateTextContainer();
     if (saveProportions) {
       const newMatrix = this.getSavedProportionsMatrix();
       this.path.transform(newMatrix);
-      this.textContainer.transform(newMatrix);
       this.transformation.applyScaleTo(newMatrix.scaleX, newMatrix.scaleY);
     } else {
       this.path.transform(this.transformation.toMatrix());
-      this.textContainer.transform(this.transformation.toMatrix());
     }
     this.path.setBackgroundOpacity(this.backgroundOpacity);
     this.path.setBorderWidth(this.borderWidth);
@@ -288931,8 +288985,9 @@ function getQuickAddButtons(selection, board) {
   let quickAddItems = undefined;
   function calculateQuickAddPosition(index2, selectedItem, connectorStartPoint) {
     const connectorStorage = new SessionStorage;
-    const currMbr = selectedItem.getPathMbr();
+    const currMbr = selectedItem instanceof BaseItem ? selectedItem.getWorldMbr() : selectedItem.getPathMbr();
     const selectedItemData = selectedItem.serialize();
+    const selectedMatrix = selectedItem instanceof BaseItem ? selectedItem.getWorldMatrix() : new Matrix(selectedItemData.transformation?.translateX || 0, selectedItemData.transformation?.translateY || 0);
     const width2 = currMbr.getWidth();
     const height3 = currMbr.getHeight();
     let offsetX = width2;
@@ -288972,8 +289027,8 @@ function getQuickAddButtons(selection, board) {
     const adjustment = baseAdjustments[index2];
     const newItemData = { ...itemData };
     if (newItemData.transformation) {
-      newItemData.transformation.translateX = adjustment.translateX + (selectedItemData.transformation?.translateX || 0);
-      newItemData.transformation.translateY = adjustment.translateY + (selectedItemData.transformation?.translateY || 0) + height3 / 2 - newHeight / 2;
+      newItemData.transformation.translateX = adjustment.translateX + selectedMatrix.translateX;
+      newItemData.transformation.translateY = adjustment.translateY + selectedMatrix.translateY + height3 / 2 - newHeight / 2;
     }
     const newMbr = new Mbr(newItemData.transformation?.translateX, newItemData.transformation?.translateY, (newItemData.transformation?.translateX || 0) + newWidth, (newItemData.transformation?.translateY || 0) + newHeight);
     let step = 1;
@@ -289064,7 +289119,7 @@ function getQuickAddButtons(selection, board) {
   }
   function getQuickButtonsPositions(customMbr) {
     const single = selection.items.getSingle();
-    const itemMbr = customMbr ? customMbr : single?.getMbr();
+    const itemMbr = customMbr ? customMbr : single instanceof BaseItem ? single.getWorldMbr() : single?.getMbr();
     if (!itemMbr || single?.itemType !== "Sticker" && single?.itemType !== "Shape" && single?.itemType !== "AINode" && single?.itemType !== "RichText") {
       return;
     }
@@ -296469,9 +296524,9 @@ class BoardSelection {
     }
     const selectedMbr = selected.reduce((acc, item) => {
       if (!acc) {
-        return item.getMbr();
+        return item instanceof BaseItem ? item.getWorldMbr() : item.getMbr();
       }
-      return acc.combine(item.getMbr());
+      return acc.combine(item instanceof BaseItem ? item.getWorldMbr() : item.getMbr());
     }, undefined);
     if (selectedMbr) {
       const selectedMap = Object.fromEntries(selected.map((item) => [item.getId(), { item, nested: false }]));
@@ -296503,7 +296558,7 @@ class BoardSelection {
           const childrenIds = val.item.getChildrenIds();
           if (childrenIds) {
             const currGroup = val.item;
-            const currMbr = currGroup.getMbr();
+            const currMbr = currGroup.getWorldMbr();
             const children = childrenIds.map((childId) => this.board.items.getById(childId)).filter((item) => !!item);
             const underGroup = this.board.items.getEnclosedOrCrossed(currMbr.left, currMbr.top, currMbr.right, currMbr.bottom).filter((item) => item.parent === "Board" || item.parent === currGroup.getId());
             const uniqueItems = new Set;
@@ -296984,7 +297039,7 @@ class BoardSelection {
     };
   }
   renderItemMbr(context, item, customScale) {
-    const mbr = item.getMbr();
+    const mbr = item instanceof BaseItem ? item.getWorldMbr() : item.getMbr();
     mbr.strokeWidth = !customScale ? 1 / context.matrix.scaleX : 1 / customScale;
     const selectionColor = item.transformation.isLocked ? conf.SELECTION_LOCKED_COLOR : conf.SELECTION_COLOR;
     mbr.borderColor = selectionColor;
@@ -297041,7 +297096,7 @@ class BoardSelection {
         path22.setBackgroundColor("none");
         path22.render(context);
       } else {
-        const itemRect = item.getMbr();
+        const itemRect = item instanceof BaseItem ? item.getWorldMbr() : item.getMbr();
         itemRect.borderColor = CONTEXT_NODE_HIGHLIGHT_COLOR;
         itemRect.strokeWidth = 2;
         itemRect.render(context);
@@ -297057,13 +297112,8 @@ class GravityEngine {
   tickTimer = null;
   syncTimer = null;
   lastSyncedPositions = new Map;
-  G = 80;
-  G_CENTER = 120;
-  DAMPING = 0.92;
-  REPULSION = 800;
   TICK_MS = 33;
   SYNC_MS = 300;
-  MAX_DISTANCE = 3000;
   SOFTENING_SQ = 50 * 50;
   MIN_MOVE_PX = 0.1;
   constructor(board) {
@@ -297132,8 +297182,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;
@@ -297141,7 +297191,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) {
@@ -297149,20 +297199,27 @@ class GravityEngine {
           const overlapY = Math.min(s1.bottom, s2.bottom) - Math.max(s1.top, s2.top);
           if (overlapX < overlapY) {
             const sign = s1.cx < s2.cx ? -1 : 1;
-            ax += sign * this.REPULSION * overlapX;
+            if (sign * vel.vx < 0)
+              vel.vx = -vel.vx * conf.GRAVITY_RESTITUTION;
+            ax += sign * conf.GRAVITY_REPULSION * overlapX;
           } else {
             const sign = s1.cy < s2.cy ? -1 : 1;
-            ay += sign * this.REPULSION * overlapY;
+            if (sign * vel.vy < 0)
+              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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "microboard-ui-temp",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "type": "module",
@@ -79,7 +79,7 @@
     "i18next-browser-languagedetector": "^8.2.0",
     "js-cookie": "^3.0.5",
     "jwt-decode": "^4.0.0",
-    "microboard-temp": "0.12.7",
+    "microboard-temp": "0.13.12",
     "nanoid": "^5.1.5",
     "prop-types": "^15.8.1",
     "react-hot-toast": "2.4.1",