@netless/forge-whiteboard 1.2.0-beta.3 → 1.2.1

package/dist/whiteboard.esm.js

@@ -25794,6 +25794,12 @@ function ae(e, t = {}) {
 // src/model/renderable/ElementModel.ts
 import * as Y from "yjs";
 import { removeDeepObserver } from "@netless/forge-room";
+
+// src/utils/constant.ts
+var elementsUndoOrigin = "elementsUndoOrigin";
+var backgroundElementsUndoOrigin = "backgroundElementsUndoOrigin";
+
+// src/model/renderable/ElementModel.ts
 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;
 }
@@ -25823,6 +25829,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);
   }
@@ -25881,6 +25893,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);
@@ -25966,16 +25981,12 @@ var ElementModel = class _ElementModel {
     }
   }
   bindObserver() {
-    const beforeL = this.root._eH?.l?.length ?? -1;
-    const beforeDL = this.root._dEH?.l?.length ?? -1;
     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() {
   }
@@ -26014,62 +26025,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) {
@@ -26077,25 +26107,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);
@@ -26109,7 +26147,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() {
@@ -26120,7 +26164,6 @@ var ElementModel = class _ElementModel {
     this.subDispose();
   }
   disposeObserver() {
-    console.log(`[][][] disposeObserver uuid=${this.uuid}`);
     removeDeepObserver(this.root, this.handlePropChange);
   }
 };
@@ -26161,6 +26204,7 @@ var EditorConfig = class _EditorConfig {
   constructor() {
     _defineProperty2(this, "resizeModel", () => "eight");
     _defineProperty2(this, "uniformScale", () => false);
+    _defineProperty2(this, "translatable", () => true);
     _defineProperty2(this, "controlPoints", []);
   }
   merge(other) {
@@ -26169,6 +26213,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;
   }
@@ -26637,7 +26682,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;
@@ -26645,7 +26697,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) => {
@@ -26656,7 +26715,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) {
@@ -26673,11 +26739,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;
@@ -26688,6 +26769,8 @@ var WhiteboardTool = class {
     this.tool.onMouseDrag = this.onMouseDragSelf;
     this.tool.onMouseUp = this.onMouseUpSelf;
   }
+  cancelCurrentAction() {
+  }
 };
 
 // src/tool/LineTool.ts
@@ -27068,7 +27151,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);
@@ -27439,9 +27521,6 @@ var RectangleModel = class extends ElementModel {
   }
 };
 
-// src/utils/constant.ts
-var elementsUndoOrigin = "elementsUndoOrigin";
-
 // src/model/renderable/EraserModel.ts
 var import_lodash5 = __toESM(require_lodash(), 1);
 import * as Y9 from "yjs";
@@ -27722,7 +27801,6 @@ 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_lodash6.chunk)(points, 2).slice(this.sliceBegin);
     return groupPoints.map((_ref) => {
       let [x, y] = _ref;
@@ -27992,6 +28070,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);
@@ -28020,8 +28099,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;
   }
@@ -28104,6 +28187,7 @@ var RenderableModel = class extends EventEmitter {
   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) => {
@@ -28165,7 +28249,32 @@ var RenderableModel = class extends EventEmitter {
   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() {
@@ -28176,15 +28285,21 @@ var RenderableModel = class extends EventEmitter {
     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);
@@ -28192,9 +28307,47 @@ var RenderableModel = class extends EventEmitter {
     model.bindObserver();
     model.root.set("src", src);
     model.ownerId = this.userManager.selfId;
-    this.fitImageToViewport(src, model);
+    this.fitImageToViewport(src, model, fit);
   }
-  fitImageToViewport(src, model) {
+  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, fit) {
     const center = this.scope.project.view.center;
     const fallbackMatrix = new this.scope.Matrix();
     fallbackMatrix.translate({
@@ -28211,9 +28364,9 @@ var RenderableModel = class extends EventEmitter {
         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,
@@ -28236,7 +28389,7 @@ var RenderableModel = class extends EventEmitter {
     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);
     }
@@ -28834,22 +28987,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);
@@ -28862,6 +29026,10 @@ 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 >= 2) {
@@ -28890,22 +29058,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]);
@@ -28924,6 +29097,9 @@ var CurveTool = class extends WhiteboardTool {
           }
         }
       }
+      if (this.elementModel === currentElement) {
+        this.resetStrokeState();
+      }
     });
   }
 };
@@ -29121,6 +29297,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;
@@ -29146,7 +29325,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 {
@@ -29172,7 +29351,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
@@ -29716,7 +29895,7 @@ var Editor = class extends EventEmitter5 {
         };
         this.rootView.style.opacity = "0";
       }
-      if (target === this.frame) {
+      if (target === this.frame && this.editorConfig?.translatable()) {
         evt.preventDefault();
         this.editMode = "translate";
         this.lastEditPoint = {
@@ -30021,7 +30200,6 @@ var Editor = class extends EventEmitter5 {
     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;
     });
   }
@@ -30902,6 +31080,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,
@@ -30912,6 +31093,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,
@@ -31371,16 +31555,7 @@ var IndexedNavigation = class extends EventEmitter11 {
     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) {
-      log3("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;
@@ -31400,7 +31575,8 @@ var IndexedNavigation = class extends EventEmitter11 {
     _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(() => {
@@ -31433,11 +31609,156 @@ var IndexedNavigation = class extends EventEmitter11 {
       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);
+    log3("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) {
@@ -32387,7 +32708,6 @@ var WhiteboardApplication = class _WhiteboardApplication extends AbstractApplica
         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)) {
@@ -32395,7 +32715,13 @@ var WhiteboardApplication = class _WhiteboardApplication extends AbstractApplica
       }
       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];
@@ -32587,14 +32913,17 @@ var WhiteboardApplication = class _WhiteboardApplication extends AbstractApplica
         this.camera.resetViewMatrixToMain();
       }
     };
-    this.emitter.insertImage = (src, pageId) => {
+    this.emitter.insertImage = (src, options) => {
       if (!/https/.test(src)) {
         log4("[@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);
       }
@@ -32602,13 +32931,16 @@ var WhiteboardApplication = class _WhiteboardApplication extends AbstractApplica
         log4("[@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)) {
         log4("[@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) => {
@@ -32659,7 +32991,11 @@ var WhiteboardApplication = class _WhiteboardApplication extends AbstractApplica
         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();
@@ -33071,7 +33407,9 @@ var WhiteboardApplication = class _WhiteboardApplication extends AbstractApplica
     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;
       }