@netless/forge-imagery-doc 0.1.2 → 0.1.3-appha.1

package/dist/imagery-doc.esm.js

@@ -86,7 +86,7 @@ var LazyImage = class {
     const blob = await response.blob();
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
-      reader.onload = (e) => {
+      reader.onload = (_e) => {
         kvStore.setItem(this.src, reader.result);
         resolve(reader.result);
       };
@@ -111,24 +111,7 @@ var LazyImage = class {
 };
 
 // src/ImageryDocPermissions.ts
-import EventEmitter2 from "eventemitter3";
-function _defineProperty3(e, r, t) {
-  return (r = _toPropertyKey3(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
-}
-function _toPropertyKey3(t) {
-  var i = _toPrimitive3(t, "string");
-  return "symbol" == typeof i ? i : i + "";
-}
-function _toPrimitive3(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);
-}
+import { AbstractApplicationPermissions } from "@netless/forge-room";
 var ImageryDocPermissionFlag = function(ImageryDocPermissionFlag2) {
   ImageryDocPermissionFlag2[ImageryDocPermissionFlag2["none"] = 0] = "none";
   ImageryDocPermissionFlag2[ImageryDocPermissionFlag2["switchPage"] = 1] = "switchPage";
@@ -137,104 +120,15 @@ var ImageryDocPermissionFlag = function(ImageryDocPermissionFlag2) {
   ImageryDocPermissionFlag2[ImageryDocPermissionFlag2["all"] = ImageryDocPermissionFlag2.switchPage | ImageryDocPermissionFlag2.camera | ImageryDocPermissionFlag2.sideBar] = "all";
   return ImageryDocPermissionFlag2;
 }({});
-var ImageryDocPermissions = class extends EventEmitter2 {
-  constructor(userManager, requestUserMap) {
-    super();
-    _defineProperty3(this, "requestUserMap", void 0);
-    _defineProperty3(this, "userManager", void 0);
-    _defineProperty3(this, "observers", /* @__PURE__ */ new Map());
-    _defineProperty3(this, "handleUserLeave", (user) => {
-      const cb = this.observers.get(user.id);
-      if (cb) {
-        this.requestUserMap(user.id).unobserve(cb);
-      }
-    });
-    _defineProperty3(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) {
-    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 ImageryDocPermissions = class extends AbstractApplicationPermissions {
   /**
-   * 解析权限列表组合
-   * @param {number} value - 权限数字值
-   * @return {WhiteboardPermissionFlag[]} - 权限列表
-   */
+     * 解析权限列表组合
+     * @param {number} value - 权限数字值
+     * @return {WhiteboardPermissionFlag[]} - 权限列表
+     */
   resolveFlags(value) {
     return [ImageryDocPermissionFlag.switchPage, ImageryDocPermissionFlag.sideBar, ImageryDocPermissionFlag.camera].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/icons.ts
@@ -248,14 +142,14 @@ var Icons = {
 };
 
 // src/FooterView.ts
-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;
+function _defineProperty3(e, r, t) {
+  return (r = _toPropertyKey3(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey4(t) {
-  var i = _toPrimitive4(t, "string");
+function _toPropertyKey3(t) {
+  var i = _toPrimitive3(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive4(t, r) {
+function _toPrimitive3(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -268,14 +162,23 @@ function _toPrimitive4(t, r) {
 var EM_COLOR = "#8C8C8C";
 var FooterView = class {
   constructor(imageryDoc) {
-    _defineProperty4(this, "root", void 0);
-    _defineProperty4(this, "prevPage", void 0);
-    _defineProperty4(this, "nextPage", void 0);
-    _defineProperty4(this, "sideBarToggle", void 0);
-    _defineProperty4(this, "sideBarContainer", document.createElement("div"));
-    _defineProperty4(this, "isSlideBarVisible", false);
-    _defineProperty4(this, "imageryDoc", void 0);
-    _defineProperty4(this, "handleSideBarClick", (evt) => {
+    _defineProperty3(this, "root", void 0);
+    _defineProperty3(this, "prevPage", void 0);
+    _defineProperty3(this, "nextPage", void 0);
+    _defineProperty3(this, "sideBarToggle", void 0);
+    _defineProperty3(this, "sideBarContainer", document.createElement("div"));
+    _defineProperty3(this, "navigator", document.createElement("div"));
+    _defineProperty3(this, "navigatorIndex", document.createElement("span"));
+    _defineProperty3(this, "navigatorTotal", document.createElement("span"));
+    _defineProperty3(this, "isSlideBarVisible", false);
+    _defineProperty3(this, "imageryDoc", void 0);
+    _defineProperty3(this, "updateIndex", () => {
+      this.navigatorIndex.textContent = `${this.imageryDoc.pageIndex + 1}`;
+    });
+    _defineProperty3(this, "updateTotal", () => {
+      this.navigatorTotal.textContent = `/${this.imageryDoc.pageCount}`;
+    });
+    _defineProperty3(this, "handleSideBarClick", (evt) => {
       const target = evt.target;
       const targetIndex = target.getAttribute("data-doc-index");
       if (targetIndex) {
@@ -310,6 +213,9 @@ var FooterView = class {
     this.root.appendChild(this.prevPage);
     this.root.appendChild(this.nextPage);
     this.root.appendChild(this.createSpacer());
+    this.createNavigator();
+    this.imageryDoc.addListener("renderEnd", this.updateIndex);
+    this.imageryDoc.addListener("ready", this.updateTotal);
   }
   prevPageState(enable) {
     if (enable) {
@@ -352,6 +258,20 @@ var FooterView = class {
     });
     return icon;
   }
+  createNavigator() {
+    this.navigator.style.height = "24px";
+    this.navigator.style.padding = "12px";
+    this.navigator.style.display = "flex";
+    this.navigator.style.alignItems = "center";
+    this.navigator.style.justifyContent = "center";
+    this.navigator.style.fontSize = "12px";
+    this.navigator.style.color = "#585858";
+    this.navigatorIndex.textContent = `${this.imageryDoc.pageIndex + 1}`;
+    this.navigatorTotal.textContent = `/${this.imageryDoc.pageCount}`;
+    this.navigator.appendChild(this.navigatorIndex);
+    this.navigator.appendChild(this.navigatorTotal);
+    this.root.appendChild(this.navigator);
+  }
   createSideBar() {
     if (this.imageryDoc.pageCount === 0) {
       return;
@@ -363,7 +283,7 @@ var FooterView = class {
     this.sideBarContainer.style.maxWidth = "180px";
     this.sideBarContainer.style.height = "calc(100% - 24px)";
     this.sideBarContainer.style.position = "absolute";
-    this.sideBarContainer.style.bottom = "24px";
+    this.sideBarContainer.style.bottom = "25px";
     this.sideBarContainer.style.left = "0";
     this.sideBarContainer.style.fontSize = "0px";
     this.sideBarContainer.style.overflow = "auto";
@@ -378,7 +298,7 @@ var FooterView = class {
       reviewIndex.textContent = `${i + 1}`;
       const reviewImg = document.createElement("img");
       reviewImg.setAttribute("data-doc-index", `${i}`);
-      reviewImg.style.cssText = "width:80%;margin:0 10%;box-shadow:1px 1px 5px #9e9e9e";
+      reviewImg.style.cssText = "width:80%;margin:0 10%;box-shadow:1px 1px 5px #f9f9fc";
       this.imageryDoc.imgContent(i).then((base64Data) => {
         reviewImg.src = base64Data;
       });
@@ -391,15 +311,15 @@ var FooterView = class {
 };
 
 // src/InfinityScroll.ts
-import EventEmitter3 from "eventemitter3";
-function _defineProperty5(e, r, t) {
-  return (r = _toPropertyKey5(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+import EventEmitter2 from "eventemitter3";
+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;
 }
-function _toPropertyKey5(t) {
-  var i = _toPrimitive5(t, "string");
+function _toPropertyKey4(t) {
+  var i = _toPrimitive4(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive5(t, r) {
+function _toPrimitive4(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -409,16 +329,16 @@ function _toPrimitive5(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var InfinityScroll = class extends EventEmitter3 {
+var InfinityScroll = class extends EventEmitter2 {
   constructor(view) {
     super();
-    _defineProperty5(this, "view", void 0);
-    _defineProperty5(this, "lastDelta", {
+    _defineProperty4(this, "view", void 0);
+    _defineProperty4(this, "lastDelta", {
       x: 0,
       y: 0
     });
-    _defineProperty5(this, "lastTriggerTime", 0);
-    _defineProperty5(this, "handleWheel", (evt) => {
+    _defineProperty4(this, "lastTriggerTime", 0);
+    _defineProperty4(this, "handleWheel", (evt) => {
       evt.preventDefault();
       evt.stopImmediatePropagation();
       evt.stopPropagation();
@@ -458,6 +378,7 @@ var InfinityScroll = class extends EventEmitter3 {
   }
   dispose() {
     this.view.removeEventListener("wheel", this.handleWheel);
+    this.removeAllListeners();
   }
 };
 
@@ -470,14 +391,14 @@ var ContainerKeys = {
 };
 
 // src/ContinuousContainer.ts
-function _defineProperty6(e, r, t) {
-  return (r = _toPropertyKey6(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty5(e, r, t) {
+  return (r = _toPropertyKey5(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey6(t) {
-  var i = _toPrimitive6(t, "string");
+function _toPropertyKey5(t) {
+  var i = _toPrimitive5(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive6(t, r) {
+function _toPrimitive5(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -504,26 +425,26 @@ var ContinuousContainer = class {
     return this.images.length - 1;
   }
   constructor(map, whiteboardApp, parentView, imageDoc) {
-    _defineProperty6(this, "view", void 0);
-    _defineProperty6(this, "parentView", void 0);
-    _defineProperty6(this, "resizeObserver", void 0);
-    _defineProperty6(this, "images", []);
-    _defineProperty6(this, "scroll", void 0);
-    _defineProperty6(this, "map", void 0);
-    _defineProperty6(this, "whiteboardApp", void 0);
-    _defineProperty6(this, "imageDoc", void 0);
-    _defineProperty6(this, "totalHeight", 0);
-    _defineProperty6(this, "localScale", 1);
-    _defineProperty6(this, "handleMapChange", (event) => {
+    _defineProperty5(this, "view", void 0);
+    _defineProperty5(this, "parentView", void 0);
+    _defineProperty5(this, "resizeObserver", void 0);
+    _defineProperty5(this, "images", []);
+    _defineProperty5(this, "scroll", void 0);
+    _defineProperty5(this, "map", void 0);
+    _defineProperty5(this, "whiteboardApp", void 0);
+    _defineProperty5(this, "imageDoc", void 0);
+    _defineProperty5(this, "totalHeight", 0);
+    _defineProperty5(this, "localScale", 1);
+    _defineProperty5(this, "handleMapChange", (event) => {
       if (event.keysChanged.has(ContainerKeys.translateY)) {
         this.updateSyncedTransform();
       }
     });
-    _defineProperty6(this, "handleResize", () => {
+    _defineProperty5(this, "handleResize", () => {
       const bound = this.view.getBoundingClientRect();
       let scaledHeight = 0;
       for (const image of this.images) {
-        let scale = bound.width / image.width;
+        const scale = bound.width / image.width;
         image.scale(scale);
         scaledHeight += image.height * scale;
       }
@@ -532,7 +453,7 @@ var ContinuousContainer = class {
       this.whiteboardApp.adjustByOutFrame(bound.width, bound.height);
       this.updateSyncedTransform();
     });
-    _defineProperty6(this, "updateSyncedTransform", () => {
+    _defineProperty5(this, "updateSyncedTransform", () => {
       const bounds = this.view.getBoundingClientRect();
       const maxTy = this.totalHeight * this.localScale - bounds.height;
       let ty = this.translateY * this.totalHeight * this.localScale;
@@ -542,7 +463,6 @@ var ContinuousContainer = class {
       this.whiteboardApp.emitter.resetCamera();
       this.whiteboardApp.emitter.translateCamera(0, -ty);
       this.whiteboardApp.emitter.scaleCamera(this.localScale, "top-left");
-      console.log("localScale: ", this.localScale, this.translateY);
       this.handleGoto(this.pageIndex);
     });
     this.imageDoc = imageDoc;
@@ -619,14 +539,15 @@ var ContinuousContainer = class {
 };
 
 // src/SingleContainer.ts
-function _defineProperty7(e, r, t) {
-  return (r = _toPropertyKey7(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+import { removeObserver } from "@netless/forge-room";
+function _defineProperty6(e, r, t) {
+  return (r = _toPropertyKey6(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey7(t) {
-  var i = _toPrimitive7(t, "string");
+function _toPropertyKey6(t) {
+  var i = _toPrimitive6(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive7(t, r) {
+function _toPrimitive6(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -667,26 +588,25 @@ var SingleContainer = class {
     return this.map.get(ContainerKeys.pageIndex);
   }
   constructor(map, whiteboardApp, parentView, imageDoc) {
-    _defineProperty7(this, "view", void 0);
-    _defineProperty7(this, "parentView", void 0);
-    _defineProperty7(this, "resizeObserver", void 0);
-    _defineProperty7(this, "images", []);
-    _defineProperty7(this, "currentImage", null);
-    _defineProperty7(this, "scroll", void 0);
-    _defineProperty7(this, "map", void 0);
-    _defineProperty7(this, "whiteboardApp", void 0);
-    _defineProperty7(this, "timeoutId", null);
-    _defineProperty7(this, "imageDoc", void 0);
-    _defineProperty7(this, "handleMapChange", (event) => {
+    _defineProperty6(this, "view", void 0);
+    _defineProperty6(this, "parentView", void 0);
+    _defineProperty6(this, "resizeObserver", void 0);
+    _defineProperty6(this, "images", []);
+    _defineProperty6(this, "currentImage", null);
+    _defineProperty6(this, "scroll", void 0);
+    _defineProperty6(this, "map", void 0);
+    _defineProperty6(this, "whiteboardApp", void 0);
+    _defineProperty6(this, "imageDoc", void 0);
+    _defineProperty6(this, "handleMapChange", (event) => {
       if (event.keysChanged.has(ContainerKeys.scale) || event.keysChanged.has(ContainerKeys.translateX) || event.keysChanged.has(ContainerKeys.translateY)) {
         this.updateSyncedTransform();
       }
       if (event.keysChanged.has(ContainerKeys.pageIndex)) {
-        this.handleGoto(this.pageIndex).catch((error) => {
+        this.handleGoto(this.pageIndex).catch((_error) => {
         });
       }
     });
-    _defineProperty7(this, "handleResize", () => {
+    _defineProperty6(this, "handleResize", () => {
       const bound = this.parentView.getBoundingClientRect();
       if (this.currentImage) {
         let scale = bound.width / this.currentImage.width;
@@ -697,9 +617,10 @@ var SingleContainer = class {
         const ty = Math.round((bound.height - this.currentImage.height * scale) / 2 / scale);
         this.currentImage.view.style.transform = `scale(${scale}) translate(${tx}px, ${ty}px)`;
         this.updateSyncedTransform();
+        this.resetTranslateOnResize();
       }
     });
-    _defineProperty7(this, "updateSyncedTransform", () => {
+    _defineProperty6(this, "updateSyncedTransform", () => {
       if (!this.currentImage) {
         return;
       }
@@ -707,22 +628,11 @@ var SingleContainer = class {
       const tx = -this.translateX * parentBounds.width / this.scale;
       const ty = -this.translateY * parentBounds.height / this.scale;
       this.view.style.transform = `scale(${this.scale}) translate(${tx}px, ${ty}px)`;
-      const whiteboardView = this.whiteboardApp.emitter.view;
-      whiteboardView.style.width = `${parentBounds.width}px`;
-      whiteboardView.style.height = `${parentBounds.height}px`;
-      whiteboardView.style.top = "0";
-      whiteboardView.style.left = "0";
-      whiteboardView.style.transform = `scale(${this.scale}) translate(${tx}px, ${ty}px)`;
-      this.whiteboardApp.adjustByOutFrame(parentBounds.width, parentBounds.height);
-      window.clearTimeout(this.timeoutId);
-      this.timeoutId = window.setTimeout(() => {
-        whiteboardView.style.width = `${parentBounds.width * this.scale}px`;
-        whiteboardView.style.height = `${parentBounds.height * this.scale}px`;
-        whiteboardView.style.top = `${-(this.scale - 1) * parentBounds.height / 2 + ty * this.scale}px`;
-        whiteboardView.style.left = `${-(this.scale - 1) * parentBounds.width / 2 + tx * this.scale}px`;
-        whiteboardView.style.transform = `scale(1) translate(0px, 0px)`;
-        this.whiteboardApp.adjustByOutFrame(parentBounds.width * this.scale, parentBounds.height * this.scale);
-      }, 200);
+      this.whiteboardApp.adjustByOutFrame(parentBounds.width * this.scale, parentBounds.height * this.scale);
+      const whiteboardSize = this.whiteboardApp.getViewSize();
+      const whiteboardScale = this.whiteboardApp.getInherentScale();
+      this.whiteboardApp.emitter.resetCamera();
+      this.whiteboardApp.emitter.translateCamera(-this.translateX * whiteboardSize[0] / whiteboardScale / this.scale, -this.translateY * whiteboardSize[1] / whiteboardScale / this.scale);
     });
     this.imageDoc = imageDoc;
     this.parentView = parentView;
@@ -739,7 +649,6 @@ var SingleContainer = class {
     this.view.setAttribute("data-imagery-container", "single");
     this.resizeObserver = new ResizeObserver(this.handleResize);
     this.resizeObserver.observe(this.view);
-    window.imageWhiteboard = this.whiteboardApp;
     this.whiteboardApp.updateInternalResizeObserverStatus(false);
     this.map.observe(this.handleMapChange);
     if (!this.map.has(ContainerKeys.scale)) {
@@ -766,10 +675,29 @@ var SingleContainer = class {
     });
   }
   init() {
-    this.handleGoto(this.pageIndex).catch((error) => {
+    this.handleGoto(this.pageIndex).catch((_error) => {
+      console.error(_error);
+    }).finally(() => {
+      this.handleResize();
     });
     this.updateSyncedTransform();
   }
+  resetTranslateOnResize() {
+    const image = this.view.children[0];
+    if (!image) {
+      return;
+    }
+    const imageBounds = image.getBoundingClientRect();
+    const parentBounds = this.parentView.getBoundingClientRect();
+    const maxDx = (imageBounds.width - parentBounds.width) / 2;
+    const maxDy = (imageBounds.height - parentBounds.height) / 2;
+    if (maxDx < 0) {
+      this.translateX = 0;
+    }
+    if (maxDy < 0) {
+      this.translateY = 0;
+    }
+  }
   handleTranslate(dx, dy) {
     const image = this.view.children[0];
     if (!image) {
@@ -839,21 +767,21 @@ var SingleContainer = class {
     }
   }
   dispose() {
+    removeObserver(this.map, this.handleMapChange);
     this.resizeObserver.disconnect();
     this.scroll.dispose();
-    window.clearTimeout(this.timeoutId);
   }
 };
 
 // src/ImageryDocApplication.ts
-function _defineProperty8(e, r, t) {
-  return (r = _toPropertyKey8(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+function _defineProperty7(e, r, t) {
+  return (r = _toPropertyKey7(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
 }
-function _toPropertyKey8(t) {
-  var i = _toPrimitive8(t, "string");
+function _toPropertyKey7(t) {
+  var i = _toPrimitive7(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
-function _toPrimitive8(t, r) {
+function _toPrimitive7(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
   if (void 0 !== e) {
@@ -867,21 +795,22 @@ var IMAGERY_DOC_APP_NAME = "imagery_doc";
 var ImageryDocApplication = class extends AbstractApplication {
   constructor() {
     super();
-    _defineProperty8(this, "name", IMAGERY_DOC_APP_NAME);
-    _defineProperty8(this, "emitter", new ImageryDoc());
-    _defineProperty8(this, "whiteboardApp", void 0);
-    _defineProperty8(this, "whiteboard", void 0);
-    _defineProperty8(this, "container", void 0);
-    _defineProperty8(this, "rootView", document.createElement("div"));
-    _defineProperty8(this, "contentContainer", document.createElement("div"));
-    _defineProperty8(this, "whiteboardContainer", document.createElement("div"));
-    _defineProperty8(this, "footerContainer", document.createElement("div"));
-    _defineProperty8(this, "permissions", void 0);
-    _defineProperty8(this, "footer", void 0);
-    _defineProperty8(this, "images", []);
+    _defineProperty7(this, "name", IMAGERY_DOC_APP_NAME);
+    _defineProperty7(this, "emitter", new ImageryDoc());
+    _defineProperty7(this, "whiteboardApp", void 0);
+    _defineProperty7(this, "whiteboard", void 0);
+    _defineProperty7(this, "container", void 0);
+    _defineProperty7(this, "rootView", document.createElement("div"));
+    _defineProperty7(this, "contentContainer", document.createElement("div"));
+    _defineProperty7(this, "whiteboardContainer", document.createElement("div"));
+    _defineProperty7(this, "footerContainer", document.createElement("div"));
+    _defineProperty7(this, "permissions", void 0);
+    _defineProperty7(this, "footer", void 0);
+    _defineProperty7(this, "images", []);
     this.rootView.setAttribute("data-forge-app", "imagery-doc");
-    this.rootView.style.background = "red";
     this.rootView.style.overflow = "hidden";
+    this.rootView.style.userSelect = "none";
+    this.rootView.style.backgroundColor = "#f9f9fc";
     this.contentContainer.style.width = "100%";
     this.contentContainer.style.height = "100%";
     this.contentContainer.style.display = "flex";
@@ -947,11 +876,11 @@ var ImageryDocApplication = class extends AbstractApplication {
   }
   async initialize(option) {
     const whiteboardApp = new WhiteboardApplication();
-    whiteboardApp.roomDoc = this.roomDoc;
+    whiteboardApp.appDoc = this.appDoc;
     whiteboardApp.appId = `${this.appId}_wb`;
     whiteboardApp.userId = this.userId;
     whiteboardApp.userManager = this.userManager;
-    whiteboardApp.applicationManager = this.applicationManager;
+    whiteboardApp.deleteSubDoc = this.deleteSubDoc;
     await whiteboardApp.initialize({
       width: -1,
       height: -1
@@ -979,9 +908,9 @@ var ImageryDocApplication = class extends AbstractApplication {
     this.contentContainer.appendChild(this.whiteboardContainer);
     this.contentContainer.appendChild(this.footerContainer);
     this.footerContainer.appendChild(this.footer.root);
-    this.whiteboard.setViewModeToMain();
     let i = 0;
     this.whiteboard.permissions.addPermission(WhiteboardPermissionFlag.mainView);
+    this.whiteboard.setViewModeToMain();
     while (i < option.images.length) {
       const image = option.images[i];
       this.images[i] = new LazyImage(image.src, image.width, image.height);
@@ -995,34 +924,40 @@ var ImageryDocApplication = class extends AbstractApplication {
       this.whiteboard.addPage("doc_continuous");
       this.whiteboard.gotoPage("doc_continuous");
     }
-    if (option.displayMode === "single") {
-      this.whiteboard.setViewModeToMain();
-    } else {
-      this.whiteboard.setViewModeToFree();
-    }
+    this.whiteboard.setViewModeToFree();
     this.permissions = new ImageryDocPermissions(this.userManager, (userId) => {
       return this.userMap(userId);
     });
-    this.permissions.addPermission(ImageryDocPermissionFlag.all);
+    this.permissions.on("change", (userId, flags, value) => {
+      this.emitter.emit("permissionChange", userId, flags, value);
+    });
+    this.permissions.setPermission(ImageryDocPermissionFlag.all);
     this.whiteboardApp.disableViewModel();
     this.container.init();
     this.whiteboard.permissions.removePermission(WhiteboardPermissionFlag.mainView);
     if (option.inheritWhiteboardId) {
       whiteboardApp.linkToWhiteboard(option.inheritWhiteboardId);
     }
+    this.emitter.emit("ready");
     return Promise.resolve(void 0);
   }
   userMap(userId) {
     return this.getMap(`user/${userId}`);
   }
-  async dispose() {
-    await this.whiteboardApp.dispose();
-    this.rootView.parentElement?.removeChild(this.rootView);
+  async dispose(removeSubDoc) {
+    if (removeSubDoc) {
+      this.deleteSubDoc(this.appId);
+    }
+    await this.whiteboardApp.dispose(removeSubDoc);
+    this.whiteboardApp.emitter.view.remove();
     this.container.dispose();
+    this.permissions.dispose();
+    this.emitter.removeAllListeners();
     return Promise.resolve(void 0);
   }
 };
-_defineProperty8(ImageryDocApplication, "applicationName", IMAGERY_DOC_APP_NAME);
+_defineProperty7(ImageryDocApplication, "applicationName", IMAGERY_DOC_APP_NAME);
+window.__ImageryDocApplication = ImageryDocApplication;
 export {
   ImageryDoc,
   ImageryDocApplication,