@netless/forge-slide 0.1.1-alpha.0 → 0.1.1-alpha.10

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() {
         });
@@ -35154,23 +35195,23 @@ 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_room2 = 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 Y13 = __toESM(require("yjs"), 1);
+var import_eventemitter33 = __toESM(require("eventemitter3"), 1);
 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_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_eventemitter310 = __toESM(require("eventemitter3"), 1);
+var import_forge_room3 = require("@netless/forge-room");
 var import_eventemitter311 = __toESM(require("eventemitter3"), 1);
-var import_forge_room2 = require("@netless/forge-room");
+var import_forge_room4 = 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 __create2 = Object.create;
 var __defProp2 = Object.defineProperty;
 var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -58945,7 +58986,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 +60100,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;
@@ -60852,6 +60893,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();
+    this.root.unobserveDeep(this.handlePropChange);
+  }
 };
 _defineProperty(ElementModel, "KEYS", {
   index: "index",
@@ -60921,12 +60966,15 @@ var CurveModel = class extends ElementModel {
   constructor(root, scope) {
     super(root, scope);
     _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;
@@ -60935,23 +60983,23 @@ var CurveModel = class extends ElementModel {
     const groupPoints = (0, import_lodash.chunk)(points, 2);
     return ae(groupPoints, {
       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) => {
+    const currentPoints = (0, import_lodash.chunk)(this.points, 2);
+    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) => {
@@ -60985,27 +61033,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,8 +61077,8 @@ var CurveModel = class extends ElementModel {
   }
   styleKeys() {
     return {
-      include: ["strokeColor"],
-      exclude: ["fillColor", "dashArray"]
+      include: ["strokeColor", "strokeWidth"],
+      exclude: ["dashArray", "fillColor"]
     };
   }
   onStyleKeyUpdate(key) {
@@ -61026,8 +61088,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;
@@ -61059,14 +61125,12 @@ var SelectorModel = class extends ElementModel {
       this.root.set("points", initPoints);
     }
   }
+  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 +61156,7 @@ var SelectorModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
   }
 };
 var import_lodash2 = __toESM2(require_lodash(), 1);
@@ -61139,7 +61203,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]();
@@ -61190,6 +61254,8 @@ var SegmentsModel = class extends ElementModel {
       this.root.set("points", new Y4.Array());
     }
   }
+  subDispose() {
+  }
   onVectorUpdate() {
     if (!this.item) {
       return;
@@ -61224,7 +61290,7 @@ var SegmentsModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
   }
 };
 var import_lodash4 = __toESM2(require_lodash(), 1);
@@ -61311,6 +61377,9 @@ var LineTool = class extends WhiteboardTool {
     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();
@@ -61384,6 +61453,8 @@ var LineModel = class extends ElementModel {
       this.root.set("tailArrow", "normal");
     }
   }
+  subDispose() {
+  }
   onVectorUpdate() {
     if (!this.item) {
       return;
@@ -61420,7 +61491,7 @@ var LineModel = class extends ElementModel {
     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 +61545,7 @@ var LineModel = class extends ElementModel {
       exclude: ["fillColor"]
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
     this.onVectorUpdate();
   }
 };
@@ -61594,6 +61665,9 @@ var PointTextModel = class extends ElementModel {
       }, 60);
     }
   }
+  subDispose() {
+    this.root.unobserve(this.handleTextPropChange);
+  }
   getInternalMeasurement() {
     if (!this.item) {
       return null;
@@ -61696,6 +61770,8 @@ var TriangleModel = class extends ElementModel {
       this.root.set("points", new Y7.Array());
     }
   }
+  subDispose() {
+  }
   createPaperItem() {
     this.item = new this.scope.Path();
     this.item.strokeCap = "butt";
@@ -61752,7 +61828,7 @@ var TriangleModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
   }
 };
 function _defineProperty12(e, r, t) {
@@ -61788,6 +61864,8 @@ var RectangleModel = class extends ElementModel {
       this.root.set("radius", 0);
     }
   }
+  subDispose() {
+  }
   createSegments() {
     const [a2, b2, c, d] = this.points;
     const matrix = new this.scope.Matrix(this.pointsMatrix);
@@ -61919,7 +61997,7 @@ var RectangleModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
   }
 };
 var elementsUndoOrigin = "elementsUndoOrigin";
@@ -62055,9 +62133,11 @@ var EraserModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
     return;
   }
+  subDispose() {
+  }
 };
 var import_lodash6 = __toESM2(require_lodash(), 1);
 function _defineProperty14(e, r, t) {
@@ -62211,27 +62291,12 @@ var LaserPointerModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
     return;
   }
-};
-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.");
+  subDispose() {
   }
-  return ("string" === r ? String : Number)(t);
-}
+};
 var WhiteboardPermissionFlag = function(WhiteboardPermissionFlag2) {
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["none"] = 0] = "none";
   WhiteboardPermissionFlag2[WhiteboardPermissionFlag2["draw"] = 1] = "draw";
