microboard-temp 0.13.31 → 0.13.32

package/dist/esm/index.js

@@ -7268,11 +7268,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);
@@ -17211,7 +17211,7 @@ class EditorContainer {
           break;
         case "setSelectionFontHighlight":
         case "setSelectionFontStyle":
-        case "setSelectionHorizontalAlignment":
+        case "setSelectionHorisontalAlignment":
           this.applySelectionOp(op);
           break;
         case "setFontStyle":
@@ -21273,10 +21273,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) {
@@ -21816,6 +21812,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;
@@ -21823,7 +21833,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);
@@ -22318,12 +22328,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()
     };
@@ -40011,6 +40023,7 @@ class Shape extends BaseItem {
       this.text.deserialize(data.text);
     }
     this.transformPath();
+    this.text.updateElement();
     this.subject.publish(this);
     return this;
   }
@@ -43508,6 +43521,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(() => {
@@ -46936,7 +46950,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;
@@ -47262,7 +47277,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());
@@ -47278,14 +47293,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);
@@ -47302,10 +47309,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;
@@ -53341,10 +53344,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);
@@ -53398,7 +53414,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);
@@ -53432,7 +53448,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");
@@ -53453,8 +53469,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);
@@ -53467,7 +53483,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");
@@ -54077,7 +54093,7 @@ class BoardSelection {
         selection: text5.editor.getSelection(),
         ops
       });
-      tempStorage.setHorizontalAlignment(item.itemType, horisontalAlignment);
+      tempStorage.setHorisontalAlignment(item.itemType, horisontalAlignment);
     }
     this.emitApplied({
       class: "RichText",
@@ -55014,9 +55030,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 = [];
@@ -55031,9 +55048,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/esm/node.js

@@ -8052,11 +8052,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);
@@ -19746,7 +19746,7 @@ class EditorContainer {
           break;
         case "setSelectionFontHighlight":
         case "setSelectionFontStyle":
-        case "setSelectionHorizontalAlignment":
+        case "setSelectionHorisontalAlignment":
           this.applySelectionOp(op);
           break;
         case "setFontStyle":
@@ -23740,10 +23740,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) {
@@ -24283,6 +24279,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;
@@ -24290,7 +24300,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);
@@ -24785,12 +24795,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()
     };
@@ -42479,6 +42491,7 @@ class Shape extends BaseItem {
       this.text.deserialize(data.text);
     }
     this.transformPath();
+    this.text.updateElement();
     this.subject.publish(this);
     return this;
   }
@@ -45976,6 +45989,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(() => {
@@ -49404,7 +49418,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;
@@ -49730,7 +49745,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());
@@ -49746,14 +49761,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);
@@ -49770,10 +49777,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;
@@ -55809,10 +55812,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);
@@ -55866,7 +55882,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);
@@ -55900,7 +55916,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");
@@ -55921,8 +55937,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);
@@ -55935,7 +55951,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");
@@ -56545,7 +56561,7 @@ class BoardSelection {
         selection: text5.editor.getSelection(),
         ops
       });
-      tempStorage.setHorizontalAlignment(item.itemType, horisontalAlignment);
+      tempStorage.setHorisontalAlignment(item.itemType, horisontalAlignment);
     }
     this.emitApplied({
       class: "RichText",
@@ -57482,9 +57498,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 = [];
@@ -57499,9 +57516,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/types/Items/BaseItem/BaseItem.d.ts

@@ -88,6 +88,7 @@ export declare class BaseItem extends Mbr implements Geometry {
      * through the world matrix to produce the correct world-space bounds.
      */
     getWorldMbr(): Mbr;
+    private hasAncestor;
     applyAddChildren(childIds: string[]): void;
     applyRemoveChildren(childIds: string[]): void;
     updateMbr(): void;

package/dist/types/Items/RichText/RichTextOperations.d.ts

@@ -39,7 +39,7 @@ interface SetMaxWidth extends RichTextBaseOp {
     method: 'setMaxWidth';
     maxWidth: number | undefined;
 }
-export type SelectionMethod = 'setSelectionHorizontalAlignment' | 'setSelectionFontHighlight' | 'setSelectionFontSize' | 'setSelectionFontFamily' | 'setSelectionFontStyle' | 'setSelectionFontColor' | 'setSelectionBlockType' | 'edit';
+export type SelectionMethod = 'setSelectionHorisontalAlignment' | 'setSelectionFontHighlight' | 'setSelectionFontSize' | 'setSelectionFontFamily' | 'setSelectionFontStyle' | 'setSelectionFontColor' | 'setSelectionBlockType' | 'edit';
 export interface SelectionOp extends RichTextBaseOp {
     method: SelectionMethod;
     selection: BaseSelection;

package/dist/types/Selection/Selection.d.ts

@@ -66,6 +66,7 @@ export declare class BoardSelection {
     disable(): void;
     setContext(context: SelectionContext): void;
     getMbr(): Mbr | undefined;
+    getSelectableItem(item: Item | null | undefined): Item | null;
     selectUnderPointer(): void;
     editSelected(): void;
     editText(shouldReplace?: string, moveCursorToEnd?: boolean, shouldSelect?: boolean): void;

package/dist/types/SessionStorage.d.ts

@@ -44,8 +44,8 @@ export declare class SessionStorage {
     getFontColor(itemType: string): string | undefined;
     setFontHighlight(itemType: string, highlightColor: string): void;
     getFontHighlight(itemType: string): string | undefined;
-    setHorizontalAlignment(itemType: string, horizontalAlignment: 'left' | 'center' | 'right'): void;
-    getHorizontalAlignment(itemType: string): 'left' | 'center' | 'right' | undefined;
+    setHorisontalAlignment(itemType: string, horisontalAlignment: 'left' | 'center' | 'right'): void;
+    getHorisontalAlignment(itemType: string): 'left' | 'center' | 'right' | undefined;
     setVerticalAlignment(itemType: string, verticalAlignment: 'top' | 'center' | 'bottom'): void;
     getVerticalAlignment(itemType: string): 'top' | 'center' | 'bottom' | undefined;
     setLastAIRequest(request: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "microboard-temp",
-  "version": "0.13.31",
+  "version": "0.13.32",
   "description": "A flexible interactive whiteboard library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",