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

package/docs/mirgrate-to-1.0.md

@@ -0,0 +1,28 @@
+## 迁移至 `@netless/window-manager@1.0`
+
+### 样式
+
+1.0 之前
+
+```html
+<div class="netless-window-manager-playground">
+    <div class="netless-window-manager-sizer">
+        <div class="netless-window-manager-wrapper">
+            <div class="netless-window-manager-main-view"></div>
+        </div>
+    </div>
+</div>
+```
+
+1.0 之后
+
+```html
+<div class="netless-window-manager-playground">
+    <div class="netless-window-manager-main-view"></div>
+</div>
+```
+
+
+### `APP` 迁移
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.0-canary.16",
+  "version": "1.0.0-canary.19",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@netless/telebox-insider": "1.0.0-alpha.17",
+    "@netless/telebox-insider": "1.0.0-alpha.18",
     "emittery": "^0.9.2",
     "lodash": "^4.17.21",
     "p-retry": "^4.6.1",

package/pnpm-lock.yaml

@@ -4,7 +4,7 @@ specifiers:
   '@juggle/resize-observer': ^3.3.1
   '@netless/app-docs-viewer': ^0.2.9
   '@netless/app-media-player': 0.1.0-beta.5
-  '@netless/telebox-insider': 1.0.0-alpha.17
+  '@netless/telebox-insider': 1.0.0-alpha.18
   '@rollup/plugin-commonjs': ^20.0.0
   '@rollup/plugin-node-resolve': ^13.0.4
   '@rollup/plugin-url': ^6.1.0
@@ -43,7 +43,7 @@ specifiers:
 
 dependencies:
   '@juggle/resize-observer': registry.npmmirror.com/@juggle/resize-observer/3.3.1
-  '@netless/telebox-insider': 1.0.0-alpha.17
+  '@netless/telebox-insider': 1.0.0-alpha.18
   emittery: registry.npmmirror.com/emittery/0.9.2
   lodash: registry.npmmirror.com/lodash/4.17.21
   p-retry: registry.npmmirror.com/p-retry/4.6.1
@@ -97,8 +97,8 @@ packages:
       vanilla-lazyload: 17.6.1
     dev: true
 
-  /@netless/telebox-insider/1.0.0-alpha.17:
-    resolution: {integrity: sha512-FoiX5tKKT26EyDiO/gT4P7rhr9Pvkcf2RJuSPxt5PO0ij73vUaU6OwjXJzZkcnIZlHPHhleJoqt1difaJpmyLQ==}
+  /@netless/telebox-insider/1.0.0-alpha.18:
+    resolution: {integrity: sha512-YTIJcBV9X7jP9KoBFtPMyzK7eWCox1aZmWD3453Bwe6aOHrM/7AsBcnw0VM6K1ij10wFXpsgDQT1m3XczlbeUg==}
     dependencies:
       '@juggle/resize-observer': 3.3.1
       '@types/shallowequal': 1.1.1

package/src/App/AppContext.ts

@@ -47,7 +47,7 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
     private store = this.manager.store;
     public readonly isAddApp: boolean;
     public readonly isReplay = this.manager.isReplay;
-    private whiteBoardView?: WhiteBoardView;
+    public whiteBoardView?: WhiteBoardView;
     public _viewWrapper?: HTMLElement;
 
     constructor(
@@ -125,7 +125,7 @@ export class AppContext<TAttributes = any, TMagixEventPayloads = any, TAppOption
     }
 
     public getInitScenePath = () => {
-        return this.manager.getAppInitPath(this.appId);
+        return this.appProxy.scenePath;
     };
 
     /** Get App writable status. */

package/src/App/AppProxy.ts

@@ -30,7 +30,7 @@ import type {
     setAppOptions,
     AppListenerKeys,
 } from "../index";
