@netless/forge-slide 1.2.0-beta.0 → 1.3.0-beta.1

package/dist/slide.js

@@ -58615,7 +58615,7 @@ var require_lodash = __commonJS2({
           result2.__values__ = wrapper.__values__;
           return result2;
         }
-        function chunk7(array, size2, guard) {
+        function chunk8(array, size2, guard) {
           if (guard ? isIterateeCall(array, size2, guard) : size2 === undefined2) {
             size2 = 1;
           } else {
@@ -60487,7 +60487,7 @@ var require_lodash = __commonJS2({
         lodash.bindKey = bindKey;
         lodash.castArray = castArray;
         lodash.chain = chain;
-        lodash.chunk = chunk7;
+        lodash.chunk = chunk8;
         lodash.compact = compact;
         lodash.concat = concat;
         lodash.cond = cond;
@@ -60965,6 +60965,7 @@ var require_lodash = __commonJS2({
   }
 });
 var import_paper = __toESM2(require_paper_full(), 1);
+var import_lodash = __toESM2(require_lodash(), 1);
 function $(e, t, u, x = (h) => h) {
   return e * x(0.5 - t * (0.5 - u));
 }
@@ -61111,6 +61112,8 @@ function me(e, t = {}) {
 function ae(e, t = {}) {
   return ce(me(e, t), t);
 }
+var elementsUndoOrigin = "elementsUndoOrigin";
+var backgroundElementsUndoOrigin = "backgroundElementsUndoOrigin";
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -61140,6 +61143,12 @@ var ElementModel = class _ElementModel {
   get type() {
     return this.root.get("type");
   }
+  get role() {
+    return this.root.get("role") ?? "normal";
+  }
+  get isBackground() {
+    return this.role === "background";
+  }
   get strokeWidth() {
     return this.root.get(_ElementModel.KEYS.strokeWidth);
   }
@@ -61198,6 +61207,9 @@ var ElementModel = class _ElementModel {
   get isPerformanceEnvironment() {
     return this.isPerformanceMode() && this.shouldUseLocalPoints;
   }
+  isAttached() {
+    return this.root.has(_ElementModel.KEYS.uuid);
+  }
   constructor(root, scope, liveCursor, isPerformanceMode) {
     _defineProperty(this, "shadowEmitter", null);
     _defineProperty(this, "root", void 0);
@@ -61283,16 +61295,12 @@ var ElementModel = class _ElementModel {
     }
   }
   bindObserver() {
-    const beforeL = this.root._eH?.l?.length ?? -1;
-    const beforeDL = this.root._dEH?.l?.length ?? -1;
     (0, import_forge_room3.removeDeepObserver)(this.root, this.handlePropChange);
     this.subBindObserver();
-    const afterRemoveL = this.root._eH?.l?.length ?? -1;
-    const afterRemoveDL = this.root._dEH?.l?.length ?? -1;
     this.root.observeDeep(this.handlePropChange);
-    const afterAddL = this.root._eH?.l?.length ?? -1;
-    const afterAddDL = this.root._dEH?.l?.length ?? -1;
-    console.log(`[][][] bindObserver uuid=${this.uuid} doc=${!!this.root.doc} _eH: ${beforeL}->${afterRemoveL}->${afterAddL} _dEH: ${beforeDL}->${afterRemoveDL}->${afterAddDL}`);
+  }
+  mutationOrigin() {
+    return elementsUndoOrigin;
   }
   subBindObserver() {
   }
@@ -61331,62 +61339,81 @@ var ElementModel = class _ElementModel {
       this.item.data.uuid = this.uuid;
       this.item.data.index = this.index;
       this.item.data.type = this.root.get("type");
+      this.item.data.role = this.role;
       this.item.data.ownerId = this.ownerId;
       this.item.applyMatrix = false;
     }
   }
   appendPoints(points) {
     if (this.isPerformanceEnvironment) {
-      this.appendPointsPerformance(points);
+      return this.appendPointsPerformance(points);
     } else {
-      this.appendPointsDirect(points);
+      return this.appendPointsDirect(points);
     }
   }
+  getPointsArray() {
+    const yArray = this.root.get(_ElementModel.KEYS.points);
+    return yArray instanceof Y.Array ? yArray : null;
+  }
   appendPointsDirect(points) {
-    this.root.get(_ElementModel.KEYS.points).push(points);
+    const yArray = this.getPointsArray();
+    if (!yArray) {
+      return false;
+    }
+    yArray.push(points);
+    return true;
   }
   appendPointsPerformance(points) {
+    const yArray = this.getPointsArray();
+    if (!yArray) {
+      return false;
+    }
     this.localPoints = this.localPoints.concat(points);
     this.onVectorUpdate();
     if (this.appendPointsTimer) {
       window.clearTimeout(this.appendPointsTimer);
     }
     if (this.localPoints.length % 80 === 0) {
-      const yArray = this.root.get(_ElementModel.KEYS.points);
       yArray?.push(this.localPoints.slice(yArray.length));
     }
     this.appendPointsTimer = window.setTimeout(() => {
       this.appendPointsTimer = null;
       if (this.localPoints.length > 0) {
-        const yArray = this.root.get(_ElementModel.KEYS.points);
-        yArray?.push(this.localPoints.slice(yArray.length));
+        const nextArray = this.getPointsArray();
+        nextArray?.push(this.localPoints.slice(nextArray.length));
       }
     }, 100);
+    return true;
   }
   setPoints(points) {
     if (this.isPerformanceEnvironment) {
-      this.setPointsPerformance(points);
+      return this.setPointsPerformance(points);
     } else {
-      this.setPointsDirect(points);
+      return this.setPointsDirect(points);
     }
   }
   setPointsDirect(points) {
     if (this.root.doc) {
+      const yArray = this.getPointsArray();
+      if (!yArray) {
+        return false;
+      }
       this.root.doc.transact(() => {
-        const yArray = this.root.get(_ElementModel.KEYS.points);
-        if (yArray) {
-          yArray.delete(0, yArray.length);
-          yArray.push(points);
-        }
-      });
+        yArray.delete(0, yArray.length);
+        yArray.push(points);
+      }, this.mutationOrigin());
     } else {
-      const yArray = this.root.get(_ElementModel.KEYS.points) || new Y.Array();
+      const yArray = this.getPointsArray() || new Y.Array();
       yArray.delete(0, yArray.length);
       yArray.push(points);
       this.root.set(_ElementModel.KEYS.points, yArray);
     }
+    return true;
   }
   setPointsPerformance(points) {
+    if (this.root.doc && !this.getPointsArray()) {
+      return false;
+    }
     this.localPoints = points;
     this.onVectorUpdate();
     if (this.setPointsTimer) {
@@ -61394,25 +61421,33 @@ var ElementModel = class _ElementModel {
     }
     this.setPointsTimer = window.setTimeout(() => {
       if (this.root.doc) {
+        const yArray = this.getPointsArray();
+        if (!yArray) {
+          return;
+        }
         this.root.doc.transact(() => {
-          const yArray = this.root.get(_ElementModel.KEYS.points);
-          if (yArray) {
-            yArray.delete(0, yArray.length);
-            yArray.push(points);
-          }
-        });
+          yArray.delete(0, yArray.length);
+          yArray.push(points);
+        }, this.mutationOrigin());
       } else {
-        const yArray = this.root.get(_ElementModel.KEYS.points) || new Y.Array();
+        const yArray = this.getPointsArray() || new Y.Array();
         yArray.delete(0, yArray.length);
         yArray.push(points);
         this.root.set(_ElementModel.KEYS.points, yArray);
       }
     }, 100);
+    return true;
   }
   appendPointsMatrix(matrix) {
     const current = new this.scope.Matrix(this.pointsMatrix);
     const next = matrix.appended(current);
-    this.root.set(_ElementModel.KEYS.pointsMatrix, [next.a, next.b, next.c, next.d, next.tx, next.ty]);
+    if (this.root.doc) {
+      this.root.doc.transact(() => {
+        this.root.set(_ElementModel.KEYS.pointsMatrix, [next.a, next.b, next.c, next.d, next.tx, next.ty]);
+      }, this.mutationOrigin());
+    } else {
+      this.root.set(_ElementModel.KEYS.pointsMatrix, [next.a, next.b, next.c, next.d, next.tx, next.ty]);
+    }
   }
   rotateByOffset(angle, centerX, centerY) {
     const current = new this.scope.Matrix(this.pointsMatrix);
@@ -61426,7 +61461,13 @@ var ElementModel = class _ElementModel {
       matrix2.rotate(delta, centerX, centerY);
       next = matrix2.appended(next);
     }
-    this.root.set(_ElementModel.KEYS.pointsMatrix, [next.a, next.b, next.c, next.d, next.tx, next.ty]);
+    if (this.root.doc) {
+      this.root.doc.transact(() => {
+        this.root.set(_ElementModel.KEYS.pointsMatrix, [next.a, next.b, next.c, next.d, next.tx, next.ty]);
+      }, this.mutationOrigin());
+    } else {
+      this.root.set(_ElementModel.KEYS.pointsMatrix, [next.a, next.b, next.c, next.d, next.tx, next.ty]);
+    }
     return next.rotation;
   }
   getStyleKeys() {
@@ -61437,7 +61478,6 @@ var ElementModel = class _ElementModel {
     this.subDispose();
   }
   disposeObserver() {
-    console.log(`[][][] disposeObserver uuid=${this.uuid}`);
     (0, import_forge_room3.removeDeepObserver)(this.root, this.handlePropChange);
   }
 };
@@ -61476,6 +61516,7 @@ var EditorConfig = class _EditorConfig {
   constructor() {
     _defineProperty2(this, "resizeModel", () => "eight");
     _defineProperty2(this, "uniformScale", () => false);
+    _defineProperty2(this, "translatable", () => true);
     _defineProperty2(this, "controlPoints", []);
   }
   merge(other) {
@@ -61484,6 +61525,7 @@ var EditorConfig = class _EditorConfig {
     const j = RESIZE_MODEL_LEVEL.findIndex((v) => v === other.resizeModel());
     next.resizeModel = () => RESIZE_MODEL_LEVEL[Math.max(i, j)];
     next.uniformScale = this.uniformScale || other.uniformScale;
+    next.translatable = () => this.translatable() && other.translatable();
     next.controlPoints = [];
     return next;
   }
@@ -61512,7 +61554,7 @@ var CurveModel = class extends ElementModel {
     _defineProperty3(this, "debug", false);
     _defineProperty3(this, "clearLocalPointsWhenYPointsChange", false);
     _defineProperty3(this, "shouldUseLocalPoints", true);
-    _defineProperty3(this, "localPointsPick", 6);
+    _defineProperty3(this, "localPointsPick", 4);
     if (!this.root.doc || !this.root.has("type")) {
       this.root.set("type", "curve");
     }
@@ -61524,7 +61566,6 @@ var CurveModel = class extends ElementModel {
     return (a2 + b2) / 2;
   }
   parsePoints(points) {
-    const hasRealPressure = points.some((p) => p.length >= 3 && p[2] > 0);
     const viewScale = this.scope.project.view.matrix.scaling.x || 1;
     const taper = this.strokeWidth * 5 / viewScale;
     const streamline = Math.min(0.7, 0.7 * viewScale);
@@ -61533,7 +61574,7 @@ var CurveModel = class extends ElementModel {
       smoothing: 0.7,
       thinning: 0.5,
       streamline,
-      simulatePressure: !hasRealPressure,
+      simulatePressure: true,
       start: {
         taper,
         cap: true
@@ -61544,36 +61585,13 @@ var CurveModel = class extends ElementModel {
       }
     });
   }
-  isPressureValue(value) {
-    return typeof value === "number" && Number.isFinite(value) && value >= 0 && value <= 1;
-  }
-  pointStride(points) {
-    if (points.length >= 3 && points.length % 3 === 0) {
-      let hasPressureSlot = false;
-      for (let i = 2; i < points.length; i += 3) {
-        if (!this.isPressureValue(points[i])) {
-          return 2;
-        }
-        hasPressureSlot = true;
-      }
-      if (hasPressureSlot) {
-        return 3;
-      }
-    }
-    return 2;
-  }
   matrixedPoints() {
     const points = this.localPoints.length === 0 ? this.points : this.localPoints;
     const matrix = new this.scope.Matrix(this.pointsMatrix);
-    const output = [];
-    const stride = this.pointStride(points);
-    for (let i = 0, len = points.length; i + 1 < len; i += stride) {
-      const p = new this.scope.Point(points[i], points[i + 1]);
-      const tp = p.transform(matrix);
-      const pressure = stride === 3 ? points[i + 2] ?? 0 : 0;
-      output.push([tp.x, tp.y, pressure]);
-    }
-    return output;
+    return (0, import_lodash.chunk)(points, 2).filter((point) => point.length === 2).map((_ref) => {
+      let [x, y] = _ref;
+      return new this.scope.Point(x, y).transform(matrix);
+    }).map((point) => [point.x, point.y]);
   }
   createPath(points) {
     const path = new this.scope.Path();
@@ -61647,12 +61665,11 @@ var CurveModel = class extends ElementModel {
   liveCursorPoint() {
     const yArray = this.root.get(ElementModel.KEYS.points);
     const points = yArray.toArray();
-    const stride = this.pointStride(points);
-    if (points.length < stride) {
+    if (points.length < 2) {
       return null;
     }
     const len = points.length;
-    const point = new this.scope.Point(points[len - stride], points[len - stride + 1]);
+    const point = new this.scope.Point(points[len - 2], points[len - 1]);
     return point.transform(new this.scope.Matrix(this.pointsMatrix));
   }
   onStyleKeyUpdate(key) {
@@ -61745,7 +61762,7 @@ var SelectorModel = class extends ElementModel {
   onStyleKeyUpdate(_key) {
   }
 };
-var import_lodash = __toESM2(require_lodash(), 1);
+var import_lodash2 = __toESM2(require_lodash(), 1);
 function _defineProperty5(e, r, t) {
   return (r = _toPropertyKey5(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -61778,7 +61795,7 @@ function serializePath(path) {
   }, []);
 }
 function deserializePath(points, scope, matrix) {
-  const segmentGroup = (0, import_lodash.chunk)(points, 6);
+  const segmentGroup = (0, import_lodash2.chunk)(points, 6);
   const path = new scope.Path();
   path.segments = segmentGroup.map((v) => deserializeSegment(v, scope, matrix));
   return path;
@@ -61916,7 +61933,7 @@ var SegmentsModel = class extends ElementModel {
   onStyleKeyUpdate(_key) {
   }
 };
-var import_lodash3 = __toESM2(require_lodash(), 1);
+var import_lodash4 = __toESM2(require_lodash(), 1);
 function _defineProperty7(e, r, t) {
   return (r = _toPropertyKey7(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -61959,7 +61976,14 @@ var WhiteboardTool = class {
       }
       this.pendingDragEvent = null;
       this.shadowEmitter.setActive(true);
-      this.onMouseDown(event);
+      try {
+        this.onMouseDown(event);
+      } catch (error) {
+        this.cancelCurrentAction();
+        this.eventAvailable = false;
+        this.shadowEmitter.setActive(false);
+        throw error;
+      }
     });
     _defineProperty7(this, "flushPendingDrag", () => {
       this.dragRafId = 0;
@@ -61967,7 +61991,14 @@ var WhiteboardTool = class {
         this.lastDragTime = performance.now();
         const event = this.pendingDragEvent;
         this.pendingDragEvent = null;
-        this.onMouseDrag(event);
+        try {
+          this.onMouseDrag(event);
+        } catch (error) {
+          this.cancelCurrentAction();
+          this.eventAvailable = false;
+          this.shadowEmitter.setActive(false);
+          throw error;
+        }
       }
     });
     _defineProperty7(this, "onMouseDragSelf", (event) => {
@@ -61978,7 +62009,14 @@ var WhiteboardTool = class {
       if (now - this.lastDragTime >= DRAG_FRAME_MS) {
         this.lastDragTime = now;
         this.pendingDragEvent = null;
-        this.onMouseDrag(event);
+        try {
+          this.onMouseDrag(event);
+        } catch (error) {
+          this.cancelCurrentAction();
+          this.eventAvailable = false;
+          this.shadowEmitter.setActive(false);
+          throw error;
+        }
       } else {
         this.pendingDragEvent = event;
         if (!this.dragRafId) {
@@ -61995,11 +62033,26 @@ var WhiteboardTool = class {
         this.dragRafId = 0;
       }
       if (this.pendingDragEvent) {
-        this.onMouseDrag(this.pendingDragEvent);
-        this.pendingDragEvent = null;
+        try {
+          this.onMouseDrag(this.pendingDragEvent);
+          this.pendingDragEvent = null;
+        } catch (error) {
+          this.pendingDragEvent = null;
+          this.cancelCurrentAction();
+          this.eventAvailable = false;
+          this.shadowEmitter.setActive(false);
+          throw error;
+        }
+      }
+      try {
+        this.onMouseUp(event);
+      } catch (error) {
+        this.cancelCurrentAction();
+        this.eventAvailable = false;
+        throw error;
+      } finally {
+        this.shadowEmitter.setActive(false);
       }
-      this.onMouseUp(event);
-      this.shadowEmitter.setActive(false);
     });
     this.modelGetter = modelGetter;
     this.enableToolEvent = enableToolEvent;
@@ -62010,8 +62063,10 @@ var WhiteboardTool = class {
     this.tool.onMouseDrag = this.onMouseDragSelf;
     this.tool.onMouseUp = this.onMouseUpSelf;
   }
+  cancelCurrentAction() {
+  }
 };
-var import_lodash2 = __toESM2(require_lodash(), 1);
+var import_lodash3 = __toESM2(require_lodash(), 1);
 function _defineProperty8(e, r, t) {
   return (r = _toPropertyKey8(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -62060,7 +62115,7 @@ var LineTool = class extends WhiteboardTool {
         const point = path.getPointAt(distance);
         return [point.x, point.y];
       });
-      this.elementModel.setPoints((0, import_lodash2.flattenDeep)(points));
+      this.elementModel.setPoints((0, import_lodash3.flattenDeep)(points));
     }
   }
   onMouseUp(_event) {
@@ -62141,7 +62196,7 @@ var LineModel = class extends ElementModel {
   }
   renderLine() {
     const matrix = new this.scope.Matrix(this.pointsMatrix);
-    const papperPoints = (0, import_lodash3.chunk)(this.drawPoints, 2).map((item) => {
+    const papperPoints = (0, import_lodash4.chunk)(this.drawPoints, 2).map((item) => {
       return new this.scope.Point(item[0], item[1]).transform(matrix);
     });
     const path = new this.scope.Path();
@@ -62277,7 +62332,7 @@ var LineControlPoint = class {
     const invertedPoint = point.transform(pointsMatrix.inverted());
     const points = this.model["drawPoints"];
     this.position = invertedPoint;
-    const clonedPoints = (0, import_lodash3.cloneDeep)(points);
+    const clonedPoints = (0, import_lodash4.cloneDeep)(points);
     clonedPoints[this.options.index * 2] = invertedPoint.x;
     clonedPoints[this.options.index * 2 + 1] = invertedPoint.y;
     this.model.setPoints(clonedPoints);
@@ -62382,7 +62437,6 @@ var PointTextModel = class extends ElementModel {
     if (!this.item) {
       return null;
     }
-    console.log("[][][] drawPoints", this.drawPoints);
     const bounds = this.item.internalBounds;
     const matrix = new this.scope.Matrix(this.pointsMatrix);
     const topLeft = new this.scope.Point(this.drawPoints[0], this.drawPoints[1]).transform(matrix);
@@ -62746,8 +62800,7 @@ var RectangleModel = class extends ElementModel {
   onStyleKeyUpdate(_key) {
   }
 };
-var elementsUndoOrigin = "elementsUndoOrigin";
-var import_lodash4 = __toESM2(require_lodash(), 1);
+var import_lodash5 = __toESM2(require_lodash(), 1);
 function _defineProperty13(e, r, t) {
   return (r = _toPropertyKey13(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -62815,7 +62868,7 @@ var EraserModel = class extends ElementModel {
     return path;
   }
   parsePoints(points) {
-    const groupPoints = (0, import_lodash4.chunk)(points, 2);
+    const groupPoints = (0, import_lodash5.chunk)(points, 2);
     return ae(groupPoints, {
       size: this.strokeWidth,
       smoothing: 0.5,
@@ -62833,7 +62886,7 @@ var EraserModel = class extends ElementModel {
     });
   }
   matrixedPoints() {
-    const currentPoints = (0, import_lodash4.chunk)(this.drawPoints, 2).slice(this.sliceBegin);
+    const currentPoints = (0, import_lodash5.chunk)(this.drawPoints, 2).slice(this.sliceBegin);
     return currentPoints.map((_ref) => {
       let [x, y] = _ref;
       return new this.scope.Point(x, y);
@@ -62896,7 +62949,7 @@ var EraserModel = class extends ElementModel {
     return point.transform(new this.scope.Matrix(this.pointsMatrix));
   }
 };
-var import_lodash5 = __toESM2(require_lodash(), 1);
+var import_lodash6 = __toESM2(require_lodash(), 1);
 function _defineProperty14(e, r, t) {
   return (r = _toPropertyKey14(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -63021,8 +63074,7 @@ var LaserPointerModel = class extends ElementModel {
   matrixedPoints() {
     const matrix = new this.scope.Matrix(this.pointsMatrix);
     const points = this.cachedPoints || this.points;
-    console.log("[][][] ,", this.points.length, this.cachedPoints?.length, this.localPoints.length);
-    const groupPoints = (0, import_lodash5.chunk)(points, 2).slice(this.sliceBegin);
+    const groupPoints = (0, import_lodash6.chunk)(points, 2).slice(this.sliceBegin);
     return groupPoints.map((_ref) => {
       let [x, y] = _ref;
       return matrix.transform([x, y]);
@@ -63096,7 +63148,7 @@ var WhiteboardPermissions = class extends import_forge_room7.AbstractApplication
     return [WhiteboardPermissionFlag.draw, WhiteboardPermissionFlag.editSelf, WhiteboardPermissionFlag.editOthers, WhiteboardPermissionFlag.deleteSelf, WhiteboardPermissionFlag.deleteOthers, WhiteboardPermissionFlag.mainView, WhiteboardPermissionFlag.setOthersView].filter((v) => (v & value) !== 0);
   }
 };
-var import_lodash6 = __toESM2(require_lodash(), 1);
+var import_lodash7 = __toESM2(require_lodash(), 1);
 function _defineProperty15(e, r, t) {
   return (r = _toPropertyKey15(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -63155,7 +63207,7 @@ var StraightLineModel = class extends ElementModel {
   }
   renderLine() {
     const matrix = new this.scope.Matrix(this.pointsMatrix);
-    const papperPoints = (0, import_lodash6.chunk)(this.drawPoints, 2).map((item) => {
+    const papperPoints = (0, import_lodash7.chunk)(this.drawPoints, 2).map((item) => {
       return new this.scope.Point(item[0], item[1]).transform(matrix);
     });
     const path = new this.scope.Path();
@@ -63283,6 +63335,7 @@ var ImageModel = class extends ElementModel {
     this.item = new this.scope.Raster(this.uuid);
     const matrix = new this.scope.Matrix(this.pointsMatrix);
     this.item.matrix = matrix;
+    this.item.data.role = this.role;
   }
   onVectorUpdate() {
     const matrix = new this.scope.Matrix(this.pointsMatrix);
@@ -63311,8 +63364,12 @@ var ImageModel = class extends ElementModel {
     const cfg = new EditorConfig();
     cfg.resizeModel = () => "four-corner";
     cfg.uniformScale = () => true;
+    cfg.translatable = () => !this.isBackground;
     return cfg;
   }
+  mutationOrigin() {
+    return this.isBackground ? backgroundElementsUndoOrigin : elementsUndoOrigin;
+  }
   liveCursorPoint() {
     return null;
   }
@@ -63393,6 +63450,7 @@ var RenderableModel = class extends import_eventemitter3.default {
   flushRenderables() {
     this.emit("elementClear");
     const elements = Array.from(this.elements.values()).map((v) => this.convertToModel(v)).filter((v) => !!v);
+    elements.sort((a2, b2) => this.compareElements(a2, b2));
     this.maxIndex = elements.reduce((r, n) => Math.max(r, n.index), -1);
     const clearIds = [];
     elements.forEach((model) => {
@@ -63454,7 +63512,32 @@ var RenderableModel = class extends import_eventemitter3.default {
   initElement(element) {
     element.shadowEmitter = this.shadowEmitter;
   }
+  compareElementRole(roleA, roleB) {
+    const a2 = roleA === "background" ? 0 : 1;
+    const b2 = roleB === "background" ? 0 : 1;
+    return a2 - b2;
+  }
+  compareElements(a2, b2) {
+    const roleCompare = this.compareElementRole(a2.role, b2.role);
+    if (roleCompare !== 0) {
+      return roleCompare;
+    }
+    if (a2.index !== b2.index) {
+      return a2.index - b2.index;
+    }
+    return a2.uuid.localeCompare(b2.uuid);
+  }
+  isBackgroundElement(uuid) {
+    const element = this.elements.get(uuid);
+    if (!element) {
+      return false;
+    }
+    return (element.get("role") ?? "normal") === "background";
+  }
   removeElementItem(uuid) {
+    if (this.isBackgroundElement(uuid)) {
+      return;
+    }
     this.elements.delete(uuid);
   }
   confirmPermission() {
@@ -63465,15 +63548,21 @@ var RenderableModel = class extends import_eventemitter3.default {
     return hasPermission;
   }
   createImage(src) {
+    let fit = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : "legacy";
+    let role = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "normal";
     if (!this.confirmPermission()) {
       return;
     }
+    if (role === "background") {
+      return this.upsertBackgroundImage(src, fit);
+    }
     const yMap = new Y12.Map();
     this.elements.doc?.transact(() => {
       const uuid = this.uuid;
       yMap.set(ElementModel.KEYS.index, ++this.maxIndex);
       yMap.set(ElementModel.KEYS.uuid, uuid);
       yMap.set("type", "image");
+      yMap.set("role", role);
       yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
@@ -63481,9 +63570,47 @@ var RenderableModel = class extends import_eventemitter3.default {
     model.bindObserver();
     model.root.set("src", src);
     model.ownerId = this.userManager.selfId;
-    this.fitImageToViewport(src, model);
+    this.fitImageToViewport(src, model, fit);
+  }
+  upsertBackgroundImage(src, fit) {
+    const backgroundEntries = Array.from(this.elements.entries()).filter((_ref) => {
+      let [, elementMap] = _ref;
+      return elementMap.get("type") === "image" && (elementMap.get("role") ?? "normal") === "background";
+    });
+    let targetMap = backgroundEntries[0]?.[1] ?? null;
+    if (this.elements.doc) {
+      this.elements.doc.transact(() => {
+        backgroundEntries.slice(1).forEach((_ref2) => {
+          let [key] = _ref2;
+          return this.elements.delete(key);
+        });
+        if (!targetMap) {
+          targetMap = new Y12.Map();
+          const uuid = this.uuid;
+          targetMap.set(ElementModel.KEYS.index, -1);
+          targetMap.set(ElementModel.KEYS.uuid, uuid);
+          targetMap.set("type", "image");
+          targetMap.set("role", "background");
+          targetMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+          this.elements.set(uuid, targetMap);
+        } else {
+          targetMap.set("role", "background");
+          targetMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+        }
+      }, backgroundElementsUndoOrigin);
+    }
+    if (!targetMap) {
+      return;
+    }
+    const model = this.convertToModel(targetMap);
+    if (!model || !(model instanceof ImageModel)) {
+      return;
+    }
+    model.root.set("src", src);
+    model.ownerId = this.userManager.selfId;
+    this.fitImageToViewport(src, model, fit);
   }
-  fitImageToViewport(src, model) {
+  fitImageToViewport(src, model, fit) {
     const center = this.scope.project.view.center;
     const fallbackMatrix = new this.scope.Matrix();
     fallbackMatrix.translate({
@@ -63500,9 +63627,9 @@ var RenderableModel = class extends import_eventemitter3.default {
         return;
       }
       const viewportBounds = this.scope.project.view.bounds;
-      const maxWidth = viewportBounds.width * 2 / 3;
-      const maxHeight = viewportBounds.height * 2 / 3;
-      const fitScale = Math.min(maxWidth / naturalWidth, maxHeight / naturalHeight, 1);
+      const maxWidth = fit === "contain" ? viewportBounds.width : viewportBounds.width * 2 / 3;
+      const maxHeight = fit === "contain" ? viewportBounds.height : viewportBounds.height * 2 / 3;
+      const fitScale = fit === "contain" ? Math.min(maxWidth / naturalWidth, maxHeight / naturalHeight) : Math.min(maxWidth / naturalWidth, maxHeight / naturalHeight, 1);
       const nextMatrix = new this.scope.Matrix();
       nextMatrix.translate({
         x: center.x,
@@ -63525,7 +63652,7 @@ var RenderableModel = class extends import_eventemitter3.default {
     if (model.root.doc) {
       model.root.doc.transact(() => {
         model.root.set(ElementModel.KEYS.pointsMatrix, values);
-      }, elementsUndoOrigin);
+      }, model.isBackground ? backgroundElementsUndoOrigin : elementsUndoOrigin);
     } else {
       model.root.set(ElementModel.KEYS.pointsMatrix, values);
     }
@@ -63785,7 +63912,7 @@ var RenderableModel = class extends import_eventemitter3.default {
       if (shadow) {
         yMap.set(ElementModel.KEYS.shadow, "layer");
       }
-      yMap.set(ElementModel.KEYS.points, new Y12.Array());
+      yMap.set(ElementModel.KEYS.points, Y12.Array.from([x, y]));
       yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
       yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
       yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
@@ -63793,7 +63920,6 @@ var RenderableModel = class extends import_eventemitter3.default {
       this.elements.set(uuid, yMap);
     }, elementsUndoOrigin);
     pointTextModel.bindObserver();
-    pointTextModel.setPoints([x, y]);
     pointTextModel.fontSize = this.toolbarModel.fontSize;
     pointTextModel.fontFamily = this.toolbarModel.fontFamily;
     this.initElement(pointTextModel);
@@ -63825,7 +63951,7 @@ var RenderableModel = class extends import_eventemitter3.default {
     });
   }
 };
-var import_lodash7 = __toESM2(require_lodash(), 1);
+var import_lodash8 = __toESM2(require_lodash(), 1);
 function Point(x, y) {
   this.X = x;
   this.Y = y;
@@ -64068,7 +64194,7 @@ var Recognizer = class {
     let maxX = -Number.MAX_VALUE;
     let minY = Number.MAX_VALUE;
     let maxY = -Number.MAX_VALUE;
-    const result = this.dollar.Recognize((0, import_lodash7.chunk)(points, 3).map((v) => {
+    const result = this.dollar.Recognize((0, import_lodash8.chunk)(points, 2).map((v) => {
       minX = Math.min(minX, v[0]);
       maxX = Math.max(maxX, v[0]);
       minY = Math.min(minY, v[1]);
@@ -64116,22 +64242,33 @@ var CurveTool = class extends WhiteboardTool {
     _defineProperty19(this, "flushPendingPoints", () => {
       this.flushRafId = 0;
       if (this.elementModel && this.pendingPoints.length > 0) {
-        this.elementModel.appendPoints(this.pendingPoints);
+        const appended = this.elementModel.appendPoints(this.pendingPoints);
+        if (!appended) {
+          this.resetStrokeState();
+          return;
+        }
         this.pendingPoints = [];
       }
     });
   }
-  onMouseDown(_event) {
+  resetStrokeState() {
     this.pointCount = 0;
     this.pendingPoints = [];
     if (this.flushRafId) {
       cancelAnimationFrame(this.flushRafId);
       this.flushRafId = 0;
     }
-    if (this.elementModel) {
-      this.elementModel.dispose();
-    }
     this.elementModel = null;
+  }
+  cancelCurrentAction() {
+    this.resetStrokeState();
+  }
+  onMouseDown(_event) {
+    const previousElement = this.elementModel;
+    this.resetStrokeState();
+    if (previousElement) {
+      previousElement.dispose();
+    }
     this.modelGetter().then((model) => {
       if (model) {
         this.elementModel = model.createCurve(true);
@@ -64144,24 +64281,26 @@ var CurveTool = class extends WhiteboardTool {
     }
     const MIN_DISTANCE = 2;
     if (this.elementModel) {
+      if (!this.elementModel.isAttached()) {
+        this.resetStrokeState();
+        return;
+      }
       let lastX = 0;
       let lastY = 0;
-      if (this.pendingPoints.length >= 3) {
-        lastX = this.pendingPoints[this.pendingPoints.length - 3];
-        lastY = this.pendingPoints[this.pendingPoints.length - 2];
+      if (this.pendingPoints.length >= 2) {
+        lastX = this.pendingPoints[this.pendingPoints.length - 2];
+        lastY = this.pendingPoints[this.pendingPoints.length - 1];
       } else {
         const len = this.elementModel.points.length;
-        if (len >= 3) {
-          lastX = this.elementModel.points[len - 3];
-          lastY = this.elementModel.points[len - 2];
+        if (len >= 2) {
+          lastX = this.elementModel.points[len - 2];
+          lastY = this.elementModel.points[len - 1];
         }
       }
       const dist = Math.max(Math.abs(lastX - event.point.x), Math.abs(lastY - event.point.y));
       if (dist >= MIN_DISTANCE) {
         this.pointCount += 1;
-        const nativeEvent = event.event;
-        const pressure = nativeEvent.pointerType === "pen" && nativeEvent.pressure > 0 ? nativeEvent.pressure : 0;
-        this.pendingPoints.push(event.point.x, event.point.y, pressure);
+        this.pendingPoints.push(event.point.x, event.point.y);
         if (!this.flushRafId) {
           this.flushRafId = requestAnimationFrame(this.flushPendingPoints);
         }
@@ -64174,22 +64313,27 @@ var CurveTool = class extends WhiteboardTool {
       this.flushRafId = 0;
     }
     this.flushPendingPoints();
+    if (!this.elementModel || !this.elementModel.isAttached()) {
+      this.resetStrokeState();
+      return;
+    }
+    const currentElement = this.elementModel;
+    const currentUuid = currentElement.uuid;
+    const currentPointCount = this.pointCount;
     this.modelGetter().then((model) => {
       if (!model) {
         return;
       }
-      if (this.pointCount < 3 && this.elementModel) {
-        if (this.elementModel) {
-          model.removeElementItem(this.elementModel.uuid);
-        }
+      if (currentPointCount < 3) {
+        model.removeElementItem(currentUuid);
       }
-      if (this.elementModel) {
-        this.elementModel.shadow = "";
+      if (currentElement.isAttached()) {
+        currentElement.shadow = "";
       }
-      if (this.elementModel && event.event.metaKey) {
-        const result = this.recognizer.recognize(this.elementModel.points);
+      if (currentElement.isAttached() && event.event.metaKey) {
+        const result = this.recognizer.recognize(currentElement.points);
         if (result) {
-          model.removeElementItem(this.elementModel.uuid);
+          model.removeElementItem(currentUuid);
           if (/^rectangle/.test(result.shape)) {
             const rect = model.createRectangle(false);
             rect?.setPoints([result.minX, result.minY, result.maxX, result.maxY]);
@@ -64208,6 +64352,9 @@ var CurveTool = class extends WhiteboardTool {
           }
         }
       }
+      if (this.elementModel === currentElement) {
+        this.resetStrokeState();
+      }
     });
   }
 };
@@ -64397,6 +64544,9 @@ var SelectorTool = class extends WhiteboardTool {
     _defineProperty22(this, "showLiveCursor", false);
     this.selectElementsModel = selectElementsModel;
   }
+  isSelectableItem(item) {
+    return !!item.data.type && ["selector", "eraser", "laser"].indexOf(item.data.type) < 0 && item.data.role !== "background";
+  }
   onMouseDown(event) {
     this.from = null;
     this.to = null;
@@ -64422,7 +64572,7 @@ var SelectorTool = class extends WhiteboardTool {
       this.elementModel.setPoints([rect.topLeft.x, rect.topLeft.y, rect.size.width, rect.size.height]);
       this.selectElementsModel.clearSelectElementForSelf();
       this.scope.project.activeLayer.children.forEach((item) => {
-        if (item.data.type && ["selector", "eraser", "laser"].indexOf(item.data.type) < 0) {
+        if (this.isSelectableItem(item)) {
           if (rect.contains(item.bounds)) {
             this.selectElements.set(item.data.uuid, item.data.ownerId);
           } else {
@@ -64448,7 +64598,7 @@ var SelectorTool = class extends WhiteboardTool {
       return result;
     }, []);
     const hitResult = this.scope.project.hitTest(event.point);
-    if (hitResult && hitResult.item.data.uuid) {
+    if (hitResult && hitResult.item.data.uuid && this.isSelectableItem(hitResult.item)) {
       elements.push({
         elementId: hitResult.item.data.uuid,
         ownerId: hitResult.item.data.ownerId
@@ -64975,7 +65125,7 @@ var Editor = class extends import_eventemitter34.default {
         };
         this.rootView.style.opacity = "0";
       }
-      if (target === this.frame) {
+      if (target === this.frame && this.editorConfig?.translatable()) {
         evt.preventDefault();
         this.editMode = "translate";
         this.lastEditPoint = {
@@ -65280,7 +65430,6 @@ var Editor = class extends import_eventemitter34.default {
     this.shadowContainer.remove();
     this.shadowScope.project.activeLayer.addChild(this.shadowContainer);
     this.targets.forEach((model) => {
-      console.log("[][][] translateShadow model", model.root._dEH);
       model.shadow = this.shadowContainer.data.uuid;
     });
   }
@@ -66141,6 +66290,9 @@ var EraserTool = class extends WhiteboardTool {
       this.elementModel.appendPoints([event.point.x, event.point.y]);
     }
     this.scope.project.activeLayer.children.forEach((item) => {
+      if (item.data.role === "background") {
+        return;
+      }
       if (item.data.type && ["selector", "eraser", "laser"].indexOf(item.data.type) < 0 && item.hitTest(event.point, {
         segments: true,
         stroke: true,
@@ -66151,6 +66303,9 @@ var EraserTool = class extends WhiteboardTool {
       }
     });
     this.shadowScope.project.activeLayer.children.forEach((item) => {
+      if (item.data.role === "background") {
+        return;
+      }
       if (item.data.type && ["selector", "eraser", "laser"].indexOf(item.data.type) < 0 && item.hitTest(event.point, {
         segments: true,
         stroke: true,
@@ -66592,16 +66747,7 @@ var IndexedNavigation = class extends import_eventemitter311.default {
     return this.pageModel.pageList().filter((id) => /^_i_/.test(id));
   }
   get head() {
-    const headId = Object.keys(this.list).find((key) => {
-      return this.list[key] && this.list[key].prev === "";
-    });
-    if (!headId) {
-      (0, import_forge_room13.log)("indexed navigation confusion", {
-        list: JSON.stringify(this.list)
-      }, "error");
-      throw new Error("indexed navigation confusion");
-    }
-    return headId;
+    return this.ensureValidList().head;
   }
   get lastNodeId() {
     let currentId = this.head;
@@ -66621,7 +66767,8 @@ var IndexedNavigation = class extends import_eventemitter311.default {
     _defineProperty36(this, "list", {});
     _defineProperty36(this, "hasPermission", void 0);
     _defineProperty36(this, "handleIndexedPageMapUpdate", (_evt) => {
-      this.list = this.indexedPageMap.get("list");
+      this.list = this.normalizeList(this.indexedPageMap.get("list")) ?? {};
+      this.ensureValidList("update");
       const needRemoveList = this.pageModel.pageList().filter((v) => /^_i_/.test(v) && Object.keys(this.list).indexOf(v) < 0);
       const needAddList = Object.keys(this.list).filter((v) => this.pageModel.pageList().indexOf(v) < 0);
       this.indexedPageMap.doc.transact(() => {
@@ -66654,11 +66801,156 @@ var IndexedNavigation = class extends import_eventemitter311.default {
       this.indexedPageMap.set("list", this.list);
       this.idPool.add("_i_");
     } else {
-      this.list = this.indexedPageMap.get("list");
+      this.list = this.normalizeList(this.indexedPageMap.get("list")) ?? {};
       Object.keys(this.list).forEach((id) => this.idPool.add(id));
+      this.ensureValidList("constructor");
     }
     this.indexedPageMap.observe(this.handleIndexedPageMapUpdate);
   }
+  normalizeList(list) {
+    if (!list || typeof list !== "object" || Array.isArray(list)) {
+      return null;
+    }
+    const nextList = {};
+    for (const [id, node] of Object.entries(list)) {
+      if (!/^_i_/.test(id) || !node || typeof node !== "object") {
+        return null;
+      }
+      const {
+        prev,
+        next
+      } = node;
+      if (typeof prev !== "string" || typeof next !== "string") {
+        return null;
+      }
+      nextList[id] = {
+        prev,
+        next
+      };
+    }
+    return nextList;
+  }
+  validateList(list) {
+    const ids = Object.keys(list);
+    if (ids.length === 0) {
+      return {
+        valid: false,
+        reason: "empty list"
+      };
+    }
+    const heads = ids.filter((id) => list[id].prev === "");
+    if (heads.length !== 1) {
+      return {
+        valid: false,
+        reason: `expected one head, got ${heads.length}`
+      };
+    }
+    for (const id of ids) {
+      const node = list[id];
+      if (node.prev && !list[node.prev]) {
+        return {
+          valid: false,
+          reason: `missing prev node ${node.prev}`
+        };
+      }
+      if (node.next && !list[node.next]) {
+        return {
+          valid: false,
+          reason: `missing next node ${node.next}`
+        };
+      }
+      if (node.prev && list[node.prev].next !== id) {
+        return {
+          valid: false,
+          reason: `prev link mismatch for ${id}`
+        };
+      }
+      if (node.next && list[node.next].prev !== id) {
+        return {
+          valid: false,
+          reason: `next link mismatch for ${id}`
+        };
+      }
+    }
+    const visited = /* @__PURE__ */ new Set();
+    let currentId = heads[0];
+    while (currentId) {
+      if (visited.has(currentId)) {
+        return {
+          valid: false,
+          reason: `cycle at ${currentId}`
+        };
+      }
+      visited.add(currentId);
+      currentId = list[currentId].next;
+    }
+    if (visited.size !== ids.length) {
+      return {
+        valid: false,
+        reason: "detached nodes"
+      };
+    }
+    return {
+      valid: true,
+      head: heads[0]
+    };
+  }
+  createList(ids) {
+    return ids.reduce((list, id, index) => {
+      list[id] = {
+        prev: ids[index - 1] ?? "",
+        next: ids[index + 1] ?? ""
+      };
+      return list;
+    }, {});
+  }
+  repairList(reason) {
+    const pageIds = this.idList;
+    const ids = pageIds.length > 0 ? pageIds : Object.keys(this.list).filter((id) => /^_i_/.test(id));
+    const nextIds = ids.length > 0 ? ids : ["_i_"];
+    const nextList = this.createList(nextIds);
+    (0, import_forge_room13.log)("indexed navigation recovered", {
+      reason,
+      pageList: JSON.stringify(this.pageModel.pageList()),
+      list: JSON.stringify(this.list),
+      nextList: JSON.stringify(nextList)
+    }, "warn");
+    const apply = () => {
+      for (const id of nextIds) {
+        if (this.pageModel.pageList().indexOf(id) < 0) {
+          this.pageModel.addPage(id);
+        }
+      }
+      this.list = nextList;
+      this.indexedPageMap.set("list", nextList);
+    };
+    if (this.indexedPageMap.doc) {
+      this.indexedPageMap.doc.transact(apply);
+    } else {
+      apply();
+    }
+    nextIds.forEach((id) => this.idPool.add(id));
+    return nextIds[0];
+  }
+  ensureValidList() {
+    let context = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : "read";
+    const normalized = this.normalizeList(this.list);
+    if (!normalized) {
+      return {
+        head: this.repairList(`${context}: invalid list`)
+      };
+    }
+    this.list = normalized;
+    const validation = this.validateList(this.list);
+    if (!validation.valid) {
+      return {
+        head: this.repairList(`${context}: ${validation.reason}`)
+      };
+    }
+    return {
+      head: validation.head
+    };
+  }
   getNextId() {
     const cache = Array.from(this.idPool).filter((id) => this.idList.indexOf(id) < 0);
     if (cache.length > 0) {
@@ -67590,7 +67882,6 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
         this.emitter.emit("elementDeselected", userId);
         return;
       }
-      editor.show();
       const targetLayerId = this.userMap(userId).get(WhiteboardKeys.currentPage);
       const selfLayerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
       if (targetLayerId !== selfLayerId || !this.layers.has(targetLayerId)) {
@@ -67598,7 +67889,13 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
       }
       const elementModels = elements.map((id) => {
         return this.layers.get(targetLayerId).elementModels.get(id);
-      }).filter((v) => !!v);
+      }).filter((model) => !!model && !model.isBackground);
+      if (elementModels.length === 0) {
+        editor.hidden();
+        this.emitter.emit("elementDeselected", userId);
+        return;
+      }
+      editor.show();
       editor.setTargets(elementModels);
       if (elementModels.length === 1) {
         const model = elementModels[0];
@@ -67790,14 +68087,17 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
         this.camera.resetViewMatrixToMain();
       }
     };
-    this.emitter.insertImage = (src, pageId) => {
+    this.emitter.insertImage = (src, options) => {
       if (!/https/.test(src)) {
         (0, import_forge_room.log)("[@netless/forge-whiteboard] invalid image url, src needs to be in the HTTPS protocol.", {
           src
         }, "warn");
         return;
       }
-      let targetPageId = pageId;
+      const normalizedOptions = typeof options === "string" ? {
+        pageId: options
+      } : options ?? {};
+      let targetPageId = normalizedOptions.pageId;
       if (!targetPageId) {
         targetPageId = this.pageModel.getCurrentPage(this.userManager.selfId);
       }
@@ -67805,13 +68105,16 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
         (0, import_forge_room.log)("[@netless/forge-whiteboard] page not found", {}, "warn");
         return;
       }
-      this.layers.get(targetPageId)?.createImage(src);
+      this.layers.get(targetPageId)?.createImage(src, normalizedOptions.fit ?? "legacy", normalizedOptions.role ?? "normal");
     };
     this.emitter.removeElement = (pageId, elementId) => {
       if (!this.layers.has(pageId)) {
         (0, import_forge_room.log)("[@netless/forge-whiteboard] page not found", {}, "warn");
         return;
       }
+      if (this.layers.get(pageId)?.isBackgroundElement(elementId)) {
+        return;
+      }
       this.layers.get(pageId)?.removeElementItem(elementId);
     };
     this.emitter.getViewModel = (userId) => {
@@ -67862,7 +68165,11 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
         if (model) {
           if (model.elements.doc) {
             model.elements.doc.transact(() => {
-              model.elements.clear();
+              for (const key of Array.from(model.elements.keys())) {
+                if (!model.isBackgroundElement(key)) {
+                  model.elements.delete(key);
+                }
+              }
             }, elementsUndoOrigin);
           } else {
             model.elementModels.clear();
@@ -68274,7 +68581,9 @@ var WhiteboardApplication = class _WhiteboardApplication extends import_forge_ro
     const at = this.findElementIndex(element.data.index, parent);
     for (let i = at; i >= 0; i--) {
       const child = children[i - 1];
-      if (!child || child.data.index < element.data.index || child.data.uuid < element.data.uuid) {
+      const childRole = child?.data.role === "background" ? 0 : 1;
+      const elementRole = element.data.role === "background" ? 0 : 1;
+      if (!child || childRole < elementRole || childRole === elementRole && child.data.index < element.data.index || childRole === elementRole && child.data.index === element.data.index && child.data.uuid < element.data.uuid) {
         parent.insertChild(i, element);
         break;
       }