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

package/dist/index.esm.js

@@ -30,9 +30,9 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   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, module) {
+  "../../node_modules/.pnpm/@netless+slide@1.4.21/node_modules/@netless/slide/lib/Slide.js"(exports, module) {
     module.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() {
         });
@@ -35133,7 +35174,7 @@ void main(void){
 import { AbstractApplication, log as log3 } from "@netless/forge-room";
 import * as Y15 from "yjs";
 import * as Y12 from "yjs";
-import EventEmitter2 from "eventemitter3";
+import EventEmitter from "eventemitter3";
 import { v4 as uuidv4 } from "uuid";
 import * as Y2 from "yjs";
 import * as Y from "yjs";
@@ -35145,23 +35186,23 @@ import * as Y7 from "yjs";
 import * as Y8 from "yjs";
 import * as Y9 from "yjs";
 import * as Y10 from "yjs";
-import EventEmitter from "eventemitter3";
+import { AbstractApplicationPermissions } from "@netless/forge-room";
 import * as Y11 from "yjs";
-import EventEmitter3 from "eventemitter3";
+import EventEmitter2 from "eventemitter3";
 import * as Y13 from "yjs";
-import EventEmitter4 from "eventemitter3";
+import EventEmitter3 from "eventemitter3";
+import EventEmitter5 from "eventemitter3";
+import { EventEmitter as EventEmitter4 } from "eventemitter3";
+import EventEmitter7 from "eventemitter3";
 import EventEmitter6 from "eventemitter3";
-import { EventEmitter as EventEmitter5 } from "eventemitter3";
 import EventEmitter8 from "eventemitter3";
-import EventEmitter7 from "eventemitter3";
-import EventEmitter9 from "eventemitter3";
 import * as Y14 from "yjs";
+import EventEmitter9 from "eventemitter3";
 import EventEmitter10 from "eventemitter3";
-import EventEmitter11 from "eventemitter3";
 import { log } from "@netless/forge-room";
-import EventEmitter12 from "eventemitter3";
+import EventEmitter11 from "eventemitter3";
 import { log as log2 } from "@netless/forge-room";
-import EventEmitter13 from "eventemitter3";
+import EventEmitter12 from "eventemitter3";
 var __create2 = Object.create;
 var __defProp2 = Object.defineProperty;
 var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -58936,7 +58977,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) {
@@ -60050,7 +60091,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;
@@ -60843,6 +60884,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",
@@ -60912,12 +60957,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;
@@ -60926,23 +60974,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) => {
@@ -60976,27 +61024,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();
@@ -61006,8 +61068,8 @@ var CurveModel = class extends ElementModel {
   }
   styleKeys() {
     return {
-      include: ["strokeColor"],
-      exclude: ["fillColor", "dashArray"]
+      include: ["strokeColor", "strokeWidth"],
+      exclude: ["dashArray", "fillColor"]
     };
   }
   onStyleKeyUpdate(key) {
@@ -61017,8 +61079,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;
@@ -61050,14 +61116,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) {
@@ -61083,7 +61147,7 @@ var SelectorModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
   }
 };
 var import_lodash2 = __toESM2(require_lodash(), 1);
@@ -61130,7 +61194,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]();
@@ -61181,6 +61245,8 @@ var SegmentsModel = class extends ElementModel {
       this.root.set("points", new Y4.Array());
     }
   }
+  subDispose() {
+  }
   onVectorUpdate() {
     if (!this.item) {
       return;
@@ -61215,7 +61281,7 @@ var SegmentsModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
   }
 };
 var import_lodash4 = __toESM2(require_lodash(), 1);
@@ -61302,6 +61368,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();
@@ -61375,6 +61444,8 @@ var LineModel = class extends ElementModel {
       this.root.set("tailArrow", "normal");
     }
   }
+  subDispose() {
+  }
   onVectorUpdate() {
     if (!this.item) {
       return;
@@ -61411,7 +61482,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];
     }