-import type { SceneState, View, SceneDefinition, Camera , MemberState} from "white-web-sdk";
+import type { SceneState, View, SceneDefinition,  MemberState} from "white-web-sdk";
 import type { AppManager } from "../AppManager";
 import type { NetlessApp } from "../typings";
 import type { ReadonlyTeleBox, TeleBoxRect } from "@netless/telebox-insider";
@@ -117,8 +117,8 @@ export class AppProxy implements PageRemoveService {
                 if (box && view) {
                     if (!this.camera$.value) {
                         this.storeCamera({
-                            centerX: 0,
-                            centerY: 0,
+                            centerX: null,
+                            centerY: null,
                             scale: 1,
                             id: this.uid,
                         });
@@ -339,12 +339,14 @@ export class AppProxy implements PageRemoveService {
     private fixMobileSize() {
         const box = this.boxManager?.getBox(this.id);
         if (box) {
-            this.boxManager?.resizeBox({
-                appId: this.id,
-                width: box.intrinsicWidth + 0.001,
-                height: box.intrinsicHeight + 0.001,
-                skipUpdate: true,
-            });
+            if (!box.minimized) {
+                this.boxManager?.resizeBox({
+                    appId: this.id,
+                    width: box.intrinsicWidth + 0.001,
+                    height: box.intrinsicHeight + 0.001,
+                    skipUpdate: true,
+                });
+            }
         }
     }
 
@@ -593,7 +595,7 @@ export class AppProxy implements PageRemoveService {
         this.size$.setValue(iSize);
     }
 
-    public moveCamera = (camera: Partial<Camera>) => {
+    public moveCamera = (camera: Partial<ICamera>) => {
         if (!this.camera$.value) {
             return;
         }
@@ -635,6 +637,8 @@ export class AppProxy implements PageRemoveService {
         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();
     }
 

package/src/App/WhiteboardView.ts

@@ -6,10 +6,11 @@ import type { ReadonlyVal } from "value-enhancer";
 import type { AddPageParams, PageController, PageState } from "../Page";
 import type { AppProxy } from "./AppProxy";
 import type { AppContext } from "./AppContext";
-import type { Camera, View } from "white-web-sdk";
+import type { View } from "white-web-sdk";
 import type { TeleBoxRect } from "@netless/telebox-insider";
+import type { ICamera } from "../AttributesDelegate";
 
-export type WhiteBoardViewCamera = Omit<Camera, "scale">;
+export type WhiteBoardViewCamera = Omit<ICamera, "scale" | "id">;
 
 export class WhiteBoardView implements PageController {
     public readonly pageState$: ReadonlyVal<PageState>;

package/src/AppManager.ts

@@ -659,7 +659,6 @@ export class AppManager {
         if (sceneState) {
             const scenePath = sceneState.scenePath;
             this.appProxies.forEach(appProxy => {
-                console.log("scenePath", scenePath, appProxy.scenePath);
                 if (appProxy.scenePath && scenePath.startsWith(appProxy.scenePath)) {
                     appProxy.emitAppSceneStateChange(sceneState);
                     appProxy.setFullPath(scenePath);

package/src/AttributesDelegate.ts

@@ -2,7 +2,7 @@ import { AppAttributes } from "./constants";
 import { get, pick } from "lodash";
 import { setViewFocusScenePath } from "./Utils/Common";
 import type { AddAppParams, AppSyncAttributes } from "./index";
-import type { Camera, Size, View } from "white-web-sdk";
+import type { Size, View } from "white-web-sdk";
 import type { Cursor } from "./Cursor/Cursor";
 
 export enum Fields {
@@ -41,8 +41,11 @@ export type StoreContext = {
     safeSetAttributes: (attributes: any) => void;
 }
 
-export type ICamera = Camera & { 
+export type ICamera =  & {
     id: string; // room uid
+    centerX: number | null,
+    centerY: number | null,
+    scale: number
 };
 
 export type ISize = Size & {

package/src/ReconnectRefresher.ts

@@ -53,7 +53,7 @@ export class ReconnectRefresher {
 
     private onReconnected = debounce(() => {
         this._onReconnected();
-    }, 3000);
+    }, 1000);
 
     private _onReconnected = () => {
         log("onReconnected refresh reactors");

package/src/Utils/RoomHacker.ts

@@ -56,6 +56,9 @@ export const replaceRoomFunction = (room: Room | Player, manager: WindowManager)
         room.lockImages = (...args) => manager.lockImages(...args);
 
         delegateRemoveScenes(room, manager);
+        if (!(room as any).dynamicPpt.slideStateAdapter.pptHandler) {
+            (room as any).dynamicPpt.slideStateAdapter.pptHandler = manager.createPPTHandler();
+        }
     }
 };
 

package/src/View/CameraSynchronizer.ts

@@ -2,12 +2,12 @@ import { AnimationMode } from "white-web-sdk";
 import { debounce, delay, isEqual, pick, throttle } from "lodash";
 import type { TeleBoxRect } from "@netless/telebox-insider";
 import type { Camera, View } from "white-web-sdk";
-import type { ISize } from "../AttributesDelegate";
+import type { ICamera, ISize } from "../AttributesDelegate";
 
-export type SaveCamera = (camera: Camera) => void;
+export type SaveCamera = (camera: ICamera) => void;
 
 export class CameraSynchronizer {
-    public remoteCamera?: Camera;
+    public remoteCamera?: ICamera;
     public remoteSize?: ISize;
     protected rect?: TeleBoxRect;
     protected view?: View;
@@ -26,7 +26,7 @@ export class CameraSynchronizer {
     }
 
     // 远端 Camera 或者 size 更新
-    public onRemoteUpdate = throttle((camera: Camera, size: ISize) => {
+    public onRemoteUpdate = throttle((camera: ICamera, size: ISize) => {
         this.remoteCamera = camera;
         this.remoteSize = size;
         if (this.remoteSize && this.rect) {
@@ -38,12 +38,17 @@ export class CameraSynchronizer {
             }
             const nextScale = camera.scale * scale;
             const moveCamera = () => {
-                this.view?.moveCamera({
-                    centerX: camera.centerX,
-                    centerY: camera.centerY,
+                const config: Partial<Camera> & { animationMode: AnimationMode } = {
                     scale: nextScale,
                     animationMode: AnimationMode.Immediately,
-                });
+                }
+                if (camera.centerX !== null) {
+                    config.centerX = camera.centerX;
+                }
+                if (camera.centerY !== null) {
+                    config.centerY = camera.centerY;
+                }
+                this.view?.moveCamera(config);
             }
             moveCamera(); 
             // TODO 直接调用 moveCamera 依然会出现 camera 错误的情况,这里暂时加一个 delay 保证 camera 是对的, 后续需要 SDK 进行修改
@@ -68,7 +73,7 @@ export class CameraSynchronizer {
         }
     }
 
-    public onLocalCameraUpdate(camera: Camera) {
+    public onLocalCameraUpdate(camera: ICamera) {
         this.saveCamera(camera);
         this.remoteCamera = camera;
     }

package/src/View/MainView.ts

@@ -5,7 +5,7 @@ import { emitter } from "../InternalEmitter";
 import { Events } from "../constants";
 import { Fields } from "../AttributesDelegate";
 import { reaction, toJS } from "white-web-sdk";
-import { releaseView, setViewFocusScenePath } from "../Utils/Common";
+import { releaseView, setScenePath, setViewFocusScenePath } from "../Utils/Common";
 import { SideEffectManager } from "side-effect-manager";
 import { Val } from "value-enhancer";
 import { ViewSync } from "./ViewSync";
@@ -41,6 +41,14 @@ export class MainViewProxy {
             }),
         ]);
         this.createViewSync();
+        this.sideEffectManager.add(() => emitter.on("focusedChange", ({ focused }) => {
+            if (focused === undefined) {
+                const scenePath = this.store.getMainViewScenePath();
+                if (scenePath) {
+                    setScenePath(this.manager.room, scenePath);
+                }
+            }
+        }));
     }
 
     public createViewSync = () => {

package/src/View/ViewSync.ts

@@ -31,17 +31,14 @@ export class ViewSync {
     private synchronizer: CameraSynchronizer;
 
     constructor(private context: ViewSyncContext) {
-        this.synchronizer = new CameraSynchronizer((camera: Camera) => {
-            const iCamera = {
-                id: this.context.uid,
-                ...camera,
-            }
-            this.context.camera$.setValue(iCamera, true);
-            const notStoreCamera = this.context.viewMode$ && this.context.viewMode$.value === ViewMode.Freedom;
+        this.synchronizer = new CameraSynchronizer((camera: ICamera) => {
+            this.context.camera$.setValue(camera, true);
+            const notStoreCamera =
+                this.context.viewMode$ && this.context.viewMode$.value === ViewMode.Freedom;
             if (notStoreCamera) {
                 return;
             } else {
-                this.context.storeCamera(iCamera);
+                this.context.storeCamera(camera);
             }
         });
         this.bindView(this.context.view$.value);
@@ -54,8 +51,8 @@ export class ViewSync {
                         animationMode: AnimationMode.Immediately,
                     });
                     this.synchronizer.onRemoteUpdate(currentCamera, this.context.size$.value);
-                }   
-              
+                }
+
                 this.bindView(view);
             })
         );
@@ -74,18 +71,15 @@ export class ViewSync {
                 }
             })
         );
-        if (this.context.stageRect$.value) {
-            this.synchronizer.setRect(this.context.stageRect$.value);
-            this.sem.add(() =>
-                this.context.stageRect$.subscribe(rect => {
-                    if (rect) {
-                        this.synchronizer.setRect(rect);
-                    }
-                })
-            );
-        }
+        this.sem.add(() =>
+            this.context.stageRect$.reaction(rect => {
+                if (rect) {
+                    this.synchronizer.setRect(rect);
+                }
+            })
+        );
         const camera$size$ = combine([this.context.camera$, this.context.size$]);
-        camera$size$.subscribe(([camera, size]) => {
+        camera$size$.reaction(([camera, size]) => {
             if (camera && size) {
                 this.synchronizer.onRemoteUpdate(camera, size);
                 camera$size$.destroy();
@@ -105,7 +99,7 @@ export class ViewSync {
     };
 
     private onCameraUpdatedByDevice = (camera: Camera) => {
-        this.synchronizer.onLocalCameraUpdate(camera);
+        this.synchronizer.onLocalCameraUpdate(Object.assign(camera, { id: this.context.uid }));
         const stage = this.context.stageRect$.value;
         if (stage) {
             const size = { width: stage.width, height: stage.height, id: this.context.uid };

package/src/index.ts

@@ -130,6 +130,8 @@ export type MountParams = {
     container?: HTMLElement;
     /** 白板高宽比例, 默认为 9 / 16 */
     containerSizeRatio?: number;
+    /** @deprecated */
+    chessboard?: boolean;
     /** 是否高亮显示同步区域, 默认为 true */
     highlightStage?: boolean;
     collectorContainer?: HTMLElement;
@@ -923,6 +925,24 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> imple
         emitter.emit("containerSizeRatioUpdate", ratio);
     }
 
+    public createPPTHandler() {
+        return {
+            onPageJumpTo: (_pptUUID: string, index: number) => {
+                this.appManager?.focusApp?.appContext?.whiteBoardView?.jumpPage(index);
+            },
+            onPageToNext: () => {
+                if (this.focused) {
+                    this.appManager?.focusApp?.appContext?.whiteBoardView?.nextPage();
+                }
+            },
+            onPageToPrev: () => {
+                if (this.focused) {
+                    this.appManager?.focusApp?.appContext?.whiteBoardView?.prevPage();
+                }
+            }
+        }
+    }
+
     private isDynamicPPT(scenes: SceneDefinition[]) {
         const sceneSrc = scenes[0]?.ppt?.src;
         return sceneSrc?.startsWith("pptx://");