@netless/window-manager 0.4.59 → 0.4.61-beta.0

package/dist/index.mjs

@@ -20,7 +20,7 @@ var __spreadProps = (a2, b2) => __defProps(a2, __getOwnPropDescs(b2));
 import pRetry from "p-retry";
 import Emittery from "emittery";
 import { debounce, isEqual, omit, isObject, has, get, size as size$1, mapValues, noop as noop$2, pick, isEmpty, isInteger, orderBy, isFunction, isNumber, isNull } from "lodash";
-import { ScenePathType, UpdateEventKind, listenUpdated, unlistenUpdated, reaction, autorun, toJS, listenDisposed, unlistenDisposed, ViewMode, AnimationMode, isPlayer, isRoom, WhiteVersion, ApplianceNames, RoomPhase, InvisiblePlugin } from "white-web-sdk";
+import { ScenePathType, UpdateEventKind, listenUpdated, unlistenUpdated, reaction, autorun, toJS, listenDisposed, unlistenDisposed, ViewMode, AnimationMode, isPlayer, isRoom, WhiteVersion, ApplianceNames, RoomPhase, PlayerPhase, InvisiblePlugin } from "white-web-sdk";
 import { v4 } from "uuid";
 import { genUID, SideEffectManager } from "side-effect-manager";
 import { ResizeObserver as ResizeObserver$3 } from "@juggle/resize-observer";
@@ -1117,6 +1117,7 @@ var Fields = /* @__PURE__ */ ((Fields2) => {
   Fields2["CursorState"] = "cursorState";
   Fields2["FullPath"] = "fullPath";
   Fields2["Registered"] = "registered";
+  Fields2["IframeBridge"] = "iframeBridge";
   return Fields2;
 })(Fields || {});
 class AttributesDelegate {
@@ -1260,6 +1261,20 @@ class AttributesDelegate {
       setViewFocusScenePath(mainView, scenePath);
     }
   }
