@netless/forge-slide 0.1.1-alpha.1 → 0.1.1-alpha.11

package/dist/index.js

@@ -30,9 +30,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// ../../node_modules/.pnpm/@netless+slide@1.4.15/node_modules/@netless/slide/lib/Slide.js
+// ../../node_modules/.pnpm/@netless+slide@1.4.21/node_modules/@netless/slide/lib/Slide.js
 var require_Slide = __commonJS({
-  "../../node_modules/.pnpm/@netless+slide@1.4.15/node_modules/@netless/slide/lib/Slide.js"(exports, module2) {
+  "../../node_modules/.pnpm/@netless+slide@1.4.21/node_modules/@netless/slide/lib/Slide.js"(exports, module2) {
     module2.exports = function(t) {
       var e = {};
       function i(n) {
@@ -5703,7 +5703,7 @@ var require_Slide = __commonJS({
           }
           return void 0 === d && (d = setTimeout(b2, e2)), c;
         }
-        return e2 = o(e2) || 0, n(i2) && (m = !!i2.leading, u = (g = "maxWait" in i2) ? s(o(i2.maxWait) || 0, e2) : u, v = "trailing" in i2 ? !!i2.trailing : v), E.cancel = function() {
+        return e2 = o(e2) || 0, n(i2) && (m = !!i2.leading, u = (g = "maxWait" in i2) ? s(o(i2.maxWait) || 0, e2) : u, v = "trailing" in i2 ? !!i2.trailing : v), console.log("max wait", u), E.cancel = function() {
           void 0 !== d && clearTimeout(d), f = 0, l2 = p = h = d = void 0;
         }, E.flush = function() {
           return void 0 === d ? c : T(r());
@@ -29372,6 +29372,7 @@ void main(void){
             const r3 = e2[t3], o3 = e2[t3 + 1], [s3, a3] = o3.split(",").map((t4) => Number(t4) / 100);
             i2.push(r3), n2.push({ x: s3, y: a3 });
           }
+          if (n2.length < 4) return false;
           if (this.isSquare(i2, n2)) return true;
           for (let t3 = 0; t3 < 3; t3++) {
             const e3 = n2[t3], i3 = n2[t3 + 1];
@@ -29786,7 +29787,9 @@ void main(void){
               }
               this.delayHide();
             }
-          }, this.targetId = t2.targetId, this.ctx = t2.ctx, this.height = t2.height, this.width = t2.width, this.target = t2.target, this.media = t2.media, this.info = t2.info, this.shapeId = t2.shapeId, this.canvasElement = t2.canvasElement, "video" === this.media.type && (this.isVideo = true), this.getMedianContainer(), this.createMediaController(), this.info.cut && (this.start = null !== (e2 = this.info.cut.start) && void 0 !== e2 ? e2 : 0, this.end = null !== (i2 = this.info.cut.end) && void 0 !== i2 ? i2 : 0), this.info.bookmarkList && (this.bookmarkList = this.info.bookmarkList.sort((t3, e3) => t3.time - e3.time));
+          }, this.targetId = t2.targetId, this.ctx = t2.ctx, this.height = t2.height, this.width = t2.width, this.target = t2.target, this.media = t2.media, this.info = t2.info, this.shapeId = t2.shapeId, this.canvasElement = t2.canvasElement, "video" === this.media.type && (this.isVideo = true), this.getMedianContainer(), this.createMediaController(), this.info.cut && (this.start = null !== (e2 = this.info.cut.start) && void 0 !== e2 ? e2 : 0, this.end = null !== (i2 = this.info.cut.end) && void 0 !== i2 ? i2 : 0), this.info.bookmarkList && (this.bookmarkList = this.info.bookmarkList.sort((t3, e3) => t3.time - e3.time)), this.ctx.globalEventHub.on("togglePlayStatus", (t3) => {
+            t3 === this.targetId && (this.media.isPlaying ? this.pauseMediaFromCtrl(false) : this.playMediaFromCtrl(false));
+          });
         }
         getMedianContainer() {
           var t2;
@@ -30307,9 +30310,10 @@ void main(void){
               const a3 = null === (t2 = this.backgroundGraphics) || void 0 === t2 ? void 0 : t2.getPictureMask();
               if ((null === (e2 = this.backgroundGraphics) || void 0 === e2 ? void 0 : e2.isNeedMask(s2.width, s2.height)) && a3 && (s2.mask = a3, this.effectContainer.addChild(a3)), s2.width = this.designWidth, s2.height = this.designHeight, s2 instanceof im && this.ctx.slideScopeEventHub.on("slide-render", this.onSlideRenderPlayGif), this.effectContainer.addChild(s2), this.media) {
                 let t3 = this.media.src;
-                if ("audio" === this.media.type && /mp4$/.test(t3) && (t3 = t3.replace(/mp4$/, "mp3")), this.ctx.urlInterrupter) {
-                  const e3 = Date.now();
-                  t3 = yield this.ctx.urlInterrupter(t3), this.ctx.logger.info("redirect media url by interrupter. time: " + (Date.now() - e3), this.ctx.taskId);
+                const [e3, i3] = t3.split("dynamicConvert");
+                if (i3 && (t3 = `${this.ctx.prefix}${i3}`), "audio" === this.media.type && /mp4$/.test(t3) && (t3 = t3.replace(/mp4$/, "mp3")), this.ctx.urlInterrupter) {
+                  const e4 = Date.now();
+                  t3 = yield this.ctx.urlInterrupter(t3), this.ctx.logger.info("redirect media url by interrupter. time: " + (Date.now() - e4), this.ctx.taskId);
                 }
                 this.ctx.loaderDelegate && (t3 = this.ctx.loaderDelegate.redirectMedia(t3), this.ctx.logger.info(`redirect media url to ${t3} by delegate.`, this.ctx.taskId)), this.media.src = t3;
               }
@@ -30759,12 +30763,18 @@ void main(void){
                 if ("num" === e2 && this.timingTarget) {
                   const e3 = new I_(t4, this.timingTarget);
                   this.keyFrames.push([t4.time, e3]);
+                } else if ("str" === e2 && this.timingTarget) {
+                  const e3 = new R_(t4, this.timingTarget);
+                  this.keyFrames.push([t4.time, e3]);
                 }
               }
               const t3 = { time: 1, val: { type: "string", value: this.json.to }, fmla: "" };
               if ("num" === e2 && this.timingTarget) {
                 const e3 = new I_(t3, this.timingTarget);
                 this.keyFrames.push([t3.time, e3]);
+              } else if ("str" === e2 && this.timingTarget) {
+                const e3 = new R_(t3, this.timingTarget);
+                this.keyFrames.push([t3.time, e3]);
               }
             } else if (this.json.by) {
               const i2 = { time: 0, val: { type: "string", value: this.json.cBhvr.attrList[0] }, fmla: "" };
@@ -31129,7 +31139,8 @@ void main(void){
           const { json: e2, isIterate: i2, isSub: n2, eventHub: r2, ctx: o2, parent: s2, iterateType: a3, iterateIndex: l3, iterateId: h2, isInInteractiveSeq: u2, fromSeqId: c2 } = t2;
           this.json = e2, this.id = e2.cMediaNode.ctn.id, this.commonTimeNode = new Ey({ json: e2.cMediaNode.ctn, isSub: n2, eventHubs: { global: r2, runtime: this.runtimeNodeEventHub }, ctx: o2, parent: s2, isIterate: i2, iterateType: a3, iterateIndex: l3, iterateId: h2, isInInteractiveSeq: u2, fromSeqId: c2 });
           let d2 = e2.cMediaNode.tgtEl;
-          o2.loaderDelegate && (d2 = o2.loaderDelegate.redirectMedia(d2), o2.logger.info(`redirect media url from ${e2.cMediaNode.tgtEl} to ${d2} by delegate.`, o2.taskId)), this.audio = new c_(d2, o2.runningAudio, void 0, { enableWebAudio: o2.enableWebAudio }), o2.activeMedia.add(this.audio), this.commonTimeNode.on("timelineStart", () => {
+          const [p2, f2] = d2.split("dynamicConvert");
+          f2 && (d2 = `${o2.prefix}${f2}`), o2.loaderDelegate && (d2 = o2.loaderDelegate.redirectMedia(d2), o2.logger.info(`redirect media url from ${e2.cMediaNode.tgtEl} to ${d2} by delegate.`, o2.taskId)), this.audio = new c_(d2, o2.runningAudio, void 0, { enableWebAudio: o2.enableWebAudio }), o2.activeMedia.add(this.audio), this.commonTimeNode.on("timelineStart", () => {
             this.audio.volume(o2.volumeAdjuster.volume), this.audio.play();
           }), this.commonTimeNode.on("seekToStart", this.stopAudio), this.commonTimeNode.on("seekToEnd", this.stopAudio), this.commonTimeNode.on("timeNodeDestroy", this.destroy), this.ctx = o2, this.ctx.volumeAdjuster.on("update", this.onVolumeUpdate);
         }
@@ -31992,7 +32003,7 @@ void main(void){
         createCtx(t2) {
           const { task: e2 } = this.stageStates[t2];
           e2.addMTask(() => Dy(this, void 0, void 0, function* () {
-            const e3 = new Gm(this.loader), i2 = new Za.a(), n2 = { taskId: this.taskId, mode: this.mode, renderer: this.renderer, graphicsTexture: new Km(this.maxResolution), stageWidth: 0, stageHeight: 0, ticker: this.ticker, timingTargets: new $m(i2), eventHub: i2, view: this.view, medias: /* @__PURE__ */ Object.create(null), lastViewedIndex: 0, conflictTimeNodeManager: new Qm(), clock: this.clock, spriteTexture: e3, slideIndex: t2, objectPoolGroup: this.objPoolGroup, hasBackgroundFillShape: false, slideScopeEventHub: new Za.a(), logger: this.logger, sdfManager: this.sdfManager, loaderDelegate: this.loaderDelegate, runningAudio: this.runningAudio, activeMedia: this.activeMedia, isPlayerPaused: this.isPlayerPaused, timingEventHub: new Za.a(), maxResolution: this.maxResolution, animatedIds: /* @__PURE__ */ new Set(), volumeAdjuster: this.volumeAdjuster, forceCanvas: this.forceCanvas, globalEventHub: this.globalEventHub, latestChangeFullscreenTargetId: "", isRendering: false, urlInterrupter: this.urlInterrupter, enableWebAudio: this.enableWebAudio };
+            const e3 = new Gm(this.loader), i2 = new Za.a(), n2 = { taskId: this.taskId, prefix: this.url, mode: this.mode, renderer: this.renderer, graphicsTexture: new Km(this.maxResolution), stageWidth: 0, stageHeight: 0, ticker: this.ticker, timingTargets: new $m(i2), eventHub: i2, view: this.view, medias: /* @__PURE__ */ Object.create(null), lastViewedIndex: 0, conflictTimeNodeManager: new Qm(), clock: this.clock, spriteTexture: e3, slideIndex: t2, objectPoolGroup: this.objPoolGroup, hasBackgroundFillShape: false, slideScopeEventHub: new Za.a(), logger: this.logger, sdfManager: this.sdfManager, loaderDelegate: this.loaderDelegate, runningAudio: this.runningAudio, activeMedia: this.activeMedia, isPlayerPaused: this.isPlayerPaused, timingEventHub: new Za.a(), maxResolution: this.maxResolution, animatedIds: /* @__PURE__ */ new Set(), volumeAdjuster: this.volumeAdjuster, forceCanvas: this.forceCanvas, globalEventHub: this.globalEventHub, latestChangeFullscreenTargetId: "", isRendering: false, urlInterrupter: this.urlInterrupter, enableWebAudio: this.enableWebAudio };
             this.stageCtxs[t2] = n2;
           }), "@StagePool[createCtx]");
         }
@@ -32288,11 +32299,15 @@ void main(void){
               this.app.view.addEventListener("mouseover", e4, false);
               const r3 = { handleEvent: () => {
                 this.fullscreenOnMousemove({ index: i3, targetId: n3 });
+              } }, o3 = { handleEvent: () => {
+                var t5;
+                null === (t5 = this.currentStage) || void 0 === t5 || t5.ctx.globalEventHub.emit("togglePlayStatus", n3);
               } };
-              this.app.view.addEventListener("mousemove", r3, false), this.cacheFunctionMap.set("mouseover", e4), this.cacheFunctionMap.set("mousemove", r3), this.cacheFunctionMap.set("mouseout", t4);
+              this.app.view.addEventListener("mousemove", r3, false), this.app.view.addEventListener("click", o3, false), this.cacheFunctionMap.set("click", o3), this.cacheFunctionMap.set("mouseover", e4), this.cacheFunctionMap.set("mousemove", r3), this.cacheFunctionMap.set("mouseout", t4);
             } else {
               const t4 = { handleEvent: () => {
-                this.fullscreenOnMousemove({ index: i3, targetId: n3 });
+                var t5;
+                this.fullscreenOnMousemove({ index: i3, targetId: n3 }), null === (t5 = this.currentStage) || void 0 === t5 || t5.ctx.globalEventHub.emit("togglePlayStatus", n3);
               } };
               this.app.view.addEventListener("touchstart", t4, false), this.cacheFunctionMap.set("touchstart", t4);
             }
@@ -32602,7 +32617,7 @@ void main(void){
           });
         }
         clearFullscreenEventListenersWithAppView() {
-          ["mousemove", "mouseout", "mouseover", "touchstart", "pointerdown"].forEach((t2) => {
+          ["mousemove", "click", "mouseout", "mouseover", "touchstart", "pointerdown"].forEach((t2) => {
             this.cacheFunctionMap.has(t2) && (this.app.view.removeEventListener(t2, this.cacheFunctionMap.get(t2), false), this.cacheFunctionMap.delete(t2));
           });
         }
@@ -34224,23 +34239,44 @@ void main(void){
           };
         }
       };
-      function sT(t2, e2, i2, n2) {
+      function sT(t2, e2, i2, n2, r2) {
         return rT(this, void 0, void 0, function() {
-          var r2, o2, s2, a3;
-          return oT(this, function(l3) {
-            switch (l3.label) {
+          var o2, s2, a3, l3, h2, u2;
+          return oT(this, function(c2) {
+            switch (c2.label) {
               case 0:
-                return r2 = document.createElement("div"), (o2 = new yT({ anchor: r2, renderOptions: { minFPS: 1, maxFPS: 1, resolution: 1, maxResolutionLevel: i2, forceCanvas: true }, mode: "local", interactive: false, useLocalCache: true })).setResource(t2, e2), [4, o2.getSlideCountAsync()];
+                return o2 = document.createElement("div"), (s2 = new yT({ anchor: o2, renderOptions: { minFPS: 1, maxFPS: 1, resolution: 1, maxResolutionLevel: i2, forceCanvas: true }, mode: "local", interactive: false, useLocalCache: true })).setResource(t2, e2), [4, s2.getSlideCountAsync()];
               case 1:
-                s2 = l3.sent(), a3 = 1, l3.label = 2;
+                a3 = c2.sent(), c2.label = 2;
               case 2:
-                return a3 <= s2 ? [4, o2.player.stagePool.preload(a3, true)] : [3, 5];
+                if (c2.trys.push([2, 12, 13, 14]), !(r2 && r2.length > 0)) return [3, 7];
+                l3 = r2.filter(function(t3, e3) {
+                  return r2.indexOf(t3) === e3;
+                }), u2 = 0, c2.label = 3;
               case 3:
-                l3.sent(), n2(Math.round(a3 / s2 * 100) / 100), l3.label = 4;
+                return u2 < l3.length ? (h2 = l3[u2]) > 0 && h2 <= a3 ? [4, s2.player.stagePool.preload(h2, true)] : [3, 5] : [3, 6];
               case 4:
-                return a3++, [3, 2];
+                c2.sent(), n2(Math.round((u2 + 1) / l3.length * 100) / 100), c2.label = 5;
               case 5:
-                return o2.destroy(), [2];
+                return u2++, [3, 3];
+              case 6:
+                return [3, 11];
+              case 7:
+                u2 = 1, c2.label = 8;
+              case 8:
+                return u2 <= a3 ? [4, s2.player.stagePool.preload(u2, true)] : [3, 11];
+              case 9:
+                c2.sent(), n2(Math.round(u2 / a3 * 100) / 100), c2.label = 10;
+              case 10:
+                return u2++, [3, 8];
+              case 11:
+                return [3, 14];
+              case 12:
+                throw c2.sent();
+              case 13:
+                return s2.destroy(), [7];
+              case 14:
+                return [2];
             }
           });
         });
@@ -34376,7 +34412,7 @@ void main(void){
       }
       var mT = { syncDispatch: "syncDispatch", syncReceive: "syncReceive", syncEventLag: "syncEventLag", renderStart: "renderStart", renderEnd: "renderEnd", renderError: "renderError", slideChange: "slideChange", mainSeqStepStart: "mainSeqStepStart", mainSeqStepEnd: "mainSeqStepEnd", animateStart: "animateStart", animateEnd: "animateEnd", stateChange: "stateChange", slideStepEnd: "slideEnd", slideStepStart: "slideStart" }, gT = { taskId: "", url: "", currentSlideIndex: -1, mainSeqStep: -1, mainSeqState: null, mediaState: /* @__PURE__ */ Object.create(null), interactiveSeqState: /* @__PURE__ */ Object.create(null) }, vT = "";
       try {
-        vT = "1.4.14";
+        vT = "1.4.20";
       } catch (t2) {
         vT = "dev";
       }
@@ -34395,7 +34431,7 @@ void main(void){
             return n3.frameResizeHandler();
           }), n3.timestamp = function() {
             return Date.now();
-          }, n3.mode = "local", n3.enableGlobalClick = false, n3.lastEmitedState = null, n3.playerController = null, n3.isInitResized = false, n3.cacheImage = document.createElement("img"), n3.isTouchStart = false, n3.touchStartId = void 0, n3.taskId = "", n3.volumeAdjuster = new Hy(), n3.designWidth = 0, n3.designHeight = 0, n3._slideCount = 0, n3._dispatchIncrId = 0, n3._receiveIncrId = 0, n3.resizeView = Ky()(n3._resizeView.bind(n3), 50), n3.handleViewClick = Ky()(n3._handleViewClick.bind(n3), 300), n3.resourceList = [], n3._updateVolumeByStaticAdjuster = function(t3) {
+          }, n3.mode = "local", n3.enableGlobalClick = false, n3.lastEmitedState = null, n3.playerController = null, n3.isInitResized = false, n3.cacheImage = document.createElement("img"), n3.isTouchStart = false, n3.touchStartId = void 0, n3.taskId = "", n3.volumeAdjuster = new Hy(), n3.designWidth = 0, n3.designHeight = 0, n3._slideCount = 0, n3._dispatchIncrId = 0, n3._receiveIncrId = 0, n3.resizeView = Ky()(n3._resizeView.bind(n3), 50), n3.handleViewClick = Ky()(n3._handleViewClick.bind(n3), 300, { leading: true }), n3.resourceList = [], n3._updateVolumeByStaticAdjuster = function(t3) {
             n3.volumeAdjuster.volume = t3;
           }, n3.recoverHandler = function(t3) {
             if ("@slide/_recover_" === t3.data.type && t3.data.slideId === n3.randomId) {
@@ -34577,7 +34613,7 @@ void main(void){
           return o2.setInteractive(this.interactive), o2.updateConfig(t3.renderOptions || {}), o2.on(Vy.renderStart, function(t4) {
             r2.isLoading = true, r2.emit(mT.renderStart, t4), window.postMessage({ type: "@slide/_render_start_", taskId: r2.taskId, index: t4 }, "*");
           }), o2.on(Vy.renderEnd, function(t4) {
-            r2.isLoading = false, r2.player && (r2.designHeight = r2.player.designHeight, r2.designWidth = r2.player.designWidth, r2.cacheImage.style.width = r2.player.designWidth + "px", r2.cacheImage.style.height = r2.player.designHeight + "px", r2._slideCount = r2.player.slideCount), r2.emit(mT.renderEnd, t4), window.postMessage({ type: "@slide/_render_end_", taskId: r2.taskId, index: t4 }, "*");
+            r2.isLoading = false, r2.player && (r2.designHeight = r2.player.designHeight, r2.designWidth = r2.player.designWidth, r2.cacheImage.style.width = r2.player.designWidth + "px", r2.cacheImage.style.height = r2.player.designHeight + "px", r2.cacheImage.style.maxWidth = r2.player.designWidth + "px", r2.cacheImage.style.minWidth = r2.player.designHeight + "px", r2._slideCount = r2.player.slideCount), r2.emit(mT.renderEnd, t4), window.postMessage({ type: "@slide/_render_end_", taskId: r2.taskId, index: t4 }, "*");
           }), o2.on(Vy.slideChange, function(t4) {
             r2.__slideState.currentSlideIndex = t4, r2.emitStateChange(), r2.emit(mT.slideChange, t4);
           }), o2.on(Vy.mainSeqStateChange, function(t4) {
@@ -35105,22 +35141,27 @@ void main(void){
       }(Za.a);
       null == _T || _T.clear().catch(function() {
       }), window.addEventListener("__slide_log__", yT.handleLogDownload), window.addEventListener("message", function(t2) {
+        var e2;
         if ("@slide/_request_log_" === t2.data.type) yT.handleLogReport(t2.data.sessionId).catch(function() {
         });
         else if ("@slide/_request_frozen_" === t2.data.type) yT.handleFrozenAllSlide();
         else if ("@slide/_request_release_" === t2.data.type) yT.handleReleaseAllSlide();
         else if ("@slide/_update_volume_" === t2.data.type) {
-          var e2 = 0.5;
+          var i2 = 0.5;
           try {
-            e2 = parseFloat(t2.data.volume.toString());
+            i2 = parseFloat(t2.data.volume.toString());
           } catch (t3) {
           }
-          yT.volumeAdjuster.volume = e2;
-        } else "@slide/_get_volume_" === t2.data.type ? window.postMessage({ type: "@slide/_report_volume_", volume: yT.volumeAdjuster.volume, customMessage: "@slide/_report_volume_" }, "*") : "@slide/_preload_slide_" === t2.data.type && yT.preloadResource(t2.data.taskId, t2.data.prefix, t2.data.maxResolutionLevel, function(e3) {
-          window.postMessage({ type: "@slide/_preload_slide_progress_", taskId: t2.data.taskId, progress: e3 }, "*");
-        }).catch(function(e3) {
-          window.postMessage({ type: "@slide/_preload_slide_error_", taskId: t2.data.taskId, error: e3 }, "*");
-        });
+          yT.volumeAdjuster.volume = i2;
+        } else if ("@slide/_get_volume_" === t2.data.type) window.postMessage({ type: "@slide/_report_volume_", volume: yT.volumeAdjuster.volume, customMessage: "@slide/_report_volume_" }, "*");
+        else if ("@slide/_preload_slide_" === t2.data.type) {
+          var n2 = null !== (e2 = t2.data.sessionId) && void 0 !== e2 ? e2 : Math.random().toString(32).substr(2);
+          yT.preloadResource(t2.data.taskId, t2.data.prefix, t2.data.maxResolutionLevel, function(e3) {
+            window.postMessage({ type: "@slide/_preload_slide_progress_", sessionId: n2, taskId: t2.data.taskId, progress: e3 }, "*");
+          }, t2.data.pages).catch(function(e3) {
+            window.postMessage({ type: "@slide/_preload_slide_error_", sessionId: n2, taskId: t2.data.taskId, error: e3 }, "*");
+          });
+        }
       }), window.setInterval(function() {
         yT.flushLog().catch(function() {
         });
@@ -35144,33 +35185,42 @@ var Y15 = __toESM(require("yjs"), 1);
 var Y12 = __toESM(require("yjs"), 1);
 var import_eventemitter3 = __toESM(require("eventemitter3"), 1);
 var import_uuid = require("uuid");
+var import_forge_room2 = require("@netless/forge-room");
 var Y2 = __toESM(require("yjs"), 1);
 var Y = __toESM(require("yjs"), 1);
+var import_forge_room3 = require("@netless/forge-room");
 var Y3 = __toESM(require("yjs"), 1);
 var Y4 = __toESM(require("yjs"), 1);
 var Y5 = __toESM(require("yjs"), 1);
 var Y6 = __toESM(require("yjs"), 1);
+var import_forge_room4 = require("@netless/forge-room");
 var Y7 = __toESM(require("yjs"), 1);
 var Y8 = __toESM(require("yjs"), 1);
 var Y9 = __toESM(require("yjs"), 1);
 var Y10 = __toESM(require("yjs"), 1);
-var import_eventemitter32 = __toESM(require("eventemitter3"), 1);
+var import_forge_room5 = require("@netless/forge-room");
 var Y11 = __toESM(require("yjs"), 1);
-var import_eventemitter33 = __toESM(require("eventemitter3"), 1);
+var import_eventemitter32 = __toESM(require("eventemitter3"), 1);
+var import_forge_room6 = require("@netless/forge-room");
 var Y13 = __toESM(require("yjs"), 1);
+var import_eventemitter33 = __toESM(require("eventemitter3"), 1);
+var import_forge_room7 = require("@netless/forge-room");
 var import_eventemitter34 = __toESM(require("eventemitter3"), 1);
-var import_eventemitter35 = __toESM(require("eventemitter3"), 1);
-var import_eventemitter36 = require("eventemitter3");
+var import_eventemitter35 = require("eventemitter3");
+var import_eventemitter36 = __toESM(require("eventemitter3"), 1);
 var import_eventemitter37 = __toESM(require("eventemitter3"), 1);
+var import_forge_room8 = require("@netless/forge-room");
 var import_eventemitter38 = __toESM(require("eventemitter3"), 1);
-var import_eventemitter39 = __toESM(require("eventemitter3"), 1);
 var Y14 = __toESM(require("yjs"), 1);
+var import_eventemitter39 = __toESM(require("eventemitter3"), 1);
+var import_forge_room9 = require("@netless/forge-room");
 var import_eventemitter310 = __toESM(require("eventemitter3"), 1);
+var import_forge_room10 = require("@netless/forge-room");
 var import_eventemitter311 = __toESM(require("eventemitter3"), 1);
-var import_forge_room2 = require("@netless/forge-room");
+var import_forge_room11 = require("@netless/forge-room");
+var import_forge_room12 = require("@netless/forge-room");
 var import_eventemitter312 = __toESM(require("eventemitter3"), 1);
-var import_forge_room3 = require("@netless/forge-room");
-var import_eventemitter313 = __toESM(require("eventemitter3"), 1);
+var import_forge_room13 = require("@netless/forge-room");
 var __create2 = Object.create;
 var __defProp2 = Object.defineProperty;
 var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -58945,7 +58995,7 @@ var require_lodash = __commonJS2({
         var defer = baseRest(function(func, args) {
           return baseDelay(func, 1, args);
         });
-        var delay22 = baseRest(function(func, wait, args) {
+        var delay2 = baseRest(function(func, wait, args) {
           return baseDelay(func, toNumber(wait) || 0, args);
         });
         function flip(func) {
@@ -60059,7 +60109,7 @@ var require_lodash = __commonJS2({
         lodash.defaults = defaults;
         lodash.defaultsDeep = defaultsDeep;
         lodash.defer = defer;
-        lodash.delay = delay22;
+        lodash.delay = delay2;
         lodash.difference = difference;
         lodash.differenceBy = differenceBy;
         lodash.differenceWith = differenceWith;
@@ -60750,11 +60800,12 @@ var ElementModel = class _ElementModel {
   set shadow(value) {
     this.root.set(_ElementModel.KEYS.shadow, value);
   }
-  constructor(root, scope) {
+  constructor(root, scope, liveCursor) {
     _defineProperty(this, "shadowEmitter", null);
     _defineProperty(this, "root", void 0);
     _defineProperty(this, "scope", void 0);
     _defineProperty(this, "item", void 0);
+    _defineProperty(this, "liveCursor", void 0);
     _defineProperty(this, "handlePropChange", (events) => {
       if (!this.item) {
         return;
@@ -60763,7 +60814,7 @@ var ElementModel = class _ElementModel {
         if (event.target === this.root) {
           const updatePaperItemKeys = this.vectorKeys().concat([_ElementModel.KEYS.pointsMatrix]);
           for (const [key, value] of event.changes.keys.entries()) {
-            if (value.action === "update") {
+            if (value.action === "update" || value.action == "add") {
               const includeKeys = this.styleKeys().include;
               if (includeKeys.indexOf(key) >= 0) {
                 this.onStyleKeyUpdate(key);
@@ -60783,6 +60834,10 @@ var ElementModel = class _ElementModel {
                 if (this.shadow !== "") {
                   this.shadowEmitter?.emit("translateIn", [this.uuid], this.shadow);
                 } else {
+                  const ownerId = this.root.get(_ElementModel.KEYS.ownerId);
+                  if (ownerId) {
+                    this.liveCursor.updateCursorVisible(false, ownerId);
+                  }
                   this.shadowEmitter?.emit("translateOut", [this.uuid], value.oldValue);
                 }
               }
@@ -60790,11 +60845,17 @@ var ElementModel = class _ElementModel {
           }
         } else if (event.target === this.root.get(_ElementModel.KEYS.points)) {
           this.onVectorUpdate();
+          const liveCursorPoint = this.liveCursorPoint();
+          const ownerId = this.root.get(_ElementModel.KEYS.ownerId);
+          if (liveCursorPoint && ownerId) {
+            this.liveCursor.updateCursorPosition(liveCursorPoint, this.root.get(_ElementModel.KEYS.ownerId));
+          }
         } else {
         }
       }
     });
     this.scope = scope;
+    this.liveCursor = liveCursor;
     this.root = root;
     if (!this.root.has(_ElementModel.KEYS.pointsMatrix)) {
       this.root.set(_ElementModel.KEYS.pointsMatrix, [1, 0, 0, 1, 0, 0]);
@@ -60852,6 +60913,10 @@ var ElementModel = class _ElementModel {
     const ext = this.styleKeys();
     return Array.from(new Set(["dashArray", "strokeColor", "fillColor", "strokeWidth"].filter((v) => ext.exclude.indexOf(v) < 0).concat(ext.include)));
   }
+  dispose() {
+    this.subDispose();
+    (0, import_forge_room3.removeDeepObserver)(this.root, this.handlePropChange);
+  }
 };
 _defineProperty(ElementModel, "KEYS", {
   index: "index",
@@ -60918,47 +60983,49 @@ function _toPrimitive3(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var CurveModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty3(this, "item", null);
+    _defineProperty3(this, "debugPath", void 0);
+    _defineProperty3(this, "debug", false);
     if (!this.root.has("type")) {
       this.root.set("type", "curve");
     }
     if (!this.root.has("points")) {
       this.root.set("points", new Y2.Array());
     }
+    this.debugPath = new scope.Path();
   }
   average(a2, b2) {
     return (a2 + b2) / 2;
   }
   parsePoints(points) {
-    const groupPoints = (0, import_lodash.chunk)(points, 2);
-    return ae(groupPoints, {
+    return ae(points, {
       size: this.strokeWidth,
-      smoothing: 0,
-      thinning: 0.5,
+      smoothing: 0.5,
+      thinning: -0.5,
       streamline: 0.5,
       simulatePressure: true,
       start: {
-        taper: 10,
+        taper: this.strokeWidth * 10,
         cap: true
       },
       end: {
-        taper: 10,
+        taper: this.strokeWidth * 20,
         cap: true
       }
     });
   }
   matrixedPoints() {
-    const groupPoints = (0, import_lodash.chunk)(this.points, 2);
-    return groupPoints.map((_ref) => {
-      let [x, y] = _ref;
-      return new this.scope.Point(x, y);
-    }).map((p) => p.transform(new this.scope.Matrix(this.pointsMatrix))).reduce((result, next) => {
-      result.push(next.x);
-      result.push(next.y);
-      return result;
-    }, []);
+    const points = this.points;
+    const matrix = new this.scope.Matrix(this.pointsMatrix);
+    const output = [];
+    for (let i = 0, len = points.length; i < len; i += 2) {
+      const p = new this.scope.Point(points[i], points[i + 1]);
+      const tp = p.transform(matrix);
+      output.push([tp.x, tp.y]);
+    }
+    return output;
   }
   createPath(points) {
     const path = new this.scope.Path();
@@ -60985,27 +61052,41 @@ var CurveModel = class extends ElementModel {
     }
     return path;
   }
-  getNextSegments() {
-    const points = this.parsePoints(this.matrixedPoints());
-    const path = this.createPath(points);
-    return path.segments;
+  updateDebugPath() {
+    this.debugPath = new this.scope.Path();
+    const points = (0, import_lodash.chunk)(this.points, 2);
+    for (let i = 0, len = points.length; i < len; i++) {
+      const point = new this.scope.Point(points[i][0], points[i][1]);
+      if (i === 0) {
+        this.debugPath.moveTo(point);
+      } else {
+        this.debugPath.lineTo(point);
+      }
+      this.debugPath.strokeWidth = 1;
+      this.debugPath.strokeColor = new this.scope.Color(1, 0, 0, 1);
+    }
   }
   onVectorUpdate() {
     if (!this.item) {
       return;
     }
+    if (this.debug) {
+      this.debugPath.remove();
+      this.updateDebugPath();
+    }
+    const points = this.parsePoints(this.matrixedPoints());
+    const path = this.createPath(points);
     this.item.removeSegments();
-    this.item.addSegments(this.getNextSegments());
-    this.item.simplify(2.5);
+    this.item.addSegments(path.segments);
+    if (this.debug) {
+      this.item.addChild(this.debugPath);
+    }
   }
   createPaperItem() {
     this.item = new this.scope.Path();
-    this.item.strokeCap = "round";
-    this.item.strokeJoin = "round";
-    this.item.strokeScaling = false;
     this.item.strokeColor = new this.scope.Color(this.strokeColor);
     this.item.fillColor = new this.scope.Color(this.strokeColor);
-    this.item.addSegments(this.getNextSegments());
+    this.onVectorUpdate();
   }
   editorConfig() {
     return new EditorConfig();
@@ -61015,10 +61096,19 @@ var CurveModel = class extends ElementModel {
   }
   styleKeys() {
     return {
-      include: ["strokeColor"],
-      exclude: ["fillColor", "dashArray"]
+      include: ["strokeColor", "strokeWidth"],
+      exclude: ["dashArray", "fillColor"]
     };
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
+    }
+    const len = yArray.length;
+    const point = new this.scope.Point(yArray.get(len - 2), yArray.get(len - 1));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
   onStyleKeyUpdate(key) {
     if (!this.item) {
       return;
@@ -61026,8 +61116,12 @@ var CurveModel = class extends ElementModel {
     if (key === "strokeColor") {
       this.item.strokeColor = new this.scope.Color(this.strokeColor);
       this.item.fillColor = new this.scope.Color(this.strokeColor);
+    } else if (key === "strokeWidth") {
+      this.onVectorUpdate();
     }
   }
+  subDispose() {
+  }
 };
 function _defineProperty4(e, r, t) {
   return (r = _toPropertyKey4(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
@@ -61047,8 +61141,8 @@ function _toPrimitive4(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var SelectorModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty4(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "selector");
@@ -61059,14 +61153,15 @@ var SelectorModel = class extends ElementModel {
       this.root.set("points", initPoints);
     }
   }
+  liveCursorPoint() {
+    return null;
+  }
+  subDispose() {
+  }
   createPaperRect() {
     const scope = this.scope;
     const bounds = new scope.Rectangle(new scope.Point(this.points[0], this.points[1]), new scope.Size(this.points[2], this.points[3]));
-    return new scope.Path.Rectangle(
-      bounds,
-      new scope.Point(this.points[4], this.points[4])
-      // 圆角
-    );
+    return new scope.Path.Rectangle(bounds, new scope.Point(this.points[4], this.points[4]));
   }
   onVectorUpdate() {
     if (!this.item) {
@@ -61092,7 +61187,7 @@ var SelectorModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
   }
 };
 var import_lodash2 = __toESM2(require_lodash(), 1);
@@ -61139,7 +61234,7 @@ var AnimationFrame = class {
     _defineProperty5(this, "lastTime", 0);
     _defineProperty5(this, "fps", 45);
     _defineProperty5(this, "handleCallbacks", () => {
-      let functions = this.callbacks;
+      const functions = this.callbacks;
       this.callbacks = [];
       for (let i = 0, l2 = functions.length; i < l2; i++) {
         functions[i]();
@@ -61180,8 +61275,8 @@ function _toPrimitive6(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var SegmentsModel = class extends ElementModel {
-  constructor(root, scope, type) {
-    super(root, scope);
+  constructor(root, scope, type, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty6(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", type);
@@ -61190,6 +61285,16 @@ var SegmentsModel = class extends ElementModel {
       this.root.set("points", new Y4.Array());
     }
   }
+  subDispose() {
+  }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
+    }
+    const point = new this.scope.Point(yArray.get(0), yArray.get(1));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
   onVectorUpdate() {
     if (!this.item) {
       return;
@@ -61224,7 +61329,7 @@ var SegmentsModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
   }
 };
 var import_lodash4 = __toESM2(require_lodash(), 1);
@@ -61308,9 +61413,13 @@ var LineTool = class extends WhiteboardTool {
     _defineProperty8(this, "elementModel", null);
     _defineProperty8(this, "from", null);
     _defineProperty8(this, "to", null);
+    _defineProperty8(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createLinePath(true);
     this.from = event.point.clone();
     this.to = event.point.clone();
@@ -61367,8 +61476,8 @@ var LineModel = class extends ElementModel {
   set tailArrow(value) {
     this.root.set("tailArrow", value);
   }
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty9(this, "controlledPoints", []);
     _defineProperty9(this, "item", null);
     if (!this.root.has("type")) {
@@ -61384,6 +61493,8 @@ var LineModel = class extends ElementModel {
       this.root.set("tailArrow", "normal");
     }
   }
+  subDispose() {
+  }
   onVectorUpdate() {
     if (!this.item) {
       return;
@@ -61415,12 +61526,21 @@ var LineModel = class extends ElementModel {
     });
     return [head, path, tail];
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
+    }
+    const len = yArray.length;
+    const point = new this.scope.Point(yArray.get(len - 2), yArray.get(len - 1));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
   createPaperItem() {
     this.item = new this.scope.Group();
     this.item.addChildren(this.renderLine());
   }
   createArrow(path) {
-    let [headPath, tailPath] = [new this.scope.Path(), new this.scope.Path()];
+    const [headPath, tailPath] = [new this.scope.Path(), new this.scope.Path()];
     if (!path) {
       return [headPath, tailPath];
     }
@@ -61474,7 +61594,7 @@ var LineModel = class extends ElementModel {
       exclude: ["fillColor"]
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
     this.onVectorUpdate();
   }
 };
@@ -61562,8 +61682,8 @@ var PointTextModel = class extends ElementModel {
   set fontFamily(value) {
     this.root.set("font-family", value);
   }
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty10(this, "item", null);
     _defineProperty10(this, "handleTextPropChange", (event) => {
       if (!this.item) {
@@ -61594,6 +61714,18 @@ var PointTextModel = class extends ElementModel {
       }, 60);
     }
   }
+  subDispose() {
+    (0, import_forge_room4.removeObserver)(this.root, this.handleTextPropChange);
+  }
+  liveCursorPoint() {
+    const points = this.points;
+    if (points.length < 1) {
+      return null;
+    }
+    const matrix = new this.scope.Matrix(this.pointsMatrix);
+    const topLeft = new this.scope.Point(points[0], points[1]).transform(matrix);
+    return topLeft;
+  }
   getInternalMeasurement() {
     if (!this.item) {
       return null;
@@ -61686,8 +61818,8 @@ function _toPrimitive11(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var TriangleModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty11(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "triangle");
@@ -61696,6 +61828,17 @@ var TriangleModel = class extends ElementModel {
       this.root.set("points", new Y7.Array());
     }
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 6) {
+      return null;
+    }
+    const len = yArray.length;
+    const point = new this.scope.Point(yArray.get(len - 4), yArray.get(len - 3));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
+  subDispose() {
+  }
   createPaperItem() {
     this.item = new this.scope.Path();
     this.item.strokeCap = "butt";
@@ -61752,7 +61895,7 @@ var TriangleModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
   }
 };
 function _defineProperty12(e, r, t) {
@@ -61773,8 +61916,8 @@ function _toPrimitive12(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var RectangleModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty12(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "rectangle");
@@ -61788,6 +61931,16 @@ var RectangleModel = class extends ElementModel {
       this.root.set("radius", 0);
     }
   }
+  subDispose() {
+  }
+  liveCursorPoint() {
+    const points = this.points;
+    if (points.length < 4) {
+      return null;
+    }
+    const matrix = new this.scope.Matrix(this.pointsMatrix);
+    return new this.scope.Point(points[2], points[3]).transform(matrix);
+  }
   createSegments() {
     const [a2, b2, c, d] = this.points;
     const matrix = new this.scope.Matrix(this.pointsMatrix);
@@ -61919,7 +62072,7 @@ var RectangleModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
   }
 };
 var elementsUndoOrigin = "elementsUndoOrigin";
@@ -61942,8 +62095,8 @@ function _toPrimitive13(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var EraserModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
     _defineProperty13(this, "item", null);
     _defineProperty13(this, "sliceBegin", 0);
     if (!this.root.has("type")) {
@@ -61982,14 +62135,189 @@ var EraserModel = class extends ElementModel {
     return path;
   }
   parsePoints(points) {
-    return ae(points, {
+    const groupPoints = (0, import_lodash5.chunk)(points, 2);
+    return ae(groupPoints, {
       size: this.strokeWidth,
+      smoothing: 0.5,
+      thinning: -0.5,
+      streamline: 0.5,
+      simulatePressure: true,
+      start: {
+        taper: this.strokeWidth * 10,
+        cap: true
+      },
+      end: {
+        taper: this.strokeWidth * 20,
+        cap: true
+      }
+    });
+  }
+  matrixedPoints() {
+    const currentPoints = (0, import_lodash5.chunk)(this.points, 2).slice(this.sliceBegin);
+    return currentPoints.map((_ref) => {
+      let [x, y] = _ref;
+      return new this.scope.Point(x, y);
+    }).map((p) => p.transform(new this.scope.Matrix(this.pointsMatrix))).reduce((result, next) => {
+      result.push(next.x);
+      result.push(next.y);
+      return result;
+    }, []);
+  }
+  onVectorUpdate() {
+    if (!this.item) {
+      return;
+    }
+    const points = this.parsePoints(this.matrixedPoints());
+    const path = this.createPath(points);
+    this.item.removeSegments();
+    this.item.addSegments(path.segments);
+  }
+  createPaperItem() {
+    this.item = new this.scope.Path();
+    this.item.strokeCap = "round";
+    this.item.strokeJoin = "round";
+    this.item.strokeScaling = false;
+    this.item.strokeColor = new this.scope.Color(this.strokeColor);
+    this.item.fillColor = new this.scope.Color(this.strokeColor);
+    this.onVectorUpdate();
+    this.item.onFrame = () => {
+      if (!this.points) {
+        return;
+      }
+      if (this.points.length / 2 > 50) {
+        this.sliceBegin = this.points.length / 2 - 50;
+      }
+    };
+  }
+  editorConfig() {
+    return new EditorConfig();
+  }
+  vectorKeys() {
+    return [];
+  }
+  styleKeys() {
+    return {
+      include: [],
+      exclude: []
+    };
+  }
+  onStyleKeyUpdate(_key) {
+    return;
+  }
+  subDispose() {
+  }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
+    }
+    const len = yArray.length;
+    const point = new this.scope.Point(yArray.get(len - 2), yArray.get(len - 1));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
+};
+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;
+}
+function _toPropertyKey14(t) {
+  var i = _toPrimitive14(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive14(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+var LaserPointerModel = class extends ElementModel {
+  constructor(clientId, root, scope, liveCursor, removeElement) {
+    super(root, scope, liveCursor);
+    _defineProperty14(this, "item", null);
+    _defineProperty14(this, "clientId", void 0);
+    _defineProperty14(this, "sliceBegin", 0);
+    _defineProperty14(this, "displayStrokeWidth", 8);
+    _defineProperty14(this, "cachedPoints", null);
+    this.clientId = clientId;
+    if (!this.root.has("type")) {
+      this.root.set("type", "laser");
+    }
+    if (!this.root.has("points")) {
+      this.root.set("points", new Y10.Array());
+    }
+    if (!this.root.has("removed")) {
+      this.root.set("removed", false);
+    }
+    this.root.observe((event) => {
+      if (!this.item) {
+        return;
+      }
+      for (const [key] of event.changes.keys.entries()) {
+        if (key === "removed") {
+          if (this.cachedPoints == null) {
+            this.cachedPoints = this.points;
+          }
+          this.item.onFrame = (evt) => {
+            this.displayStrokeWidth = Math.max(0.1, this.displayStrokeWidth -= 8 / 30);
+            if (evt.count >= 20) {
+              const points = this.cachedPoints || this.points;
+              this.sliceBegin += Math.ceil(points.length / 2 / 20);
+            }
+            this.onVectorUpdate();
+            if (evt.count >= 30) {
+              if (this.ownerId === this.clientId) {
+                removeElement(this.uuid);
+              }
+            }
+          };
+        }
+      }
+    });
+  }
+  beginRemoveAnimate() {
+    this.root.set("removed", true);
+  }
+  average(a2, b2) {
+    return (a2 + b2) / 2;
+  }
+  createPath(points) {
+    const path = new this.scope.Path();
+    const len = points.length;
+    if (len < 4) {
+      return path;
+    }
+    let control = new this.scope.Point(0, 0);
+    let current = new this.scope.Point(0, 0);
+    let a2 = points[0];
+    let b2 = points[1];
+    const c = points[2];
+    current = new this.scope.Point(a2[0], a2[1]);
+    path.moveTo(current);
+    control = new this.scope.Point(b2[0], b2[1]);
+    current = new this.scope.Point(this.average(b2[0], c[0]), this.average(b2[1], c[1]));
+    path.quadraticCurveTo(control, current);
+    for (let i = 2, max = len - 1; i < max; i++) {
+      a2 = points[i];
+      b2 = points[i + 1];
+      control = current.multiply(2).subtract(control);
+      current = new this.scope.Point(this.average(a2[0], b2[0]), this.average(a2[1], b2[1]));
+      path.quadraticCurveTo(control, current);
+    }
+    return path;
+  }
+  parsePoints(points) {
+    return ae(points, {
+      size: this.displayStrokeWidth,
       smoothing: 0,
       thinning: 0.5,
-      streamline: 0.5,
+      streamline: 0,
       simulatePressure: true,
       start: {
-        taper: true,
+        taper: 0,
         cap: true
       },
       end: {
@@ -62000,7 +62328,8 @@ var EraserModel = class extends ElementModel {
   }
   matrixedPoints() {
     const matrix = new this.scope.Matrix(this.pointsMatrix);
-    const groupPoints = (0, import_lodash5.chunk)(this.points, 2).slice(this.sliceBegin);
+    const points = this.cachedPoints || this.points;
+    const groupPoints = (0, import_lodash6.chunk)(points, 2).slice(this.sliceBegin);
     return groupPoints.map((_ref) => {
       let [x, y] = _ref;
       return matrix.transform([x, y]);
@@ -62026,22 +62355,6 @@ var EraserModel = class extends ElementModel {
     this.item.strokeColor = new this.scope.Color(this.strokeColor);
     this.item.fillColor = new this.scope.Color(this.strokeColor);
     this.item.addSegments(this.getNextSegments());
-    let isBegin = false;
-    this.item.onFrame = () => {
-      if (!this.points) {
-        return;
-      }
-      if (this.points.length / 2 - this.sliceBegin >= 10 && !isBegin) {
-        isBegin = true;
-      }
-      if (this.points.length / 2 <= this.sliceBegin) {
-        isBegin = false;
-      }
-      if (isBegin) {
-        this.sliceBegin += 1;
-        this.onVectorUpdate();
-      }
-    };
   }
   editorConfig() {
     return new EditorConfig();
@@ -62055,183 +62368,21 @@ var EraserModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
     return;
   }
-};
-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;
-}
-function _toPropertyKey14(t) {
-  var i = _toPrimitive14(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-function _toPrimitive14(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
-var LaserPointerModel = class extends ElementModel {
-  constructor(clientId, root, scope, removeElement) {
-    super(root, scope);
-    _defineProperty14(this, "item", null);
-    _defineProperty14(this, "clientId", void 0);
-    _defineProperty14(this, "sliceBegin", 0);
-    _defineProperty14(this, "displayStrokeWidth", 8);
-    _defineProperty14(this, "cachedPoints", null);
-    this.clientId = clientId;
-    if (!this.root.has("type")) {
-      this.root.set("type", "laser");
-    }
-    if (!this.root.has("points")) {
-      this.root.set("points", new Y10.Array());
-    }
-    if (!this.root.has("removed")) {
-      this.root.set("removed", false);
-    }
-    this.root.observe((event) => {
-      if (!this.item) {
-        return;
-      }
-      for (const [key] of event.changes.keys.entries()) {
-        if (key === "removed") {
-          if (this.cachedPoints == null) {
-            this.cachedPoints = this.points;
-          }
-          this.item.onFrame = (evt) => {
-            this.displayStrokeWidth = Math.max(0.1, this.displayStrokeWidth -= 8 / 30);
-            if (evt.count >= 20) {
-              const points = this.cachedPoints || this.points;
-              this.sliceBegin += Math.ceil(points.length / 2 / 20);
-            }
-            this.onVectorUpdate();
-            if (evt.count >= 30) {
-              if (this.ownerId === this.clientId) {
-                removeElement(this.uuid);
-              }
-            }
-          };
-        }
-      }
-    });
-  }
-  beginRemoveAnimate() {
-    this.root.set("removed", true);
-  }
-  average(a2, b2) {
-    return (a2 + b2) / 2;
-  }
-  createPath(points) {
-    const path = new this.scope.Path();
-    const len = points.length;
-    if (len < 4) {
-      return path;
-    }
-    let control = new this.scope.Point(0, 0);
-    let current = new this.scope.Point(0, 0);
-    let a2 = points[0];
-    let b2 = points[1];
-    const c = points[2];
-    current = new this.scope.Point(a2[0], a2[1]);
-    path.moveTo(current);
-    control = new this.scope.Point(b2[0], b2[1]);
-    current = new this.scope.Point(this.average(b2[0], c[0]), this.average(b2[1], c[1]));
-    path.quadraticCurveTo(control, current);
-    for (let i = 2, max = len - 1; i < max; i++) {
-      a2 = points[i];
-      b2 = points[i + 1];
-      control = current.multiply(2).subtract(control);
-      current = new this.scope.Point(this.average(a2[0], b2[0]), this.average(a2[1], b2[1]));
-      path.quadraticCurveTo(control, current);
-    }
-    return path;
-  }
-  parsePoints(points) {
-    return ae(points, {
-      size: this.displayStrokeWidth,
-      smoothing: 0,
-      thinning: 0.5,
-      streamline: 0,
-      simulatePressure: true,
-      start: {
-        taper: 0,
-        cap: true
-      },
-      end: {
-        taper: 0,
-        cap: true
-      }
-    });
+  subDispose() {
   }
-  matrixedPoints() {
-    const matrix = new this.scope.Matrix(this.pointsMatrix);
-    const points = this.cachedPoints || this.points;
-    const groupPoints = (0, import_lodash6.chunk)(points, 2).slice(this.sliceBegin);
-    return groupPoints.map((_ref) => {
-      let [x, y] = _ref;
-      return matrix.transform([x, y]);
-    }).map((p) => [p.x, p.y]);
-  }
-  getNextSegments() {
-    const points = this.parsePoints(this.matrixedPoints());
-    const path = this.createPath(points);
-    return path.segments;
-  }
-  onVectorUpdate() {
-    if (!this.item) {
-      return;
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
     }
-    this.item.removeSegments();
-    this.item.addSegments(this.getNextSegments());
-  }
-  createPaperItem() {
-    this.item = new this.scope.Path();
-    this.item.strokeCap = "round";
-    this.item.strokeJoin = "round";
-    this.item.strokeScaling = false;
-    this.item.strokeColor = new this.scope.Color(this.strokeColor);
-    this.item.fillColor = new this.scope.Color(this.strokeColor);
-    this.item.addSegments(this.getNextSegments());
-  }
-  editorConfig() {
-    return new EditorConfig();
-  }
-  vectorKeys() {
-    return [];
-  }
-  styleKeys() {
-    return {
-      include: [],
-      exclude: []
-    };
-  }
-  onStyleKeyUpdate(key) {
-    return;
+    const len = yArray.length;
+    const point = new this.scope.Point(yArray.get(len - 2), yArray.get(len - 1));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
   }
 };
-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;
-}
-function _toPropertyKey15(t) {
-  var i = _toPrimitive15(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-function _toPrimitive15(t, r) {
-  if ("object" != typeof t || !t) return t;
-  var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
-    var i = e.call(t, r || "default");
-    if ("object" != typeof i) return i;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return ("string" === r ? String : Number)(t);
-}
 var WhiteboardPermissionFlag = function(WhiteboardPermissionFlag2) {
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["none"] = 0] = "none";
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["draw"] = 1] = "draw";
@@ -62244,117 +62395,25 @@ var WhiteboardPermissionFlag = function(WhiteboardPermissionFlag2) {
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["all"] = WhiteboardPermissionFlag2.draw | WhiteboardPermissionFlag2.editSelf | WhiteboardPermissionFlag2.editOthers | WhiteboardPermissionFlag2.deleteSelf | WhiteboardPermissionFlag2.deleteOthers | WhiteboardPermissionFlag2.mainView | WhiteboardPermissionFlag2.setOthersView] = "all";
   return WhiteboardPermissionFlag2;
 }({});
-var WhiteboardPermissions = class extends import_eventemitter32.default {
-  constructor(userManager, requestUserMap) {
-    super();
-    _defineProperty15(this, "requestUserMap", void 0);
-    _defineProperty15(this, "userManager", void 0);
-    _defineProperty15(this, "observers", /* @__PURE__ */ new Map());
-    _defineProperty15(this, "handleUserLeave", (user) => {
-      const cb = this.observers.get(user.id);
-      if (cb) {
-        this.requestUserMap(user.id).unobserve(cb);
-      }
-    });
-    _defineProperty15(this, "handleUserJoin", (user) => {
-      this.addObserve(user.id);
-    });
-    this.userManager = userManager;
-    this.requestUserMap = requestUserMap;
-    this.createModel(this.userManager.selfId);
-    this.userManager.userIdList().forEach((userId) => {
-      this.addObserve(userId);
-    });
-    this.userManager.on("join", this.handleUserJoin);
-    this.userManager.on("leave", this.handleUserLeave);
-  }
-  addObserve(userId) {
-    if (this.observers.has(userId)) {
-      return;
-    }
-    const observer = (evt) => {
-      this.handleUserPermissionChange(userId, evt);
-    };
-    this.observers.set(userId, observer);
-    this.requestUserMap(userId).observe(observer);
-  }
-  createModel(userId) {
-    const userMap = this.requestUserMap(userId);
-    if (!userMap.has("permission")) {
-      userMap.set("permission", 0);
-    }
-  }
-  handleUserPermissionChange(userId, evt) {
-    for (const [key, value] of evt.changes.keys.entries()) {
-      if (key === "permission") {
-        if (value.action === "add" || value.action === "update") {
-          const newValue = this.requestUserMap(userId).get("permission");
-          this.emit("change", userId, this.resolveFlags(newValue), newValue);
-        }
-      }
-    }
-  }
+var WhiteboardPermissions = class extends import_forge_room5.AbstractApplicationPermissions {
   /**
-   * 解析权限列表组合
-   * @param {number} value - 权限数字值
-   * @return {WhiteboardPermissionFlag[]} - 权限列表
-   */
+     * 解析权限列表组合
+     * @param {number} value - 权限数字值
+     * @return {WhiteboardPermissionFlag[]} - 权限列表
+     */
   resolveFlags(value) {
     return [WhiteboardPermissionFlag.draw, WhiteboardPermissionFlag.editSelf, WhiteboardPermissionFlag.editOthers, WhiteboardPermissionFlag.deleteSelf, WhiteboardPermissionFlag.deleteOthers, WhiteboardPermissionFlag.mainView, WhiteboardPermissionFlag.setOthersView].filter((v) => (v & value) !== 0);
   }
-  /**
-   * 获取权限列表组合对应的数值
-   * @param { string } userId 不传表示获取自己
-   */
-  getPermissionValue(userId) {
-    return this.requestUserMap(userId ?? this.userManager.selfId).get("permission") ?? 0;
-  }
-  /**
-   * 获取权限列表
-   * @param {string=} userId 可选, 不传表示获取自己
-   */
-  getPermissionFlags(userId) {
-    const value = this.requestUserMap(userId ?? this.userManager.selfId).get("permission") ?? 0;
-    return this.resolveFlags(value);
-  }
-  /**
-   * 返回对应 userId 是否有相应权限
-   * @param {string=} userId 可选, 不传表示返回自己是否有相应权限
-   * @param {WhiteboardPermissionFlag} flag
-   */
-  hasPermission(flag, userId) {
-    return ((this.requestUserMap(userId ?? this.userManager.selfId).get("permission") ?? 0) & flag) !== 0;
-  }
-  /**
-   * 添加权限
-   * @param {WhiteboardPermissionFlag} flag 权限标记
-   * @param {string=} userId 可选, 为 userId 添加权限, 不传表示为自己添加权限
-   */
-  addPermission(flag, userId) {
-    const userMap = this.requestUserMap(userId ?? this.userManager.selfId);
-    const oldValue = userMap.get("permission") ?? 0;
-    this.requestUserMap(userId ?? this.userManager.selfId).set("permission", oldValue | flag);
-  }
-  /**
-   * 移除权限
-   * @param {WhiteboardPermissionFlag} flag 权限标记
-   * @param {string=} userId 可选, 为 userId 移除权限, 不传表示为自己移除权限
-   */
-  removePermission(flag, userId) {
-    const userMap = this.requestUserMap(userId ?? this.userManager.selfId);
-    const oldValue = userMap.get("permission") ?? 0;
-    this.requestUserMap(userId ?? this.userManager.selfId).set("permission", oldValue & ~flag);
-  }
 };
 var import_lodash7 = __toESM2(require_lodash(), 1);
-function _defineProperty16(e, r, t) {
-  return (r = _toPropertyKey16(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+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;
 }
-function _toPropertyKey16(t) {
-  var i = _toPrimitive16(t, "string");
+function _toPropertyKey15(t) {
+  var i = _toPrimitive15(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive16(t, r) {
+function _toPrimitive15(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -62365,9 +62424,9 @@ function _toPrimitive16(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var StraightLineModel = class extends ElementModel {
-  constructor(root, scope) {
-    super(root, scope);
-    _defineProperty16(this, "item", null);
+  constructor(root, scope, liveCursor) {
+    super(root, scope, liveCursor);
+    _defineProperty15(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "line");
     }
@@ -62375,6 +62434,17 @@ var StraightLineModel = class extends ElementModel {
       this.root.set("points", new Y11.Array());
     }
   }
+  liveCursorPoint() {
+    const yArray = this.root.get(ElementModel.KEYS.points);
+    if (yArray.length < 2) {
+      return null;
+    }
+    const len = yArray.length;
+    const point = new this.scope.Point(yArray.get(len - 2), yArray.get(len - 1));
+    return point.transform(new this.scope.Matrix(this.pointsMatrix));
+  }
+  subDispose() {
+  }
   onVectorUpdate() {
     if (!this.item) {
       return;
@@ -62448,7 +62518,7 @@ var StraightLineModel = class extends ElementModel {
       exclude: ["fillColor"]
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
     if (!this.item) {
       return;
     }
@@ -62457,6 +62527,84 @@ var StraightLineModel = class extends ElementModel {
     this.item.addSegments(path.segments);
   }
 };
+function _defineProperty16(e, r, t) {
+  return (r = _toPropertyKey16(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey16(t) {
+  var i = _toPrimitive16(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive16(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+var ImageModel = class extends ElementModel {
+  get src() {
+    return this.root.get("src");
+  }
+  constructor(root, scope, imageSets, liveCursor) {
+    super(root, scope, liveCursor);
+    _defineProperty16(this, "item", null);
+    _defineProperty16(this, "imageSets", void 0);
+    this.imageSets = imageSets;
+    if (!this.root.has("type")) {
+      this.root.set("type", "image");
+    }
+    this.root.set(ElementModel.KEYS.shadow, "");
+  }
+  subDispose() {
+    const img = this.imageSets.querySelector(`[id='${this.uuid}']`);
+    if (img) {
+      img.remove();
+    }
+  }
+  createPaperItem() {
+    if (this.item) {
+      return;
+    }
+    if (!this.imageSets.querySelector(`[id='${this.uuid}']`)) {
+      const img = document.createElement("img");
+      img.src = this.src;
+      img.id = this.uuid;
+      this.imageSets.appendChild(img);
+    }
+    this.item = new this.scope.Raster(this.uuid);
+    const matrix = new this.scope.Matrix(this.pointsMatrix);
+    this.item.matrix = matrix;
+  }
+  onVectorUpdate() {
+    const matrix = new this.scope.Matrix(this.pointsMatrix);
+    if (this.item) {
+      this.item.matrix = matrix;
+    }
+  }
+  vectorKeys() {
+    return [];
+  }
+  styleKeys() {
+    return {
+      include: [],
+      exclude: ["dashArray", "strokeColor", "fillColor", "strokeWidth"]
+    };
+  }
+  onStyleKeyUpdate(_key) {
+  }
+  editorConfig() {
+    const cfg = new EditorConfig();
+    cfg.resizeModel = () => "four-corner";
+    cfg.uniformScale = () => true;
+    return cfg;
+  }
+  liveCursorPoint() {
+    return null;
+  }
+};
 function _defineProperty17(e, r, t) {
   return (r = _toPropertyKey17(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
@@ -62476,9 +62624,9 @@ function _toPrimitive17(t, r) {
 }
 var RenderableModel = class extends import_eventemitter3.default {
   get uuid() {
-    return (0, import_uuid.v4)();
+    return (0, import_uuid.v4)().replace(/-/g, "");
   }
-  constructor(layerId, shadowEmitter, elements, scope, toolbarModel, userManager, hasPermission) {
+  constructor(layerId, shadowEmitter, elements, scope, toolbarModel, userManager, imageSets, liveCursor, hasPermission) {
     super();
     _defineProperty17(this, "scope", void 0);
     _defineProperty17(this, "toolbarModel", void 0);
@@ -62489,6 +62637,8 @@ var RenderableModel = class extends import_eventemitter3.default {
     _defineProperty17(this, "maxIndex", -1);
     _defineProperty17(this, "hasPermission", void 0);
     _defineProperty17(this, "shadowEmitter", void 0);
+    _defineProperty17(this, "imageSets", void 0);
+    _defineProperty17(this, "liveCursor", void 0);
     _defineProperty17(this, "onElementsChange", (event) => {
       for (const [key, value] of event.changes.keys.entries()) {
         if (value.action === "add") {
@@ -62496,7 +62646,9 @@ var RenderableModel = class extends import_eventemitter3.default {
           if (root) {
             const model = this.convertToModel(root);
             if (model) {
-              this.emit("elementInsert", [model]);
+              setTimeout(() => {
+                this.emit("elementInsert", [model]);
+              });
             }
           }
         } else if (value.action === "delete") {
@@ -62504,6 +62656,8 @@ var RenderableModel = class extends import_eventemitter3.default {
         }
       }
     });
+    this.liveCursor = liveCursor;
+    this.imageSets = imageSets;
     this.hasPermission = hasPermission;
     this.shadowEmitter = shadowEmitter;
     this.layerId = layerId;
@@ -62542,27 +62696,29 @@ var RenderableModel = class extends import_eventemitter3.default {
     const type = yMap.get("type");
     let model = null;
     if (type === "curve") {
-      model = new CurveModel(yMap, this.scope);
+      model = new CurveModel(yMap, this.scope, this.liveCursor);
     } else if (["ellipse"].indexOf(type) >= 0) {
-      model = new SegmentsModel(yMap, this.scope, type);
+      model = new SegmentsModel(yMap, this.scope, type, this.liveCursor);
     } else if (type === "selector") {
-      model = new SelectorModel(yMap, this.scope);
+      model = new SelectorModel(yMap, this.scope, this.liveCursor);
     } else if (type === "arrow") {
-      model = new LineModel(yMap, this.scope);
+      model = new LineModel(yMap, this.scope, this.liveCursor);
     } else if (type === "line") {
-      model = new StraightLineModel(yMap, this.scope);
+      model = new StraightLineModel(yMap, this.scope, this.liveCursor);
     } else if (type === "point-text") {
-      model = new PointTextModel(yMap, this.scope);
+      model = new PointTextModel(yMap, this.scope, this.liveCursor);
     } else if (type === "triangle") {
-      model = new TriangleModel(yMap, this.scope);
+      model = new TriangleModel(yMap, this.scope, this.liveCursor);
     } else if (type === "rectangle") {
-      model = new RectangleModel(yMap, this.scope);
+      model = new RectangleModel(yMap, this.scope, this.liveCursor);
     } else if (type === "eraser") {
-      model = new EraserModel(yMap, this.scope);
+      model = new EraserModel(yMap, this.scope, this.liveCursor);
     } else if (type === "laser") {
-      model = new LaserPointerModel(this.userManager.selfId, yMap, this.scope, (uuid) => {
+      model = new LaserPointerModel(this.userManager.selfId, yMap, this.scope, this.liveCursor, (uuid) => {
         this.removeElementItem(uuid);
       });
+    } else if (type === "image") {
+      model = new ImageModel(yMap, this.scope, this.imageSets, this.liveCursor);
     }
     if (model) {
       model.shadowEmitter = this.shadowEmitter;
@@ -62571,142 +62727,271 @@ var RenderableModel = class extends import_eventemitter3.default {
     return model;
   }
   initElement(element) {
-    let shadow = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
-    if (shadow) {
-      element.shadow = "layer";
-    }
-    element.strokeWidth = this.toolbarModel.strokeWidth;
-    element.strokeColor = this.toolbarModel.strokeColor;
-    element.fillColor = this.toolbarModel.fillColor;
-    element.ownerId = this.userManager.selfId;
     element.shadowEmitter = this.shadowEmitter;
   }
   removeElementItem(uuid) {
     this.elements.delete(uuid);
   }
-  addElementToDoc(map) {
-    this.elements.doc?.transact(() => {
-      const uuid = this.uuid;
-      map.set(ElementModel.KEYS.index, ++this.maxIndex);
-      map.set(ElementModel.KEYS.uuid, uuid);
-      this.elements.set(uuid, map);
-    }, elementsUndoOrigin);
-  }
   confirmPermission() {
     const hasPermission = this.hasPermission(WhiteboardPermissionFlag.draw);
     if (!hasPermission) {
-      console.warn("[@netless/forge-whiteboard] no permission to draw");
+      (0, import_forge_room2.log)("[@netless/forge-whiteboard] no permission to draw", {}, "warning");
     }
     return hasPermission;
   }
+  createImage(src) {
+    if (!this.confirmPermission()) {
+      return;
+    }
+    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(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const model = new ImageModel(yMap, this.scope, this.imageSets, this.liveCursor);
+    model.root.set("src", src);
+    const initMatrix = new this.scope.Matrix();
+    const center = this.scope.project.view.center;
+    initMatrix.translate({
+      x: center.x,
+      y: center.y
+    });
+    model.appendPointsMatrix(initMatrix);
+    model.ownerId = this.userManager.selfId;
+  }
   createCurve() {
     let shadow = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
     if (!this.confirmPermission()) {
       return null;
     }
-    const curveModel = new CurveModel(new Y12.Map(), this.scope);
-    this.initElement(curveModel, shadow);
-    this.addElementToDoc(curveModel.root);
+    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", "curve");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const curveModel = new CurveModel(yMap, this.scope, this.liveCursor);
+    this.initElement(curveModel);
     return curveModel;
   }
   createLaserPointer() {
     if (!this.confirmPermission()) {
       return null;
     }
-    const model = new LaserPointerModel(this.userManager.selfId, new Y12.Map(), this.scope, (uuid) => {
+    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", "laser");
+      yMap.set(ElementModel.KEYS.shadow, "layer");
+      yMap.set(ElementModel.KEYS.strokeWidth, 8);
+      yMap.set(ElementModel.KEYS.strokeColor, "#F44336");
+      yMap.set(ElementModel.KEYS.fillColor, "#F44336");
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const model = new LaserPointerModel(this.userManager.selfId, yMap, this.scope, this.liveCursor, (uuid) => {
       this.removeElementItem(uuid);
     });
-    model.strokeWidth = 8;
-    model.strokeColor = "#F44336";
-    model.fillColor = "#F44336";
-    model.ownerId = this.userManager.selfId;
-    model.shadow = "layer";
-    this.addElementToDoc(model.root);
     return model;
   }
   createEraser() {
     if (!this.hasPermission(WhiteboardPermissionFlag.deleteSelf) && !this.hasPermission(WhiteboardPermissionFlag.deleteOthers)) {
       return null;
     }
-    const model = new EraserModel(new Y12.Map(), this.scope);
-    model.strokeWidth = 12;
-    model.strokeColor = "#9E9E9E";
-    model.fillColor = "#9E9E9E";
-    model.ownerId = this.userManager.selfId;
-    model.shadow = "layer";
-    this.addElementToDoc(model.root);
+    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", "eraser");
+      yMap.set(ElementModel.KEYS.shadow, "layer");
+      yMap.set(ElementModel.KEYS.strokeWidth, 4);
+      yMap.set(ElementModel.KEYS.strokeColor, "#9E9E9E");
+      yMap.set(ElementModel.KEYS.fillColor, "#9E9E9E");
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const model = new EraserModel(yMap, this.scope, this.liveCursor);
     return model;
   }
   createTriangle(shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const triangle = new TriangleModel(new Y12.Map(), this.scope);
-    this.initElement(triangle, shadow);
+    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", "triangle");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const triangle = new TriangleModel(yMap, this.scope, this.liveCursor);
+    this.initElement(triangle);
     triangle.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(triangle.root);
     return triangle;
   }
   createRectangle(shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const rect = new RectangleModel(new Y12.Map(), this.scope);
-    this.initElement(rect, shadow);
+    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", "rectangle");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const rect = new RectangleModel(yMap, this.scope, this.liveCursor);
+    this.initElement(rect);
     rect.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(rect.root);
     return rect;
   }
   createSegmentedPath(type, shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const segmentsModel = new SegmentsModel(new Y12.Map(), this.scope, type);
-    this.initElement(segmentsModel, shadow);
+    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", type);
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const segmentsModel = new SegmentsModel(yMap, this.scope, type, this.liveCursor);
+    this.initElement(segmentsModel);
     segmentsModel.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(segmentsModel.root);
     return segmentsModel;
   }
   createSelector() {
-    let shadow = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
+    let _shadow = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
     if (!this.hasPermission(WhiteboardPermissionFlag.editSelf) && !this.hasPermission(WhiteboardPermissionFlag.deleteOthers)) {
       return null;
     }
-    const selectorModel = new SelectorModel(new Y12.Map(), this.scope);
+    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", "selector");
+      yMap.set(ElementModel.KEYS.shadow, "layer");
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const selectorModel = new SelectorModel(yMap, this.scope, this.liveCursor);
     selectorModel.shadow = "layer";
-    this.addElementToDoc(selectorModel.root);
     return selectorModel;
   }
   createStraightLine(shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const straightLineModel = new StraightLineModel(new Y12.Map(), this.scope);
-    this.initElement(straightLineModel, shadow);
+    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", "line");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const straightLineModel = new StraightLineModel(yMap, this.scope, this.liveCursor);
+    this.initElement(straightLineModel);
     straightLineModel.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(straightLineModel.root);
     return straightLineModel;
   }
   createLinePath(shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const lineModel = new LineModel(new Y12.Map(), this.scope);
-    this.initElement(lineModel, shadow);
+    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", "arrow");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const lineModel = new LineModel(yMap, this.scope, this.liveCursor);
+    this.initElement(lineModel);
     lineModel.dashArray = this.toolbarModel.dashArray;
-    this.addElementToDoc(lineModel.root);
     return lineModel;
   }
   createPointText(x, y, shadow) {
     if (!this.confirmPermission()) {
       return null;
     }
-    const pointTextModel = new PointTextModel(new Y12.Map(), this.scope);
+    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", "point-text");
+      if (shadow) {
+        yMap.set(ElementModel.KEYS.shadow, "layer");
+      }
+      yMap.set(ElementModel.KEYS.strokeWidth, this.toolbarModel.strokeWidth);
+      yMap.set(ElementModel.KEYS.strokeColor, this.toolbarModel.strokeColor);
+      yMap.set(ElementModel.KEYS.fillColor, this.toolbarModel.fillColor);
+      yMap.set(ElementModel.KEYS.ownerId, this.userManager.selfId);
+      this.elements.set(uuid, yMap);
+    }, elementsUndoOrigin);
+    const pointTextModel = new PointTextModel(yMap, this.scope, this.liveCursor);
     pointTextModel.setPoints([x, y]);
     pointTextModel.fontSize = this.toolbarModel.fontSize;
     pointTextModel.fontFamily = this.toolbarModel.fontFamily;
-    this.initElement(pointTextModel, shadow);
-    this.addElementToDoc(pointTextModel.root);
+    this.initElement(pointTextModel);
     return pointTextModel;
   }
   clearElement() {
@@ -62724,8 +63009,14 @@ var RenderableModel = class extends import_eventemitter3.default {
       removeIds.forEach((id) => this.elements.delete(id));
     });
   }
-  dispose() {
-    this.elements.clear();
+  dispose(clearElements) {
+    (0, import_forge_room2.removeObserver)(this.elements, this.onElementsChange);
+    if (clearElements) {
+      this.elements.clear();
+    }
+    Array.from(this.elementModels.values()).forEach((model) => {
+      model.dispose();
+    });
   }
 };
 var import_lodash8 = __toESM2(require_lodash(), 1);
@@ -62764,10 +63055,10 @@ var AnglePrecision = Deg2Rad(2);
 var Phi = 0.5 * (-1 + Math.sqrt(5));
 function DollarRecognizer() {
   this.Unistrokes = new Array(3);
-  this.Unistrokes[0] = new Unistroke("triangle", new Array(new Point(137, 139), new Point(135, 141), new Point(133, 144), new Point(132, 146), new Point(130, 149), new Point(128, 151), new Point(126, 155), new Point(123, 160), new Point(120, 166), new Point(116, 171), new Point(112, 177), new Point(107, 183), new Point(102, 188), new Point(100, 191), new Point(95, 195), new Point(90, 199), new Point(86, 203), new Point(82, 206), new Point(80, 209), new Point(75, 213), new Point(73, 213), new Point(70, 216), new Point(67, 219), new Point(64, 221), new Point(61, 223), new Point(60, 225), new Point(62, 226), new Point(65, 225), new Point(67, 226), new Point(74, 226), new Point(77, 227), new Point(85, 229), new Point(91, 230), new Point(99, 231), new Point(108, 232), new Point(116, 233), new Point(125, 233), new Point(134, 234), new Point(145, 233), new Point(153, 232), new Point(160, 233), new Point(170, 234), new Point(177, 235), new Point(179, 236), new Point(186, 237), new Point(193, 238), new Point(198, 239), new Point(200, 237), new Point(202, 239), new Point(204, 238), new Point(206, 234), new Point(205, 230), new Point(202, 222), new Point(197, 216), new Point(192, 207), new Point(186, 198), new Point(179, 189), new Point(174, 183), new Point(170, 178), new Point(164, 171), new Point(161, 168), new Point(154, 160), new Point(148, 155), new Point(143, 150), new Point(138, 148), new Point(136, 148)));
-  this.Unistrokes[1] = new Unistroke("rectangle", new Array(new Point(78, 149), new Point(78, 153), new Point(78, 157), new Point(78, 160), new Point(79, 162), new Point(79, 164), new Point(79, 167), new Point(79, 169), new Point(79, 173), new Point(79, 178), new Point(79, 183), new Point(80, 189), new Point(80, 193), new Point(80, 198), new Point(80, 202), new Point(81, 208), new Point(81, 210), new Point(81, 216), new Point(82, 222), new Point(82, 224), new Point(82, 227), new Point(83, 229), new Point(83, 231), new Point(85, 230), new Point(88, 232), new Point(90, 233), new Point(92, 232), new Point(94, 233), new Point(99, 232), new Point(102, 233), new Point(106, 233), new Point(109, 234), new Point(117, 235), new Point(123, 236), new Point(126, 236), new Point(135, 237), new Point(142, 238), new Point(145, 238), new Point(152, 238), new Point(154, 239), new Point(165, 238), new Point(174, 237), new Point(179, 236), new Point(186, 235), new Point(191, 235), new Point(195, 233), new Point(197, 233), new Point(200, 233), new Point(201, 235), new Point(201, 233), new Point(199, 231), new Point(198, 226), new Point(198, 220), new Point(196, 207), new Point(195, 195), new Point(195, 181), new Point(195, 173), new Point(195, 163), new Point(194, 155), new Point(192, 145), new Point(192, 143), new Point(192, 138), new Point(191, 135), new Point(191, 133), new Point(191, 130), new Point(190, 128), new Point(188, 129), new Point(186, 129), new Point(181, 132), new Point(173, 131), new Point(162, 131), new Point(151, 132), new Point(149, 132), new Point(138, 132), new Point(136, 132), new Point(122, 131), new Point(120, 131), new Point(109, 130), new Point(107, 130), new Point(90, 132), new Point(81, 133), new Point(76, 133)));
-  this.Unistrokes[2] = new Unistroke("circle", new Array(new Point(127, 141), new Point(124, 140), new Point(120, 139), new Point(118, 139), new Point(116, 139), new Point(111, 140), new Point(109, 141), new Point(104, 144), new Point(100, 147), new Point(96, 152), new Point(93, 157), new Point(90, 163), new Point(87, 169), new Point(85, 175), new Point(83, 181), new Point(82, 190), new Point(82, 195), new Point(83, 200), new Point(84, 205), new Point(88, 213), new Point(91, 216), new Point(96, 219), new Point(103, 222), new Point(108, 224), new Point(111, 224), new Point(120, 224), new Point(133, 223), new Point(142, 222), new Point(152, 218), new Point(160, 214), new Point(167, 210), new Point(173, 204), new Point(178, 198), new Point(179, 196), new Point(182, 188), new Point(182, 177), new Point(178, 167), new Point(170, 150), new Point(163, 138), new Point(152, 130), new Point(143, 129), new Point(140, 131), new Point(129, 136), new Point(126, 139)));
-  this.Unistrokes[3] = new Unistroke("arrow", new Array(new Point(68, 222), new Point(70, 220), new Point(73, 218), new Point(75, 217), new Point(77, 215), new Point(80, 213), new Point(82, 212), new Point(84, 210), new Point(87, 209), new Point(89, 208), new Point(92, 206), new Point(95, 204), new Point(101, 201), new Point(106, 198), new Point(112, 194), new Point(118, 191), new Point(124, 187), new Point(127, 186), new Point(132, 183), new Point(138, 181), new Point(141, 180), new Point(146, 178), new Point(154, 173), new Point(159, 171), new Point(161, 170), new Point(166, 167), new Point(168, 167), new Point(171, 166), new Point(174, 164), new Point(177, 162), new Point(180, 160), new Point(182, 158), new Point(183, 156), new Point(181, 154), new Point(178, 153), new Point(171, 153), new Point(164, 153), new Point(160, 153), new Point(150, 154), new Point(147, 155), new Point(141, 157), new Point(137, 158), new Point(135, 158), new Point(137, 158), new Point(140, 157), new Point(143, 156), new Point(151, 154), new Point(160, 152), new Point(170, 149), new Point(179, 147), new Point(185, 145), new Point(192, 144), new Point(196, 144), new Point(198, 144), new Point(200, 144), new Point(201, 147), new Point(199, 149), new Point(194, 157), new Point(191, 160), new Point(186, 167), new Point(180, 176), new Point(177, 179), new Point(171, 187), new Point(169, 189), new Point(165, 194), new Point(164, 196)));
+  this.Unistrokes[0] = new Unistroke("triangle", [new Point(137, 139), new Point(135, 141), new Point(133, 144), new Point(132, 146), new Point(130, 149), new Point(128, 151), new Point(126, 155), new Point(123, 160), new Point(120, 166), new Point(116, 171), new Point(112, 177), new Point(107, 183), new Point(102, 188), new Point(100, 191), new Point(95, 195), new Point(90, 199), new Point(86, 203), new Point(82, 206), new Point(80, 209), new Point(75, 213), new Point(73, 213), new Point(70, 216), new Point(67, 219), new Point(64, 221), new Point(61, 223), new Point(60, 225), new Point(62, 226), new Point(65, 225), new Point(67, 226), new Point(74, 226), new Point(77, 227), new Point(85, 229), new Point(91, 230), new Point(99, 231), new Point(108, 232), new Point(116, 233), new Point(125, 233), new Point(134, 234), new Point(145, 233), new Point(153, 232), new Point(160, 233), new Point(170, 234), new Point(177, 235), new Point(179, 236), new Point(186, 237), new Point(193, 238), new Point(198, 239), new Point(200, 237), new Point(202, 239), new Point(204, 238), new Point(206, 234), new Point(205, 230), new Point(202, 222), new Point(197, 216), new Point(192, 207), new Point(186, 198), new Point(179, 189), new Point(174, 183), new Point(170, 178), new Point(164, 171), new Point(161, 168), new Point(154, 160), new Point(148, 155), new Point(143, 150), new Point(138, 148), new Point(136, 148)]);
+  this.Unistrokes[1] = new Unistroke("rectangle", [new Point(78, 149), new Point(78, 153), new Point(78, 157), new Point(78, 160), new Point(79, 162), new Point(79, 164), new Point(79, 167), new Point(79, 169), new Point(79, 173), new Point(79, 178), new Point(79, 183), new Point(80, 189), new Point(80, 193), new Point(80, 198), new Point(80, 202), new Point(81, 208), new Point(81, 210), new Point(81, 216), new Point(82, 222), new Point(82, 224), new Point(82, 227), new Point(83, 229), new Point(83, 231), new Point(85, 230), new Point(88, 232), new Point(90, 233), new Point(92, 232), new Point(94, 233), new Point(99, 232), new Point(102, 233), new Point(106, 233), new Point(109, 234), new Point(117, 235), new Point(123, 236), new Point(126, 236), new Point(135, 237), new Point(142, 238), new Point(145, 238), new Point(152, 238), new Point(154, 239), new Point(165, 238), new Point(174, 237), new Point(179, 236), new Point(186, 235), new Point(191, 235), new Point(195, 233), new Point(197, 233), new Point(200, 233), new Point(201, 235), new Point(201, 233), new Point(199, 231), new Point(198, 226), new Point(198, 220), new Point(196, 207), new Point(195, 195), new Point(195, 181), new Point(195, 173), new Point(195, 163), new Point(194, 155), new Point(192, 145), new Point(192, 143), new Point(192, 138), new Point(191, 135), new Point(191, 133), new Point(191, 130), new Point(190, 128), new Point(188, 129), new Point(186, 129), new Point(181, 132), new Point(173, 131), new Point(162, 131), new Point(151, 132), new Point(149, 132), new Point(138, 132), new Point(136, 132), new Point(122, 131), new Point(120, 131), new Point(109, 130), new Point(107, 130), new Point(90, 132), new Point(81, 133), new Point(76, 133)]);
+  this.Unistrokes[2] = new Unistroke("circle", [new Point(127, 141), new Point(124, 140), new Point(120, 139), new Point(118, 139), new Point(116, 139), new Point(111, 140), new Point(109, 141), new Point(104, 144), new Point(100, 147), new Point(96, 152), new Point(93, 157), new Point(90, 163), new Point(87, 169), new Point(85, 175), new Point(83, 181), new Point(82, 190), new Point(82, 195), new Point(83, 200), new Point(84, 205), new Point(88, 213), new Point(91, 216), new Point(96, 219), new Point(103, 222), new Point(108, 224), new Point(111, 224), new Point(120, 224), new Point(133, 223), new Point(142, 222), new Point(152, 218), new Point(160, 214), new Point(167, 210), new Point(173, 204), new Point(178, 198), new Point(179, 196), new Point(182, 188), new Point(182, 177), new Point(178, 167), new Point(170, 150), new Point(163, 138), new Point(152, 130), new Point(143, 129), new Point(140, 131), new Point(129, 136), new Point(126, 139)]);
+  this.Unistrokes[3] = new Unistroke("arrow", [new Point(68, 222), new Point(70, 220), new Point(73, 218), new Point(75, 217), new Point(77, 215), new Point(80, 213), new Point(82, 212), new Point(84, 210), new Point(87, 209), new Point(89, 208), new Point(92, 206), new Point(95, 204), new Point(101, 201), new Point(106, 198), new Point(112, 194), new Point(118, 191), new Point(124, 187), new Point(127, 186), new Point(132, 183), new Point(138, 181), new Point(141, 180), new Point(146, 178), new Point(154, 173), new Point(159, 171), new Point(161, 170), new Point(166, 167), new Point(168, 167), new Point(171, 166), new Point(174, 164), new Point(177, 162), new Point(180, 160), new Point(182, 158), new Point(183, 156), new Point(181, 154), new Point(178, 153), new Point(171, 153), new Point(164, 153), new Point(160, 153), new Point(150, 154), new Point(147, 155), new Point(141, 157), new Point(137, 158), new Point(135, 158), new Point(137, 158), new Point(140, 157), new Point(143, 156), new Point(151, 154), new Point(160, 152), new Point(170, 149), new Point(179, 147), new Point(185, 145), new Point(192, 144), new Point(196, 144), new Point(198, 144), new Point(200, 144), new Point(201, 147), new Point(199, 149), new Point(194, 157), new Point(191, 160), new Point(186, 167), new Point(180, 176), new Point(177, 179), new Point(171, 187), new Point(169, 189), new Point(165, 194), new Point(164, 196)]);
   this.Recognize = function(points, useProtractor) {
     var t0 = Date.now();
     var candidate = new Unistroke("", points);
@@ -62828,7 +63119,7 @@ function RotateBy(points, radians) {
   var c = Centroid(points);
   var cos = Math.cos(radians);
   var sin = Math.sin(radians);
-  var newpoints = new Array();
+  var newpoints = [];
   for (var i = 0; i < points.length; i++) {
     var qx = (points[i].X - c.X) * cos - (points[i].Y - c.Y) * sin + c.X;
     var qy = (points[i].X - c.X) * sin + (points[i].Y - c.Y) * cos + c.Y;
@@ -62838,7 +63129,7 @@ function RotateBy(points, radians) {
 }
 function ScaleTo(points, size) {
   var B2 = BoundingBox(points);
-  var newpoints = new Array();
+  var newpoints = [];
   for (var i = 0; i < points.length; i++) {
     var qx = points[i].X * (size / B2.Width);
     var qy = points[i].Y * (size / B2.Height);
@@ -62848,7 +63139,7 @@ function ScaleTo(points, size) {
 }
 function TranslateTo(points, pt) {
   var c = Centroid(points);
-  var newpoints = new Array();
+  var newpoints = [];
   for (var i = 0; i < points.length; i++) {
     var qx = points[i].X + pt.X - c.X;
     var qy = points[i].Y + pt.Y - c.Y;
@@ -62858,14 +63149,14 @@ function TranslateTo(points, pt) {
 }
 function Vectorize(points) {
   var sum = 0;
-  var vector = new Array();
-  for (var i = 0; i < points.length; i++) {
+  var vector = [];
+  for (let i = 0; i < points.length; i++) {
     vector[vector.length] = points[i].X;
     vector[vector.length] = points[i].Y;
     sum += points[i].X * points[i].X + points[i].Y * points[i].Y;
   }
   var magnitude = Math.sqrt(sum);
-  for (var i = 0; i < vector.length; i++)
+  for (let i = 0; i < vector.length; i++)
     vector[i] /= magnitude;
   return vector;
 }
@@ -63013,19 +63304,38 @@ var CurveTool = class extends WhiteboardTool {
     _defineProperty19(this, "elementModel", null);
     _defineProperty19(this, "recognizer", new Recognizer());
     _defineProperty19(this, "pointCount", 0);
-    this.tool.minDistance = 1;
+    _defineProperty19(this, "showLiveCursor", true);
+    this.tool.minDistance = 5;
   }
-  onMouseDown(event) {
+  onMouseDown(_event) {
     this.pointCount = 0;
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createCurve(true);
   }
   onMouseDrag(event) {
     if (this.pointCount > 1024) {
       return;
     }
+    const MIN_DISTANCE = 4;
     if (this.elementModel) {
-      this.pointCount += 1;
-      this.elementModel.appendPoints([Math.round(event.point.x), Math.round(event.point.y)]);
+      const len = this.elementModel.points.length;
+      let last = {
+        x: 0,
+        y: 0
+      };
+      if (len >= 2) {
+        last = {
+          x: this.elementModel.points[len - 2],
+          y: this.elementModel.points[len - 1]
+        };
+      }
+      const dist = Math.max(Math.abs(last.x - event.point.x), Math.abs(last.y - event.point.y));
+      if (dist >= MIN_DISTANCE) {
+        this.pointCount += 1;
+        this.elementModel.appendPoints([Math.round(event.point.x), Math.round(event.point.y)]);
+      }
     }
   }
   onMouseUp(event) {
@@ -63082,9 +63392,13 @@ var RectangleTool = class extends WhiteboardTool {
     _defineProperty20(this, "elementModel", null);
     _defineProperty20(this, "from", null);
     _defineProperty20(this, "to", null);
+    _defineProperty20(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createRectangle(true);
     this.from = event.point.clone();
     this.to = event.point.clone();
@@ -63130,7 +63444,7 @@ var TOOLBAR_KEYS = {
   strokeWidth: "strokeWidth",
   dashArray: "dashArray"
 };
-var ToolbarModel = class extends import_eventemitter33.default {
+var ToolbarModel = class extends import_eventemitter32.default {
   get currentTool() {
     return this.root.get(TOOLBAR_KEYS.tool);
   }
@@ -63199,6 +63513,10 @@ var ToolbarModel = class extends import_eventemitter33.default {
       }
     });
   }
+  dispose() {
+    (0, import_forge_room6.removeObserver)(this.root, this.handleRootUpdate);
+    this.removeAllListeners();
+  }
 };
 function _defineProperty22(e, r, t) {
   return (r = _toPropertyKey22(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
@@ -63225,11 +63543,15 @@ var SelectorTool = class extends WhiteboardTool {
     _defineProperty22(this, "to", null);
     _defineProperty22(this, "selectElementsModel", void 0);
     _defineProperty22(this, "selectElements", /* @__PURE__ */ new Map());
+    _defineProperty22(this, "showLiveCursor", false);
     this.selectElementsModel = selectElementsModel;
   }
   onMouseDown(event) {
     this.from = null;
     this.to = null;
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createSelector();
     this.from = event.point.clone();
     this.to = event.point.clone();
@@ -63302,7 +63624,7 @@ function _toPrimitive23(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var SelectElementsModel = class extends import_eventemitter34.default {
+var SelectElementsModel = class extends import_eventemitter33.default {
   get hasEditSelfPermission() {
     return this.hasPermission(WhiteboardPermissionFlag.editSelf);
   }
@@ -63318,13 +63640,17 @@ var SelectElementsModel = class extends import_eventemitter34.default {
     _defineProperty23(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserveDeep(cb);
+        (0, import_forge_room7.removeDeepObserver)(this.requestUserMap(user.id), cb);
+        this.observers.delete(user.id);
       }
     });
     _defineProperty23(this, "handleUserJoin", (user) => {
       const observer = (evts) => {
         this.handleUserSelectElementsChange(user.id, evts);
       };
+      if (this.observers.has(user.id)) {
+        (0, import_forge_room7.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
+      }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
     });
@@ -63344,6 +63670,9 @@ var SelectElementsModel = class extends import_eventemitter34.default {
       const observer = (evts) => {
         this.handleUserSelectElementsChange(userId, evts);
       };
+      if (this.observers.has(userId)) {
+        (0, import_forge_room7.removeDeepObserver)(this.requestUserMap(userId), this.observers.get(userId));
+      }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
     });
@@ -63398,12 +63727,9 @@ var SelectElementsModel = class extends import_eventemitter34.default {
     });
   }
   dispose() {
-    this.userManager.userIdList().forEach((userId) => {
-      const cb = this.observers.get(userId);
-      if (cb) {
-        this.requestUserMap(userId).unobserveDeep(cb);
-      }
-    });
+    for (const [key, value] of this.observers.entries()) {
+      (0, import_forge_room7.removeDeepObserver)(this.requestUserMap(key), value);
+    }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
     this.userManager.off("join", this.handleUserJoin);
@@ -63426,7 +63752,7 @@ function _toPrimitive24(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var TextEditor = class extends import_eventemitter36.EventEmitter {
+var TextEditor = class extends import_eventemitter35.EventEmitter {
   constructor(camera) {
     super();
     _defineProperty24(this, "rootView", void 0);
@@ -63459,12 +63785,12 @@ var TextEditor = class extends import_eventemitter36.EventEmitter {
     });
     this.camera = camera;
     this.rootView = document.createElement("div");
-    this.rootView.style.cssText = `position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden;`;
+    this.rootView.style.cssText = "position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden;";
     this.content = document.createElement("div");
     this.content.setAttribute("spellcheck", "false");
     this.content.textContent = "";
     this.content.setAttribute("contenteditable", "plaintext-only");
-    this.content.style.cssText = `white-space: nowrap;border:1px solid red;text-wrap:nowrap;caret-color:red;line-height:1.2em;position:absolute;z-index:2;color:transparent;outline:none;`;
+    this.content.style.cssText = "white-space: nowrap;border:1px solid red;text-wrap:nowrap;caret-color:red;line-height:1.2em;position:absolute;z-index:2;color:transparent;outline:none;";
     this.content.style.transformOrigin = "0 0";
     this.rootView.appendChild(this.content);
     this.content.addEventListener("input", this.handleContentInput);
@@ -63567,7 +63893,7 @@ var ANCHOR_STYLE = {
   b: "cursor:s-resize;bottom:-3px;left:50%;translate:-50%;",
   br: "cursor:se-resize;bottom:-3px;right:-3px"
 };
-var Bounds = class extends import_eventemitter35.default {
+var Bounds = class extends import_eventemitter34.default {
   get width() {
     return this.maxX - this.minX;
   }
@@ -63706,7 +64032,7 @@ var Bounds = class extends import_eventemitter35.default {
     this.maxY = maxY;
   }
 };
-var Editor = class extends import_eventemitter35.default {
+var Editor = class extends import_eventemitter34.default {
   constructor(scope, shadowScope, shadowEmitter, canvasElement, camera, initConfig) {
     super();
     _defineProperty25(this, "rootView", void 0);
@@ -63807,7 +64133,7 @@ var Editor = class extends import_eventemitter35.default {
       }
       if (this.editMode === "matrix" && this.editAnchor && this.lastEditPoint) {
         const offsetX = evt.pageX - this.lastEditPoint.x;
-        let offsetY = evt.pageY - this.lastEditPoint.y;
+        const offsetY = evt.pageY - this.lastEditPoint.y;
         this.bounds.offsetBy(this.editAnchor, offsetX, offsetY, this.uniformScale ? this.aspectRatio : -1);
         this.lastEditPoint = {
           x: evt.pageX,
@@ -63832,7 +64158,7 @@ var Editor = class extends import_eventemitter35.default {
       }
       if (this.editMode === "translate" && this.lastEditPoint) {
         const offsetX = evt.pageX - this.lastEditPoint.x;
-        let offsetY = evt.pageY - this.lastEditPoint.y;
+        const offsetY = evt.pageY - this.lastEditPoint.y;
         this.bounds.translate(offsetX, offsetY);
         this.updateBoundsByShadow();
         this.lastEditPoint = {
@@ -63909,7 +64235,7 @@ var Editor = class extends import_eventemitter35.default {
     this.ctrlId = initConfig.ctrlId;
     this.ctrlNickName = initConfig.ctrlNickName;
     this.rootView = document.createElement("div");
-    this.rootView.style.cssText = `position:absolute;display:none;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);`;
+    this.rootView.style.cssText = "overflow:hidden;position:absolute;display:none;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);";
     this.frame = document.createElement("div");
     this.frame.style.position = "absolute";
     this.frame.style.padding = "8px";
@@ -63930,7 +64256,7 @@ var Editor = class extends import_eventemitter35.default {
     } else {
       this.title = document.createElement("div");
       this.title.textContent = `${this.ctrlNickName}`;
-      this.title.style.cssText = `color:#fff;font-size:12px;padding: 0.2em 0.4em;border-radius: 0.4em;position: absolute;top: 0%;left: 0;margin: -0.4em;transform: translate(-100%, -100%);`;
+      this.title.style.cssText = "color:#fff;font-size:12px;padding: 0.2em 0.4em;border-radius: 0.4em;position: absolute;top: 0%;left: 0;margin: -0.4em;transform: translate(-100%, -100%);";
       this.frame.appendChild(this.title);
       this.rootView.style.pointerEvents = "none";
     }
@@ -64153,6 +64479,7 @@ var TextTool = class extends WhiteboardTool {
     _defineProperty26(this, "elementModel", null);
     _defineProperty26(this, "toolbarModel", void 0);
     _defineProperty26(this, "camera", void 0);
+    _defineProperty26(this, "showLiveCursor", false);
     this.rootView = rootView;
     this.canvasElement = canvasElement;
     this.toolbarModel = toolbarModel;
@@ -64161,7 +64488,7 @@ var TextTool = class extends WhiteboardTool {
   onMouseDown(event) {
     this.from = event.point.clone();
   }
-  onMouseDrag(event) {
+  onMouseDrag(_event) {
   }
   onMouseUp(event) {
     this.to = event.point.clone();
@@ -64173,6 +64500,9 @@ var TextTool = class extends WhiteboardTool {
     }
   }
   createPointEditor(x, y) {
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createPointText(x, y, true);
     if (this.elementModel === null) {
       return;
@@ -64228,7 +64558,7 @@ function _toPrimitive27(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var Gesture = class extends import_eventemitter38.default {
+var Gesture = class extends import_eventemitter37.default {
   constructor(element, scope) {
     super();
     _defineProperty27(this, "element", void 0);
@@ -64307,7 +64637,7 @@ function _toPrimitive28(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var Camera = class extends import_eventemitter37.default {
+var Camera = class extends import_eventemitter36.default {
   get inherentMatrix() {
     const inherentMatrix = new this.scope.Matrix();
     inherentMatrix.scale(this.inherentScale, [0, 0]);
@@ -64363,13 +64693,16 @@ var Camera = class extends import_eventemitter37.default {
     _defineProperty28(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserve(cb);
+        (0, import_forge_room8.removeObserver)(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty28(this, "handleUserJoin", (user) => {
       const observer = (evt) => {
         this.handleViewMatrixUpdate(user.id, evt);
       };
+      if (this.observers.has(user.id)) {
+        (0, import_forge_room8.removeObserver)(this.requestUserMap(user.id), observer);
+      }
       this.requestUserMap(user.id).observe(observer);
       this.observers.set(user.id, observer);
     });
@@ -64449,7 +64782,7 @@ var Camera = class extends import_eventemitter37.default {
     });
     this.maxScale = maxScale;
     this.bound = window.document.createElement("div");
-    this.bound.style.cssText = `transition: box-shadow 100ms;pointer-events:none;z-index:99;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);`;
+    this.bound.style.cssText = "transition: box-shadow 100ms;pointer-events:none;z-index:99;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);";
     this.initSize = initSize;
     this.hasPermission = hasPermission;
     this.paperSize = _paperSize;
@@ -64474,6 +64807,9 @@ var Camera = class extends import_eventemitter37.default {
       const observer = (evt) => {
         this.handleViewMatrixUpdate(userId, evt);
       };
+      if (this.observers.has(userId)) {
+        (0, import_forge_room8.removeObserver)(this.requestUserMap(userId), observer);
+      }
       this.requestUserMap(userId).observe(observer);
       this.observers.set(userId, observer);
     });
@@ -64510,7 +64846,7 @@ var Camera = class extends import_eventemitter37.default {
       this.bound.style.boxShadow = `inset 0px 0px 6px 2px ${this.boundaryColor}`;
       window.clearTimeout(this.boundTiemoutId);
       this.boundTiemoutId = window.setTimeout(() => {
-        this.bound.style.boxShadow = `none`;
+        this.bound.style.boxShadow = "none";
       }, 100);
     }
   }
@@ -64520,6 +64856,9 @@ var Camera = class extends import_eventemitter37.default {
   updateInherentScale(scale) {
     this.inherentScale = scale;
   }
+  getInherentScale() {
+    return this.inherentScale;
+  }
   getActiveMatrix() {
     const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
     let matrixValue;
@@ -64662,6 +65001,19 @@ var Camera = class extends import_eventemitter37.default {
       y: 0
     };
   }
+  dispose() {
+    Array.from(this.observers.keys()).forEach((userId) => {
+      const cb = this.observers.get(userId);
+      if (cb) {
+        (0, import_forge_room8.removeObserver)(this.requestUserMap(userId), cb);
+      }
+    });
+    (0, import_forge_room8.removeObserver)(this.whiteboardAttrsMap, this.handleMainCameraChange);
+    this.userManager.off("join", this.handleUserJoin);
+    this.userManager.off("leave", this.handleUserLeave);
+    this.gesture.removeAllListeners();
+    this.removeAllListeners();
+  }
 };
 function _defineProperty29(e, r, t) {
   return (r = _toPropertyKey29(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
@@ -64686,9 +65038,13 @@ var EllipseTool = class extends WhiteboardTool {
     _defineProperty29(this, "elementModel", null);
     _defineProperty29(this, "from", null);
     _defineProperty29(this, "to", null);
+    _defineProperty29(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createSegmentedPath("ellipse", true);
     this.from = event.point.clone();
     this.to = event.point.clone();
@@ -64735,9 +65091,13 @@ var TriangleTool = class extends WhiteboardTool {
     _defineProperty30(this, "elementModel", null);
     _defineProperty30(this, "from", null);
     _defineProperty30(this, "to", null);
+    _defineProperty30(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createTriangle(true);
     this.from = event.point.clone();
     this.to = event.point.clone();
@@ -64774,8 +65134,7 @@ function _toPrimitive31(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var Whiteboard = class extends import_eventemitter39.default {
-  // public insertImage!: (src: string) => void;
+var Whiteboard = class extends import_eventemitter38.default {
   constructor(view) {
     super();
     _defineProperty31(this, "view", void 0);
@@ -64794,6 +65153,7 @@ var Whiteboard = class extends import_eventemitter39.default {
     _defineProperty31(this, "enableCameraBoundaryHighlight", void 0);
     _defineProperty31(this, "getElementAttribute", void 0);
     _defineProperty31(this, "setElementAttribute", void 0);
+    _defineProperty31(this, "removeElement", void 0);
     _defineProperty31(this, "getCurrentTool", void 0);
     _defineProperty31(this, "setCurrentTool", void 0);
     _defineProperty31(this, "setCanvasBackgroundColor", void 0);
@@ -64808,6 +65168,8 @@ var Whiteboard = class extends import_eventemitter39.default {
     _defineProperty31(this, "translateCamera", void 0);
     _defineProperty31(this, "scaleCamera", void 0);
     _defineProperty31(this, "resetCamera", void 0);
+    _defineProperty31(this, "showLiveCursor", void 0);
+    _defineProperty31(this, "updateViewport", void 0);
     _defineProperty31(this, "setFreeModelUserPage", void 0);
     _defineProperty31(this, "indexedNavigation", void 0);
     _defineProperty31(this, "setViewModeToFree", void 0);
@@ -64820,6 +65182,7 @@ var Whiteboard = class extends import_eventemitter39.default {
     _defineProperty31(this, "rasterizeElementsBounds", void 0);
     _defineProperty31(this, "rasterizeMaxBounds", void 0);
     _defineProperty31(this, "setInputType", void 0);
+    _defineProperty31(this, "insertImage", void 0);
     this.view = view;
   }
 };
@@ -64841,16 +65204,22 @@ function _toPrimitive32(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var EraserTool = class extends WhiteboardTool {
-  constructor(enableToolEvent, renderableModel, shadowEmitter, scope, trashedElementsModel) {
+  constructor(enableToolEvent, renderableModel, shadowEmitter, scope, trashedElementsModel, shadowScope) {
     super(enableToolEvent, renderableModel, shadowEmitter, scope);
     _defineProperty32(this, "elementModel", null);
     _defineProperty32(this, "trashedElementsModel", void 0);
     _defineProperty32(this, "pointCount", 0);
+    _defineProperty32(this, "showLiveCursor", true);
+    _defineProperty32(this, "shadowScope", void 0);
     this.trashedElementsModel = trashedElementsModel;
-    this.tool.minDistance = 1;
+    this.tool.minDistance = 2;
+    this.shadowScope = shadowScope;
   }
-  onMouseDown(event) {
+  onMouseDown(_event) {
     this.pointCount = 0;
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createEraser();
   }
   onMouseDrag(event) {
@@ -64871,8 +65240,18 @@ var EraserTool = class extends WhiteboardTool {
         this.trashedElementsModel.addTrashedElementForSelf(item.data.uuid, item.data.ownerId);
       }
     });
+    this.shadowScope.project.activeLayer.children.forEach((item) => {
+      if (item.data.type && ["selector", "eraser", "laser"].indexOf(item.data.type) < 0 && item.hitTest(event.point, {
+        segments: true,
+        stroke: true,
+        fill: true,
+        tolerance: 5
+      })) {
+        this.trashedElementsModel.addTrashedElementForSelf(item.data.uuid, item.data.ownerId);
+      }
+    });
   }
-  onMouseUp(event) {
+  onMouseUp(_event) {
     if (this.elementModel) {
       this.modelGetter().removeElementItem(this.elementModel.uuid);
     }
@@ -64896,7 +65275,7 @@ function _toPrimitive33(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var TrashedElementsModel = class extends import_eventemitter310.default {
+var TrashedElementsModel = class extends import_eventemitter39.default {
   get hasDeleteSelfPermission() {
     return this.hasPermission(WhiteboardPermissionFlag.deleteSelf);
   }
@@ -64912,13 +65291,16 @@ var TrashedElementsModel = class extends import_eventemitter310.default {
     _defineProperty33(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserveDeep(cb);
+        (0, import_forge_room9.removeDeepObserver)(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty33(this, "handleUserJoin", (user) => {
       const observer = (evts) => {
         this.handleUserTrashElementsChange(user.id, evts);
       };
+      if (this.observers.has(user.id)) {
+        (0, import_forge_room9.removeDeepObserver)(this.requestUserMap(user.id), this.observers.get(user.id));
+      }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
     });
@@ -64930,6 +65312,9 @@ var TrashedElementsModel = class extends import_eventemitter310.default {
       const observer = (evts) => {
         this.handleUserTrashElementsChange(userId, evts);
       };
+      if (this.observers.has(userId)) {
+        (0, import_forge_room9.removeDeepObserver)(this.requestUserMap(userId), userId);
+      }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
     });
@@ -64984,12 +65369,9 @@ var TrashedElementsModel = class extends import_eventemitter310.default {
     });
   }
   dispose() {
-    this.userManager.userIdList().forEach((userId) => {
-      const cb = this.observers.get(userId);
-      if (cb) {
-        this.requestUserMap(userId).unobserveDeep(cb);
-      }
-    });
+    for (const [key, value] of this.observers.entries()) {
+      (0, import_forge_room9.removeDeepObserver)(this.requestUserMap(key), value);
+    }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
     this.userManager.off("join", this.handleUserJoin);
@@ -65017,10 +65399,14 @@ var LaserPointerTool = class extends WhiteboardTool {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
     _defineProperty34(this, "elementModel", null);
     _defineProperty34(this, "pointCount", 0);
+    _defineProperty34(this, "showLiveCursor", true);
     this.tool.minDistance = 5;
   }
-  onMouseDown(event) {
+  onMouseDown(_event) {
     this.pointCount = 0;
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createLaserPointer();
   }
   onMouseDrag(event) {
@@ -65032,7 +65418,7 @@ var LaserPointerTool = class extends WhiteboardTool {
       this.elementModel.appendPoints([event.point.x, event.point.y]);
     }
   }
-  onMouseUp(event) {
+  onMouseUp(_event) {
     if (this.elementModel) {
       this.elementModel.beginRemoveAnimate();
     }
@@ -65055,7 +65441,7 @@ function _toPrimitive35(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var PageModel = class extends import_eventemitter311.default {
+var PageModel = class extends import_eventemitter310.default {
   constructor(whiteboardAttrsMap, userManager, requestUserMap, pageMap, hasPermission) {
     super();
     _defineProperty35(this, "whiteboardAttrsMap", void 0);
@@ -65067,7 +65453,7 @@ var PageModel = class extends import_eventemitter311.default {
     _defineProperty35(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
-        this.requestUserMap(user.id).unobserve(cb);
+        (0, import_forge_room10.removeObserver)(this.requestUserMap(user.id), cb);
       }
     });
     _defineProperty35(this, "handleUserJoin", (user) => {
@@ -65081,7 +65467,7 @@ var PageModel = class extends import_eventemitter311.default {
             if (cameraMode === "main") {
               const targetPage = this.whiteboardAttrsMap.get(WhiteboardKeys.currentPage);
               if (!this.pageMap.has(targetPage) && targetPage !== "_i_") {
-                (0, import_forge_room2.log)(`main page {${targetPage}} not found.`, {}, "error");
+                (0, import_forge_room10.log)(`main page {${targetPage}} not found.`, {}, "error");
                 return;
               }
               this.requestUserMap(this.userManager.selfId).set(WhiteboardKeys.currentPage, targetPage);
@@ -65150,11 +65536,11 @@ var PageModel = class extends import_eventemitter311.default {
     }
     const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
     if (cameraMode !== "main") {
-      console.warn(`cannot modify pages in non-main view mode.`);
+      console.warn("cannot modify pages in non-main view mode.");
       return false;
     }
     if (!this.hasPermission(WhiteboardPermissionFlag.mainView)) {
-      console.warn(`cannot modify pages without WhiteboardPermissionFlag.mainView.`);
+      console.warn("cannot modify pages without WhiteboardPermissionFlag.mainView.");
       return false;
     }
     return true;
@@ -65206,13 +65592,22 @@ var PageModel = class extends import_eventemitter311.default {
       }
     }
   }
+  dispose() {
+    for (const entry of this.observers.entries()) {
+      const [userId, observer] = entry;
+      (0, import_forge_room10.removeObserver)(this.requestUserMap(userId), observer);
+    }
+    this.userManager.off("join", this.handleUserJoin);
+    this.userManager.off("leave", this.handleUserLeave);
+    (0, import_forge_room10.removeObserver)(this.whiteboardAttrsMap, this.handleMainPageChange);
+    (0, import_forge_room10.removeObserver)(this.pageMap, this.handlePageMapChange);
+  }
 };
 var delay = (value) => new Promise((resolve) => setTimeout(resolve, value));
 async function waitUntil(fn, timeout) {
-  let start = Date.now();
+  const start = Date.now();
   while (!fn() && Date.now() - start < timeout) {
     await delay(50);
-    start = Date.now();
   }
 }
 function _defineProperty36(e, r, t) {
@@ -65232,19 +65627,19 @@ function _toPrimitive36(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var IndexedNavigation = class extends import_eventemitter312.default {
+var IndexedNavigation = class extends import_eventemitter311.default {
   get idList() {
     return this.pageModel.pageList().filter((id) => /^_i_/.test(id));
   }
   get head() {
-    let headId = Object.keys(this.list).find((key) => {
+    const headId = Object.keys(this.list).find((key) => {
       return this.list[key] && this.list[key].prev === "";
     });
     if (!headId) {
-      (0, import_forge_room3.log)(`indexed navigation confusion`, {
+      (0, import_forge_room11.log)("indexed navigation confusion", {
         list: JSON.stringify(this.list)
       }, "error");
-      throw new Error(`indexed navigation confusion`);
+      throw new Error("indexed navigation confusion");
     }
     return headId;
   }
@@ -65265,7 +65660,7 @@ var IndexedNavigation = class extends import_eventemitter312.default {
     _defineProperty36(this, "indexedPageMap", void 0);
     _defineProperty36(this, "list", {});
     _defineProperty36(this, "hasPermission", void 0);
-    _defineProperty36(this, "handleIndexedPageMapUpdate", (evt) => {
+    _defineProperty36(this, "handleIndexedPageMapUpdate", (_evt) => {
       this.list = this.indexedPageMap.get("list");
       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);
@@ -65320,8 +65715,8 @@ var IndexedNavigation = class extends import_eventemitter312.default {
   initIndexed() {
     return new Promise((resolve) => {
       setTimeout(() => {
+        this.pageModel.addPage("_i_");
         if (this.pageModel.pageList().length === 0) {
-          this.pageModel.addPage("_i_");
           resolve(true);
         } else {
           resolve(false);
@@ -65330,19 +65725,22 @@ var IndexedNavigation = class extends import_eventemitter312.default {
     });
   }
   /**
-   * 获取总页数
-   * @returns {number}
-   */
+     * 获取总页数
+     * @returns {number}
+     */
   get pageCount() {
     return this.idList.length;
   }
   /**
-   * 获取当前页索引
-   */
+     * 获取当前页索引
+     */
   get currentPageIndex() {
     const userPageId = this.userMap.get(WhiteboardKeys.currentPage);
     return this.getPageIndex(userPageId);
   }
+  get currentPageId() {
+    return this.userMap.get(WhiteboardKeys.currentPage);
+  }
   getPageIndex(pageId) {
     let i = 0;
     let currentId = this.head;
@@ -65358,9 +65756,9 @@ var IndexedNavigation = class extends import_eventemitter312.default {
     return i;
   }
   /**
-   * 获取指定索引对应的 pageId
-   * @param {number} index
-   */
+     * 获取指定索引对应的 pageId
+     * @param {number} index
+     */
   getPageId(index) {
     const firstKey = this.head;
     if (firstKey) {
@@ -65382,20 +65780,20 @@ var IndexedNavigation = class extends import_eventemitter312.default {
   modifyDetect() {
     const cameraMode = this.userMap.get(WhiteboardKeys.cameraMode);
     if (cameraMode !== "main") {
-      console.warn(`cannot modify pages in non-main view mode.`);
+      console.warn("cannot modify pages in non-main view mode.");
       return false;
     }
     if (!this.hasPermission(WhiteboardPermissionFlag.mainView)) {
-      console.warn(`cannot modify pages without WhiteboardPermissionFlag.mainView.`);
+      console.warn("cannot modify pages without WhiteboardPermissionFlag.mainView.");
       return false;
     }
     return true;
   }
   /**
-   * 在尾部插入新页面
-   * @param {boolean=} goto 是否跳转到新页面, 默认 true
-   * @return 总页数
-   */
+     * 在尾部插入新页面
+     * @param {boolean=} goto 是否跳转到新页面, 默认 true
+     * @return 总页数
+     */
   pushPage() {
     let goto = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
     this.indexedPageMap.doc.transact(() => {
@@ -65424,11 +65822,11 @@ var IndexedNavigation = class extends import_eventemitter312.default {
     return this.pageCount;
   }
   /**
-   * 在 after 之后插入新页面
-   * @param {number} after 在此页之后插入
-   * @param {boolean=} goto 是否跳转到新页面, 默认 true
-   * @return 总页数
-   */
+     * 在 after 之后插入新页面
+     * @param {number} after 在此页之后插入
+     * @param {boolean=} goto 是否跳转到新页面, 默认 true
+     * @return 总页数
+     */
   insertPage(after) {
     let goto = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true;
     const afterPageId = this.getPageId(after);
@@ -65437,7 +65835,7 @@ var IndexedNavigation = class extends import_eventemitter312.default {
     }
     const cameraMode = this.userMap.get(WhiteboardKeys.cameraMode);
     if (cameraMode !== "main") {
-      console.warn(`cannot modify pages in non-main view mode.`);
+      console.warn("cannot modify pages in non-main view mode.");
       return this.pageCount;
     }
     const prev = this.list[afterPageId];
@@ -65480,8 +65878,8 @@ var IndexedNavigation = class extends import_eventemitter312.default {
     return this.pageCount;
   }
   /**
-   * 跳转至上一页, 并返回跳转后的页面索引.
-   */
+     * 跳转至上一页, 并返回跳转后的页面索引.
+     */
   prevPage() {
     const currentPageId = this.userMap.get(WhiteboardKeys.currentPage);
     const data = this.list[currentPageId];
@@ -65493,8 +65891,8 @@ var IndexedNavigation = class extends import_eventemitter312.default {
     return nextIndex;
   }
   /**
-   * 跳转至下一页, 并返回跳转后的页面索引.
-   */
+     * 跳转至下一页, 并返回跳转后的页面索引.
+     */
   nextPage() {
     const currentPageId = this.userMap.get(WhiteboardKeys.currentPage);
     const data = this.list[currentPageId];
@@ -65506,16 +65904,14 @@ var IndexedNavigation = class extends import_eventemitter312.default {
     return nextIndex;
   }
   /**
-   * 删除指定页面
-   * @param {number} index
-   */
+     * 删除指定页面
+     * @param {number} index
+     */
   removePage(index) {
     if (this.pageCount <= 1) {
       return this.pageCount;
     }
-    const cameraMode = this.userMap.get(WhiteboardKeys.cameraMode);
-    if (cameraMode !== "main") {
-      console.warn(`cannot modify pages in non-main view mode.`);
+    if (!this.modifyDetect()) {
       return this.pageCount;
     }
     const targetId = this.getPageId(index);
@@ -65555,6 +65951,11 @@ var IndexedNavigation = class extends import_eventemitter312.default {
       this.pageModel.gotoPage(targetId);
     }
   }
+  dispose() {
+    (0, import_forge_room12.removeObserver)(this.indexedPageMap, this.handleIndexedPageMapUpdate);
+    this.pageModel.off("switchPage");
+    this.pageModel.off("pagesChange");
+  }
 };
 function _defineProperty37(e, r, t) {
   return (r = _toPropertyKey37(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
@@ -65573,7 +65974,7 @@ function _toPrimitive37(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var ShadowEmitter = class extends import_eventemitter313.default {
+var ShadowEmitter = class extends import_eventemitter312.default {
   constructor(userMap) {
     super();
     _defineProperty37(this, "userMap", void 0);
@@ -65609,9 +66010,13 @@ var StraightLineTool = class extends WhiteboardTool {
     _defineProperty38(this, "elementModel", null);
     _defineProperty38(this, "from", null);
     _defineProperty38(this, "to", null);
+    _defineProperty38(this, "showLiveCursor", true);
     this.tool.minDistance = 1;
   }
   onMouseDown(event) {
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createStraightLine(true);
     this.from = event.point.clone();
     this.to = event.point.clone();
@@ -65653,6 +66058,7 @@ var GrabTool = class extends WhiteboardTool {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
     _defineProperty39(this, "camera", void 0);
     _defineProperty39(this, "downPoint", null);
+    _defineProperty39(this, "showLiveCursor", false);
     this.camera = camera;
   }
   onMouseDown(event) {
@@ -65671,25 +66077,207 @@ var GrabTool = class extends WhiteboardTool {
     this.shadowEmitter.emit("grabUp");
   }
 };
+function _defineProperty40(e, r, t) {
+  return (r = _toPropertyKey40(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey40(t) {
+  var i = _toPrimitive40(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive40(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
 var PointerTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
+    _defineProperty40(this, "showLiveCursor", false);
   }
-  onMouseDown(event) {
+  onMouseDown(_event) {
   }
-  onMouseDrag(event) {
+  onMouseDrag(_event) {
   }
   onMouseUp() {
   }
 };
-function _defineProperty40(e, r, t) {
-  return (r = _toPropertyKey40(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty41(e, r, t) {
+  return (r = _toPropertyKey41(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey40(t) {
-  var i = _toPrimitive40(t, "string");
+function _toPropertyKey41(t) {
+  var i = _toPrimitive41(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive40(t, r) {
+function _toPrimitive41(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+var SequenceExecutor = class {
+  constructor() {
+    _defineProperty41(this, "tasks", []);
+    _defineProperty41(this, "isRunning", false);
+  }
+  addTask(task) {
+    this.tasks.push(task);
+    if (!this.isRunning) {
+      this.execute();
+    }
+  }
+  async execute() {
+    if (this.isRunning) {
+      return;
+    }
+    this.isRunning = true;
+    while (this.tasks.length > 0) {
+      const task = this.tasks.shift();
+      if (task) {
+        try {
+          await task();
+        } catch (e) {
+        }
+      }
+    }
+    this.isRunning = false;
+  }
+};
+function _defineProperty42(e, r, t) {
+  return (r = _toPropertyKey42(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey42(t) {
+  var i = _toPrimitive42(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive42(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+var LiveCursor = class {
+  constructor(canvasElement, paperScope, userManager, requestUserMap) {
+    _defineProperty42(this, "container", document.createElement("div"));
+    _defineProperty42(this, "showLiveCursor", true);
+    _defineProperty42(this, "userManager", void 0);
+    _defineProperty42(this, "requestUserMap", void 0);
+    _defineProperty42(this, "cursors", /* @__PURE__ */ new Map());
+    _defineProperty42(this, "paperScope", void 0);
+    _defineProperty42(this, "resizeobserver", void 0);
+    _defineProperty42(this, "timeoutIdMap", /* @__PURE__ */ new Map());
+    _defineProperty42(this, "lastVisibleChangeTimes", /* @__PURE__ */ new Map());
+    this.userManager = userManager;
+    this.paperScope = paperScope;
+    this.requestUserMap = requestUserMap;
+    this.container.setAttribute("data-forge-cursors", "");
+    this.container.style.cssText = "overflow:hidden;pointer-events:none;z-index:999;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);";
+    this.container.style.pointerEvents = "none";
+    this.resizeobserver = new ResizeObserver(() => {
+      const bounds = canvasElement.getBoundingClientRect();
+      this.container.style.width = bounds.width + "px";
+      this.container.style.height = bounds.height + "px";
+    });
+    this.resizeobserver.observe(canvasElement);
+  }
+  createCursor(userId) {
+    const cursor = document.createElement("fcursor");
+    cursor.setAttribute("data-forge-cursor", userId);
+    cursor.style.backgroundColor = this.requestUserMap(userId).get(WhiteboardKeys.themeColor);
+    cursor.style.color = "#fff";
+    cursor.style.position = "absolute";
+    cursor.style.whiteSpace = "nowrap";
+    cursor.style.display = "block";
+    cursor.style.fontSize = "12px";
+    cursor.style.padding = "2px 4px";
+    cursor.style.borderRadius = "4px";
+    cursor.textContent = this.userManager.getUser(userId)?.nickName ?? userId;
+    return cursor;
+  }
+  isOnSamePage(userId) {
+    const otherPage = this.requestUserMap(userId).get(WhiteboardKeys.currentPage);
+    const selfPage = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.currentPage);
+    if (otherPage !== selfPage) {
+      return false;
+    }
+    return true;
+  }
+  detectEnable(userId) {
+    if (!this.showLiveCursor) {
+      const cursor = this.cursors.get(userId);
+      if (cursor) {
+        cursor.style.display = "none";
+      }
+    }
+    return this.showLiveCursor;
+  }
+  updateCursorPosition(point, userId) {
+    if (!this.isOnSamePage(userId) || userId === this.userManager.selfId) {
+      return;
+    }
+    if (!this.detectEnable(userId)) {
+      return;
+    }
+    const lastVisibleChangeTime = this.lastVisibleChangeTimes.get(userId);
+    if (lastVisibleChangeTime && Date.now() - lastVisibleChangeTime < 100) {
+      return;
+    }
+    if (!this.cursors.has(userId)) {
+      const cursor2 = this.createCursor(userId);
+      this.cursors.set(userId, cursor2);
+      this.container.appendChild(cursor2);
+    }
+    const cursor = this.cursors.get(userId);
+    if (cursor) {
+      const viewPoint = this.paperScope.project.view.projectToView(point);
+      cursor.style.left = viewPoint.x + "px";
+      cursor.style.top = viewPoint.y + "px";
+      cursor.style.display = "block";
+    }
+    if (this.timeoutIdMap.has(userId)) {
+      clearTimeout(this.timeoutIdMap.get(userId));
+    }
+    this.timeoutIdMap.set(userId, setTimeout(() => {
+      const cursor2 = this.cursors.get(userId);
+      if (cursor2) {
+        cursor2.style.display = "none";
+      }
+    }, 5e3));
+  }
+  updateCursorVisible(visible, userId) {
+    if (!this.isOnSamePage(userId) || userId === this.userManager.selfId) {
+      return;
+    }
+    if (!this.detectEnable(userId)) {
+      return;
+    }
+    this.lastVisibleChangeTimes.set(userId, Date.now());
+    const cursor = this.cursors.get(userId);
+    if (cursor) {
+      cursor.style.display = visible ? "block" : "none";
+    }
+  }
+};
+function _defineProperty43(e, r, t) {
+  return (r = _toPropertyKey43(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey43(t) {
+  var i = _toPrimitive43(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive43(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65700,6 +66288,21 @@ function _toPrimitive40(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var WHITEBOARD_APP_NAME = "whiteboard";
+var AsyncMap = class {
+  constructor() {
+    _defineProperty43(this, "map", void 0);
+    this.map = /* @__PURE__ */ new Map();
+  }
+  get(key) {
+    return Promise.resolve(this.map.get(key));
+  }
+  set(key, value) {
+    this.map.set(key, value);
+  }
+};
+if (!window.__forge_gl_wb_status__) {
+  window.__forge_gl_wb_status__ = new AsyncMap();
+}
 var WhiteboardApplication = class extends import_forge_room.AbstractApplication {
   get undoManager() {
     const page = this.pageModel.getCurrentPage(this.userId);
@@ -65708,47 +66311,116 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
     }
     return null;
   }
+  get viewportWidth() {
+    const vw = this.getMap("attrs").get("viewportWidth");
+    if (vw) {
+      return vw;
+    }
+    return this.option.width;
+  }
+  get viewportHeight() {
+    const vh = this.getMap("attrs").get("viewportHeight");
+    if (vh) {
+      return vh;
+    }
+    return this.option.height;
+  }
   constructor() {
     var _this;
     super();
     _this = this;
-    _defineProperty40(this, "name", WHITEBOARD_APP_NAME);
-    _defineProperty40(this, "emitter", void 0);
-    _defineProperty40(this, "toolbarModel", void 0);
-    _defineProperty40(this, "selectElementsModel", void 0);
-    _defineProperty40(this, "trashedElementsModel", void 0);
-    _defineProperty40(this, "pageModel", void 0);
-    _defineProperty40(this, "layers", /* @__PURE__ */ new Map());
-    _defineProperty40(this, "undoManagers", /* @__PURE__ */ new Map());
-    _defineProperty40(this, "rootElement", document.createElement("div"));
-    _defineProperty40(this, "paperScope", new import_paper.default.PaperScope());
-    _defineProperty40(this, "canvasElement", document.createElement("canvas"));
-    _defineProperty40(this, "shadowScope", new import_paper.default.PaperScope());
-    _defineProperty40(this, "snapshotCanvasElement", document.createElement("canvas"));
-    _defineProperty40(this, "snapshotScope", new import_paper.default.PaperScope());
-    _defineProperty40(this, "shadowCanvasElement", document.createElement("canvas"));
-    _defineProperty40(this, "shadowEmitter", void 0);
-    _defineProperty40(this, "tools", void 0);
-    _defineProperty40(this, "editors", /* @__PURE__ */ new Map());
-    _defineProperty40(this, "camera", void 0);
-    _defineProperty40(this, "resizeObserver", void 0);
-    _defineProperty40(this, "option", void 0);
-    _defineProperty40(this, "permissions", void 0);
-    _defineProperty40(this, "inputType", "any");
-    _defineProperty40(this, "isPenEvent", false);
-    _defineProperty40(this, "hasPenInput", null);
-    _defineProperty40(this, "disableViewModelUpdate", false);
-    _defineProperty40(this, "internalResizeObserver", true);
-    _defineProperty40(this, "linkTarget", null);
-    _defineProperty40(this, "enableToolEvent", () => {
+    _defineProperty43(this, "name", WHITEBOARD_APP_NAME);
+    _defineProperty43(this, "emitter", void 0);
+    _defineProperty43(this, "toolbarModel", void 0);
+    _defineProperty43(this, "selectElementsModel", void 0);
+    _defineProperty43(this, "trashedElementsModel", void 0);
+    _defineProperty43(this, "pageModel", void 0);
+    _defineProperty43(this, "layers", /* @__PURE__ */ new Map());
+    _defineProperty43(this, "undoManagers", /* @__PURE__ */ new Map());
+    _defineProperty43(this, "imageSets", document.createElement("div"));
+    _defineProperty43(this, "rootElement", document.createElement("div"));
+    _defineProperty43(this, "paperScope", new import_paper.default.PaperScope());
+    _defineProperty43(this, "canvasElement", document.createElement("canvas"));
+    _defineProperty43(this, "shadowScope", new import_paper.default.PaperScope());
+    _defineProperty43(this, "snapshotCanvasElement", document.createElement("canvas"));
+    _defineProperty43(this, "snapshotScope", new import_paper.default.PaperScope());
+    _defineProperty43(this, "shadowCanvasElement", document.createElement("canvas"));
+    _defineProperty43(this, "shadowEmitter", void 0);
+    _defineProperty43(this, "tools", void 0);
+    _defineProperty43(this, "editors", /* @__PURE__ */ new Map());
+    _defineProperty43(this, "camera", void 0);
+    _defineProperty43(this, "resizeObserver", void 0);
+    _defineProperty43(this, "option", void 0);
+    _defineProperty43(this, "permissions", void 0);
+    _defineProperty43(this, "inputType", "any");
+    _defineProperty43(this, "isPenEvent", false);
+    _defineProperty43(this, "hasPenInput", null);
+    _defineProperty43(this, "disableViewModelUpdate", false);
+    _defineProperty43(this, "internalResizeObserver", true);
+    _defineProperty43(this, "sequenceExecutor", new SequenceExecutor());
+    _defineProperty43(this, "linkWhiteboardId", null);
+    _defineProperty43(this, "liveCursor", void 0);
+    _defineProperty43(this, "delayTranslateOut", -1);
+    _defineProperty43(this, "addWhiteboardStatus", (evt) => {
+      if (evt.detail.whiteboardAppId && evt.detail.status) {
+        if (this.linkWhiteboardId === evt.detail.whiteboardAppId) {
+          this.toolbarModel.currentTool = evt.detail.status.currentTool;
+          this.toolbarModel.strokeColor = evt.detail.status.strokeColor;
+          this.toolbarModel.fillColor = evt.detail.status.fillColor;
+          this.toolbarModel.fontSize = evt.detail.status.fontSize;
+          this.toolbarModel.fontFamily = evt.detail.status.fontFamily;
+          this.toolbarModel.strokeWidth = evt.detail.status.strokeWidth;
+          this.toolbarModel.dashArray = evt.detail.status.dashArray;
+          this.permissions.removePermission(WhiteboardPermissionFlag.all);
+          this.permissions.addPermission(evt.detail.status.permission);
+        }
+      }
+    });
+    _defineProperty43(this, "enableToolEvent", () => {
       return !(this.inputType === "pen" && !this.isPenEvent);
     });
-    _defineProperty40(this, "handlePageSwitch", (pageId) => {
-      for (const editor of this.editors.values()) {
-        editor.hidden();
+    _defineProperty43(this, "handleViewportUpdate", (evt) => {
+      if (evt.keysChanged.has("viewportWidth") || evt.keysChanged.has("viewportHeight")) {
+        const rect = this.rootElement.getBoundingClientRect();
+        this.adjustByOutFrame(rect.width, rect.height);
       }
-      this.selectElementsModel.clearSelectElementForSelf();
-      waitUntil(() => this.layers.has(pageId), 3e3).then(() => {
+    });
+    _defineProperty43(this, "handleElementTranslateOut", (ids, container) => {
+      const shadowLayer = this.shadowScope.project.activeLayer;
+      let parent = null;
+      if (container === "layer") {
+        parent = shadowLayer;
+      } else {
+        parent = shadowLayer.children.find((child) => child.data.uuid === container) ?? null;
+      }
+      if (parent) {
+        ids.forEach((id) => {
+          const target = parent.children.find((child) => child.data.uuid === id);
+          if (target) {
+            target.remove();
+            this.insertElementToParent(target, this.paperScope.project.activeLayer);
+          } else {
+            const pageId = this.pageModel.getCurrentPage(this.userId);
+            if (pageId) {
+              const page = this.layers.get(pageId);
+              if (page) {
+                const model = page.elementModels.get(id);
+                if (model && model.item) {
+                  this.insertElementToParent(model.item, this.paperScope.project.activeLayer);
+                }
+              }
+            }
+          }
+        });
+      }
+    });
+    _defineProperty43(this, "handlePageSwitch", (pageId) => {
+      this.sequenceExecutor.addTask(async () => {
+        for (const editor of this.editors.values()) {
+          editor.hidden();
+        }
+        this.selectElementsModel.clearSelectElementForSelf();
+        await waitUntil(() => this.layers.has(pageId), 1e3);
         if (this.layers.has(pageId)) {
           for (const entry of this.layers.entries()) {
             entry[1].off("elementInsert", this.handleElementInsert);
@@ -65760,6 +66432,7 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
           renderableModel.on("elementRemove", this.handleElementRemove);
           renderableModel.on("elementClear", this.handleElementClear);
           renderableModel.flushRenderables();
+          this.paperScope.project.activeLayer.data.pageId = pageId;
           const others = this.userManager.userIdList().filter((v) => v !== this.userId);
           for (const other of others) {
             if (this.userMap(other).get(WhiteboardKeys.currentPage) === pageId) {
@@ -65769,9 +66442,11 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
               }
             }
           }
+        } else {
+          console.warn(`[@netless/forge-whiteboard] page ${pageId} not found`);
+          (0, import_forge_room.log)(`[@netless/forge-whiteboard] page ${pageId} not found`, {}, "warning");
         }
-      });
-      waitUntil(() => this.undoManagers.has(pageId), 3e3).then(() => {
+        await waitUntil(() => this.undoManagers.has(pageId), 1e3);
         if (this.undoManagers.has(pageId)) {
           for (const entry of this.undoManagers.entries()) {
             entry[1].off("stack-item-added", this.handleStackItemAdded);
@@ -65779,29 +66454,32 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
           }
           this.undoManagers.get(pageId).on("stack-item-added", this.handleStackItemAdded);
           this.undoManagers.get(pageId).on("stack-item-popped", this.handleStackItemPopped);
+        } else {
+          console.warn(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`);
+          (0, import_forge_room.log)(`[@netless/forge-whiteboard] undo manager for page ${pageId} not found`, {}, "warning");
         }
+        this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
+        this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
       });
-      this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
-      this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
     });
-    _defineProperty40(this, "hasPermission", (flag) => {
+    _defineProperty43(this, "hasPermission", (flag) => {
       return this.permissions.hasPermission(flag, this.userId);
     });
-    _defineProperty40(this, "handleStackItemAdded", () => {
+    _defineProperty43(this, "handleStackItemAdded", () => {
       this.selectElementsModel.clearSelectElementForSelf();
       this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
       this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
     });
-    _defineProperty40(this, "handleStackItemPopped", () => {
+    _defineProperty43(this, "handleStackItemPopped", () => {
       this.emitter.emit("redoStackLength", this.undoManager?.redoStack.length ?? 0);
       this.emitter.emit("undoStackLength", this.undoManager?.undoStack.length ?? 0);
     });
-    _defineProperty40(this, "handleLayersChange", (ids) => {
+    _defineProperty43(this, "handleLayersChange", (ids) => {
       for (let i = 0, len = ids.length; i < len; i++) {
         const id = ids[i];
         if (!this.layers.has(id)) {
           const elementsMap = this.getMap(`layer/${id}/elements`);
-          const renderableModel = new RenderableModel(id, this.shadowEmitter, elementsMap, this.paperScope, this.toolbarModel, this.userManager, this.hasPermission);
+          const renderableModel = new RenderableModel(id, this.shadowEmitter, elementsMap, this.paperScope, this.toolbarModel, this.userManager, this.imageSets, this.liveCursor, this.hasPermission);
           this.layers.set(id, renderableModel);
         }
         if (!this.undoManagers.has(id)) {
@@ -65812,12 +66490,12 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
           this.undoManagers.set(id, undoManager);
         }
       }
-      for (let entry of this.layers.entries()) {
+      for (const entry of this.layers.entries()) {
         if (ids.indexOf(entry[0]) < 0) {
           const renderableModel = this.layers.get(entry[0]);
           this.layers.delete(entry[0]);
           if (renderableModel) {
-            renderableModel.dispose();
+            renderableModel.dispose(true);
           }
           const cameraMode = this.userMap(this.userId).get(WhiteboardKeys.cameraMode);
           const currentPage = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
@@ -65828,17 +66506,18 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
         }
       }
     });
-    _defineProperty40(this, "getCurrentRenderableModel", () => {
-      let layerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
+    _defineProperty43(this, "getCurrentRenderableModel", () => {
+      const layerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
       if (!this.layers.has(layerId)) {
         this.emitter.emit("error", 300002, `target page: ${layerId} not found`);
       }
       return this.layers.get(layerId);
     });
-    _defineProperty40(this, "handleElementClear", () => {
+    _defineProperty43(this, "handleElementClear", () => {
+      this.shadowScope.project.activeLayer.removeChildren();
       this.paperScope.project.activeLayer.removeChildren();
     });
-    _defineProperty40(this, "handleElementInsert", (elements) => {
+    _defineProperty43(this, "handleElementInsert", (elements) => {
       for (const element of elements) {
         element.createPaperElement();
         const scope = element.shadow === "" ? this.paperScope : this.shadowScope;
@@ -65850,7 +66529,7 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
         this.insertElementToParent(element.item, scope.project.activeLayer);
       }
     });
-    _defineProperty40(this, "handleElementRemove", (elementId, layerId) => {
+    _defineProperty43(this, "handleElementRemove", (elementId, layerId) => {
       const layerModel = this.layers.get(layerId);
       if (!layerModel) {
         return;
@@ -65861,11 +66540,11 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
       }
       layerModel.elementModels.delete(elementId);
     });
-    _defineProperty40(this, "handleRemoveTrashedElementForSelf", (userId, elementId) => {
+    _defineProperty43(this, "handleRemoveTrashedElementForSelf", (userId, elementId) => {
       const selfLayerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
       this.layers.get(selfLayerId)?.removeElementItem(elementId);
     });
-    _defineProperty40(this, "handleElementsTrash", (userId, elements) => {
+    _defineProperty43(this, "handleElementsTrash", (userId, elements) => {
       const targetLayerId = this.userMap(userId).get(WhiteboardKeys.currentPage);
       const selfLayerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
       if (targetLayerId !== selfLayerId || !this.layers.has(targetLayerId)) {
@@ -65878,7 +66557,7 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
         }
       });
     });
-    _defineProperty40(this, "handleElementsSelect", (userId, elements) => {
+    _defineProperty43(this, "handleElementsSelect", (userId, elements) => {
       if (!this.editors.has(userId)) {
         const ctrl = this.userManager.getUser(userId);
         const editor2 = new Editor(this.paperScope, this.shadowScope, this.shadowEmitter, this.canvasElement, this.camera, {
@@ -65910,7 +66589,7 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
       }).filter((v) => !!v);
       editor.setTargets(elementModels);
       if (elementModels.length === 1) {
-        let model = elementModels[0];
+        const model = elementModels[0];
         if (model.item) {
           const topLeft = this.paperScope.project.view.projectToView(model.item.bounds.topLeft);
           const bottomRight = this.paperScope.project.view.projectToView(model.item.bounds.bottomRight);
@@ -65921,34 +66600,44 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
         this.emitter.emit("elementDeselected", userId);
       }
     });
-    _defineProperty40(this, "handleLinkedMapChange", (evt) => {
-      for (const [key, value] of evt.changes.keys.entries()) {
-        if (Object.keys(TOOLBAR_KEYS).indexOf(key) >= 0 && (value.action === "add" || value.action === "update")) {
-          this.toolbarModel.currentTool = evt.target.get(TOOLBAR_KEYS.tool);
-          this.toolbarModel.strokeColor = evt.target.get(TOOLBAR_KEYS.strokeColor);
-          this.toolbarModel.fillColor = evt.target.get(TOOLBAR_KEYS.fillColor);
-          this.toolbarModel.fontSize = evt.target.get(TOOLBAR_KEYS.fontSize);
-          this.toolbarModel.fontFamily = evt.target.get(TOOLBAR_KEYS.fontFamily);
-          this.toolbarModel.strokeWidth = evt.target.get(TOOLBAR_KEYS.strokeWidth);
-          this.toolbarModel.dashArray = evt.target.get(TOOLBAR_KEYS.dashArray);
-        }
-        if (key === "permission" && (value.action === "add" || value.action === "update")) {
-          this.permissions.removePermission(WhiteboardPermissionFlag.all);
-          this.permissions.addPermission(evt.target.get("permission"), this.userId);
-        }
+    _defineProperty43(this, "handleSyncedWhiteboardStatusChange", (evt) => {
+      if ([TOOLBAR_KEYS.tool, TOOLBAR_KEYS.strokeColor, TOOLBAR_KEYS.fillColor, TOOLBAR_KEYS.fontSize, TOOLBAR_KEYS.fontFamily, TOOLBAR_KEYS.strokeWidth, TOOLBAR_KEYS.dashArray, "permission"].some((key) => evt.keysChanged.has(key))) {
+        const nextState = {
+          currentTool: evt.target.get(TOOLBAR_KEYS.tool),
+          strokeColor: evt.target.get(TOOLBAR_KEYS.strokeColor),
+          fillColor: evt.target.get(TOOLBAR_KEYS.fillColor),
+          fontSize: evt.target.get(TOOLBAR_KEYS.fontSize),
+          fontFamily: evt.target.get(TOOLBAR_KEYS.fontFamily),
+          strokeWidth: evt.target.get(TOOLBAR_KEYS.strokeWidth),
+          dashArray: evt.target.get(TOOLBAR_KEYS.dashArray),
+          permission: evt.target.get("permission")
+        };
+        window.__forge_gl_wb_status__.set(this.appId, nextState);
+        window.dispatchEvent(new CustomEvent("forge-whiteboard-synced-status", {
+          detail: {
+            whiteboardAppId: this.appId,
+            status: nextState,
+            userId: this.userId
+          }
+        }));
       }
     });
-    _defineProperty40(this, "adjustByOutFrame", (frameWidth, frameHeight) => {
-      if (this.option.width > 0 && this.option.height > 0) {
+    _defineProperty43(this, "adjustByOutFrame", (frameWidth, frameHeight) => {
+      if (!this.paperScope.project.view || !this.shadowScope.project.view) {
+        return;
+      }
+      const viewportWidth = this.viewportWidth;
+      const viewportHeight = this.viewportHeight;
+      if (viewportWidth > 0 && viewportHeight > 0) {
         const minWidth = Math.max(frameWidth, 10);
         const minHeight = Math.max(frameHeight, 10);
         let width = minWidth;
-        let height = width * this.option.height / this.option.width;
+        let height = width * viewportHeight / viewportWidth;
         if (height > minHeight) {
           height = minHeight;
-          width = height * this.option.width / this.option.height;
+          width = height * viewportWidth / viewportHeight;
         }
-        this.camera.updateInherentScale(width / this.option.width);
+        this.camera.updateInherentScale(width / viewportWidth);
         this.paperScope.project.view.viewSize = new this.paperScope.Size(width, height);
         this.shadowScope.project.view.viewSize = new this.paperScope.Size(width, height);
         this.camera.triggerZoom();
@@ -65956,7 +66645,11 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
     });
     requestAnimationFrameHook(this.paperScope);
     requestAnimationFrameHook(this.shadowScope);
+    const that = this;
     this.rootElement.setAttribute("data-forge-app", "whiteboard");
+    this.imageSets.style.display = "none";
+    this.imageSets.setAttribute("data-image-sets", "");
+    this.rootElement.appendChild(this.imageSets);
     document.body.addEventListener("pointerdown", (evt) => {
       this.isPenEvent = evt.pointerType === "pen";
       if (evt.pointerType === "pen" && this.hasPenInput === null) {
@@ -66056,6 +66749,30 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
         this.camera.resetViewMatrixToMain();
       }
     };
+    this.emitter.insertImage = (src, pageId) => {
+      if (!/https/.test(src)) {
+        (0, import_forge_room.log)("[@netless/forge-whiteboard] invalid image url, src needs to be in the HTTPS protocol.", {
+          src
+        }, "warning");
+        return;
+      }
+      let targetPageId = pageId;
+      if (!targetPageId) {
+        targetPageId = this.pageModel.getCurrentPage(this.userManager.selfId);
+      }
+      if (!targetPageId) {
+        (0, import_forge_room.log)("[@netless/forge-whiteboard] page not found", {}, "warning");
+        return;
+      }
+      this.layers.get(targetPageId)?.createImage(src);
+    };
+    this.emitter.removeElement = (pageId, elementId) => {
+      if (!this.layers.has(pageId)) {
+        (0, import_forge_room.log)("[@netless/forge-whiteboard] page not found", {}, "warning");
+        return;
+      }
+      this.layers.get(pageId)?.removeElementItem(elementId);
+    };
     this.emitter.getViewModel = (userId) => {
       const targetId = userId ? userId : this.userId;
       return this.userMap(targetId).get(WhiteboardKeys.cameraMode);
@@ -66071,7 +66788,7 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
       const source = this.getMap(`layer/${sourceId}/elements`);
       const target = this.getMap(`layer/${targetId}/elements`);
       if (!this.layers.has(targetId)) {
-        this.layers.set(targetId, new RenderableModel(targetId, this.shadowEmitter, target, this.paperScope, this.toolbarModel, this.userManager, this.hasPermission));
+        this.layers.set(targetId, new RenderableModel(targetId, this.shadowEmitter, target, this.paperScope, this.toolbarModel, this.userManager, this.imageSets, this.liveCursor, this.hasPermission));
       }
       if (!this.undoManagers.has(targetId)) {
         const undoManager = new Y15.UndoManager(target, {
@@ -66121,13 +66838,29 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
     this.emitter.resetCamera = () => {
       this.camera.reset();
     };
+    this.emitter.showLiveCursor = (value) => {
+      this.liveCursor.showLiveCursor = value;
+    };
+    this.emitter.updateViewport = (width, height) => {
+      this.updateOptionSize(width, height);
+    };
+    this.emitter.__setMainCanvasVisible = (visible) => {
+      this.canvasElement.style.opacity = visible ? "1" : "0";
+    };
     this.emitter.on("error", (errorCode, errorMessage) => {
       (0, import_forge_room.log)("WhiteboardApplicationError", {
         errorCode,
         errorMessage
       });
     });
-    const that = this;
+    Object.defineProperty(this.emitter, "__delayTranslateOut", {
+      get() {
+        return that.delayTranslateOut;
+      },
+      set(value) {
+        that.delayTranslateOut = value;
+      }
+    });
     Object.defineProperty(this.emitter, "tool", {
       get() {
         return that.toolbarModel.currentTool;
@@ -66216,6 +66949,7 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
         that.camera.enableBoundaryHighlight = value;
       }
     });
+    window.addEventListener("forge-whiteboard-synced-status", this.addWhiteboardStatus);
   }
   userMap(userId) {
     return this.getMap(`user/${userId}`);
@@ -66224,10 +66958,23 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
     this.permissions = new WhiteboardPermissions(this.userManager, (userId) => {
       return this.userMap(userId);
     });
+    this.permissions.setPermission(WhiteboardPermissionFlag.all);
     this.emitter["permissions"] = this.permissions;
     this.emitter["selfUserId"] = this.userId;
     this.option = option;
+    if (this.option.stretchToFill) {
+      this.getMap("attrs").set("viewportWidth", -1);
+      this.getMap("attrs").set("viewportHeight", -1);
+    } else {
+      if (!this.getMap("attrs").has("viewportWidth")) {
+        this.getMap("attrs").set("viewportWidth", option.width);
+      }
+      if (!this.getMap("attrs").has("viewportHeight")) {
+        this.getMap("attrs").set("viewportHeight", option.height);
+      }
+    }
     this.userMap(this.userId).set(WhiteboardKeys.themeColor, "#009688");
+    this.userMap(this.userId).observe(this.handleSyncedWhiteboardStatusChange);
     this.shadowEmitter = new ShadowEmitter(this.userMap(this.userId));
     this.pageModel = new PageModel(this.getMap("attrs"), this.userManager, (userId) => {
       return this.userMap(userId);
@@ -66275,6 +67022,9 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
     this.selectElementsModel = new SelectElementsModel(this.userManager, (userId) => {
       return this.userMap(userId);
     }, this.hasPermission);
+    this.liveCursor = new LiveCursor(this.canvasElement, this.paperScope, this.userManager, (userId) => {
+      return this.userMap(userId);
+    });
     this.tools = {
       pointer: new PointerTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
       curve: new CurveTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
@@ -66285,7 +67035,7 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
       text: new TextTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope, this.rootElement, this.canvasElement, this.toolbarModel, this.camera),
       ellipse: new EllipseTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
       triangle: new TriangleTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
-      eraser: new EraserTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope, this.trashedElementsModel),
+      eraser: new EraserTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope, this.trashedElementsModel, this.shadowScope),
       laser: new LaserPointerTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope),
       grab: new GrabTool(this.enableToolEvent, this.getCurrentRenderableModel, this.shadowEmitter, this.paperScope, this.camera)
     };
@@ -66357,32 +67107,12 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
       }
     });
     this.shadowEmitter.on("translateOut", (ids, container) => {
-      const shadowLayer = this.shadowScope.project.activeLayer;
-      let parent = null;
-      if (container === "layer") {
-        parent = shadowLayer;
+      if (this.delayTranslateOut > 0) {
+        setTimeout(() => {
+          this.handleElementTranslateOut(ids, container);
+        }, this.delayTranslateOut);
       } else {
-        parent = shadowLayer.children.find((child) => child.data.uuid === container) ?? null;
-      }
-      if (parent) {
-        ids.forEach((id) => {
-          const target = parent.children.find((child) => child.data.uuid === id);
-          if (target) {
-            target.remove();
-            this.insertElementToParent(target, this.paperScope.project.activeLayer);
-          } else {
-            const pageId = this.pageModel.getCurrentPage(this.userId);
-            if (pageId) {
-              const page = this.layers.get(pageId);
-              if (page) {
-                const model = page.elementModels.get(id);
-                if (model && model.item) {
-                  this.insertElementToParent(model.item, this.paperScope.project.activeLayer);
-                }
-              }
-            }
-          }
-        });
+        this.handleElementTranslateOut(ids, container);
       }
     });
     this.shadowEmitter.on("translateIn", (ids, container) => {
@@ -66409,6 +67139,15 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
       this.emitter.emit("grabUp");
     });
     this.clearElements();
+    if (this.option.stretchToFill) {
+      window.addEventListener("resize", () => {
+        const bounds = this.rootElement.getBoundingClientRect();
+        this.updateOptionSize(bounds.width, bounds.height);
+        this.adjustByOutFrame(bounds.width, bounds.height);
+      });
+    }
+    this.rootElement.appendChild(this.liveCursor.container);
+    this.getMap("attrs").observe(this.handleViewportUpdate);
   }
   clearElements() {
     const userIds = this.userManager.userIdList();
@@ -66475,7 +67214,7 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
       if (renderableModel.elementModels.has(key)) {
         elementModel = renderableModel.elementModels.get(key) ?? null;
       } else {
-        let elementMap = renderableModel.elements.get(key);
+        const elementMap = renderableModel.elements.get(key);
         if (elementMap) {
           elementModel = renderableModel.convertToModel(elementMap);
         }
@@ -66504,10 +67243,10 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
       this.snapshotScope.view.viewSize = bounds.size.multiply(scale2);
       this.snapshotScope.view.matrix = matrix;
     } else if (area === "maxScale" && this.option.maxScaleRatio && this.option.maxScaleRatio !== -1) {
-      const width = this.option.width * this.option.maxScaleRatio;
-      const height = this.option.height * this.option.maxScaleRatio;
-      const offsetX = this.option.width * (this.option.maxScaleRatio - 1) / 2;
-      const offsetY = this.option.height * (this.option.maxScaleRatio - 1) / 2;
+      const width = this.viewportWidth * this.option.maxScaleRatio;
+      const height = this.viewportHeight * this.option.maxScaleRatio;
+      const offsetX = this.viewportWidth * (this.option.maxScaleRatio - 1) / 2;
+      const offsetY = this.viewportHeight * (this.option.maxScaleRatio - 1) / 2;
       const matrix = new this.paperScope.Matrix();
       matrix.scale(scale);
       matrix.translate({
@@ -66531,28 +67270,23 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
     this.disableViewModelUpdate = true;
   }
   linkToWhiteboard(targetId) {
-    if (this.linkTarget) {
-      this.unlink();
-    }
-    this.userMap(this.userId);
-    this.linkTarget = this.roomDoc.getMap(`@app/${this.name}/${targetId}/user/${this.userId}`);
-    if (this.linkTarget) {
-      this.toolbarModel.currentTool = this.linkTarget.get(TOOLBAR_KEYS.tool);
-      this.toolbarModel.strokeColor = this.linkTarget.get(TOOLBAR_KEYS.strokeColor);
-      this.toolbarModel.fillColor = this.linkTarget.get(TOOLBAR_KEYS.fillColor);
-      this.toolbarModel.fontSize = this.linkTarget.get(TOOLBAR_KEYS.fontSize);
-      this.toolbarModel.fontFamily = this.linkTarget.get(TOOLBAR_KEYS.fontFamily);
-      this.toolbarModel.strokeWidth = this.linkTarget.get(TOOLBAR_KEYS.strokeWidth);
-      this.toolbarModel.dashArray = this.linkTarget.get(TOOLBAR_KEYS.dashArray);
-      this.permissions.removePermission(WhiteboardPermissionFlag.all);
-      this.permissions.addPermission(this.linkTarget.get("permission"), this.userId);
-      this.linkTarget.observe(this.handleLinkedMapChange);
-    }
+    this.linkWhiteboardId = targetId;
+    window.__forge_gl_wb_status__.get(targetId).then((currentStatus) => {
+      if (currentStatus) {
+        this.toolbarModel.currentTool = currentStatus.currentTool;
+        this.toolbarModel.strokeColor = currentStatus.strokeColor;
+        this.toolbarModel.fillColor = currentStatus.fillColor;
+        this.toolbarModel.fontSize = currentStatus.fontSize;
+        this.toolbarModel.fontFamily = currentStatus.fontFamily;
+        this.toolbarModel.strokeWidth = currentStatus.strokeWidth;
+        this.toolbarModel.dashArray = currentStatus.dashArray;
+        this.permissions.removePermission(WhiteboardPermissionFlag.all);
+        this.permissions.addPermission(currentStatus.permission);
+      }
+    });
   }
   unlink() {
-    if (this.linkTarget) {
-      this.linkTarget.unobserve(this.handleLinkedMapChange);
-    }
+    this.linkWhiteboardId = null;
   }
   setViewSize(width, height) {
     this.paperScope.project.view.viewSize = new this.paperScope.Size(width, height);
@@ -66562,15 +67296,21 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
     const size = this.paperScope.view.viewSize;
     return [size.width, size.height];
   }
+  getInherentScale() {
+    return this.camera.getInherentScale();
+  }
   updateInternalResizeObserverStatus(value) {
     this.internalResizeObserver = value;
   }
   updateOptionSize(width, height) {
-    this.option.width = width;
-    this.option.height = height;
+    this.getMap("attrs").set("viewportWidth", width);
+    this.getMap("attrs").set("viewportHeight", height);
     this.camera.updateInitSize(new import_paper.default.Size(width, height));
   }
-  async dispose() {
+  async dispose(removeSubDoc) {
+    if (removeSubDoc) {
+      this.deleteSubDoc(this.appId);
+    }
     this.selectElementsModel.dispose();
     this.trashedElementsModel.dispose();
     this.paperScope.view.remove();
@@ -66581,72 +67321,92 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
     this.shadowScope.project.clear();
     this.snapshotScope.project.clear();
     this.resizeObserver.disconnect();
+    this.unlink();
+    for (const entry of this.undoManagers.entries()) {
+      entry[1].off("stack-item-added", this.handleStackItemAdded);
+      entry[1].off("stack-item-popped", this.handleStackItemPopped);
+    }
+    for (const entry of this.layers.entries()) {
+      entry[1].dispose(removeSubDoc);
+      entry[1].removeAllListeners();
+    }
+    this.camera.dispose();
+    this.pageModel.dispose();
+    this.pageModel.removeAllListeners();
+    for (const entry of this.editors.entries()) {
+      entry[1].dispose();
+    }
+    this.toolbarModel.dispose();
+    this.emitter.indexedNavigation.dispose();
+    this.permissions.dispose();
+    (0, import_forge_room13.removeObserver)(this.userMap(this.userId), this.handleSyncedWhiteboardStatusChange);
   }
 };
-_defineProperty40(WhiteboardApplication, "applicationName", WHITEBOARD_APP_NAME);
+_defineProperty43(WhiteboardApplication, "applicationName", WHITEBOARD_APP_NAME);
 
 // src/SlideApplication.ts
 var import_slide = __toESM(require_Slide());
-var import_forge_room4 = require("@netless/forge-room");
+var import_forge_room16 = require("@netless/forge-room");
 
 // src/Slide.ts
-var import_eventemitter314 = __toESM(require("eventemitter3"));
-var SlideForge = class extends import_eventemitter314.default {
+var import_eventemitter313 = __toESM(require("eventemitter3"));
+var SlideForge = class extends import_eventemitter313.default {
   view;
   permissions;
   footView;
+  sideBarView;
   /**
-   * 当前页面索引, 从 0 开始
-   */
+     * 当前页面索引, 从 0 开始
+     */
   pageIndex;
   /**
-   * 总页数
-   */
+     * 总页数
+     */
   pageCount;
   /**
-   * 切换到参数指定页面, index 从 0 开始
-   * @param {number} index 页面索引
-   */
+     * 切换到参数指定页面, index 从 0 开始
+     * @param {number} index 页面索引
+     */
   goto;
   /**
-   * 下一步, 如果已经是本页的最后一步, 则切换到下一页
-   */
+     * 下一步, 如果已经是本页的最后一步, 则切换到下一页
+     */
   nextStep;
   /**
-   * 上一步, 如果已经是本页的第一步, 则切换到上一页
-   */
+     * 上一步, 如果已经是本页的第一步, 则切换到上一页
+     */
   prevStep;
   /**
-   * 下一页, 如果是最后一页, 则不执行任何操作
-   */
+     * 下一页, 如果是最后一页, 则不执行任何操作
+     */
   nextPage;
   /**
-   * 上一页, 如果是第一页, 则不执行任何操作
-   */
+     * 上一页, 如果是第一页, 则不执行任何操作
+     */
   prevPage;
   /**
-   * 切换侧栏显示状态
-   */
+     * 切换侧栏显示状态
+     */
   sideBarToggle;
   /**
-   * 获取预览图图片内容, base64 编码
-   * @param {number} index 页面索引
-   */
+     * 获取预览图图片内容, base64 编码
+     * @param {number} index 页面索引
+     */
   imgContent;
   /**
-   * 获取预览图图片链接
-   * @param {number} index 页面索引
-   */
+     * 获取预览图图片链接
+     * @param {number} index 页面索引
+     */
   imgUrl;
   /**
-   * 获取预览图图片尺寸
-   * @param {number} index 页面索引
-   */
+     * 获取预览图图片尺寸
+     * @param {number} index 页面索引
+     */
   imgSize;
 };
 
 // src/ForgeSlidePermession.ts
-var import_eventemitter315 = __toESM(require("eventemitter3"));
+var import_forge_room14 = require("@netless/forge-room");
 var ForgeSlidePermissionFlag = /* @__PURE__ */ ((ForgeSlidePermissionFlag2) => {
   ForgeSlidePermissionFlag2[ForgeSlidePermissionFlag2["none"] = 0] = "none";
   ForgeSlidePermissionFlag2[ForgeSlidePermissionFlag2["changeStep"] = 1] = "changeStep";
@@ -66655,58 +67415,12 @@ var ForgeSlidePermissionFlag = /* @__PURE__ */ ((ForgeSlidePermissionFlag2) => {
   ForgeSlidePermissionFlag2[ForgeSlidePermissionFlag2["all"] = 7] = "all";
   return ForgeSlidePermissionFlag2;
 })(ForgeSlidePermissionFlag || {});
-var ForgeSlidePermissions = class extends import_eventemitter315.default {
-  requestUserMap;
-  userManager;
-  observers = /* @__PURE__ */ new Map();
-  constructor(userManager, requestUserMap) {
-    super();
-    this.userManager = userManager;
-    this.requestUserMap = requestUserMap;
-    this.createModel(this.userManager.selfId);
-    this.userManager.userIdList().forEach((userId) => {
-      this.addObserve(userId);
-    });
-    this.userManager.on("join", this.handleUserJoin);
-    this.userManager.on("leave", this.handleUserLeave);
-  }
-  handleUserLeave = (user) => {
-    const cb = this.observers.get(user.id);
-    if (cb) {
-      this.requestUserMap(user.id).unobserve(cb);
-    }
-  };
-  handleUserJoin = (user) => {
-    this.addObserve(user.id);
-  };
-  addObserve(userId) {
-    const observer = (evt) => {
-      this.handleUserPermissionChange(userId, evt);
-    };
-    this.observers.set(userId, observer);
-    this.requestUserMap(userId).observe(observer);
-  }
-  createModel(userId) {
-    const userMap = this.requestUserMap(userId);
-    if (!userMap.has("permission")) {
-      userMap.set("permission", 0);
-    }
-  }
-  handleUserPermissionChange(userId, evt) {
-    for (const [key, value] of evt.changes.keys.entries()) {
-      if (key === "permission") {
-        if (value.action === "add" || value.action === "update") {
-          const newValue = this.requestUserMap(userId).get("permission");
-          this.emit("change", userId, this.resolveFlags(newValue), newValue);
-        }
-      }
-    }
-  }
+var ForgeSlidePermissions = class extends import_forge_room14.AbstractApplicationPermissions {
   /**
-   * 解析权限列表组合
-   * @param {number} value - 权限数字值
-   * @return {WhiteboardPermissionFlag[]} - 权限列表
-   */
+     * 解析权限列表组合
+     * @param {number} value - 权限数字值
+     * @return {WhiteboardPermissionFlag[]} - 权限列表
+     */
   resolveFlags(value) {
     return [
       2 /* changePage */,
@@ -66714,53 +67428,10 @@ var ForgeSlidePermissions = class extends import_eventemitter315.default {
       4 /* clickAnim */
     ].filter((v) => (v & value) !== 0);
   }
-  /**
-   * 获取权限列表组合对应的数值
-   * @param { string } userId 不传表示获取自己
-   */
-  getPermissionValue(userId) {
-    return this.requestUserMap(userId ?? this.userManager.selfId).get("permission") ?? 0;
-  }
-  /**
-   * 获取权限列表
-   * @param {string=} userId 可选, 不传表示获取自己
-   */
-  getPermissionFlags(userId) {
-    const value = this.requestUserMap(userId ?? this.userManager.selfId).get("permission") ?? 0;
-    return this.resolveFlags(value);
-  }
-  /**
-   * 返回对应 userId 是否有相应权限
-   * @param {string=} userId 可选, 不传表示返回自己是否有相应权限
-   * @param {WhiteboardPermissionFlag} flag
-   */
-  hasPermission(flag, userId) {
-    return ((this.requestUserMap(userId ?? this.userManager.selfId).get("permission") ?? 0) & flag) !== 0;
-  }
-  /**
-   * 添加权限
-   * @param {WhiteboardPermissionFlag} flag 权限标记
-   * @param {string=} userId 可选, 为 userId 添加权限, 不传表示为自己添加权限
-   */
-  addPermission(flag, userId) {
-    const userMap = this.requestUserMap(userId ?? this.userManager.selfId);
-    const oldValue = userMap.get("permission") ?? 0;
-    this.requestUserMap(userId ?? this.userManager.selfId).set("permission", oldValue | flag);
-  }
-  /**
-   * 移除权限
-   * @param {WhiteboardPermissionFlag} flag 权限标记
-   * @param {string=} userId 可选, 为 userId 移除权限, 不传表示为自己移除权限
-   */
-  removePermission(flag, userId) {
-    const userMap = this.requestUserMap(userId ?? this.userManager.selfId);
-    const oldValue = userMap.get("permission") ?? 0;
-    this.requestUserMap(userId ?? this.userManager.selfId).set("permission", oldValue & ~flag);
-  }
 };
 
-// src/FoorerView.ts
-var import_eventemitter316 = __toESM(require("eventemitter3"));
+// src/FooterView.ts
+var import_eventemitter314 = __toESM(require("eventemitter3"));
 
 // src/icons.ts
 var prevPage = (color) => `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none">
@@ -66789,18 +67460,20 @@ var Icons = {
   sideBar
 };
 
-// src/FoorerView.ts
+// src/FooterView.ts
 var EM_COLOR = "#8C8C8C";
-var FooterView = class extends import_eventemitter316.default {
+var FooterView = class extends import_eventemitter314.default {
   root;
   prevStep;
   nextStep;
   prevPage;
   nextPage;
   sideBarToggle;
+  eventMap = /* @__PURE__ */ new Map();
   constructor() {
     super();
     this.root = document.createElement("div");
+    this.root.classList.add("forge-slide-footer");
     this.root.style.height = "24px";
     this.root.style.zIndex = "6";
     this.root.style.display = "flex";
@@ -66860,28 +67533,53 @@ var FooterView = class extends import_eventemitter316.default {
     icon.style.borderRadius = "2px";
     icon.style.margin = "6px";
     icon.innerHTML = svgContent;
-    icon.addEventListener("click", () => {
+    const onClickHandle = () => {
       action();
-    });
-    icon.addEventListener("mouseover", () => {
+    };
+    const onMouseOverHandle = () => {
       icon.style.backgroundColor = "#f0f0f0";
-    });
-    icon.addEventListener("mouseout", () => {
+    };
+    const onMouseOutHandle = () => {
       icon.style.backgroundColor = "transparent";
-    });
+    };
+    icon.addEventListener("click", onClickHandle);
+    icon.addEventListener("mouseover", onMouseOverHandle);
+    icon.addEventListener("mouseout", onMouseOutHandle);
+    this.eventMap.set(icon, [onClickHandle, onMouseOutHandle, onMouseOverHandle]);
     return icon;
   }
+  clearHTMLEventListeners() {
+    this.eventMap.forEach((value, key) => {
+      if (key) {
+        const [clickEvent, mouseOutEvent, mouseOverEvent] = value;
+        key.removeEventListener("click", clickEvent);
+        key.removeEventListener("mouseover", mouseOverEvent);
+        key.removeEventListener("mouseout", mouseOutEvent);
+      }
+    });
+  }
+  dispose() {
+    this.removeAllListeners();
+    this.clearHTMLEventListeners();
+  }
 };
 
 // src/SiderBarView.ts
-var import_eventemitter317 = __toESM(require("eventemitter3"));
-var SideBarView = class extends import_eventemitter317.default {
+var import_eventemitter315 = __toESM(require("eventemitter3"));
+var import_forge_room15 = require("@netless/forge-room");
+var SideBarView = class extends import_eventemitter315.default {
   root = document.createElement("div");
-  itemList = [];
+  isShow = false;
+  eventsMap = /* @__PURE__ */ new Map();
+  taskId = "";
+  prefix = "";
+  addImagesPool = [];
+  scheduleId = 0;
+  isSchedule = false;
   constructor() {
     super();
     this.root.style.backgroundColor = "#eee";
-    this.root.className = "slide-sidebar";
+    this.root.className = "forge-slide-sidebar";
     this.root.style.width = "240px";
     this.root.style.height = "100%";
     this.root.style.position = "absolute";
@@ -66890,65 +67588,147 @@ var SideBarView = class extends import_eventemitter317.default {
     this.root.style.zIndex = "5";
     this.root.style.transition = "left 0.3s ease-in-out";
     this.root.style.overflow = "auto";
-    this.root.style.border = "1px solid #ccc";
-    this.root.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.1)";
     this.root.style.display = "flex";
     this.root.style.flexDirection = "column";
     this.root.style.justifyContent = "flex-start";
     this.root.style.alignItems = "center";
   }
-  onMouseOver = (itemContainer) => {
-    itemContainer.style.borderColor = "#ccc";
-  };
-  onMouseOut = (itemContainer) => {
-    itemContainer.style.borderColor = "transparent";
-  };
-  onClickHandle = (index) => {
-    this.emit("pageChange", index);
-  };
+  get isShowSideBar() {
+    return this.isShow;
+  }
+  async getPreviewImage(imageUrl) {
+    const image = await fetch(imageUrl);
+    const blob = await image.blob();
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const base64Data = reader.result;
+        const img = document.createElement("img");
+        img.src = base64Data;
+        img.onload = () => {
+          resolve({
+            url: imageUrl,
+            src: base64Data,
+            width: img.width,
+            height: img.height
+          });
+        };
+      };
+      reader.readAsDataURL(blob);
+    });
+  }
+  async appendPreviewImage(pageIndex) {
+    const itemContainer = document.createElement("div");
+    itemContainer.style.width = "60%";
+    itemContainer.style.display = "flex";
+    itemContainer.style.justifyContent = "center";
+    itemContainer.style.alignItems = "flex-start";
+    itemContainer.style.position = "relative";
+    itemContainer.style.borderRadius = "4px";
+    itemContainer.style.transition = "border-color .3s";
+    itemContainer.style.marginBottom = "10px";
+    const onMouseOverHandle = () => {
+      itemContainer.style.borderColor = "#ccc";
+    };
+    const onMouseOutHandle = () => {
+      itemContainer.style.borderColor = "transparent";
+    };
+    const onClickHandle = () => {
+      this.emit("pageChange", pageIndex);
+    };
+    itemContainer.addEventListener("click", onClickHandle);
+    itemContainer.addEventListener("mouseover", onMouseOverHandle);
+    itemContainer.addEventListener("mouseout", onMouseOutHandle);
+    this.eventsMap.set(itemContainer, [onClickHandle, onMouseOverHandle, onMouseOutHandle]);
+    const pageIndexContainer = document.createElement("span");
+    pageIndexContainer.textContent = `${pageIndex}`;
+    pageIndexContainer.style.position = "absolute";
+    pageIndexContainer.style.top = "1px";
+    pageIndexContainer.style.left = "-10px";
+    pageIndexContainer.style.transform = "translate(-100%)";
+    pageIndexContainer.style.fontSize = "12px";
+    pageIndexContainer.style.color = "#5f5f5f";
+    const previewUrl = `${this.prefix}/${this.taskId}/preview/${pageIndex}.png`;
+    const preview = document.createElement("img");
+    const cachePreview = await import_forge_room15.kvStore.getItem(previewUrl);
+    if (cachePreview) {
+      const { src } = JSON.parse(cachePreview);
+      preview.src = src;
+    } else {
+      const previewInfo = await this.getPreviewImage(previewUrl);
+      await import_forge_room15.kvStore.setItem(previewUrl, JSON.stringify(previewInfo));
+      const { src } = previewInfo;
+      preview.src = src;
+    }
+    preview.style.width = "100%";
+    preview.style.display = "inline-block";
+    itemContainer.appendChild(preview);
+    itemContainer.appendChild(pageIndexContainer);
+    this.root.appendChild(itemContainer);
+  }
+  async scheduleGetPreviewImage() {
+    if (!this.isSchedule) {
+      this.scheduleId = setTimeout(async () => {
+        await this.scheduleGetPreviewImage();
+      }, 32);
+      return;
+    }
+    const pageIndex = this.addImagesPool.shift();
+    if (!pageIndex) {
+      clearTimeout(this.scheduleId);
+      this.scheduleId = 0;
+      return;
+    }
+    await this.appendPreviewImage(pageIndex);
+    this.scheduleId = setTimeout(async () => {
+      await this.scheduleGetPreviewImage();
+    }, 32);
+  }
+  async startGetPreviewImageSchedule() {
+    this.isSchedule = true;
+  }
+  pauseGetPreviewImageSchedule() {
+    this.isSchedule = false;
+  }
   initialize(slideCount, option) {
+    this.taskId = option.taskId;
+    this.prefix = option.prefix;
     for (let i = 1; i <= slideCount; i++) {
-      const itemContainer = document.createElement("div");
-      this.itemList.push(itemContainer);
-      itemContainer.style.width = "60%";
-      itemContainer.style.display = "flex";
-      itemContainer.style.justifyContent = "center";
-      itemContainer.style.alignItems = "flex-start";
-      itemContainer.style.border = "7px solid transparent";
-      itemContainer.style.position = "relative";
-      itemContainer.style.borderRadius = "4px";
-      itemContainer.style.transition = "border-color .3s";
-      itemContainer.style.marginBottom = "10px";
-      itemContainer.addEventListener("mouseover", () => this.onMouseOver(itemContainer));
-      itemContainer.addEventListener("mouseout", () => this.onMouseOut(itemContainer));
-      itemContainer.addEventListener("click", () => this.onClickHandle(i));
-      const pageIndex = document.createElement("span");
-      pageIndex.textContent = `${i}`;
-      pageIndex.style.position = "absolute";
-      pageIndex.style.top = "1px";
-      pageIndex.style.left = "-10px";
-      pageIndex.style.transform = "translate(-100%)";
-      pageIndex.style.fontSize = "12px";
-      pageIndex.style.color = "#5f5f5f";
-      const preview = document.createElement("img");
-      preview.style.width = "100%";
-      preview.style.display = "inline-block";
-      preview.src = `${option.prefix}/${option.taskId}/preview/${i}.png`;
-      itemContainer.appendChild(preview);
-      itemContainer.appendChild(pageIndex);
-      this.root.appendChild(itemContainer);
+      this.addImagesPool.push(i);
+    }
+    this.scheduleGetPreviewImage();
+  }
+  hidden() {
+    if (!this.root || !this.isShow) {
+      return;
+    }
+    this.root.style.left = "-240px";
+    this.root.style.border = "none";
+    this.root.style.boxShadow = "none";
+    this.isShow = false;
+  }
+  show() {
+    if (!this.root) {
+      return;
     }
+    this.root.style.left = "0";
+    this.root.style.border = "1px solid #ccc";
+    this.root.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.1)";
+    this.isShow = true;
   }
   dispose() {
-    this.itemList.forEach((item) => {
-      item.removeEventListener("mouseover", () => this.onMouseOver(item));
-      item.removeEventListener("mouseout", () => this.onMouseOut(item));
+    this.removeAllListeners();
+    this.eventsMap.forEach((handlers, element) => {
+      const [clickEvent, mouseOverEvent, mouseOutEvent] = handlers;
+      element.removeEventListener("click", clickEvent);
+      element.removeEventListener("mouseover", mouseOverEvent);
+      element.removeEventListener("mouseout", mouseOutEvent);
     });
   }
 };
 
 // src/utils.ts
-function deepEqual(a2, b2, excludeKeys = ["time"]) {
+function deepEqual(a2, b2, excludeKeys = ["mediaState"]) {
   if (a2 === b2) return true;
   if (typeof a2 !== "object" || a2 === null || typeof b2 !== "object" || b2 === null) return false;
   if (a2.constructor !== b2.constructor) return false;
@@ -66981,14 +67761,10 @@ function arrayEqual(arr1, arr2) {
   }
   return true;
 }
-async function delay2(time) {
-  return new Promise((resolve) => setTimeout(resolve, time));
-}
 
 // src/SlideApplication.ts
-var import_forge_room5 = require("@netless/forge-room");
 var Slide_APP_NAME = "forge_slide";
-var SlideApplication = class extends import_forge_room4.AbstractApplication {
+var SlideApplication = class extends import_forge_room16.AbstractApplication {
   static applicationName = Slide_APP_NAME;
   name = Slide_APP_NAME;
   emitter = new SlideForge();
@@ -67005,11 +67781,15 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
   currentSlideIndex = 0;
   taskId = "";
   prefix = "";
+  slideCount = 0;
+  lastDispatchUuid = "";
+  syncMessageQueue = [];
+  isSyncing = false;
   constructor() {
     super();
     window.emitter = this.emitter;
     this.rootView.setAttribute("data-forge-app", Slide_APP_NAME);
-    this.rootView.style.background = "#f0f0f0f0";
+    this.rootView.style.background = "#f9f9fc";
     this.rootView.style.overflow = "hidden";
     this.contentContainer.style.width = "100%";
     this.contentContainer.style.height = "100%";
@@ -67020,7 +67800,7 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
     this.footer = new FooterView();
     this.sideBar = new SideBarView();
     this.sideBar.on("pageChange", (index) => {
-      if (index > 0 && index <= this.slide.slideCount) {
+      if (index > 0 && index <= this.slideCount) {
         this.slide.renderSlide(index);
       }
     });
@@ -67062,7 +67842,7 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
       if (!this.permissions.hasPermission(2 /* changePage */)) {
         return;
       }
-      if (this.currentSlideIndex < this.slide.slideCount) {
+      if (this.currentSlideIndex < this.slideCount) {
         this.slide.renderSlide(this.currentSlideIndex + 1);
       }
     });
@@ -67070,10 +67850,10 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
       if (!this.permissions.hasPermission(2 /* changePage */)) {
         return;
       }
-      if (this.sideBar.root.style.left === "0px") {
-        this.sideBar.root.style.left = "-240px";
+      if (this.sideBar.isShowSideBar) {
+        this.sideBar.hidden();
       } else {
-        this.sideBar.root.style.left = "0px";
+        this.sideBar.show();
       }
     });
     this.rootView.appendChild(this.contentContainer);
@@ -67096,6 +67876,11 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
         return that.footer.root;
       }
     });
+    Object.defineProperty(this.emitter, "sidebarView", {
+      get() {
+        return that.sideBar.root;
+      }
+    });
     Object.defineProperty(this.emitter, "pageIndex", {
       get() {
         return that.currentSlideIndex;
@@ -67103,7 +67888,7 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
     });
     Object.defineProperty(this.emitter, "pageCount", {
       get() {
-        return that.slide.slideCount;
+        return that.slideCount;
       }
     });
     Object.defineProperty(this.emitter, "goto", {
@@ -67169,37 +67954,22 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
         return this.getImageSize(pageIndex);
       }
     });
+    this.applySlideState();
   }
-  async getPreviewImage(imageUrl) {
-    const image = fetch(imageUrl);
-    return await image.then((res) => res.blob()).then((blob) => {
-      return new Promise((resolve) => {
-        const reader = new FileReader();
-        reader.onloadend = () => {
-          const base64Data = reader.result;
-          const img = document.createElement("img");
-          img.src = base64Data;
-          img.onload = () => {
-            resolve({
-              url: imageUrl,
-              src: base64Data,
-              width: img.width,
-              height: img.height
-            });
-          };
-        };
-        reader.readAsDataURL(blob);
-      });
-    });
+  getPreviewImageUrl(pageIndex) {
+    if (pageIndex < 1 || pageIndex > this.slideCount) {
+      throw new Error("pageIndex out of range");
+    }
+    return `${this.prefix}/${this.taskId}/preview/${pageIndex}.png`;
   }
   async getImageUrl(pageIndex) {
-    return `${this.prefix}/${this.taskId}/preview/${pageIndex + 1}.png`;
+    return this.getPreviewImageUrl(pageIndex);
   }
   async getImageSize(pageIndex) {
-    const imageUrl = `${this.prefix}/${this.taskId}/preview/${pageIndex + 1}.png`;
+    const imageUrl = this.getPreviewImageUrl(pageIndex);
     let preview = null;
     try {
-      const result = await import_forge_room5.kvStore.getItem(imageUrl);
+      const result = await import_forge_room16.kvStore.getItem(imageUrl);
       preview = result ? JSON.parse(result) : null;
     } catch (e) {
       console.warn("kvStore getItem error", e);
@@ -67207,15 +67977,15 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
     if (preview) {
       return { width: preview.width, height: preview.height };
     }
-    preview = await this.getPreviewImage(imageUrl);
-    await import_forge_room5.kvStore.setItem(imageUrl, JSON.stringify(preview));
+    preview = await this.sideBar.getPreviewImage(imageUrl);
+    await import_forge_room16.kvStore.setItem(imageUrl, JSON.stringify(preview));
     return { width: preview.width, height: preview.height };
   }
   async getImageContent(pageIndex) {
-    const imageUrl = `${this.prefix}/${this.taskId}/preview/${pageIndex + 1}.png`;
+    const imageUrl = this.getPreviewImageUrl(pageIndex);
     let preview = null;
     try {
-      const result = await import_forge_room5.kvStore.getItem(imageUrl);
+      const result = await import_forge_room16.kvStore.getItem(imageUrl);
       preview = result ? JSON.parse(result) : null;
     } catch (e) {
       console.warn("kvStore getItem error", e);
@@ -67223,43 +67993,96 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
     if (preview) {
       return preview.src;
     }
-    preview = await this.getPreviewImage(imageUrl);
-    await import_forge_room5.kvStore.setItem(imageUrl, JSON.stringify(preview));
+    preview = await this.sideBar.getPreviewImage(imageUrl);
+    await import_forge_room16.kvStore.setItem(imageUrl, JSON.stringify(preview));
     return preview.src;
   }
-  applySlideState = async (slideState, lastDispatch) => {
-    if (this.slide.slideState.currentSlideIndex < 0) {
-      this.slide.emit(import_slide.SLIDE_EVENTS.syncReceive, lastDispatch);
+  nextTick = () => {
+    this.isSyncing = false;
+    requestAnimationFrame(() => {
+      this.applySlideState().catch((error) => {
+        console.error("Error in applySlideState:", error);
+      });
+    });
+  };
+  applySlideState = async () => {
+    if (this.isSyncing) {
       return;
     }
-    if (this.slide.slideState.currentSlideIndex > 0 && deepEqual(this.slide.slideState, slideState)) {
-      this.slide.emit(import_slide.SLIDE_EVENTS.syncReceive, lastDispatch);
+    const lastSyncMessage = this.syncMessageQueue.pop();
+    if (!lastSyncMessage) {
+      return this.nextTick();
+    }
+    this.syncMessageQueue = [];
+    this.isSyncing = true;
+    const { state, dispatch } = lastSyncMessage;
+    let ignoreKeys = void 0;
+    if (dispatch.type === "mediaPlay" || dispatch.type === "mediaPause" || dispatch.type === "mediaFullscreen") {
+      ignoreKeys = [dispatch.id];
+    }
+    if (this.slide.slideState.currentSlideIndex < 0 || state.currentSlideIndex < 0) {
+      await this.slide.receiveSyncHandler(dispatch);
+      return this.nextTick();
+    } else if (!deepEqual(this.slide.slideState, state, ignoreKeys)) {
+      await this.slide.setSlideState(state);
+      await this.slide.receiveSyncHandler(dispatch);
     } else {
-      await this.slide.setSlideState(slideState);
-      await delay2(200);
-      this.slide.emit(import_slide.SLIDE_EVENTS.syncReceive, lastDispatch);
+      this.slide.emit(import_slide.SLIDE_EVENTS.syncReceive, dispatch);
     }
+    return this.nextTick();
   };
   onSlideEventHandler = async (event) => {
     for (const [key, value] of event.changes.keys.entries()) {
       if (key === "syncSlide") {
         if (value.action === "add" || value.action === "update") {
           const { slideState: slideStateFromServer, dispatch: dispatchFromServer } = this.getMap(this.name).get("syncSlide");
-          this.applySlideState(slideStateFromServer, dispatchFromServer);
+          if (this.lastDispatchUuid === dispatchFromServer.uuid) {
+            return;
+          }
+          this.lastDispatchUuid = dispatchFromServer.uuid;
+          this.syncMessageQueue.push({
+            state: slideStateFromServer,
+            dispatch: dispatchFromServer
+          });
+          this.applySlideState();
         }
       }
     }
   };
+  keyBoardEvents = (event) => {
+    if (event.key === "ArrowLeft") {
+      this.footer.emit("prevStep");
+    } else if (event.key === "ArrowRight") {
+      this.footer.emit("nextStep");
+    } else if (event.key === "ArrowUp") {
+      this.footer.emit("prevPage");
+    } else if (event.key === "ArrowDown") {
+      this.footer.emit("nextPage");
+    }
+  };
+  bindKeyBoardEvent() {
+    document.addEventListener("keydown", this.keyBoardEvents);
+  }
+  unbindKeyBoardEvent() {
+    document.removeEventListener("keydown", this.keyBoardEvents);
+  }
+  async onFocusInstance() {
+    this.bindKeyBoardEvent();
+  }
+  onRefocusInstance() {
+    this.unbindKeyBoardEvent();
+  }
   async initialize(option) {
     this.prefix = option.prefix;
     this.taskId = option.taskId;
     const whiteboardApp = new WhiteboardApplication();
-    whiteboardApp.roomDoc = this.roomDoc;
-    whiteboardApp.appId = `${option.taskId}_wb`;
+    whiteboardApp.appDoc = this.appDoc;
+    whiteboardApp.appId = `${this.appId}_wb`;
     whiteboardApp.userId = this.userId;
     whiteboardApp.userManager = this.userManager;
-    whiteboardApp.applicationManager = this.applicationManager;
+    whiteboardApp.deleteSubDoc = this.deleteSubDoc;
     const json = await fetch(`${option.prefix}/${option.taskId}/jsonOutput/slide-1.json`).then((res) => res.json());
+    this.slideCount = json.slideCount;
     await whiteboardApp.initialize({
       width: json.width,
       height: json.height
@@ -67274,11 +68097,13 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
     this.whiteboard.view.style.top = "0";
     this.whiteboard.view.style.left = "0";
     this.whiteboard.view.style.zIndex = "4";
+    this.whiteboard.view.classList.add("slide-whiteboard");
     this.whiteboard.permissions.addPermission(WhiteboardPermissionFlag.all);
     this.whiteboard.setCanvasBackgroundColor("#f0f0f000");
     this.whiteboardContainer.style.position = "relative";
     this.whiteboardContainer.style.flex = "0 0 auto";
     this.whiteboardContainer.style.height = "calc(100% - 24px)";
+    this.whiteboardContainer.classList.add("forge-slide-whiteboard-container");
     this.whiteboardContainer.appendChild(this.whiteboard.view);
     this.whiteboardContainer.appendChild(this.slideContainer);
     this.contentContainer.appendChild(this.whiteboardContainer);
@@ -67293,7 +68118,13 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
       ...option.options,
       interactive: true,
       anchor: this.slideContainer,
-      mode: "interactive"
+      mode: "interactive",
+      clientId: Math.random().toString(36).substring(2, 15),
+      timestamp: () => {
+        console.log("timestamp");
+        console.log(Date.now, this.calibrationTimestamp, Date.now() - this.calibrationTimestamp);
+        return this.calibrationTimestamp;
+      }
       // logger: {
       //     info: console.log,
       //     warn: console.warn,
@@ -67302,39 +68133,54 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
     });
     this.slide.setResource(option.taskId, option.prefix);
     this.sideBar.initialize(json.slideCount, option);
-    this.slide.on("syncDispatch", (event) => {
+    this.slide.on(import_slide.SLIDE_EVENTS.syncDispatch, (event) => {
       this.getMap(this.name).set("syncSlide", {
         slideState: this.slide.slideState,
         dispatch: event
       });
     });
-    this.slide.on("mainSeqStepStart", (animateIndex) => {
+    this.slide.on(import_slide.SLIDE_EVENTS.mainSeqStepStart, (animateIndex) => {
       this.emitter.emit("mainSeqStepStart", animateIndex);
     });
-    this.slide.on("mainSeqStepEnd", (animateIndex) => {
+    this.slide.on(import_slide.SLIDE_EVENTS.mainSeqStepEnd, (animateIndex) => {
       this.emitter.emit("mainSeqStepEnd", animateIndex);
     });
-    this.slide.on("renderStart", (slideIndex) => {
-      this.whiteboardApp.emitter.view.style.opacity = "0";
-      this.whiteboardApp.emitter.addPage(`${slideIndex}`);
-      this.whiteboardApp.emitter.gotoPage(`${slideIndex}`);
-      this.emitter.emit("renderStart", slideIndex);
+    this.slide.on(import_slide.SLIDE_EVENTS.renderError, ({ error, index }) => {
+      if (error.errorType === "CANVAS_CRASH") {
+        this.slide.renderSlide(index);
+      }
     });
-    this.slide.on("renderEnd", (slideIndex) => {
-      this.currentSlideIndex = slideIndex;
-      this.whiteboardApp.emitter.view.style.opacity = "1";
-      this.emitter.emit("renderEnd", slideIndex);
+    this.slide.on(import_slide.SLIDE_EVENTS.renderStart, (slideIndex) => {
+      if (slideIndex >= 0) {
+        this.sideBar.pauseGetPreviewImageSchedule();
+        this.whiteboardApp.emitter.view.style.opacity = "0";
+        this.whiteboardApp.emitter.addPage(`${slideIndex}`);
+        this.whiteboardApp.emitter.gotoPage(`${slideIndex}`);
+        this.sideBar.hidden();
+        this.emitter.emit("renderStart", slideIndex);
+      }
+    });
+    this.slide.on(import_slide.SLIDE_EVENTS.renderEnd, (slideIndex) => {
+      if (slideIndex >= 0) {
+        this.sideBar.startGetPreviewImageSchedule();
+        this.currentSlideIndex = slideIndex;
+        this.whiteboardApp.emitter.view.style.opacity = "1";
+        this.emitter.emit("renderEnd", slideIndex);
+      }
     });
-    this.slide.on("stateChange", (state) => {
+    this.slide.on(import_slide.SLIDE_EVENTS.stateChange, (state) => {
       this.getMap(this.name).set("slideState", state);
     });
     this.getMap(this.name).observe(this.onSlideEventHandler);
     window.slide = this.slide;
     window.slideWhiteboard = this.whiteboardApp;
     window.forgeSlide = this;
+    this.whiteboardContainer.addEventListener("click", () => {
+      this.sideBar.hidden();
+    }, false);
     const syncSlide = this.getMap(this.name).get("slideState");
     if (syncSlide && syncSlide.taskId === option.taskId) {
-      await this.slide.setSlideState(syncSlide);
+      this.slide.setSlideState(syncSlide);
     } else {
       this.slide.renderSlide(1);
     }
@@ -67351,8 +68197,32 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
         }
       }
     });
-    this.permissions.addPermission(7 /* all */);
+    this.permissions.setPermission(7 /* all */);
     this.whiteboardApp.disableViewModel();
+    if (this.window) {
+      let prevStatus = "normal";
+      this.window.on("statusChange", (status) => {
+        if (prevStatus === "minimized") {
+          this.onFocusInstance();
+          prevStatus = status;
+          return;
+        }
+        prevStatus = status;
+        if (status === "normal") {
+          this.onFocusInstance();
+        } else if (status === "minimized") {
+          this.onRefocusInstance();
+        }
+      });
+      this.window.on("focusedChange", (status) => {
+        if (status) {
+          this.onFocusInstance();
+        } else {
+          this.onRefocusInstance();
+        }
+      });
+      this.bindKeyBoardEvent();
+    }
     window.__forge_slide = this;
     window.slidePermissions = this.permissions;
     return Promise.resolve(void 0);
@@ -67360,13 +68230,17 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
   userMap(userId) {
     return this.getMap(`user/${userId}`);
   }
-  async dispose() {
-    await this.whiteboardApp.dispose();
+  async dispose(removeSubDoc) {
+    if (removeSubDoc) {
+      this.deleteSubDoc(this.appId);
+    }
+    await this.whiteboardApp.dispose(removeSubDoc);
     this.rootView.parentElement?.removeChild(this.rootView);
     this.slide.destroy();
     this.sideBar.dispose();
     this.getMap(this.name).unobserve(this.onSlideEventHandler);
-    return Promise.resolve(void 0);
+    this.permissions.dispose();
+    this.footer.dispose();
   }
 };
 /*! Bundled license information: