@netless/forge-imagery-doc 0.1.3 → 1.0.0-alpha.1

package/dist/imagery-doc.js

@@ -70,7 +70,7 @@ var ImageryDoc = class extends import_eventemitter3.default {
 };
 
 // src/ImageryDocApplication.ts
-var import_forge_room2 = require("@netless/forge-room");
+var import_forge_room4 = require("@netless/forge-room");
 var import_forge_whiteboard = require("@netless/forge-whiteboard");
 
 // src/LazyImage.ts
@@ -149,24 +149,7 @@ var LazyImage = class {
 };
 
 // src/ImageryDocPermissions.ts
-var import_eventemitter32 = __toESM(require("eventemitter3"), 1);
-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);
-}
+var import_forge_room2 = require("@netless/forge-room");
 var ImageryDocPermissionFlag = function(ImageryDocPermissionFlag2) {
   ImageryDocPermissionFlag2[ImageryDocPermissionFlag2["none"] = 0] = "none";
   ImageryDocPermissionFlag2[ImageryDocPermissionFlag2["switchPage"] = 1] = "switchPage";
@@ -175,53 +158,7 @@ var ImageryDocPermissionFlag = function(ImageryDocPermissionFlag2) {
   ImageryDocPermissionFlag2[ImageryDocPermissionFlag2["all"] = ImageryDocPermissionFlag2.switchPage | ImageryDocPermissionFlag2.camera | ImageryDocPermissionFlag2.sideBar] = "all";
   return ImageryDocPermissionFlag2;
 }({});
-var ImageryDocPermissions = class extends import_eventemitter32.default {
-  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 import_forge_room2.AbstractApplicationPermissions {
   /**
      * 解析权限列表组合
      * @param {number} value - 权限数字值
@@ -230,58 +167,6 @@ var ImageryDocPermissions = class extends import_eventemitter32.default {
   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);
-  }
-  dispose() {
-    this.userManager.off("join", this.handleUserJoin);
-    this.userManager.off("leave", this.handleUserLeave);
-    for (const [userId, observer] of this.observers) {
-      this.requestUserMap(userId).unobserve(observer);
-    }
-    this.observers.clear();
-    this.removeAllListeners();
-  }
 };
 
 // src/icons.ts
@@ -295,14 +180,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) {
@@ -315,14 +200,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) {
@@ -357,6 +251,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) {
@@ -399,6 +296,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;
@@ -410,7 +321,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";
@@ -425,7 +336,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;
       });
@@ -438,15 +349,15 @@ var FooterView = class {
 };
 
 // src/InfinityScroll.ts
-var import_eventemitter33 = __toESM(require("eventemitter3"), 1);
-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;
+var import_eventemitter32 = __toESM(require("eventemitter3"), 1);
+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) {
@@ -456,16 +367,16 @@ function _toPrimitive5(t, r) {
   }
   return ("string" === r ? String : Number)(t);
 }
-var InfinityScroll = class extends import_eventemitter33.default {
+var InfinityScroll = class extends import_eventemitter32.default {
   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();
@@ -518,14 +429,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) {
@@ -552,22 +463,22 @@ 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) {
@@ -580,7 +491,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;
@@ -590,7 +501,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;
@@ -667,14 +577,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;
+var import_forge_room3 = require("@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) {
@@ -715,16 +626,16 @@ 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, "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();
       }
@@ -733,7 +644,7 @@ var SingleContainer = class {
         });
       }
     });
-    _defineProperty7(this, "handleResize", () => {
+    _defineProperty6(this, "handleResize", () => {
       const bound = this.parentView.getBoundingClientRect();
       if (this.currentImage) {
         let scale = bound.width / this.currentImage.width;
@@ -747,7 +658,7 @@ var SingleContainer = class {
         this.resetTranslateOnResize();
       }
     });
-    _defineProperty7(this, "updateSyncedTransform", () => {
+    _defineProperty6(this, "updateSyncedTransform", () => {
       if (!this.currentImage) {
         return;
       }
@@ -800,10 +711,12 @@ var SingleContainer = class {
       this.scale = nextScale;
       this.handleTranslate(0, 0);
     });
-    window.__doc = this;
   }
   init() {
     this.handleGoto(this.pageIndex).catch((_error) => {
+      console.error(_error);
+    }).finally(() => {
+      this.handleResize();
     });
     this.updateSyncedTransform();
   }
@@ -892,21 +805,21 @@ var SingleContainer = class {
     }
   }
   dispose() {
-    this.map.unobserve(this.handleMapChange);
+    (0, import_forge_room3.removeObserver)(this.map, this.handleMapChange);
     this.resizeObserver.disconnect();
     this.scroll.dispose();
   }
 };
 
 // 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) {
@@ -917,24 +830,25 @@ function _toPrimitive8(t, r) {
   return ("string" === r ? String : Number)(t);
 }
 var IMAGERY_DOC_APP_NAME = "imagery_doc";
-var ImageryDocApplication = class extends import_forge_room2.AbstractApplication {
+var ImageryDocApplication = class extends import_forge_room4.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";
@@ -1000,17 +914,19 @@ var ImageryDocApplication = class extends import_forge_room2.AbstractApplication
   }
   async initialize(option) {
     const whiteboardApp = new import_forge_whiteboard.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
+      height: -1,
+      maxScaleRatio: 1
     });
     this.whiteboardApp = whiteboardApp;
     this.whiteboard = whiteboardApp.emitter;
+    this.whiteboard.enableCameraBoundaryHighlight = false;
     this.whiteboard.enableCameraByMouse = false;
     this.whiteboard.enableCameraByTouch = false;
     this.whiteboard.view.style.width = "100%";
@@ -1055,51 +971,31 @@ var ImageryDocApplication = class extends import_forge_room2.AbstractApplication
     this.permissions.on("change", (userId, flags, value) => {
       this.emitter.emit("permissionChange", userId, flags, value);
     });
-    this.permissions.addPermission(ImageryDocPermissionFlag.all);
+    this.permissions.setPermission(ImageryDocPermissionFlag.all);
     this.whiteboardApp.disableViewModel();
     this.container.init();
     this.whiteboard.permissions.removePermission(import_forge_whiteboard.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();
-    Object.defineProperty(this.emitter, "footView", {
-      value: null
-    });
-    Object.defineProperty(this.emitter, "view", {
-      value: null
-    });
-    Object.defineProperty(this.emitter, "permissions", {
-      value: null
-    });
-    Object.defineProperty(this.emitter, "pageIndex", {
-      value: null
-    });
-    Object.defineProperty(this.emitter, "pageCount", {
-      value: null
-    });
-    Object.defineProperty(this.emitter, "goto", {
-      value: null
-    });
-    Object.defineProperty(this.emitter, "imgContent", {
-      value: null
-    });
-    Object.defineProperty(this.emitter, "imgSize", {
-      value: null
-    });
     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;
 //# sourceMappingURL=imagery-doc.js.map