@netless/window-manager 1.0.0-canary.7 → 1.0.0-canary.71

package/src/Register/index.ts

@@ -1,6 +1,7 @@
 import Emittery from "emittery";
 import { loadApp } from "./loader";
 import type { NetlessApp, RegisterEvents, RegisterParams } from "../typings";
+import { removeItem } from "./storage";
 
 export type LoadAppEvent = {
     kind: string;
@@ -11,11 +12,12 @@ export type LoadAppEvent = {
 export type SyncRegisterAppPayload =  { kind: string, src: string, name: string | undefined };
 export type SyncRegisterApp = (payload: SyncRegisterAppPayload) => void;
 
-class AppRegister {
+export class AppRegister {
     public kindEmitters: Map<string, Emittery<RegisterEvents>> = new Map();
     public registered: Map<string, RegisterParams> = new Map();
     public appClassesCache: Map<string, Promise<NetlessApp>> = new Map();
     public appClasses: Map<string, () => Promise<NetlessApp>> = new Map();
+    public downloaded: Map<string, string> = new Map();
 
     private syncRegisterApp: SyncRegisterApp | null = null;
 
@@ -31,32 +33,39 @@ class AppRegister {
         this.appClassesCache.delete(params.kind);
         this.registered.set(params.kind, params);
 
-        const srcOrAppOrFunction = params.src;
+        const paramSrc = params.src;
         let downloadApp: () => Promise<NetlessApp>;
 
-        if (typeof srcOrAppOrFunction === "string") {
+        if (typeof paramSrc === "string") {
             downloadApp = async () => {
-                let appClass = (await loadApp(srcOrAppOrFunction, params.kind, params.name)) as any;
+                const result = await loadApp(paramSrc, params.kind, params.name) as any;
+                if (result.__esModule) {
+                    return result.default;
+                }
+                return result;
+            };
+            if (this.syncRegisterApp) {
+                this.syncRegisterApp({ kind: params.kind, src: paramSrc, name: params.name });
+            }
+        }
+        if (typeof paramSrc === "function") {
+            downloadApp = async () => {
+                let appClass = await paramSrc() as any;
                 if (appClass) {
-                    if (appClass.__esModule) {
+                    if (appClass.__esModule || appClass.default) {
                         appClass = appClass.default;
                     }
                     return appClass;
                 } else {
                     throw new Error(
-                        `[WindowManager]: load remote script failed, ${srcOrAppOrFunction}`
+                        `[WindowManager]: load remote script failed, ${paramSrc}`
                     );
                 }
             };
-            if (this.syncRegisterApp) {
-                this.syncRegisterApp({ kind: params.kind, src: srcOrAppOrFunction, name: params.name });
-            }
-        } else if (typeof srcOrAppOrFunction === "function") {
-            downloadApp = srcOrAppOrFunction;
-        } else {
-            downloadApp = async () => srcOrAppOrFunction;
         }
-
+        if (typeof paramSrc === "object") {
+            downloadApp = async () => paramSrc;
+        }
         this.appClasses.set(params.kind, async () => {
             let app = this.appClassesCache.get(params.kind);
             if (!app) {
@@ -74,10 +83,23 @@ class AppRegister {
         }
     }
 
+    public downloadApp(kind: string) {
+        const src = this.registered.get(kind);
+        if (src && typeof src.src === "string") {
+            return loadApp(src.src, src.kind, src.name)
+        }
+    }
+
+    public async removeDownloaded(kind: string) {
+        await removeItem(kind);
+        this.downloaded.delete(kind);
+    }
+
     public unregister(kind: string) {
         this.appClasses.delete(kind);
         this.appClassesCache.delete(kind);
         this.registered.delete(kind);
+        this.removeDownloaded(kind);
         const kindEmitter = this.kindEmitters.get(kind);
         if (kindEmitter) {
             kindEmitter.clearListeners();

package/src/Register/loader.ts

@@ -1,19 +1,20 @@
 import { callbacks } from "../callback";
 import { getItem, setItem } from "./storage";
 import type { NetlessApp } from "../typings";
+import { appRegister } from ".";
 
 const Prefix = "NetlessApp";
 
 const TIMEOUT = 10000; // 下载 script 10 秒超时
 
-export const getScript = async (url: string): Promise<string> => {
-    const item = await getItem(url);
+export const getScript = async (kind: string, url: string): Promise<string> => {
+    const item = await getItem(kind);
     if (item) {
         return item.sourceCode;
     } else {
         const result = await fetchWithTimeout(url, { timeout: TIMEOUT });
         const text = await result.text();
-        await setItem(url, text);
+        await setItem(kind, url, text);
         return text;
     }
 };
@@ -28,6 +29,15 @@ export const executeScript = (text: string, appName: string): NetlessApp => {
     return result;
 };
 
+const emitSuccess = (kind: string, url: string) => {
+    callbacks.emit("loadApp", { kind, status: "success" });
+    appRegister.downloaded.set(kind, url);
+};
+
+const emitFailed = (kind: string, reason: string) => {
+    callbacks.emit("loadApp", { kind, status: "failed", reason, });
+};
+
 export const loadApp = async (
     url: string,
     key: string,
@@ -36,14 +46,14 @@ export const loadApp = async (
     const appName = name || Prefix + key;
     callbacks.emit("loadApp", { kind: key, status: "start" });
     try {
-        const text = await getScript(url);
+        const text = await getScript(key, url);
         if (!text || text.length === 0) {
-            callbacks.emit("loadApp", { kind: key, status: "failed", reason: "script is empty." });
+            emitFailed(key, "script is empty");
             return;
         }
         try {
             const result = executeScript(text, appName);
-            callbacks.emit("loadApp", { kind: key, status: "success" });
+            emitSuccess(key, url);
             return result;
         } catch (error: any) {
             if (error.message.includes("Can only have one anonymous define call per script file")) {
@@ -54,16 +64,17 @@ export const loadApp = async (
                     delete define.amd;
                 }
                 const result = executeScript(text, appName);
-                callbacks.emit("loadApp", { kind: key, status: "success" });
+                emitSuccess(key, url);
                 return result;
             }
-            callbacks.emit("loadApp", { kind: key, status: "failed", reason: error.message });
+            emitFailed(key, error.message);
         }
     } catch (error: any) {
-        callbacks.emit("loadApp", { kind: key, status: "failed", reason: error.message });
+        emitFailed(key, error.message);
     }
 };
 
+
 async function fetchWithTimeout(resource: string, options: RequestInit & { timeout: number }) {
     const { timeout = 10000 } = options;
 

package/src/Register/storage.ts

@@ -1,3 +1,5 @@
+import type { AppRegister } from "./index";
+
 const DatabaseName = "__WindowManagerAppCache";
 
 let db: IDBDatabase;
@@ -5,21 +7,26 @@ let store: IDBObjectStore;
 
 export type Item = {
     kind: string;
+    url: string;
     sourceCode: string;
 }
 
-export const initDb = async () => {
+export const initDb = async (appRegister: AppRegister) => {
     db = await createDb();
+    const items = await queryAll(db);
+    items.forEach(item => {
+        appRegister.downloaded.set(item.kind, item.url);
+    });
 }
 
-export const setItem = (key: string, val: any) => {
+export const setItem = (kind: string, url: string, val: any) => {
     if (!db) return;
-    return addRecord(db, { kind: key, sourceCode: val })
+    return addRecord(db, { kind, url, sourceCode: val })
 };
 
-export const getItem = async (key: string): Promise<Item | null> => {
+export const getItem = async (kind: string): Promise<Item | null> => {
     if (!db) return null;
-    return await query(db, key);
+    return await query(db, kind);
 };
 
 export const removeItem = (key: string) => {
@@ -27,6 +34,11 @@ export const removeItem = (key: string) => {
     return deleteRecord(db, key);
 };
 
+export const getAll = () => {
+    if (!db) return;
+    return queryAll(db);
+}
+
 function createDb(): Promise<IDBDatabase> {
     return new Promise((resolve, reject) => {
         const request = indexedDB.open(DatabaseName, 2);
@@ -64,6 +76,15 @@ function query<T>(db: IDBDatabase, val: string): Promise<T | null> {
     })
 }
 
+function queryAll(db: IDBDatabase): Promise<Item[]> {
+    return new Promise((resolve, reject) => {
+        const index = db.transaction(["apps"]).objectStore("apps").index("kind");
+        const request = index.getAll();
+        request.onerror = e => reject(e);
+        request.onsuccess = () => resolve(request.result);
+    });
+}
+
 function addRecord(db: IDBDatabase, payload: any): Promise<void> {
     return new Promise((resolve, reject) => {
         const request = db.transaction(["apps"], "readwrite").objectStore("apps").add(payload);

package/src/Utils/Common.ts

@@ -17,6 +17,9 @@ export const genAppId = async (kind: string) => {
 };
 
 export const setViewFocusScenePath = (view: View, focusScenePath: string) => {
+    if ((view as any).didRelease) {
+        return;
+    }
     if (view.focusScenePath !== focusScenePath) {
         view.focusScenePath = focusScenePath;
         return view;

package/src/Utils/Reactive.ts

@@ -1,6 +1,6 @@
-import { listenUpdated, unlistenUpdated, reaction, UpdateEventKind } from "white-web-sdk";
-import type { AkkoObjectUpdatedProperty , AkkoObjectUpdatedListener } from "white-web-sdk";
 import { isObject } from "lodash";
+import { listenUpdated, reaction, unlistenUpdated, UpdateEventKind } from "white-web-sdk";
+import type { AkkoObjectUpdatedProperty, AkkoObjectUpdatedListener } from "white-web-sdk";
 
 // 兼容 13 和 14 版本 SDK
 export const onObjectByEvent = (event: UpdateEventKind) => {
@@ -12,7 +12,7 @@ export const onObjectByEvent = (event: UpdateEventKind) => {
                 if (kinds.includes(event)) {
                     func();
                 }
-            }
+            };
             listenUpdated(object, listener);
             func();
             return () => unlistenUpdated(object, listener);
@@ -21,43 +21,45 @@ export const onObjectByEvent = (event: UpdateEventKind) => {
                 () => object,
                 () => {
                     func();
-                }, {
+                },
+                {
                     fireImmediately: true,
                 }
-            )
+            );
         }
-    }
-}
+    };
+};
 
-export const safeListenPropsUpdated = <T>(
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const safeListenPropsUpdated = <T extends Object>(
     getProps: () => T,
     callback: AkkoObjectUpdatedListener<T>,
     onDestroyed?: (props: unknown) => void
-  ) => {
+) => {
     let disposeListenUpdated: (() => void) | null = null;
     const disposeReaction = reaction(
-      getProps,
-      () => {
-        if (disposeListenUpdated) {
-          disposeListenUpdated();
-          disposeListenUpdated = null;
-        }
-        const props = getProps();
-        if (isObject(props)) {
-          disposeListenUpdated = () => unlistenUpdated(props, callback);
-          listenUpdated(props, callback);
-        } else {
-          onDestroyed?.(props);
-        }
-      },
-      { fireImmediately: true }
+        getProps,
+        () => {
+            if (disposeListenUpdated) {
+                disposeListenUpdated();
+                disposeListenUpdated = null;
+            }
+            const props = getProps();
+            if (isObject(props)) {
+                disposeListenUpdated = () => unlistenUpdated(props, callback);
+                listenUpdated(props, callback);
+            } else {
+                onDestroyed?.(props);
+            }
+        },
+        { fireImmediately: true }
     );
 
     return () => {
-      disposeListenUpdated?.();
-      disposeReaction();
+        disposeListenUpdated?.();
+        disposeReaction();
     };
-}
+};
 
 export const onObjectRemoved = onObjectByEvent(UpdateEventKind.Removed);
 export const onObjectInserted = onObjectByEvent(UpdateEventKind.Inserted);

package/src/Utils/RoomHacker.ts

@@ -56,6 +56,9 @@ export const replaceRoomFunction = (room: Room | Player, manager: WindowManager)
         room.lockImages = (...args) => manager.lockImages(...args);
 
         delegateRemoveScenes(room, manager);
+        if (!(room as any).dynamicPpt.slideStateAdapter.pptHandler) {
+            (room as any).dynamicPpt.slideStateAdapter.pptHandler = manager.createPPTHandler();
+        }
     }
 };
 

package/src/Utils/error.ts

@@ -31,10 +31,14 @@ export class InvalidScenePath extends Error {
     override message = `[WindowManager]: ScenePath should start with "/"`;
 }
 
-export class BoxManagerNotFoundError extends Error {
-    override message = "[WindowManager]: boxManager not found";
+export class BoxManagerNotInitializeError extends Error {
+    override message = "[WindowManager]: boxManager need initialize";
 }
 
 export class BindContainerRoomPhaseInvalidError extends Error {
     override message = "[WindowManager]: room phase only Connected can be bindContainer";
 }
+
+export class InvalidViewModeError extends Error {
+    override message = "[WindowManager]: scroll mode cannot be switched to other viewMode";
+}

package/src/View/CameraSynchronizer.ts

@@ -1,22 +1,24 @@
 import { AnimationMode } from "white-web-sdk";
-import { delay, throttle } from "lodash";
+import { isEmpty, isEqual, pick, throttle } from "lodash";
 import type { TeleBoxRect } from "@netless/telebox-insider";
-import type { Camera, View, Size } from "white-web-sdk";
-import type { ISize } from "../AttributesDelegate";
+import type { View, Size } from "white-web-sdk";
+import type { ICamera, ISize } from "../AttributesDelegate";
 
-export type SaveCamera = (camera: Camera) => void;
+export type SaveCamera = (camera: ICamera) => void;
 
 export class CameraSynchronizer {
-    public remoteCamera?: Camera;
+    public remoteCamera?: ICamera;
     public remoteSize?: ISize;
     protected rect?: TeleBoxRect;
     protected view?: View;
+    protected scale = 1;
+    protected cameraUpdating = false;
 
     constructor(protected saveCamera: SaveCamera) {}
 
-    public setRect(rect: TeleBoxRect) {
+    public setRect = (rect: TeleBoxRect, updateCamera = true) => {
         this.rect = rect;
-        if (this.remoteCamera && this.remoteSize) {
+        if (this.remoteCamera && this.remoteSize && updateCamera) {
             this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
         }
     }
@@ -26,48 +28,65 @@ export class CameraSynchronizer {
     }
 
     // 远端 Camera 或者 size 更新
-    public onRemoteUpdate = throttle((camera: Camera, size: ISize) => {
+    public onRemoteUpdate = throttle((camera: ICamera, size: ISize, skipUpdate = false) => {
         this.remoteCamera = camera;
         this.remoteSize = size;
-        if (this.remoteSize && this.rect) {
-            let scale: number;
-            if (size.width < size.height) {
-                scale = this.rect.width / size.width;
-            } else {
-                scale = this.rect.height / size.height;
+        if (skipUpdate) return;;
+        requestAnimationFrame(() => {
+            if (this.remoteSize && this.rect) {
+                this.moveCameraToContian(this.remoteSize);
+                this.moveCamera(camera);
             }
-            const nextScale = camera.scale * scale;
-            const moveCamera = () => this.view?.moveCamera({
-                centerX: camera.centerX,
-                centerY: camera.centerY,
-                scale: nextScale,
+        });
+    }, 32);
+
+    public onRemoteSizeUpdate(size: ISize) {
+        this.remoteSize = size;
+        const needMoveCamera = !isEqual(pick(this.rect, ["width", "height"]), pick(size, ["width", "height"]));
+        if (this.rect && this.remoteCamera && needMoveCamera) {
+            if (!this.view) return;
+            const currentCamera = this.view.camera;
+            this.view?.moveCameraToContain({
+                width: size.width,
+                height: size.height,
+                originX: currentCamera.centerX - (size.width / 2),
+                originY: currentCamera.centerY - (size.height / 2),
                 animationMode: AnimationMode.Immediately,
             });
-            // TODO 直接调用 moveCamera 依然会出现 camera 错误的情况,这里暂时加一个 delay 保证 camera 是对的, 后续需要 SDK 进行修改
-            delay(moveCamera, 50);
+            this.moveCamera(this.remoteCamera);
         }
-    }, 50);
-
+    }
 
-    public onLocalCameraUpdate(camera: Camera) {
+    public onLocalCameraUpdate(camera: ICamera) {
         this.saveCamera(camera);
         this.remoteCamera = camera;
     }
 
-    // 本地 Size 更新, 先匹配 camera 到新的 size 然后再发送 camera 数据到远端
-    public onLocalSizeUpdate = (size: Size) => {
-        if (this.rect && this.view) {
-            let scale: number;
-            if (size.width < size.height) {
-                scale = this.rect.width / size.width;
-            } else {
-                scale = this.rect.height / size.height;
-            }
-            const nextScale = this.view.camera.scale / scale;
+    private moveCameraToContian(size: Size): void {
+        if (!isEmpty(size) && this.view) {
+            this.view.moveCameraToContain({
+                width: size.width,
+                height: size.height,
+                originX: -size.width / 2,
+                originY: -size.height / 2,
+                animationMode: AnimationMode.Immediately,
+            });
+            this.scale = this.view.camera.scale;
+        }
+    }
+
+    private moveCamera(camera: ICamera): void {
+        if (!isEmpty(camera) && this.view && camera.centerX != null && camera.centerY != null) {
+            if (isEqual(camera, this.view.camera)) return;
+            const { centerX, centerY, scale } = camera;
+            const needScale = scale * (this.scale || 1);
             this.view.moveCamera({
-                scale: nextScale,
-                animationMode: AnimationMode.Immediately
+                centerX: centerX,
+                centerY: centerY,
+                scale: needScale,
+                animationMode: AnimationMode.Immediately,
             });
         }
     }
 }
+