@netless/window-manager 1.0.14 → 1.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "description": "Multi-window mode for Netless Whiteboard",
   "author": "l1shen <lishen1635@gmail.com> (https://github.com/l1shen)",
   "license": "MIT",
@@ -23,7 +23,7 @@
   },
   "peerDependencies": {
     "jspdf": "2.5.1",
-    "white-web-sdk": "^2.16.54"
+    "white-web-sdk": "^2.16.55"
   },
   "peerDependenciesMeta": {
     "jspdf": {
@@ -43,6 +43,7 @@
     "@hyrious/dts": "^0.2.2",
     "@netless/app-docs-viewer": "^0.2.19",
     "@netless/app-media-player": "0.1.4",
+    "@netless/app-presentation": "^0.1.9",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-url": "^6.1.0",
@@ -72,6 +73,6 @@
     "typescript": "^4.5.5",
     "vite": "^2.9.9",
     "vitest": "^0.14.1",
-    "white-web-sdk": "^2.16.54"
+    "white-web-sdk": "^2.16.55"
   }
 }

package/src/App/AppProxy.ts

@@ -154,20 +154,25 @@ export class AppProxy implements PageRemoveService {
         }
         const appImpl = await appRegister.appClasses.get(params.kind)?.();
         const appParams = appRegister.registered.get(params.kind);
+        const appOptions = this.manager.windowManger.resolveAppOptions(
+            params.kind,
+            appParams?.appOptions
+        );
         if (appImpl) {
             await this.setupApp(
                 this.id,
                 skipUpdate,
                 appImpl,
                 params.options,
-                appParams?.appOptions,
+                appOptions,
                 this.manager.useBoxesStatus ? boxStatus : undefined,
                 params.forceTop,
                 params.forceNormal,
                 params.isDragContent
             );
         } else {
-            this.Logger && this.Logger.error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
+            this.Logger &&
+                this.Logger.error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
             throw new Error(`[WindowManager]: app load failed ${params.kind} ${params.src}`);
         }
         internalEmitter.emit("updateManagerRect");
