microboard-temp 0.4.37 → 0.4.38

package/dist/esm/browser.js

@@ -19502,6 +19502,7 @@ class BaseItem extends Mbr {
   children = null;
   canBeNested = true;
   transformationRenderBlock = undefined;
+  childItems = null;
   board;
   id;
   subject = new Subject;
@@ -19532,6 +19533,9 @@ class BaseItem extends Mbr {
     this.getRichText()?.setId(id);
     return this;
   }
+  getChildrenIds() {
+    return this.children;
+  }
   addChildItems(children) {
     if (!this.children) {
       return;
@@ -19598,15 +19602,20 @@ class BaseItem extends Mbr {
     if (!this.children) {
       return;
     }
-    children.forEach((child) => {
-      if (this.parent !== child && this.getId() !== child) {
-        const foundItem = this.board.items.getById(child);
-        if (!this.children.includes(child) && foundItem) {
+    const updatedChildItems = [];
+    children.forEach((childId) => {
+      const foundItem = this.board.items.getById(childId);
+      if (foundItem) {
+        updatedChildItems.push(foundItem);
+      }
+      if (this.parent !== childId && this.getId() !== childId) {
+        if (!this.children.includes(childId) && foundItem) {
           foundItem.parent = this.getId();
         }
       }
     });
     this.children = children;
+    this.childItems = updatedChildItems;
     this.updateMbr();
     this.subject.publish(this);
   }
@@ -19682,7 +19691,13 @@ class BaseItem extends Mbr {
   getPath() {
     return new Path(this.getMbr().getLines());
   }
-  render(context) {}
+  render(context) {
+    if (this.childItems) {
+      this.childItems.forEach((child) => {
+        child.render(context);
+      });
+    }
+  }
   renderHTML(documentFactory) {
     return documentFactory.createElement("div");
   }
@@ -38711,8 +38726,10 @@ class Frame extends BaseItem {
     if (this.transformationRenderBlock) {
       return;
     }
-    this.path.render(context);
-    this.text.render(context);
+    this.renderPath(context);
+    super.render(context);
+    this.renderBorders(context);
+    this.renderName(context);
   }
   renderName(context) {
     if (this.transformationRenderBlock) {
@@ -41828,8 +41845,8 @@ class NestingHighlighter extends Tool {
   listAll() {
     return this.toHighlight;
   }
-  add(frame, children) {
-    const existing = this.toHighlight.find((group) => group.frame === frame);
+  add(groupItem, children) {
+    const existing = this.toHighlight.find((group) => group.groupItem === groupItem);
     const array = Array.isArray(children) ? children : [children];
     if (existing) {
       array.forEach((child) => {
@@ -41838,7 +41855,7 @@ class NestingHighlighter extends Tool {
         }
       });
     } else {
-      this.toHighlight.push({ frame, children: array });
+      this.toHighlight.push({ groupItem, children: array });
     }
   }
   addSingleItem(item) {
@@ -41853,8 +41870,8 @@ class NestingHighlighter extends Tool {
   render(context) {
     if (this.toHighlight.length > 0) {
       this.toHighlight.forEach((group) => {
-        if (group.frame) {
-          const frameRect = group.frame.getMbr();
+        if (group.groupItem) {
+          const frameRect = group.groupItem.getMbr();
           frameRect.borderColor = FRAME_HIGHLIGHTER_BORDER_COLOR;
           frameRect.strokeWidth = 0.3;
           frameRect.render(context);
@@ -41949,7 +41966,7 @@ class AddFrame extends BoardTool {
     return true;
   }
   addNextTo() {
-    const framesInView = this.board.items.getFramesInView();
+    const framesInView = this.board.items.getItemsInView().filter((item) => item instanceof Frame);
     if (framesInView.length === 0) {
       if (this.shape === "Custom") {
         const { x, y } = this.frame.getLastFrameScale();
@@ -41961,7 +41978,7 @@ class AddFrame extends BoardTool {
       }
       this.transformToCenter();
     } else {
-      const frames = this.board.items.listFrames().filter((frame2) => frame2 !== this.frame);
+      const frames = this.board.items.listAll().filter((frame2) => frame2 instanceof Frame && frame2 !== this.frame);
       let nextTo = framesInView.reduce((rightest, frame2) => {
         if (frame2.getMbr().right > rightest.getMbr().right) {
           rightest = frame2;
@@ -43139,17 +43156,17 @@ function createCanvasDrawer(board) {
     const realRight = realLeft + adjustedWidth;
     const realBottom = realTop + adjustedHeight;
     const containerMbr = new Mbr(realLeft, realTop, realRight, realBottom);
-    const frames = board.items.getFramesEnclosedOrCrossed(containerMbr.left, containerMbr.top, containerMbr.right, containerMbr.bottom);
-    if (frames) {
+    const groups = board.items.getGroupItemsEnclosedOrCrossed(containerMbr.left, containerMbr.top, containerMbr.right, containerMbr.bottom);
+    if (groups) {
       drawnItemsMap?.forEach(({ mbr }) => {
         mbr.transform(currMatrix);
       });
-      frames.forEach((frame) => {
+      groups.forEach((group) => {
         drawnItemsMap?.forEach(({ mbr, item }, key) => {
-          if (item.itemType === "Frame") {
+          if ("canBeNested" in item && !item.canBeNested) {
             return;
           }
-          if (lastCreatedCanvas && (!drawnItemsMap.get(frame.getId()) || item.parent !== frame.getId()) && frame.handleNesting(mbr)) {
+          if (lastCreatedCanvas && (!drawnItemsMap.get(group.getId()) || item.parent !== group.getId()) && group.handleNesting(mbr)) {
             const div = createBorderDivForItem(mbr, lastCreatedCanvas);
             removeHighlighted(key);
             highlightedDivs.set(key, div);
@@ -45238,7 +45255,7 @@ class Tools extends ToolContext {
     this.subject.publish(this);
   }
   sortFrames() {
-    const frames = this.board.items.listFrames();
+    const frames = this.board.items.listAll().filter((item) => item instanceof Frame);
     const sortedFrames = frames.sort((fr1, fr2) => {
       const mbr1 = fr1.getMbr();
       const mbr2 = fr2.getMbr();
@@ -49325,9 +49342,9 @@ function updateFrameChildren({
   board,
   nestingHighlighter
 }) {
-  const frames = board.items.getFramesEnclosedOrCrossed(mbr.left, mbr.top, mbr.right, mbr.bottom);
+  const groups = board.items.getGroupItemsEnclosedOrCrossed(mbr.left, mbr.top, mbr.right, mbr.bottom);
   board.selection.items.list().forEach((item) => {
-    if (item instanceof Frame) {
+    if ("getChildrenIds" in item && item.getChildrenIds()) {
       const currMbr = item.getMbr();
       const itemsToCheck = board.items.getEnclosedOrCrossed(currMbr.left, currMbr.top, currMbr.right, currMbr.bottom);
       itemsToCheck.forEach((currItem) => {
@@ -49338,9 +49355,9 @@ function updateFrameChildren({
         }
       });
     } else {
-      frames.forEach((frame) => {
-        if (frame.handleNesting(item)) {
-          nestingHighlighter.add(frame, item);
+      groups.forEach((group) => {
+        if (group.handleNesting(item)) {
+          nestingHighlighter.add(group, item);
         } else {
           nestingHighlighter.remove(item);
         }
@@ -49859,9 +49876,7 @@ class BoardSelection {
   }
   addAll() {
     const items = this.board.items.listAll().filter((item) => !item.transformation.isLocked);
-    const frames = this.board.items.listFrames().filter((item) => !item.transformation.isLocked);
     this.add(items);
-    this.add(frames);
     this.setContext("SelectByRect");
   }
   remove(value) {
@@ -50290,38 +50305,38 @@ class BoardSelection {
     }, undefined);
     if (selectedMbr) {
       const selectedMap = Object.fromEntries(selected.map((item) => [item.getId(), { item, nested: false }]));
-      const enclosedFrames = this.board.items.getFramesEnclosedOrCrossed(selectedMbr?.left, selectedMbr?.top, selectedMbr?.right, selectedMbr?.bottom);
-      enclosedFrames.forEach((frame) => {
+      const enclosedGroups = this.board.items.getGroupItemsEnclosedOrCrossed(selectedMbr?.left, selectedMbr?.top, selectedMbr?.right, selectedMbr?.bottom);
+      enclosedGroups.forEach((group) => {
         selected.forEach((item) => {
-          if (frame.handleNesting(item)) {
-            selectedMap[item.getId()].nested = frame;
+          if (group.handleNesting(item)) {
+            selectedMap[item.getId()].nested = group;
           }
         });
       });
       Object.values(selectedMap).forEach((val) => {
-        const parentFrame = this.board.items.getById(val.item.parent);
-        const isParentFrame = parentFrame instanceof Frame;
-        const parentFrameId = isParentFrame ? parentFrame.getId() : null;
+        const parentGroup = this.board.items.getById(val.item.parent);
+        const parentGroupId = parentGroup?.getId();
         if (val.nested) {
-          const isRemoveChildFromFrame = Object.values(selectedMap).some((val2) => val2.nested && val2.nested.getId() !== parentFrameId);
-          if (isParentFrame && isRemoveChildFromFrame) {
-            parentFrame?.removeChildItems([val.item]);
+          const isRemoveChildFromFrame = Object.values(selectedMap).some((val2) => val2.nested && val2.nested.getId() !== parentGroupId);
+          if (parentGroupId && isRemoveChildFromFrame) {
+            parentGroup?.removeChildItems([val.item]);
           }
           val.nested.addChildItems([val.item]);
         } else if (val.item.parent !== "Board") {
-          if (isParentFrame) {
-            parentFrame?.removeChildItems([val.item]);
+          if (parentGroupId) {
+            parentGroup?.removeChildItems([val.item]);
           } else {
             console.warn(`Didnt find frame with id ${val.item.parent}`);
           }
         }
-        if (val.item instanceof Frame && checkFrames) {
-          const currFrame = val.item;
-          const currMbr = currFrame.getMbr();
-          const children = val.item.getChildrenIds().map((childId) => this.board.items.getById(childId)).filter((item) => !!item);
-          const underFrame = this.board.items.getEnclosedOrCrossed(currMbr.left, currMbr.top, currMbr.right, currMbr.bottom).filter((item) => item.parent === "Board" || item.parent === currFrame.getId());
+        const childrenIds = val.item.getChildrenIds();
+        if (childrenIds && checkFrames) {
+          const currGroup = val.item;
+          const currMbr = currGroup.getMbr();
+          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;
-          const toCheck = [...children, ...underFrame].filter((item) => {
+          const toCheck = [...children, ...underGroup].filter((item) => {
             const id = item.getId();
             if (uniqueItems.has(id)) {
               return false;
@@ -50329,7 +50344,7 @@ class BoardSelection {
             uniqueItems.add(id);
             return true;
           });
-          currFrame.emitNesting(toCheck);
+          currGroup.emitNesting(toCheck);
         }
       });
     }
@@ -51939,13 +51954,9 @@ class LayeredIndex {
 class SpatialIndex {
   subject = new Subject;
   itemsArray = [];
-  framesArray = [];
   itemsIndex = new LayeredIndex((item) => {
     return this.itemsArray.indexOf(item);
   });
-  framesIndex = new LayeredIndex((item) => {
-    return this.framesArray.indexOf(item);
-  });
   Mbr = new Mbr;
   items;
   constructor(view, pointer) {
@@ -51953,23 +51964,14 @@ class SpatialIndex {
   }
   clear() {
     this.itemsArray = [];
-    this.framesArray = [];
     this.itemsIndex = new LayeredIndex((item) => {
       return this.itemsArray.indexOf(item);
     });
-    this.framesIndex = new LayeredIndex((item) => {
-      return this.framesArray.indexOf(item);
-    });
     this.Mbr = new Mbr;
   }
   insert(item) {
-    if (item instanceof Frame) {
-      this.framesArray.push(item);
-      this.framesIndex.insert(item);
-    } else {
-      this.itemsArray.push(item);
-      this.itemsIndex.insert(item);
-    }
+    this.itemsArray.push(item);
+    this.itemsIndex.insert(item);
     if (conf.isNode()) {
       return;
     }
@@ -51982,11 +51984,7 @@ class SpatialIndex {
     this.subject.publish(this.items);
   }
   change = (item) => {
-    if (item instanceof Frame) {
-      this.framesIndex.change(item);
-    } else {
-      this.itemsIndex.change(item);
-    }
+    this.itemsIndex.change(item);
     if (this.Mbr.getWidth() === 0 && this.Mbr.getHeight() === 0) {
       this.Mbr = item.getMbr().copy();
     } else {
@@ -52003,39 +52001,22 @@ class SpatialIndex {
       const parentFrame = this.items.getById(item.parent);
       parentFrame?.removeChildItems(item);
     }
-    if (item instanceof Frame) {
-      this.framesArray.splice(this.framesArray.indexOf(item), 1);
-      this.framesIndex.remove(item);
-    } else {
-      this.itemsArray.splice(this.itemsArray.indexOf(item), 1);
-      this.itemsIndex.remove(item);
-    }
+    this.itemsArray.splice(this.itemsArray.indexOf(item), 1);
+    this.itemsIndex.remove(item);
     this.Mbr = new Mbr;
-    const allItems = [...this.itemsArray, ...this.framesArray];
-    allItems.forEach((item2) => this.Mbr.combine([item2.getMbr()]));
+    this.itemsArray.forEach((item2) => this.Mbr.combine([item2.getMbr()]));
     this.subject.publish(this.items);
   }
   copy() {
-    const itemsData = this.itemsArray.map((item) => ({
+    return this.itemsArray.map((item) => ({
       ...item.serialize(true),
       id: item.getId()
     }));
-    const framesData = this.framesArray.map((item) => ({
-      ...item.serialize(),
-      id: item.getId()
-    }));
-    return [...framesData, ...itemsData];
   }
   moveToZIndex(item, zIndex) {
-    if (item instanceof Frame) {
-      const index2 = this.framesArray.indexOf(item);
-      this.framesArray.splice(index2, 1);
-      this.framesArray.splice(zIndex, 0, item);
-    } else {
-      const index2 = this.itemsArray.indexOf(item);
-      this.itemsArray.splice(index2, 1);
-      this.itemsArray.splice(zIndex, 0, item);
-    }
+    const index2 = this.itemsArray.indexOf(item);
+    this.itemsArray.splice(index2, 1);
+    this.itemsArray.splice(zIndex, 0, item);
     this.change(item);
     this.subject.publish(this.items);
   }
@@ -52049,17 +52030,10 @@ class SpatialIndex {
     this.itemsArray.forEach(this.change.bind(this));
   }
   sendToBack(item, shouldPublish = true) {
-    if (item instanceof Frame) {
-      const index2 = this.framesArray.indexOf(item);
-      this.framesArray.splice(index2, 1);
-      this.framesArray.unshift(item);
-      this.framesIndex.change(item);
-    } else {
-      const index2 = this.itemsArray.indexOf(item);
-      this.itemsArray.splice(index2, 1);
-      this.itemsArray.unshift(item);
-      this.itemsIndex.change(item);
-    }
+    const index2 = this.itemsArray.indexOf(item);
+    this.itemsArray.splice(index2, 1);
+    this.itemsArray.unshift(item);
+    this.itemsIndex.change(item);
     if (shouldPublish) {
       this.subject.publish(this.items);
     }
@@ -52075,17 +52049,10 @@ class SpatialIndex {
     this.itemsArray.forEach(this.change.bind(this));
   }
   bringToFront(item, shouldPublish = true) {
-    if (item instanceof Frame) {
-      const index2 = this.framesArray.indexOf(item);
-      this.framesArray.splice(index2, 1);
-      this.framesArray.push(item);
-      this.framesIndex.change(item);
-    } else {
-      const index2 = this.itemsArray.indexOf(item);
-      this.itemsArray.splice(index2, 1);
-      this.itemsArray.push(item);
-      this.itemsIndex.change(item);
-    }
+    const index2 = this.itemsArray.indexOf(item);
+    this.itemsArray.splice(index2, 1);
+    this.itemsArray.push(item);
+    this.itemsIndex.change(item);
     if (shouldPublish) {
       this.subject.publish(this.items);
     }
@@ -52124,37 +52091,24 @@ class SpatialIndex {
     if (item) {
       return item;
     }
-    const frame = this.framesArray.find((frame2) => frame2.getId() === id);
-    return frame;
   }
   findById(id) {
     return this.getById(id);
   }
   getEnclosed(left, top, right, bottom) {
     const mbr = new Mbr(left, top, right, bottom);
-    const enclosedItems = this.itemsIndex.getEnclosed(mbr);
-    const enclosedFrames = this.framesIndex.getEnclosed(mbr);
-    return enclosedFrames.concat(enclosedItems);
+    return this.itemsIndex.getEnclosed(mbr);
   }
   getEnclosedOrCrossed(left, top, right, bottom) {
     const mbr = new Mbr(left, top, right, bottom);
-    const enclosedOrCrossedItems = this.itemsIndex.getEnclosedOrCrossedBy(mbr);
-    const enclosedOrCrossedFrames = this.framesIndex.getEnclosedOrCrossedBy(mbr);
-    return enclosedOrCrossedFrames.concat(enclosedOrCrossedItems);
+    return this.itemsIndex.getEnclosedOrCrossedBy(mbr);
   }
   getUnderPoint(point5, tolerace = 5) {
-    const itemsUnderPoint = this.itemsIndex.getUnderPoint(point5, tolerace);
-    const framesUnderPoint = this.framesIndex.getUnderPoint(point5, tolerace);
-    return [...framesUnderPoint, ...itemsUnderPoint];
+    return this.itemsIndex.getUnderPoint(point5, tolerace);
   }
   getRectsEnclosedOrCrossed(left, top, right, bottom) {
     const mbr = new Mbr(left, top, right, bottom);
-    const frames = this.framesIndex.getRectsEnclosedOrCrossedBy(mbr);
-    const woFrames = this.itemsIndex.getRectsEnclosedOrCrossedBy(mbr);
-    return [...woFrames, ...frames];
-  }
-  getFramesEnclosedOrCrossed(left, top, right, bottom) {
-    return this.framesIndex.getRectsEnclosedOrCrossedBy(new Mbr(left, top, right, bottom));
+    return this.itemsIndex.getRectsEnclosedOrCrossedBy(mbr);
   }
   getItemsEnclosedOrCrossed(left, top, right, bottom) {
     return this.itemsIndex.getRectsEnclosedOrCrossedBy(new Mbr(left, top, right, bottom));
@@ -52167,44 +52121,28 @@ class SpatialIndex {
   }
   getNearestTo(point5, maxItems, filter, maxDistance) {
     const nearestItems = this.itemsIndex.getNearestTo(point5, maxItems, filter, maxDistance);
-    const nearestFrames = this.framesIndex.getNearestTo(point5, maxItems, filter, maxDistance);
-    const combined = nearestItems.concat(nearestFrames);
-    combined.sort((aa, bb) => {
+    nearestItems.sort((aa, bb) => {
       const distA = point5.getDistance(aa.getMbr().getCenter());
       const distB = point5.getDistance(bb.getMbr().getCenter());
       return distA - distB;
     });
-    return combined.slice(0, maxItems);
+    return nearestItems.slice(0, maxItems);
   }
   list() {
     return this.itemsArray.concat();
   }
-  listFrames() {
-    return this.framesArray.concat();
-  }
   getZIndex(item) {
-    if (item instanceof Frame) {
-      return this.framesArray.indexOf(item);
-    } else {
-      return this.itemsArray.indexOf(item);
-    }
+    return this.itemsArray.indexOf(item);
   }
   getLastZIndex() {
-    return this.itemsArray.length + this.framesArray.length - 1;
+    return this.itemsArray.length - 1;
   }
   getByZIndex(index2) {
-    const totalItems = this.itemsArray.length + this.framesArray.length;
     if (index2 < this.itemsArray.length) {
       return this.itemsArray[index2];
-    } else if (index2 < totalItems) {
-      return this.framesArray[index2 - this.itemsArray.length];
     } else {
       const lastIndex = this.getLastZIndex();
-      if (index2 - this.itemsArray.length < this.framesArray.length) {
-        return this.framesArray[lastIndex];
-      } else {
-        return this.itemsArray[lastIndex];
-      }
+      return this.itemsArray[lastIndex];
     }
   }
 }
@@ -52227,7 +52165,10 @@ class Items {
     return this.index.list();
   }
   listFrames() {
-    return this.index.listFrames();
+    return this.index.list().filter((item) => ("getChildrenIds" in item) && item.getChildrenIds());
+  }
+  listGroupItems() {
+    return this.index.list().filter((item) => ("getChildrenIds" in item) && item.getChildrenIds());
   }
   getById(id) {
     return this.index.getById(id);
@@ -52241,8 +52182,8 @@ class Items {
   getEnclosedOrCrossed(left, top, right, bottom) {
     return this.index.getEnclosedOrCrossed(left, top, right, bottom);
   }
-  getFramesEnclosedOrCrossed(left, top, right, bottom) {
-    return this.index.getFramesEnclosedOrCrossed(left, top, right, bottom);
+  getGroupItemsEnclosedOrCrossed(left, top, right, bottom) {
+    return this.index.getEnclosedOrCrossed(left, top, right, bottom).filter((item) => item instanceof BaseItem && item.getChildrenIds());
   }
   getUnderPoint(point5, tolerance = 5) {
     return this.index.getUnderPoint(point5, tolerance);
@@ -52258,9 +52199,9 @@ class Items {
     const { left, top, right, bottom } = this.view.getMbr();
     return this.index.getItemsEnclosedOrCrossed(left, top, right, bottom);
   }
-  getFramesInView() {
+  getGroupItemsInView() {
     const { left, top, right, bottom } = this.view.getMbr();
-    return this.index.getFramesEnclosedOrCrossed(left, top, right, bottom);
+    return this.getGroupItemsEnclosedOrCrossed(left, top, right, bottom);
   }
   getComments() {
     return this.index.getComments();
@@ -52298,11 +52239,7 @@ class Items {
     if (nearest) {
       return [nearest];
     }
-    const frames = this.index.listFrames().filter((frame) => frame.isTextUnderPoint(this.pointer.point));
-    if (frames.length === 0 && unmodifiedSize !== 16) {
-      return this.getUnderPointer(16);
-    }
-    return frames;
+    return [];
   }
   getNearPointer(maxDistance = 100, maxItems = 10, filter = () => true) {
     return this.index.getNearestTo(this.pointer.point, maxItems, filter, maxDistance);
@@ -52353,41 +52290,39 @@ class Items {
     });
   }
   render(context) {
-    const frames = this.getFramesInView();
-    const rest = this.getItemsInView();
-    const frameChildrenIds = [];
-    frames.forEach((frame) => {
-      frame.renderPath(context);
-      frame.getChildrenIds().map((id) => this.getById(id)).forEach((child) => {
-        if (child) {
-          frameChildrenIds.push(child.getId());
-          child.render(context);
-        }
-      });
+    const items = this.getItemsInView();
+    items.forEach((item) => {
+      if (item.parent !== "Board") {
+        item.render(context);
+      }
     });
-    rest.filter((item) => !frameChildrenIds.includes(item.getId())).forEach((item) => item.render(context));
-    frames.forEach((frame) => frame.renderBorders(context));
-    frames.forEach((frame) => frame.renderName(context));
   }
   renderHTML(documentFactory) {
-    const frames = this.getFramesInView();
-    const rest = this.getItemsInView();
-    return this.getHTML(documentFactory, frames, rest);
+    const items = this.getItemsInView();
+    return this.getHTML(documentFactory, items);
   }
   getWholeHTML(documentFactory) {
-    const frames = this.listFrames();
-    const rest = this.listAll();
-    return this.getHTML(documentFactory, frames, rest);
+    const items = this.listAll();
+    return this.getHTML(documentFactory, items);
   }
-  getHTML(documentFactory, frames, rest) {
-    const lowestCoordinates = [...frames, ...rest].map((item) => item.getMbr()).reduce((acc, mbr) => ({
+  getHTML(documentFactory, items) {
+    const lowestCoordinates = items.map((item) => item.getMbr()).reduce((acc, mbr) => ({
       left: Math.min(acc.left, mbr.left),
       top: Math.min(acc.top, mbr.top)
     }), { left: 0, top: 0 });
+    const groups = [];
+    const rest = [];
+    items.forEach((item) => {
+      if ("getChildrenIds" in item && item.getChildrenIds()) {
+        groups.push(item);
+      } else {
+        rest.push(item);
+      }
+    });
     const childrenMap = new Map;
-    const framesHTML = frames.map((frame) => {
-      frame.getChildrenIds().forEach((childId) => childrenMap.set(childId, frame.getId()));
-      const html4 = frame.renderHTML(documentFactory);
+    const GroupsHTML = groups.map((group) => {
+      group.getChildrenIds().forEach((childId) => childrenMap.set(childId, group.getId()));
+      const html4 = group.renderHTML(documentFactory);
       translateElementBy(html4, -lowestCoordinates.left, -lowestCoordinates.top);
       return html4;
     });
@@ -52406,15 +52341,15 @@ class Items {
     });
     for (const item of restHTML) {
       const parentFrameId = childrenMap.get(item.id);
-      const frame = framesHTML.find((el) => parentFrameId !== undefined && el.id === parentFrameId);
-      if (frame) {
-        positionRelatively(item, frame);
-        frame.appendChild(item);
+      const group = GroupsHTML.find((el) => parentFrameId !== undefined && el.id === parentFrameId);
+      if (group) {
+        positionRelatively(item, group);
+        group.appendChild(item);
       }
     }
     let result = "";
-    for (const frame of framesHTML) {
-      result += frame.outerHTML;
+    for (const group of GroupsHTML) {
+      result += group.outerHTML;
     }
     for (const item of restHTML) {
       if (!childrenMap.get(item.id)) {
@@ -53059,24 +52994,24 @@ class Board {
   }
   handleNesting(items) {
     const arrayed = Array.isArray(items) ? items : [items];
-    const framesMap = new Map;
+    const groupsMap = new Map;
     arrayed.forEach((item) => {
       const itemCenter = item.getMbr().getCenter();
-      const frame = this.items.getFramesInView().filter((frame2) => frame2.handleNesting(item)).reduce((acc, frame2) => {
-        if (!acc || frame2.getDistanceToPoint(itemCenter) > acc.getDistanceToPoint(itemCenter)) {
-          acc = frame2;
+      const groupItem = this.items.getGroupItemsInView().filter((groupItem2) => groupItem2.handleNesting(item)).reduce((acc, groupItem2) => {
+        if (!acc || groupItem2.getDistanceToPoint(itemCenter) > acc.getDistanceToPoint(itemCenter)) {
+          acc = groupItem2;
         }
         return acc;
       }, undefined);
-      if (frame) {
-        if (!framesMap.has(frame)) {
-          framesMap.set(frame, []);
+      if (groupItem) {
+        if (!groupsMap.has(groupItem)) {
+          groupsMap.set(groupItem, []);
         }
-        framesMap.get(frame)?.push(item);
+        groupsMap.get(groupItem)?.push(item);
       }
     });
-    framesMap.forEach((items2, frame) => {
-      frame.addChildItems(items2);
+    groupsMap.forEach((items2, group) => {
+      group.addChildItems(items2);
     });
   }
   createItem(id, data) {
@@ -53789,7 +53724,7 @@ class Board {
     return this.items.findById(item.getId()) !== undefined;
   }
   getMaxFrameSerial() {
-    const existingNames = this.items.listFrames().map((frame) => frame.text.getTextString().length === 0 ? frame.text.placeholderText : frame.text.getTextString());
+    const existingNames = this.items.listGroupItems().map((frame) => frame.getRichText()?.getTextString().length === 0 ? frame.getRichText()?.placeholderText || "" : frame.getRichText()?.getTextString() || "");
     return existingNames.map((name) => name.match(/^Frame (\d+)$/)).filter((match) => match !== null).map((match) => parseInt(match[1], 10)).reduce((max2, num) => Math.max(max2, num), 0);
   }
   setInterfaceType(interfaceType) {