@netless/window-manager 0.4.0 → 0.4.3

package/docs/advanced.md

@@ -1,15 +1,14 @@
 ## 进阶使用
 
 - 目录
-  - [撤销重做]
+  - [撤销重做](#redo-undo)
+  - [清屏](#clean-current-scene)
 
 
-
-<h3>撤销重做</h3>
+<h3 id="redo-undo">撤销重做</h3>
 
 > 以下事件和属性都会根据 `focus` 的窗口来进行自动切换应用对象
 
-
 #### 获取可以撤销/重做的步数
 
 ```ts
@@ -37,3 +36,18 @@ manager.undo() //撤销
 manager.redo() // 重做 
 ```
 
+<br>
+
+<h3 id="clean-current-scene">清屏</h3>
+
+因为在多窗口模式下有多个白板, 如果想要清除当前 `focus` 的白板只需要调用
+
+```ts
+manager.cleanCurrentScene()
+```
+
+只想清理主白板的笔迹则需要
+
+```ts
+manager.mainView.cleanCurrentScene()
+```

package/docs/api.md

@@ -190,4 +190,14 @@ manager.callbacks.on(events, listener)
 | focusedChange            | string, undefined |     | 当前 focus 的 appId，主白板时为 undefined  |
 | mainViewScenesLengthChange | number      |         | mainView scenes 添加或删除时触发 |
 | canRedoStepsChange       | number         |         | 当前 focus 的 view 可重做步数改变 |
-| canUndoStepsChange       | number         |         | 当前 focus 的 view 可撤销步数改变 |
+| canUndoStepsChange       | number         |         | 当前 focus 的 view 可撤销步数改变 |
+| loadApp                  | LoadAppEvent   |         | 加载远程APP 事件                |
+
+
+```ts
+type LoadAppEvent = {
+    kind: string;
+    status: "start" | "success" | "failed";
+    reason?: string;
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.0",
+  "version": "0.4.3",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
@@ -18,7 +18,6 @@
   "author": "",
   "license": "ISC",
   "peerDependencies": {
-    "video.js": ">=7",
     "white-web-sdk": "^2.16.0"
   },
   "dependencies": {
@@ -28,12 +27,12 @@
     "p-retry": "^4.6.1",
     "side-effect-manager": "^0.1.5",
     "uuid": "^7.0.3",
-    "video.js": ">=7"
+    "video.js": ">=7",
+    "@netless/telebox-insider": "0.2.22"
   },
   "devDependencies": {
     "@netless/app-docs-viewer": "^0.2.6",
     "@netless/app-media-player": "0.1.0-beta.5",
-    "@netless/telebox-insider": "0.2.22",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-url": "^6.1.0",
@@ -56,8 +55,7 @@
     "rollup-plugin-styles": "^3.14.1",
     "svelte": "^3.42.4",
     "typescript": "^4.3.5",
-    "video.js": "^7.14.3",
     "vite": "^2.5.3",
-    "white-web-sdk": "^2.16.6"
+    "white-web-sdk": "2.16.3"
   }
 }

package/src/App/Storage/index.ts

@@ -201,7 +201,7 @@ export class Storage<TState extends Record<string, any> = any> implements Storag
   private _getRawState(defaultValue: TState): TState
   private _getRawState(defaultValue?: TState): TState | undefined {
     if (this.id === null) {
-      return get(this._context.getAttributes(), [], defaultValue);
+      return this._context.getAttributes() ?? defaultValue;
     } else {
       return get(this._context.getAttributes(), [STORAGE_NS, this.id], defaultValue);
     }

package/src/Register/index.ts

@@ -1,6 +1,12 @@
 import Emittery from "emittery";
-import type { NetlessApp, RegisterEvents, RegisterParams } from "../typings";
 import { loadApp } from "./loader";
+import type { NetlessApp, RegisterEvents, RegisterParams } from "../typings";
+
+export type LoadAppEvent = {
+    kind: string;
+    status: "start" | "success" | "failed";
+    reason?: string;
+};
 
 class AppRegister {
     public kindEmitters: Map<string, Emittery<RegisterEvents>> = new Map();

package/src/Register/loader.ts

@@ -1,9 +1,10 @@
+import { callbacks } from "../index";
 import { getItem, setItem } from "./storage";
 import type { NetlessApp } from "../typings";
 
 const Prefix = "NetlessApp";
 
-const TIMEOUT = 10000; // 10 秒超时
+const TIMEOUT = 10000; // 下载 script 10 秒超时
 
 export const getScript = async (url: string): Promise<string> => {
     const item = await getItem(url);
@@ -33,19 +34,33 @@ export const loadApp = async (
     name?: string
 ): Promise<NetlessApp | undefined> => {
     const appName = name || Prefix + key;
-    const text = await getScript(url);
+    callbacks.emit("loadApp", { kind: key, status: "start" });
     try {
-        return executeScript(text, appName);
-    } catch (error: any) {
-        if (error.message.includes("Can only have one anonymous define call per script file")) {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            const define = window.define;
-            if ("function" == typeof define && define.amd) {
-                delete define.amd;
+        const text = await getScript(url);
+        if (!text || text.length === 0) {
+            callbacks.emit("loadApp", { kind: key, status: "failed", reason: "script is empty." });
+            return;
+        }
+        try {
+            const result = executeScript(text, appName);
+            callbacks.emit("loadApp", { kind: key, status: "success" });
+            return result;
+        } catch (error: any) {
+            if (error.message.includes("Can only have one anonymous define call per script file")) {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                const define = window.define;
+                if ("function" == typeof define && define.amd) {
+                    delete define.amd;
+                }
+                const result = executeScript(text, appName);
+                callbacks.emit("loadApp", { kind: key, status: "success" });
+                return result;
             }
-            return executeScript(text, appName);
+            callbacks.emit("loadApp", { kind: key, status: "failed", reason: error.message });
         }
+    } catch (error: any) {
+        callbacks.emit("loadApp", { kind: key, status: "failed", reason: error.message });
     }
 };
 

package/src/Utils/RoomHacker.ts

@@ -44,6 +44,10 @@ export const replaceRoomFunction = (room: Room | Player, manager: WindowManager)
         room.redo = () => manager.redo();
         room.undo = () => manager.undo();
         room.cleanCurrentScene = () => manager.cleanCurrentScene();
+        room.delete = () => manager.delete();
+        room.copy = () => manager.copy();
+        room.paste = () => manager.paste();
+        room.duplicate = () => manager.duplicate();
         delegateRemoveScenes(room);
     }
 };

package/src/index.ts

@@ -17,6 +17,7 @@ import { replaceRoomFunction } from "./Utils/RoomHacker";
 import { setupBuiltin } from "./BuiltinApps";
 import "./style.css";
 import "@netless/telebox-insider/dist/style.css";
+import type { LoadAppEvent } from "./Register";
 import {
     addEmitterOnceListener,
     ensureValidScenePath,
@@ -152,6 +153,7 @@ export type PublicEvent = {
     mainViewScenesLengthChange: number;
     canRedoStepsChange: number;
     canUndoStepsChange: number;
+    loadApp: LoadAppEvent;
 };
 
 export type MountParams = {
@@ -612,6 +614,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         return this.attributes.focus;
     }
 
+    public get focusedView(): View | undefined {
+        return this.appManager?.focusApp?.view;
+    }
+
     public get mainViewSceneIndex(): number {
         return this.appManager?.store.getMainViewSceneIndex();
     }
@@ -681,7 +687,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         this.appManager?.dispatchInternalEvent(Events.MoveCamera, camera);
         setTimeout(() => {
             this.appManager?.mainViewProxy.setCameraAndSize();
-        }, 100);
+        }, 500);
     }
 
     public moveCameraToContain(
@@ -694,7 +700,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         this.appManager?.dispatchInternalEvent(Events.MoveCameraToContain, rectangle);
         setTimeout(() => {
             this.appManager?.mainViewProxy.setCameraAndSize();
-        }, 100);
+        }, 500);
     }
 
     public convertToPointInWorld(point: Point): Point {
@@ -768,7 +774,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public cleanCurrentScene(): void {
         const focused = this.focused;
         if (focused) {
-            this.appManager?.focusApp?.view?.cleanCurrentScene();
+            this.focusedView?.cleanCurrentScene();
         } else {
             this.mainView.cleanCurrentScene();
         }
@@ -777,7 +783,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public redo(): number {
         const focused = this.focused;
         if (focused) {
-            return this.appManager?.focusApp?.view?.redo() || 0;
+            return this.focusedView?.redo() || 0;
         } else {
             return this.mainView.redo();
         }
@@ -786,12 +792,48 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
     public undo(): number {
         const focused = this.focused;
         if (focused) {
-            return this.appManager?.focusApp?.view?.undo() || 0;
+            return this.focusedView?.undo() || 0;
         } else {
             return this.mainView.undo();
         }
     }
 
+    public delete(): void {
+        const focused = this.focused;
+        if (focused) {
+            this.focusedView?.delete();
+        } else {
+            this.mainView.delete();
+        }
+    }
+
+    public copy(): void {
+        const focused = this.focused;
+        if (focused) {
+            this.focusedView?.copy();
+        } else {
+            this.mainView.copy();
+        }
+    }
+
+    public paste(): void {
+        const focused = this.focused;
+        if (focused) {
+            this.focusedView?.paste();
+        } else {
+            this.mainView.paste();
+        }
+    }
+
+    public duplicate(): void {
+        const focused = this.focused;
+        if (focused) {
+            this.focusedView?.duplicate();
+        } else {
+            this.mainView.duplicate();
+        }
+    }
+
     private isDynamicPPT(scenes: SceneDefinition[]) {
         const sceneSrc = scenes[0]?.ppt?.src;
         return sceneSrc?.startsWith("pptx://");

package/vite.config.js

@@ -2,7 +2,7 @@ import path from "path";
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 import { dependencies, peerDependencies, version, devDependencies } from "./package.json"
-
+import { omit } from "lodash";
 
 export default defineConfig(({ mode }) => {
     const isProd = mode === "production";
@@ -34,7 +34,7 @@ export default defineConfig(({ mode }) => {
             sourcemap: true,
             rollupOptions: {
                 external: Object.keys({
-                    ...dependencies,
+                    ...omit(dependencies, ["@netless/telebox-insider"]),
                     ...peerDependencies,
                 }),
             },