@netless/window-manager 1.0.0-canary.5 → 1.0.0-canary.50

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,44 @@ export const onObjectByEvent = (event: UpdateEventKind) => {
                 () => object,
                 () => {
                     func();
-                }, {
+                },
+                {
                     fireImmediately: true,
                 }
-            )
+            );
         }
-    }
-}
+    };
+};
 
 export const safeListenPropsUpdated = <T>(
     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,8 +31,8 @@ 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 {

package/src/View/CameraSynchronizer.ts

@@ -1,20 +1,20 @@
 import { AnimationMode } from "white-web-sdk";
-import { delay, throttle } from "lodash";
+import { 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 { ICamera, ISize } from "../AttributesDelegate";
 
-export type SaveCamera = (camera: Camera) => void;
+export type SaveCamera = (camera: ICamera) => void;
 
 export class CameraSynchronizer {
-    protected remoteCamera?: Camera;
-    protected remoteSize?: ISize;
+    public remoteCamera?: ICamera;
+    public remoteSize?: ISize;
     protected rect?: TeleBoxRect;
     protected view?: View;
 
     constructor(protected saveCamera: SaveCamera) {}
 
-    public setRect(rect: TeleBoxRect) {
+    public setRect = (rect: TeleBoxRect) => {
         this.rect = rect;
         if (this.remoteCamera && this.remoteSize) {
             this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
@@ -26,48 +26,51 @@ export class CameraSynchronizer {
     }
 
     // 远端 Camera 或者 size 更新
-    public onRemoteUpdate = throttle((camera: Camera, size: ISize) => {
+    public onRemoteUpdate = throttle((camera: ICamera, size: ISize) => {
         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;
-            }
-            const nextScale = camera.scale * scale;
-            const moveCamera = () => this.view?.moveCamera({
-                centerX: camera.centerX,
-                centerY: camera.centerY,
+            const nextScale = camera.scale * computedMinScale(size, this.rect);
+            const config: Partial<Camera> = {
                 scale: nextScale,
-                animationMode: AnimationMode.Immediately,
-            });
-            // TODO 直接调用 moveCamera 依然会出现 camera 错误的情况,这里暂时加一个 delay 保证 camera 是对的, 后续需要 SDK 进行修改
-            delay(moveCamera, 50);
+            }
+            if (camera.centerX !== null) {
+                config.centerX = camera.centerX;
+            }
+            if (camera.centerY !== null) {
+                config.centerY = camera.centerY;
+            }
+            this.moveCamera(config);
         }
-    }, 50);
+    }, 10);
 
+    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),
+            });
+        }
+    }
 
-    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;
-            this.view.moveCamera({
-                scale: nextScale,
-                animationMode: AnimationMode.Immediately
-            });
-        }
+    private moveCamera(camera: Partial<Camera>) {
+        this.view?.moveCamera({ ...camera, animationMode: AnimationMode.Immediately });
     }
 }
+
+export const computedMinScale = (remoteSize: Size, currentSize: Size) => {
+    const wScale = currentSize.width / remoteSize.width;
+    const hScale = currentSize.height / remoteSize.height;
+    return Math.min(wScale, hScale);
+}