@@ -61465,7 +61536,7 @@ var LineModel = class extends ElementModel {
       exclude: ["fillColor"]
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
     this.onVectorUpdate();
   }
 };
@@ -61585,6 +61656,9 @@ var PointTextModel = class extends ElementModel {
       }, 60);
     }
   }
+  subDispose() {
+    this.root.unobserve(this.handleTextPropChange);
+  }
   getInternalMeasurement() {
     if (!this.item) {
       return null;
@@ -61687,6 +61761,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";
@@ -61743,7 +61819,7 @@ var TriangleModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
   }
 };
 function _defineProperty12(e, r, t) {
@@ -61779,6 +61855,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);
@@ -61910,7 +61988,7 @@ var RectangleModel = class extends ElementModel {
       exclude: []
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
   }
 };
 var elementsUndoOrigin = "elementsUndoOrigin";
@@ -62046,9 +62124,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) {
@@ -62202,27 +62282,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";
@@ -62235,117 +62300,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 EventEmitter {
-  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 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) {
@@ -62358,7 +62331,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");
     }
@@ -62366,6 +62339,8 @@ var StraightLineModel = class extends ElementModel {
       this.root.set("points", new Y11.Array());
     }
   }
+  subDispose() {
+  }
   onVectorUpdate() {
     if (!this.item) {
       return;
@@ -62439,7 +62414,7 @@ var StraightLineModel = class extends ElementModel {
       exclude: ["fillColor"]
     };
   }
-  onStyleKeyUpdate(key) {
+  onStyleKeyUpdate(_key) {
     if (!this.item) {
       return;
     }
@@ -62448,14 +62423,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) {
@@ -62465,22 +62440,22 @@ function _toPrimitive17(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var RenderableModel = class extends EventEmitter2 {
+var RenderableModel = class extends EventEmitter {
   get uuid() {
     return uuidv4();
   }
   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);
@@ -62659,7 +62634,7 @@ var RenderableModel = class extends EventEmitter2 {
     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;
     }
@@ -62716,7 +62691,11 @@ var RenderableModel = class extends EventEmitter2 {
     });
   }
   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);
@@ -62755,10 +62734,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);
@@ -62819,7 +62798,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;
@@ -62829,7 +62808,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);
@@ -62839,7 +62818,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;
@@ -62849,14 +62828,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;
 }
@@ -62936,14 +62915,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) {
@@ -62955,7 +62934,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;
@@ -62981,14 +62960,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) {
@@ -63001,22 +62980,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) {
@@ -63050,14 +63047,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) {
@@ -63070,12 +63067,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();
@@ -63095,14 +63095,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) {
@@ -63121,7 +63121,7 @@ var TOOLBAR_KEYS = {
   strokeWidth: "strokeWidth",
   dashArray: "dashArray"
 };
-var ToolbarModel = class extends EventEmitter3 {
+var ToolbarModel = class extends EventEmitter2 {
   get currentTool() {
     return this.root.get(TOOLBAR_KEYS.tool);
   }
@@ -63166,8 +63166,8 @@ var ToolbarModel = class extends EventEmitter3 {
   }
   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", {
@@ -63190,15 +63190,19 @@ var ToolbarModel = class extends EventEmitter3 {
       }
     });
   }
