microboard-temp 0.10.2 → 0.11.0

package/dist/cjs/browser.js

@@ -1230,6 +1230,24 @@ class Matrix {
     const { translateX, translateY, scaleX, scaleY, shearX, shearY } = matrix;
     return this.translateX === translateX && this.translateY === translateY && this.scaleX === scaleX && this.scaleY === scaleY && this.shearX === shearX && this.shearY === shearY;
   }
+  composeWith(parent) {
+    const result = parent.copy();
+    result.multiplyByMatrix(this);
+    return result;
+  }
+  toLocalOf(parent) {
+    const result = parent.getInverse();
+    result.multiplyByMatrix(this);
+    return result;
+  }
+  applyInverseLinear(dx, dy) {
+    const { scaleX, scaleY, shearX, shearY } = this;
+    const denom = scaleX * scaleY - shearX * shearY;
+    return {
+      x: (scaleY * dx - shearX * dy) / denom,
+      y: (-shearY * dx + scaleX * dy) / denom
+    };
+  }
 }
 
 // src/Subject.ts
@@ -17966,6 +17984,15 @@ class Transformation {
   getRotation() {
     return this.rotate;
   }
+  setLocalMatrix(matrix) {
+    this.previous = this._matrix.copy();
+    this._matrix = matrix.copy();
+    this.subject.publish(this, {
+      class: "Transformation",
+      method: "applyMatrix",
+      items: [{ id: this.id, matrix: this.getMatrixData() }]
+    });
+  }
   setLocal(xOrData, y, scaleX, scaleY) {
     this.previous = this._matrix.copy();
     if (typeof xOrData === "object") {
@@ -20888,6 +20915,24 @@ class LayeredIndex {
 }
 
 // src/SpatialIndex/SpacialIndex.ts
+function worldBoundsToLocal(container, left, top, right, bottom) {
+  const inv = container.getWorldMatrix().getInverse();
+  const corners = [
+    new Point(left, top),
+    new Point(right, top),
+    new Point(right, bottom),
+    new Point(left, bottom)
+  ];
+  for (const c of corners)
+    inv.apply(c);
+  return {
+    left: Math.min(corners[0].x, corners[1].x, corners[2].x, corners[3].x),
+    top: Math.min(corners[0].y, corners[1].y, corners[2].y, corners[3].y),
+    right: Math.max(corners[0].x, corners[1].x, corners[2].x, corners[3].x),
+    bottom: Math.max(corners[0].y, corners[1].y, corners[2].y, corners[3].y)
+  };
+}
+
 class SpatialIndex {
   subject = new Subject;
   itemsArray = [];
@@ -20939,6 +20984,8 @@ class SpatialIndex {
     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);
@@ -20953,10 +21000,20 @@ class SpatialIndex {
     this.subject.publish(this.items);
   }
   copy() {
-    return this.getItemsWithIncludedChildren(this.itemsArray).map((item) => ({
-      ...item.serialize(true),
-      id: item.getId()
-    }));
+    return this.getItemsWithIncludedChildren(this.itemsArray).map((item) => {
+      const serialized = { ...item.serialize(true), id: item.getId() };
+      if (item.parent !== "Board" && item.getWorldMatrix) {
+        const worldMatrix = item.getWorldMatrix();
+        serialized.transformation = {
+          ...serialized.transformation,
+          translateX: worldMatrix.translateX,
+          translateY: worldMatrix.translateY,
+          scaleX: worldMatrix.scaleX,
+          scaleY: worldMatrix.scaleY
+        };
+      }
+      return serialized;
+    });
   }
   getItemsWithIncludedChildren(items) {
     return items.flatMap((item) => {
@@ -21122,7 +21179,8 @@ class SpatialIndex {
     const children = [];
     const clearItems = items.filter((item) => {
       if ("index" in item && item.index) {
-        children.push(...item.index.getEnclosed(left, top, right, bottom));
+        const local = worldBoundsToLocal(item, left, top, right, bottom);
+        children.push(...item.index.getEnclosed(local.left, local.top, local.right, local.bottom));
         if (!item.getMbr().isEnclosedBy(mbr)) {
           return false;
         }
@@ -21137,7 +21195,8 @@ class SpatialIndex {
     const children = [];
     const clearItems = items.filter((item) => {
       if ("index" in item && item.index) {
-        children.push(...item.index.getEnclosedOrCrossed(left, top, right, bottom));
+        const local = worldBoundsToLocal(item, left, top, right, bottom);
+        children.push(...item.index.getEnclosedOrCrossed(local.left, local.top, local.right, local.bottom));
         if (!item.getMbr().isEnclosedOrCrossedBy(mbr)) {
           return false;
         }
@@ -21151,7 +21210,9 @@ class SpatialIndex {
     const children = [];
     const clearItems = items.filter((item) => {
       if ("index" in item && item.index) {
-        children.push(...item.index.getUnderPoint(point3, tolerance));
+        const localPt = new Point(point3.x, point3.y);
+        item.getWorldMatrix().getInverse().apply(localPt);
+        children.push(...item.index.getUnderPoint(localPt, tolerance));
         if (!item.getMbr().isUnderPoint(point3)) {
           return false;
         }
@@ -21166,7 +21227,8 @@ class SpatialIndex {
     const children = [];
     const clearItems = items.filter((item) => {
       if ("index" in item && item.index) {
-        children.push(...item.index.getEnclosedOrCrossed(left, top, right, bottom));
+        const local = worldBoundsToLocal(item, left, top, right, bottom);
+        children.push(...item.index.getEnclosedOrCrossed(local.left, local.top, local.right, local.bottom));
         if (!item.getMbr().isEnclosedOrCrossedBy(mbr)) {
           return false;
         }
@@ -21629,6 +21691,49 @@ class SimpleSpatialIndex {
 }
 
 // src/Items/BaseItem/BaseItem.ts
+function toLocalTransformOp(op, containerMatrix, itemId) {
+  switch (op.method) {
+    case "applyMatrix": {
+      const converted = op.items.map((item) => {
+        const local = containerMatrix.applyInverseLinear(item.matrix.translateX, item.matrix.translateY);
+        return { ...item, matrix: { ...item.matrix, translateX: local.x, translateY: local.y } };
+      });
+      return { ...op, items: converted };
+    }
+    case "translateBy": {
+      const local = containerMatrix.applyInverseLinear(op.x, op.y);
+      return { ...op, x: local.x, y: local.y };
+    }
+    case "translateTo": {
+      const pt = new Point(op.x, op.y);
+      containerMatrix.getInverse().apply(pt);
+      return { ...op, x: pt.x, y: pt.y };
+    }
+    case "scaleTo": {
+      return { ...op, x: op.x / containerMatrix.scaleX, y: op.y / containerMatrix.scaleY };
+    }
+    case "scaleByTranslateBy": {
+      const local = containerMatrix.applyInverseLinear(op.translate.x, op.translate.y);
+      return { ...op, translate: { x: local.x, y: local.y } };
+    }
+    case "scaleByRelativeTo":
+    case "scaleToRelativeTo": {
+      const pt = new Point(op.point.x, op.point.y);
+      containerMatrix.getInverse().apply(pt);
+      return { ...op, point: pt };
+    }
+    case "transformMany": {
+      if (!itemId || !op.items[itemId])
+        return op;
+      const subOp = op.items[itemId];
+      const localSubOp = toLocalTransformOp(subOp, containerMatrix);
+      return { ...op, items: { ...op.items, [itemId]: localSubOp } };
+    }
+    default:
+      return op;
+  }
+}
+
 class BaseItem extends Mbr {
   defaultItemData;
   transformation;
@@ -21673,6 +21778,16 @@ class BaseItem extends Mbr {
   getId() {
     return this.id;
   }
+  getWorldMatrix() {
+    if (this.parent === "Board") {
+      return this.transformation.toMatrix();
+    }
+    const container = this.board.items.getById(this.parent);
+    if (!container) {
+      return this.transformation.toMatrix();
+    }
+    return this.transformation.toMatrix().composeWith(container.getWorldMatrix());
+  }
   setId(id) {
     this.id = id;
     this.transformation.setId(id);
@@ -21747,16 +21862,35 @@ class BaseItem extends Mbr {
   getMbr() {
     return new Mbr(this.left, this.top, this.right, this.bottom);
   }
+  getWorldMbr() {
+    if (this.parent === "Board" || !this.parent || !this.board?.items) {
+      return this.getMbr();
+    }
+    const worldMatrix = this.getWorldMatrix();
+    const local = this.getMbr();
+    const corners = [
+      new Point(local.left, local.top),
+      new Point(local.right, local.top),
+      new Point(local.right, local.bottom),
+      new Point(local.left, local.bottom)
+    ];
+    for (const c of corners)
+      worldMatrix.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));
+  }
   applyAddChildren(childIds) {
     if (!this.index) {
       return;
     }
+    const containerWorldMatrix = this.getWorldMatrix();
     childIds.forEach((childId) => {
       const foundItem = this.board.items.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
         if (!this.index?.getById(childId) && foundItem) {
+          const localMatrix = foundItem.transformation.toMatrix().toLocalOf(containerWorldMatrix);
           this.board.items.index.remove(foundItem);
           foundItem.parent = this.getId();
+          foundItem.transformation.setLocalMatrix(localMatrix);
           this.index?.insert(foundItem);
         }
       }
@@ -21769,12 +21903,15 @@ class BaseItem extends Mbr {
     if (!this.index) {
       return;
     }
+    const containerWorldMatrix = this.getWorldMatrix();
     childIds.forEach((childId) => {
       const foundItem = this.index?.getById(childId);
       if (this.parent !== childId && this.getId() !== childId) {
         if (foundItem) {
+          const worldMatrix = foundItem.transformation.toMatrix().composeWith(containerWorldMatrix);
           this.index?.remove(foundItem);
           foundItem.parent = "Board";
+          foundItem.transformation.setLocalMatrix(worldMatrix);
           this.board.items.index.insert(foundItem);
         }
       }
@@ -21886,9 +22023,17 @@ class BaseItem extends Mbr {
   apply(op) {
     op = op;
     switch (op.class) {
-      case "Transformation":
-        this.transformation.apply(op);
+      case "Transformation": {
+        let transformOp = op;
+        if (this.parent !== "Board") {
+          const container = this.board.items.getById(this.parent);
+          if (container?.transformation) {
+            transformOp = toLocalTransformOp(transformOp, container.getWorldMatrix(), this.id);
+          }
+        }
+        this.transformation.apply(transformOp);
         break;
+      }
       case "LinkTo":
         this.linkTo.apply(op);
         break;
@@ -36693,14 +36838,20 @@ function getControlPoint(data, findItem2) {
     }
   }
 }
+function getItemWorldMatrix(item) {
+  if (item instanceof BaseItem && item.parent !== "Board") {
+    return item.getWorldMatrix();
+  }
+  return item.transformation?.toMatrix() ?? new Matrix;
+}
 function toRelativePoint(point5, item) {
-  const inverse = item.transformation ? item.transformation.getInverse().toMatrix() : new Matrix;
+  const inverse = getItemWorldMatrix(item).getInverse();
   point5 = point5.copy();
   point5.transform(inverse);
   return point5;
 }
 function fromRelativePoint(relativePoint, item, edge) {
-  const matrix = item.transformation?.toMatrix() ?? new Matrix;
+  const matrix = getItemWorldMatrix(item);
   const point5 = relativePoint.copy();
   point5.transform(matrix);
   if (item instanceof RichText || item instanceof AINode) {
@@ -41175,7 +41326,13 @@ class Frame2 extends BaseItem {
       return;
     }
     this.renderPath(context);
-    super.render(context);
+    const ctx = context.ctx;
+    ctx.save();
+    this.transformation.applyToContext(ctx);
+    for (const child of this.index.list()) {
+      child.render(context);
+    }
+    ctx.restore();
     this.renderBorders(context);
     this.renderName(context);
   }
@@ -43283,25 +43440,24 @@ function douglasPeucker(points, epsilon2) {
 // src/Items/Group/Group.ts
 class Group extends BaseItem {
   events;
-  children;
   linkTo;
   itemType = "Group";
   parent = "Board";
   transformation;
   subject = new Subject;
-  mbr = new Mbr;
   transformationRenderBlock = undefined;
   constructor(board, events, children = [], id = "") {
-    super(board, id);
+    super(board, id, undefined, true);
     this.events = events;
-    this.children = children;
     this.linkTo = new LinkTo(this.id, this.events);
     this.transformation = new Transformation(this.id, this.events);
-    this.children = children;
     this.transformation.subject.subscribe(() => {
       this.updateMbr();
       this.subject.publish(this);
     });
+    if (children.length > 0) {
+      this.applyAddChildren(children);
+    }
   }
   isClosed() {
     return false;
@@ -43309,45 +43465,17 @@ class Group extends BaseItem {
   getRichText() {
     return null;
   }
-  addChild(childId) {
-    this.emit({
-      class: "Group",
-      method: "addChild",
-      item: [this.getId()],
-      childId
-    });
-  }
-  applyAddChild(childId) {
-    if (!this.children.includes(childId)) {
-      this.children.push(childId);
-      this.updateMbr();
-      this.subject.publish(this);
-    }
-  }
-  applyRemoveChild(childId) {
-    this.children = this.children.filter((currChild) => currChild !== childId);
-    this.updateMbr();
-    this.subject.publish(this);
-  }
-  removeChild(childId) {
-    this.emit({
-      class: "Group",
-      method: "removeChild",
-      item: [this.getId()],
-      childId
-    });
-  }
-  emitRemoveChild(child) {
-    this.removeChild(child.getId());
-    child.parent = "Board";
-  }
   apply(op) {
     switch (op.class) {
       case "Group":
         if (op.method === "addChild") {
-          this.applyAddChild(op.childId);
+          this.applyAddChildren([op.childId]);
         } else if (op.method === "removeChild") {
-          this.applyRemoveChild(op.childId);
+          this.applyRemoveChildren([op.childId]);
+        } else if (op.method === "addChildren") {
+          this.applyAddChildren(op.newData.childIds);
+        } else if (op.method === "removeChildren") {
+          this.applyRemoveChildren(op.newData.childIds);
         }
         break;
       case "Transformation":
@@ -43372,24 +43500,69 @@ class Group extends BaseItem {
     this.transformation.setId(id);
     return this;
   }
+  getMbr() {
+    const children = this.index.list();
+    if (children.length === 0) {
+      return new Mbr(this.left, this.top, this.right, this.bottom);
+    }
+    const groupWorldMatrix = this.getWorldMatrix();
+    let left = Number.MAX_SAFE_INTEGER;
+    let top = Number.MAX_SAFE_INTEGER;
+    let right = Number.MIN_SAFE_INTEGER;
+    let bottom = Number.MIN_SAFE_INTEGER;
+    for (const child of children) {
+      const childLocalMbr = child.getMbr();
+      const corners = [
+        { x: childLocalMbr.left, y: childLocalMbr.top },
+        { x: childLocalMbr.right, y: childLocalMbr.top },
+        { x: childLocalMbr.right, y: childLocalMbr.bottom },
+        { x: childLocalMbr.left, y: childLocalMbr.bottom }
+      ];
+      for (const corner of corners) {
+        groupWorldMatrix.apply(corner);
+        if (corner.x < left)
+          left = corner.x;
+        if (corner.y < top)
+          top = corner.y;
+        if (corner.x > right)
+          right = corner.x;
+        if (corner.y > bottom)
+          bottom = corner.y;
+      }
+    }
+    const mbr = new Mbr(left, top, right, bottom);
+    this.left = left;
+    this.top = top;
+    this.right = right;
+    this.bottom = bottom;
+    return mbr;
+  }
+  updateMbr() {
+    this.getMbr();
+  }
+  getChildrenIds() {
+    return this.index.list().map((item) => item.getId());
+  }
+  getChildren() {
+    return this.index.list();
+  }
+  getLinkTo() {
+    return this.linkTo.link;
+  }
   serialize() {
     return {
       itemType: "Group",
-      children: this.children,
+      children: this.getChildrenIds(),
       transformation: this.transformation.serialize()
     };
   }
   deserialize(data) {
-    if (data.children) {
-      data.children.forEach((childId) => {
-        this.applyAddChild(childId);
-        const item = this.board.items.getById(childId);
-        if (item) {
-          item.parent = this.getId();
-        }
-      });
+    if (data.transformation) {
+      this.transformation.deserialize(data.transformation);
+    }
+    if (data.children && data.children.length > 0) {
+      this.applyAddChildren(data.children);
     }
-    this.transformation.deserialize(data.transformation);
     this.subject.publish(this);
     return this;
   }
@@ -43399,99 +43572,25 @@ class Group extends BaseItem {
   getIntersectionPoints(segment) {
     const lines = this.getMbr().getLines();
     const initPoints = [];
-    const points = lines.reduce((acc, line) => {
+    return lines.reduce((acc, line) => {
       const intersections = line.getIntersectionPoints(segment);
       if (intersections.length > 0) {
         acc.push(...intersections);
       }
       return acc;
     }, initPoints);
-    return points;
-  }
-  getMbr() {
-    const mbr = new Mbr;
-    let left = Number.MAX_SAFE_INTEGER;
-    let top = Number.MAX_SAFE_INTEGER;
-    let right = Number.MIN_SAFE_INTEGER;
-    let bottom = Number.MIN_SAFE_INTEGER;
-    const mbrs = this.children.flatMap((childId) => {
-      const item = this.board.items.getById(childId);
-      if (!item) {
-        return [];
-      }
-      const mbr2 = item.getMbr();
-      if (!mbr2) {
-        return [];
-      }
-      if (left > mbr2.left) {
-        left = mbr2.left;
-      }
-      if (top > mbr2.top) {
-        top = mbr2.top;
-      }
-      if (right < mbr2.right) {
-        right = mbr2.right;
-      }
-      if (bottom < mbr2.bottom) {
-        bottom = mbr2.bottom;
-      }
-      return [mbr2];
-    });
-    if (mbrs.length) {
-      mbr.combine(mbrs);
-      mbr.left = left !== Number.MAX_SAFE_INTEGER ? left : 0;
-      mbr.top = top !== Number.MAX_SAFE_INTEGER ? top : 0;
-      mbr.right = right !== Number.MIN_SAFE_INTEGER ? right : 0;
-      mbr.bottom = bottom !== Number.MIN_SAFE_INTEGER ? bottom : 0;
-      this.left = mbr.left;
-      this.bottom = mbr.bottom;
-      this.right = mbr.right;
-      this.top = mbr.top;
-    }
-    return mbr;
-  }
-  getChildrenIds() {
-    return this.children;
-  }
-  getChildren() {
-    return this.children.map((itemId) => this.board.items.getById(itemId)).filter((item) => item !== undefined);
-  }
-  updateMbr() {
-    const rect = this.getMbr();
-    this.mbr = rect;
-    this.mbr.borderColor = "transparent";
-  }
-  setBoard(board) {
-    this.board = board;
-  }
-  setChildren(items) {
-    items.forEach((itemId) => {
-      this.addChild(itemId);
-      const item = this.board.items.getById(itemId);
-      if (item) {
-        item.parent = this.getId();
-      }
-    });
-    this.updateMbr();
-  }
-  removeChildren() {
-    this.children.forEach((itemId) => {
-      this.removeChild(itemId);
-      const item = this.board.items.getById(itemId);
-      if (item) {
-        item.parent = this.parent;
-      }
-    });
-    this.updateMbr();
-  }
-  getLinkTo() {
-    return this.linkTo.link;
   }
   render(context) {
     if (this.transformationRenderBlock) {
       return;
     }
-    this.mbr.render(context);
+    const ctx = context.ctx;
+    ctx.save();
+    this.transformation.applyToContext(ctx);
+    for (const child of this.index.list()) {
+      child.render(context);
+    }
+    ctx.restore();
   }
   renderHTML(documentFactory) {
     return documentFactory.createElement("div");
@@ -46208,13 +46307,13 @@ class AlignmentHelper {
     return baseThickness / (zoom / 100);
   }
   combineMBRs(items) {
+    const worldMbr = (item) => item instanceof BaseItem ? item.getWorldMbr() : item.getMbr();
     return items.reduce((acc, item, i) => {
       if (i === 0) {
         return acc;
       }
-      const itemMbr = item.getPathMbr();
-      return acc.combine(itemMbr);
-    }, items[0].getMbr());
+      return acc.combine(worldMbr(item));
+    }, worldMbr(items[0]));
   }
   checkAlignment(movingItem, excludeItems = []) {
     if (!Array.isArray(movingItem) && movingItem.itemType === "Comment") {
@@ -51908,8 +52007,9 @@ class SelectionItems {
     if (items.length === 0) {
       return;
     }
-    const mbr = items[0].getMbr();
-    items.slice(1).forEach((item) => mbr.combine(item.getMbr()));
+    const worldMbr = (item) => item instanceof BaseItem ? item.getWorldMbr() : item.getMbr();
+    const mbr = worldMbr(items[0]);
+    items.slice(1).forEach((item) => mbr.combine(worldMbr(item)));
     return mbr;
   }
 }
@@ -52118,18 +52218,27 @@ function handleMultipleItemsResize({
 }) {
   const { matrix } = resize;
   const result = [];
-  const items = itemsToResize ? itemsToResize : board.selection.items.list();
+  const rawItems = itemsToResize ? itemsToResize : board.selection.items.list();
   board.items.getComments().forEach((comment2) => {
-    if (items.some((item) => item.getId() === comment2.getItemToFollow())) {
-      items.push(comment2);
+    if (rawItems.some((item) => item.getId() === comment2.getItemToFollow())) {
+      rawItems.push(comment2);
     }
   });
+  const selectedIds = new Set(rawItems.map((i) => i.getId()));
+  const items = rawItems.filter((item) => item.parent === "Board" || !selectedIds.has(item.parent));
   for (const item of items) {
-    let itemX = item.getMbr().left;
-    let itemY = item.getMbr().top;
+    const worldMbr = item instanceof BaseItem ? item.getWorldMbr() : item.getMbr();
+    let itemX = worldMbr.left;
+    let itemY = worldMbr.top;
     if (item.itemType === "Drawing") {
-      itemX = item.transformation.getMatrixData().translateX;
-      itemY = item.transformation.getMatrixData().translateY;
+      if (item instanceof BaseItem && item.parent !== "Board") {
+        const worldMatrix = item.getWorldMatrix();
+        itemX = worldMatrix.translateX;
+        itemY = worldMatrix.translateY;
+      } else {
+        itemX = item.transformation.getMatrixData().translateX;
+        itemY = item.transformation.getMatrixData().translateY;
+      }
     }
     const deltaX = itemX - initMbr.left;
     const translateX = deltaX * matrix.scaleX - deltaX + matrix.translateX;
@@ -53053,10 +53162,6 @@ class BoardSelection {
     if (!this.board.events) {
       return;
     }
-    if (operation.method === "transformMany") {
-      console.error("[DEBUG] transformMany emitted!", JSON.stringify(operation));
-      console.trace("[DEBUG] transformMany stack trace");
-    }
     const command = createCommand(this.board, operation);
     command.apply();
     this.board.events.emit(operation, command);
@@ -53599,17 +53704,12 @@ class BoardSelection {
     const addItem = (itemId) => {
       items.push({ id: itemId, matrix: { translateX: x, translateY: y, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 } });
     };
-    const tryToAddFrameChildren = (selectedItem) => {
-      if (!("index" in selectedItem) || !selectedItem.index) {
+    const selectedIds = new Set(unselectedItem ? [unselectedItem.getId()] : this.board.selection.list().map((i) => i.getId()));
+    const addWithComments = (item) => {
+      if (item.parent !== "Board" && selectedIds.has(item.parent)) {
         return;
       }
-      for (const childId of selectedItem.getChildrenIds()) {
-        addItem(childId);
-      }
-    };
-    const addWithComments = (item) => {
       addItem(item.getId());
-      tryToAddFrameChildren(item);
       const followedComments = this.board.items.getComments().filter((comment2) => comment2.getItemToFollow() === item.getId());
       for (const comment2 of followedComments) {
         addItem(comment2.getId());
@@ -54441,6 +54541,28 @@ class Board {
       item: [item.getId()]
     });
   }
+  group(items) {
+    const id = this.getNewItemId();
+    const groupData = {
+      itemType: "Group",
+      children: items.map((i) => i.getId()),
+      transformation: { translateX: 0, translateY: 0, scaleX: 1, scaleY: 1, shearX: 0, shearY: 0 }
+    };
+    this.emit({
+      class: "Board",
+      method: "addLockedGroup",
+      item: id,
+      data: groupData
+    });
+    return this.items.getById(id);
+  }
+  ungroup(group) {
+    this.emit({
+      class: "Board",
+      method: "removeLockedGroup",
+      item: [group.getId()]
+    });
+  }
   getByZIndex(index2) {
     return this.index.getByZIndex(index2);
   }