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

package/dist/index.d.ts

@@ -5,9 +5,10 @@ import { ReconnectRefresher } from "./ReconnectRefresher";
 import "video.js/dist/video-js.css";
 import "./style.css";
 import "@netless/telebox-insider/dist/style.css";
+import { Val } from "value-enhancer";
 import type { TELE_BOX_STATE } from "./BoxManager";
 import type { Apps, Position, ICamera, ISize } from "./AttributesDelegate";
-import type { Displayer, SceneDefinition, View, Room, InvisiblePluginContext, Camera, AnimationMode, CameraBound, Point, Rectangle, CameraState, Player, ImageInformation, SceneState } from "white-web-sdk";
+import type { Displayer, SceneDefinition, View, Room, InvisiblePluginContext, Camera, CameraBound, Point, CameraState, Player, ImageInformation, SceneState, Rectangle } from "white-web-sdk";
 import type { AppListeners } from "./AppListener";
 import type { ApplianceIcons, NetlessApp, RegisterParams } from "./typings";
 import type { TeleBoxColorScheme, TeleBoxState } from "@netless/telebox-insider";
@@ -15,7 +16,6 @@ import type { AppProxy } from "./App";
 import type { PublicEvent } from "./callback";
 import type Emittery from "emittery";
 import type { PageController, AddPageParams, PageState } from "./Page";
-import { Val } from "value-enhancer";
 export declare type WindowMangerAttributes = {
     modelValue?: string;
     boxState: TELE_BOX_STATE;
@@ -190,6 +190,13 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
     setMinimized(minimized: boolean): void;
     get mainView(): View;
     get camera(): Camera;
+    get baseCamera$(): Val<{
+        id: string;
+        centerX: number | null;
+        centerY: number | null;
+        scale: number;
+    } | undefined, any>;
+    get baseSize$(): Val<ISize | undefined, any>;
     get cameraState(): CameraState;
     get apps(): Apps | undefined;
     get boxState(): TeleBoxState | undefined;
@@ -217,12 +224,8 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
      * 关闭 APP
      */
     closeApp(appId: string): Promise<void>;
-    moveCamera(camera: Partial<Camera> & {
-        animationMode?: AnimationMode | undefined;
-    }): void;
-    moveCameraToContain(rectangle: Rectangle & Readonly<{
-        animationMode?: AnimationMode;
-    }>): void;
+    moveCamera(camera: Partial<Camera>): void;
+    moveCameraToContain(rectangle: Rectangle): void;
     convertToPointInWorld(point: Point): Point;
     setCameraBound(cameraBound: CameraBound): void;
     onDestroy(): void;

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, omitBy, isUndefined, isInteger, orderBy, isEmpty, isFunction, isNull } from "lodash";
+import { debounce, isObject, has, get, size as size$1, mapValues, noop as noop$1, pick, isBoolean, isNumber, throttle, isEqual, omitBy, isUndefined, isInteger, orderBy, isEmpty, omit, 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";
@@ -38,8 +38,6 @@ var Events = /* @__PURE__ */ ((Events2) => {
   Events2["SetMainViewSceneIndex"] = "SetMainViewSceneIndex";
   Events2["SetAppFocusIndex"] = "SetAppFocusIndex";
   Events2["SwitchViewsToFreedom"] = "SwitchViewsToFreedom";
-  Events2["MoveCamera"] = "MoveCamera";
-  Events2["MoveCameraToContain"] = "MoveCameraToContain";
   Events2["CursorMove"] = "CursorMove";
   Events2["RootDirRemoved"] = "RootDirRemoved";
   Events2["Refresh"] = "Refresh";
@@ -473,14 +471,6 @@ class AppListeners {
             this.setMainViewScenePathHandler(data.payload);
             break;
           }
-          case Events.MoveCamera: {
-            this.moveCameraHandler(data.payload);
-            break;
-          }
-          case Events.MoveCameraToContain: {
-            this.moveCameraToContainHandler(data.payload);
-            break;
-          }
           case Events.CursorMove: {
             this.cursorMoveHandler(data.payload);
             break;
@@ -520,14 +510,6 @@ class AppListeners {
       setViewFocusScenePath(this.manager.mainView, nextScenePath);
       callbacks$1.emit("mainViewScenePathChange", nextScenePath);
     };
-    this.moveCameraHandler = (payload) => {
-      if (isEqual(omit(payload, ["animationMode"]), __spreadValues({}, this.manager.mainView.camera)))
-        return;
-      this.manager.mainView.moveCamera(payload);
-    };
-    this.moveCameraToContainHandler = (payload) => {
-      this.manager.mainView.moveCameraToContain(payload);
-    };
     this.cursorMoveHandler = (payload) => {
       emitter.emit("cursorMove", payload);
     };
@@ -953,11 +935,11 @@ class WhiteBoardView {
     this.appProxy.sideEffectManager.add(() => appProxy.appEmitter.on("pageStateChange", (pageState) => {
       pageState$.setValue(pageState);
     }));
-    const camera$ = new Val(pick(this.view.camera, ["centerX", "centerY"]));
-    this.camera$ = camera$;
+    const camera$ = new Val(pick(this.view.camera, ["centerX", "centerY", "scale"]));
+    this.baseCamera$ = camera$;
     this.appProxy.sideEffectManager.add(() => appProxy.camera$.subscribe((camera) => {
       if (camera) {
-        camera$.setValue(pick(camera, ["centerX", "centerY"]));
+        camera$.setValue(pick(camera, ["centerX", "centerY", "scale"]));
       }
     }));
     view.disableCameraTransform = true;
@@ -968,7 +950,7 @@ class WhiteBoardView {
   moveCamera(camera) {
     this.appProxy.moveCamera(camera);
   }
-  setRect(rect) {
+  setBaseRect(rect) {
     this.appProxy.updateSize(rect.width, rect.height);
   }
 }
@@ -1265,7 +1247,7 @@ class CameraSynchronizer {
         const nextScale = camera.scale * scale2;
         const config = {
           scale: nextScale,
-          animationMode: AnimationMode.Immediately
+          animationMode: AnimationMode.Continuous
         };
         if (camera.centerX !== null) {
           config.centerX = camera.centerX;
@@ -1289,7 +1271,7 @@ class CameraSynchronizer {
       const nextScale = this.remoteCamera.scale * scale2;
       (_a = this.view) == null ? void 0 : _a.moveCamera({
         scale: nextScale,
-        animationMode: AnimationMode.Immediately
+        animationMode: AnimationMode.Continuous
       });
     }
   }
@@ -1933,6 +1915,10 @@ 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.Size, {
+          width: this.box.intrinsicWidth,
+          height: this.box.intrinsicHeight
+        });
         this.boxManager.focusBox({ appId }, false);
       }
     } catch (error) {
@@ -2357,12 +2343,14 @@ class MainViewProxy {
   rebind() {
     const divElement = this.mainView.divElement;
     const disableCameraTransform = this.mainView.disableCameraTransform;
+    const camera = __spreadValues({}, this.mainView.camera);
     this.stop();
     releaseView(this.mainView);
     this.removeMainViewListener();
     this.mainView = this.createMainView();
     this.mainView.disableCameraTransform = disableCameraTransform;
     this.mainView.divElement = divElement;
+    this.mainView.moveCamera(__spreadProps(__spreadValues({}, camera), { animationMode: AnimationMode.Immediately }));
     this.addMainViewListener();
     this.start();
   }
@@ -2634,8 +2622,7 @@ class AppManager {
       this.dispatchInternalEvent(Events.AppBoxStateChange, payload);
     };
     this.addAppsChangeListener = () => {
-      var _a;
-      (_a = this.refresher) == null ? void 0 : _a.add("apps", () => {
+      this.refresher.add("apps", () => {
         return safeListenPropsUpdated(() => this.attributes.apps, () => {
           this.attributesUpdateCallback(this.attributes.apps);
         });
@@ -3128,6 +3115,7 @@ class AppManager {
     }
   }
   async onReconnected() {
+    this.attributesUpdateCallback(this.attributes.apps);
     const appProxies = Array.from(this.appProxies.values());
     const reconnected = appProxies.map((appProxy) => {
       return appProxy.onReconnected();
@@ -15673,7 +15661,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
 const _WindowManager = class extends InvisiblePlugin {
   constructor(context) {
     super(context);
-    this.version = "1.0.0-canary.25";
+    this.version = "1.0.0-canary.26";
     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;
@@ -16076,6 +16064,20 @@ const _WindowManager = class extends InvisiblePlugin {
       throw new AppManagerNotInitError();
     }
   }
+  get baseCamera$() {
+    if (this.appManager) {
+      return this.appManager.mainViewProxy.camera$;
+    } else {
+      throw new AppManagerNotInitError();
+    }
+  }
+  get baseSize$() {
+    if (this.appManager) {
+      return this.appManager.mainViewProxy.size$;
+    } else {
+      throw new AppManagerNotInitError();
+    }
+  }
   get cameraState() {
     if (this.appManager) {
       return this.appManager.mainViewProxy.cameraState;
@@ -16169,26 +16171,31 @@ const _WindowManager = class extends InvisiblePlugin {
     return (_a = this.appManager) == null ? void 0 : _a.closeApp(appId);
   }
   moveCamera(camera) {
-    var _a;
-    const pureCamera = omit(camera, ["animationMode"]);
     const mainViewCamera = __spreadValues({}, this.mainView.camera);
-    if (isEqual(__spreadValues(__spreadValues({}, mainViewCamera), pureCamera), mainViewCamera))
+    const nextCamera = __spreadValues(__spreadValues({}, mainViewCamera), camera);
+    if (isEqual(nextCamera, mainViewCamera))
       return;
-    this.mainView.moveCamera(camera);
-    (_a = this.appManager) == null ? void 0 : _a.dispatchInternalEvent(Events.MoveCamera, camera);
-    setTimeout(() => {
-      var _a2;
-      (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.storeCurrentCamera();
-    }, 500);
+    if (!this.appManager)
+      return;
+    this.appManager.mainViewProxy.storeCamera(__spreadValues({
+      id: this.appManager.uid
+    }, nextCamera));
   }
   moveCameraToContain(rectangle) {
-    var _a;
-    this.mainView.moveCameraToContain(rectangle);
-    (_a = this.appManager) == null ? void 0 : _a.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
-    setTimeout(() => {
-      var _a2;
-      (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.storeCurrentCamera();
-    }, 500);
+    if (!this.appManager)
+      return;
+    const mainViewSize = this.appManager.mainViewProxy.size$.value;
+    if (mainViewSize) {
+      const wScale = mainViewSize.width / rectangle.width;
+      const hScale = mainViewSize.height / rectangle.height;
+      const nextScale = Math.min(wScale, hScale);
+      this.appManager.mainViewProxy.storeCamera({
+        id: this.appManager.uid,
+        scale: nextScale,
+        centerX: rectangle.originX,
+        centerY: rectangle.originY
+      });
+    }
   }
   convertToPointInWorld(point) {
     return this.mainView.convertToPointInWorld(point);