+  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) {
@@ -63211,16 +63215,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();
@@ -63276,14 +63283,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) {
@@ -63293,7 +63300,7 @@ function _toPrimitive23(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var SelectElementsModel = class extends EventEmitter4 {
+var SelectElementsModel = class extends EventEmitter3 {
   get hasEditSelfPermission() {
     return this.hasPermission(WhiteboardPermissionFlag.editSelf);
   }
@@ -63302,24 +63309,28 @@ var SelectElementsModel = class extends EventEmitter4 {
   }
   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");
@@ -63335,6 +63346,9 @@ var SelectElementsModel = class extends EventEmitter4 {
       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);
     });
@@ -63389,25 +63403,22 @@ var SelectElementsModel = class extends EventEmitter4 {
     });
   }
   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) {
@@ -63417,31 +63428,31 @@ function _toPrimitive24(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var TextEditor = class extends EventEmitter5 {
+var TextEditor = class extends EventEmitter4 {
   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();
@@ -63450,12 +63461,12 @@ var TextEditor = class extends EventEmitter5 {
     });
     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);
@@ -63531,14 +63542,14 @@ var TextEditor = class extends EventEmitter5 {
     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) {
@@ -63558,7 +63569,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 EventEmitter6 {
+var Bounds = class extends EventEmitter5 {
   get width() {
     return this.maxX - this.minX;
   }
@@ -63573,12 +63584,12 @@ var Bounds = class extends EventEmitter6 {
   }
   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;
   }
@@ -63697,35 +63708,35 @@ var Bounds = class extends EventEmitter6 {
     this.maxY = maxY;
   }
 };
-var Editor = class extends EventEmitter6 {
+var Editor = class extends EventEmitter5 {
   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;
@@ -63735,7 +63746,7 @@ var Editor = class extends EventEmitter6 {
         this.targets.forEach((target) => target.appendPointsMatrix(matrix));
       }
     });
-    _defineProperty25(this, "handlePointerDown", (evt) => {
+    _defineProperty24(this, "handlePointerDown", (evt) => {
       if (!evt.target) {
         return;
       }
@@ -63791,14 +63802,14 @@ var Editor = class extends EventEmitter6 {
         };
       }
     });
-    _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,
@@ -63823,7 +63834,7 @@ var Editor = class extends EventEmitter6 {
       }
       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 = {
@@ -63842,7 +63853,7 @@ var Editor = class extends EventEmitter6 {
         }
       }
     });
-    _defineProperty25(this, "handlePointerUp", (evt) => {
+    _defineProperty24(this, "handlePointerUp", (evt) => {
       evt.preventDefault();
       this.resetShadow();
       this.shadowEmitter.setActive(false);
@@ -63859,7 +63870,7 @@ var Editor = class extends EventEmitter6 {
       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";
@@ -63867,7 +63878,7 @@ var Editor = class extends EventEmitter6 {
         }
       }
     });
-    _defineProperty25(this, "updateBounds", () => {
+    _defineProperty24(this, "updateBounds", () => {
       let minX = Number.MAX_VALUE;
       let maxX = -Number.MAX_VALUE;
       let minY = Number.MAX_VALUE;
@@ -63900,7 +63911,7 @@ var Editor = class extends EventEmitter6 {
     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";
@@ -63921,7 +63932,7 @@ var Editor = class extends EventEmitter6 {
     } 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";
     }
@@ -64117,14 +64128,14 @@ var Editor = class extends EventEmitter6 {
     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) {
@@ -64137,13 +64148,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;
@@ -64152,7 +64163,7 @@ var TextTool = class extends WhiteboardTool {
   onMouseDown(event) {
     this.from = event.point.clone();
   }
-  onMouseDrag(event) {
+  onMouseDrag(_event) {
   }
   onMouseUp(event) {
     this.to = event.point.clone();
@@ -64164,6 +64175,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;
@@ -64202,14 +64216,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) {
@@ -64219,14 +64233,14 @@ function _toPrimitive27(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var Gesture = class extends EventEmitter7 {
+var Gesture = class extends EventEmitter6 {
   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();
@@ -64239,7 +64253,7 @@ var Gesture = class extends EventEmitter7 {
       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();
@@ -64270,7 +64284,7 @@ var Gesture = class extends EventEmitter7 {
         this.lastPoint = null;
       }
     });
-    _defineProperty27(this, "onTouchEnd", () => {
+    _defineProperty26(this, "onTouchEnd", () => {
       this.lastVector = null;
       this.lastPoint = null;
     });
@@ -64281,14 +64295,14 @@ var Gesture = class extends EventEmitter7 {
     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) {
@@ -64298,7 +64312,7 @@ function _toPrimitive28(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var Camera = class extends EventEmitter8 {
+var Camera = class extends EventEmitter7 {
   get inherentMatrix() {
     const inherentMatrix = new this.scope.Matrix();
     inherentMatrix.scale(this.inherentScale, [0, 0]);
@@ -64310,31 +64324,31 @@ var Camera = class extends EventEmitter8 {
   }
   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") {
@@ -64351,20 +64365,23 @@ var Camera = class extends EventEmitter8 {
         }
       }
     });
-    _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") {
@@ -64391,7 +64408,7 @@ var Camera = class extends EventEmitter8 {
         }
       }
     });
-    _defineProperty28(this, "handleWheel", (evt) => {
+    _defineProperty27(this, "handleWheel", (evt) => {
       if (!this.enableByMouse) {
         return;
       }
@@ -64440,7 +64457,7 @@ var Camera = class extends EventEmitter8 {
     });
     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;
@@ -64465,6 +64482,9 @@ var Camera = class extends EventEmitter8 {
       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);
     });
@@ -64501,7 +64521,7 @@ var Camera = class extends EventEmitter8 {
       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);
     }
   }
@@ -64511,6 +64531,9 @@ var Camera = class extends EventEmitter8 {
   updateInherentScale(scale) {
     this.inherentScale = scale;
   }
+  getInherentScale() {
+    return this.inherentScale;
+  }
   getActiveMatrix() {
     const cameraMode = this.requestUserMap(this.userManager.selfId).get(WhiteboardKeys.cameraMode);
     let matrixValue;
@@ -64653,15 +64676,28 @@ var Camera = class extends EventEmitter8 {
       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) {
@@ -64674,12 +64710,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();
@@ -64703,14 +64742,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) {
@@ -64723,12 +64762,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();
@@ -64748,14 +64790,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) {
@@ -64765,63 +64807,63 @@ function _toPrimitive31(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var Whiteboard = class extends EventEmitter9 {
+var Whiteboard = class extends EventEmitter8 {
   // 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) {
@@ -64834,14 +64876,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) {
@@ -64863,21 +64908,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) {
@@ -64887,7 +64932,7 @@ function _toPrimitive33(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var TrashedElementsModel = class extends EventEmitter10 {
+var TrashedElementsModel = class extends EventEmitter9 {
   get hasDeleteSelfPermission() {
     return this.hasPermission(WhiteboardPermissionFlag.deleteSelf);
   }
@@ -64896,20 +64941,23 @@ var TrashedElementsModel = class extends EventEmitter10 {
   }
   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);
     });
@@ -64921,6 +64969,9 @@ var TrashedElementsModel = class extends EventEmitter10 {
       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);
     });
@@ -64975,25 +65026,22 @@ var TrashedElementsModel = class extends EventEmitter10 {
     });
   }
   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) {
@@ -65006,12 +65054,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) {
@@ -65023,20 +65074,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) {
@@ -65046,25 +65097,25 @@ function _toPrimitive35(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var PageModel = class extends EventEmitter11 {
+var PageModel = class extends EventEmitter10 {
   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);
@@ -65082,7 +65133,7 @@ var PageModel = class extends EventEmitter11 {
         }
       }
     });
-    _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);
@@ -65099,7 +65150,7 @@ var PageModel = class extends EventEmitter11 {
         }
       }
     });
-    _defineProperty35(this, "handlePageMapChange", () => {
+    _defineProperty34(this, "handlePageMapChange", () => {
       this.emit("pagesChange", Array.from(this.pageMap.keys()));
     });
     this.hasPermission = hasPermission;
@@ -65141,11 +65192,11 @@ var PageModel = class extends EventEmitter11 {
     }
     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;
@@ -65197,23 +65248,32 @@ var PageModel = class extends EventEmitter11 {
       }
     }
   }
+  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) {
@@ -65223,19 +65283,19 @@ function _toPrimitive36(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var IndexedNavigation = class extends EventEmitter12 {
+var IndexedNavigation = class extends EventEmitter11 {
   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) {
-      log2(`indexed navigation confusion`, {
+      log2("indexed navigation confusion", {
         list: JSON.stringify(this.list)
       }, "error");
-      throw new Error(`indexed navigation confusion`);
+      throw new Error("indexed navigation confusion");
     }
     return headId;
   }
@@ -65250,13 +65310,13 @@ var IndexedNavigation = class extends EventEmitter12 {
   }
   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);
@@ -65311,8 +65371,8 @@ var IndexedNavigation = class extends EventEmitter12 {
   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);
@@ -65321,15 +65381,15 @@ var IndexedNavigation = class extends EventEmitter12 {
     });
   }
   /**
-   * 获取总页数
-   * @returns {number}
-   */
+     * 获取总页数
+     * @returns {number}
+     */
   get pageCount() {
     return this.idList.length;
   }
   /**
-   * 获取当前页索引
-   */
+     * 获取当前页索引
+     */
   get currentPageIndex() {
     const userPageId = this.userMap.get(WhiteboardKeys.currentPage);
     return this.getPageIndex(userPageId);
@@ -65349,9 +65409,9 @@ var IndexedNavigation = class extends EventEmitter12 {
     return i;
   }
   /**
-   * 获取指定索引对应的 pageId
-   * @param {number} index
-   */
+     * 获取指定索引对应的 pageId
+     * @param {number} index
+     */
   getPageId(index) {
     const firstKey = this.head;
     if (firstKey) {
@@ -65373,20 +65433,20 @@ var IndexedNavigation = class extends EventEmitter12 {
   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(() => {
@@ -65415,11 +65475,11 @@ var IndexedNavigation = class extends EventEmitter12 {
     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);
@@ -65428,7 +65488,7 @@ var IndexedNavigation = class extends EventEmitter12 {
     }
     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];
@@ -65471,8 +65531,8 @@ var IndexedNavigation = class extends EventEmitter12 {
     return this.pageCount;
   }
   /**
-   * 跳转至上一页, 并返回跳转后的页面索引.
-   */
+     * 跳转至上一页, 并返回跳转后的页面索引.
+     */
   prevPage() {
     const currentPageId = this.userMap.get(WhiteboardKeys.currentPage);
     const data = this.list[currentPageId];
@@ -65484,8 +65544,8 @@ var IndexedNavigation = class extends EventEmitter12 {
     return nextIndex;
   }
   /**
-   * 跳转至下一页, 并返回跳转后的页面索引.
-   */
+     * 跳转至下一页, 并返回跳转后的页面索引.
+     */
   nextPage() {
     const currentPageId = this.userMap.get(WhiteboardKeys.currentPage);
     const data = this.list[currentPageId];
@@ -65497,16 +65557,16 @@ var IndexedNavigation = class extends EventEmitter12 {
     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);
@@ -65546,15 +65606,20 @@ var IndexedNavigation = class extends EventEmitter12 {
       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) {
@@ -65564,10 +65629,10 @@ function _toPrimitive37(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var ShadowEmitter = class extends EventEmitter13 {
+var ShadowEmitter = class extends EventEmitter12 {
   constructor(userMap) {
     super();
-    _defineProperty37(this, "userMap", void 0);
+    _defineProperty36(this, "userMap", void 0);
     this.userMap = userMap;
   }
   getActive() {
@@ -65577,14 +65642,14 @@ var ShadowEmitter = class extends EventEmitter13 {
     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) {
@@ -65597,12 +65662,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();
@@ -65622,14 +65690,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) {
@@ -65642,8 +65710,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) {
@@ -65666,13 +65734,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;
 }
@@ -65730,16 +65843,18 @@ var WhiteboardApplication = class extends 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);
@@ -65751,6 +65866,7 @@ var WhiteboardApplication = class extends 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) {
@@ -65760,9 +65876,11 @@ var WhiteboardApplication = class extends AbstractApplication {
               }
             }
           }
+        } else {
+          console.warn(`[@netless/forge-whiteboard] page ${pageId} not found`);
+          log3(`[@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);
@@ -65770,10 +65888,13 @@ var WhiteboardApplication = class extends 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`);
+          log3(`[@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);
@@ -65803,7 +65924,7 @@ var WhiteboardApplication = class extends 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]);
@@ -65820,7 +65941,7 @@ var WhiteboardApplication = class extends 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`);
       }
@@ -65901,7 +66022,7 @@ var WhiteboardApplication = class extends 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);
@@ -65947,6 +66068,7 @@ var WhiteboardApplication = class extends 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";
@@ -66118,7 +66240,6 @@ var WhiteboardApplication = class extends AbstractApplication {
         errorMessage
       });
     });
-    const that = this;
     Object.defineProperty(this.emitter, "tool", {
       get() {
         return that.toolbarModel.currentTool;
@@ -66215,6 +66336,7 @@ var WhiteboardApplication = class extends 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;
@@ -66466,7 +66588,7 @@ var WhiteboardApplication = class extends 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);
         }
@@ -66553,6 +66675,9 @@ var WhiteboardApplication = class extends AbstractApplication {
     const size = this.paperScope.view.viewSize;
     return [size.width, size.height];
   }
+  getInherentScale() {
+    return this.camera.getInherentScale();
+  }
   updateInternalResizeObserverStatus(value) {
     this.internalResizeObserver = value;
   }
@@ -66572,72 +66697,91 @@ var WhiteboardApplication = class extends 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());
-import { AbstractApplication as AbstractApplication2 } from "@netless/forge-room";
+import { AbstractApplication as AbstractApplication2, kvStore } from "@netless/forge-room";
 
 // src/Slide.ts
-import EventEmitter14 from "eventemitter3";
-var SlideForge = class extends EventEmitter14 {
+import EventEmitter13 from "eventemitter3";
+var SlideForge = class extends EventEmitter13 {
   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
-import EventEmitter15 from "eventemitter3";
+import { AbstractApplicationPermissions as AbstractApplicationPermissions2 } from "@netless/forge-room";
 var ForgeSlidePermissionFlag = /* @__PURE__ */ ((ForgeSlidePermissionFlag2) => {
   ForgeSlidePermissionFlag2[ForgeSlidePermissionFlag2["none"] = 0] = "none";
   ForgeSlidePermissionFlag2[ForgeSlidePermissionFlag2["changeStep"] = 1] = "changeStep";
@@ -66646,58 +66790,12 @@ var ForgeSlidePermissionFlag = /* @__PURE__ */ ((ForgeSlidePermissionFlag2) => {
   ForgeSlidePermissionFlag2[ForgeSlidePermissionFlag2["all"] = 7] = "all";
   return ForgeSlidePermissionFlag2;
 })(ForgeSlidePermissionFlag || {});
-var ForgeSlidePermissions = class extends EventEmitter15 {
-  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 AbstractApplicationPermissions2 {
   /**
-   * 解析权限列表组合
-   * @param {number} value - 权限数字值
-   * @return {WhiteboardPermissionFlag[]} - 权限列表
-   */
+     * 解析权限列表组合
+     * @param {number} value - 权限数字值
+     * @return {WhiteboardPermissionFlag[]} - 权限列表
+     */
   resolveFlags(value) {
     return [
       2 /* changePage */,
@@ -66705,53 +66803,10 @@ var ForgeSlidePermissions = class extends EventEmitter15 {
       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
-import EventEmitter16 from "eventemitter3";
+// src/FooterView.ts
+import EventEmitter14 from "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">
@@ -66780,18 +66835,20 @@ var Icons = {
   sideBar
 };
 
-// src/FoorerView.ts
+// src/FooterView.ts
 var EM_COLOR = "#8C8C8C";
-var FooterView = class extends EventEmitter16 {
+var FooterView = class extends EventEmitter14 {
   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";
@@ -66851,28 +66908,47 @@ var FooterView = class extends EventEmitter16 {
     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
-import EventEmitter17 from "eventemitter3";
-var SideBarView = class extends EventEmitter17 {
+import EventEmitter15 from "eventemitter3";
+var SideBarView = class extends EventEmitter15 {
   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";
@@ -66881,38 +66957,38 @@ var SideBarView = class extends EventEmitter17 {
     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";
@@ -66930,10 +67006,31 @@ var SideBarView = class extends EventEmitter17 {
       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);
     });
   }
 };
@@ -66972,12 +67069,8 @@ function arrayEqual(arr1, arr2) {
   }
   return true;
 }
-async function delay2(time) {
-  return new Promise((resolve) => setTimeout(resolve, time));
-}
 
 // src/SlideApplication.ts
-import { kvStore } from "@netless/forge-room";
 var Slide_APP_NAME = "forge_slide";
 var SlideApplication = class extends AbstractApplication2 {
   static applicationName = Slide_APP_NAME;
@@ -66996,6 +67089,10 @@ var SlideApplication = class extends AbstractApplication2 {
   currentSlideIndex = 0;
   taskId = "";
   prefix = "";
+  slideCount = 0;
+  lastDispatchUuid = "";
+  syncMessageQueue = [];
+  isSyncing = false;
   constructor() {
     super();
     window.emitter = this.emitter;
@@ -67011,7 +67108,7 @@ var SlideApplication = class extends AbstractApplication2 {
     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);
       }
     });
@@ -67053,7 +67150,7 @@ var SlideApplication = class extends AbstractApplication2 {
       if (!this.permissions.hasPermission(2 /* changePage */)) {
         return;
       }
-      if (this.currentSlideIndex < this.slide.slideCount) {
+      if (this.currentSlideIndex < this.slideCount) {
         this.slide.renderSlide(this.currentSlideIndex + 1);
       }
     });
@@ -67061,16 +67158,13 @@ var SlideApplication = class extends AbstractApplication2 {
       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);
     });
@@ -67090,6 +67184,11 @@ var SlideApplication = class extends AbstractApplication2 {
         return that.footer.root;
       }
     });
+    Object.defineProperty(this.emitter, "sidebarView", {
+      get() {
+        return that.sideBar.root;
+      }
+    });
     Object.defineProperty(this.emitter, "pageIndex", {
       get() {
         return that.currentSlideIndex;
@@ -67097,7 +67196,7 @@ var SlideApplication = class extends AbstractApplication2 {
     });
     Object.defineProperty(this.emitter, "pageCount", {
       get() {
-        return that.slide.slideCount;
+        return that.slideCount;
       }
     });
     Object.defineProperty(this.emitter, "goto", {
@@ -67163,6 +67262,13 @@ var SlideApplication = class extends AbstractApplication2 {
         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);
@@ -67187,10 +67293,10 @@ var SlideApplication = class extends AbstractApplication2 {
     });
   }
   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 kvStore.getItem(imageUrl);
@@ -67206,7 +67312,7 @@ var SlideApplication = class extends AbstractApplication2 {
     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 kvStore.getItem(imageUrl);
@@ -67221,39 +67327,88 @@ var SlideApplication = class extends AbstractApplication2 {
     await 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
@@ -67268,11 +67423,13 @@ var SlideApplication = class extends AbstractApplication2 {
     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);
@@ -67296,30 +67453,39 @@ var SlideApplication = class extends AbstractApplication2 {
     });
     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);
@@ -67328,7 +67494,7 @@ var SlideApplication = class extends AbstractApplication2 {
     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);
     }
@@ -67336,6 +67502,7 @@ var SlideApplication = class extends AbstractApplication2 {
       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";
@@ -67344,8 +67511,31 @@ var SlideApplication = class extends AbstractApplication2 {
         }
       }
     });
-    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);
@@ -67359,7 +67549,8 @@ var SlideApplication = class extends AbstractApplication2 {
     this.slide.destroy();
     this.sideBar.dispose();
     this.getMap(this.name).unobserve(this.onSlideEventHandler);
-    return Promise.resolve(void 0);
+    this.permissions.dispose();
+    this.footer.dispose();
   }
 };
 export {