@netless/forge-imagery-doc 0.1.0

package/dist/imagery-doc.esm.js

@@ -0,0 +1,1031 @@
+// src/ImageryDoc.ts
+import EventEmitter from "eventemitter3";
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive(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 ImageryDoc = class extends EventEmitter {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "view", void 0);
+    _defineProperty(this, "footView", void 0);
+    _defineProperty(this, "permissions", void 0);
+    _defineProperty(this, "pageIndex", void 0);
+    _defineProperty(this, "pageCount", void 0);
+    _defineProperty(this, "goto", void 0);
+    _defineProperty(this, "imgContent", void 0);
+    _defineProperty(this, "imgSize", void 0);
+  }
+};
+
+// src/ImageryDocApplication.ts
+import { AbstractApplication } from "@netless/forge-room";
+import { WhiteboardApplication, WhiteboardPermissionFlag } from "@netless/forge-whiteboard";
+
+// src/LazyImage.ts
+import { kvStore } from "@netless/forge-room";
+function _defineProperty2(e, r, t) {
+  return (r = _toPropertyKey2(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e;
+}
+function _toPropertyKey2(t) {
+  var i = _toPrimitive2(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive2(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 LazyImage = class {
+  constructor(src, width, height) {
+    _defineProperty2(this, "view", void 0);
+    _defineProperty2(this, "width", void 0);
+    _defineProperty2(this, "height", void 0);
+    _defineProperty2(this, "src", void 0);
+    this.src = src;
+    this.width = width;
+    this.height = height;
+    this.view = document.createElement("div");
+    this.view.setAttribute("data-forge-src", src);
+    this.view.style.width = `${width}px`;
+    this.view.style.height = `${height}px`;
+    this.view.style.transformOrigin = "0 0";
+  }
+  scale(scale) {
+    this.view.style.width = `${this.width * scale}px`;
+    this.view.style.height = `${this.height * scale}px`;
+  }
+  async getImgContent() {
+    let base64Data = null;
+    try {
+      base64Data = await kvStore.getItem(this.src);
+    } catch {
+    }
+    if (base64Data) {
+      return base64Data;
+    }
+    const response = await fetch(this.src);
+    const blob = await response.blob();
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        kvStore.setItem(this.src, reader.result);
+        resolve(reader.result);
+      };
+      reader.onerror = () => {
+        reject(reader.error);
+      };
+      reader.readAsDataURL(blob);
+    });
+  }
+  async prepare() {
+    if (this.view.children.length > 0) {
+      return;
+    }
+    const base64Data = await this.getImgContent();
+    const img = document.createElement("img");
+    img.src = base64Data;
+    img.style.width = "100%";
+    if (this.view.children.length === 0) {
+      this.view.appendChild(img);
+    }
+  }
+};
+
+// 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);
+}
+var ImageryDocPermissionFlag = function(ImageryDocPermissionFlag2) {
+  ImageryDocPermissionFlag2[ImageryDocPermissionFlag2["none"] = 0] = "none";
+  ImageryDocPermissionFlag2[ImageryDocPermissionFlag2["switchPage"] = 1] = "switchPage";
+  ImageryDocPermissionFlag2[ImageryDocPermissionFlag2["camera"] = 2] = "camera";
+  ImageryDocPermissionFlag2[ImageryDocPermissionFlag2["sideBar"] = 4] = "sideBar";
+  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);
+        }
+      }
+    }
+  }
+  /**
+   * 解析权限列表组合
+   * @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
+var chevronLeft = (color) => `<svg style="width:100%;height:100%;padding:2px;box-sizing:border-box;" viewBox="0 0 12.3926 16.9629"><g><rect height="16.9629" opacity="0" width="12.3926" x="0" y="0"/><path d="M0 8.47656C0 8.7207 0.0878906 8.93555 0.273438 9.12109L8.01758 16.6895C8.18359 16.8652 8.39844 16.9531 8.65234 16.9531C9.16016 16.9531 9.55078 16.5723 9.55078 16.0645C9.55078 15.8105 9.44336 15.5957 9.28711 15.4297L2.17773 8.47656L9.28711 1.52344C9.44336 1.35742 9.55078 1.13281 9.55078 0.888672C9.55078 0.380859 9.16016 0 8.65234 0C8.39844 0 8.18359 0.0878906 8.01758 0.253906L0.273438 7.83203C0.0878906 8.00781 0 8.23242 0 8.47656Z" fill="${color}"/></g></svg>`;
+var chevronRight = (color) => `<svg style="width:100%;height:100%;padding:2px;box-sizing:border-box;" viewBox="0 0 11.6895 16.9629"><g><rect height="16.9629" opacity="0" width="11.6895" x="0" y="0"/><path d="M11.6895 8.47656C11.6895 8.23242 11.5918 8.00781 11.4062 7.83203L3.67188 0.253906C3.49609 0.0878906 3.28125 0 3.02734 0C2.5293 0 2.13867 0.380859 2.13867 0.888672C2.13867 1.13281 2.23633 1.35742 2.39258 1.52344L9.50195 8.47656L2.39258 15.4297C2.23633 15.5957 2.13867 15.8105 2.13867 16.0645C2.13867 16.5723 2.5293 16.9531 3.02734 16.9531C3.28125 16.9531 3.49609 16.8652 3.67188 16.6895L11.4062 9.12109C11.5918 8.93555 11.6895 8.7207 11.6895 8.47656Z" fill="${color}"/></g></svg>`;
+var sideBar = (color) => `<svg style="width:100%;height:100%;padding:2px;box-sizing:border-box;" viewBox="0 0 23.3887 17.998"><g><rect height="17.998" opacity="0" width="23.3887" x="0" y="0"/><path d="M3.06641 17.998L19.9609 17.998C22.0117 17.998 23.0273 16.9824 23.0273 14.9707L23.0273 3.04688C23.0273 1.03516 22.0117 0.0195312 19.9609 0.0195312L3.06641 0.0195312C1.02539 0.0195312 0 1.02539 0 3.04688L0 14.9707C0 16.9922 1.02539 17.998 3.06641 17.998ZM3.08594 16.4258C2.10938 16.4258 1.57227 15.9082 1.57227 14.8926L1.57227 3.125C1.57227 2.10938 2.10938 1.5918 3.08594 1.5918L19.9414 1.5918C20.9082 1.5918 21.4551 2.10938 21.4551 3.125L21.4551 14.8926C21.4551 15.9082 20.9082 16.4258 19.9414 16.4258ZM7.44141 16.7285L8.97461 16.7285L8.97461 1.29883L7.44141 1.29883ZM5.56641 5.21484C5.85938 5.21484 6.12305 4.95117 6.12305 4.66797C6.12305 4.375 5.85938 4.12109 5.56641 4.12109L3.4668 4.12109C3.17383 4.12109 2.91992 4.375 2.91992 4.66797C2.91992 4.95117 3.17383 5.21484 3.4668 5.21484ZM5.56641 7.74414C5.85938 7.74414 6.12305 7.48047 6.12305 7.1875C6.12305 6.89453 5.85938 6.65039 5.56641 6.65039L3.4668 6.65039C3.17383 6.65039 2.91992 6.89453 2.91992 7.1875C2.91992 7.48047 3.17383 7.74414 3.4668 7.74414ZM5.56641 10.2637C5.85938 10.2637 6.12305 10.0195 6.12305 9.72656C6.12305 9.43359 5.85938 9.17969 5.56641 9.17969L3.4668 9.17969C3.17383 9.17969 2.91992 9.43359 2.91992 9.72656C2.91992 10.0195 3.17383 10.2637 3.4668 10.2637Z" fill="${color}"/></g></svg>`;
+var Icons = {
+  chevronLeft,
+  chevronRight,
+  sideBar
+};
+
+// 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 _toPropertyKey4(t) {
+  var i = _toPrimitive4(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive4(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 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) => {
+      const target = evt.target;
+      const targetIndex = target.getAttribute("data-doc-index");
+      if (targetIndex) {
+        this.imageryDoc.goto(parseInt(targetIndex, 10));
+      }
+    });
+    this.imageryDoc = imageryDoc;
+    this.root = document.createElement("div");
+    this.root.style.height = "24px";
+    this.root.style.zIndex = "2";
+    this.root.style.display = "flex";
+    this.root.style.alignItems = "center";
+    this.root.style.backgroundColor = "#fff";
+    this.root.style.borderTop = "1px solid #f0f0f0";
+    this.prevPage = this.createIcon(Icons.chevronLeft(EM_COLOR), "18px", () => {
+      this.imageryDoc.goto(this.imageryDoc.pageIndex - 1);
+    });
+    this.nextPage = this.createIcon(Icons.chevronRight(EM_COLOR), "18px", () => {
+      this.imageryDoc.goto(this.imageryDoc.pageIndex + 1);
+    });
+    this.sideBarToggle = this.createIcon(Icons.sideBar(EM_COLOR), "20px", () => {
+      this.createSideBar();
+      this.isSlideBarVisible = !this.isSlideBarVisible;
+      if (this.isSlideBarVisible) {
+        this.sideBarContainer.style.display = "block";
+      } else {
+        this.sideBarContainer.style.display = "none";
+      }
+    });
+    this.root.appendChild(this.sideBarToggle);
+    this.root.appendChild(this.createSpacer());
+    this.root.appendChild(this.prevPage);
+    this.root.appendChild(this.nextPage);
+    this.root.appendChild(this.createSpacer());
+  }
+  prevPageState(enable) {
+    if (enable) {
+      this.prevPage.style.pointerEvents = "all";
+      this.prevPage.style.opacity = "1";
+    } else {
+      this.prevPage.style.pointerEvents = "none";
+      this.prevPage.style.opacity = "0.5";
+    }
+  }
+  nextPageState(enable) {
+    if (enable) {
+      this.nextPage.style.pointerEvents = "all";
+      this.nextPage.style.opacity = "1";
+    } else {
+      this.nextPage.style.pointerEvents = "none";
+      this.nextPage.style.opacity = "0.5";
+    }
+  }
+  createSpacer() {
+    const div = document.createElement("div");
+    div.style.flex = "1 1 auto";
+    return div;
+  }
+  createIcon(svgContent, size, action) {
+    const icon = document.createElement("div");
+    icon.style.width = size;
+    icon.style.height = size;
+    icon.style.borderRadius = "2px";
+    icon.style.margin = "6px";
+    icon.innerHTML = svgContent;
+    icon.addEventListener("click", () => {
+      action();
+    });
+    icon.addEventListener("mouseover", () => {
+      icon.style.backgroundColor = "#f0f0f0";
+    });
+    icon.addEventListener("mouseout", () => {
+      icon.style.backgroundColor = "transparent";
+    });
+    return icon;
+  }
+  createSideBar() {
+    if (this.imageryDoc.pageCount === 0) {
+      return;
+    }
+    if (this.root.contains(this.sideBarContainer)) {
+      return;
+    }
+    this.sideBarContainer.style.width = "24%";
+    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.left = "0";
+    this.sideBarContainer.style.fontSize = "0px";
+    this.sideBarContainer.style.overflow = "auto";
+    this.sideBarContainer.style.backgroundColor = "#EFEFEF";
+    this.root.appendChild(this.sideBarContainer);
+    for (let i = 0, l = this.imageryDoc.pageCount; i < l; i++) {
+      const reviewPage = document.createElement("div");
+      reviewPage.style.width = "100%";
+      reviewPage.style.marginTop = "12px";
+      const reviewIndex = document.createElement("div");
+      reviewIndex.style.cssText = "font-size:12px;width:100%;text-align:center;height:24px;line-height:24px;color:#585858";
+      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";
+      this.imageryDoc.imgContent(i).then((base64Data) => {
+        reviewImg.src = base64Data;
+      });
+      reviewPage.appendChild(reviewImg);
+      reviewPage.appendChild(reviewIndex);
+      this.sideBarContainer.appendChild(reviewPage);
+    }
+    this.sideBarContainer.addEventListener("click", this.handleSideBarClick);
+  }
+};
+
+// 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;
+}
+function _toPropertyKey5(t) {
+  var i = _toPrimitive5(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive5(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 InfinityScroll = class extends EventEmitter3 {
+  constructor(view) {
+    super();
+    _defineProperty5(this, "view", void 0);
+    _defineProperty5(this, "lastDelta", {
+      x: 0,
+      y: 0
+    });
+    _defineProperty5(this, "lastTriggerTime", 0);
+    _defineProperty5(this, "handleWheel", (evt) => {
+      evt.preventDefault();
+      evt.stopImmediatePropagation();
+      evt.stopPropagation();
+      if (Date.now() - this.lastTriggerTime < 32) {
+        this.lastDelta.y += evt.deltaY;
+        this.lastDelta.x += evt.deltaX;
+        return;
+      }
+      if (evt.ctrlKey) {
+        const wheelDelta = Math.sign(evt.wheelDelta || 100) * 120;
+        const deltaY = evt.deltaY + this.lastDelta.y;
+        let scale;
+        if (deltaY > 0) {
+          scale = Math.max(1 - Math.abs(deltaY / wheelDelta), 1e-8);
+        } else {
+          scale = 1 + Math.abs(deltaY / wheelDelta);
+        }
+        scale = Math.max(0.9, scale);
+        scale = Math.min(1.1, scale);
+        this.emit("scale", scale);
+      } else {
+        const deltaX = this.lastDelta.x + evt.deltaX;
+        const deltaY = this.lastDelta.y + evt.deltaY;
+        this.emit("translate", deltaX, deltaY);
+      }
+      this.lastTriggerTime = Date.now();
+      this.lastDelta = {
+        x: 0,
+        y: 0
+      };
+    });
+    this.view = view;
+    this.view.addEventListener("wheel", this.handleWheel, {
+      passive: false,
+      capture: true
+    });
+  }
+  dispose() {
+    this.view.removeEventListener("wheel", this.handleWheel);
+  }
+};
+
+// src/Container.ts
+var ContainerKeys = {
+  scale: "scale",
+  translateX: "translateX",
+  translateY: "translateY",
+  pageIndex: "pageIndex"
+};
+
+// 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 _toPropertyKey6(t) {
+  var i = _toPrimitive6(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive6(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 ContinuousContainer = class {
+  get translateY() {
+    return this.map.get(ContainerKeys.translateY);
+  }
+  set translateY(value) {
+    this.map.set(ContainerKeys.translateY, value);
+  }
+  get pageIndex() {
+    const step = 1 / this.images.length;
+    for (let i = 0; i < this.images.length; i++) {
+      if (this.translateY < step * i && Math.abs(this.translateY - step * i) >= 1e-4) {
+        return i - 1;
+      }
+    }
+    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) => {
+      if (event.keysChanged.has(ContainerKeys.translateY)) {
+        this.updateSyncedTransform();
+      }
+    });
+    _defineProperty6(this, "handleResize", () => {
+      const bound = this.view.getBoundingClientRect();
+      let scaledHeight = 0;
+      for (const image of this.images) {
+        let scale = bound.width / image.width;
+        image.scale(scale);
+        scaledHeight += image.height * scale;
+      }
+      this.localScale = scaledHeight / this.totalHeight;
+      this.whiteboardApp.updateOptionSize(bound.width, bound.height);
+      this.whiteboardApp.adjustByOutFrame(bound.width, bound.height);
+      this.updateSyncedTransform();
+    });
+    _defineProperty6(this, "updateSyncedTransform", () => {
+      const bounds = this.view.getBoundingClientRect();
+      const maxTy = this.totalHeight * this.localScale - bounds.height;
+      let ty = this.translateY * this.totalHeight * this.localScale;
+      ty = Math.min(ty, maxTy);
+      ty = Math.max(ty, 0);
+      this.view.style.transform = `translate(0, ${-ty}px)`;
+      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;
+    this.parentView = parentView;
+    this.map = map;
+    this.scroll = new InfinityScroll(this.parentView);
+    this.whiteboardApp = whiteboardApp;
+    this.view = document.createElement("div");
+    this.view.style.width = "100%";
+    this.view.style.height = "100%";
+    this.view.style.position = "absolute";
+    this.view.style.top = "0";
+    this.view.style.left = "0";
+    this.view.style.transformOrigin = "0, 0";
+    this.view.setAttribute("data-imagery-container", "continuous");
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver.observe(this.view);
+    this.whiteboardApp.updateInternalResizeObserverStatus(false);
+    this.map.observe(this.handleMapChange);
+    if (!this.map.has(ContainerKeys.scale)) {
+      this.map.set(ContainerKeys.scale, 1);
+    }
+    if (!this.map.has(ContainerKeys.translateX)) {
+      this.map.set(ContainerKeys.translateX, 0);
+    }
+    if (!this.map.has(ContainerKeys.translateY)) {
+      this.map.set(ContainerKeys.translateY, 0);
+    }
+    this.scroll.on("translate", (dx, dy) => {
+      this.handleTranslate(dx, dy);
+    });
+  }
+  init() {
+    this.updateSyncedTransform();
+    this.totalHeight = this.images.reduce((prev, curr) => prev + curr.height, 0);
+  }
+  handleTranslate(dx, dy) {
+    const dyNormalized = dy / this.totalHeight;
+    let nextTy = this.translateY + dyNormalized;
+    nextTy = Math.max(0, nextTy);
+    nextTy = Math.min(1, nextTy);
+    this.translateY = nextTy;
+  }
+  goto(index) {
+    let nextIndex = Math.max(0, index);
+    nextIndex = Math.min(this.images.length - 1, nextIndex);
+    this.translateY = nextIndex / this.images.length;
+  }
+  append(image) {
+    this.images.push(image);
+    this.view.appendChild(image.view);
+  }
+  async handleGoto(index) {
+    if (index < 0 || index >= this.images.length) {
+      return;
+    }
+    this.imageDoc.emit("renderStart", index);
+    const target = this.images[index];
+    if (target) {
+      await target.prepare();
+    }
+    this.imageDoc.emit("renderEnd", index);
+    for (let i = index - 3; i <= index + 3; i++) {
+      const img = this.images[i];
+      if (img) {
+        img.prepare();
+      }
+    }
+  }
+  dispose() {
+    this.resizeObserver.disconnect();
+    this.scroll.dispose();
+  }
+};
+
+// 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;
+}
+function _toPropertyKey7(t) {
+  var i = _toPrimitive7(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive7(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 delay = (value) => new Promise((resolve) => setTimeout(resolve, value));
+async function waitUntil(fn, timeout) {
+  let start = Date.now();
+  while (!fn() && Date.now() - start < timeout) {
+    await delay(50);
+    start = Date.now();
+  }
+}
+var SingleContainer = class {
+  get scale() {
+    return this.map.get(ContainerKeys.scale);
+  }
+  set scale(value) {
+    this.map.set(ContainerKeys.scale, value);
+  }
+  get translateX() {
+    return this.map.get(ContainerKeys.translateX);
+  }
+  set translateX(value) {
+    this.map.set(ContainerKeys.translateX, value);
+  }
+  get translateY() {
+    return this.map.get(ContainerKeys.translateY);
+  }
+  set translateY(value) {
+    this.map.set(ContainerKeys.translateY, value);
+  }
+  get pageIndex() {
+    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) => {
+      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) => {
+        });
+      }
+    });
+    _defineProperty7(this, "handleResize", () => {
+      const bound = this.parentView.getBoundingClientRect();
+      if (this.currentImage) {
+        let scale = bound.width / this.currentImage.width;
+        if (this.currentImage.height * scale > bound.height) {
+          scale = bound.height / this.currentImage.height;
+        }
+        const tx = Math.round((bound.width - this.currentImage.width * scale) / 2 / scale);
+        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();
+      }
+    });
+    _defineProperty7(this, "updateSyncedTransform", () => {
+      if (!this.currentImage) {
+        return;
+      }
+      const parentBounds = this.parentView.getBoundingClientRect();
+      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.imageDoc = imageDoc;
+    this.parentView = parentView;
+    this.map = map;
+    this.scroll = new InfinityScroll(this.parentView);
+    this.whiteboardApp = whiteboardApp;
+    this.view = document.createElement("div");
+    this.view.style.width = "100%";
+    this.view.style.height = "100%";
+    this.view.style.position = "absolute";
+    this.view.style.top = "0";
+    this.view.style.left = "0";
+    this.view.style.transformOrigin = "center";
+    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)) {
+      this.map.set(ContainerKeys.scale, 1);
+    }
+    if (!this.map.has(ContainerKeys.translateX)) {
+      this.map.set(ContainerKeys.translateX, 0);
+    }
+    if (!this.map.has(ContainerKeys.translateY)) {
+      this.map.set(ContainerKeys.translateY, 0);
+    }
+    if (!this.map.has(ContainerKeys.pageIndex)) {
+      this.map.set(ContainerKeys.pageIndex, 0);
+    }
+    this.scroll.on("translate", (dx, dy) => {
+      this.handleTranslate(dx, dy);
+    });
+    this.scroll.on("scale", (scale) => {
+      let nextScale = this.scale * scale;
+      nextScale = Math.max(1, nextScale);
+      nextScale = Math.min(2, nextScale);
+      this.scale = nextScale;
+      this.handleTranslate(0, 0);
+    });
+  }
+  init() {
+    this.handleGoto(this.pageIndex).catch((error) => {
+    });
+    this.updateSyncedTransform();
+  }
+  handleTranslate(dx, dy) {
+    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) {
+      let nextDx = this.translateX * parentBounds.width + dx;
+      if (nextDx >= 0) {
+        nextDx = Math.min(nextDx, maxDx);
+      } else {
+        nextDx = Math.max(nextDx, -maxDx);
+      }
+      this.translateX = nextDx / parentBounds.width;
+    } else {
+      this.translateX = 0;
+    }
+    if (maxDy > 0) {
+      let nextDy = this.translateY * parentBounds.height + dy;
+      if (nextDy >= 0) {
+        nextDy = Math.min(nextDy, maxDy);
+      } else {
+        nextDy = Math.max(nextDy, -maxDy);
+      }
+      this.translateY = nextDy / parentBounds.height;
+    } else {
+      this.translateY = 0;
+    }
+  }
+  goto(index) {
+    let nextIndex = Math.max(0, index);
+    nextIndex = Math.min(this.images.length - 1, nextIndex);
+    this.map.set(ContainerKeys.pageIndex, nextIndex);
+  }
+  append(image) {
+    this.images.push(image);
+  }
+  async handleGoto(index) {
+    await waitUntil(() => this.images.length > 0, 3e3);
+    if (index < 0 || index >= this.images.length) {
+      return;
+    }
+    this.imageDoc.emit("renderStart", index);
+    if (this.view.children[0]) {
+      this.view.removeChild(this.view.children[0]);
+    }
+    this.whiteboardApp.emitter.view.style.opacity = "0";
+    const target = this.images[index];
+    if (target) {
+      await target.prepare();
+      this.view.appendChild(target.view);
+      this.currentImage = target;
+      this.whiteboardApp.emitter.gotoPage(`doc_${index}`);
+      this.whiteboardApp.updateOptionSize(this.currentImage.width, this.currentImage.height);
+      this.whiteboardApp.emitter.view.style.opacity = "1";
+      this.handleResize();
+    }
+    this.imageDoc.emit("renderEnd", index);
+    for (let i = index - 3; i <= index + 3; i++) {
+      const img = this.images[i];
+      if (img) {
+        img.prepare();
+      }
+    }
+  }
+  dispose() {
+    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 _toPropertyKey8(t) {
+  var i = _toPrimitive8(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _toPrimitive8(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 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", []);
+    this.rootView.setAttribute("data-forge-app", "imagery-doc");
+    this.rootView.style.background = "red";
+    this.rootView.style.overflow = "hidden";
+    this.contentContainer.style.width = "100%";
+    this.contentContainer.style.height = "100%";
+    this.contentContainer.style.display = "flex";
+    this.contentContainer.style.flexDirection = "column";
+    this.footer = new FooterView(this.emitter);
+    this.rootView.appendChild(this.contentContainer);
+    this.emitter.on("renderStart", (pageIndex) => {
+      this.footer.prevPageState(pageIndex !== 0);
+      this.footer.nextPageState(pageIndex !== this.images.length - 1);
+    });
+    const that = this;
+    Object.defineProperty(this.emitter, "footView", {
+      get() {
+        return that.footerContainer;
+      }
+    });
+    Object.defineProperty(this.emitter, "view", {
+      get() {
+        return that.rootView;
+      }
+    });
+    Object.defineProperty(this.emitter, "permissions", {
+      get() {
+        return that.permissions;
+      }
+    });
+    Object.defineProperty(this.emitter, "pageIndex", {
+      get() {
+        return that.container.pageIndex;
+      }
+    });
+    Object.defineProperty(this.emitter, "pageCount", {
+      get() {
+        return that.images.length;
+      }
+    });
+    Object.defineProperty(this.emitter, "goto", {
+      get() {
+        return (index) => {
+          if (that.permissions.hasPermission(ImageryDocPermissionFlag.switchPage)) {
+            that.container.goto(index);
+          }
+        };
+      }
+    });
+    Object.defineProperty(this.emitter, "imgContent", {
+      get() {
+        return (index) => {
+          return that.images[index].getImgContent();
+        };
+      }
+    });
+    Object.defineProperty(this.emitter, "imgSize", {
+      get() {
+        return (index) => {
+          return {
+            width: that.images[index].width,
+            height: that.images[index].height
+          };
+        };
+      }
+    });
+  }
+  async initialize(option) {
+    const whiteboardApp = new WhiteboardApplication();
+    whiteboardApp.roomDoc = this.roomDoc;
+    whiteboardApp.appId = `${this.appId}_wb`;
+    whiteboardApp.userId = this.userId;
+    whiteboardApp.userManager = this.userManager;
+    whiteboardApp.applicationManager = this.applicationManager;
+    await whiteboardApp.initialize({
+      width: -1,
+      height: -1
+    });
+    this.whiteboardApp = whiteboardApp;
+    this.whiteboard = whiteboardApp.emitter;
+    this.whiteboard.enableCameraByMouse = false;
+    this.whiteboard.enableCameraByTouch = false;
+    this.whiteboard.view.style.width = "100%";
+    this.whiteboard.view.style.height = "100%";
+    this.whiteboard.view.style.position = "absolute";
+    this.whiteboard.view.style.top = "0";
+    this.whiteboard.view.style.left = "0";
+    this.whiteboard.setCanvasBackgroundColor("#f0f0f000");
+    if (option.displayMode === "single") {
+      this.container = new SingleContainer(this.getMap("single-container"), whiteboardApp, this.whiteboardContainer, this.emitter);
+    } else {
+      this.container = new ContinuousContainer(this.getMap("continuous-container"), whiteboardApp, this.whiteboardContainer, this.emitter);
+    }
+    this.whiteboardContainer.style.position = "relative";
+    this.whiteboardContainer.style.flex = "1 1 auto";
+    this.whiteboardContainer.style.overflow = "hidden";
+    this.whiteboardContainer.appendChild(this.container.view);
+    this.whiteboardContainer.appendChild(this.whiteboard.view);
+    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);
+    while (i < option.images.length) {
+      const image = option.images[i];
+      this.images[i] = new LazyImage(image.src, image.width, image.height);
+      this.container.append(this.images[i]);
+      if (option.displayMode === "single") {
+        this.whiteboard.addPage(`doc_${i}`);
+      }
+      i += 1;
+    }
+    if (option.displayMode === "continuous") {
+      this.whiteboard.addPage("doc_continuous");
+      this.whiteboard.gotoPage("doc_continuous");
+    }
+    if (option.displayMode === "single") {
+      this.whiteboard.setViewModeToMain();
+    } else {
+      this.whiteboard.setViewModeToFree();
+    }
+    this.permissions = new ImageryDocPermissions(this.userManager, (userId) => {
+      return this.userMap(userId);
+    });
+    this.permissions.addPermission(ImageryDocPermissionFlag.all);
+    this.whiteboardApp.disableViewModel();
+    this.container.init();
+    this.whiteboard.permissions.removePermission(WhiteboardPermissionFlag.mainView);
+    if (option.inheritWhiteboardId) {
+      whiteboardApp.linkToWhiteboard(option.inheritWhiteboardId);
+    }
+    return Promise.resolve(void 0);
+  }
+  userMap(userId) {
+    return this.getMap(`user/${userId}`);
+  }
+  async dispose() {
+    await this.whiteboardApp.dispose();
+    this.rootView.parentElement?.removeChild(this.rootView);
+    this.container.dispose();
+    return Promise.resolve(void 0);
+  }
+};
+_defineProperty8(ImageryDocApplication, "applicationName", IMAGERY_DOC_APP_NAME);
+export {
+  ImageryDoc,
+  ImageryDocApplication,
+  ImageryDocPermissionFlag
+};
+//# sourceMappingURL=imagery-doc.esm.js.map