@netless/window-manager 1.0.0-canary.20 → 1.0.0-canary.23

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, isNumber, throttle, delay, 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";
@@ -33,7 +33,6 @@ var Events = /* @__PURE__ */ ((Events2) => {
   Events2["AppBoxStateChange"] = "AppBoxStateChange";
   Events2["GetAttributes"] = "GetAttributes";
   Events2["UpdateWindowManagerWrapper"] = "UpdateWindowManagerWrapper";
-  Events2["InitReplay"] = "InitReplay";
   Events2["WindowCreated"] = "WindowCreated";
   Events2["SetMainViewScenePath"] = "SetMainViewScenePath";
   Events2["SetMainViewSceneIndex"] = "SetMainViewSceneIndex";
@@ -661,16 +660,6 @@ const safeListenPropsUpdated = (getProps, callback, onDestroyed) => {
 };
 const onObjectRemoved = onObjectByEvent(UpdateEventKind.Removed);
 onObjectByEvent(UpdateEventKind.Inserted);
-const createValSync = (expr, Val2, isAddApp) => {
-  let skipUpdate = false;
-  return reaction(expr, (val) => {
-    if (isAddApp && !skipUpdate) {
-      skipUpdate = true;
-    } else {
-      Val2.setValue(val);
-    }
-  }, { fireImmediately: true });
-};
 const plainObjectKeys = Object.keys;
 function isRef(e2) {
   return Boolean(has(e2, "__isRef"));
@@ -1043,7 +1032,7 @@ class AppContext {
         return appAttr == null ? void 0 : appAttr.options["scenes"];
       }
     };
-    this.createWhiteBoardView = (size2) => {
+    this.createWhiteBoardView = (params) => {
       var _a;
       if (this.whiteBoardView) {
         return this.whiteBoardView;
@@ -1052,6 +1041,11 @@ class AppContext {
       if (!view) {
         view = this.appProxy.createAppDir();
       }
+      if (params) {
+        if (isBoolean(params.syncCamera)) {
+          this.appProxy.syncCamera$.setValue(params.syncCamera);
+        }
+      }
       const viewWrapper = document.createElement("div");
       this._viewWrapper = viewWrapper;
       viewWrapper.className = "window-manager-view-wrapper";
@@ -1059,7 +1053,7 @@ class AppContext {
       view.divElement = viewWrapper;
       this.appProxy.fireMemberStateChange();
       if (this.isAddApp) {
-        this.ensurePageSize(size2);
+        this.ensurePageSize(params == null ? void 0 : params.size);
       }
       this.whiteBoardView = new WhiteBoardView(view, this, this.appProxy, this.ensurePageSize);
       this.appProxy.sideEffectManager.add(() => {
@@ -1067,6 +1061,7 @@ class AppContext {
           this.whiteBoardView = void 0;
         };
       });
+      this.appProxy.whiteBoardViewCreated$.setValue(true);
       return this.whiteBoardView;
     };
     this.ensurePageSize = (size2) => {
@@ -1224,13 +1219,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) {
@@ -1241,22 +1237,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);
   }
@@ -1264,20 +1255,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) {
@@ -1302,7 +1289,7 @@ class ViewSync {
     this.onCameraUpdatedByDevice = (camera) => {
       if (!camera)
         return;
-      this.synchronizer.onLocalCameraUpdate(Object.assign(camera, { id: this.context.uid }));
+      this.synchronizer.onLocalCameraUpdate(__spreadProps(__spreadValues({}, camera), { id: this.context.uid }));
       const stage = this.context.stageRect$.value;
       if (stage) {
         const size2 = { width: stage.width, height: stage.height, id: this.context.uid };
@@ -1321,33 +1308,35 @@ class ViewSync {
       }
     });
     this.bindView(this.context.view$.value);
-    this.sem.add(() => this.context.view$.subscribe((view) => {
-      const currentCamera = this.context.camera$.value;
-      if (currentCamera && this.context.size$.value) {
-        view == null ? void 0 : view.moveCamera({
-          scale: 1,
-          animationMode: AnimationMode.Immediately
-        });
-        this.synchronizer.onRemoteUpdate(currentCamera, this.context.size$.value);
-      }
-      this.bindView(view);
-    }));
-    this.sem.add(() => this.context.camera$.subscribe((camera, skipUpdate) => {
-      const size2 = this.context.size$.value;
-      if (camera && size2 && !skipUpdate) {
-        this.synchronizer.onRemoteUpdate(camera, size2);
-      }
-    }));
-    this.sem.add(() => this.context.size$.subscribe((size2) => {
-      if (size2) {
-        this.synchronizer.onRemoteSizeUpdate(size2);
-      }
-    }));
-    this.sem.add(() => this.context.stageRect$.reaction((rect) => {
-      if (rect) {
-        this.synchronizer.setRect(rect);
-      }
-    }));
+    this.sem.add(() => [
+      this.context.view$.subscribe((view) => {
+        const currentCamera = this.context.camera$.value;
+        if (currentCamera && this.context.size$.value) {
+          view == null ? void 0 : view.moveCamera({
+            scale: 1,
+            animationMode: AnimationMode.Immediately
+          });
+          this.synchronizer.onRemoteUpdate(currentCamera, this.context.size$.value);
+        }
+        this.bindView(view);
+      }),
+      this.context.camera$.subscribe((camera, skipUpdate) => {
+        const size2 = this.context.size$.value;
+        if (camera && size2 && !skipUpdate) {
+          this.synchronizer.onRemoteUpdate(camera, size2);
+        }
+      }),
+      this.context.size$.subscribe((size2) => {
+        if (size2) {
+          this.synchronizer.onRemoteSizeUpdate(size2);
+        }
+      }),
+      this.context.stageRect$.reaction((rect) => {
+        if (rect) {
+          this.synchronizer.setRect(rect);
+        }
+      })
+    ]);
     const camera$size$ = combine([this.context.camera$, this.context.size$]);
     camera$size$.reaction(([camera, size2]) => {
       if (camera && size2) {
@@ -1571,6 +1560,8 @@ class AppProxy {
     this.size$ = this.valManager.attach(new Val(void 0));
     this.box$ = this.valManager.attach(new Val(void 0));
     this.view$ = this.valManager.attach(new Val(void 0));
+    this.syncCamera$ = this.valManager.attach(new Val(true));
+    this.whiteBoardViewCreated$ = this.valManager.attach(new Val(false));
     this.fireMemberStateChange = () => {
       if (this.manager.room) {
         this.onMemberStateChange(this.manager.room.state.memberState);
@@ -1613,57 +1604,47 @@ class AppProxy {
       const attrs = this.store.getAppState(id2);
       if (!attrs)
         return;
-      const position = attrs == null ? void 0 : attrs[AppAttributes.Position];
       const focus = this.store.focus;
-      const size2 = attrs == null ? void 0 : attrs[AppAttributes.Size];
-      const sceneIndex = attrs == null ? void 0 : attrs[AppAttributes.SceneIndex];
       const maximized = (_a2 = this.attributes) == null ? void 0 : _a2["maximized"];
       const minimized = (_b = this.attributes) == null ? void 0 : _b["minimized"];
-      const zIndex = attrs == null ? void 0 : attrs.zIndex;
-      let payload = { maximized, minimized, zIndex };
-      if (position) {
-        payload = __spreadProps(__spreadValues({}, payload), { id: id2, x: position.x, y: position.y });
-      }
+      let payload = { maximized, minimized, id: id2 };
+      const state = omitBy(attrs, isUndefined);
       if (focus === id2) {
         payload = __spreadProps(__spreadValues({}, payload), { focus: true });
       }
-      if (size2) {
-        payload = __spreadProps(__spreadValues({}, payload), { width: size2.width, height: size2.height });
-      }
-      if (sceneIndex) {
-        payload = __spreadProps(__spreadValues({}, payload), { sceneIndex });
-      }
-      return payload;
+      return Object.assign(payload, state);
     };
     this.appAttributesUpdateListener = (appId2) => {
-      this.manager.refresher.add(appId2, () => {
-        return autorun(() => {
-          const attrs = this.manager.attributes[appId2];
-          if (attrs) {
-            this.appEmitter.emit("attributesUpdate", attrs);
-          }
-        });
-      });
-      this.manager.refresher.add(this.stateKey, () => {
-        return autorun(() => {
-          var _a2, _b, _c;
-          const appState = (_a2 = this.appAttributes) == null ? void 0 : _a2.state;
-          if ((appState == null ? void 0 : appState.zIndex) > 0 && appState.zIndex !== ((_b = this.box) == null ? void 0 : _b.zIndex)) {
-            (_c = this.boxManager) == null ? void 0 : _c.setZIndex(appId2, appState.zIndex);
-          }
-        });
-      });
-      this.manager.refresher.add(`${appId2}-fullPath`, () => {
-        return autorun(() => {
-          var _a2;
-          const fullPath = (_a2 = this.appAttributes) == null ? void 0 : _a2.fullPath;
-          this.setFocusScenePathHandler(fullPath);
-          if (this.fullPath$.value !== fullPath) {
-            this.notifyPageStateChange();
-            this.fullPath$.setValue(fullPath);
-          }
-        });
-      });
+      this.sideEffectManager.add(() => [
+        this.manager.refresher.add(appId2, () => {
+          return autorun(() => {
+            const attrs = this.manager.attributes[appId2];
+            if (attrs) {
+              this.appEmitter.emit("attributesUpdate", attrs);
+            }
+          });
+        }),
+        this.manager.refresher.add(this.stateKey, () => {
+          return autorun(() => {
+            var _a2, _b, _c;
+            const appState = (_a2 = this.appAttributes) == null ? void 0 : _a2.state;
+            if ((appState == null ? void 0 : appState.zIndex) > 0 && appState.zIndex !== ((_b = this.box) == null ? void 0 : _b.zIndex)) {
+              (_c = this.boxManager) == null ? void 0 : _c.setZIndex(appId2, appState.zIndex);
+            }
+          });
+        }),
+        this.manager.refresher.add(`${appId2}-fullPath`, () => {
+          return autorun(() => {
+            var _a2;
+            const fullPath = (_a2 = this.appAttributes) == null ? void 0 : _a2.fullPath;
+            this.setFocusScenePathHandler(fullPath);
+            if (this.fullPath$.value !== fullPath) {
+              this.notifyPageStateChange();
+              this.fullPath$.setValue(fullPath);
+            }
+          });
+        })
+      ]);
     };
     this.setFocusScenePathHandler = debounce((fullPath) => {
       var _a2;
@@ -1757,86 +1738,63 @@ class AppProxy {
     this.size$.setValue(toJS(this.appAttributes.size));
     this.addCameraReaction();
     this.addSizeReaction();
-    this.sideEffectManager.add(() => combine([this.box$, this.view$]).subscribe(([box, view]) => {
-      if (box && view) {
-        if (!this.camera$.value) {
-          this.storeCamera({
-            centerX: null,
-            centerY: null,
-            scale: 1,
-            id: this.uid
-          });
-          this.camera$.setValue(toJS(this.appAttributes.camera));
-        }
-        if (!this.size$.value && box.contentStageRect) {
-          const initialRect = this.computedInitialRect(box.contentStageRect);
-          const width = (initialRect == null ? void 0 : initialRect.width) || box.contentStageRect.width;
-          const height = (initialRect == null ? void 0 : initialRect.height) || box.contentStageRect.height;
-          this.storeSize({
-            id: this.uid,
-            width,
-            height
+    this.sideEffectManager.add(() => emitter.on("memberStateChange", this.onMemberStateChange));
+    this.sideEffectManager.add(() => [
+      this.syncCamera$.reaction((syncCamera) => {
+        if (!syncCamera) {
+          if (this.viewSync) {
+            this.viewSync.destroy();
+            this.viewSync = void 0;
+            this.sideEffectManager.flush("camera");
+            this.sideEffectManager.flush("size");
+          }
+        }
+      }),
+      this.whiteBoardViewCreated$.reaction((created) => {
+        if (created && this.box) {
+          if (!this.syncCamera$.value)
+            return;
+          combine([this.box$, this.view$]).subscribe(([box, view]) => {
+            if (box && view) {
+              if (!this.camera$.value) {
+                this.storeCamera({
+                  centerX: null,
+                  centerY: null,
+                  scale: 1,
+                  id: this.uid
+                });
+                this.camera$.setValue(toJS(this.appAttributes.camera));
+              }
+              if (!this.size$.value && box.contentStageRect) {
+                const initialRect = this.computedInitialRect(box.contentStageRect);
+                const width = (initialRect == null ? void 0 : initialRect.width) || box.contentStageRect.width;
+                const height = (initialRect == null ? void 0 : initialRect.height) || box.contentStageRect.height;
+                this.storeSize({
+                  id: this.uid,
+                  width,
+                  height
+                });
+                this.size$.setValue(toJS(this.appAttributes.size));
+              }
+              this.viewSync = new ViewSync({
+                uid: this.uid,
+                view$: this.view$,
+                camera$: this.camera$,
+                size$: this.size$,
+                stageRect$: box._contentStageRect$,
+                storeCamera: this.storeCamera,
+                storeSize: this.storeSize
+              });
+              this.sideEffectManager.add(() => () => {
+                var _a2;
+                return (_a2 = this.viewSync) == null ? void 0 : _a2.destroy();
+              });
+              this.whiteBoardViewCreated$.destroy();
+            }
           });
-          this.size$.setValue(toJS(this.appAttributes.size));
         }
-        this.viewSync = new ViewSync({
-          uid: this.uid,
-          view$: this.view$,
-          camera$: this.camera$,
-          size$: this.size$,
-          stageRect$: box._contentStageRect$,
-          storeCamera: this.storeCamera,
-          storeSize: this.storeSize
-        });
-        this.sideEffectManager.add(() => () => {
-          var _a2;
-          return (_a2 = this.viewSync) == null ? void 0 : _a2.destroy();
-        });
-      }
-    }));
-    this.sideEffectManager.add(() => emitter.on("memberStateChange", this.onMemberStateChange));
-    this.box$.subscribe((box) => {
-      if (!box)
-        return;
-      this.sideEffectManager.add(() => [
-        createValSync(() => {
-          var _a2;
-          return (_a2 = this.appAttributes) == null ? void 0 : _a2.state.visible;
-        }, box._visible$, this.isAddApp),
-        createValSync(() => {
-          var _a2;
-          return (_a2 = this.appAttributes) == null ? void 0 : _a2.state.ratio;
-        }, box._ratio$, this.isAddApp),
-        createValSync(() => {
-          var _a2;
-          return (_a2 = this.appAttributes) == null ? void 0 : _a2.state.stageRatio;
-        }, box._stageRatio$, this.isAddApp),
-        createValSync(() => {
-          var _a2;
-          return (_a2 = this.appAttributes) == null ? void 0 : _a2.state.draggable;
-        }, box._draggable$, this.isAddApp),
-        createValSync(() => {
-          var _a2;
-          return (_a2 = this.appAttributes) == null ? void 0 : _a2.state.resizable;
-        }, box._resizable$, this.isAddApp),
-        box._visible$.subscribe((visible) => {
-          this.store.updateAppState(this.id, AppAttributes.Visible, visible);
-        }),
-        box._ratio$.subscribe((ratio) => {
-          this.store.updateAppState(this.id, AppAttributes.Ratio, ratio);
-        }),
-        box._stageRatio$.subscribe((stageRatio) => {
-          this.store.updateAppState(this.id, AppAttributes.StageRatio, stageRatio);
-        }),
-        box._draggable$.subscribe((draggable) => {
-          this.store.updateAppState(this.id, AppAttributes.Draggable, draggable);
-        }),
-        box._resizable$.subscribe((resizable) => {
-          console.log("resizable change", resizable);
-          this.store.updateAppState(this.id, AppAttributes.Resizable, resizable);
-        })
-      ]);
-    });
+      })
+    ]);
   }
   createAppDir() {
     const scenePath = this.scenePath || this.appScenePath;
@@ -2148,11 +2106,6 @@ class AppProxy {
     this.appProxies.delete(this.id);
     this.viewManager.destroyView(this.id);
     this.manager.appStatus.delete(this.id);
-    this.manager.refresher.remove(this.id);
-    this.manager.refresher.remove(this.stateKey);
-    this.manager.refresher.remove(`${this.id}-fullPath`);
-    this.manager.refresher.remove(`${this.id}-camera`);
-    this.manager.refresher.remove(`${this.id}-size`);
     this.valManager.destroy();
   }
   close() {
@@ -2997,7 +2950,9 @@ class AppManager {
   bindMainView(divElement, disableCameraTransform) {
     const mainView = this.mainViewProxy.view;
     mainView.disableCameraTransform = disableCameraTransform;
-    mainView.divElement = divElement;
+    wait(30).then(() => {
+      mainView.divElement = divElement;
+    });
     if (!mainView.focusScenePath) {
       this.setMainViewFocusPath();
     }
@@ -4970,15 +4925,16 @@ class BoxManager {
     return this.teleBoxManager.topBox;
   }
   updateBoxState(state) {
+    var _a, _b, _c, _d;
     if (!state)
       return;
     const box = this.getBox(state.id);
     if (box) {
       this.teleBoxManager.update(box.id, {
-        x: state.x,
-        y: state.y,
-        width: state.width || 0.5,
-        height: state.height || 0.5,
+        x: (_a = state.position) == null ? void 0 : _a.x,
+        y: (_b = state.position) == null ? void 0 : _b.y,
+        width: ((_c = state.size) == null ? void 0 : _c.width) || 0.5,
+        height: ((_d = state.size) == null ? void 0 : _d.height) || 0.5,
         zIndex: state.zIndex
       }, true);
       setTimeout(() => {
@@ -5936,9 +5892,8 @@ class CursorManager {
     }
   }
   updateContainerRect() {
-    var _a, _b;
-    this.containerRect = (_a = WindowManager.container) == null ? void 0 : _a.getBoundingClientRect();
-    this.wrapperRect = (_b = WindowManager.playground) == null ? void 0 : _b.getBoundingClientRect();
+    var _a;
+    this.wrapperRect = (_a = WindowManager.playground) == null ? void 0 : _a.getBoundingClientRect();
   }
   deleteCursor(uid) {
     this.store.cleanCursor(uid);
@@ -5992,12 +5947,16 @@ class ReconnectRefresher {
     this.reactors = /* @__PURE__ */ new Map();
     this.disposers = /* @__PURE__ */ new Map();
     this.onPhaseChanged = (phase) => {
-      var _a;
+      var _a, _b;
       if (phase === RoomPhase.Reconnecting) {
         this.ctx.emitter.emit("startReconnect");
       }
       if (phase === RoomPhase.Connected && this.phase === RoomPhase.Reconnecting) {
-        (_a = this.room) == null ? void 0 : _a.dispatchMagixEvent(EnsureReconnectEvent, {});
+        if ((_a = this.room) == null ? void 0 : _a.isWritable) {
+          (_b = this.room) == null ? void 0 : _b.dispatchMagixEvent(EnsureReconnectEvent, {});
+        } else {
+          this.onReconnected();
+        }
       }
       this.phase = phase;
     };
@@ -15680,7 +15639,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.20";
+    this.version = "1.0.0-canary.23";
     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.emitter = callbacks$1;
     this.viewMode = ViewMode.Broadcaster;