@netless/window-manager 0.3.18 → 0.4.0-canary.11

package/src/Helper.ts

@@ -0,0 +1,30 @@
+import { WindowManager } from "./index";
+
+export const setupWrapper = (
+    root: HTMLElement
+): {
+    playground: HTMLDivElement;
+    wrapper: HTMLDivElement;
+    sizer: HTMLDivElement;
+    mainViewElement: HTMLDivElement;
+} => {
+    const playground = document.createElement("div");
+    playground.className = "netless-window-manager-playground";
+
+    const sizer = document.createElement("div");
+    sizer.className = "netless-window-manager-sizer";
+
+    const wrapper = document.createElement("div");
+    wrapper.className = "netless-window-manager-wrapper";
+
+    const mainViewElement = document.createElement("div");
+    mainViewElement.className = "netless-window-manager-main-view";
+
+    playground.appendChild(sizer);
+    sizer.appendChild(wrapper);
+    wrapper.appendChild(mainViewElement);
+    root.appendChild(playground);
+    WindowManager.wrapper = wrapper;
+
+    return { playground, wrapper, sizer, mainViewElement };
+};

package/src/ReconnectRefresher.ts

@@ -1,8 +1,12 @@
-import { isFunction } from 'lodash';
-import { RoomPhase } from 'white-web-sdk';
+import { debounce, isFunction } from "lodash";
+import { log } from "./Utils/log";
+import { RoomPhase } from "white-web-sdk";
 import type { Room } from "white-web-sdk";
-import type { AppManager } from './AppManager';
-import { log } from './Utils/log';
+import type { EmitterType } from "./index";
+
+export type ReconnectRefresherContext = {
+    emitter: EmitterType;
+};
 
 // 白板重连之后会刷新所有的对象，导致 listener 失效, 所以这里在重连之后重新对所有对象进行监听
 export class ReconnectRefresher {
@@ -11,20 +15,27 @@ export class ReconnectRefresher {
     private reactors: Map<string, any> = new Map();
     private disposers: Map<string, any> = new Map();
 
-    constructor(room: Room | undefined, private manager: AppManager) {
+    constructor(private ctx: ReconnectRefresherContext) {}
+
+    public setRoom(room: Room | undefined) {
         this.room = room;
         this.phase = room?.phase;
+        room?.callbacks.off("onPhaseChanged", this.onPhaseChanged);
         room?.callbacks.on("onPhaseChanged", this.onPhaseChanged);
     }
 
+    public setContext(ctx: ReconnectRefresherContext) {
+        this.ctx = ctx;
+    }
+
     private onPhaseChanged = (phase: RoomPhase) => {
         if (phase === RoomPhase.Connected && this.phase === RoomPhase.Reconnecting) {
             this.onReconnected();
         }
         this.phase = phase;
-    }
+    };
 
-    private onReconnected = () => {
+    private onReconnected = debounce(() => {
         log("onReconnected refresh reactors");
         this.releaseDisposers();
         this.reactors.forEach((func, id) => {
@@ -32,15 +43,15 @@ export class ReconnectRefresher {
                 this.disposers.set(id, func());
             }
         });
-        this.manager.notifyReconnected();
-    }
+        this.ctx.emitter.emit("onReconnected", undefined);
+    }, 3000);
 
     private releaseDisposers() {
         this.disposers.forEach(disposer => {
             if (isFunction(disposer)) {
                 disposer();
             }
-        })
+        });
         this.disposers.clear();
     }
 
@@ -64,6 +75,10 @@ export class ReconnectRefresher {
         }
     }
 
+    public hasReactor(id: string) {
+        return this.reactors.has(id);
+    }
+
     public destroy() {
         this.room?.callbacks.off("onPhaseChanged", this.onPhaseChanged);
         this.releaseDisposers();

package/src/Utils/Common.ts

@@ -1,7 +1,7 @@
-import { appRegister } from '../Register';
-import { debounce } from 'lodash';
-import { emitter } from '../index';
-import { v4 } from 'uuid';
+import { appRegister } from "../Register";
+import { debounce } from "lodash";
+import { emitter } from "../index";
+import { v4 } from "uuid";
 import type { PublicEvent } from "../index";
 import type { Displayer, ViewVisionMode, Room, View } from "white-web-sdk";
 import type Emittery from "emittery";
@@ -26,7 +26,21 @@ export const setScenePath = (room: Room | undefined, scenePath: string) => {
             room.setScenePath(scenePath);
         }
     }
-}
+};
+
+export const getScenePath = (
+    room: Room | undefined,
+    dir: string | undefined,
+    index: number
+): string | undefined => {
+    if (room && dir) {
+        const scenes = entireScenes(room);
+        const scene = scenes[dir]?.[index];
+        if (scene) {
+            return `${dir}/${scene.name}`;
+        }
+    }
+};
 
 export const setViewMode = (view: View, mode: ViewVisionMode) => {
     if (!(view as any).didRelease && view.mode !== mode) {
@@ -44,7 +58,7 @@ export const emitError = (error: Error) => {
 
 export const addEmitterOnceListener = (event: any, listener: any) => {
     emitter.once(event).then(listener);
-}
+};
 
 export const notifyMainViewModeChange = debounce(
     (callbacks: Emittery<PublicEvent>, mode: ViewVisionMode) => {
@@ -53,9 +67,10 @@ export const notifyMainViewModeChange = debounce(
     200
 );
 
-export const makeValidScenePath = (displayer: Displayer, scenePath: string) => {
-    const scenes = displayer.entireScenes()[scenePath];
-    const firstSceneName = scenes[0].name;
+export const makeValidScenePath = (displayer: Displayer, scenePath: string, index = 0) => {
+    const scenes = entireScenes(displayer)[scenePath];
+    if (!scenes) return;
+    const firstSceneName = scenes[index].name;
     if (scenePath === "/") {
         return `/${firstSceneName}`;
     } else {
@@ -63,9 +78,13 @@ export const makeValidScenePath = (displayer: Displayer, scenePath: string) => {
     }
 };
 
+export const entireScenes = (displayer: Displayer) => {
+    return displayer.entireScenes();
+};
+
 export const isValidScenePath = (scenePath: string) => {
     return scenePath.startsWith("/");
-}
+};
 
 export const ensureValidScenePath = (scenePath: string) => {
     if (scenePath.endsWith("/")) {
@@ -73,11 +92,14 @@ export const ensureValidScenePath = (scenePath: string) => {
     } else {
         return scenePath;
     }
-}
+};
 
 export const getVersionNumber = (version: string) => {
-    const versionString = version.split(".").map(s => s.padStart(2, "0")).join("");
+    const versionString = version
+        .split(".")
+        .map(s => s.padStart(2, "0"))
+        .join("");
     return parseInt(versionString);
 };
 
-export const wait = (time: number) => new Promise((resolve) => setTimeout(resolve, time));
+export const wait = (time: number) => new Promise(resolve => setTimeout(resolve, time));

package/src/Utils/Reactive.ts

@@ -1,5 +1,6 @@
 import { listenUpdated, unlistenUpdated, reaction, UpdateEventKind } from "white-web-sdk";
 import type { AkkoObjectUpdatedProperty , AkkoObjectUpdatedListener } from "white-web-sdk";
+import { isObject } from "lodash";
 
 // 兼容 13 和 14 版本 SDK
 export const onObjectByEvent = (event: UpdateEventKind) => {
@@ -30,7 +31,8 @@ export const onObjectByEvent = (event: UpdateEventKind) => {
 
 export const safeListenPropsUpdated = <T>(
     getProps: () => T,
-    callback: AkkoObjectUpdatedListener<T>
+    callback: AkkoObjectUpdatedListener<T>,
+    onDestroyed?: (props: unknown) => void
   ) => {
     let disposeListenUpdated: (() => void) | null = null;
     const disposeReaction = reaction(
@@ -41,8 +43,12 @@ export const safeListenPropsUpdated = <T>(
           disposeListenUpdated = null;
         }
         const props = getProps();
-        disposeListenUpdated = () => unlistenUpdated(props, callback);
-        listenUpdated(props, callback);
+        if (isObject(props)) {
+          disposeListenUpdated = () => unlistenUpdated(props, callback);
+          listenUpdated(props, callback);
+        } else {
+          onDestroyed?.(props);
+        }
       },
       { fireImmediately: true }
     );

package/src/Utils/RoomHacker.ts

@@ -1,10 +1,10 @@
-import { emitter } from '../index';
-import { isPlayer } from 'white-web-sdk';
+import { emitter } from "../index";
+import { isPlayer } from "white-web-sdk";
+import type { WindowManager } from '../index';
 import type { Camera, Room , Player , PlayerSeekingResult } from "white-web-sdk";
-import type { AppManager } from "../AppManager";
 
 // 修改多窗口状态下一些失效的方法实现到 manager 的 mainview 上, 降低迁移成本
-export const replaceRoomFunction = (room: Room, manager: AppManager) => {
+export const replaceRoomFunction = (room: Room, manager: WindowManager) => {
     if (isPlayer(room)) {
         const player = room as unknown as Player;
         const originSeek = player.seekToProgressTime;
@@ -29,13 +29,28 @@ export const replaceRoomFunction = (room: Room, manager: AppManager) => {
             },
         });
 
+        Object.defineProperty(room, "canUndoSteps", {
+            get() {
+                return manager.mainView.canUndoSteps;
+            }
+        });
+
+        Object.defineProperty(room, "canRedoSteps", {
+            get() {
+                return manager.mainView.canRedoSteps;
+            }
+        });
+
         room.moveCamera = (camera: Camera) => manager.mainView.moveCamera(camera);
-        room.moveCameraToContain = (...args) => manager.mainView.moveCameraToContain(...args);
+        room.moveCameraToContain = (...args) => manager.moveCameraToContain(...args);
         room.convertToPointInWorld = (...args) => manager.mainView.convertToPointInWorld(...args);
         room.setCameraBound = (...args) => manager.mainView.setCameraBound(...args);
         room.scenePreview = (...args) => manager.mainView.scenePreview(...args);
         room.fillSceneSnapshot = (...args) => manager.mainView.fillSceneSnapshot(...args);
         room.generateScreenshot = (...args) => manager.mainView.generateScreenshot(...args);
+        room.setMemberState = (...args) => manager.mainView.setMemberState(...args);
+        room.redo = () => manager.mainView.redo();
+        room.undo = () => manager.mainView.undo();
     }
 
 };

package/src/Utils/error.ts

@@ -1,3 +1,4 @@
+
 export class AppCreateError extends Error {
     override message = "[WindowManager]: app duplicate exists and cannot be created again";
 }
@@ -28,4 +29,8 @@ export class BoxNotCreatedError extends Error {
 
 export class InvalidScenePath extends Error {
     override message = `[WindowManager]: ScenePath should start with "/"`;
-}
+}
+
+export class BoxManagerNotFoundError extends Error {
+    override message = "[WindowManager]: boxManager not found";
+}

package/src/{MainView.ts → View/MainView.ts}

@@ -1,27 +1,29 @@
-import { AnimationMode, reaction, ViewVisionMode } from "white-web-sdk";
-import { Base } from "./Base";
-import { callbacks, emitter } from "./index";
+import { AnimationMode, reaction } from "white-web-sdk";
+import { Base } from "../Base";
+import { callbacks, emitter } from "../index";
 import { createView } from "./ViewManager";
 import { debounce, isEmpty, isEqual } from "lodash";
-import { Fields } from "./AttributesDelegate";
-import { notifyMainViewModeChange, setViewFocusScenePath, setViewMode } from "./Utils/Common";
+import { Fields } from "../AttributesDelegate";
+import { setViewFocusScenePath } from "../Utils/Common";
+import { SideEffectManager } from "side-effect-manager";
 import type { Camera, Size, View } from "white-web-sdk";
-import type { AppManager } from "./AppManager";
+import type { AppManager } from "../AppManager";
 
 export class MainViewProxy extends Base {
     private scale?: number;
-    private cameraStore = this.manager.cameraStore;
     private started = false;
     private mainViewIsAddListener = false;
     private mainView: View;
     private viewId = "mainView";
 
+    private sideEffectManager = new SideEffectManager();
+
     constructor(manager: AppManager) {
         super(manager);
         this.mainView = this.createMainView();
         this.moveCameraSizeByAttributes();
-        this.cameraStore.register(this.viewId, this.mainView);
         emitter.once("mainViewMounted").then(() => {
+            this.addMainViewListener();
             setTimeout(() => {
                 this.start();
                 if (!this.mainViewCamera || !this.mainViewSize) {
@@ -29,8 +31,12 @@ export class MainViewProxy extends Base {
                 }
             }, 200); // 等待 mainView 挂载完毕再进行监听，否则会触发不必要的 onSizeUpdated
         });
-        emitter.on("playgroundSizeChange", () => {
+        const playgroundSizeChangeListener = () => {
             this.sizeChangeHandler(this.mainViewSize);
+        };
+        this.sideEffectManager.add(() => {
+            emitter.on("playgroundSizeChange", playgroundSizeChangeListener);
+            return () => emitter.off("playgroundSizeChange", playgroundSizeChangeListener);
         });
     }
 
@@ -75,7 +81,7 @@ export class MainViewProxy extends Base {
         );
     };
 
-    private sizeChangeHandler =  debounce((size: Size) => {
+    private sizeChangeHandler = debounce((size: Size) => {
         if (size) {
             this.moveCameraToContian(size);
             this.moveCamera(this.mainViewCamera);
@@ -96,15 +102,12 @@ export class MainViewProxy extends Base {
         if (mainViewScenePath) {
             setViewFocusScenePath(mainView, mainViewScenePath);
         }
-        if (!this.store.focus) {
-            this.switchViewModeToWriter();
-        }
         return mainView;
     }
 
     private onCameraUpdatedByDevice = (camera: Camera) => {
         this.store.setMainViewCamera({ ...camera, id: this.context.uid });
-        if (!isEqual(this.mainViewSize, {...this.mainView.size, id: this.context.uid})) {
+        if (!isEqual(this.mainViewSize, { ...this.mainView.size, id: this.context.uid })) {
             this.setMainViewSize(this.view.size);
         }
     };
@@ -131,7 +134,6 @@ export class MainViewProxy extends Base {
 
     public async mainViewClickHandler(): Promise<void> {
         if (!this.manager.canOperate) return;
-        if (this.view.mode === ViewVisionMode.Writable) return;
         this.store.cleanFocus();
         this.context.blurFocusBox();
     }
@@ -156,17 +158,6 @@ export class MainViewProxy extends Base {
         callbacks.emit("cameraStateChange", this.cameraState);
     };
 
-    public switchViewModeToWriter(): void {
-        if (!this.manager.canOperate) return;
-        if (this.view) {
-            if (this.view.mode === ViewVisionMode.Writable) return;
-            this.cameraStore.switchView(this.viewId, this.mainView, () => {
-                notifyMainViewModeChange(callbacks, ViewVisionMode.Writable);
-                setViewMode(this.view, ViewVisionMode.Writable);
-            });
-        }
-    }
-
     public moveCameraToContian(size: Size): void {
         if (!isEmpty(size)) {
             this.view.moveCameraToContain({
@@ -195,6 +186,7 @@ export class MainViewProxy extends Base {
     }
 
     public stop() {
+        this.removeMainViewListener();
         this.removeCameraListener();
         this.manager.refresher?.remove(Fields.MainViewCamera);
         this.manager.refresher?.remove(Fields.MainViewSize);
@@ -203,6 +195,6 @@ export class MainViewProxy extends Base {
 
     public destroy() {
         this.stop();
-        this.cameraStore.unregister(this.viewId, this.mainView);
+        this.sideEffectManager.flushAll();
     }
 }

package/src/View/ViewManager.ts

@@ -0,0 +1,53 @@
+import type { View , Displayer} from "white-web-sdk";
+
+export class ViewManager {
+    public views: Map<string, View> = new Map();
+
+    constructor(private displayer: Displayer) {}
+
+    public createView(id: string): View {
+        const view = createView(this.displayer);
+        this.views.set(id, view);
+        return view;
+    }
+
+    public getView(id: string): View | undefined {
+        return this.views.get(id);
+    }
+
+    public destroyView(id: string): void {
+        const view = this.views.get(id);
+        if (view) {
+            view.release();
+            this.views.delete(id);
+        }
+    }
+
+    public setViewScenePath(id: string, scenePath: string): void {
+        const view = this.views.get(id);
+        if (view) {
+            view.focusScenePath = scenePath;
+        }
+    }
+
+    public destroy() {
+        this.views.forEach(view => {
+            view.release();
+        });
+        this.views.clear();
+    }
+}
+
+
+export const createView = (displayer: Displayer): View => {
+    const view = displayer.views.createView();
+    setDefaultCameraBound(view);
+    return view;
+};
+
+export const setDefaultCameraBound = (view: View) => {
+    view.setCameraBound({
+        maxContentMode: () => 10,
+        minContentMode: () => 0.1,
+    });
+};

package/src/constants.ts

@@ -10,6 +10,7 @@ export enum Events {
     SetMainViewScenePath = "SetMainViewScenePath",
     SetMainViewSceneIndex = "SetMainViewSceneIndex",
     SwitchViewsToFreedom = "SwitchViewsToFreedom",
+    MoveCameraToContain = "MoveCameraToContain"
 }
 
 export const MagixEventName = "__WindowManger";
@@ -36,13 +37,11 @@ export enum CursorState {
     Normal = "normal",
 }
 
-export const REQUIRE_VERSION = "2.13.16";
+export const REQUIRE_VERSION = "2.16.0";
 
 export const MIN_WIDTH = 340 / 720;
 export const MIN_HEIGHT = 340 / 720;
 
 export const SET_SCENEPATH_DELAY = 100; // 设置 scenePath 的延迟事件
 
-export const DEFAULT_COLLECTOR_STYLE = { right: "10px", bottom: "15px", position: "absolute" };
-
 export const DEFAULT_CONTAINER_RATIO = 9 / 16;