+  getIframeBridge() {
+    return get(this.attributes, ["iframeBridge"]);
+  }
+  setIframeBridge(data) {
+    if (isObject(data)) {
+      const oldState = this.getIframeBridge();
+      for (const key in data) {
+        const value = data[key];
+        if (oldState[key] !== value) {
+          this.context.safeUpdateAttributes(["iframeBridge", key], value);
+        }
+      }
+    }
+  }
 }
 const store = new AttributesDelegate({
   getAttributes: () => {
@@ -1806,8 +1821,18 @@ class MainViewProxy {
     this.setMainViewSize = debounce((size2) => {
       this.store.setMainViewSize(__spreadProps(__spreadValues({}, size2), { id: this.manager.uid }));
     }, 50);
+    this._syncMainViewTimer = 0;
     this.onCameraOrSizeUpdated = () => {
       callbacks$1.emit("cameraStateChange", this.cameraState);
+      if (this.manager.room && this.manager.room.syncMainView) {
+        clearTimeout(this._syncMainViewTimer);
+        this._syncMainViewTimer = setTimeout(this.syncMainView, 100, this.manager.room);
+      }
+    };
+    this.syncMainView = (room) => {
+      if (room.isWritable) {
+        room.syncMainView(this.mainView);
+      }
     };
     this.setViewMode = (mode) => {
       this.viewMode = mode;
@@ -9737,7 +9762,7 @@ class StaticDocsViewer {
         this.reportProgress(100, null);
         return;
       }
-      const scenePath = `${this.baseScenePath}/1`;
+      const scenePath = this.whiteboardView.focusScenePath || `${this.baseScenePath}/1`;
       const firstPage = this.pages[0];
       const { jsPDF } = await import("jspdf");
       const pdf = new jsPDF({
@@ -16905,18 +16930,527 @@ const BuiltinApps = {
 var videoJs = "";
 var style$1 = "";
 var style = "";
+var IframeEvents = /* @__PURE__ */ ((IframeEvents2) => {
+  IframeEvents2["Init"] = "Init";
+  IframeEvents2["AttributesUpdate"] = "AttributesUpdate";
+  IframeEvents2["SetAttributes"] = "SetAttributes";
+  IframeEvents2["RegisterMagixEvent"] = "RegisterMagixEvent";
+  IframeEvents2["RemoveMagixEvent"] = "RemoveMagixEvent";
+  IframeEvents2["RemoveAllMagixEvent"] = "RemoveAllMagixEvent";
+  IframeEvents2["RoomStateChanged"] = "RoomStateChanged";
+  IframeEvents2["DispatchMagixEvent"] = "DispatchMagixEvent";
+  IframeEvents2["ReciveMagixEvent"] = "ReciveMagixEvent";
+  IframeEvents2["NextPage"] = "NextPage";
+  IframeEvents2["PrevPage"] = "PrevPage";
+  IframeEvents2["SDKCreate"] = "SDKCreate";
+  IframeEvents2["OnCreate"] = "OnCreate";
+  IframeEvents2["SetPage"] = "SetPage";
+  IframeEvents2["GetAttributes"] = "GetAttributes";
+  IframeEvents2["Ready"] = "Ready";
+  IframeEvents2["Destory"] = "Destory";
+  IframeEvents2["StartCreate"] = "StartCreate";
+  IframeEvents2["WrapperDidUpdate"] = "WrapperDidUpdate";
+  IframeEvents2["DispayIframe"] = "DispayIframe";
+  IframeEvents2["HideIframe"] = "HideIframe";
+  IframeEvents2["GetRootRect"] = "GetRootRect";
+  IframeEvents2["ReplayRootRect"] = "ReplayRootRect";
+  IframeEvents2["PageTo"] = "PageTo";
+  return IframeEvents2;
+})(IframeEvents || {});
+var DomEvents = /* @__PURE__ */ ((DomEvents2) => {
+  DomEvents2["WrapperDidMount"] = "WrapperDidMount";
+  DomEvents2["IframeLoad"] = "IframeLoad";
+  return DomEvents2;
+})(DomEvents || {});
+const RefreshIDs = {
+  Ready: "Ready",
+  RootRect: "ReplayRootRect",
+  Message: "message",
+  ComputeStyle: "computeStyle",
+  Load: "load",
+  DisplayerState: "displayerState",
+  Show: "show",
+  Hide: "hide"
+};
+const times = (number2, iteratee) => {
+  return new Array(number2).fill(0).map((_, index2) => iteratee(index2));
+};
+const _IframeBridge = class {
+  constructor(manager, appManager) {
+    this.manager = manager;
+    this.appManager = appManager;
+    this.magixEventMap = /* @__PURE__ */ new Map();
+    this.cssList = [];
+    this.allowAppliances = ["clicker"];
+    this.bridgeDisposer = noop$2;
+    this.rootRect = null;
+    this.sideEffectManager = new SideEffectManager();
+    this.execListenIframe = debounce((options) => {
+      this.listenIframe(options);
+    }, 50);
+    this.onPhaseChangedListener = (phase) => {
+      if (phase === PlayerPhase.Playing) {
+        this.computedStyleAndIframeDisplay();
+      }
+    };
+    this.stateChangeListener = (state) => {
+      state = __spreadValues({}, state);
+      state.cameraState = this.manager.cameraState;
+      this.postMessage({ kind: "RoomStateChanged", payload: state });
+      if (state.cameraState) {
+        _IframeBridge.emitter.emit("GetRootRect");
+        this.computedStyle(state);
+      }
+      if (state.memberState) {
+        this.computedZindex();
+        this.updateStyle();
+      }
+      if (state.sceneState) {
+        this.computedIframeDisplay(state, this.attributes);
+      }
+    };
+    this.displayer = _IframeBridge.displayer = appManager.displayer;
+    this.iframe = this._createIframe();
+    this.sideEffectManager.addDisposer(_IframeBridge.emitter.on("ReplayRootRect", (rect) => {
+      this.rootRect = rect;
+    }), RefreshIDs.RootRect);
+    this.sideEffectManager.addDisposer(_IframeBridge.emitter.on("HideIframe", () => {
+      this.iframe.className = _IframeBridge.hiddenClass;
+    }), RefreshIDs.Hide);
+    this.sideEffectManager.addDisposer(_IframeBridge.emitter.on("DispayIframe", () => {
+      this.iframe.className = "";
+    }), RefreshIDs.Show);
+    this.sideEffectManager.addDisposer(_IframeBridge.emitter.on("created", () => {
+      this.bridgeDisposer();
+      this.bridgeDisposer = autorun(() => {
+        var _a;
+        const attributes = this.attributes;
+        if (attributes.url) {
+          const iframeSrc = (_a = this.iframe) == null ? void 0 : _a.src;
+          if (iframeSrc && iframeSrc !== attributes.url) {
+            this.execListenIframe(attributes);
+          }
+        }
+        if (attributes.displaySceneDir) {
+          this.computedIframeDisplay(this.displayer.state, attributes);
+        }
+        if ((attributes.width || attributes.height) && this.iframe) {
+          this.iframe.width = `${attributes.width}px`;
+          this.iframe.height = `${attributes.height}px`;
+        }
+        this.postMessage({ kind: "AttributesUpdate", payload: attributes });
+      });
+    }));
+    this.sideEffectManager.addDisposer(manager.emitter.on("cameraStateChange", () => {
+      this.computedStyle(this.displayer.state);
+    }));
+    _IframeBridge.onCreate(this);
+  }
+  static onCreate(plugin) {
+    _IframeBridge.emitter.emit("StartCreate");
+    _IframeBridge.emitter.emit("OnCreate", plugin);
+    _IframeBridge.emitter.emit("created");
+  }
+  insert(options) {
+    const initAttributes = {
+      url: options.url,
+      width: options.width,
+      height: options.height,
+      displaySceneDir: options.displaySceneDir,
+      useClicker: options.useClicker || false,
+      useSelector: options.useSelector
+    };
+    this.setAttributes(initAttributes);
+    const wrapperDidMountListener = () => {
+      this.getIframe();
+      this.listenIframe(this.attributes);
+      this.listenDisplayerState();
+      _IframeBridge.emitter.emit("GetRootRect");
+    };
+    if (this.getIframe()) {
+      wrapperDidMountListener();
+    } else {
+      const didMount = this.sideEffectManager.addDisposer(_IframeBridge.emitter.on("WrapperDidMount", () => {
+        wrapperDidMountListener();
+        this.sideEffectManager.flush(didMount);
+      }));
+      const didUpdate = this.sideEffectManager.addDisposer(_IframeBridge.emitter.on("WrapperDidUpdate", () => {
+        wrapperDidMountListener();
+        this.sideEffectManager.flush(didUpdate);
+      }));
+    }
+    if (this.attributes.useSelector) {
+      this.allowAppliances.push("selector");
+    }
+    this.computedStyle(this.displayer.state);
+    this.listenDisplayerCallbacks();
+    this.getComputedIframeStyle();
+    this.sideEffectManager.addEventListener(window, "message", this.messageListener.bind(this), void 0, RefreshIDs.Message);
+    _IframeBridge.alreadyCreate = true;
+    return this;
+  }
+  getComputedIframeStyle() {
+    this.sideEffectManager.setTimeout(() => {
+      if (this.iframe) {
+        getComputedStyle(this.iframe);
+      }
+    }, 200, RefreshIDs.ComputeStyle);
+  }
+  destroy() {
+    this.sideEffectManager.flushAll();
+    _IframeBridge.emitter.emit("Destory");
+    _IframeBridge.alreadyCreate = false;
+    _IframeBridge.emitter.clearListeners();
+  }
+  getIframe() {
+    this.iframe || (this.iframe = this._createIframe());
+    return this.iframe;
+  }
+  setIframeSize(params) {
+    if (this.iframe) {
+      this.iframe.width = `${params.width}px`;
+      this.iframe.height = `${params.height}px`;
+      this.setAttributes({ width: params.width, height: params.height });
+    }
+  }
+  get attributes() {
+    return this.appManager.store.getIframeBridge();
+  }
+  setAttributes(data) {
+    this.appManager.store.setIframeBridge(data);
+  }
+  _createIframe() {
+    const iframe = document.createElement("iframe");
+    iframe.id = "IframeBridge";
+    iframe.className = _IframeBridge.hiddenClass;
+    if (this.appManager.mainView.divElement) {
+      this.appManager.mainView.divElement.appendChild(iframe);
+    }
+    return iframe;
+  }
+  scaleIframeToFit(animationMode = AnimationMode.Immediately) {
+    if (!this.inDisplaySceneDir) {
+      return;
+    }
+    const { width = 1280, height = 720 } = this.attributes;
+    const x2 = width ? -width / 2 : 0;
+    const y2 = height ? -height / 2 : 0;
+    this.manager.moveCameraToContain({
+      originX: x2,
+      originY: y2,
+      width,
+      height,
+      animationMode
+    });
+  }
+  get isReplay() {
+    return this.manager.isReplay;
+  }
+  handleSetPage(data) {
+    if (this.isReplay || !this.attributes.displaySceneDir) {
+      return;
+    }
+    const page = data.payload;
+    const room = this.displayer;
+    const scenes = room.entireScenes()[this.attributes.displaySceneDir];
+    if (!scenes || scenes.length !== page) {
+      const genScenes = times(page, (index2) => ({ name: String(index2 + 1) }));
+      room.putScenes(this.attributes.displaySceneDir, genScenes);
+      this.manager.setMainViewScenePath(this.attributes.displaySceneDir);
+    }
+  }
+  listenIframe(options) {
+    const loadListener = (ev) => {
+      var _a;
+      this.postMessage({
+        kind: "Init",
+        payload: {
+          attributes: this.attributes,
+          roomState: (_a = _IframeBridge.displayer) == null ? void 0 : _a.state,
+          currentPage: this.currentPage,
+          observerId: this.displayer.observerId
+        }
+      });
+      _IframeBridge.emitter.emit("IframeLoad", ev);
+      this.sideEffectManager.addDisposer(_IframeBridge.emitter.on("Ready", () => {
+        var _a2;
+        this.postMessage((_a2 = this.attributes.lastEvent) == null ? void 0 : _a2.payload);
+      }), RefreshIDs.Ready);
+      this.computedStyleAndIframeDisplay();
+    };
+    if (options.url && this.iframe.src !== options.url) {
+      if (!this.src_url_equal_anchor)
+        this.src_url_equal_anchor = document.createElement("a");
+      this.src_url_equal_anchor.href = options.url;
+      if (this.src_url_equal_anchor.href !== this.iframe.src) {
+        this.iframe.src = options.url;
+      }
+    }
+    this.iframe.width = `${options.width}px`;
+    this.iframe.height = `${options.height}px`;
+    this.sideEffectManager.addEventListener(this.iframe, "load", loadListener, void 0, RefreshIDs.Load);
+  }
+  listenDisplayerState() {
+    if (this.isReplay) {
+      if (this.displayer._phase === PlayerPhase.Playing) {
+        this.computedStyleAndIframeDisplay();
+      }
+      this.sideEffectManager.add(() => {
+        this.displayer.callbacks.on("onPhaseChanged", this.onPhaseChangedListener);
+        return () => this.displayer.callbacks.off("onPhaseChanged", this.onPhaseChangedListener);
+      }, RefreshIDs.DisplayerState);
+    }
+    this.computedStyleAndIframeDisplay();
+  }
+  computedStyleAndIframeDisplay() {
+    this.computedStyle(this.displayer.state);
+    this.computedIframeDisplay(this.displayer.state, this.attributes);
+  }
+  listenDisplayerCallbacks() {
+    this.displayer.callbacks.on(this.callbackName, this.stateChangeListener);
+  }
+  get callbackName() {
+    return this.isReplay ? "onPlayerStateChanged" : "onRoomStateChanged";
+  }
+  computedStyle(_state) {
+    const cameraState = this.manager.cameraState;
+    const setWidth = this.attributes.width || 1280;
+    const setHeight = this.attributes.height || 720;
+    if (this.iframe) {
+      const { width, height, scale: scale2, centerX, centerY } = cameraState;
+      const rootRect = this.rootRect || { x: 0, y: 0 };
+      const transformOriginX = `${width / 2 + rootRect.x}px`;
+      const transformOriginY = `${height / 2 + rootRect.y}px`;
+      const transformOrigin = `transform-origin: ${transformOriginX} ${transformOriginY};`;
+      const iframeXDiff = (width - setWidth) / 2 * scale2;
+      const iframeYDiff = (height - setHeight) / 2 * scale2;
+      const x2 = -(centerX * scale2) + iframeXDiff;
+      const y2 = -(centerY * scale2) + iframeYDiff;
+      const transform = `transform: translate(${x2}px,${y2}px) scale(${scale2}, ${scale2});`;
+      const position = "position: absolute;";
+      const borderWidth = "border: 0.1px solid rgba(0,0,0,0);";
+      const left = `left: 0px;`;
+      const top = `top: 0px;`;
+      const cssList = [position, borderWidth, top, left, transformOrigin, transform];
+      this.cssList = cssList;
+      this.computedZindex();
+      this.updateStyle();
+    }
+  }
+  computedIframeDisplay(_state, _attributes) {
+    if (this.inDisplaySceneDir) {
+      _IframeBridge.emitter.emit("DispayIframe");
+    } else {
+      _IframeBridge.emitter.emit("HideIframe");
+    }
+  }
+  computedZindex() {
+    const zIndexString = "z-index: -1;";
+    const index2 = this.cssList.findIndex((css) => css === zIndexString);
+    if (index2 !== -1) {
+      this.cssList.splice(index2, 1);
+    }
+    if (!this.isClicker() || this.isDisableInput) {
+      this.cssList.push(zIndexString);
+    }
+  }
+  updateStyle() {
+    this.iframe.style.cssText = this.cssList.join(" ");
+  }
+  get iframeOrigin() {
+    if (this.iframe) {
+      try {
+        return new URL(this.iframe.src).origin;
+      } catch (err) {
+        console.warn(err);
+      }
+    }
+  }
+  messageListener(event) {
+    log("<<<", JSON.stringify(event.data));
+    if (event.origin !== this.iframeOrigin) {
+      return;
+    }
+    const data = event.data;
+    switch (data.kind) {
+      case "SetAttributes": {
+        this.handleSetAttributes(data);
+        break;
+      }
+      case "RegisterMagixEvent": {
+        this.handleRegisterMagixEvent(data);
+        break;
+      }
+      case "RemoveMagixEvent": {
+        this.handleRemoveMagixEvent(data);
+        break;
+      }
+      case "DispatchMagixEvent": {
+        this.handleDispatchMagixEvent(data);
+        break;
+      }
+      case "RemoveAllMagixEvent": {
+        this.handleRemoveAllMagixEvent();
+        break;
+      }
+      case "NextPage": {
+        this.handleNextPage();
+        break;
+      }
+      case "PrevPage": {
+        this.handlePrevPage();
+        break;
+      }
+      case "SDKCreate": {
+        this.handleSDKCreate();
+        break;
+      }
+      case "SetPage": {
+        this.handleSetPage(data);
+        break;
+      }
+      case "GetAttributes": {
+        this.handleGetAttributes();
+        break;
+      }
+      case "PageTo": {
+        this.handlePageTo(data);
+        break;
+      }
+      default: {
+        log(`${data.kind} not allow event.`);
+        break;
+      }
+    }
+  }
+  handleSDKCreate() {
+    this.postMessage({
+      kind: "Init",
+      payload: {
+        attributes: this.attributes,
+        roomState: this.displayer.state,
+        currentPage: this.currentPage,
+        observerId: this.displayer.observerId
+      }
+    });
+  }
+  handleDispatchMagixEvent(data) {
+    const eventPayload = data.payload;
+    this.appManager.safeDispatchMagixEvent(eventPayload.event, eventPayload.payload);
+  }
+  handleSetAttributes(data) {
+    this.setAttributes(data.payload);
+  }
+  handleRegisterMagixEvent(data) {
+    const eventName = data.payload;
+    const listener = (event) => {
+      if (event.authorId === this.displayer.observerId) {
+        return;
+      }
+      this.postMessage({ kind: "ReciveMagixEvent", payload: event });
+    };
+    this.magixEventMap.set(eventName, listener);
+    this.displayer.addMagixEventListener(eventName, listener);
+  }
+  handleRemoveMagixEvent(data) {
+    const eventName = data.payload;
+    const listener = this.magixEventMap.get(eventName);
+    this.displayer.removeMagixEventListener(eventName, listener);
+  }
+  handleNextPage() {
+    if (this.manager.canOperate) {
+      this.manager.nextPage();
+      this.dispatchMagixEvent("NextPage", {});
+    }
+  }
+  handlePrevPage() {
+    if (this.manager.canOperate) {
+      this.manager.prevPage();
+      this.dispatchMagixEvent("PrevPage", {});
+    }
+  }
+  handlePageTo(data) {
+    if (this.manager.canOperate) {
+      const page = data.payload;
+      if (!Number.isSafeInteger(page) || page <= 0) {
+        return;
+      }
+      this.manager.setMainViewSceneIndex(page - 1);
+      this.dispatchMagixEvent("PageTo", page - 1);
+    }
+  }
+  handleRemoveAllMagixEvent() {
+    this.magixEventMap.forEach((listener, event) => {
+      this.displayer.removeMagixEventListener(event, listener);
+    });
+    this.magixEventMap.clear();
+  }
+  handleGetAttributes() {
+    this.postMessage({
+      kind: "GetAttributes",
+      payload: this.attributes
+    });
+  }
+  postMessage(message) {
+    var _a;
+    if (this.iframe) {
+      (_a = this.iframe.contentWindow) == null ? void 0 : _a.postMessage(JSON.parse(JSON.stringify(message)), "*");
+    }
+  }
+  dispatchMagixEvent(event, payload) {
+    if (this.manager.canOperate) {
+      this.setAttributes({ lastEvent: { name: event, payload } });
+      this.displayer.dispatchMagixEvent(event, payload);
+    }
+  }
+  get currentIndex() {
+    return this.manager.mainViewSceneIndex;
+  }
+  get currentPage() {
+    return this.currentIndex + 1;
+  }
+  get totalPage() {
+    return this.manager.mainViewScenesLength;
+  }
+  get readonly() {
+    return !this.displayer.isWritable;
+  }
+  get inDisplaySceneDir() {
+    return this.manager.mainViewSceneDir === this.attributes.displaySceneDir;
+  }
+  isClicker() {
+    if (this.readonly) {
+      return false;
+    }
+    const currentApplianceName = this.displayer.state.memberState.currentApplianceName;
+    return this.allowAppliances.includes(currentApplianceName);
+  }
+  get isDisableInput() {
+    if ("disableDeviceInputs" in this.displayer) {
+      return this.displayer.disableDeviceInputs;
+    } else {
+      return true;
+    }
+  }
+};
+let IframeBridge = _IframeBridge;
+IframeBridge.kind = "IframeBridge";
+IframeBridge.hiddenClass = "netless-iframe-brdige-hidden";
+IframeBridge.emitter = new Emittery();
+IframeBridge.displayer = null;
+IframeBridge.alreadyCreate = false;
 const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "0.4.59";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.2.27", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^0.1.5", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.14", "@netless/app-media-player": "0.1.0-beta.5", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "jspdf": "^2.5.1", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.42" } };
+    this.version = "0.4.61-beta.0";
+    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.2.27", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^0.1.5", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.15", "@netless/app-media-player": "0.1.0-beta.5", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "jspdf": "^2.5.1", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.43" } };
     this.emitter = callbacks$1;
     this.viewMode = ViewMode.Broadcaster;
     this.isReplay = isPlayer(this.displayer);
     this.containerSizeRatio = _WindowManager.containerSizeRatio;
     _WindowManager.displayer = context.displayer;
-    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.2.27", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^0.1.5", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.14", "@netless/app-media-player": "0.1.0-beta.5", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "jspdf": "^2.5.1", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.42" } };
+    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "0.2.27", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^0.1.5", "uuid": "^7.0.3", "video.js": ">=7" }, "peerDependencies": { "jspdf": "2.5.1", "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.15", "@netless/app-media-player": "0.1.0-beta.5", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.22", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.4", "@types/uuid": "^8.3.1", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.1", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "jspdf": "^2.5.1", "less": "^4.1.1", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^2.5.3", "vitest": "^0.14.1", "white-web-sdk": "2.16.43" } };
   }
   static async mount(params) {
     const room = params.room;
@@ -17438,7 +17972,7 @@ const _WindowManager = class extends InvisiblePlugin {
     this._destroy();
   }
   _destroy() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     (_a = this.containerResizeObserver) == null ? void 0 : _a.disconnect();
     (_b = this.appManager) == null ? void 0 : _b.destroy();
     (_c = this.cursorManager) == null ? void 0 : _c.destroy();
@@ -17449,6 +17983,8 @@ const _WindowManager = class extends InvisiblePlugin {
       (_d = _WindowManager.playground.parentNode) == null ? void 0 : _d.removeChild(_WindowManager.playground);
     }
     _WindowManager.params = void 0;
+    (_e = this._iframeBridge) == null ? void 0 : _e.destroy();
+    this._iframeBridge = void 0;
     log("Destroyed");
   }
   bindMainView(divElement, disableCameraTransform) {
@@ -17545,8 +18081,8 @@ const _WindowManager = class extends InvisiblePlugin {
     (_c = (_b = this.appManager) == null ? void 0 : _b.refresher) == null ? void 0 : _c.refresh();
   }
   setContainerSizeRatio(ratio) {
-    if (!isNumber(ratio)) {
-      throw new Error(`[WindowManager]: updateContainerSizeRatio error, ratio must be a number. but got ${ratio}`);
+    if (!isNumber(ratio) || !(ratio > 0)) {
+      throw new Error(`[WindowManager]: updateContainerSizeRatio error, ratio must be a positive number. but got ${ratio}`);
     }
     _WindowManager.containerSizeRatio = ratio;
     this.containerSizeRatio = ratio;
@@ -17577,7 +18113,17 @@ const _WindowManager = class extends InvisiblePlugin {
       if (!this.attributes[Fields.Registered]) {
         this.safeSetAttributes({ [Fields.Registered]: {} });
       }
+      if (!this.attributes[Fields.IframeBridge]) {
+        this.safeSetAttributes({ [Fields.IframeBridge]: {} });
+      }
+    }
+  }
+  getIframeBridge() {
+    if (!this.appManager) {
+      throw new Error("[WindowManager]: should call getIframeBridge() after await mount()");
     }
+    this._iframeBridge || (this._iframeBridge = new IframeBridge(this, this.appManager));
+    return this._iframeBridge;
   }
 };
 let WindowManager = _WindowManager;
@@ -17586,5 +18132,5 @@ WindowManager.debug = false;
 WindowManager.containerSizeRatio = DEFAULT_CONTAINER_RATIO;
 WindowManager.isCreated = false;
 setupBuiltin();
-export { AppCreateError, AppManagerNotInitError, AppNotRegisterError, BindContainerRoomPhaseInvalidError, BoxManagerNotFoundError, BoxNotCreatedError, BuiltinApps, InvalidScenePath, ParamsInvalidError, WhiteWebSDKInvalidError, WindowManager, calculateNextIndex, reconnectRefresher };
+export { AppCreateError, AppManagerNotInitError, AppNotRegisterError, BindContainerRoomPhaseInvalidError, BoxManagerNotFoundError, BoxNotCreatedError, BuiltinApps, DomEvents, IframeBridge, IframeEvents, InvalidScenePath, ParamsInvalidError, WhiteWebSDKInvalidError, WindowManager, calculateNextIndex, reconnectRefresher };
 //# sourceMappingURL=index.mjs.map