@netless/window-manager 1.0.0-canary.19 → 1.0.0-canary.21

package/dist/index.d.ts

@@ -70,6 +70,11 @@ export declare type AppInitState = {
     sceneIndex?: number;
     boxState?: TeleBoxState;
     zIndex?: number;
+    visible?: boolean;
+    stageRatio?: number;
+    resizable?: boolean;
+    draggable?: boolean;
+    ratio?: number;
 };
 export declare type CursorMovePayload = {
     uid: string;

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, isNumber, throttle, delay, 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";
@@ -54,6 +53,11 @@ var AppAttributes = /* @__PURE__ */ ((AppAttributes2) => {
   AppAttributes2["Position"] = "position";
   AppAttributes2["SceneIndex"] = "SceneIndex";
   AppAttributes2["ZIndex"] = "zIndex";
+  AppAttributes2["Visible"] = "visible";
+  AppAttributes2["Ratio"] = "ratio";
+  AppAttributes2["StageRatio"] = "stageRatio";
+  AppAttributes2["Draggable"] = "draggable";
+  AppAttributes2["Resizable"] = "resizable";
   return AppAttributes2;
 })(AppAttributes || {});
 var AppEvents = /* @__PURE__ */ ((AppEvents2) => {
@@ -1285,7 +1289,7 @@ class ViewSync {
       }, "view");
     };
     this.onCameraUpdatedByDevice = (camera) => {
-      this.synchronizer.onLocalCameraUpdate(Object.assign(camera, { id: this.context.uid }));
+      this.synchronizer.onLocalCameraUpdate(Object.assign(toJS(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 };
@@ -1304,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) {
@@ -1596,27 +1602,15 @@ 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, () => {
@@ -1778,6 +1772,63 @@ class AppProxy {
       }
     }));
     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$),
+        createValSync(() => {
+          var _a2;
+          return (_a2 = this.appAttributes) == null ? void 0 : _a2.state.ratio;
+        }, box._ratio$),
+        createValSync(() => {
+          var _a2;
+          return (_a2 = this.appAttributes) == null ? void 0 : _a2.state.stageRatio;
+        }, box._stageRatio$),
+        createValSync(() => {
+          var _a2;
+          return (_a2 = this.appAttributes) == null ? void 0 : _a2.state.draggable;
+        }, box._draggable$),
+        createValSync(() => {
+          var _a2;
+          return (_a2 = this.appAttributes) == null ? void 0 : _a2.state.resizable;
+        }, box._resizable$),
+        box._visible$.reaction((visible, skipUpdate) => {
+          if (skipUpdate) {
+            return;
+          }
+          this.store.updateAppState(this.id, AppAttributes.Visible, visible);
+        }),
+        box._ratio$.reaction((ratio, skipUpdate) => {
+          console.log("ratio change", ratio, skipUpdate);
+          if (skipUpdate) {
+            return;
+          }
+          this.store.updateAppState(this.id, AppAttributes.Ratio, ratio);
+        }),
+        box._stageRatio$.reaction((stageRatio, skipUpdate) => {
+          if (skipUpdate) {
+            return;
+          }
+          this.store.updateAppState(this.id, AppAttributes.StageRatio, stageRatio);
+        }),
+        box._draggable$.reaction((draggable, skipUpdate) => {
+          if (skipUpdate) {
+            return;
+          }
+          this.store.updateAppState(this.id, AppAttributes.Draggable, draggable);
+        }),
+        box._resizable$.reaction((resizable, skipUpdate) => {
+          if (skipUpdate) {
+            return;
+          }
+          this.store.updateAppState(this.id, AppAttributes.Resizable, resizable);
+        })
+      ]);
+    });
   }
   createAppDir() {
     const scenePath = this.scenePath || this.appScenePath;
@@ -1895,6 +1946,11 @@ class AppProxy {
       this.box$.setValue(box);
       if (this.isAddApp && this.box) {
         this.store.updateAppState(appId, AppAttributes.ZIndex, this.box.zIndex);
+        this.store.updateAppState(appId, AppAttributes.Visible, this.box.visible);
+        this.store.updateAppState(appId, AppAttributes.Ratio, this.box.ratio);
+        this.store.updateAppState(appId, AppAttributes.StageRatio, this.box.stageRatio);
+        this.store.updateAppState(appId, AppAttributes.Draggable, this.box.draggable);
+        this.store.updateAppState(appId, AppAttributes.Resizable, this.box.resizable);
         this.boxManager.focusBox({ appId }, false);
       }
     } catch (error) {
@@ -2100,6 +2156,13 @@ class AppProxy {
     return this.destroy(true, true, false);
   }
 }
+const createValSync = (expr, Val2) => {
+  return reaction(expr, (val) => {
+    if (Val2.value !== val && val !== void 0) {
+      Val2.setValue(val, true);
+    }
+  }, { fireImmediately: true });
+};
 class ViewManager {
   constructor(displayer) {
     this.displayer = displayer;
@@ -2938,7 +3001,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();
     }
@@ -4911,15 +4976,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(() => {
@@ -5877,9 +5943,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);
@@ -15621,7 +15686,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.19";
+    this.version = "1.0.0-canary.21";
     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;