@netless/window-manager 0.4.0-canary.3 → 0.4.0-canary.30

package/src/Utils/Common.ts

@@ -1,10 +1,12 @@
-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 { ScenePathType } from "white-web-sdk";
+import { v4 } from "uuid";
 import type { PublicEvent } from "../index";
 import type { Displayer, ViewVisionMode, Room, View } from "white-web-sdk";
 import type Emittery from "emittery";
+import { ROOT_DIR } from "../constants";
 
 export const genAppId = async (kind: string) => {
     const impl = await appRegister.appClasses.get(kind)?.();
@@ -17,6 +19,14 @@ export const genAppId = async (kind: string) => {
 export const setViewFocusScenePath = (view: View, focusScenePath: string) => {
     if (view.focusScenePath !== focusScenePath) {
         view.focusScenePath = focusScenePath;
+        return view;
+    }
+};
+
+export const setViewSceneIndex = (view: View, index: number) => {
+    if (view.focusSceneIndex !== index) {
+        view.focusSceneIndex = index;
+        return view;
     }
 };
 
@@ -26,7 +36,30 @@ 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 removeScenes = (room: Room | undefined, scenePath: string) => {
+    if (room) {
+        const type = room.scenePathType(scenePath);
+        if (type !== ScenePathType.None) {
+            room.removeScenes(scenePath);
+        }
+    }
+};
 
 export const setViewMode = (view: View, mode: ViewVisionMode) => {
     if (!(view as any).didRelease && view.mode !== mode) {
@@ -44,7 +77,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,19 +86,38 @@ export const notifyMainViewModeChange = debounce(
     200
 );
 
-export const makeValidScenePath = (displayer: Displayer, scenePath: string) => {
-    const scenes = displayer.entireScenes()[scenePath];
-    const firstSceneName = scenes[0].name;
-    if (scenePath === "/") {
+export const makeValidScenePath = (displayer: Displayer, scenePath: string, index = 0) => {
+    const scenes = entireScenes(displayer)[scenePath];
+    if (!scenes) return;
+    const scene = scenes[index];
+    if (!scene) return;
+    const firstSceneName = scene.name;
+    if (scenePath === ROOT_DIR) {
         return `/${firstSceneName}`;
     } else {
         return `${scenePath}/${firstSceneName}`;
     }
 };
 
+export const entireScenes = (displayer: Displayer) => {
+    return displayer.entireScenes();
+};
+
+
 export const isValidScenePath = (scenePath: string) => {
     return scenePath.startsWith("/");
-}
+};
+
+export const parseSceneDir = (scenePath: string) => {
+    const sceneList = scenePath.split("/");
+    sceneList.pop();
+    let sceneDir = sceneList.join("/");
+    // "/page1" 的 dir 为 "/"
+    if (sceneDir === "") {
+        sceneDir = "/";
+    }
+    return sceneDir;
+};
 
 export const ensureValidScenePath = (scenePath: string) => {
     if (scenePath.endsWith("/")) {
@@ -73,11 +125,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,23 +1,15 @@
 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 { WindowManager } from "../index";
+import type { Camera, Room, Player, PlayerSeekingResult } from "white-web-sdk";
 
 // 修改多窗口状态下一些失效的方法实现到 manager 的 mainview 上, 降低迁移成本
-export const replaceRoomFunction = (room: Room, manager: WindowManager) => {
+export const replaceRoomFunction = (room: Room | Player, manager: WindowManager) => {
     if (isPlayer(room)) {
         const player = room as unknown as Player;
-        const originSeek = player.seekToProgressTime;
-        // eslint-disable-next-line no-inner-declarations
-        async function newSeek(time: number): Promise<PlayerSeekingResult> {
-            const seekResult = await originSeek.call(player, time);
-            if (seekResult === "success") {
-                emitter.emit("seek", time);
-            }
-            return seekResult;
-        }
-        player.seekToProgressTime = newSeek;
+        delegateSeekToProgressTime(player);
     } else {
+        room = room as unknown as Room;
         const descriptor = Object.getOwnPropertyDescriptor(room, "disableCameraTransform");
         if (descriptor) return;
         Object.defineProperty(room, "disableCameraTransform", {
@@ -29,6 +21,18 @@ export const replaceRoomFunction = (room: Room, manager: WindowManager) => {
             },
         });
 
+        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.moveCameraToContain(...args);
         room.convertToPointInWorld = (...args) => manager.mainView.convertToPointInWorld(...args);
@@ -36,6 +40,32 @@ export const replaceRoomFunction = (room: Room, manager: WindowManager) => {
         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();
+        room.cleanCurrentScene = () => manager.mainView.cleanCurrentScene();
+        delegateRemoveScenes(room);
     }
+};
 
-};
+const delegateRemoveScenes = (room: Room) => {
+    const originRemoveScenes = room.removeScenes;
+    room.removeScenes = (scenePath: string) => {
+        const result = originRemoveScenes.call(room, scenePath);
+        emitter.emit("removeScenes", scenePath);
+        return result;
+    };
+};
+
+const delegateSeekToProgressTime = (player: Player) => {
+    const originSeek = player.seekToProgressTime;
+    // eslint-disable-next-line no-inner-declarations
+    async function newSeek(time: number): Promise<PlayerSeekingResult> {
+        const seekResult = await originSeek.call(player, time);
+        if (seekResult === "success") {
+            emitter.emit("seek", time);
+        }
+        return seekResult;
+    }
+    player.seekToProgressTime = newSeek;
+};

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

@@ -1,30 +1,27 @@
-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 { 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 {
+export class MainViewProxy {
     private scale?: number;
-    private cameraStore = this.manager.cameraStore;
     private started = false;
     private mainViewIsAddListener = false;
     private mainView: View;
-    private viewId = "mainView";
+    private store = this.manager.store;
 
     private sideEffectManager = new SideEffectManager();
 
-    constructor(manager: AppManager) {
-        super(manager);
+    constructor(private manager: AppManager) {
         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) {
@@ -34,7 +31,7 @@ export class MainViewProxy extends Base {
         });
         const playgroundSizeChangeListener = () => {
             this.sizeChangeHandler(this.mainViewSize);
-        }
+        };
         this.sideEffectManager.add(() => {
             emitter.on("playgroundSizeChange", playgroundSizeChangeListener);
             return () => emitter.off("playgroundSizeChange", playgroundSizeChangeListener);
@@ -63,15 +60,15 @@ export class MainViewProxy extends Base {
     }
 
     public setCameraAndSize(): void {
-        this.store.setMainViewCamera({ ...this.mainView.camera, id: this.context.uid });
-        this.store.setMainViewSize({ ...this.mainView.size, id: this.context.uid });
+        this.store.setMainViewCamera({ ...this.mainView.camera, id: this.manager.uid });
+        this.store.setMainViewSize({ ...this.mainView.size, id: this.manager.uid });
     }
 
     private cameraReaction = () => {
         return reaction(
             () => this.mainViewCamera,
             camera => {
-                if (camera && camera.id !== this.context.uid) {
+                if (camera && camera.id !== this.manager.uid) {
                     this.moveCameraToContian(this.mainViewSize);
                     this.moveCamera(camera);
                 }
@@ -103,15 +100,19 @@ export class MainViewProxy extends Base {
         if (mainViewScenePath) {
             setViewFocusScenePath(mainView, mainViewScenePath);
         }
-        if (!this.store.focus) {
-            this.switchViewModeToWriter();
-        }
         return mainView;
     }
 
+    public onReconnect(): void {
+        const mainViewScenePath = this.store.getMainViewScenePath();
+        if (mainViewScenePath) {
+            setViewFocusScenePath(this.view, mainViewScenePath);
+        }
+    }
+
     private onCameraUpdatedByDevice = (camera: Camera) => {
-        this.store.setMainViewCamera({ ...camera, id: this.context.uid });
-        if (!isEqual(this.mainViewSize, { ...this.mainView.size, id: this.context.uid })) {
+        this.store.setMainViewCamera({ ...camera, id: this.manager.uid });
+        if (!isEqual(this.mainViewSize, { ...this.mainView.size, id: this.manager.uid })) {
             this.setMainViewSize(this.view.size);
         }
     };
@@ -138,13 +139,12 @@ 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();
+        this.manager.boxManager?.blurAllBox();
     }
 
     public setMainViewSize = debounce(size => {
-        this.store.setMainViewSize({ ...size, id: this.context.uid });
+        this.store.setMainViewSize({ ...size, id: this.manager.uid });
     }, 50);
 
     private addCameraListener() {
@@ -163,17 +163,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({
@@ -202,6 +191,7 @@ export class MainViewProxy extends Base {
     }
 
     public stop() {
+        this.removeMainViewListener();
         this.removeCameraListener();
         this.manager.refresher?.remove(Fields.MainViewCamera);
         this.manager.refresher?.remove(Fields.MainViewSize);
@@ -210,7 +200,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,52 @@
+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,7 +10,8 @@ export enum Events {
     SetMainViewScenePath = "SetMainViewScenePath",
     SetMainViewSceneIndex = "SetMainViewSceneIndex",
     SwitchViewsToFreedom = "SwitchViewsToFreedom",
-    MoveCameraToContain = "MoveCameraToContain"
+    MoveCameraToContain = "MoveCameraToContain",
+    CursorMove = "CursorMove",
 }
 
 export const MagixEventName = "__WindowManger";
@@ -37,13 +38,13 @@ export enum CursorState {
     Normal = "normal",
 }
 
-export const REQUIRE_VERSION = "2.13.16";
+export const REQUIRE_VERSION = "2.16.1";
 
 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;
+
+export const ROOT_DIR = "/";

package/src/image/laser-pointer-cursor.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
+    <title>编组 2</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <filter x="-120.0%" y="-120.0%" width="340.0%" height="340.0%" filterUnits="objectBoundingBox" id="filter-1">
+            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
+        </filter>
+    </defs>
+    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-2" transform="translate(9.000000, 9.000000)" fill="#FF0100">
+            <circle id="椭圆形" filter="url(#filter-1)" cx="5" cy="5" r="5"></circle>
+            <path d="M5,8 C6.65685425,8 8,6.65685425 8,5 C8,3.34314575 6.65685425,2 5,2 C3.34314575,2 2,3.34314575 2,5 C2,6.65685425 3.34314575,8 5,8 Z M5,6.28571429 C4.28991961,6.28571429 3.71428571,5.71008039 3.71428571,5 C3.71428571,4.28991961 4.28991961,3.71428571 5,3.71428571 C5.71008039,3.71428571 6.28571429,4.28991961 6.28571429,5 C6.28571429,5.71008039 5.71008039,6.28571429 5,6.28571429 Z" id="椭圆形" fill-rule="nonzero"></path>
+        </g>
+    </g>
+</svg>