@netless/window-manager 1.0.0-canary.7 → 1.0.0-canary.71

package/src/View/ViewSync.ts

@@ -1,10 +1,142 @@
-import type { Camera, Size } from "white-web-sdk";
+import { AnimationMode, ViewMode } from "white-web-sdk";
+import { CameraSynchronizer } from "./CameraSynchronizer";
+import { combine, derive } from "value-enhancer";
+import { isEqual } from "lodash";
+import { SideEffectManager } from "side-effect-manager";
+import { Val } from "value-enhancer";
+import type { Camera, View } from "white-web-sdk";
+import type { ReadonlyVal } from "value-enhancer";
+import type { ICamera, ISize } from "../AttributesDelegate";
+import type { TeleBoxRect } from "@netless/telebox-insider";
+import type { ManagerViewMode } from "../typings";
 
+export type ViewSyncContext = {
+    uid: string;
+    // 远端 camera
+    camera$: Val<ICamera | undefined, boolean>;
+    // 远端 size
+    size$: Val<ISize | undefined>;
 
-export interface ViewSync {
-    readonly camera: Camera;
-    readonly size: Size;
+    stageRect$: ReadonlyVal<TeleBoxRect>;
 
-    setCamera: (camera: Camera) => void;
-    setSize: (size: Size) => void;      
+    viewMode$?: Val<ManagerViewMode>;
+
+    storeCamera: (camera: ICamera) => void;
+
+    storeSize: (size: ISize) => void;
+
+    view$: Val<View | undefined>;
+};
+
+export class ViewSync {
+    private sem = new SideEffectManager();
+    private synchronizer: CameraSynchronizer;
+    private needRecoverCamera$?: ReadonlyVal<boolean>;
+
+    constructor(private context: ViewSyncContext) {
+        this.synchronizer = this.createSynchronizer();
+        this.bindView(this.context.view$.value);
+        this.sem.add(() => [
+            this.subscribeView(),
+            this.subscribeCamera(),
+            this.subscribeSize(),
+            this.subscribeStageRect(),
+        ]);
+        if (context.viewMode$) {
+            this.needRecoverCamera$ = derive(context.viewMode$, mode => mode !== "scroll");
+        } else {
+            this.needRecoverCamera$ = new Val(true);
+        }
+        const camera$size$ = combine([this.context.camera$, this.context.size$]);
+        camera$size$.reaction(([camera, size]) => {
+            if (camera && size && this.needRecoverCamera$?.value) {
+                this.synchronizer.onRemoteUpdate(camera, size);
+                camera$size$.destroy();
+            }
+        });
+    }
+
+    private get isBroadcastMode() {
+        return this.context.viewMode$?.value === ViewMode.Broadcaster;
+    }
+
+    private createSynchronizer = () => {
+        return 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(camera);
+            }
+        });
+    };
+
+    private subscribeView = () => {
+        return this.context.view$.subscribe(view => {
+            const currentCamera = this.context.camera$.value;
+            if (currentCamera && this.context.size$.value && this.needRecoverCamera$?.value) {
+                view?.moveCamera({
+                    scale: 1,
+                    animationMode: AnimationMode.Immediately,
+                });
+                this.synchronizer.onRemoteUpdate(currentCamera, this.context.size$.value);
+            }
+            this.bindView(view);
+        });
+    };
+
+    private subscribeCamera = () => {
+        return this.context.camera$.subscribe((camera, skipUpdate) => {
+            const size = this.context.size$.value;
+            if (camera && size) {
+                this.synchronizer.onRemoteUpdate(camera, size, skipUpdate);
+            }
+        });
+    };
+
+    private subscribeSize = () => {
+        return this.context.size$.subscribe(size => {
+            if (size && this.isBroadcastMode) {
+                this.synchronizer.onRemoteSizeUpdate(size);
+            }
+        });
+    };
+
+    private subscribeStageRect = () => {
+        return this.context.stageRect$.subscribe(rect => {
+            if (rect) {
+                this.synchronizer.setRect(rect, this.isBroadcastMode);
+            }
+        });
+    };
+
+    public bindView = (view?: View) => {
+        if (!view) return;
+        this.synchronizer.setView(view);
+        this.sem.flush("view");
+        this.sem.add(() => {
+            view.callbacks.on("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
+            return () =>
+                view.callbacks.off("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
+        }, "view");
+    };
+
+    private onCameraUpdatedByDevice = (camera: Camera) => {
+        if (!camera) return;
+        if (!this.isBroadcastMode) return;
+        const { size$, stageRect$, view$ } = this.context;
+        if (size$.value && stageRect$.value && view$.value) {
+            this.synchronizer.onLocalCameraUpdate({ ...camera, id: this.context.uid });
+            const newSize = { ...view$.value.size, id: this.context.uid };
+            if (!isEqual(size$.value, newSize)) {
+                this.context.storeSize(newSize);
+            }
+        }
+    };
+
+    public destroy() {
+        this.sem.flushAll();
+    }
 }

package/src/callback.ts

@@ -1,8 +1,10 @@
 import Emittery from "emittery";
-import type { TeleBoxColorScheme, TELE_BOX_STATE } from "@netless/telebox-insider";
+import type { TeleBoxColorScheme, TeleBoxFullscreen, TELE_BOX_STATE } from "@netless/telebox-insider";
 import type { CameraState, SceneState, ViewVisionMode } from "white-web-sdk";
 import type { LoadAppEvent } from "./Register";
 import type { PageState } from "./Page";
+import type { ISize } from "./AttributesDelegate";
+import type { ScrollState } from "./View/ScrollMode";
 
 export type PublicEvent = {
     mainViewModeChange: ViewVisionMode;
@@ -20,6 +22,11 @@ export type PublicEvent = {
     ready: undefined; // 所有 APP 创建完毕时触发
     sceneStateChange: SceneState;
     pageStateChange: PageState;
+    appClose: { appId: string; kind: string, error?: Error };
+    baseSizeChange: ISize;
+    fullscreenChange: TeleBoxFullscreen;
+    userScroll: undefined;
+    scrollStateChange: ScrollState;
 };
 
 export type CallbacksType = Emittery<PublicEvent>;

package/src/constants.ts

@@ -5,18 +5,18 @@ export enum Events {
     AppBoxStateChange = "AppBoxStateChange",
     GetAttributes = "GetAttributes",
     UpdateWindowManagerWrapper = "UpdateWindowManagerWrapper",
-    InitReplay = "InitReplay",
     WindowCreated = "WindowCreated",
     SetMainViewScenePath = "SetMainViewScenePath",
     SetMainViewSceneIndex = "SetMainViewSceneIndex",
     SetAppFocusIndex = "SetAppFocusIndex",
     SwitchViewsToFreedom = "SwitchViewsToFreedom",
-    MoveCamera = "MoveCamera",
-    MoveCameraToContain = "MoveCameraToContain",
     CursorMove = "CursorMove",
     RootDirRemoved = "RootDirRemoved",
     Refresh = "Refresh",
     InitMainViewCamera = "InitMainViewCamera",
+    InvokeAttributesUpdateCallback = "InvokeAttributesUpdateCallback",
+    MoveCamera = "MoveCamera",
+    MoveCameraToContain = "moveCameraToContain",
 }
 
 export const MagixEventName = "__WindowManger";
@@ -27,6 +27,11 @@ export enum AppAttributes {
     Position = "position",
     SceneIndex = "SceneIndex",
     ZIndex = "zIndex",
+    Visible = "visible",
+    Ratio = "ratio",
+    StageRatio = "stageRatio",
+    Draggable = "draggable",
+    Resizable = "resizable",
 }
 
 export enum AppEvents {
@@ -59,3 +64,6 @@ export const INIT_DIR = "/init";
 export const SETUP_APP_DELAY = 50;
 
 export const MAX_PAGE_SIZE = 500;
+
+export const SCROLL_MODE_BASE_WIDTH = 1600;
+export const SCROLL_MODE_BASE_HEIGHT = SCROLL_MODE_BASE_WIDTH * 3;

package/src/image/pencil-eraser-1.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="26" viewBox="0 0 18 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="17" height="25" rx="3.5" fill="black" fill-opacity="0.35" stroke="white"/>
+</svg>

package/src/image/pencil-eraser-2.svg

@@ -0,0 +1,3 @@
+<svg width="26" height="34" viewBox="0 0 26 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="25" height="33" rx="3.5" fill="black" fill-opacity="0.35" stroke="white"/>
+</svg>

package/src/image/pencil-eraser-3.svg

@@ -0,0 +1,3 @@
+<svg width="34" height="50" viewBox="0 0 34 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="33" height="49" rx="3.5" fill="black" fill-opacity="0.35" stroke="white"/>
+</svg>