microboard-temp 0.13.30 → 0.13.32

package/dist/cjs/browser.js

@@ -7455,11 +7455,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);
@@ -17389,7 +17389,7 @@ class EditorContainer {
           break;
         case "setSelectionFontHighlight":
         case "setSelectionFontStyle":
-        case "setSelectionHorizontalAlignment":
+        case "setSelectionHorisontalAlignment":
           this.applySelectionOp(op);
           break;
         case "setFontStyle":
@@ -21451,10 +21451,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) {
@@ -21994,6 +21990,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;
@@ -22001,7 +22011,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);
@@ -22466,7 +22476,7 @@ class RichText extends BaseItem {
       return this.editor.maxWidth || this.container.getWidth();
     }
     if (this.isContainerSet) {
-      return this.container.getWidth();
+      return this.getTransformedContainer().getWidth();
     } else {
       return this.containerMaxWidth || this.editor.maxWidth;
     }
@@ -22496,12 +22506,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()
     };
@@ -40189,6 +40201,7 @@ class Shape extends BaseItem {
       this.text.deserialize(data.text);
     }
     this.transformPath();
+    this.text.updateElement();
     this.subject.publish(this);
     return this;
   }
@@ -40481,16 +40494,10 @@ class Shape extends BaseItem {
     div.setAttribute("stroke-width", this.borderWidth.toString());
     const textElement = this.text.renderHTML(documentFactory);
     textElement.id = `${this.getId()}_text`;
-    textElement.style.maxWidth = `${width}px`;
     textElement.style.overflow = "auto";
     positionRelatively(textElement, div);
     resetElementScale(textElement);
     scaleElementBy(textElement, 1 / scaleX, 1 / scaleY);
-    const [dx, dy] = [
-      (width - parseInt(textElement.style.width)) / scaleX / 2 - 1,
-      (height - parseInt(textElement.style.height)) / scaleY / 2 - 1
-    ];
-    translateElementBy(textElement, dx, dy);
     div.setAttribute("data-link-to", this.linkTo.serialize() || "");
     if (this.getLinkTo()) {
       const linkElement = this.linkTo.renderHTML(documentFactory);
@@ -43692,6 +43699,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(() => {
@@ -47120,7 +47128,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;
@@ -47446,7 +47455,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());
@@ -47462,14 +47471,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);
@@ -47486,10 +47487,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;
@@ -53525,10 +53522,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);
@@ -53582,7 +53592,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);
@@ -53616,7 +53626,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");
@@ -53637,8 +53647,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);
@@ -53651,7 +53661,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");
@@ -54261,7 +54271,7 @@ class BoardSelection {
         selection: text5.editor.getSelection(),
         ops
       });
-      tempStorage.setHorizontalAlignment(item.itemType, horisontalAlignment);
+      tempStorage.setHorisontalAlignment(item.itemType, horisontalAlignment);
     }
     this.emitApplied({
       class: "RichText",
@@ -55198,9 +55208,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 = [];
@@ -55215,9 +55226,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);

package/dist/cjs/index.js

@@ -7455,11 +7455,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);
@@ -17389,7 +17389,7 @@ class EditorContainer {
           break;
         case "setSelectionFontHighlight":
         case "setSelectionFontStyle":
-        case "setSelectionHorizontalAlignment":
+        case "setSelectionHorisontalAlignment":
           this.applySelectionOp(op);
           break;
         case "setFontStyle":
@@ -21451,10 +21451,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) {
@@ -21994,6 +21990,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;
@@ -22001,7 +22011,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);
@@ -22466,7 +22476,7 @@ class RichText extends BaseItem {
       return this.editor.maxWidth || this.container.getWidth();
     }
     if (this.isContainerSet) {
-      return this.container.getWidth();
+      return this.getTransformedContainer().getWidth();
     } else {
       return this.containerMaxWidth || this.editor.maxWidth;
     }
@@ -22496,12 +22506,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()
     };
@@ -40189,6 +40201,7 @@ class Shape extends BaseItem {
       this.text.deserialize(data.text);
     }
     this.transformPath();
+    this.text.updateElement();
     this.subject.publish(this);
     return this;
   }
@@ -40481,16 +40494,10 @@ class Shape extends BaseItem {
     div.setAttribute("stroke-width", this.borderWidth.toString());
     const textElement = this.text.renderHTML(documentFactory);
     textElement.id = `${this.getId()}_text`;
-    textElement.style.maxWidth = `${width}px`;
     textElement.style.overflow = "auto";
     positionRelatively(textElement, div);
     resetElementScale(textElement);
     scaleElementBy(textElement, 1 / scaleX, 1 / scaleY);
-    const [dx, dy] = [
-      (width - parseInt(textElement.style.width)) / scaleX / 2 - 1,
-      (height - parseInt(textElement.style.height)) / scaleY / 2 - 1
-    ];
-    translateElementBy(textElement, dx, dy);
     div.setAttribute("data-link-to", this.linkTo.serialize() || "");
     if (this.getLinkTo()) {
       const linkElement = this.linkTo.renderHTML(documentFactory);
@@ -43692,6 +43699,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(() => {
@@ -47120,7 +47128,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;
@@ -47446,7 +47455,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());
@@ -47462,14 +47471,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);
@@ -47486,10 +47487,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;
@@ -53525,10 +53522,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);
@@ -53582,7 +53592,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);
@@ -53616,7 +53626,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");
@@ -53637,8 +53647,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);
@@ -53651,7 +53661,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");
@@ -54261,7 +54271,7 @@ class BoardSelection {
         selection: text5.editor.getSelection(),
         ops
       });
-      tempStorage.setHorizontalAlignment(item.itemType, horisontalAlignment);
+      tempStorage.setHorisontalAlignment(item.itemType, horisontalAlignment);
     }
     this.emitApplied({
       class: "RichText",
@@ -55198,9 +55208,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 = [];
@@ -55215,9 +55226,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);