microboard-temp 0.4.63 → 0.4.65

package/dist/cjs/browser.js

@@ -18828,24 +18828,6 @@ class FrameCommand {
             ...this.operation
           };
         });
-      default:
-        return mapItemsByOperation(frame, (item) => {
-          const op = this.operation;
-          let newData = {};
-          if (op.prevData) {
-            newData = { ...op.prevData };
-          } else {
-            Object.keys(op.newData).forEach((key) => {
-              if (item[key]) {
-                newData[key] = item[key];
-              }
-            });
-          }
-          return {
-            ...op,
-            newData
-          };
-        });
     }
   }
 }
@@ -20825,6 +20807,11 @@ class SpatialIndex {
     return this.getById(item.parent);
   }
   moveToZIndex(item, zIndex) {
+    if (item.parent !== "Board") {
+      this.getById(item.parent)?.index?.moveToZIndex(item, zIndex);
+      this.subject.publish(this.items);
+      return;
+    }
     const index2 = this.itemsArray.indexOf(item);
     this.itemsArray.splice(index2, 1);
     this.itemsArray.splice(zIndex, 0, item);
@@ -20841,6 +20828,13 @@ class SpatialIndex {
     this.itemsArray.forEach(this.change.bind(this));
   }
   sendToBack(item, shouldPublish = true) {
+    if (item.parent !== "Board") {
+      this.getById(item.parent)?.index?.sendToBack(item);
+      if (shouldPublish) {
+        this.subject.publish(this.items);
+      }
+      return;
+    }
     const index2 = this.itemsArray.indexOf(item);
     this.itemsArray.splice(index2, 1);
     this.itemsArray.unshift(item);
@@ -20850,16 +20844,31 @@ class SpatialIndex {
     }
   }
   sendManyToBack(items) {
-    const newItems = [...items];
-    this.itemsArray.forEach((item) => {
-      if (!items.includes(item)) {
-        newItems.push(item);
+    const groups = this.splitItemsToGroups(items);
+    Object.entries(groups).forEach(([key, value]) => {
+      if (key !== "Board") {
+        this.getById(key)?.index?.sendManyToBack(value);
       }
     });
-    this.itemsArray = newItems;
-    this.itemsArray.forEach(this.change.bind(this));
+    if (groups["Board"]) {
+      const newItems = [...groups["Board"]];
+      this.itemsArray.forEach((item) => {
+        if (!groups["Board"].includes(item)) {
+          newItems.push(item);
+        }
+      });
+      this.itemsArray = newItems;
+      this.itemsArray.forEach(this.change.bind(this));
+    }
   }
   bringToFront(item, shouldPublish = true) {
+    if (item.parent !== "Board") {
+      this.getById(item.parent)?.index?.bringToFront(item);
+      if (shouldPublish) {
+        this.subject.publish(this.items);
+      }
+      return;
+    }
     const index2 = this.itemsArray.indexOf(item);
     this.itemsArray.splice(index2, 1);
     this.itemsArray.push(item);
@@ -20869,17 +20878,41 @@ class SpatialIndex {
     }
   }
   bringManyToFront(items) {
-    const newItems = [];
-    this.itemsArray.forEach((item) => {
-      if (!items.includes(item)) {
-        newItems.push(item);
+    const groups = this.splitItemsToGroups(items);
+    Object.entries(groups).forEach(([key, value]) => {
+      if (key !== "Board") {
+        this.getById(key)?.index?.bringManyToFront(value);
       }
     });
-    newItems.push(...items);
-    this.itemsArray = newItems;
-    this.itemsArray.forEach(this.change.bind(this));
+    if (groups["Board"]) {
+      const newItems = [];
+      this.itemsArray.forEach((item) => {
+        if (!groups["Board"].includes(item)) {
+          newItems.push(item);
+        }
+      });
+      newItems.push(...groups["Board"]);
+      this.itemsArray = newItems;
+      this.itemsArray.forEach(this.change.bind(this));
+    }
+  }
+  splitItemsToGroups(items) {
+    const groups = {};
+    for (const item of items) {
+      if (!groups[item.parent]) {
+        groups[item.parent] = [item];
+      } else {
+        groups[item.parent].push(item);
+      }
+    }
+    return groups;
   }
   moveSecondAfterFirst(first, second) {
+    if (first.parent !== "Board" && second.parent === first.parent) {
+      this.getById(first.parent)?.index?.moveSecondAfterFirst(first, second);
+      this.subject.publish(this.items);
+      return;
+    }
     const secondIndex = this.itemsArray.indexOf(second);
     this.itemsArray.splice(secondIndex, 1);
     const firstIndex = this.itemsArray.indexOf(first);
@@ -20889,6 +20922,11 @@ class SpatialIndex {
     this.subject.publish(this.items);
   }
   moveSecondBeforeFirst(first, second) {
+    if (first.parent !== "Board" && second.parent === first.parent) {
+      this.getById(first.parent)?.index?.moveSecondBeforeFirst(first, second);
+      this.subject.publish(this.items);
+      return;
+    }
     const secondIndex = this.itemsArray.indexOf(second);
     this.itemsArray.splice(secondIndex, 1);
     const firstIndex = this.itemsArray.indexOf(first);
@@ -53704,14 +53742,14 @@ class Board {
     const items = Array.from(itemsDiv.children).map((el) => this.parseHTML(el));
     this.index.clear();
     const createdConnectors = {};
-    const createdFrames = {};
+    const createdGroups = {};
     const addItem = (itemData) => {
       const item = this.createItem(itemData.id, itemData);
       if (item instanceof Connector2) {
         createdConnectors[itemData.id] = { item, itemData };
       }
-      if (item instanceof Frame2) {
-        createdFrames[item.getId()] = { item, itemData };
+      if ("index" in item && item.index) {
+        createdGroups[item.getId()] = { item, itemData };
       }
       this.index.insert(item);
       return item;
@@ -53729,8 +53767,8 @@ class Board {
       item.applyStartPoint(itemData.startPoint);
       item.applyEndPoint(itemData.endPoint);
     }
-    for (const key in createdFrames) {
-      const { item, itemData } = createdFrames[key];
+    for (const key in createdGroups) {
+      const { item, itemData } = createdGroups[key];
       item.applyAddChildren(itemData.children);
     }
   }

package/dist/cjs/index.js

@@ -18828,24 +18828,6 @@ class FrameCommand {
             ...this.operation
           };
         });
-      default:
-        return mapItemsByOperation(frame, (item) => {
-          const op = this.operation;
-          let newData = {};
-          if (op.prevData) {
-            newData = { ...op.prevData };
-          } else {
-            Object.keys(op.newData).forEach((key) => {
-              if (item[key]) {
-                newData[key] = item[key];
-              }
-            });
-          }
-          return {
-            ...op,
-            newData
-          };
-        });
     }
   }
 }
@@ -20825,6 +20807,11 @@ class SpatialIndex {
     return this.getById(item.parent);
   }
   moveToZIndex(item, zIndex) {
+    if (item.parent !== "Board") {
+      this.getById(item.parent)?.index?.moveToZIndex(item, zIndex);
+      this.subject.publish(this.items);
+      return;
+    }
     const index2 = this.itemsArray.indexOf(item);
     this.itemsArray.splice(index2, 1);
     this.itemsArray.splice(zIndex, 0, item);
@@ -20841,6 +20828,13 @@ class SpatialIndex {
     this.itemsArray.forEach(this.change.bind(this));
   }
   sendToBack(item, shouldPublish = true) {
+    if (item.parent !== "Board") {
+      this.getById(item.parent)?.index?.sendToBack(item);
+      if (shouldPublish) {
+        this.subject.publish(this.items);
+      }
+      return;
+    }
     const index2 = this.itemsArray.indexOf(item);
     this.itemsArray.splice(index2, 1);
     this.itemsArray.unshift(item);
@@ -20850,16 +20844,31 @@ class SpatialIndex {
     }
   }
   sendManyToBack(items) {
-    const newItems = [...items];
-    this.itemsArray.forEach((item) => {
-      if (!items.includes(item)) {
-        newItems.push(item);
+    const groups = this.splitItemsToGroups(items);
+    Object.entries(groups).forEach(([key, value]) => {
+      if (key !== "Board") {
+        this.getById(key)?.index?.sendManyToBack(value);
       }
     });
-    this.itemsArray = newItems;
-    this.itemsArray.forEach(this.change.bind(this));
+    if (groups["Board"]) {
+      const newItems = [...groups["Board"]];
+      this.itemsArray.forEach((item) => {
+        if (!groups["Board"].includes(item)) {
+          newItems.push(item);
+        }
+      });
+      this.itemsArray = newItems;
+      this.itemsArray.forEach(this.change.bind(this));
+    }
   }
   bringToFront(item, shouldPublish = true) {
+    if (item.parent !== "Board") {
+      this.getById(item.parent)?.index?.bringToFront(item);
+      if (shouldPublish) {
+        this.subject.publish(this.items);
+      }
+      return;
+    }
     const index2 = this.itemsArray.indexOf(item);
     this.itemsArray.splice(index2, 1);
     this.itemsArray.push(item);
@@ -20869,17 +20878,41 @@ class SpatialIndex {
     }
   }
   bringManyToFront(items) {
-    const newItems = [];
-    this.itemsArray.forEach((item) => {
-      if (!items.includes(item)) {
-        newItems.push(item);
+    const groups = this.splitItemsToGroups(items);
+    Object.entries(groups).forEach(([key, value]) => {
+      if (key !== "Board") {
+        this.getById(key)?.index?.bringManyToFront(value);
       }
     });
-    newItems.push(...items);
-    this.itemsArray = newItems;
-    this.itemsArray.forEach(this.change.bind(this));
+    if (groups["Board"]) {
+      const newItems = [];
+      this.itemsArray.forEach((item) => {
+        if (!groups["Board"].includes(item)) {
+          newItems.push(item);
+        }
+      });
+      newItems.push(...groups["Board"]);
+      this.itemsArray = newItems;
+      this.itemsArray.forEach(this.change.bind(this));
+    }
+  }
+  splitItemsToGroups(items) {
+    const groups = {};
+    for (const item of items) {
+      if (!groups[item.parent]) {
+        groups[item.parent] = [item];
+      } else {
+        groups[item.parent].push(item);
+      }
+    }
+    return groups;
   }
   moveSecondAfterFirst(first, second) {
+    if (first.parent !== "Board" && second.parent === first.parent) {
+      this.getById(first.parent)?.index?.moveSecondAfterFirst(first, second);
+      this.subject.publish(this.items);
+      return;
+    }
     const secondIndex = this.itemsArray.indexOf(second);
     this.itemsArray.splice(secondIndex, 1);
     const firstIndex = this.itemsArray.indexOf(first);
@@ -20889,6 +20922,11 @@ class SpatialIndex {
     this.subject.publish(this.items);
   }
   moveSecondBeforeFirst(first, second) {
+    if (first.parent !== "Board" && second.parent === first.parent) {
+      this.getById(first.parent)?.index?.moveSecondBeforeFirst(first, second);
+      this.subject.publish(this.items);
+      return;
+    }
     const secondIndex = this.itemsArray.indexOf(second);
     this.itemsArray.splice(secondIndex, 1);
     const firstIndex = this.itemsArray.indexOf(first);
@@ -53704,14 +53742,14 @@ class Board {
     const items = Array.from(itemsDiv.children).map((el) => this.parseHTML(el));
     this.index.clear();
     const createdConnectors = {};
-    const createdFrames = {};
+    const createdGroups = {};
     const addItem = (itemData) => {
       const item = this.createItem(itemData.id, itemData);
       if (item instanceof Connector2) {
         createdConnectors[itemData.id] = { item, itemData };
       }
-      if (item instanceof Frame2) {
-        createdFrames[item.getId()] = { item, itemData };
+      if ("index" in item && item.index) {
+        createdGroups[item.getId()] = { item, itemData };
       }
       this.index.insert(item);
       return item;
@@ -53729,8 +53767,8 @@ class Board {
       item.applyStartPoint(itemData.startPoint);
       item.applyEndPoint(itemData.endPoint);
     }
-    for (const key in createdFrames) {
-      const { item, itemData } = createdFrames[key];
+    for (const key in createdGroups) {
+      const { item, itemData } = createdGroups[key];
       item.applyAddChildren(itemData.children);
     }
   }

package/dist/cjs/node.js

@@ -21368,24 +21368,6 @@ class FrameCommand {
             ...this.operation
           };
         });
-      default:
-        return mapItemsByOperation(frame, (item) => {
-          const op = this.operation;
-          let newData = {};
-          if (op.prevData) {
-            newData = { ...op.prevData };
-          } else {
-            Object.keys(op.newData).forEach((key) => {
-              if (item[key]) {
-                newData[key] = item[key];
-              }
-            });
-          }
-          return {
-            ...op,
-            newData
-          };
-        });
     }
   }
 }
@@ -23297,6 +23279,11 @@ class SpatialIndex {
     return this.getById(item.parent);
   }
   moveToZIndex(item, zIndex) {
+    if (item.parent !== "Board") {
+      this.getById(item.parent)?.index?.moveToZIndex(item, zIndex);
+      this.subject.publish(this.items);
+      return;
+    }
     const index2 = this.itemsArray.indexOf(item);
     this.itemsArray.splice(index2, 1);
     this.itemsArray.splice(zIndex, 0, item);
@@ -23313,6 +23300,13 @@ class SpatialIndex {
     this.itemsArray.forEach(this.change.bind(this));
   }
   sendToBack(item, shouldPublish = true) {
+    if (item.parent !== "Board") {
+      this.getById(item.parent)?.index?.sendToBack(item);
+      if (shouldPublish) {
+        this.subject.publish(this.items);
+      }
+      return;
+    }
     const index2 = this.itemsArray.indexOf(item);
     this.itemsArray.splice(index2, 1);
     this.itemsArray.unshift(item);
@@ -23322,16 +23316,31 @@ class SpatialIndex {
     }
   }
   sendManyToBack(items) {
-    const newItems = [...items];
-    this.itemsArray.forEach((item) => {
-      if (!items.includes(item)) {
-        newItems.push(item);
+    const groups = this.splitItemsToGroups(items);
+    Object.entries(groups).forEach(([key, value]) => {
+      if (key !== "Board") {
+        this.getById(key)?.index?.sendManyToBack(value);
       }
     });
-    this.itemsArray = newItems;
-    this.itemsArray.forEach(this.change.bind(this));
+    if (groups["Board"]) {
+      const newItems = [...groups["Board"]];
+      this.itemsArray.forEach((item) => {
+        if (!groups["Board"].includes(item)) {
+          newItems.push(item);
+        }
+      });
+      this.itemsArray = newItems;
+      this.itemsArray.forEach(this.change.bind(this));
+    }
   }
   bringToFront(item, shouldPublish = true) {
+    if (item.parent !== "Board") {
+      this.getById(item.parent)?.index?.bringToFront(item);
+      if (shouldPublish) {
+        this.subject.publish(this.items);
+      }
+      return;
+    }
     const index2 = this.itemsArray.indexOf(item);
     this.itemsArray.splice(index2, 1);
     this.itemsArray.push(item);
@@ -23341,17 +23350,41 @@ class SpatialIndex {
     }
   }
   bringManyToFront(items) {
-    const newItems = [];
-    this.itemsArray.forEach((item) => {
-      if (!items.includes(item)) {
-        newItems.push(item);
+    const groups = this.splitItemsToGroups(items);
+    Object.entries(groups).forEach(([key, value]) => {
+      if (key !== "Board") {
+        this.getById(key)?.index?.bringManyToFront(value);
       }
     });
-    newItems.push(...items);
-    this.itemsArray = newItems;
-    this.itemsArray.forEach(this.change.bind(this));
+    if (groups["Board"]) {
+      const newItems = [];
+      this.itemsArray.forEach((item) => {
+        if (!groups["Board"].includes(item)) {
+          newItems.push(item);
+        }
+      });
+      newItems.push(...groups["Board"]);
+      this.itemsArray = newItems;
+      this.itemsArray.forEach(this.change.bind(this));
+    }
+  }
+  splitItemsToGroups(items) {
+    const groups = {};
+    for (const item of items) {
+      if (!groups[item.parent]) {
+        groups[item.parent] = [item];
+      } else {
+        groups[item.parent].push(item);
+      }
+    }
+    return groups;
   }
   moveSecondAfterFirst(first, second) {
+    if (first.parent !== "Board" && second.parent === first.parent) {
+      this.getById(first.parent)?.index?.moveSecondAfterFirst(first, second);
+      this.subject.publish(this.items);
+      return;
+    }
     const secondIndex = this.itemsArray.indexOf(second);
     this.itemsArray.splice(secondIndex, 1);
     const firstIndex = this.itemsArray.indexOf(first);
@@ -23361,6 +23394,11 @@ class SpatialIndex {
     this.subject.publish(this.items);
   }
   moveSecondBeforeFirst(first, second) {
+    if (first.parent !== "Board" && second.parent === first.parent) {
+      this.getById(first.parent)?.index?.moveSecondBeforeFirst(first, second);
+      this.subject.publish(this.items);
+      return;
+    }
     const secondIndex = this.itemsArray.indexOf(second);
     this.itemsArray.splice(secondIndex, 1);
     const firstIndex = this.itemsArray.indexOf(first);
@@ -56177,14 +56215,14 @@ class Board {
     const items = Array.from(itemsDiv.children).map((el) => this.parseHTML(el));
     this.index.clear();
     const createdConnectors = {};
-    const createdFrames = {};
+    const createdGroups = {};
     const addItem = (itemData) => {
       const item = this.createItem(itemData.id, itemData);
       if (item instanceof Connector2) {
         createdConnectors[itemData.id] = { item, itemData };
       }
-      if (item instanceof Frame2) {
-        createdFrames[item.getId()] = { item, itemData };
+      if ("index" in item && item.index) {
+        createdGroups[item.getId()] = { item, itemData };
       }
       this.index.insert(item);
       return item;
@@ -56202,8 +56240,8 @@ class Board {
       item.applyStartPoint(itemData.startPoint);
       item.applyEndPoint(itemData.endPoint);
     }
-    for (const key in createdFrames) {
-      const { item, itemData } = createdFrames[key];
+    for (const key in createdGroups) {
+      const { item, itemData } = createdGroups[key];
       item.applyAddChildren(itemData.children);
     }
   }

package/dist/esm/browser.js

@@ -18678,24 +18678,6 @@ class FrameCommand {
             ...this.operation
           };
         });
-      default:
-        return mapItemsByOperation(frame, (item) => {
-          const op = this.operation;
-          let newData = {};
-          if (op.prevData) {
-            newData = { ...op.prevData };
-          } else {
-            Object.keys(op.newData).forEach((key) => {
-              if (item[key]) {
-                newData[key] = item[key];
-              }
-            });
-          }
-          return {
-            ...op,
-            newData
-          };
-        });
     }
   }
 }
@@ -20675,6 +20657,11 @@ class SpatialIndex {
     return this.getById(item.parent);
   }
   moveToZIndex(item, zIndex) {
+    if (item.parent !== "Board") {
+      this.getById(item.parent)?.index?.moveToZIndex(item, zIndex);
+      this.subject.publish(this.items);
+      return;
+    }
     const index2 = this.itemsArray.indexOf(item);
     this.itemsArray.splice(index2, 1);
     this.itemsArray.splice(zIndex, 0, item);
@@ -20691,6 +20678,13 @@ class SpatialIndex {
     this.itemsArray.forEach(this.change.bind(this));
   }
   sendToBack(item, shouldPublish = true) {
+    if (item.parent !== "Board") {
+      this.getById(item.parent)?.index?.sendToBack(item);
+      if (shouldPublish) {
+        this.subject.publish(this.items);
+      }
+      return;
+    }
     const index2 = this.itemsArray.indexOf(item);
     this.itemsArray.splice(index2, 1);
     this.itemsArray.unshift(item);
@@ -20700,16 +20694,31 @@ class SpatialIndex {
     }
   }
   sendManyToBack(items) {
-    const newItems = [...items];
-    this.itemsArray.forEach((item) => {
-      if (!items.includes(item)) {
-        newItems.push(item);
+    const groups = this.splitItemsToGroups(items);
+    Object.entries(groups).forEach(([key, value]) => {
+      if (key !== "Board") {
+        this.getById(key)?.index?.sendManyToBack(value);
       }
     });
-    this.itemsArray = newItems;
-    this.itemsArray.forEach(this.change.bind(this));
+    if (groups["Board"]) {
+      const newItems = [...groups["Board"]];
+      this.itemsArray.forEach((item) => {
+        if (!groups["Board"].includes(item)) {
+          newItems.push(item);
+        }
+      });
+      this.itemsArray = newItems;
+      this.itemsArray.forEach(this.change.bind(this));
+    }
   }
   bringToFront(item, shouldPublish = true) {
+    if (item.parent !== "Board") {
+      this.getById(item.parent)?.index?.bringToFront(item);
+      if (shouldPublish) {
+        this.subject.publish(this.items);
+      }
+      return;
+    }
     const index2 = this.itemsArray.indexOf(item);
     this.itemsArray.splice(index2, 1);
     this.itemsArray.push(item);
@@ -20719,17 +20728,41 @@ class SpatialIndex {
     }
   }
   bringManyToFront(items) {
-    const newItems = [];
-    this.itemsArray.forEach((item) => {
-      if (!items.includes(item)) {
-        newItems.push(item);
+    const groups = this.splitItemsToGroups(items);
+    Object.entries(groups).forEach(([key, value]) => {
+      if (key !== "Board") {
+        this.getById(key)?.index?.bringManyToFront(value);
       }
     });
-    newItems.push(...items);
-    this.itemsArray = newItems;
-    this.itemsArray.forEach(this.change.bind(this));
+    if (groups["Board"]) {
+      const newItems = [];
+      this.itemsArray.forEach((item) => {
+        if (!groups["Board"].includes(item)) {
+          newItems.push(item);
+        }
+      });
+      newItems.push(...groups["Board"]);
+      this.itemsArray = newItems;
+      this.itemsArray.forEach(this.change.bind(this));
+    }
+  }
+  splitItemsToGroups(items) {
+    const groups = {};
+    for (const item of items) {
+      if (!groups[item.parent]) {
+        groups[item.parent] = [item];
+      } else {
+        groups[item.parent].push(item);
+      }
+    }
+    return groups;
   }
   moveSecondAfterFirst(first, second) {
+    if (first.parent !== "Board" && second.parent === first.parent) {
+      this.getById(first.parent)?.index?.moveSecondAfterFirst(first, second);
+      this.subject.publish(this.items);
+      return;
+    }
     const secondIndex = this.itemsArray.indexOf(second);
     this.itemsArray.splice(secondIndex, 1);
     const firstIndex = this.itemsArray.indexOf(first);
@@ -20739,6 +20772,11 @@ class SpatialIndex {
     this.subject.publish(this.items);
   }
   moveSecondBeforeFirst(first, second) {
+    if (first.parent !== "Board" && second.parent === first.parent) {
+      this.getById(first.parent)?.index?.moveSecondBeforeFirst(first, second);
+      this.subject.publish(this.items);
+      return;
+    }
     const secondIndex = this.itemsArray.indexOf(second);
     this.itemsArray.splice(secondIndex, 1);
     const firstIndex = this.itemsArray.indexOf(first);
@@ -53554,14 +53592,14 @@ class Board {
     const items = Array.from(itemsDiv.children).map((el) => this.parseHTML(el));
     this.index.clear();
     const createdConnectors = {};
-    const createdFrames = {};
+    const createdGroups = {};
     const addItem = (itemData) => {
       const item = this.createItem(itemData.id, itemData);
       if (item instanceof Connector2) {
         createdConnectors[itemData.id] = { item, itemData };
       }
-      if (item instanceof Frame2) {
-        createdFrames[item.getId()] = { item, itemData };
+      if ("index" in item && item.index) {
+        createdGroups[item.getId()] = { item, itemData };
       }
       this.index.insert(item);
       return item;
@@ -53579,8 +53617,8 @@ class Board {
       item.applyStartPoint(itemData.startPoint);
       item.applyEndPoint(itemData.endPoint);
     }
-    for (const key in createdFrames) {
-      const { item, itemData } = createdFrames[key];
+    for (const key in createdGroups) {
+      const { item, itemData } = createdGroups[key];
       item.applyAddChildren(itemData.children);
     }
   }

package/dist/esm/index.js

@@ -18671,24 +18671,6 @@ class FrameCommand {
             ...this.operation
           };
         });
-      default:
-        return mapItemsByOperation(frame, (item) => {
-          const op = this.operation;
-          let newData = {};
-          if (op.prevData) {
-            newData = { ...op.prevData };
-          } else {
-            Object.keys(op.newData).forEach((key) => {
-              if (item[key]) {
-                newData[key] = item[key];
-              }
-            });
-          }
-          return {
-            ...op,
-            newData
-          };
-        });
     }
   }
 }
@@ -20668,6 +20650,11 @@ class SpatialIndex {
     return this.getById(item.parent);
   }
   moveToZIndex(item, zIndex) {
+    if (item.parent !== "Board") {
+      this.getById(item.parent)?.index?.moveToZIndex(item, zIndex);
+      this.subject.publish(this.items);
+      return;
+    }
     const index2 = this.itemsArray.indexOf(item);
     this.itemsArray.splice(index2, 1);
     this.itemsArray.splice(zIndex, 0, item);
@@ -20684,6 +20671,13 @@ class SpatialIndex {
     this.itemsArray.forEach(this.change.bind(this));
   }
   sendToBack(item, shouldPublish = true) {
+    if (item.parent !== "Board") {
+      this.getById(item.parent)?.index?.sendToBack(item);
+      if (shouldPublish) {
+        this.subject.publish(this.items);
+      }
+      return;
+    }
     const index2 = this.itemsArray.indexOf(item);
     this.itemsArray.splice(index2, 1);
     this.itemsArray.unshift(item);
@@ -20693,16 +20687,31 @@ class SpatialIndex {
     }
   }
   sendManyToBack(items) {
-    const newItems = [...items];
-    this.itemsArray.forEach((item) => {
-      if (!items.includes(item)) {
-        newItems.push(item);
+    const groups = this.splitItemsToGroups(items);
+    Object.entries(groups).forEach(([key, value]) => {
+      if (key !== "Board") {
+        this.getById(key)?.index?.sendManyToBack(value);
       }
     });
-    this.itemsArray = newItems;
-    this.itemsArray.forEach(this.change.bind(this));
+    if (groups["Board"]) {
+      const newItems = [...groups["Board"]];
+      this.itemsArray.forEach((item) => {
+        if (!groups["Board"].includes(item)) {
+          newItems.push(item);
+        }
+      });
+      this.itemsArray = newItems;
+      this.itemsArray.forEach(this.change.bind(this));
+    }
   }
   bringToFront(item, shouldPublish = true) {
+    if (item.parent !== "Board") {
+      this.getById(item.parent)?.index?.bringToFront(item);
+      if (shouldPublish) {
+        this.subject.publish(this.items);
+      }
+      return;
+    }
     const index2 = this.itemsArray.indexOf(item);
     this.itemsArray.splice(index2, 1);
     this.itemsArray.push(item);
@@ -20712,17 +20721,41 @@ class SpatialIndex {
     }
   }
   bringManyToFront(items) {
-    const newItems = [];
-    this.itemsArray.forEach((item) => {
-      if (!items.includes(item)) {
-        newItems.push(item);
+    const groups = this.splitItemsToGroups(items);
+    Object.entries(groups).forEach(([key, value]) => {
+      if (key !== "Board") {
+        this.getById(key)?.index?.bringManyToFront(value);
       }
     });
-    newItems.push(...items);
-    this.itemsArray = newItems;
-    this.itemsArray.forEach(this.change.bind(this));
+    if (groups["Board"]) {
+      const newItems = [];
+      this.itemsArray.forEach((item) => {
+        if (!groups["Board"].includes(item)) {
+          newItems.push(item);
+        }
+      });
+      newItems.push(...groups["Board"]);
+      this.itemsArray = newItems;
+      this.itemsArray.forEach(this.change.bind(this));
+    }
+  }
+  splitItemsToGroups(items) {
+    const groups = {};
+    for (const item of items) {
+      if (!groups[item.parent]) {
+        groups[item.parent] = [item];
+      } else {
+        groups[item.parent].push(item);
+      }
+    }
+    return groups;
   }
   moveSecondAfterFirst(first, second) {
+    if (first.parent !== "Board" && second.parent === first.parent) {
+      this.getById(first.parent)?.index?.moveSecondAfterFirst(first, second);
+      this.subject.publish(this.items);
+      return;
+    }
     const secondIndex = this.itemsArray.indexOf(second);
     this.itemsArray.splice(secondIndex, 1);
     const firstIndex = this.itemsArray.indexOf(first);
@@ -20732,6 +20765,11 @@ class SpatialIndex {
     this.subject.publish(this.items);
   }
   moveSecondBeforeFirst(first, second) {
+    if (first.parent !== "Board" && second.parent === first.parent) {
+      this.getById(first.parent)?.index?.moveSecondBeforeFirst(first, second);
+      this.subject.publish(this.items);
+      return;
+    }
     const secondIndex = this.itemsArray.indexOf(second);
     this.itemsArray.splice(secondIndex, 1);
     const firstIndex = this.itemsArray.indexOf(first);
@@ -53547,14 +53585,14 @@ class Board {
     const items = Array.from(itemsDiv.children).map((el) => this.parseHTML(el));
     this.index.clear();
     const createdConnectors = {};
-    const createdFrames = {};
+    const createdGroups = {};
     const addItem = (itemData) => {
       const item = this.createItem(itemData.id, itemData);
       if (item instanceof Connector2) {
         createdConnectors[itemData.id] = { item, itemData };
       }
-      if (item instanceof Frame2) {
-        createdFrames[item.getId()] = { item, itemData };
+      if ("index" in item && item.index) {
+        createdGroups[item.getId()] = { item, itemData };
       }
       this.index.insert(item);
       return item;
@@ -53572,8 +53610,8 @@ class Board {
       item.applyStartPoint(itemData.startPoint);
       item.applyEndPoint(itemData.endPoint);
     }
-    for (const key in createdFrames) {
-      const { item, itemData } = createdFrames[key];
+    for (const key in createdGroups) {
+      const { item, itemData } = createdGroups[key];
       item.applyAddChildren(itemData.children);
     }
   }

package/dist/esm/node.js

@@ -21206,24 +21206,6 @@ class FrameCommand {
             ...this.operation
           };
         });
-      default:
-        return mapItemsByOperation(frame, (item) => {
-          const op = this.operation;
-          let newData = {};
-          if (op.prevData) {
-            newData = { ...op.prevData };
-          } else {
-            Object.keys(op.newData).forEach((key) => {
-              if (item[key]) {
-                newData[key] = item[key];
-              }
-            });
-          }
-          return {
-            ...op,
-            newData
-          };
-        });
     }
   }
 }
@@ -23135,6 +23117,11 @@ class SpatialIndex {
     return this.getById(item.parent);
   }
   moveToZIndex(item, zIndex) {
+    if (item.parent !== "Board") {
+      this.getById(item.parent)?.index?.moveToZIndex(item, zIndex);
+      this.subject.publish(this.items);
+      return;
+    }
     const index2 = this.itemsArray.indexOf(item);
     this.itemsArray.splice(index2, 1);
     this.itemsArray.splice(zIndex, 0, item);
@@ -23151,6 +23138,13 @@ class SpatialIndex {
     this.itemsArray.forEach(this.change.bind(this));
   }
   sendToBack(item, shouldPublish = true) {
+    if (item.parent !== "Board") {
+      this.getById(item.parent)?.index?.sendToBack(item);
+      if (shouldPublish) {
+        this.subject.publish(this.items);
+      }
+      return;
+    }
     const index2 = this.itemsArray.indexOf(item);
     this.itemsArray.splice(index2, 1);
     this.itemsArray.unshift(item);
@@ -23160,16 +23154,31 @@ class SpatialIndex {
     }
   }
   sendManyToBack(items) {
-    const newItems = [...items];
-    this.itemsArray.forEach((item) => {
-      if (!items.includes(item)) {
-        newItems.push(item);
+    const groups = this.splitItemsToGroups(items);
+    Object.entries(groups).forEach(([key, value]) => {
+      if (key !== "Board") {
+        this.getById(key)?.index?.sendManyToBack(value);
       }
     });
-    this.itemsArray = newItems;
-    this.itemsArray.forEach(this.change.bind(this));
+    if (groups["Board"]) {
+      const newItems = [...groups["Board"]];
+      this.itemsArray.forEach((item) => {
+        if (!groups["Board"].includes(item)) {
+          newItems.push(item);
+        }
+      });
+      this.itemsArray = newItems;
+      this.itemsArray.forEach(this.change.bind(this));
+    }
   }
   bringToFront(item, shouldPublish = true) {
+    if (item.parent !== "Board") {
+      this.getById(item.parent)?.index?.bringToFront(item);
+      if (shouldPublish) {
+        this.subject.publish(this.items);
+      }
+      return;
+    }
     const index2 = this.itemsArray.indexOf(item);
     this.itemsArray.splice(index2, 1);
     this.itemsArray.push(item);
@@ -23179,17 +23188,41 @@ class SpatialIndex {
     }
   }
   bringManyToFront(items) {
-    const newItems = [];
-    this.itemsArray.forEach((item) => {
-      if (!items.includes(item)) {
-        newItems.push(item);
+    const groups = this.splitItemsToGroups(items);
+    Object.entries(groups).forEach(([key, value]) => {
+      if (key !== "Board") {
+        this.getById(key)?.index?.bringManyToFront(value);
       }
     });
-    newItems.push(...items);
-    this.itemsArray = newItems;
-    this.itemsArray.forEach(this.change.bind(this));
+    if (groups["Board"]) {
+      const newItems = [];
+      this.itemsArray.forEach((item) => {
+        if (!groups["Board"].includes(item)) {
+          newItems.push(item);
+        }
+      });
+      newItems.push(...groups["Board"]);
+      this.itemsArray = newItems;
+      this.itemsArray.forEach(this.change.bind(this));
+    }
+  }
+  splitItemsToGroups(items) {
+    const groups = {};
+    for (const item of items) {
+      if (!groups[item.parent]) {
+        groups[item.parent] = [item];
+      } else {
+        groups[item.parent].push(item);
+      }
+    }
+    return groups;
   }
   moveSecondAfterFirst(first, second) {
+    if (first.parent !== "Board" && second.parent === first.parent) {
+      this.getById(first.parent)?.index?.moveSecondAfterFirst(first, second);
+      this.subject.publish(this.items);
+      return;
+    }
     const secondIndex = this.itemsArray.indexOf(second);
     this.itemsArray.splice(secondIndex, 1);
     const firstIndex = this.itemsArray.indexOf(first);
@@ -23199,6 +23232,11 @@ class SpatialIndex {
     this.subject.publish(this.items);
   }
   moveSecondBeforeFirst(first, second) {
+    if (first.parent !== "Board" && second.parent === first.parent) {
+      this.getById(first.parent)?.index?.moveSecondBeforeFirst(first, second);
+      this.subject.publish(this.items);
+      return;
+    }
     const secondIndex = this.itemsArray.indexOf(second);
     this.itemsArray.splice(secondIndex, 1);
     const firstIndex = this.itemsArray.indexOf(first);
@@ -56015,14 +56053,14 @@ class Board {
     const items = Array.from(itemsDiv.children).map((el) => this.parseHTML(el));
     this.index.clear();
     const createdConnectors = {};
-    const createdFrames = {};
+    const createdGroups = {};
     const addItem = (itemData) => {
       const item = this.createItem(itemData.id, itemData);
       if (item instanceof Connector2) {
         createdConnectors[itemData.id] = { item, itemData };
       }
-      if (item instanceof Frame2) {
-        createdFrames[item.getId()] = { item, itemData };
+      if ("index" in item && item.index) {
+        createdGroups[item.getId()] = { item, itemData };
       }
       this.index.insert(item);
       return item;
@@ -56040,8 +56078,8 @@ class Board {
       item.applyStartPoint(itemData.startPoint);
       item.applyEndPoint(itemData.endPoint);
     }
-    for (const key in createdFrames) {
-      const { item, itemData } = createdFrames[key];
+    for (const key in createdGroups) {
+      const { item, itemData } = createdGroups[key];
       item.applyAddChildren(itemData.children);
     }
   }

package/dist/types/SpatialIndex/SpacialIndex.d.ts

@@ -28,6 +28,7 @@ export declare class SpatialIndex {
     sendManyToBack(items: Item[]): void;
     bringToFront(item: Item, shouldPublish?: boolean): void;
     bringManyToFront(items: Item[]): void;
+    private splitItemsToGroups;
     moveSecondAfterFirst(first: Item, second: Item): void;
     moveSecondBeforeFirst(first: Item, second: Item): void;
     getById(id: string): BaseItem | undefined;

package/package.json

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