@@ -216,7 +221,10 @@ export class AppProxy implements PageRemoveService {
                 }
                 setTimeout(async () => {
                     // 延迟执行 setup, 防止初始化的属性没有更新成功
-                    this.Logger && this.Logger.info(`[WindowManager]: setup app ${this.kind}, appId: ${appId}`);
+                    this.Logger &&
+                        this.Logger.info(
+                            `[WindowManager]: setup app ${this.kind}, appId: ${appId}`
+                        );
                     const result = await app.setup(context);
                     this.appResult = result;
                     appRegister.notifyApp(this.kind, "created", { appId, result });
@@ -561,7 +569,8 @@ export class AppProxy implements PageRemoveService {
         this.manager.refresher.remove(this.stateKey);
         this.manager.refresher.remove(`${this.id}-fullPath`);
         this._prevFullPath = undefined;
-        this.Logger && this.Logger.info(`[WindowManager]: destroy app ${this.kind} appId: ${this.id}`);
+        this.Logger &&
+            this.Logger.info(`[WindowManager]: destroy app ${this.kind} appId: ${this.id}`);
     }
 
     public close(): Promise<void> {

package/src/AppManager.ts

@@ -158,7 +158,9 @@ export class AppManager {
                 sceneName = this.callbacksNode?.scenes[nextIndex];
             }
             if (sceneName) {
-                console.log(`[window-manager] onRemoveScenes  setMainViewScenePath ${ROOT_DIR}${sceneName}`);
+                console.log(
+                    `[window-manager] onRemoveScenes  setMainViewScenePath ${ROOT_DIR}${sceneName}`
+                );
                 this.setMainViewScenePath(`${ROOT_DIR}${sceneName}`);
             }
             await this.setMainViewSceneIndex(nextIndex);
@@ -604,9 +606,10 @@ export class AppManager {
                     try {
                         const appAttributes = this.attributes[id];
                         if (!appAttributes) {
-                            this.Logger && this.Logger.error(
-                                `[WindowManager]: appAttributes is undefined, appId: ${id}`
-                            );
+                            this.Logger &&
+                                this.Logger.error(
+                                    `[WindowManager]: appAttributes is undefined, appId: ${id}`
+                                );
                             throw new Error("appAttributes is undefined");
                         }
 
@@ -712,7 +715,9 @@ export class AppManager {
         callbacks.emit("onMainViewMounted", mainView);
         const hasRoot = this.hasRoot(mainView.divElement);
         const rect = this.getRectByDivElement(mainView.divElement);
-        let log = `[window-manager] bindMainView hasRoot:${hasRoot}, rect:${JSON.stringify(rect)}, outerHeight:${window.outerHeight}, outerWidth:${window.outerWidth}`;
+        let log = `[window-manager] bindMainView hasRoot:${hasRoot}, rect:${JSON.stringify(
+            rect
+        )}, outerHeight:${window.outerHeight}, outerWidth:${window.outerWidth}`;
         const visualViewport = window.visualViewport;
         if (visualViewport) {
             log += `, visualViewportWidth:${visualViewport.width}, visualViewportHeight:${visualViewport.height}, visualViewportOffsetLeft:${visualViewport.offsetLeft}, visualViewportOffsetTop:${visualViewport.offsetTop}`;
@@ -720,7 +725,7 @@ export class AppManager {
         console.log(log);
     }
 
-    private hasRoot(divElement: HTMLDivElement){
+    private hasRoot(divElement: HTMLDivElement) {
         let current = divElement;
         while (current) {
             if (current.parentElement === document.body) {
@@ -731,7 +736,7 @@ export class AppManager {
         return false;
     }
 
-    private getRectByDivElement(divElement: HTMLDivElement){
+    private getRectByDivElement(divElement: HTMLDivElement) {
         // 获取当前divElement的矩形区域
         const rect = divElement.getBoundingClientRect();
         return rect;
@@ -818,7 +823,8 @@ export class AppManager {
             return appProxy;
         } else {
             this.appStatus.delete(appId);
-            this.Logger && this.Logger.error(`[WindowManager]: initialize AppProxy failed, appId: ${appId}`);
+            this.Logger &&
+                this.Logger.error(`[WindowManager]: initialize AppProxy failed, appId: ${appId}`);
             throw new Error("[WindowManger]: initialize AppProxy failed");
         }
     }
@@ -858,7 +864,8 @@ export class AppManager {
             const scenePathType = this.displayer.scenePathType(scenePath);
             const sceneDir = parseSceneDir(scenePath);
             if (sceneDir !== ROOT_DIR) {
-                this.Logger && this.Logger.error(`[WindowManager]: main view scenePath must in root dir "/"`);
+                this.Logger &&
+                    this.Logger.error(`[WindowManager]: main view scenePath must in root dir "/"`);
                 throw new Error(`[WindowManager]: main view scenePath must in root dir "/"`);
             }
             if (scenePathType === ScenePathType.None) {
@@ -866,7 +873,6 @@ export class AppManager {
                 throw new Error(`[WindowManager]: ${scenePath} not valid scene`);
             } else if (scenePathType === ScenePathType.Page) {
                 await this._setMainViewScenePath(scenePath);
-
             } else if (scenePathType === ScenePathType.Dir) {
                 const validScenePath = makeValidScenePath(this.displayer, scenePath);
                 if (validScenePath) {
@@ -1000,4 +1006,3 @@ export class AppManager {
         this._resolveTimer = undefined;
     }
 }
-

package/src/BuiltinApps.ts

@@ -1,5 +1,9 @@
-import AppDocsViewer from "@netless/app-docs-viewer";
 import { WindowManager } from "./index";
+import type { PresentationAppOptions } from "@netless/app-presentation";
+
+export interface BuiltinAppOptions {
+    Presentation?: PresentationAppOptions;
+}
 
 const loadAppMediaPlayer = async () => {
     const mod = await import("@netless/app-media-player");
@@ -9,18 +13,37 @@ const loadAppMediaPlayer = async () => {
     return (mod.default || mod) as any;
 };
 
+const loadAppDocsViewer = async () => {
+    const mod = await import("@netless/app-docs-viewer");
+    return (mod.default || mod) as any;
+};
+
+const loadAppPresentation = async () => {
+    const mod = await import("@netless/app-presentation");
+    return (mod.default || mod) as any;
+};
+
 export const setupBuiltin = () => {
     WindowManager.register({
-        kind: AppDocsViewer.kind,
-        src: AppDocsViewer,
+        kind: BuiltinApps.DocsViewer,
+        src: loadAppDocsViewer,
     });
     WindowManager.register({
-        kind: "MediaPlayer",
+        kind: BuiltinApps.MediaPlayer,
         src: loadAppMediaPlayer,
     });
+    WindowManager.register({
+        kind: BuiltinApps.Presentation,
+        src: loadAppPresentation,
+        appOptions: {
+            debounceSync: true,
+            useScrollbar: true,
+        },
+    });
 };
 
 export const BuiltinApps = {
-    DocsViewer: AppDocsViewer.kind as string,
-    MediaPlayer: "MediaPlayer" as string,
+    DocsViewer: "DocsViewer",
+    MediaPlayer: "MediaPlayer",
+    Presentation: "Presentation",
 };

package/src/ContainerResizeObserver.ts

@@ -9,7 +9,7 @@ const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
 export class ContainerResizeObserver {
     private containerResizeObserver?: ResizeObserver;
     private disposer?: UnsubscribeFn;
-    
+
     private updateSizerLocalConsole = new LocalConsole("updateSizer", 100);
 
     constructor(private emitter: EmitterType) {}
@@ -30,19 +30,24 @@ export class ContainerResizeObserver {
         sizer: HTMLElement,
         wrapper: HTMLDivElement
     ) {
-        this.updateSizer(container.getBoundingClientRect(), sizer, wrapper, 'observePlaygroundSize');
+        this.updateSizer(
+            container.getBoundingClientRect(),
+            sizer,
+            wrapper,
+            "observePlaygroundSize"
+        );
 
         this.containerResizeObserver = new ResizeObserver(entries => {
             const containerRect = entries[0]?.contentRect;
             if (containerRect) {
-                this.updateSizer(containerRect, sizer, wrapper, 'containerResizeObserver');
+                this.updateSizer(containerRect, sizer, wrapper, "containerResizeObserver");
                 this.emitter.emit("playgroundSizeChange", containerRect);
             }
         });
 
         this.disposer = this.emitter.on("containerSizeRatioUpdate", () => {
             const containerRect = container.getBoundingClientRect();
-            this.updateSizer(containerRect, sizer, wrapper, 'containerSizeRatioUpdate');
+            this.updateSizer(containerRect, sizer, wrapper, "containerSizeRatioUpdate");
             this.emitter.emit("playgroundSizeChange", containerRect);
         });
 
@@ -66,7 +71,11 @@ export class ContainerResizeObserver {
             wrapper.style.width = `${width}px`;
             wrapper.style.height = `${height}px`;
             const wrapperRect = wrapper.getBoundingClientRect();
-            this.updateSizerLocalConsole.log(`from ${origin}, traget size: ${JSON.stringify({ width, height })}, wrapperRect: ${wrapperRect.width} ${wrapperRect.height}`);
+            this.updateSizerLocalConsole.log(
+                `from ${origin}, traget size: ${JSON.stringify({ width, height })}, wrapperRect: ${
+                    wrapperRect.width
+                } ${wrapperRect.height}`
+            );
             this.emitter.emit("wrapperRectChange", {
                 width: wrapperRect.width,
                 height: wrapperRect.height,

package/src/Utils/RoomHacker.ts

@@ -48,7 +48,9 @@ export const replaceRoomFunction = (room: Room | Player, manager: WindowManager)
                 console.log("[window-manager] putScenes " + JSON.stringify(args));
                 for (const scene of scenes) {
                     if (`${path}${scene.name}` === currentScenePath) {
-                        console.error(`[window-manager] putScenes: scene name can not be the same as the current scene path: ${currentScenePath}`);
+                        console.error(
+                            `[window-manager] putScenes: scene name can not be the same as the current scene path: ${currentScenePath}`
+                        );
                         return;
                     }
                 }

package/src/Utils/attributesLogStringify.ts

@@ -3,11 +3,16 @@ function formatAttributesLogObjectKey(key: string): string {
     return /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key) ? key : JSON.stringify(key);
 }
 
+type AttributesLogRecord = Record<string, unknown>;
+
 /**
  * attributes 调试日志：对象/数组会写成近似 JS 字面量（保留 `undefined`、数组空洞），避免 `[object Object]`；
  * 并处理 BigInt、循环引用等。
  */
-export function stringifyForAttributesLog(value: unknown, seen?: WeakSet<object>): string {
+export function stringifyForAttributesLog(
+    value: unknown,
+    seen?: WeakSet<AttributesLogRecord>
+): string {
     if (value === undefined) {
         return "undefined";
     }
@@ -29,17 +34,17 @@ export function stringifyForAttributesLog(value: unknown, seen?: WeakSet<object>
         return t === "string" ? JSON.stringify(value as string) : String(value);
     }
 
-    const obj = value as object;
+    const obj = value as AttributesLogRecord;
     if (seen?.has(obj)) {
         return "[Circular]";
     }
 
-    const nextSeen = seen ?? new WeakSet<object>();
+    const nextSeen = seen ?? new WeakSet<AttributesLogRecord>();
     nextSeen.add(obj);
     try {
         if (Array.isArray(value)) {
-            return `[${Array.from(value as unknown[], (item) =>
-                stringifyForAttributesLog(item, nextSeen),
+            return `[${Array.from(value as unknown[], item =>
+                stringifyForAttributesLog(item, nextSeen)
             ).join(",")}]`;
         }
         if (value instanceof Date) {
@@ -48,11 +53,11 @@ export function stringifyForAttributesLog(value: unknown, seen?: WeakSet<object>
         if (value instanceof RegExp) {
             return String(value);
         }
-        const keys = Object.keys(value as object);
-        const pairs = keys.map((k) => {
+        const keys = Object.keys(obj);
+        const pairs = keys.map(k => {
             let v: unknown;
             try {
-                v = (value as Record<string, unknown>)[k];
+                v = obj[k];
             } catch {
                 return `${formatAttributesLogObjectKey(k)}:[Threw]`;
             }

package/src/Utils/log.ts

@@ -1,5 +1,8 @@
 import type { Logger } from "white-web-sdk";
-import { isShallowMergeAttributesRecord, stringifyForAttributesLog } from "./attributesLogStringify";
+import {
+    isShallowMergeAttributesRecord,
+    stringifyForAttributesLog,
+} from "./attributesLogStringify";
 import { WindowManager } from "../index";
 
 /** ArgusLog 经 `logger.info` 上报的单条字符串上限（含前缀） */
@@ -39,10 +42,7 @@ export class LocalConsole {
     private pendingArgs: unknown[] | null = null;
     private flushTimer: ReturnType<typeof setTimeout> | null = null;
 
-    constructor(
-        private readonly name: string,
-        private readonly debounceTime?: number,
-    ) {}
+    constructor(private readonly name: string, private readonly debounceTime?: number) {}
 
     private flush(): void {
         this.flushTimer = null;
@@ -102,7 +102,7 @@ export class ArgusLog {
     constructor(
         private readonly logger: Logger,
         private readonly name: string,
-        private readonly debounceTime?: number,
+        private readonly debounceTime?: number
     ) {}
 
     private emitInfo(message: string): void {
@@ -127,7 +127,9 @@ export class ArgusLog {
             return;
         }
         const body =
-            p.kind === "record" ? stringifyForAttributesLog(p.data) : stringifyForAttributesLog(p.value);
+            p.kind === "record"
+                ? stringifyForAttributesLog(p.data)
+                : stringifyForAttributesLog(p.value);
         this.emitInfo(`[WindowManager][${this.name}]: ${p.label} ${body}`);
         // 输出后释放合并对象引用，避免长时间持有 attributes 快照
         if (p.kind === "record") {
@@ -198,7 +200,7 @@ export class ArgusLog {
             return;
         }
         const parts = segments.map(
-            (s) => `${s.keys.join(", ")} ${stringifyForAttributesLog(s.value)}`,
+            s => `${s.keys.join(", ")} ${stringifyForAttributesLog(s.value)}`
         );
         this.emitInfo(`[WindowManager][${this.name}]: safeUpdateAttributes ${parts.join(" | ")}`);
         for (const s of segments) {
@@ -219,7 +221,9 @@ export class ArgusLog {
 
         if (!debounced) {
             this.emitInfo(
-                `[WindowManager][${this.name}]: safeUpdateAttributes ${keysCopy.join(", ")} ${stringifyForAttributesLog(value)}`,
+                `[WindowManager][${this.name}]: safeUpdateAttributes ${keysCopy.join(
+                    ", "
+                )} ${stringifyForAttributesLog(value)}`
             );
             return;
         }

package/src/Utils/resolveAppOptions.ts

@@ -0,0 +1,12 @@
+export function resolveAppOptions(
+    registeredOptions: any | (() => any),
+    override: any
+): any | (() => any) {
+    if (override === undefined) {
+        return registeredOptions;
+    }
+    return () => ({
+        ...(typeof registeredOptions === "function" ? registeredOptions() : registeredOptions),
+        ...override,
+    });
+}

package/src/View/MainView.ts

@@ -3,11 +3,12 @@ import { callbacks } from "../callback";
 import { createView } from "./ViewManager";
 import { debounce, get, isEmpty, isEqual } from "lodash";
 import { internalEmitter } from "../InternalEmitter";
-import { Fields, type MainViewCamera } from "../AttributesDelegate";
+import { Fields } from "../AttributesDelegate";
 import { setViewFocusScenePath } from "../Utils/Common";
 import { SideEffectManager } from "side-effect-manager";
 import type { Camera, Room, Size, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
+import type { MainViewCamera } from "../AttributesDelegate";
 import { Events } from "../constants";
 import { LocalConsole } from "../Utils/log";
 
@@ -35,7 +36,10 @@ export class MainViewProxy {
 
     private sideEffectManager = new SideEffectManager();
 
-    private playgroundSizeChangeListenerLocalConsole = new LocalConsole("playgroundSizeChangeListener", 100);
+    private playgroundSizeChangeListenerLocalConsole = new LocalConsole(
+        "playgroundSizeChangeListener",
+        100
+    );
     private sizeUpdatedLocalConsole = new LocalConsole("sizeUpdated", 100);
     private cameraUpdatedLocalConsole = new LocalConsole("cameraUpdated", 100);
     private cameraReactionLocalConsole = new LocalConsole("cameraReaction", 100);
@@ -52,12 +56,15 @@ export class MainViewProxy {
         const playgroundSizeChangeListener = () => {
             this.playgroundSizeChangeListenerLocalConsole.log(
                 JSON.stringify(this.mainView.camera),
-                JSON.stringify(this.mainView.size), 
-                JSON.stringify(this.mainViewSize), 
+                JSON.stringify(this.mainView.size),
+                JSON.stringify(this.mainViewSize),
                 JSON.stringify(this.mainViewCamera),
-                window.outerHeight, window.outerWidth, 
-                window.visualViewport?.width ?? "null", window.visualViewport?.height ?? "null",
-                window.visualViewport?.offsetLeft ?? "null", window.visualViewport?.offsetTop ?? "null",
+                window.outerHeight,
+                window.outerWidth,
+                window.visualViewport?.width ?? "null",
+                window.visualViewport?.height ?? "null",
+                window.visualViewport?.offsetLeft ?? "null",
+                window.visualViewport?.offsetTop ?? "null"
             );
             this.sizeChangeHandler(this.mainViewSize);
         };
@@ -164,7 +171,7 @@ export class MainViewProxy {
         element: HTMLDivElement
     ) {
         const { width: viewWidth, height: viewHeight } = this.mainView.size;
-        let targetElement = element;
+        const targetElement = element;
         if (
             Math.abs(viewWidth - observedSize.width) <= 0.5 &&
             Math.abs(viewHeight - observedSize.height) <= 0.5
@@ -172,11 +179,14 @@ export class MainViewProxy {
             return;
         }
         if (this.isForcingMainViewDivElement) {
-            console.log("[window-manager] skipForceSyncMainViewDivElement " + JSON.stringify({
-                reason,
-                observedSize,
-                viewSize: this.mainView.size,
-            }));
+            console.log(
+                "[window-manager] skipForceSyncMainViewDivElement " +
+                    JSON.stringify({
+                        reason,
+                        observedSize,
+                        viewSize: this.mainView.size,
+                    })
+            );
             return;
         }
         this.isForcingMainViewDivElement = true;
@@ -202,11 +212,14 @@ export class MainViewProxy {
         } finally {
             queueMicrotask(() => {
                 const rect = targetElement.getBoundingClientRect();
-                console.log("[window-manager] forceSyncMainViewDivElementResult " + JSON.stringify({
-                    reason,
-                    viewSize: this.mainView.size,
-                    rect: { width: rect.width, height: rect.height },
-                }));
+                console.log(
+                    "[window-manager] forceSyncMainViewDivElementResult " +
+                        JSON.stringify({
+                            reason,
+                            viewSize: this.mainView.size,
+                            rect: { width: rect.width, height: rect.height },
+                        })
+                );
                 this.isForcingMainViewDivElement = false;
             });
         }
@@ -220,10 +233,14 @@ export class MainViewProxy {
         this.addCameraReaction();
         if (this.manager.room) this.syncMainView(this.manager.room);
         this.started = true;
-        if(this.mainView.focusScenePath) {
-            this.manager.windowManger.onMainViewScenePathChangeHandler(this.mainView.focusScenePath);
+        if (this.mainView.focusScenePath) {
+            this.manager.windowManger.onMainViewScenePathChangeHandler(
+                this.mainView.focusScenePath
+            );
         }
-        console.log("[window-manager] start end mainView size:" + JSON.stringify(this.mainView.size));
+        console.log(
+            "[window-manager] start end mainView size:" + JSON.stringify(this.mainView.size)
+        );
     }
 
     public addCameraReaction = () => {
@@ -243,7 +260,11 @@ export class MainViewProxy {
                 if (camera && camera.id !== this.manager.uid) {
                     this.moveCameraToContian(this.mainViewSize);
                     this.moveCamera(camera);
-                    this.cameraReactionLocalConsole.log(`camera: ${JSON.stringify(camera)}, current size: ${JSON.stringify(this.mainViewSize)}`);
+                    this.cameraReactionLocalConsole.log(
+                        `camera: ${JSON.stringify(camera)}, current size: ${JSON.stringify(
+                            this.mainViewSize
+                        )}`
+                    );
                 }
             },
             { fireImmediately: true }
@@ -254,8 +275,13 @@ export class MainViewProxy {
         if (size) {
             this.moveCameraToContian(size);
             this.moveCamera(this.mainViewCamera);
-            console.log("[window-manager] sizeChangeHandler current size and camera" + JSON.stringify(size) + JSON.stringify(this.mainViewCamera) +
-            JSON.stringify(this.mainView.camera) + JSON.stringify(this.mainView.size));
+            console.log(
+                "[window-manager] sizeChangeHandler current size and camera" +
+                    JSON.stringify(size) +
+                    JSON.stringify(this.mainViewCamera) +
+                    JSON.stringify(this.mainView.camera) +
+                    JSON.stringify(this.mainView.size)
+            );
         }
         this.ensureMainViewSize();
     }, 30);

package/src/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";