@netless/window-manager 0.3.17 → 0.4.0-canary.10

package/src/AttributesDelegate.ts

@@ -2,8 +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 } from "white-web-sdk";
-import type { AppManager } from "./AppManager";
+import type { Camera, Size, View } from "white-web-sdk";
 import type { Cursor } from "./Cursor/Cursor";
 
 export enum Fields {
@@ -17,7 +16,7 @@ export enum Fields {
     Cursors = "cursors",
     Position = "position",
     CursorState = "cursorState",
-    FullPath = "fullPath"
+    FullPath = "fullPath",
 }
 
 export type Apps = {
@@ -33,15 +32,29 @@ export type Position = {
 
 export type PositionType = "main" | "app";
 
+export type StoreContext = {
+    getAttributes: () => any;
+    safeUpdateAttributes: (keys: string[], value: any) => void;
+    safeSetAttributes: (attributes: any) => void;
+}
 export class AttributesDelegate {
-    constructor(private manager: AppManager) {}
+
+    constructor(private context: StoreContext) {}
+
+    public setContext(context: StoreContext) {
+        this.context = context;
+    }
+
+    public get attributes() {
+        return this.context.getAttributes();
+    }
 
     public apps(): Apps {
-        return get(this.manager.attributes, [Fields.Apps]);
+        return get(this.attributes, [Fields.Apps]);
     }
 
     public get focus(): string | undefined {
-        return get(this.manager.attributes, [Fields.Focus]);
+        return get(this.attributes, [Fields.Focus]);
     }
 
     public getAppAttributes(id: string): AppSyncAttributes {
@@ -53,13 +66,17 @@ export class AttributesDelegate {
     }
 
     public getMaximized() {
-        return get(this.manager.attributes, ["maximized"])
+        return get(this.attributes, ["maximized"]);
+    }
+
+    public getMinimized() {
+        return get(this.attributes, ["minimized"]);
     }
 
     public setupAppAttributes(params: AddAppParams, id: string, isDynamicPPT: boolean) {
-        const attributes = this.manager.attributes;
+        const attributes = this.attributes;
         if (!attributes.apps) {
-            this.manager.safeSetAttributes({ apps: {} });
+            this.context.safeSetAttributes({ apps: {} });
         }
         const attrNames = ["scenePath", "title"];
         if (!isDynamicPPT) {
@@ -70,32 +87,32 @@ export class AttributesDelegate {
         if (typeof params.src === "string") {
             attrs.src = params.src;
         }
-        this.manager.safeUpdateAttributes([Fields.Apps, id], attrs);
-        this.manager.safeUpdateAttributes([Fields.Apps, id, Fields.State], {
+        attrs.createdAt = Date.now();
+        this.context.safeUpdateAttributes([Fields.Apps, id], attrs);
+        this.context.safeUpdateAttributes([Fields.Apps, id, Fields.State], {
             [AppAttributes.Size]: {},
             [AppAttributes.Position]: {},
             [AppAttributes.SceneIndex]: 0,
-            [AppAttributes.ZIndex]: 100,
         });
     }
 
     public updateAppState(appId: string, stateName: AppAttributes, state: any) {
-        if (get(this.manager.attributes, [Fields.Apps, appId, Fields.State])) {
-            this.manager.safeUpdateAttributes([Fields.Apps, appId, Fields.State, stateName], state);
+        if (get(this.attributes, [Fields.Apps, appId, Fields.State])) {
+            this.context.safeUpdateAttributes([Fields.Apps, appId, Fields.State, stateName], state);
         }
     }
 
     public cleanAppAttributes(id: string) {
-        this.manager.safeUpdateAttributes([Fields.Apps, id], undefined);
-        this.manager.safeSetAttributes({ [id]: undefined });
-        const focus = this.manager.attributes[Fields.Focus];
+        this.context.safeUpdateAttributes([Fields.Apps, id], undefined);
+        this.context.safeSetAttributes({ [id]: undefined });
+        const focus = this.attributes[Fields.Focus];
         if (focus === id) {
             this.cleanFocus();
         }
     }
 
     public cleanFocus() {
-        this.manager.safeSetAttributes({ [Fields.Focus]: undefined });
+        this.context.safeSetAttributes({ [Fields.Focus]: undefined });
     }
 
     public getAppSceneIndex(id: string) {
@@ -107,82 +124,79 @@ export class AttributesDelegate {
     }
 
     public getMainViewScenePath() {
-        return this.manager.attributes["_mainScenePath"];
+        return this.attributes["_mainScenePath"];
     }
 
     public getMainViewSceneIndex() {
-        return this.manager.attributes["_mainSceneIndex"];
+        return this.attributes["_mainSceneIndex"];
     }
 
     public getBoxState() {
-        return this.manager.attributes[Fields.BoxState];
+        return this.attributes[Fields.BoxState];
     }
 
     public setMainViewScenePath(scenePath: string) {
-        this.manager.safeSetAttributes({ _mainScenePath: scenePath });
+        this.context.safeSetAttributes({ _mainScenePath: scenePath });
     }
 
     public setMainViewSceneIndex(index: number) {
-        this.manager.safeSetAttributes({ _mainSceneIndex: index });
+        this.context.safeSetAttributes({ _mainSceneIndex: index });
     }
 
     public getMainViewCamera(): MainViewCamera {
-        return get(this.manager.attributes, [Fields.MainViewCamera]);
+        return get(this.attributes, [Fields.MainViewCamera]);
     }
 
     public getMainViewSize(): MainViewSize {
-        return get(this.manager.attributes, [Fields.MainViewSize]);
+        return get(this.attributes, [Fields.MainViewSize]);
     }
 
-    public setMainViewCamera(camera: Camera & { id: string } | undefined) {
-        this.manager.safeSetAttributes({ [Fields.MainViewCamera]: { ...camera } });
+    public setMainViewCamera(camera: (Camera & { id: string }) | undefined) {
+        this.context.safeSetAttributes({ [Fields.MainViewCamera]: { ...camera } });
     }
 
-    public setMainViewSize(size: Size & { id: string } | undefined) {
-        this.manager.safeSetAttributes({ [Fields.MainViewSize]: { ...size } });
+    public setMainViewSize(size: (Size & { id: string }) | undefined) {
+        this.context.safeSetAttributes({ [Fields.MainViewSize]: { ...size } });
     }
 
     public setAppFocus(appId: string, focus: boolean) {
         if (focus) {
-            this.manager.safeSetAttributes({ [Fields.Focus]: appId });
+            this.context.safeSetAttributes({ [Fields.Focus]: appId });
         } else {
-            this.manager.safeSetAttributes({ [Fields.Focus]: undefined });
+            this.context.safeSetAttributes({ [Fields.Focus]: undefined });
         }
     }
 
     public updateCursor(uid: string, position: Position) {
-        if (!get(this.manager.attributes, [Fields.Cursors])) {
-            this.manager.safeUpdateAttributes([Fields.Cursors], {});
+        if (!get(this.attributes, [Fields.Cursors])) {
+            this.context.safeUpdateAttributes([Fields.Cursors], {});
         }
-        if (!get(this.manager.attributes, [Fields.Cursors, uid])) {
-            this.manager.safeUpdateAttributes([Fields.Cursors, uid], {});
+        if (!get(this.attributes, [Fields.Cursors, uid])) {
+            this.context.safeUpdateAttributes([Fields.Cursors, uid], {});
         }
-        this.manager.safeUpdateAttributes([Fields.Cursors, uid, Fields.Position], position);
+        this.context.safeUpdateAttributes([Fields.Cursors, uid, Fields.Position], position);
     }
 
     public updateCursorState(uid: string, cursorState: string | undefined) {
-        if (!get(this.manager.attributes, [Fields.Cursors, uid])) {
-            this.manager.safeUpdateAttributes([Fields.Cursors, uid], {});
+        if (!get(this.attributes, [Fields.Cursors, uid])) {
+            this.context.safeUpdateAttributes([Fields.Cursors, uid], {});
         }
-        this.manager.safeUpdateAttributes(
-            [Fields.Cursors, uid, Fields.CursorState],
-            cursorState
-        );
+        this.context.safeUpdateAttributes([Fields.Cursors, uid, Fields.CursorState], cursorState);
     }
 
     public getCursorState(uid: string) {
-        return get(this.manager.attributes, [Fields.Cursors, uid, Fields.CursorState]);
+        return get(this.attributes, [Fields.Cursors, uid, Fields.CursorState]);
     }
 
     public cleanCursor(uid: string) {
-        this.manager.safeUpdateAttributes([Fields.Cursors, uid], undefined);
+        this.context.safeUpdateAttributes([Fields.Cursors, uid], undefined);
     }
 
     // TODO 状态中保存一个 SceneName 优化性能
-    public setMainViewFocusPath() {
+    public setMainViewFocusPath(mainView: View) {
         const scenePath = this.getMainViewScenePath();
         if (scenePath) {
-            setViewFocusScenePath(this.manager.mainView, scenePath);
+            setViewFocusScenePath(mainView, scenePath);
         }
     }
 }
@@ -191,15 +205,28 @@ export type MainViewSize = {
     id: string;
     width: number;
     height: number;
-}
+};
 
 export type MainViewCamera = {
     id: string;
     centerX: number;
     centerY: number;
     scale: number;
-}
+};
 
 export type Cursors = {
     [key: string]: Cursor;
-}
+};
+
+
+export const store = new AttributesDelegate({
+    getAttributes: () => {
+        throw new Error("getAttributes not implemented")
+    },
+    safeSetAttributes: () => {
+        throw new Error("safeSetAttributes not implemented")
+    },
+    safeUpdateAttributes: () => {
+        throw new Error("safeUpdateAttributes not implemented")
+    },
+});

package/src/Base/Context.ts

@@ -27,15 +27,11 @@ export class Context {
     }
 
     public updateManagerRect() {
-        this.manager.boxManager.updateManagerRect();
+        this.manager.boxManager?.updateManagerRect();
     }
 
     public blurFocusBox() {
-        this.manager.boxManager.blurAllBox();
-    }
-
-    public switchAppToWriter(id: string) {
-        this.manager.viewManager.switchAppToWriter(id);
+        this.manager.boxManager?.blurAllBox();
     }
 }
 

package/src/Base/index.ts

@@ -1,9 +1,9 @@
 import type { AppManager } from "../AppManager";
-import { AttributesDelegate } from "../AttributesDelegate";
+import { store } from "../AttributesDelegate";
 import { createContext } from "./Context";
 
 export class Base {
-    public store = new AttributesDelegate(this.manager);
+    public store = store;
     public context = createContext(this.manager);
 
     constructor(public manager: AppManager) {}

package/src/BoxManager.ts

@@ -1,22 +1,22 @@
-import { callbacks, emitter, WindowManager } from "./index";
+import { AppAttributes, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
 import { debounce, maxBy } from "lodash";
-import { AppAttributes, DEFAULT_COLLECTOR_STYLE, Events, MIN_HEIGHT, MIN_WIDTH } from "./constants";
 import {
     TELE_BOX_MANAGER_EVENT,
     TELE_BOX_STATE,
     TeleBoxCollector,
     TeleBoxManager,
 } from "@netless/telebox-insider";
-import type { AddAppOptions, AppInitState } from "./index";
+import { emitter, WindowManager } from "./index";
+import type { AddAppOptions, AppInitState, EmitterType, CallbacksType } from "./index";
 import type {
     TeleBoxManagerUpdateConfig,
     TeleBoxManagerCreateConfig,
     ReadonlyTeleBox,
     TeleBoxManagerConfig,
     TeleBoxColorScheme,
+    TeleBoxRect,
 } from "@netless/telebox-insider";
 import type Emittery from "emittery";
-import type { AppManager } from "./AppManager";
 import type { NetlessApp } from "./typings";
 import type { View } from "white-web-sdk";
 
@@ -48,31 +48,63 @@ export type CreateTeleBoxManagerConfig = {
     prefersColorScheme?: TeleBoxColorScheme;
 };
 
+export type BoxManagerContext = {
+    safeSetAttributes: (attributes: any) => void;
+    getMainView: () => View;
+    updateAppState: (appId: string, field: AppAttributes, value: any) => void;
+    emitter: EmitterType;
+    callbacks: CallbacksType;
+    canOperate: () => boolean;
+    notifyContainerRectUpdate: (rect: TeleBoxRect) => void;
+    cleanFocus: () => void;
+};
+
+export const createBoxManager = (
+    manager: WindowManager,
+    callbacks: CallbacksType,
+    emitter: EmitterType,
+    options: CreateTeleBoxManagerConfig
+) => {
+    return new BoxManager(
+        {
+            safeSetAttributes: (attributes: any) => manager.safeSetAttributes(attributes),
+            getMainView: () => manager.mainView,
+            updateAppState: (...args) => manager.appManager?.store.updateAppState(...args),
+            canOperate: () => manager.canOperate,
+            notifyContainerRectUpdate: (rect: TeleBoxRect) =>
+                manager.appManager?.notifyContainerRectUpdate(rect),
+            cleanFocus: () => manager.appManager?.store.cleanFocus(),
+            callbacks,
+            emitter,
+        },
+        options
+    );
+};
+
 export class BoxManager {
     public teleBoxManager: TeleBoxManager;
-    public appBoxMap: Map<string, string> = new Map();
-    private mainView = this.manager.mainView;
 
     constructor(
-        private manager: AppManager,
-        createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
+        private context: BoxManagerContext,
+        private createTeleBoxManagerConfig?: CreateTeleBoxManagerConfig
     ) {
+        const { emitter, callbacks } = context;
         this.teleBoxManager = this.setupBoxManager(createTeleBoxManagerConfig);
         this.teleBoxManager.events.on(TELE_BOX_MANAGER_EVENT.State, state => {
             if (state) {
-                callbacks.emit("boxStateChange", state);
-                emitter.emit("boxStateChange", state);
+                this.context.callbacks.emit("boxStateChange", state);
+                this.context.emitter.emit("boxStateChange", state);
             }
         });
         this.teleBoxManager.events.on("minimized", minimized => {
-            this.manager.safeSetAttributes({ minimized });
+            this.context.safeSetAttributes({ minimized });
             if (minimized) {
-                this.manager.store.cleanFocus();
+                this.context.cleanFocus();
                 this.blurAllBox();
             }
         });
         this.teleBoxManager.events.on("maximized", maximized => {
-            this.manager.safeSetAttributes({ maximized });
+            this.context.safeSetAttributes({ maximized });
         });
         this.teleBoxManager.events.on("removed", boxes => {
             boxes.forEach(box => {
@@ -97,7 +129,7 @@ export class BoxManager {
         );
         this.teleBoxManager.events.on("focused", box => {
             if (box) {
-                if (this.manager.canOperate) {
+                if (this.canOperate) {
                     emitter.emit("focus", { appId: box.id });
                 } else {
                     this.teleBoxManager.blurBox(box.id);
@@ -111,8 +143,21 @@ export class BoxManager {
             callbacks.emit("prefersColorSchemeChange", colorScheme);
         });
         this.teleBoxManager.events.on("z_index", box => {
-            this.manager.store.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
+            this.context.updateAppState(box.id, AppAttributes.ZIndex, box.zIndex);
         });
+        emitter.on("playgroundSizeChange", this.playgroundSizeChangeListener);
+    }
+
+    private playgroundSizeChangeListener = () => {
+        this.updateManagerRect();
+    }
+
+    private get mainView() {
+        return this.context.getMainView();
+    }
+
+    private get canOperate() {
+        return this.context.canOperate();
     }
 
     public get boxState() {
@@ -135,6 +180,10 @@ export class BoxManager {
         return this.teleBoxManager.prefersColorScheme;
     }
 
+    public get boxSize() {
+        return this.teleBoxManager.boxes.length;
+    }
+
     public createBox(params: CreateBoxParams): void {
         if (!this.teleBoxManager) return;
         let { minwidth = MIN_WIDTH, minheight = MIN_HEIGHT } = params.app.config ?? {};
@@ -159,14 +208,14 @@ export class BoxManager {
             id: params.appId,
         };
         this.teleBoxManager.create(createBoxConfig, params.smartPosition);
-        emitter.emit(`${params.appId}${Events.WindowCreated}` as any);
+        this.context.emitter.emit(`${params.appId}${Events.WindowCreated}` as any);
     }
 
     public setBoxInitState(appId: string): void {
         const box = this.teleBoxManager.queryOne({ id: appId });
         if (box) {
             if (box.state === TELE_BOX_STATE.Maximized) {
-                emitter.emit("resize", {
+                this.context.emitter.emit("resize", {
                     appId: appId,
                     x: box.x,
                     y: box.y,
@@ -193,24 +242,26 @@ export class BoxManager {
             fence: false,
             prefersColorScheme: createTeleBoxManagerConfig?.prefersColorScheme,
         };
-        const container = createTeleBoxManagerConfig?.collectorContainer || WindowManager.wrapper;
-        const styles = {
-            ...DEFAULT_COLLECTOR_STYLE,
-            ...createTeleBoxManagerConfig?.collectorStyles,
-        };
-        const teleBoxCollector = new TeleBoxCollector({
-            styles: styles,
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        }).mount(container!);
-        initManagerState.collector = teleBoxCollector;
+
         const manager = new TeleBoxManager(initManagerState);
         if (this.teleBoxManager) {
             this.teleBoxManager.destroy();
         }
         this.teleBoxManager = manager;
+        const container = createTeleBoxManagerConfig?.collectorContainer || WindowManager.wrapper;
+        if (container) {
+            this.setCollectorContainer(container);
+        }
         return manager;
     }
 
+    public setCollectorContainer(container: HTMLElement) {
+        const collector = new TeleBoxCollector({
+            styles: this.createTeleBoxManagerConfig?.collectorStyles,
+        }).mount(container);
+        this.teleBoxManager.setCollector(collector);
+    }
+
     public getBox(appId: string): ReadonlyTeleBox | undefined {
         return this.teleBoxManager.queryOne({ id: appId });
     }
@@ -249,16 +300,18 @@ export class BoxManager {
                 },
                 true
             );
-            if (state.maximized != null) {
-                this.teleBoxManager.setMaximized(Boolean(state.maximized), true);
-                this.teleBoxManager.setMinimized(Boolean(state.minimized), true);
-            }
             setTimeout(() => {
                 if (state.focus) {
-                    this.teleBoxManager.focusBox(box.id, true)
+                    this.teleBoxManager.focusBox(box.id, true);
+                }
+                if (state.maximized != null) {
+                    this.teleBoxManager.setMaximized(Boolean(state.maximized), true);
+                }
+                if (state.minimized != null) {
+                    this.teleBoxManager.setMinimized(Boolean(state.minimized), true);
                 }
             }, 50);
-            callbacks.emit("boxStateChange", this.teleBoxManager.state);
+            this.context.callbacks.emit("boxStateChange", this.teleBoxManager.state);
         }
     }
 
@@ -267,7 +320,7 @@ export class BoxManager {
         if (rect && rect.width > 0 && rect.height > 0) {
             const containerRect = { x: 0, y: 0, width: rect.width, height: rect.height };
             this.teleBoxManager.setContainerRect(containerRect);
-            this.manager.notifyContainerRectUpdate(this.teleBoxManager.containerRect);
+            this.context.notifyContainerRectUpdate(this.teleBoxManager.containerRect);
         }
     }
 
@@ -307,7 +360,9 @@ export class BoxManager {
     }
 
     public setMaximized(maximized: boolean) {
-        this.teleBoxManager.setMaximized(maximized, true);
+        if (maximized !== this.maximized) {
+            this.teleBoxManager.setMaximized(maximized, true);
+        }
     }
 
     public setMinimized(minimized: boolean, skipUpdate = true) {
@@ -332,7 +387,12 @@ export class BoxManager {
         this.teleBoxManager.setPrefersColorScheme(colorScheme);
     }
 
+    public setZIndex(id: string, zIndex: number, skipUpdate = true) {
+        this.teleBoxManager.update(id, { zIndex }, skipUpdate);
+    }
+
     public destroy() {
+        emitter.off("playgroundSizeChange", this.playgroundSizeChangeListener);
         this.teleBoxManager.destroy();
     }
 }

package/src/BuiltinApps.ts

@@ -0,0 +1,24 @@
+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) {
+        setOptions({ verbose: true });
+    }
+
+    WindowManager.register({
+        kind: AppDocsViewer.kind,
+        src: AppDocsViewer,
+    });
+    WindowManager.register({
+        kind: AppMediaPlayer.kind,
+        src: AppMediaPlayer,
+    });
+};
+
+export const BuiltinApps = {
+    DocsViewer: AppDocsViewer.kind as string,
+    MediaPlayer: AppMediaPlayer.kind as string,
+};

package/src/ContainerResizeObserver.ts

@@ -0,0 +1,62 @@
+import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
+import { WindowManager } from "./index";
+import type { EmitterType} from "./index";
+
+const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
+
+export class ContainerResizeObserver {
+    private containerResizeObserver?: ResizeObserver;
+
+    constructor(private emitter: EmitterType) {}
+
+    public static create(
+        container: HTMLElement,
+        sizer: HTMLElement,
+        wrapper: HTMLDivElement,
+        emitter: EmitterType,
+    ) {
+        const containerResizeObserver = new ContainerResizeObserver(emitter);
+        containerResizeObserver.observePlaygroundSize(container, sizer, wrapper);
+        return containerResizeObserver;
+    }
+
+    public observePlaygroundSize(
+        container: HTMLElement,
+        sizer: HTMLElement,
+        wrapper: HTMLDivElement
+    ) {
+        this.updateSizer(container.getBoundingClientRect(), sizer, wrapper);
+
+        this.containerResizeObserver = new ResizeObserver(entries => {
+            const containerRect = entries[0]?.contentRect;
+            if (containerRect) {
+                this.updateSizer(containerRect, sizer, wrapper);
+                this.emitter.emit("playgroundSizeChange", containerRect)
+            }
+        });
+
+        this.containerResizeObserver.observe(container);
+    }
+
+    private updateSizer(
+        { width, height }: DOMRectReadOnly,
+        sizer: HTMLElement,
+        wrapper: HTMLDivElement
+    ) {
+        if (width && height) {
+            if (height / width > WindowManager.containerSizeRatio) {
+                height = width * WindowManager.containerSizeRatio;
+                sizer.classList.toggle("netless-window-manager-sizer-horizontal", true);
+            } else {
+                width = height / WindowManager.containerSizeRatio;
+                sizer.classList.toggle("netless-window-manager-sizer-horizontal", false);
+            }
+            wrapper.style.width = `${width}px`;
+            wrapper.style.height = `${height}px`;
+        }
+    }
+
+    public disconnect() {
+        this.containerResizeObserver?.disconnect();
+    }
+}