@netless/window-manager 0.4.0-canary.9 → 0.4.2

package/src/AppProxy.ts

@@ -3,15 +3,12 @@ import { AppAttributes, AppEvents, Events } from "./constants";
 import { AppContext } from "./AppContext";
 import { appRegister } from "./Register";
 import { autorun } from "white-web-sdk";
+import { BoxManagerNotFoundError } from "./Utils/error";
+import { debounce, get } from "lodash";
 import { emitter } from "./index";
 import { Fields } from "./AttributesDelegate";
-import { get } from "lodash";
+import { entireScenes, getScenePath, removeScenes, setScenePath, setViewFocusScenePath } from "./Utils/Common";
 import { log } from "./Utils/log";
-import {
-    setScenePath,
-    setViewFocusScenePath,
-    getScenePath
-} from "./Utils/Common";
 import type {
     AppEmitterEvent,
     AppInitState,
@@ -23,10 +20,9 @@ import type { SceneState, View, SceneDefinition } from "white-web-sdk";
 import type { AppManager } from "./AppManager";
 import type { NetlessApp } from "./typings";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
-import { Base } from "./Base";
-import { BoxManagerNotFoundError } from "./Utils/error";
 
-export class AppProxy extends Base {
+export class AppProxy {
+    public kind: string;
     public id: string;
     public scenePath?: string;
     public appEmitter: Emittery<AppEmitterEvent>;
@@ -36,7 +32,8 @@ export class AppProxy extends Base {
     private boxManager = this.manager.boxManager;
     private appProxies = this.manager.appProxies;
     private viewManager = this.manager.viewManager;
-    private kind: string;
+    private store = this.manager.store;
+
     public isAddApp: boolean;
     private status: "normal" | "destroyed" = "normal";
     private stateKey: string;
@@ -45,11 +42,10 @@ export class AppProxy extends Base {
 
     constructor(
         private params: BaseInsertParams,
-        manager: AppManager,
+        private manager: AppManager,
         appId: string,
         isAddApp: boolean
     ) {
-        super(manager);
         this.kind = params.kind;
         this.id = appId;
         this.stateKey = `${this.id}_state`;
@@ -71,7 +67,7 @@ export class AppProxy extends Base {
         if (options) {
             this.scenePath = options.scenePath;
             if (this.appAttributes?.isDynamicPPT && this.scenePath) {
-                this.scenes = this.manager.displayer.entireScenes()[this.scenePath];
+                this.scenes = entireScenes(this.manager.displayer)[this.scenePath];
             } else {
                 this.scenes = options.scenes;
             }
@@ -113,9 +109,7 @@ export class AppProxy extends Base {
         this.manager.safeUpdateAttributes(["apps", this.id, Fields.FullPath], path);
     }
 
-    public async baseInsertApp(
-        skipUpdate = false,
-    ): Promise<{ appId: string; app: NetlessApp }> {
+    public async baseInsertApp(skipUpdate = false): Promise<{ appId: string; app: NetlessApp }> {
         const params = this.params;
         if (!params.kind) {
             throw new Error("[WindowManager]: kind require");
@@ -123,30 +117,27 @@ export class AppProxy extends Base {
         const appImpl = await appRegister.appClasses.get(params.kind)?.();
         const appParams = appRegister.registered.get(params.kind);
         if (appImpl) {
-            await this.setupApp(this.id, skipUpdate, appImpl, params.options, appParams?.appOptions);
+            await this.setupApp(
+                this.id,
+                skipUpdate,
+                appImpl,
+                params.options,
+                appParams?.appOptions
+            );
         } else {
             throw new Error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
         }
-        this.context.updateManagerRect();
+        this.boxManager?.updateManagerRect();
         return {
             appId: this.id,
             app: appImpl,
         };
     }
 
-    private focusApp() {
-        this.focusBox();
-        this.store.setMainViewFocusPath(this.manager.mainView);
-    }
-
     public get box(): ReadonlyTeleBox | undefined {
         return this.boxManager?.getBox(this.id);
     }
 
-    public focusBox() {
-        this.boxManager?.focusBox({ appId: this.id });
-    }
-
     private async setupApp(
         appId: string,
         skipUpdate: boolean,
@@ -174,7 +165,7 @@ export class AppProxy extends Base {
                     // 延迟执行 setup, 防止初始化的属性没有更新成功
                     const result = await app.setup(context);
                     this.appResult = result;
-                    appRegister.notifyApp(app.kind, "created", { appId, result });
+                    appRegister.notifyApp(this.kind, "created", { appId, result });
                     this.afterSetupApp(boxInitState);
                     this.fixMobileSize();
                 }, 50);
@@ -186,6 +177,10 @@ export class AppProxy extends Base {
                 canOperate: this.manager.canOperate,
                 smartPosition: this.isAddApp,
             });
+            if (this.isAddApp && this.box) {
+                this.store.updateAppState(appId, AppAttributes.ZIndex, this.box.zIndex);
+                this.boxManager.focusBox({ appId }, false);
+            }
         } catch (error: any) {
             console.error(error);
             throw new Error(`[WindowManager]: app setup error: ${error.message}`);
@@ -317,7 +312,7 @@ export class AppProxy extends Base {
                 }
             });
         });
-        this.manager.refresher?.add(this.stateKey,() => {
+        this.manager.refresher?.add(this.stateKey, () => {
             return autorun(() => {
                 const appState = this.appAttributes?.state;
                 if (appState?.zIndex > 0 && appState.zIndex !== this.box?.zIndex) {
@@ -325,8 +320,20 @@ export class AppProxy extends Base {
                 }
             });
         });
+        this.manager.refresher?.add(`${appId}-fullPath`, () => {
+            return autorun(() => {
+                const fullPath = this.appAttributes?.fullPath;
+                this.setFocusScenePathHandler(fullPath);
+            });
+        });
     };
 
+    private setFocusScenePathHandler = debounce((fullPath: string | undefined) => {
+        if (this.view && fullPath && fullPath !== this.view?.focusScenePath) {
+            setViewFocusScenePath(this.view, fullPath);
+        }
+    }, 50);
+
     public setScenePath(): void {
         if (!this.manager.canOperate) return;
         const fullScenePath = this.getFullScenePath();
@@ -365,6 +372,9 @@ export class AppProxy extends Base {
         }
         if (cleanAttrs) {
             this.store.cleanAppAttributes(this.id);
+            if (this.scenePath) {
+                removeScenes(this.manager.room, this.scenePath);
+            }
         }
         this.appProxies.delete(this.id);
 
@@ -372,6 +382,7 @@ export class AppProxy extends Base {
         this.manager.appStatus.delete(this.id);
         this.manager.refresher?.remove(this.id);
         this.manager.refresher?.remove(this.stateKey);
+        this.manager.refresher?.remove(`${this.id}-fullPath`);
     }
 
     public close(): Promise<void> {

package/src/AttributesDelegate.ts

@@ -123,7 +123,7 @@ export class AttributesDelegate {
         return this.getAppAttributes(id)?.options?.scenePath;
     }
 
-    public getMainViewScenePath() {
+    public getMainViewScenePath(): string | undefined {
         return this.attributes["_mainScenePath"];
     }
 
@@ -159,7 +159,7 @@ export class AttributesDelegate {
         this.context.safeSetAttributes({ [Fields.MainViewSize]: { ...size } });
     }
 
-    public setAppFocus(appId: string, focus: boolean) {
+    public setAppFocus = (appId: string, focus: boolean) => {
         if (focus) {
             this.context.safeSetAttributes({ [Fields.Focus]: appId });
         } else {

package/src/BoxManager.ts

@@ -1,12 +1,11 @@
 import { AppAttributes, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
-import { debounce, maxBy } from "lodash";
+import { debounce } from "lodash";
+import { emitter, WindowManager } from "./index";
 import {
-    TELE_BOX_MANAGER_EVENT,
     TELE_BOX_STATE,
     TeleBoxCollector,
     TeleBoxManager,
 } from "@netless/telebox-insider";
-import { emitter, WindowManager } from "./index";
 import type { AddAppOptions, AppInitState, EmitterType, CallbacksType } from "./index";
 import type {
     TeleBoxManagerUpdateConfig,
@@ -15,6 +14,7 @@ import type {
     TeleBoxManagerConfig,
     TeleBoxColorScheme,
     TeleBoxRect,
+    TeleBoxConfig,
 } from "@netless/telebox-insider";
 import type Emittery from "emittery";
 import type { NetlessApp } from "./typings";
@@ -57,6 +57,7 @@ export type BoxManagerContext = {
     canOperate: () => boolean;
     notifyContainerRectUpdate: (rect: TeleBoxRect) => void;
     cleanFocus: () => void;
+    setAppFocus: (appId: string) => void;
 };
 
 export const createBoxManager = (
@@ -74,6 +75,7 @@ export const createBoxManager = (
             notifyContainerRectUpdate: (rect: TeleBoxRect) =>
                 manager.appManager?.notifyContainerRectUpdate(rect),
             cleanFocus: () => manager.appManager?.store.cleanFocus(),
+            setAppFocus: (appId: string) => manager.appManager?.store.setAppFocus(appId, true),
             callbacks,
             emitter,
         },
@@ -90,17 +92,32 @@ export class BoxManager {
     ) {
         const { emitter, callbacks } = context;
         this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
-        this.teleBoxManager.events.on(TELE_BOX_MANAGER_EVENT.State, state => {
-            if (state) {
-                this.context.callbacks.emit("boxStateChange", state);
-                this.context.emitter.emit("boxStateChange", state);
-            }
+
+        // 使用 _xxx$.reaction 订阅修改的值, 不管有没有 skipUpdate, 修改值都会触发回调
+        this.teleBoxManager._state$.reaction(state => {
+            callbacks.emit("boxStateChange", state);
+            emitter.emit("boxStateChange", state);
+        });
+
+        this.teleBoxManager._darkMode$.reaction(darkMode => {
+            callbacks.emit("darkModeChange", darkMode);
         });
+        this.teleBoxManager._prefersColorScheme$.reaction(colorScheme => {
+            callbacks.emit("prefersColorSchemeChange", colorScheme);
+        });
+
+        // events.on 的值则会根据 skipUpdate 来决定是否触发回调
         this.teleBoxManager.events.on("minimized", minimized => {
             this.context.safeSetAttributes({ minimized });
             if (minimized) {
                 this.context.cleanFocus();
                 this.blurAllBox();
+            } else {
+                const topBox = this.getTopBox();
+                if (topBox) {
+                    this.context.setAppFocus(topBox.id);
+                    this.focusBox({ appId: topBox.id }, false);
+                }
             }
         });
         this.teleBoxManager.events.on("maximized", maximized => {
@@ -136,12 +153,6 @@ export class BoxManager {
                 }
             }
         });
-        this.teleBoxManager.events.on("dark_mode", darkMode => {
-            callbacks.emit("darkModeChange", darkMode);
-        });
-        this.teleBoxManager.events.on("prefers_color_scheme", colorScheme => {
-            callbacks.emit("prefersColorSchemeChange", colorScheme);
-        });
         this.teleBoxManager.events.on("z_index", box => {
             this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
         });
@@ -150,7 +161,7 @@ export class BoxManager {
 
     private playgroundSizeChangeListener = () => {
         this.updateManagerRect();
-    }
+    };
 
     private get mainView() {
         return this.context.getMainView();
@@ -281,8 +292,7 @@ export class BoxManager {
     }
 
     public getTopBox(): ReadonlyTeleBox | undefined {
-        const boxes = this.teleBoxManager.query();
-        return maxBy(boxes, "zIndex");
+        return this.teleBoxManager.topBox;
     }
 
     public updateBoxState(state?: AppInitState): void {
@@ -359,9 +369,9 @@ export class BoxManager {
         this.teleBoxManager.updateAll(config);
     }
 
-    public setMaximized(maximized: boolean) {
+    public setMaximized(maximized: boolean, skipUpdate = true): void {
         if (maximized !== this.maximized) {
-            this.teleBoxManager.setMaximized(maximized, true);
+            this.teleBoxManager.setMaximized(maximized, skipUpdate);
         }
     }
 
@@ -379,6 +389,10 @@ export class BoxManager {
         }
     }
 
+    public updateBox(id: string, payload: TeleBoxConfig, skipUpdate = true): void {
+        this.teleBoxManager.update(id, payload, skipUpdate);
+    }
+
     public setReadonly(readonly: boolean) {
         this.teleBoxManager.setReadonly(readonly);
     }

package/src/BuiltinApps.ts

@@ -1,7 +1,6 @@
 import AppDocsViewer from "@netless/app-docs-viewer";
 import AppMediaPlayer, { setOptions } from "@netless/app-media-player";
 import { WindowManager } from "./index";
-import "@netless/app-docs-viewer/dist/style.css";
 
 export const setupBuiltin = () => {
     if (WindowManager.debug) {

package/src/ContainerResizeObserver.ts

@@ -1,6 +1,6 @@
 import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
 import { WindowManager } from "./index";
-import type { EmitterType} from "./index";
+import type { EmitterType } from "./index";
 
 const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
 
@@ -13,7 +13,7 @@ export class ContainerResizeObserver {
         container: HTMLElement,
         sizer: HTMLElement,
         wrapper: HTMLDivElement,
-        emitter: EmitterType,
+        emitter: EmitterType
     ) {
         const containerResizeObserver = new ContainerResizeObserver(emitter);
         containerResizeObserver.observePlaygroundSize(container, sizer, wrapper);
@@ -31,7 +31,7 @@ export class ContainerResizeObserver {
             const containerRect = entries[0]?.contentRect;
             if (containerRect) {
                 this.updateSizer(containerRect, sizer, wrapper);
-                this.emitter.emit("playgroundSizeChange", containerRect)
+                this.emitter.emit("playgroundSizeChange", containerRect);
             }
         });
 

package/src/Cursor/Cursor.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { isEmpty } from "lodash";
+    import { ApplianceNames } from "white-web-sdk";
 
     export let cursorName: string;
     export let tagName: string;
@@ -19,6 +20,7 @@
     $: hasTagName = !isEmpty(tagName);
     $: hasAvatar = !isEmpty(avatar);
     $: display = visible ? "initial" : "none";
+    $: isLaserPointer = appliance === ApplianceNames.laserPointer;
 
     const computedAvatarStyle = () => {
         return Object.entries({
@@ -36,28 +38,30 @@
 <div
     class="netless-window-manager-cursor-mid"
     style="transform: translateX({x}px) translateY({y}px);display: {display}"
->
-    <div class="netless-window-manager-cursor-name">
-        <div
-            class={theme}
-            style="background-color: {backgroundColor};color: {color};opacity: {opacity}"
-        >
-            {#if hasAvatar}
-                <img
-                    class="netless-window-manager-cursor-selector-avatar"
-                    style={computedAvatarStyle()}
-                    src={avatar}
-                    alt="avatar"
-                />
-            {/if}
-            <span style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;max-width: 80px">{cursorName}</span>
-            {#if hasTagName}
-                <span class="netless-window-manager-cursor-tag-name" style="background-color: {cursorTagBackgroundColor}">
-                    {tagName}
-                </span>
-            {/if}
+>   
+    {#if !isLaserPointer}
+        <div class="netless-window-manager-cursor-name">
+            <div
+                class={theme}
+                style="background-color: {backgroundColor};color: {color};opacity: {opacity}"
+            >
+                {#if hasAvatar}
+                    <img
+                        class="netless-window-manager-cursor-selector-avatar"
+                        style={computedAvatarStyle()}
+                        src={avatar}
+                        alt="avatar"
+                    />
+                {/if}
+                <span style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;max-width: 80px">{cursorName}</span>
+                {#if hasTagName}
+                    <span class="netless-window-manager-cursor-tag-name" style="background-color: {cursorTagBackgroundColor}">
+                        {tagName}
+                    </span>
+                {/if}
+            </div>
         </div>
-    </div>
+    {/if}
     <div class="cursor-image-wrapper">
         <img class="netless-window-manager-cursor-{appliance}-image" {src} alt={appliance} />
     </div>

package/src/Cursor/Cursor.ts

@@ -1,42 +1,34 @@
-import App from './Cursor.svelte';
-import { ApplianceMap } from './icons';
-import { ApplianceNames } from 'white-web-sdk';
-import { CursorState } from '../constants';
-import { Fields } from '../AttributesDelegate';
-import { get, omit } from 'lodash';
-import type { Position } from '../AttributesDelegate';
+import App from "./Cursor.svelte";
+import { ApplianceMap } from "./icons";
+import { ApplianceNames } from "white-web-sdk";
+import { omit } from "lodash";
+import type { Position } from "../AttributesDelegate";
 import type { RoomMember } from "white-web-sdk";
 import type { CursorManager } from "./index";
 import type { SvelteComponent } from "svelte";
-import { Base } from '../Base';
-import type { AppManager } from '../AppManager';
+import type { AppManager } from "../AppManager";
 
 export type Payload = {
-    [key: string]: any
-}
-
+    [key: string]: any;
+};
 
-export class Cursor extends Base {
+export class Cursor {
     private member?: RoomMember;
     private timer?: number;
     private component?: SvelteComponent;
 
     constructor(
-        manager: AppManager,
-        addCursorChangeListener: (uid: string, callback: (position: Position, state: CursorState) => void) => void,
-        private cursors: any,
+        private manager: AppManager,
         private memberId: string,
         private cursorManager: CursorManager,
-        private wrapper?: HTMLElement,
+        private wrapper?: HTMLElement
     ) {
-        super(manager);
-        this.setMember();
+        this.updateMember();
         this.createCursor();
-        addCursorChangeListener(this.memberId, this.onCursorChange);
         this.autoHidden();
     }
 
-    private onCursorChange = (position: Position, state: CursorState) => {
+    public move = (position: Position) => {
         if (position.type === "main") {
             const rect = this.cursorManager.wrapperRect;
             if (this.component && rect) {
@@ -45,7 +37,6 @@ export class Cursor extends Base {
             }
         } else {
             const focusView = this.cursorManager.focusView;
-            // TODO 可以存一个当前 focusView 的 Rect 这样只有 focus 切换的时候才调用 getBoundingClientRect
             const viewRect = focusView?.divElement?.getBoundingClientRect();
             const viewCamera = focusView?.camera;
             if (focusView && viewRect && viewCamera && this.component) {
@@ -53,10 +44,11 @@ export class Cursor extends Base {
                 this.moveCursor(position, viewRect, focusView);
             }
         }
-        if (state && state === CursorState.Leave) {
-            this.hide();
-        }
-    }
+    };
+
+    public leave = () => {
+        this.hide();
+    };
 
     private moveCursor(cursor: Position, rect: DOMRect, view: any) {
         const { x, y, type } = cursor;
@@ -124,21 +116,12 @@ export class Cursor extends Base {
         }
     }
 
-    public get cursorState(): CursorState | undefined {
-        return get(this.cursors, [this.memberId, Fields.CursorState]);
-    }
-
-    public get cursorPosition(): Position | undefined {
-        return get(this.cursors, [this.memberId, Fields.Position]);
-    }
-
     private autoHidden() {
         if (this.timer) {
             clearTimeout(this.timer);
         }
         this.timer = window.setTimeout(() => {
             this.hide();
-            this.store.updateCursorState(this.memberId, CursorState.Leave);
         }, 1000 * 10); // 10 秒钟自动隐藏
     }
 
@@ -175,9 +158,10 @@ export class Cursor extends Base {
         }
     }
 
-    public setMember() {
-        this.member = this.context.findMemberByUid(this.memberId);
+    public updateMember() {
+        this.member = this.manager.findMemberByUid(this.memberId);
         this.updateComponent();
+        return this.member;
     }
 
     private updateComponent() {
@@ -188,13 +172,16 @@ export class Cursor extends Base {
         if (this.component) {
             this.component.$destroy();
         }
-        this.manager.refresher?.remove(this.memberId);
         this.cursorManager.cursorInstances.delete(this.memberId);
+        if (this.timer) {
+            clearTimeout(this.timer);
+        }
     }
 
     public hide() {
         if (this.component) {
             this.component.$set({ visible: false });
+            this.destroy();
         }
     }
 }

package/src/Cursor/icons.ts

@@ -4,6 +4,7 @@ import selector from "../image/selector-cursor.png";
 import eraser from "../image/eraser-cursor.png";
 import shape from "../image/shape-cursor.svg";
 import text from "../image/text-cursor.svg";
+import laser from "../image/laser-pointer-cursor.svg";
 
 export const ApplianceMap: {
     [key: string]: string;
@@ -13,4 +14,5 @@ export const ApplianceMap: {
     [ApplianceNames.eraser]: eraser,
     [ApplianceNames.shape]: shape,
     [ApplianceNames.text]: text,
+    [ApplianceNames.laserPointer]: laser,
 };