microboard-temp 0.13.31 → 0.13.33

package/dist/esm/browser.js

@@ -4495,11 +4495,12 @@ var conf = {
   DEFAULT_GAME_ITEM_DIMENSIONS: { width: 200, height: 200 },
   MAX_CARD_SIZE: 500,
   CONNECTOR_ITEM_OFFSET: 20,
-  FG_SPRING_K: 3,
+  FG_SPRING_K: 0.2,
   FG_TARGET_GAP: 20,
-  FG_REPULSION: 400000,
-  FG_DAMPING: 0.9,
-  FG_SLEEP_THRESHOLD: 10,
+  FG_REPULSION: 100,
+  FG_MIN_DIST_SQ: 100,
+  FG_DAMPING: 0.6,
+  FG_SLEEP_THRESHOLD: 0.5,
   GRAVITY_G: 80,
   GRAVITY_G_CENTER: 120,
   GRAVITY_DAMPING: 0.96,
@@ -7275,11 +7276,11 @@ class SessionStorage {
   getFontHighlight(itemType) {
     return this.get(`fontHighlightColor_${itemType}`);
   }
-  setHorizontalAlignment(itemType, horizontalAlignment) {
-    this.set(`fontHorizontalAlignment_${itemType}`, horizontalAlignment);
+  setHorisontalAlignment(itemType, horisontalAlignment) {
+    this.set(`fontHorisontalAlignment_${itemType}`, horisontalAlignment);
   }
-  getHorizontalAlignment(itemType) {
-    return this.get(`fontHorizontalAlignment_${itemType}`);
+  getHorisontalAlignment(itemType) {
+    return this.get(`fontHorisontalAlignment_${itemType}`);
   }
   setVerticalAlignment(itemType, verticalAlignment) {
     this.set(`fontVerticalAlignment_${itemType}`, verticalAlignment);
@@ -17218,7 +17219,7 @@ class EditorContainer {
           break;
         case "setSelectionFontHighlight":
         case "setSelectionFontStyle":
-        case "setSelectionHorizontalAlignment":
+        case "setSelectionHorisontalAlignment":
           this.applySelectionOp(op);
           break;
         case "setFontStyle":
@@ -20905,14 +20906,14 @@ class SpatialIndex {
     if ("index" in item && item.index) {
       item.removeChildItems(item.index.list());
     }
+    this.itemsArray.splice(this.itemsArray.indexOf(item), 1);
+    this.itemsIndex.remove(item);
     if (item.parent !== "Board") {
       const parentFrame = this.items.getById(item.parent);
       parentFrame?.removeChildItems(item);
       this.subject.publish(this.items);
       return;
     }
-    this.itemsArray.splice(this.itemsArray.indexOf(item), 1);
-    this.itemsIndex.remove(item);
     if (this.itemsArray.length === 0) {
       this.Mbr = new Mbr;
     } else {
@@ -20933,7 +20934,8 @@ class SpatialIndex {
           translateX: worldMatrix.translateX,
           translateY: worldMatrix.translateY,
           scaleX: worldMatrix.scaleX,
-          scaleY: worldMatrix.scaleY
+          scaleY: worldMatrix.scaleY,
+          isLocked: false
         };
       }
       return serialized;
@@ -21280,10 +21282,6 @@ class Items {
     const unmodifiedSize = size;
     size = 16;
     const tolerated = this.index.getEnclosedOrCrossed(x - size, y - size, x + size, y + size);
-    const groups = tolerated.filter((item) => item.itemType === "Group");
-    if (groups.length > 0) {
-      return groups;
-    }
     let enclosed = tolerated.some((item) => item instanceof Connector2) ? tolerated : this.index.getEnclosedOrCrossed(x, y, x, y);
     const underPointer = this.getUnderPoint(new Point(x, y), size);
     if (enclosed.length === 0) {
@@ -21297,7 +21295,7 @@ class Items {
       if (item.itemType === "Drawing" && !item.isPointNearLine(this.pointer.point)) {
         return acc;
       }
-      const isItemTransparent = item instanceof Shape && item?.getBackgroundColor() === "none";
+      const isItemTransparent = item instanceof Shape && item.getBackgroundColor() === "none";
       const itemZIndex = this.getZIndex(item);
       const accZIndex = this.getZIndex(acc.nearest);
       if (itemZIndex > accZIndex && (!isItemTransparent || area === acc.area) || area < acc.area) {
@@ -21393,7 +21391,7 @@ class Items {
     });
     const childrenMap = new Map;
     const GroupsHTML = groups.map((group) => {
-      group.getChildrenIds().forEach((childId) => childrenMap.set(childId, group.getId()));
+      group.getChildrenIds()?.forEach((childId) => childrenMap.set(childId, group.getId()));
       const html = group.renderHTML(documentFactory);
       translateElementBy(html, -lowestCoordinates.left, -lowestCoordinates.top);
       return html;
@@ -21409,7 +21407,10 @@ class Items {
         item.setAttribute("data-end-point-x", (endX - lowestCoordinates.left).toString());
         item.setAttribute("data-end-point-y", (endY - lowestCoordinates.top).toString());
       }
-      return translateElementBy(item, -lowestCoordinates.left, -lowestCoordinates.top);
+      if (!childrenMap.get(item.id)) {
+        return translateElementBy(item, -lowestCoordinates.left, -lowestCoordinates.top);
+      }
+      return item;
     });
     for (const item of restHTML) {
       const parentFrameId = childrenMap.get(item.id);
@@ -21823,6 +21824,20 @@ class BaseItem extends Mbr {
       parentMatrix.apply(c);
     return new Mbr(Math.min(corners[0].x, corners[1].x, corners[2].x, corners[3].x), Math.min(corners[0].y, corners[1].y, corners[2].y, corners[3].y), Math.max(corners[0].x, corners[1].x, corners[2].x, corners[3].x), Math.max(corners[0].y, corners[1].y, corners[2].y, corners[3].y));
   }
+  hasAncestor(itemId) {
+    let parentId = this.parent;
+    while (parentId && parentId !== "Board") {
+      if (parentId === itemId) {
+        return true;
+      }
+      const parent = this.board.items.getById(parentId);
+      if (!parent || parent.parent === parentId) {
+        break;
+      }
+      parentId = parent.parent;
+    }
+    return false;
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
@@ -21830,7 +21845,7 @@ class BaseItem extends Mbr {
     const containerNestingMatrix = this.getNestingMatrix();
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
-      if (this.parent !== childId && this.getId() !== childId) {
+      if (this.parent !== childId && this.getId() !== childId && !this.hasAncestor(childId)) {
         if (!this.index?.getById(childId) && foundItem) {
           const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerNestingMatrix);
           this.board.items.index.remove(foundItem);
@@ -22053,8 +22068,8 @@ class BaseItem extends Mbr {
   }
   renderHTML(documentFactory) {
     const div = documentFactory.createElement("base-item");
-    const { translateX, translateY } = this.transformation.getMatrixData();
-    const transform = `translate(${translateX}px, ${translateY}px) scale(1, 1)`;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
+    const transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.backgroundColor = "#b2b0c3";
     div.id = this.getId();
     div.style.width = `${this.getWidth()}px`;
@@ -22325,12 +22340,14 @@ class RichText extends BaseItem {
       top = container.top;
     }
     const point3 = new Point(left, top);
-    this.getParentWorldMatrix().apply(point3);
+    if (!this.isInShape || this.autoSize) {
+      this.getParentWorldMatrix().apply(point3);
+    }
     return {
       point: point3,
       width,
       height,
-      maxWidth: maxWidth ? maxWidth + 1 : undefined,
+      maxWidth: maxWidth ? maxWidth : undefined,
       maxHeight,
       textScale: this.isInShape && !this.autoSize ? 1 : this.getScale()
     };
@@ -40018,6 +40035,7 @@ class Shape extends BaseItem {
       this.text.deserialize(data.text);
     }
     this.transformPath();
+    this.text.updateElement();
     this.subject.publish(this);
     return this;
   }
@@ -40235,7 +40253,7 @@ class Shape extends BaseItem {
     if (Shapes[this.shapeType].useMbrUnderPointer) {
       return this.mbr.isUnderPoint(point5);
     }
-    if (this.text.isEmpty() && (this.backgroundOpacity === 0 || this.backgroundColor === "none" || this.backgroundColor === "")) {
+    if (this.text.isEmpty() && (this.backgroundOpacity === 0 || this.backgroundColor === "none" || this.backgroundColor === "transparent" || this.backgroundColor === "")) {
       return this.path.isPointOverEdges(point5, tolerance);
     } else {
       return this.textContainer.isUnderPoint(point5) || this.path.isUnderPoint(point5);
@@ -40287,8 +40305,8 @@ class Shape extends BaseItem {
     const pathElement = Shapes[this.shapeType].path.copy().renderHTML(documentFactory);
     const paths = Array.isArray(pathElement) ? pathElement : [pathElement];
     paths.forEach((element4) => {
-      element4.setAttribute("fill", this.backgroundColor);
-      element4.setAttribute("stroke", this.borderColor);
+      element4.setAttribute("fill", resolveColor(this.backgroundColor, conf.theme, "background"));
+      element4.setAttribute("stroke", resolveColor(this.borderColor, conf.theme, "foreground"));
       element4.setAttribute("stroke-dasharray", LinePatterns[this.borderStyle].join(", "));
       element4.setAttribute("stroke-width", this.borderWidth.toString());
       element4.setAttribute("transform-origin", "0 0");
@@ -40303,8 +40321,8 @@ class Shape extends BaseItem {
     div.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
     div.style.position = "absolute";
     div.setAttribute("data-shape-type", this.shapeType);
-    div.setAttribute("fill", this.backgroundColor);
-    div.setAttribute("stroke", this.borderColor);
+    div.setAttribute("fill", resolveColor(this.backgroundColor, conf.theme, "background"));
+    div.setAttribute("stroke", resolveColor(this.borderColor, conf.theme, "foreground"));
     div.setAttribute("data-border-style", this.borderStyle);
     div.setAttribute("stroke-dasharray", LinePatterns[this.borderStyle].join(", "));
     div.setAttribute("stroke-width", this.borderWidth.toString());
@@ -40348,9 +40366,6 @@ class Shape extends BaseItem {
     this.text.updateElement();
   }
   transformPath() {
-    if (conf.isNode()) {
-      return;
-    }
     this.path = Shapes[this.shapeType].createPath(this.mbr);
     this.textContainer = Shapes[this.shapeType].textBounds.copy();
     this.text.setContainer(this.textContainer.copy());
@@ -43515,6 +43530,7 @@ class Group extends BaseItem {
   constructor(board, events, children = [], id = "") {
     super(board, id, undefined, true);
     this.events = events;
+    this.canBeNested = true;
     this.linkTo = new LinkTo(this.id, this.events);
     this.transformation = new Transformation(this.id, this.events);
     this.transformation.subject.subscribe(() => {
@@ -43657,7 +43673,13 @@ class Group extends BaseItem {
     ctx.restore();
   }
   renderHTML(documentFactory) {
-    return documentFactory.createElement("div");
+    const div = documentFactory.createElement("div");
+    div.id = this.id;
+    const { translateX, translateY, scaleX, scaleY } = this.transformation.getMatrixData();
+    div.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})`;
+    div.style.position = "absolute";
+    div.style.transformOrigin = "0 0";
+    return div;
   }
 }
 // src/itemFactories.ts
@@ -46943,7 +46965,8 @@ class Select extends Tool {
     this.beginTimeStamp = Date.now();
     const selectionMbr = selection.getMbr();
     const selectionItems = selection.list();
-    this.isDownOnSelection = selectionMbr !== undefined && selectionMbr.isUnderPoint(pointer.point) && hover.every((hovered) => selectionItems.some((selected) => selected.getId() === hovered.getId()));
+    const selectableHover = hover.map((item) => this.board.selection.getSelectableItem(item));
+    this.isDownOnSelection = selectionMbr !== undefined && selectionMbr.isUnderPoint(pointer.point) && selectableHover.every((hovered) => hovered && selectionItems.some((selected) => selected.getId() === hovered.getId()));
     this.isDraggingSelection = this.isDownOnSelection;
     if (this.isDraggingSelection) {
       this.board.selection.transformationRenderBlock = true;
@@ -47269,7 +47292,7 @@ class Select extends Tool {
       const hovered = this.board.items.getUnderPointer();
       this.board.pointer.subject.publish(this.board.pointer);
       if (isCtrl || isShift) {
-        const underPointer = hovered[0];
+        const underPointer = this.board.selection.getSelectableItem(hovered[0]);
         const isEmptySelection = this.board.selection.items.list().length === 0;
         if (!underPointer && !isEmptySelection && isShift) {
           this.board.selection.add(this.board.selection.items.list());
@@ -47285,14 +47308,6 @@ class Select extends Tool {
         const isNotInSelection = this.board.selection.items.findById(underPointer.getId()) === null;
         if (isNotInSelection) {
           this.board.selection.add(underPointer);
-          if ("index" in underPointer && underPointer.index) {
-            const { left, right, top, bottom } = underPointer.getMbr();
-            const childrenIds = underPointer.getChildrenIds();
-            console.log("UNDERPOINTER", underPointer);
-            console.log("CHILDREN", childrenIds);
-            const itemsInFrame = this.board.items.getEnclosedOrCrossed(left, top, right, bottom).filter((item) => childrenIds && childrenIds.includes(item.getId()));
-            this.board.selection.add(itemsInFrame);
-          }
           this.board.selection.setContext("EditUnderPointer");
         } else {
           this.board.selection.remove(underPointer);
@@ -47309,10 +47324,6 @@ class Select extends Tool {
         } else {
           this.board.selection.editUnderPointer();
         }
-        if (topItem2 instanceof Group) {
-          const groupChildren = topItem2.getChildren();
-          this.board.selection.add(groupChildren);
-        }
         this.board.tools.publish();
         this.clear();
         return false;
@@ -53348,10 +53359,23 @@ class BoardSelection {
   getMbr() {
     return this.items.getMbr();
   }
+  getSelectableItem(item) {
+    if (!item) {
+      return null;
+    }
+    if (!(item instanceof BaseItem) || item.parent === "Board") {
+      return item;
+    }
+    const parent = this.board.items.getById(item.parent);
+    if (parent instanceof Group) {
+      return parent;
+    }
+    return item;
+  }
   selectUnderPointer() {
     this.removeAll();
     const stack = this.board.items.getUnderPointer();
-    const top = stack.pop();
+    const top = this.getSelectableItem(stack.pop());
     if (top) {
       this.add(top);
       this.setTextToEdit(undefined);
@@ -53405,7 +53429,7 @@ class BoardSelection {
   editUnderPointer() {
     this.removeAll();
     const stack = this.board.items.getUnderPointer();
-    const item = stack.pop();
+    const item = this.getSelectableItem(stack.pop());
     if (item) {
       this.add(item);
       this.setTextToEdit(undefined);
@@ -53439,7 +53463,7 @@ class BoardSelection {
       const textSize = tempStorage.getFontSize(item.itemType);
       const highlightColor = tempStorage.getFontHighlight(item.itemType);
       const styles = tempStorage.getFontStyles(item.itemType);
-      const horizontalAlignment = tempStorage.getHorizontalAlignment(item.itemType);
+      const horisontalAlignment = tempStorage.getHorisontalAlignment(item.itemType);
       const verticalAlignment = tempStorage.getVerticalAlignment(item.itemType);
       if (textColor) {
         text5.setSelectionFontColor(textColor, "None");
@@ -53460,8 +53484,8 @@ class BoardSelection {
         const stylesArr = styles;
         text5.setSelectionFontStyle(stylesArr, "None");
       }
-      if (horizontalAlignment && !(item instanceof Sticker)) {
-        text5.setSelectionHorisontalAlignment(horizontalAlignment);
+      if (horisontalAlignment && !(item instanceof Sticker)) {
+        text5.setSelectionHorisontalAlignment(horisontalAlignment);
       }
       if (verticalAlignment && !(item instanceof Sticker)) {
         this.setVerticalAlignment(verticalAlignment);
@@ -53474,7 +53498,7 @@ class BoardSelection {
   editTextUnderPointer() {
     this.removeAll();
     const stack = this.board.items.getUnderPointer();
-    const top = stack.pop();
+    const top = this.getSelectableItem(stack.pop());
     if (top) {
       this.add(top);
       this.setContext("EditTextUnderPointer");
@@ -54084,7 +54108,7 @@ class BoardSelection {
         selection: text5.editor.getSelection(),
         ops
       });
-      tempStorage.setHorizontalAlignment(item.itemType, horisontalAlignment);
+      tempStorage.setHorisontalAlignment(item.itemType, horisontalAlignment);
     }
     this.emitApplied({
       class: "RichText",
@@ -54509,7 +54533,6 @@ class ForceGraphEngine {
   activeComponents = new Map;
   TICK_MS = 33;
   SYNC_MS = 300;
-  SOFTENING_SQ = 100 * 100;
   MIN_MOVE_PX = 0.05;
   constructor(board) {
     this.board = board;
@@ -54658,42 +54681,27 @@ class ForceGraphEngine {
     return this.board.items.listAll().filter((item) => item.itemType === "Connector");
   }
   tick() {
-    const dt = this.TICK_MS / 1000;
     const activeIds = this.getActiveNodeIds();
     const draggedIds = this.board.getDraggedItemIds();
     const allNodes = this.getNodes();
-    const nodes = allNodes.filter((item) => {
-      if (!activeIds.has(item.getId()))
-        return false;
-      if (draggedIds.has(item.getId()))
-        return false;
-      if (item.parent !== "Board" && draggedIds.has(item.parent))
-        return false;
-      return true;
-    });
-    if (nodes.length < 1)
-      return;
     const snapMap = new Map;
-    for (const item of nodes) {
+    for (const item of allNodes) {
+      if (!activeIds.has(item.getId()))
+        continue;
       const pos = item.transformation.getTranslation();
       const mbr = item.getMbr();
       const w = Math.max(mbr.getWidth(), 1);
       const h2 = Math.max(mbr.getHeight(), 1);
-      snapMap.set(item.getId(), {
-        id: item.getId(),
-        cx: pos.x + w * 0.5,
-        cy: pos.y + h2 * 0.5,
-        w,
-        h: h2
-      });
+      snapMap.set(item.getId(), { id: item.getId(), cx: pos.x + w * 0.5, cy: pos.y + h2 * 0.5, w, h: h2 });
     }
     const snap = Array.from(snapMap.values());
+    if (snap.length < 1)
+      return;
     const uf = new UnionFind;
     for (const connector of this.getConnectors()) {
       const { startItem, endItem } = connector.getConnectedItems();
-      if (startItem && endItem) {
+      if (startItem && endItem)
         uf.union(startItem.getId(), endItem.getId());
-      }
     }
     const ax = new Map;
     const ay = new Map;
@@ -54711,14 +54719,13 @@ class ForceGraphEngine {
         continue;
       const dx = s2.cx - s1.cx;
       const dy = s2.cy - s1.cy;
-      const dist = Math.sqrt(dx * dx + dy * dy) + 0.001;
+      const dist = Math.sqrt(dx * dx + dy * dy) || 1;
       const compId = this.findComponentId(s1.id);
       const targetGap = compId ? this.activeComponents.get(compId)?.targetGap ?? conf.FG_TARGET_GAP : conf.FG_TARGET_GAP;
       const targetDist = (Math.max(s1.w, s1.h) + Math.max(s2.w, s2.h)) * 0.5 + targetGap;
-      const stretch = dist - targetDist;
-      const forceMag = stretch * conf.FG_SPRING_K;
-      const fx = dx / dist * forceMag;
-      const fy = dy / dist * forceMag;
+      const force = (dist - targetDist) * conf.FG_SPRING_K;
+      const fx = dx / dist * force;
+      const fy = dy / dist * force;
       ax.set(s1.id, (ax.get(s1.id) ?? 0) + fx);
       ay.set(s1.id, (ay.get(s1.id) ?? 0) + fy);
       ax.set(s2.id, (ax.get(s2.id) ?? 0) - fx);
@@ -54732,35 +54739,35 @@ class ForceGraphEngine {
           continue;
         const dx = s2.cx - s1.cx;
         const dy = s2.cy - s1.cy;
-        const centerDist = Math.sqrt(dx * dx + dy * dy) + 0.001;
-        const r1 = Math.max(s1.w, s1.h) * 0.5;
-        const r2 = Math.max(s2.w, s2.h) * 0.5;
-        const edgeDist = Math.max(centerDist - r1 - r2, 1);
-        const repMag = conf.FG_REPULSION / (edgeDist * edgeDist + this.SOFTENING_SQ);
-        const fx = dx / centerDist * repMag;
-        const fy = dy / centerDist * repMag;
-        ax.set(s1.id, (ax.get(s1.id) ?? 0) - fx);
-        ay.set(s1.id, (ay.get(s1.id) ?? 0) - fy);
-        ax.set(s2.id, (ax.get(s2.id) ?? 0) + fx);
-        ay.set(s2.id, (ay.get(s2.id) ?? 0) + fy);
+        const distSq = Math.max(dx * dx + dy * dy, conf.FG_MIN_DIST_SQ);
+        const force = conf.FG_REPULSION / distSq;
+        ax.set(s1.id, (ax.get(s1.id) ?? 0) - dx * force);
+        ay.set(s1.id, (ay.get(s1.id) ?? 0) - dy * force);
+        ax.set(s2.id, (ax.get(s2.id) ?? 0) + dx * force);
+        ay.set(s2.id, (ay.get(s2.id) ?? 0) + dy * force);
       }
     }
     let totalEnergy = 0;
-    for (const item of nodes) {
+    for (const item of allNodes) {
       const id = item.getId();
-      if (!this.velocities.has(id)) {
+      if (!activeIds.has(id))
+        continue;
+      if (!this.velocities.has(id))
         this.velocities.set(id, { vx: 0, vy: 0 });
-      }
       const vel = this.velocities.get(id);
-      vel.vx = (vel.vx + (ax.get(id) ?? 0) * dt) * conf.FG_DAMPING;
-      vel.vy = (vel.vy + (ay.get(id) ?? 0) * dt) * conf.FG_DAMPING;
-      totalEnergy += vel.vx * vel.vx + vel.vy * vel.vy;
-      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) {
+      const isDragged = draggedIds.has(id) || item.parent !== "Board" && draggedIds.has(item.parent);
+      if (isDragged) {
+        vel.vx = 0;
+        vel.vy = 0;
+        continue;
+      }
+      vel.vx = (vel.vx + (ax.get(id) ?? 0)) * conf.FG_DAMPING;
+      vel.vy = (vel.vy + (ay.get(id) ?? 0)) * conf.FG_DAMPING;
+      totalEnergy += Math.abs(vel.vx) + Math.abs(vel.vy);
+      if (Math.abs(vel.vx) >= this.MIN_MOVE_PX || Math.abs(vel.vy) >= this.MIN_MOVE_PX) {
         item.transformation.applyMatrixSilent({
-          translateX: moveX,
-          translateY: moveY,
+          translateX: vel.vx,
+          translateY: vel.vy,
           scaleX: 1,
           scaleY: 1,
           shearX: 0,
@@ -55021,9 +55028,10 @@ class Board {
     if (!item || !(item instanceof Group)) {
       return;
     }
-    item.getChildren().forEach((item2) => {
-      item2.transformation.isLocked = false;
-      item2.parent = "Board";
+    const children = [...item.getChildren()];
+    item.applyRemoveChildren(children.map((child) => child.getId()));
+    children.forEach((child) => {
+      child.transformation.isLocked = false;
     });
     item.transformation.isLocked = false;
     const removedItems = [];
@@ -55038,9 +55046,7 @@ class Board {
     if (!item || !(item instanceof Group)) {
       return;
     }
-    item.getChildren().forEach((item2) => {
-      item2.parent = "Board";
-    });
+    item.applyRemoveChildren(item.getChildrenIds());
     const removedItems = [];
     this.findItemAndApply(op.item, (item2) => {
       this.index.remove(item2);