@@ -62244,117 +62309,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_room2.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) {
@@ -62367,7 +62340,7 @@ function _toPrimitive16(t, r) {
 var StraightLineModel = class extends ElementModel {
   constructor(root, scope) {
     super(root, scope);
-    _defineProperty16(this, "item", null);
+    _defineProperty15(this, "item", null);
     if (!this.root.has("type")) {
       this.root.set("type", "line");
     }
@@ -62375,6 +62348,8 @@ var StraightLineModel = class extends ElementModel {
       this.root.set("points", new Y11.Array());
     }
   }
+  subDispose() {
+  }
   onVectorUpdate() {
     if (!this.item) {
       return;
@@ -62448,7 +62423,7 @@ var StraightLineModel = class extends ElementModel {
       exclude: ["fillColor"]
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
     if (!this.item) {
       return;
     }
@@ -62457,14 +62432,14 @@ var StraightLineModel = class extends ElementModel {
     this.item.addSegments(path.segments);
   }
 };
-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;
+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 _toPropertyKey17(t) {
-  var i = _toPrimitive17(t, "string");
+function _toPropertyKey16(t) {
+  var i = _toPrimitive16(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive17(t, r) {
+function _toPrimitive16(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -62480,16 +62455,16 @@ var RenderableModel = class extends import_eventemitter3.default {
   }
   constructor(layerId, shadowEmitter, elements, scope, toolbarModel, userManager, hasPermission) {
     super();
-    _defineProperty17(this, "scope", void 0);
-    _defineProperty17(this, "toolbarModel", void 0);
-    _defineProperty17(this, "userManager", void 0);
-    _defineProperty17(this, "elementModels", void 0);
-    _defineProperty17(this, "elements", void 0);
-    _defineProperty17(this, "layerId", void 0);
-    _defineProperty17(this, "maxIndex", -1);
-    _defineProperty17(this, "hasPermission", void 0);
-    _defineProperty17(this, "shadowEmitter", void 0);
-    _defineProperty17(this, "onElementsChange", (event) => {
+    _defineProperty16(this, "scope", void 0);
+    _defineProperty16(this, "toolbarModel", void 0);
+    _defineProperty16(this, "userManager", void 0);
+    _defineProperty16(this, "elementModels", void 0);
+    _defineProperty16(this, "elements", void 0);
+    _defineProperty16(this, "layerId", void 0);
+    _defineProperty16(this, "maxIndex", -1);
+    _defineProperty16(this, "hasPermission", void 0);
+    _defineProperty16(this, "shadowEmitter", void 0);
+    _defineProperty16(this, "onElementsChange", (event) => {
       for (const [key, value] of event.changes.keys.entries()) {
         if (value.action === "add") {
           const root = this.elements.get(key);
@@ -62668,7 +62643,7 @@ var RenderableModel = class extends import_eventemitter3.default {
     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;
     }
@@ -62725,7 +62700,11 @@ var RenderableModel = class extends import_eventemitter3.default {
     });
   }
   dispose() {
+    this.elements.unobserve(this.onElementsChange);
     this.elements.clear();
+    Array.from(this.elementModels.values()).forEach((model) => {
+      model.dispose();
+    });
   }
 };
 var import_lodash8 = __toESM2(require_lodash(), 1);
@@ -62764,10 +62743,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 +62807,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 +62817,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 +62827,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 +62837,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;
 }
@@ -62945,14 +62924,14 @@ function Distance(p1, p2) {
 function Deg2Rad(d) {
   return d * Math.PI / 180;
 }
-function _defineProperty18(e, r, t) {
-  return (r = _toPropertyKey18(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+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;
 }
-function _toPropertyKey18(t) {
-  var i = _toPrimitive18(t, "string");
+function _toPropertyKey17(t) {
+  var i = _toPrimitive17(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive18(t, r) {
+function _toPrimitive17(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -62964,7 +62943,7 @@ function _toPrimitive18(t, r) {
 }
 var Recognizer = class {
   constructor() {
-    _defineProperty18(this, "dollar", new DollarRecognizer());
+    _defineProperty17(this, "dollar", new DollarRecognizer());
   }
   recognize(points) {
     let minX = Number.MAX_VALUE;
@@ -62990,14 +62969,14 @@ var Recognizer = class {
     return null;
   }
 };
-function _defineProperty19(e, r, t) {
-  return (r = _toPropertyKey19(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty18(e, r, t) {
+  return (r = _toPropertyKey18(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey19(t) {
-  var i = _toPrimitive19(t, "string");
+function _toPropertyKey18(t) {
+  var i = _toPrimitive18(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive19(t, r) {
+function _toPrimitive18(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -63010,22 +62989,40 @@ function _toPrimitive19(t, r) {
 var CurveTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty19(this, "elementModel", null);
-    _defineProperty19(this, "recognizer", new Recognizer());
-    _defineProperty19(this, "pointCount", 0);
+    _defineProperty18(this, "elementModel", null);
+    _defineProperty18(this, "recognizer", new Recognizer());
+    _defineProperty18(this, "pointCount", 0);
     this.tool.minDistance = 1;
   }
-  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) {
@@ -63059,14 +63056,14 @@ var CurveTool = class extends WhiteboardTool {
     }
   }
 };
-function _defineProperty20(e, r, t) {
-  return (r = _toPropertyKey20(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty19(e, r, t) {
+  return (r = _toPropertyKey19(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey20(t) {
-  var i = _toPrimitive20(t, "string");
+function _toPropertyKey19(t) {
+  var i = _toPrimitive19(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive20(t, r) {
+function _toPrimitive19(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -63079,12 +63076,15 @@ function _toPrimitive20(t, r) {
 var RectangleTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty20(this, "elementModel", null);
-    _defineProperty20(this, "from", null);
-    _defineProperty20(this, "to", null);
+    _defineProperty19(this, "elementModel", null);
+    _defineProperty19(this, "from", null);
+    _defineProperty19(this, "to", null);
     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();
@@ -63104,14 +63104,14 @@ var RectangleTool = class extends WhiteboardTool {
     }
   }
 };
-function _defineProperty21(e, r, t) {
-  return (r = _toPropertyKey21(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty20(e, r, t) {
+  return (r = _toPropertyKey20(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey21(t) {
-  var i = _toPrimitive21(t, "string");
+function _toPropertyKey20(t) {
+  var i = _toPrimitive20(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive21(t, r) {
+function _toPrimitive20(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -63130,7 +63130,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);
   }
@@ -63175,8 +63175,8 @@ var ToolbarModel = class extends import_eventemitter33.default {
   }
   constructor(root, defaultStyle) {
     super();
-    _defineProperty21(this, "root", void 0);
-    _defineProperty21(this, "handleRootUpdate", (evt) => {
+    _defineProperty20(this, "root", void 0);
+    _defineProperty20(this, "handleRootUpdate", (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.emit("update", {
@@ -63199,15 +63199,19 @@ var ToolbarModel = class extends import_eventemitter33.default {
       }
     });
   }
+  dispose() {
+    this.root.unobserve(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;
+function _defineProperty21(e, r, t) {
+  return (r = _toPropertyKey21(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey22(t) {
-  var i = _toPrimitive22(t, "string");
+function _toPropertyKey21(t) {
+  var i = _toPrimitive21(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive22(t, r) {
+function _toPrimitive21(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -63220,16 +63224,19 @@ function _toPrimitive22(t, r) {
 var SelectorTool = class extends WhiteboardTool {
   constructor(enableToolEvent, renderableModel, shadowEmitter, scope, selectElementsModel) {
     super(enableToolEvent, renderableModel, shadowEmitter, scope);
-    _defineProperty22(this, "elementModel", null);
-    _defineProperty22(this, "from", null);
-    _defineProperty22(this, "to", null);
-    _defineProperty22(this, "selectElementsModel", void 0);
-    _defineProperty22(this, "selectElements", /* @__PURE__ */ new Map());
+    _defineProperty21(this, "elementModel", null);
+    _defineProperty21(this, "from", null);
+    _defineProperty21(this, "to", null);
+    _defineProperty21(this, "selectElementsModel", void 0);
+    _defineProperty21(this, "selectElements", /* @__PURE__ */ new Map());
     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();
@@ -63285,14 +63292,14 @@ var WhiteboardKeys = {
   viewMatrix: "viewMatrix",
   cameraMode: "cameraMode"
 };
-function _defineProperty23(e, r, t) {
-  return (r = _toPropertyKey23(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+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;
 }
-function _toPropertyKey23(t) {
-  var i = _toPrimitive23(t, "string");
+function _toPropertyKey22(t) {
+  var i = _toPrimitive22(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive23(t, r) {
+function _toPrimitive22(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -63302,7 +63309,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);
   }
@@ -63311,24 +63318,28 @@ var SelectElementsModel = class extends import_eventemitter34.default {
   }
   constructor(userManager, requestUserMap, hasPermission) {
     super();
-    _defineProperty23(this, "requestUserMap", void 0);
-    _defineProperty23(this, "userManager", void 0);
-    _defineProperty23(this, "hasPermission", void 0);
-    _defineProperty23(this, "observers", /* @__PURE__ */ new Map());
-    _defineProperty23(this, "handleUserLeave", (user) => {
+    _defineProperty22(this, "requestUserMap", void 0);
+    _defineProperty22(this, "userManager", void 0);
+    _defineProperty22(this, "hasPermission", void 0);
+    _defineProperty22(this, "observers", /* @__PURE__ */ new Map());
+    _defineProperty22(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
         this.requestUserMap(user.id).unobserveDeep(cb);
+        this.observers.delete(user.id);
       }
     });
-    _defineProperty23(this, "handleUserJoin", (user) => {
+    _defineProperty22(this, "handleUserJoin", (user) => {
       const observer = (evts) => {
         this.handleUserSelectElementsChange(user.id, evts);
       };
+      if (this.observers.has(user.id)) {
+        this.requestUserMap(user.id).unobserveDeep(this.observers.get(user.id));
+      }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
     });
-    _defineProperty23(this, "handleUserSelectElementsChange", (userId, evts) => {
+    _defineProperty22(this, "handleUserSelectElementsChange", (userId, evts) => {
       for (const evt of evts) {
         if (evt.target.get("inner-map-id") === WhiteboardKeys.selectElements) {
           const elementIds = Array.from(evt.target.keys()).filter((v) => v !== "inner-map-id");
@@ -63344,6 +63355,9 @@ var SelectElementsModel = class extends import_eventemitter34.default {
       const observer = (evts) => {
         this.handleUserSelectElementsChange(userId, evts);
       };
+      if (this.observers.has(userId)) {
+        this.requestUserMap(userId).unobserveDeep(this.observers.get(userId));
+      }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
     });
@@ -63398,25 +63412,22 @@ 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()) {
+      this.requestUserMap(key).unobserveDeep(value);
+    }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
     this.userManager.off("join", this.handleUserJoin);
   }
 };
-function _defineProperty24(e, r, t) {
-  return (r = _toPropertyKey24(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty23(e, r, t) {
+  return (r = _toPropertyKey23(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey24(t) {
-  var i = _toPrimitive24(t, "string");
+function _toPropertyKey23(t) {
+  var i = _toPrimitive23(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive24(t, r) {
+function _toPrimitive23(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -63426,31 +63437,31 @@ 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);
-    _defineProperty24(this, "content", void 0);
-    _defineProperty24(this, "camera", void 0);
-    _defineProperty24(this, "originX", 0);
-    _defineProperty24(this, "originY", 0);
-    _defineProperty24(this, "rotation", 0);
-    _defineProperty24(this, "scale", 1);
-    _defineProperty24(this, "handleContentInput", () => {
+    _defineProperty23(this, "rootView", void 0);
+    _defineProperty23(this, "content", void 0);
+    _defineProperty23(this, "camera", void 0);
+    _defineProperty23(this, "originX", 0);
+    _defineProperty23(this, "originY", 0);
+    _defineProperty23(this, "rotation", 0);
+    _defineProperty23(this, "scale", 1);
+    _defineProperty23(this, "handleContentInput", () => {
       this.emit("change", this.content.textContent ?? "");
       this.translateCaretIntoView();
     });
-    _defineProperty24(this, "handleContentKeydown", (evt) => {
+    _defineProperty23(this, "handleContentKeydown", (evt) => {
       if (/^Arrow/.test(evt.key)) {
         setTimeout(() => {
           this.translateCaretIntoView();
         }, 50);
       }
     });
-    _defineProperty24(this, "handleContentBlur", () => {
+    _defineProperty23(this, "handleContentBlur", () => {
       this.emit("done", this.content.textContent ?? "");
     });
-    _defineProperty24(this, "handleRootClick", (evt) => {
+    _defineProperty23(this, "handleRootClick", (evt) => {
       if (evt.target === this.rootView) {
         evt.stopPropagation();
         evt.preventDefault();
@@ -63459,12 +63470,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);
@@ -63540,14 +63551,14 @@ var TextEditor = class extends import_eventemitter36.EventEmitter {
     this.rootView.removeEventListener("pointerdown", this.handleRootClick);
   }
 };
-function _defineProperty25(e, r, t) {
-  return (r = _toPropertyKey25(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty24(e, r, t) {
+  return (r = _toPropertyKey24(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey25(t) {
-  var i = _toPrimitive25(t, "string");
+function _toPropertyKey24(t) {
+  var i = _toPrimitive24(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive25(t, r) {
+function _toPrimitive24(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -63567,7 +63578,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;
   }
@@ -63582,12 +63593,12 @@ var Bounds = class extends import_eventemitter35.default {
   }
   constructor(binding, scope) {
     super();
-    _defineProperty25(this, "minX", 0);
-    _defineProperty25(this, "minY", 0);
-    _defineProperty25(this, "maxX", 0);
-    _defineProperty25(this, "maxY", 0);
-    _defineProperty25(this, "binding", void 0);
-    _defineProperty25(this, "scope", void 0);
+    _defineProperty24(this, "minX", 0);
+    _defineProperty24(this, "minY", 0);
+    _defineProperty24(this, "maxX", 0);
+    _defineProperty24(this, "maxY", 0);
+    _defineProperty24(this, "binding", void 0);
+    _defineProperty24(this, "scope", void 0);
     this.binding = binding;
     this.scope = scope;
   }
@@ -63706,35 +63717,35 @@ 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);
-    _defineProperty25(this, "frame", void 0);
-    _defineProperty25(this, "rotator", void 0);
-    _defineProperty25(this, "scope", void 0);
-    _defineProperty25(this, "shadowScope", void 0);
-    _defineProperty25(this, "shadowContainer", void 0);
-    _defineProperty25(this, "ctrlUserMap", void 0);
-    _defineProperty25(this, "viewerId", void 0);
-    _defineProperty25(this, "ctrlId", void 0);
-    _defineProperty25(this, "ctrlNickName", void 0);
-    _defineProperty25(this, "editMode", null);
-    _defineProperty25(this, "editCtrlName", null);
-    _defineProperty25(this, "editAnchor", null);
-    _defineProperty25(this, "lastEditPoint", null);
-    _defineProperty25(this, "bounds", void 0);
-    _defineProperty25(this, "targets", []);
-    _defineProperty25(this, "editorConfig", null);
-    _defineProperty25(this, "aspectRatio", -1);
-    _defineProperty25(this, "uniformScale", false);
-    _defineProperty25(this, "camera", void 0);
-    _defineProperty25(this, "canvasElement", void 0);
-    _defineProperty25(this, "resizeObserver", void 0);
-    _defineProperty25(this, "anchors", []);
-    _defineProperty25(this, "title", null);
-    _defineProperty25(this, "shadowEmitter", void 0);
-    _defineProperty25(this, "handleMatrix", (matrix) => {
+    _defineProperty24(this, "rootView", void 0);
+    _defineProperty24(this, "frame", void 0);
+    _defineProperty24(this, "rotator", void 0);
+    _defineProperty24(this, "scope", void 0);
+    _defineProperty24(this, "shadowScope", void 0);
+    _defineProperty24(this, "shadowContainer", void 0);
+    _defineProperty24(this, "ctrlUserMap", void 0);
+    _defineProperty24(this, "viewerId", void 0);
+    _defineProperty24(this, "ctrlId", void 0);
+    _defineProperty24(this, "ctrlNickName", void 0);
+    _defineProperty24(this, "editMode", null);
+    _defineProperty24(this, "editCtrlName", null);
+    _defineProperty24(this, "editAnchor", null);
+    _defineProperty24(this, "lastEditPoint", null);
+    _defineProperty24(this, "bounds", void 0);
+    _defineProperty24(this, "targets", []);
+    _defineProperty24(this, "editorConfig", null);
+    _defineProperty24(this, "aspectRatio", -1);
+    _defineProperty24(this, "uniformScale", false);
+    _defineProperty24(this, "camera", void 0);
+    _defineProperty24(this, "canvasElement", void 0);
+    _defineProperty24(this, "resizeObserver", void 0);
+    _defineProperty24(this, "anchors", []);
+    _defineProperty24(this, "title", null);
+    _defineProperty24(this, "shadowEmitter", void 0);
+    _defineProperty24(this, "handleMatrix", (matrix) => {
       if (this.shadowContainer) {
         const next = matrix.appended(this.shadowContainer.data.shadowMatrix ?? new this.shadowScope.Matrix());
         this.shadowContainer.data.shadowMatrix = next;
@@ -63744,7 +63755,7 @@ var Editor = class extends import_eventemitter35.default {
         this.targets.forEach((target) => target.appendPointsMatrix(matrix));
       }
     });
-    _defineProperty25(this, "handlePointerDown", (evt) => {
+    _defineProperty24(this, "handlePointerDown", (evt) => {
       if (!evt.target) {
         return;
       }
@@ -63800,14 +63811,14 @@ var Editor = class extends import_eventemitter35.default {
         };
       }
     });
-    _defineProperty25(this, "handlePointerMove", (evt) => {
+    _defineProperty24(this, "handlePointerMove", (evt) => {
       evt.preventDefault();
       if (!evt.target) {
         return;
       }
       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 +63843,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 = {
@@ -63851,7 +63862,7 @@ var Editor = class extends import_eventemitter35.default {
         }
       }
     });
-    _defineProperty25(this, "handlePointerUp", (evt) => {
+    _defineProperty24(this, "handlePointerUp", (evt) => {
       evt.preventDefault();
       this.resetShadow();
       this.shadowEmitter.setActive(false);
@@ -63868,7 +63879,7 @@ var Editor = class extends import_eventemitter35.default {
       this.lastEditPoint = null;
       this.uniformScale = false;
     });
-    _defineProperty25(this, "handleFrameDBClick", (evt) => {
+    _defineProperty24(this, "handleFrameDBClick", (evt) => {
       if (evt.target === this.frame && this.targets.length === 1) {
         if (this.targets[0].type === "point-text") {
           this.frame.style.display = "none";
@@ -63876,7 +63887,7 @@ var Editor = class extends import_eventemitter35.default {
         }
       }
     });
-    _defineProperty25(this, "updateBounds", () => {
+    _defineProperty24(this, "updateBounds", () => {
       let minX = Number.MAX_VALUE;
       let maxX = -Number.MAX_VALUE;
       let minY = Number.MAX_VALUE;
@@ -63909,7 +63920,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 = "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 +63941,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";
     }
@@ -64126,14 +64137,14 @@ var Editor = class extends import_eventemitter35.default {
     this.resizeObserver.disconnect();
   }
 };
-function _defineProperty26(e, r, t) {
-  return (r = _toPropertyKey26(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty25(e, r, t) {
+  return (r = _toPropertyKey25(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey26(t) {
-  var i = _toPrimitive26(t, "string");
+function _toPropertyKey25(t) {
+  var i = _toPrimitive25(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive26(t, r) {
+function _toPrimitive25(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64146,13 +64157,13 @@ function _toPrimitive26(t, r) {
 var TextTool = class extends WhiteboardTool {
   constructor(enableToolEvent, model, shadowEmitter, scope, rootView, canvasElement, toolbarModel, camera) {
     super(enableToolEvent, model, shadowEmitter, scope);
-    _defineProperty26(this, "from", null);
-    _defineProperty26(this, "to", null);
-    _defineProperty26(this, "rootView", void 0);
-    _defineProperty26(this, "canvasElement", void 0);
-    _defineProperty26(this, "elementModel", null);
-    _defineProperty26(this, "toolbarModel", void 0);
-    _defineProperty26(this, "camera", void 0);
+    _defineProperty25(this, "from", null);
+    _defineProperty25(this, "to", null);
+    _defineProperty25(this, "rootView", void 0);
+    _defineProperty25(this, "canvasElement", void 0);
+    _defineProperty25(this, "elementModel", null);
+    _defineProperty25(this, "toolbarModel", void 0);
+    _defineProperty25(this, "camera", void 0);
     this.rootView = rootView;
     this.canvasElement = canvasElement;
     this.toolbarModel = toolbarModel;
@@ -64161,7 +64172,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 +64184,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;
@@ -64211,14 +64225,14 @@ var TextTool = class extends WhiteboardTool {
     }, 30);
   }
 };
-function _defineProperty27(e, r, t) {
-  return (r = _toPropertyKey27(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty26(e, r, t) {
+  return (r = _toPropertyKey26(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey27(t) {
-  var i = _toPrimitive27(t, "string");
+function _toPropertyKey26(t) {
+  var i = _toPrimitive26(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive27(t, r) {
+function _toPrimitive26(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64228,14 +64242,14 @@ 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);
-    _defineProperty27(this, "scope", void 0);
-    _defineProperty27(this, "lastVector", null);
-    _defineProperty27(this, "lastPoint", null);
-    _defineProperty27(this, "onTouchStart", (evt) => {
+    _defineProperty26(this, "element", void 0);
+    _defineProperty26(this, "scope", void 0);
+    _defineProperty26(this, "lastVector", null);
+    _defineProperty26(this, "lastPoint", null);
+    _defineProperty26(this, "onTouchStart", (evt) => {
       if (evt.touches.length > 1) {
         evt.preventDefault();
         evt.stopPropagation();
@@ -64248,7 +64262,7 @@ var Gesture = class extends import_eventemitter38.default {
       this.lastVector = p2.subtract(p1);
       this.lastPoint = p1;
     });
-    _defineProperty27(this, "onTouchMove", (evt) => {
+    _defineProperty26(this, "onTouchMove", (evt) => {
       if (this.lastVector && this.lastPoint && evt.touches.length === 2) {
         evt.preventDefault();
         evt.stopPropagation();
@@ -64279,7 +64293,7 @@ var Gesture = class extends import_eventemitter38.default {
         this.lastPoint = null;
       }
     });
-    _defineProperty27(this, "onTouchEnd", () => {
+    _defineProperty26(this, "onTouchEnd", () => {
       this.lastVector = null;
       this.lastPoint = null;
     });
@@ -64290,14 +64304,14 @@ var Gesture = class extends import_eventemitter38.default {
     this.element.addEventListener("touchend", this.onTouchEnd);
   }
 };
-function _defineProperty28(e, r, t) {
-  return (r = _toPropertyKey28(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty27(e, r, t) {
+  return (r = _toPropertyKey27(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey28(t) {
-  var i = _toPrimitive28(t, "string");
+function _toPropertyKey27(t) {
+  var i = _toPrimitive27(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive28(t, r) {
+function _toPrimitive27(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64307,7 +64321,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]);
@@ -64319,31 +64333,31 @@ var Camera = class extends import_eventemitter37.default {
   }
   constructor(initSize, maxScale, dom, userManager, scope, whiteboardAttrsMap, hasPermission, requestUserMap, _paperSize, _domSize) {
     super();
-    _defineProperty28(this, "scope", void 0);
-    _defineProperty28(this, "dom", void 0);
-    _defineProperty28(this, "lastTriggerTime", 0);
-    _defineProperty28(this, "lastDelta", {
+    _defineProperty27(this, "scope", void 0);
+    _defineProperty27(this, "dom", void 0);
+    _defineProperty27(this, "lastTriggerTime", 0);
+    _defineProperty27(this, "lastDelta", {
       x: 0,
       y: 0
     });
-    _defineProperty28(this, "requestUserMap", void 0);
-    _defineProperty28(this, "userManager", void 0);
-    _defineProperty28(this, "observers", /* @__PURE__ */ new Map());
-    _defineProperty28(this, "whiteboardAttrsMap", void 0);
-    _defineProperty28(this, "paperSize", void 0);
-    _defineProperty28(this, "domSize", void 0);
-    _defineProperty28(this, "hasPermission", void 0);
-    _defineProperty28(this, "gesture", void 0);
-    _defineProperty28(this, "inherentScale", 1);
-    _defineProperty28(this, "maxScale", void 0);
-    _defineProperty28(this, "initSize", void 0);
-    _defineProperty28(this, "bound", void 0);
-    _defineProperty28(this, "boundTiemoutId", void 0);
-    _defineProperty28(this, "enableByMouse", true);
-    _defineProperty28(this, "enableByTouch", true);
-    _defineProperty28(this, "boundaryColor", "#F44336");
-    _defineProperty28(this, "enableBoundaryHighlight", true);
-    _defineProperty28(this, "handleMainCameraChange", (evt) => {
+    _defineProperty27(this, "requestUserMap", void 0);
+    _defineProperty27(this, "userManager", void 0);
+    _defineProperty27(this, "observers", /* @__PURE__ */ new Map());
+    _defineProperty27(this, "whiteboardAttrsMap", void 0);
+    _defineProperty27(this, "paperSize", void 0);
+    _defineProperty27(this, "domSize", void 0);
+    _defineProperty27(this, "hasPermission", void 0);
+    _defineProperty27(this, "gesture", void 0);
+    _defineProperty27(this, "inherentScale", 1);
+    _defineProperty27(this, "maxScale", void 0);
+    _defineProperty27(this, "initSize", void 0);
+    _defineProperty27(this, "bound", void 0);
+    _defineProperty27(this, "boundTiemoutId", void 0);
+    _defineProperty27(this, "enableByMouse", true);
+    _defineProperty27(this, "enableByTouch", true);
+    _defineProperty27(this, "boundaryColor", "#F44336");
+    _defineProperty27(this, "enableBoundaryHighlight", true);
+    _defineProperty27(this, "handleMainCameraChange", (evt) => {
       const userMap = this.requestUserMap(this.userManager.selfId);
       const cameraMode = userMap.get(WhiteboardKeys.cameraMode);
       if (cameraMode !== "main") {
@@ -64360,20 +64374,23 @@ var Camera = class extends import_eventemitter37.default {
         }
       }
     });
-    _defineProperty28(this, "handleUserLeave", (user) => {
+    _defineProperty27(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
         this.requestUserMap(user.id).unobserve(cb);
       }
     });
-    _defineProperty28(this, "handleUserJoin", (user) => {
+    _defineProperty27(this, "handleUserJoin", (user) => {
       const observer = (evt) => {
         this.handleViewMatrixUpdate(user.id, evt);
       };
+      if (this.observers.has(user.id)) {
+        this.requestUserMap(user.id).unobserve(observer);
+      }
       this.requestUserMap(user.id).observe(observer);
       this.observers.set(user.id, observer);
     });
-    _defineProperty28(this, "handleViewMatrixUpdate", (userId, evt) => {
+    _defineProperty27(this, "handleViewMatrixUpdate", (userId, evt) => {
       const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
       for (const [key, value] of evt.changes.keys.entries()) {
         if (value.action === "update") {
@@ -64400,7 +64417,7 @@ var Camera = class extends import_eventemitter37.default {
         }
       }
     });
-    _defineProperty28(this, "handleWheel", (evt) => {
+    _defineProperty27(this, "handleWheel", (evt) => {
       if (!this.enableByMouse) {
         return;
       }
@@ -64449,7 +64466,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 +64491,9 @@ var Camera = class extends import_eventemitter37.default {
       const observer = (evt) => {
         this.handleViewMatrixUpdate(userId, evt);
       };
+      if (this.observers.has(userId)) {
+        this.requestUserMap(userId).unobserve(observer);
+      }
       this.requestUserMap(userId).observe(observer);
       this.observers.set(userId, observer);
     });
@@ -64510,7 +64530,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 +64540,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,15 +64685,28 @@ 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) {
+        this.requestUserMap(userId).unobserve(cb);
+      }
+    });
+    this.whiteboardAttrsMap.unobserve(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;
+function _defineProperty28(e, r, t) {
+  return (r = _toPropertyKey28(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey29(t) {
-  var i = _toPrimitive29(t, "string");
+function _toPropertyKey28(t) {
+  var i = _toPrimitive28(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive29(t, r) {
+function _toPrimitive28(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64683,12 +64719,15 @@ function _toPrimitive29(t, r) {
 var EllipseTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty29(this, "elementModel", null);
-    _defineProperty29(this, "from", null);
-    _defineProperty29(this, "to", null);
+    _defineProperty28(this, "elementModel", null);
+    _defineProperty28(this, "from", null);
+    _defineProperty28(this, "to", null);
     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();
@@ -64712,14 +64751,14 @@ var EllipseTool = class extends WhiteboardTool {
     }
   }
 };
-function _defineProperty30(e, r, t) {
-  return (r = _toPropertyKey30(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+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;
 }
-function _toPropertyKey30(t) {
-  var i = _toPrimitive30(t, "string");
+function _toPropertyKey29(t) {
+  var i = _toPrimitive29(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive30(t, r) {
+function _toPrimitive29(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64732,12 +64771,15 @@ function _toPrimitive30(t, r) {
 var TriangleTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty30(this, "elementModel", null);
-    _defineProperty30(this, "from", null);
-    _defineProperty30(this, "to", null);
+    _defineProperty29(this, "elementModel", null);
+    _defineProperty29(this, "from", null);
+    _defineProperty29(this, "to", null);
     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();
@@ -64757,14 +64799,14 @@ var TriangleTool = class extends WhiteboardTool {
     }
   }
 };
-function _defineProperty31(e, r, t) {
-  return (r = _toPropertyKey31(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty30(e, r, t) {
+  return (r = _toPropertyKey30(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey31(t) {
-  var i = _toPrimitive31(t, "string");
+function _toPropertyKey30(t) {
+  var i = _toPrimitive30(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive31(t, r) {
+function _toPrimitive30(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64774,63 +64816,63 @@ function _toPrimitive31(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var Whiteboard = class extends import_eventemitter39.default {
+var Whiteboard = class extends import_eventemitter38.default {
   // public insertImage!: (src: string) => void;
   constructor(view) {
     super();
-    _defineProperty31(this, "view", void 0);
-    _defineProperty31(this, "selfUserId", void 0);
-    _defineProperty31(this, "permissions", void 0);
-    _defineProperty31(this, "tool", void 0);
-    _defineProperty31(this, "fontSize", void 0);
-    _defineProperty31(this, "dashArray", void 0);
-    _defineProperty31(this, "fontFamily", void 0);
-    _defineProperty31(this, "strokeColor", void 0);
-    _defineProperty31(this, "fillColor", void 0);
-    _defineProperty31(this, "strokeWidth", void 0);
-    _defineProperty31(this, "enableCameraByMouse", void 0);
-    _defineProperty31(this, "enableCameraByTouch", void 0);
-    _defineProperty31(this, "cameraBoundaryColor", void 0);
-    _defineProperty31(this, "enableCameraBoundaryHighlight", void 0);
-    _defineProperty31(this, "getElementAttribute", void 0);
-    _defineProperty31(this, "setElementAttribute", void 0);
-    _defineProperty31(this, "getCurrentTool", void 0);
-    _defineProperty31(this, "setCurrentTool", void 0);
-    _defineProperty31(this, "setCanvasBackgroundColor", void 0);
-    _defineProperty31(this, "setThemeColor", void 0);
-    _defineProperty31(this, "gotoPage", void 0);
-    _defineProperty31(this, "addPage", void 0);
-    _defineProperty31(this, "deletePage", void 0);
-    _defineProperty31(this, "pageList", void 0);
-    _defineProperty31(this, "currentPageId", void 0);
-    _defineProperty31(this, "clonePage", void 0);
-    _defineProperty31(this, "clearPage", void 0);
-    _defineProperty31(this, "translateCamera", void 0);
-    _defineProperty31(this, "scaleCamera", void 0);
-    _defineProperty31(this, "resetCamera", void 0);
-    _defineProperty31(this, "setFreeModelUserPage", void 0);
-    _defineProperty31(this, "indexedNavigation", void 0);
-    _defineProperty31(this, "setViewModeToFree", void 0);
-    _defineProperty31(this, "setViewModeToFlow", void 0);
-    _defineProperty31(this, "setViewModeToMain", void 0);
-    _defineProperty31(this, "getViewModel", void 0);
-    _defineProperty31(this, "undo", void 0);
-    _defineProperty31(this, "redo", void 0);
-    _defineProperty31(this, "rasterizeViewport", void 0);
-    _defineProperty31(this, "rasterizeElementsBounds", void 0);
-    _defineProperty31(this, "rasterizeMaxBounds", void 0);
-    _defineProperty31(this, "setInputType", void 0);
+    _defineProperty30(this, "view", void 0);
+    _defineProperty30(this, "selfUserId", void 0);
+    _defineProperty30(this, "permissions", void 0);
+    _defineProperty30(this, "tool", void 0);
+    _defineProperty30(this, "fontSize", void 0);
+    _defineProperty30(this, "dashArray", void 0);
+    _defineProperty30(this, "fontFamily", void 0);
+    _defineProperty30(this, "strokeColor", void 0);
+    _defineProperty30(this, "fillColor", void 0);
+    _defineProperty30(this, "strokeWidth", void 0);
+    _defineProperty30(this, "enableCameraByMouse", void 0);
+    _defineProperty30(this, "enableCameraByTouch", void 0);
+    _defineProperty30(this, "cameraBoundaryColor", void 0);
+    _defineProperty30(this, "enableCameraBoundaryHighlight", void 0);
+    _defineProperty30(this, "getElementAttribute", void 0);
+    _defineProperty30(this, "setElementAttribute", void 0);
+    _defineProperty30(this, "getCurrentTool", void 0);
+    _defineProperty30(this, "setCurrentTool", void 0);
+    _defineProperty30(this, "setCanvasBackgroundColor", void 0);
+    _defineProperty30(this, "setThemeColor", void 0);
+    _defineProperty30(this, "gotoPage", void 0);
+    _defineProperty30(this, "addPage", void 0);
+    _defineProperty30(this, "deletePage", void 0);
+    _defineProperty30(this, "pageList", void 0);
+    _defineProperty30(this, "currentPageId", void 0);
+    _defineProperty30(this, "clonePage", void 0);
+    _defineProperty30(this, "clearPage", void 0);
+    _defineProperty30(this, "translateCamera", void 0);
+    _defineProperty30(this, "scaleCamera", void 0);
+    _defineProperty30(this, "resetCamera", void 0);
+    _defineProperty30(this, "setFreeModelUserPage", void 0);
+    _defineProperty30(this, "indexedNavigation", void 0);
+    _defineProperty30(this, "setViewModeToFree", void 0);
+    _defineProperty30(this, "setViewModeToFlow", void 0);
+    _defineProperty30(this, "setViewModeToMain", void 0);
+    _defineProperty30(this, "getViewModel", void 0);
+    _defineProperty30(this, "undo", void 0);
+    _defineProperty30(this, "redo", void 0);
+    _defineProperty30(this, "rasterizeViewport", void 0);
+    _defineProperty30(this, "rasterizeElementsBounds", void 0);
+    _defineProperty30(this, "rasterizeMaxBounds", void 0);
+    _defineProperty30(this, "setInputType", void 0);
     this.view = view;
   }
 };
-function _defineProperty32(e, r, t) {
-  return (r = _toPropertyKey32(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty31(e, r, t) {
+  return (r = _toPropertyKey31(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey32(t) {
-  var i = _toPrimitive32(t, "string");
+function _toPropertyKey31(t) {
+  var i = _toPrimitive31(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive32(t, r) {
+function _toPrimitive31(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64843,14 +64885,17 @@ function _toPrimitive32(t, r) {
 var EraserTool = class extends WhiteboardTool {
   constructor(enableToolEvent, renderableModel, shadowEmitter, scope, trashedElementsModel) {
     super(enableToolEvent, renderableModel, shadowEmitter, scope);
-    _defineProperty32(this, "elementModel", null);
-    _defineProperty32(this, "trashedElementsModel", void 0);
-    _defineProperty32(this, "pointCount", 0);
+    _defineProperty31(this, "elementModel", null);
+    _defineProperty31(this, "trashedElementsModel", void 0);
+    _defineProperty31(this, "pointCount", 0);
     this.trashedElementsModel = trashedElementsModel;
     this.tool.minDistance = 1;
   }
-  onMouseDown(event) {
+  onMouseDown(_event) {
     this.pointCount = 0;
+    if (this.elementModel) {
+      this.elementModel.dispose();
+    }
     this.elementModel = this.modelGetter().createEraser();
   }
   onMouseDrag(event) {
@@ -64872,21 +64917,21 @@ var EraserTool = class extends WhiteboardTool {
       }
     });
   }
-  onMouseUp(event) {
+  onMouseUp(_event) {
     if (this.elementModel) {
       this.modelGetter().removeElementItem(this.elementModel.uuid);
     }
     this.trashedElementsModel.removeAllTrashedElementsForSelf();
   }
 };
-function _defineProperty33(e, r, t) {
-  return (r = _toPropertyKey33(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty32(e, r, t) {
+  return (r = _toPropertyKey32(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey33(t) {
-  var i = _toPrimitive33(t, "string");
+function _toPropertyKey32(t) {
+  var i = _toPrimitive32(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive33(t, r) {
+function _toPrimitive32(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -64896,7 +64941,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);
   }
@@ -64905,20 +64950,23 @@ var TrashedElementsModel = class extends import_eventemitter310.default {
   }
   constructor(userManager, requestUserMap, hasPermission) {
     super();
-    _defineProperty33(this, "requestUserMap", void 0);
-    _defineProperty33(this, "userManager", void 0);
-    _defineProperty33(this, "hasPermission", void 0);
-    _defineProperty33(this, "observers", /* @__PURE__ */ new Map());
-    _defineProperty33(this, "handleUserLeave", (user) => {
+    _defineProperty32(this, "requestUserMap", void 0);
+    _defineProperty32(this, "userManager", void 0);
+    _defineProperty32(this, "hasPermission", void 0);
+    _defineProperty32(this, "observers", /* @__PURE__ */ new Map());
+    _defineProperty32(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
         this.requestUserMap(user.id).unobserveDeep(cb);
       }
     });
-    _defineProperty33(this, "handleUserJoin", (user) => {
+    _defineProperty32(this, "handleUserJoin", (user) => {
       const observer = (evts) => {
         this.handleUserTrashElementsChange(user.id, evts);
       };
+      if (this.observers.has(user.id)) {
+        this.requestUserMap(user.id).unobserveDeep(this.observers.get(user.id));
+      }
       this.requestUserMap(user.id).observeDeep(observer);
       this.observers.set(user.id, observer);
     });
@@ -64930,6 +64978,9 @@ var TrashedElementsModel = class extends import_eventemitter310.default {
       const observer = (evts) => {
         this.handleUserTrashElementsChange(userId, evts);
       };
+      if (this.observers.has(userId)) {
+        this.requestUserMap(userId).unobserveDeep(this.observers.get(userId));
+      }
       this.requestUserMap(userId).observeDeep(observer);
       this.observers.set(userId, observer);
     });
@@ -64984,25 +65035,22 @@ 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()) {
+      this.requestUserMap(key).unobserveDeep(value);
+    }
     this.observers.clear();
     this.userManager.off("leave", this.handleUserLeave);
     this.userManager.off("join", this.handleUserJoin);
   }
 };
-function _defineProperty34(e, r, t) {
-  return (r = _toPropertyKey34(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty33(e, r, t) {
+  return (r = _toPropertyKey33(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey34(t) {
-  var i = _toPrimitive34(t, "string");
+function _toPropertyKey33(t) {
+  var i = _toPrimitive33(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive34(t, r) {
+function _toPrimitive33(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65015,12 +65063,15 @@ function _toPrimitive34(t, r) {
 var LaserPointerTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty34(this, "elementModel", null);
-    _defineProperty34(this, "pointCount", 0);
+    _defineProperty33(this, "elementModel", null);
+    _defineProperty33(this, "pointCount", 0);
     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,20 +65083,20 @@ var LaserPointerTool = class extends WhiteboardTool {
       this.elementModel.appendPoints([event.point.x, event.point.y]);
     }
   }
-  onMouseUp(event) {
+  onMouseUp(_event) {
     if (this.elementModel) {
       this.elementModel.beginRemoveAnimate();
     }
   }
 };
-function _defineProperty35(e, r, t) {
-  return (r = _toPropertyKey35(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty34(e, r, t) {
+  return (r = _toPropertyKey34(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey35(t) {
-  var i = _toPrimitive35(t, "string");
+function _toPropertyKey34(t) {
+  var i = _toPrimitive34(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive35(t, r) {
+function _toPrimitive34(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65055,25 +65106,25 @@ 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);
-    _defineProperty35(this, "pageMap", void 0);
-    _defineProperty35(this, "requestUserMap", void 0);
-    _defineProperty35(this, "userManager", void 0);
-    _defineProperty35(this, "observers", /* @__PURE__ */ new Map());
-    _defineProperty35(this, "hasPermission", void 0);
-    _defineProperty35(this, "handleUserLeave", (user) => {
+    _defineProperty34(this, "whiteboardAttrsMap", void 0);
+    _defineProperty34(this, "pageMap", void 0);
+    _defineProperty34(this, "requestUserMap", void 0);
+    _defineProperty34(this, "userManager", void 0);
+    _defineProperty34(this, "observers", /* @__PURE__ */ new Map());
+    _defineProperty34(this, "hasPermission", void 0);
+    _defineProperty34(this, "handleUserLeave", (user) => {
       const cb = this.observers.get(user.id);
       if (cb) {
         this.requestUserMap(user.id).unobserve(cb);
       }
     });
-    _defineProperty35(this, "handleUserJoin", (user) => {
+    _defineProperty34(this, "handleUserJoin", (user) => {
       this.createCurrentPageObserver(user.id);
     });
-    _defineProperty35(this, "handleMainPageChange", (evt) => {
+    _defineProperty34(this, "handleMainPageChange", (evt) => {
       for (const [key, value] of evt.changes.keys.entries()) {
         if (key === WhiteboardKeys.currentPage) {
           const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
@@ -65081,7 +65132,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_room3.log)(`main page {${targetPage}} not found.`, {}, "error");
                 return;
               }
               this.requestUserMap(this.userManager.selfId).set(WhiteboardKeys.currentPage, targetPage);
@@ -65091,7 +65142,7 @@ var PageModel = class extends import_eventemitter311.default {
         }
       }
     });
-    _defineProperty35(this, "handleUserCurrentPageChange", (userId, evt) => {
+    _defineProperty34(this, "handleUserCurrentPageChange", (userId, evt) => {
       for (const [key, value] of evt.changes.keys.entries()) {
         if (key === WhiteboardKeys.currentPage) {
           const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
@@ -65108,7 +65159,7 @@ var PageModel = class extends import_eventemitter311.default {
         }
       }
     });
-    _defineProperty35(this, "handlePageMapChange", () => {
+    _defineProperty34(this, "handlePageMapChange", () => {
       this.emit("pagesChange", Array.from(this.pageMap.keys()));
     });
     this.hasPermission = hasPermission;
@@ -65150,11 +65201,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,23 +65257,32 @@ var PageModel = class extends import_eventemitter311.default {
       }
     }
   }
+  dispose() {
+    for (const entry of this.observers.entries()) {
+      const [userId, observer] = entry;
+      this.requestUserMap(userId).unobserve(observer);
+    }
+    this.userManager.off("join", this.handleUserJoin);
+    this.userManager.off("leave", this.handleUserLeave);
+    this.whiteboardAttrsMap.unobserve(this.handleMainPageChange);
+    this.pageMap.unobserve(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) {
-  return (r = _toPropertyKey36(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty35(e, r, t) {
+  return (r = _toPropertyKey35(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey36(t) {
-  var i = _toPrimitive36(t, "string");
+function _toPropertyKey35(t) {
+  var i = _toPrimitive35(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive36(t, r) {
+function _toPrimitive35(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65232,19 +65292,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_room4.log)("indexed navigation confusion", {
         list: JSON.stringify(this.list)
       }, "error");
-      throw new Error(`indexed navigation confusion`);
+      throw new Error("indexed navigation confusion");
     }
     return headId;
   }
@@ -65259,13 +65319,13 @@ var IndexedNavigation = class extends import_eventemitter312.default {
   }
   constructor(pageModel, userMap, indexedPageMap, hasPermission) {
     super();
-    _defineProperty36(this, "idPool", /* @__PURE__ */ new Set());
-    _defineProperty36(this, "pageModel", void 0);
-    _defineProperty36(this, "userMap", void 0);
-    _defineProperty36(this, "indexedPageMap", void 0);
-    _defineProperty36(this, "list", {});
-    _defineProperty36(this, "hasPermission", void 0);
-    _defineProperty36(this, "handleIndexedPageMapUpdate", (evt) => {
+    _defineProperty35(this, "idPool", /* @__PURE__ */ new Set());
+    _defineProperty35(this, "pageModel", void 0);
+    _defineProperty35(this, "userMap", void 0);
+    _defineProperty35(this, "indexedPageMap", void 0);
+    _defineProperty35(this, "list", {});
+    _defineProperty35(this, "hasPermission", void 0);
+    _defineProperty35(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 +65380,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,15 +65390,15 @@ 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);
@@ -65358,9 +65418,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 +65442,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 +65484,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 +65497,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 +65540,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 +65553,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 +65566,16 @@ 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.`);
+      console.warn("cannot modify pages in non-main view mode.");
       return this.pageCount;
     }
     const targetId = this.getPageId(index);
@@ -65555,15 +65615,20 @@ var IndexedNavigation = class extends import_eventemitter312.default {
       this.pageModel.gotoPage(targetId);
     }
   }
+  dispose() {
+    this.indexedPageMap.unobserve(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;
+function _defineProperty36(e, r, t) {
+  return (r = _toPropertyKey36(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey37(t) {
-  var i = _toPrimitive37(t, "string");
+function _toPropertyKey36(t) {
+  var i = _toPrimitive36(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive37(t, r) {
+function _toPrimitive36(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65573,10 +65638,10 @@ 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);
+    _defineProperty36(this, "userMap", void 0);
     this.userMap = userMap;
   }
   getActive() {
@@ -65586,14 +65651,14 @@ var ShadowEmitter = class extends import_eventemitter313.default {
     return this.userMap.set("shadowActive", value);
   }
 };
-function _defineProperty38(e, r, t) {
-  return (r = _toPropertyKey38(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+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;
 }
-function _toPropertyKey38(t) {
-  var i = _toPrimitive38(t, "string");
+function _toPropertyKey37(t) {
+  var i = _toPrimitive37(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive38(t, r) {
+function _toPrimitive37(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65606,12 +65671,15 @@ function _toPrimitive38(t, r) {
 var StraightLineTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty38(this, "elementModel", null);
-    _defineProperty38(this, "from", null);
-    _defineProperty38(this, "to", null);
+    _defineProperty37(this, "elementModel", null);
+    _defineProperty37(this, "from", null);
+    _defineProperty37(this, "to", null);
     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();
@@ -65631,14 +65699,14 @@ var StraightLineTool = class extends WhiteboardTool {
     }
   }
 };
-function _defineProperty39(e, r, t) {
-  return (r = _toPropertyKey39(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty38(e, r, t) {
+  return (r = _toPropertyKey38(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey39(t) {
-  var i = _toPrimitive39(t, "string");
+function _toPropertyKey38(t) {
+  var i = _toPrimitive38(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive39(t, r) {
+function _toPrimitive38(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -65651,8 +65719,8 @@ function _toPrimitive39(t, r) {
 var GrabTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope, camera) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
-    _defineProperty39(this, "camera", void 0);
-    _defineProperty39(this, "downPoint", null);
+    _defineProperty38(this, "camera", void 0);
+    _defineProperty38(this, "downPoint", null);
     this.camera = camera;
   }
   onMouseDown(event) {
@@ -65675,13 +65743,58 @@ var PointerTool = class extends WhiteboardTool {
   constructor(enableToolEvent, modelGetter, shadowEmitter, scope) {
     super(enableToolEvent, modelGetter, shadowEmitter, scope);
   }
-  onMouseDown(event) {
+  onMouseDown(_event) {
   }
-  onMouseDrag(event) {
+  onMouseDrag(_event) {
   }
   onMouseUp() {
   }
 };
+function _defineProperty39(e, r, t) {
+  return (r = _toPropertyKey39(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey39(t) {
+  var i = _toPrimitive39(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive39(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() {
+    _defineProperty39(this, "tasks", []);
+    _defineProperty39(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 _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;
 }
@@ -65739,16 +65852,18 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
     _defineProperty40(this, "hasPenInput", null);
     _defineProperty40(this, "disableViewModelUpdate", false);
     _defineProperty40(this, "internalResizeObserver", true);
+    _defineProperty40(this, "sequenceExecutor", new SequenceExecutor());
     _defineProperty40(this, "linkTarget", null);
     _defineProperty40(this, "enableToolEvent", () => {
       return !(this.inputType === "pen" && !this.isPenEvent);
     });
     _defineProperty40(this, "handlePageSwitch", (pageId) => {
-      for (const editor of this.editors.values()) {
-        editor.hidden();
-      }
-      this.selectElementsModel.clearSelectElementForSelf();
-      waitUntil(() => this.layers.has(pageId), 3e3).then(() => {
+      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 +65875,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 +65885,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,10 +65897,13 @@ 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) => {
       return this.permissions.hasPermission(flag, this.userId);
@@ -65812,7 +65933,7 @@ 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]);
@@ -65829,7 +65950,7 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
       }
     });
     _defineProperty40(this, "getCurrentRenderableModel", () => {
-      let layerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
+      const layerId = this.userMap(this.userId).get(WhiteboardKeys.currentPage);
       if (!this.layers.has(layerId)) {
         this.emitter.emit("error", 300002, `target page: ${layerId} not found`);
       }
@@ -65910,7 +66031,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);
@@ -65956,6 +66077,7 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
     });
     requestAnimationFrameHook(this.paperScope);
     requestAnimationFrameHook(this.shadowScope);
+    const that = this;
     this.rootElement.setAttribute("data-forge-app", "whiteboard");
     document.body.addEventListener("pointerdown", (evt) => {
       this.isPenEvent = evt.pointerType === "pen";
@@ -66127,7 +66249,6 @@ var WhiteboardApplication = class extends import_forge_room.AbstractApplication
         errorMessage
       });
     });
-    const that = this;
     Object.defineProperty(this.emitter, "tool", {
       get() {
         return that.toolbarModel.currentTool;
@@ -66224,6 +66345,7 @@ 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;
@@ -66475,7 +66597,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);
         }
@@ -66562,6 +66684,9 @@ 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;
   }
@@ -66581,72 +66706,91 @@ 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();
+      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();
   }
 };
 _defineProperty40(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_room6 = 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_room5 = require("@netless/forge-room");
 var ForgeSlidePermissionFlag = /* @__PURE__ */ ((ForgeSlidePermissionFlag2) => {
   ForgeSlidePermissionFlag2[ForgeSlidePermissionFlag2["none"] = 0] = "none";
   ForgeSlidePermissionFlag2[ForgeSlidePermissionFlag2["changeStep"] = 1] = "changeStep";
@@ -66655,58 +66799,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_room5.AbstractApplicationPermissions {
   /**
-   * 解析权限列表组合
-   * @param {number} value - 权限数字值
-   * @return {WhiteboardPermissionFlag[]} - 权限列表
-   */
+     * 解析权限列表组合
+     * @param {number} value - 权限数字值
+     * @return {WhiteboardPermissionFlag[]} - 权限列表
+     */
   resolveFlags(value) {
     return [
       2 /* changePage */,
@@ -66714,53 +66812,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 +66844,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 +66917,47 @@ 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 SideBarView = class extends import_eventemitter315.default {
   root = document.createElement("div");
-  itemList = [];
+  isShow = false;
+  eventsMap = /* @__PURE__ */ new Map();
   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,38 +66966,38 @@ 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;
+  }
   initialize(slideCount, option) {
     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 onMouseOverHandle = () => {
+        itemContainer.style.borderColor = "#ccc";
+      };
+      const onMouseOutHandle = () => {
+        itemContainer.style.borderColor = "transparent";
+      };
+      const onClickHandle = () => {
+        this.emit("pageChange", i);
+      };
+      itemContainer.addEventListener("click", onClickHandle);
+      itemContainer.addEventListener("mouseover", onMouseOverHandle);
+      itemContainer.addEventListener("mouseout", onMouseOutHandle);
+      this.eventsMap.set(itemContainer, [onClickHandle, onMouseOverHandle, onMouseOutHandle]);
       const pageIndex = document.createElement("span");
       pageIndex.textContent = `${i}`;
       pageIndex.style.position = "absolute";
@@ -66939,10 +67015,31 @@ var SideBarView = class extends import_eventemitter317.default {
       this.root.appendChild(itemContainer);
     }
   }
+  hidden() {
+    if (!this.root) {
+      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);
     });
   }
 };
@@ -66981,14 +67078,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_room6.AbstractApplication {
   static applicationName = Slide_APP_NAME;
   name = Slide_APP_NAME;
   emitter = new SlideForge();
@@ -67005,6 +67098,10 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
   currentSlideIndex = 0;
   taskId = "";
   prefix = "";
+  slideCount = 0;
+  lastDispatchUuid = "";
+  syncMessageQueue = [];
+  isSyncing = false;
   constructor() {
     super();
     window.emitter = this.emitter;
@@ -67020,7 +67117,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 +67159,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,16 +67167,13 @@ 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);
-    this.permissions.on("change", (userId, flags, value) => {
-      this.emitter.emit("permissionChange", userId, flags, value);
-    });
     this.emitter.on("renderStart", (pageIndex) => {
       this.footer.prevPageState(pageIndex !== 0);
     });
@@ -67099,6 +67193,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;
@@ -67106,7 +67205,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", {
@@ -67172,6 +67271,13 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
         return this.getImageSize(pageIndex);
       }
     });
+    this.applySlideState();
+  }
+  getPreviewImageUrl(pageIndex) {
+    if (pageIndex < 1 || pageIndex > this.slideCount) {
+      throw new Error("pageIndex out of range");
+    }
+    return `${this.prefix}/${this.taskId}/preview/${pageIndex}.png`;
   }
   async getPreviewImage(imageUrl) {
     const image = fetch(imageUrl);
@@ -67196,13 +67302,13 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
     });
   }
   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_room6.kvStore.getItem(imageUrl);
       preview = result ? JSON.parse(result) : null;
     } catch (e) {
       console.warn("kvStore getItem error", e);
@@ -67211,14 +67317,14 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
       return { width: preview.width, height: preview.height };
     }
     preview = await this.getPreviewImage(imageUrl);
-    await import_forge_room5.kvStore.setItem(imageUrl, JSON.stringify(preview));
+    await import_forge_room6.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_room6.kvStore.getItem(imageUrl);
       preview = result ? JSON.parse(result) : null;
     } catch (e) {
       console.warn("kvStore getItem error", e);
@@ -67227,42 +67333,91 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
       return preview.src;
     }
     preview = await this.getPreviewImage(imageUrl);
-    await import_forge_room5.kvStore.setItem(imageUrl, JSON.stringify(preview));
+    await import_forge_room6.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;
+    if (this.slide.slideState.currentSlideIndex < 0) {
+      await this.slide.receiveSyncHandler(dispatch);
+      return this.nextTick();
+    } else if (!deepEqual(this.slide.slideState, state)) {
+      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.appId = `${option.taskId}_${this.appId}_wb`;
     whiteboardApp.userId = this.userId;
     whiteboardApp.userManager = this.userManager;
     whiteboardApp.applicationManager = this.applicationManager;
     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
@@ -67277,11 +67432,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);
@@ -67305,30 +67462,39 @@ 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.slide.on(import_slide.SLIDE_EVENTS.animateStart, () => {
+      this.sideBar.hidden();
+    });
+    this.slide.on(import_slide.SLIDE_EVENTS.renderError, ({ error, index }) => {
+      if (error.errorType === "CANVAS_CRASH") {
+        this.slide.renderSlide(index);
+      }
+    });
+    this.slide.on(import_slide.SLIDE_EVENTS.renderStart, (slideIndex) => {
       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("renderEnd", (slideIndex) => {
+    this.slide.on(import_slide.SLIDE_EVENTS.renderEnd, (slideIndex) => {
       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);
@@ -67337,7 +67503,7 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
     window.forgeSlide = this;
     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);
     }
@@ -67345,6 +67511,7 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
       return this.userMap(userId);
     });
     this.permissions.on("change", (userId, flags, value) => {
+      this.emitter.emit("permissionChange", userId, flags, value);
       if (this.userId === userId) {
         if (flags.includes(4 /* clickAnim */)) {
           this.slideContainer.style.pointerEvents = "auto";
@@ -67353,8 +67520,31 @@ 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();
+        }
+      });
+    }
     window.__forge_slide = this;
     window.slidePermissions = this.permissions;
     return Promise.resolve(void 0);
@@ -67368,7 +67558,8 @@ var SlideApplication = class extends import_forge_room4.AbstractApplication {
     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: