@netless/window-manager 1.0.0-canary.22 → 1.0.0-canary.25

package/dist/index.es.js

@@ -19,7 +19,7 @@ var __spreadValues = (a2, b2) => {
 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$1, pick, isBoolean, isNumber, throttle, delay, omitBy, isUndefined, isInteger, orderBy, isEmpty, isFunction, isNull } from "lodash";
+import { debounce, isEqual, omit, isObject, has, get, size as size$1, mapValues, noop as noop$1, pick, isBoolean, isNumber, throttle, omitBy, isUndefined, isInteger, orderBy, isEmpty, isFunction, isNull } from "lodash";
 import { ScenePathType, UpdateEventKind, listenUpdated, unlistenUpdated, reaction, WhiteVersion, autorun, toJS, listenDisposed, unlistenDisposed, AnimationMode, ViewMode, isPlayer, isRoom, ApplianceNames, RoomPhase, InvisiblePlugin } from "white-web-sdk";
 import { v4 } from "uuid";
 import { genUID, SideEffectManager } from "side-effect-manager";
@@ -972,6 +972,11 @@ class WhiteBoardView {
     this.appProxy.updateSize(rect.width, rect.height);
   }
 }
+const log = (...args) => {
+  if (WindowManager.debug) {
+    console.log(`[WindowManager]:`, ...args);
+  }
+};
 const setupWrapper = (root) => {
   const playground = document.createElement("div");
   playground.className = "netless-window-manager-playground";
@@ -1002,6 +1007,19 @@ const serializeRoomMembers = (members) => {
     }, member);
   });
 };
+const createInvisiblePlugin = async (room) => {
+  try {
+    const manager = await room.createInvisiblePlugin(WindowManager, {});
+    return manager;
+  } catch (error) {
+    if (error.message === `invisible plugin "WindowManager" exits`) {
+      await wait(200);
+      return room.getInvisiblePlugin(WindowManager.kind);
+    } else {
+      log("createInvisiblePlugin failed", error);
+    }
+  }
+};
 class AppContext {
   constructor(manager, appId, appProxy, appOptions) {
     this.manager = manager;
@@ -1056,11 +1074,19 @@ class AppContext {
         this.ensurePageSize(params == null ? void 0 : params.size);
       }
       this.whiteBoardView = new WhiteBoardView(view, this, this.appProxy, this.ensurePageSize);
-      this.appProxy.sideEffectManager.add(() => {
-        return () => {
-          this.whiteBoardView = void 0;
-        };
-      });
+      this.appProxy.sideEffectManager.add(() => [
+        this.box._contentStageRect$.subscribe((rect) => {
+          viewWrapper.style.left = `${rect.x}px`;
+          viewWrapper.style.top = `${rect.y}px`;
+          viewWrapper.style.width = `${rect.width}px`;
+          viewWrapper.style.height = `${rect.height}px`;
+        }),
+        () => {
+          return () => {
+            this.whiteBoardView = void 0;
+          };
+        }
+      ]);
       this.appProxy.whiteBoardViewCreated$.setValue(true);
       return this.whiteBoardView;
     };
@@ -1147,7 +1173,7 @@ class AppContext {
   get members() {
     return this.manager.members;
   }
-  get memberState() {
+  get currentMember() {
     const self2 = findMemberByUid(this.room, this.manager.uid);
     if (!self2) {
       throw new Error(`Member ${this.manager.uid} not found.`);
@@ -1219,13 +1245,14 @@ class AppPageStateImpl {
 class CameraSynchronizer {
   constructor(saveCamera) {
     this.saveCamera = saveCamera;
-    this.setRect = debounce((rect) => {
+    this.setRect = (rect) => {
       this.rect = rect;
       if (this.remoteCamera && this.remoteSize) {
         this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
       }
-    }, 10);
+    };
     this.onRemoteUpdate = throttle((camera, size2) => {
+      var _a;
       this.remoteCamera = camera;
       this.remoteSize = size2;
       if (this.remoteSize && this.rect) {
@@ -1236,22 +1263,17 @@ class CameraSynchronizer {
           scale2 = this.rect.height / size2.height;
         }
         const nextScale = camera.scale * scale2;
-        const moveCamera = () => {
-          var _a;
-          const config = {
-            scale: nextScale,
-            animationMode: AnimationMode.Immediately
-          };
-          if (camera.centerX !== null) {
-            config.centerX = camera.centerX;
-          }
-          if (camera.centerY !== null) {
-            config.centerY = camera.centerY;
-          }
-          (_a = this.view) == null ? void 0 : _a.moveCamera(config);
+        const config = {
+          scale: nextScale,
+          animationMode: AnimationMode.Immediately
         };
-        moveCamera();
-        delay(moveCamera, 50);
+        if (camera.centerX !== null) {
+          config.centerX = camera.centerX;
+        }
+        if (camera.centerY !== null) {
+          config.centerY = camera.centerY;
+        }
+        (_a = this.view) == null ? void 0 : _a.moveCamera(config);
       }
     }, 10);
   }
@@ -1259,20 +1281,16 @@ class CameraSynchronizer {
     this.view = view;
   }
   onRemoteSizeUpdate(size2) {
+    var _a;
     this.remoteSize = size2;
     const needMoveCamera = !isEqual(pick(this.rect, ["width", "height"]), pick(size2, ["width", "height"]));
     if (this.rect && this.remoteCamera && needMoveCamera) {
       const scale2 = this.rect.width / size2.width;
       const nextScale = this.remoteCamera.scale * scale2;
-      const moveCamera = () => {
-        var _a;
-        (_a = this.view) == null ? void 0 : _a.moveCamera({
-          scale: nextScale,
-          animationMode: AnimationMode.Immediately
-        });
-      };
-      moveCamera();
-      delay(moveCamera, 50);
+      (_a = this.view) == null ? void 0 : _a.moveCamera({
+        scale: nextScale,
+        animationMode: AnimationMode.Immediately
+      });
     }
   }
   onLocalCameraUpdate(camera) {
@@ -1545,11 +1563,6 @@ const store = new AttributesDelegate({
     throw new Error("safeUpdateAttributes not implemented");
   }
 });
-const log = (...args) => {
-  if (WindowManager.debug) {
-    console.log(`[WindowManager]:`, ...args);
-  }
-};
 class AppProxy {
   constructor(params, manager, appId, isAddApp) {
     var _a;
@@ -4760,6 +4773,15 @@ const createBoxManager = (manager, callbacks2, emitter2, boxEmitter2, options) =
 class BoxManager {
   constructor(context, createTeleBoxManagerConfig) {
     this.context = context;
+    this.mainViewElement$ = new Val(void 0);
+    this.updateStyle = (element2, rect) => {
+      if (!element2)
+        return;
+      element2.style.width = rect.width + "px";
+      element2.style.height = rect.height + "px";
+      element2.style.left = rect.x + "px";
+      element2.style.top = rect.y + "px";
+    };
     this.sideEffectManager = new SideEffectManager();
     const { emitter: emitter2, callbacks: callbacks2, boxEmitter: boxEmitter2 } = context;
     this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
@@ -4828,6 +4850,7 @@ class BoxManager {
         this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
       }),
       this.teleBoxManager._stageRect$.subscribe((stage) => {
+        this.updateStyle(this.mainViewElement$.value, stage);
         emitter2.emit("playgroundSizeChange", stage);
         this.context.notifyContainerRectUpdate(stage);
       }),
@@ -5636,11 +5659,14 @@ class Cursor {
       let translateX = point.x - 2;
       let translateY = point.y - 18;
       if (type === "app") {
-        const wrapperRect = this.cursorManager.wrapperRect;
+        const wrapperRect = this.cursorManager.playgroundRect;
         if (wrapperRect) {
           translateX = translateX + rect.x - wrapperRect.x;
           translateY = translateY + rect.y - wrapperRect.y;
         }
+      } else {
+        translateX = translateX + rect.x;
+        translateY = translateY + rect.y;
       }
       if (point.x < 0 || point.x > rect.width || point.y < 0 || point.y > rect.height) {
         (_a = this.component) == null ? void 0 : _a.$set({ visible: false, x: translateX, y: translateY });
@@ -5871,7 +5897,6 @@ class CursorManager {
         wrapper.removeEventListener("pointerleave", this.mouseLeaveListener);
       };
     });
-    this.wrapperRect = wrapper.getBoundingClientRect();
   }
   setMainViewDivElement(div) {
     this.mainViewElement = div;
@@ -5900,8 +5925,9 @@ class CursorManager {
     }
   }
   updateContainerRect() {
-    var _a;
-    this.wrapperRect = (_a = WindowManager.playground) == null ? void 0 : _a.getBoundingClientRect();
+    var _a, _b;
+    this.wrapperRect = (_a = this.manager.boxManager) == null ? void 0 : _a.teleBoxManager.stageRect;
+    this.playgroundRect = (_b = WindowManager.playground) == null ? void 0 : _b.getBoundingClientRect();
   }
   deleteCursor(uid) {
     this.store.cleanCursor(uid);
@@ -15647,15 +15673,15 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.22";
-    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.18", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.3.0", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@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", "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.10" } };
+    this.version = "1.0.0-canary.25";
+    this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.18", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.3.0", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@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", "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.10" } };
     this.emitter = callbacks$1;
     this.viewMode = ViewMode.Broadcaster;
     this.viewMode$ = new Val(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": "1.0.0-alpha.18", "emittery": "^0.9.2", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.3.0", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@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", "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.10" } };
+    window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/telebox-insider": "1.0.0-alpha.18", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.1", "side-effect-manager": "^1.1.0", "uuid": "^7.0.3", "value-enhancer": "^1.3.0", "video.js": ">=7" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^0.2.9", "@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", "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.10" } };
   }
   static async mount(params) {
     var _a;
@@ -15737,12 +15763,12 @@ const _WindowManager = class extends InvisiblePlugin {
           } catch (error) {
             throw new Error("[WindowManger]: room must be switched to be writable");
           }
-          manager = await room.createInvisiblePlugin(_WindowManager, {});
-          manager.ensureAttributes();
+          manager = await createInvisiblePlugin(room);
+          manager == null ? void 0 : manager.ensureAttributes();
           await wait(500);
           await room.setWritable(false);
         } else {
-          manager = await room.createInvisiblePlugin(_WindowManager, {});
+          manager = await createInvisiblePlugin(room);
         }
       }
     }
@@ -15779,6 +15805,7 @@ const _WindowManager = class extends InvisiblePlugin {
         const mainViewElement = _WindowManager.initContainer(container, params.overwriteStyles);
         if (this.boxManager && _WindowManager.playground) {
           this.boxManager.setRoot(_WindowManager.playground);
+          this.boxManager.mainViewElement$.setValue(mainViewElement);
         }
         this.bindMainView(mainViewElement, params.disableCameraTransform);
         if (_WindowManager.playground) {