@netless/window-manager 0.4.0-canary.29 → 0.4.0-canary.32

package/docs/advanced.md

@@ -0,0 +1,39 @@
+## 进阶使用
+
+- 目录
+  - [撤销重做]
+
+
+
+<h3>撤销重做</h3>
+
+> 以下事件和属性都会根据 `focus` 的窗口来进行自动切换应用对象
+
+
+#### 获取可以撤销/重做的步数
+
+```ts
+manager.canUndoSteps
+manager.canRedoSteps
+```
+
+#### 监听可以撤销/重做的步数的变化
+
+`canRedoStepsChange` 和 `canUndoStepsChange` 会在切换窗口时重新触发
+
+```ts
+manager.emitter.on("canUndoStepsChange", (steps: number) => {
+    // 可以撤销的步数更新
+})
+manager.emitter.on("canRedoStepsChange", (steps: number) => {
+    // 可以重做的步数更新
+})
+```
+
+#### 撤销/重做
+
+```ts
+manager.undo() //撤销
+manager.redo() // 重做 
+```
+

package/docs/api.md

@@ -12,6 +12,8 @@
     - [`setMainViewSceneIndex`](#setMainViewSceneIndex)
     - [`setBoxState`](#setBoxState)
     - [`cleanCurrentScene`](#cleanCurrentScene)
+    - [`redo`](#redo)
+    - [`undo`](#undo)
   - [实例属性](#prototypes)
   - [事件回调](#events)
 
@@ -137,19 +139,37 @@ manager.setBoxState("normal") // boxState: normal | maximized | minimized
 manager.cleanCurrentScene()
 ```
 
+<h3 id="redo">redo</h3>
+
+> 在当前 focus 的 view 上重做上一步操作
+
+```ts
+manager.redo()
+```
+
+<h3 id="undo">undo</h3>
+
+> 在当前 focus 的 view 上撤消上一步操作
+
+```ts
+manager.undo()
+```
+
 <br>
 
 <h2 id="prototypes">实例属性</h2>
 
-| name               | type    | default | desc              |
-| ------------------ | ------- | ------- | ----------------- |
-| mainView           | View    |         | 主白板               |
-| mainViewSceneIndex | number  |         | 当前主白板的 SceneIndex |
+| name               | type    | default | desc                   |
+| ------------------ | ------- | ------- | -----------------      |
+| mainView           | View    |         | 主白板                  |
+| mainViewSceneIndex | number  |         | 当前主白板的 SceneIndex  |
 | mainViewScenesLength | number |        | mainView 的 scenes 长度 |
-| boxState           | string  |         | 当前窗口状态            |
-| darkMode           | boolean |         | 黑夜模式              |
-| prefersColorScheme | string  |         | 颜色主题              |
-| focused            | string |         | focus 的 app      |
+| boxState           | string  |         | 当前窗口状态             |
+| darkMode           | boolean |         | 黑夜模式                 |
+| prefersColorScheme | string  |         | 颜色主题                 |
+| focused            | string |          | focus 的 app            |
+| canRedoSteps       | number  |         | 当前 focus 的 view 可以重做的步数 |
+| canRedoSteps       | number  |         | 当前 focus 的 view 可以撤销的步数 |
 
 <br>
 
@@ -168,4 +188,6 @@ manager.callbacks.on(events, listener)
 | prefersColorSchemeChange | string         |         | auto,light,dark            |
 | cameraStateChange        | CameraState    |         |                            |
 | focusedChange            | string, undefined |     | 当前 focus 的 appId，主白板时为 undefined  |
-| mainViewScenesLengthChange | number      |         | mainView scenes 添加或删除时触发 |
+| mainViewScenesLengthChange | number      |         | mainView scenes 添加或删除时触发 |
+| canRedoStepsChange       | number         |         | 当前 focus 的 view 可重做步数改变 |
+| canUndoStepsChange       | number         |         | 当前 focus 的 view 可撤销步数改变 |

package/docs/replay.md

@@ -0,0 +1,40 @@
+## 回放
+
+> 注意: 多窗口的回放只支持从创建房间开始就是多窗口的房间
+
+> 如果是一开始作为单窗口模式使用，又转变成多窗口模式使用, 则会造成回放渲染空白
+
+<br>
+
+
+```typescript
+import { WhiteWebSdk } from "white-web-sdk";
+import { WindowManager, BuiltinApps } from "@netless/window-manager";
+import "@netless/window-manager/dist/style.css";
+
+const sdk = new WhiteWebSdk({
+    appIdentifier: "appIdentifier",
+    useMobXState: true // 请确保打开这个选项
+});
+
+let manager: WindowManager;
+
+sdk.replayRoom({
+    uuid: "room uuid",
+    roomToken: "room token",
+    invisiblePlugins: [WindowManager],
+    useMultiViews: true, // 多窗口必须用开启 useMultiViews
+}).then(player => {
+   player.callbacks.on("onPhaseChanged", async (phase) => {
+       if (phase === PlayerPhase.Playing) {
+           if (manager) return;
+            manager = await WindowManager.mount({
+                room: player,
+                container: document.getElementById("container")
+            });
+       }
+   })
+});
+
+player.play(); // WindowManager 只有在播放之后才能挂载
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.0-canary.29",
+  "version": "0.4.0-canary.32",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
@@ -58,6 +58,6 @@
     "typescript": "^4.3.5",
     "video.js": "^7.14.3",
     "vite": "^2.5.3",
-    "white-web-sdk": "^2.16.3"
+    "white-web-sdk": "^2.16.5"
   }
 }

package/src/AppManager.ts

@@ -1,4 +1,5 @@
 import { AppAttributes, AppStatus, Events, MagixEventName, ROOT_DIR } from "./constants";
+import { AppCreateQueue } from "./Utils/AppCreateQueue";
 import { AppListeners } from "./AppListener";
 import { AppProxy } from "./AppProxy";
 import { appRegister } from "./Register";
@@ -20,9 +21,8 @@ import {
 } from "./Utils/Common";
 import type { ReconnectRefresher } from "./ReconnectRefresher";
 import type { BoxManager } from "./BoxManager";
-import type { Displayer, DisplayerState, Room, ScenesCallbacksNode } from "white-web-sdk";
+import type { Displayer, DisplayerState, Room, ScenesCallbacksNode, View } from "white-web-sdk";
 import type { AddAppParams, BaseInsertParams, TeleBoxRect, EmitterEvent } from "./index";
-import { AppCreateQueue } from "./Utils/AppCreateQueue";
 
 export class AppManager {
     public displayer: Displayer;
@@ -187,6 +187,10 @@ export class AppManager {
                 const focused = get(this.attributes, "focus");
                 if (this._prevFocused !== focused) {
                     callbacks.emit("focusedChange", focused);
+                    this.disposePrevFocusViewRedoUndoListeners(this._prevFocused);
+                    setTimeout(() => {
+                        this.addRedoUndoListeners(focused);
+                    }, 0);
                     this._prevFocused = focused;
                     if (focused !== undefined) {
                         this.boxManager?.focusBox({ appId: focused });
@@ -212,8 +216,60 @@ export class AppManager {
         this.displayerWritableListener(!this.room?.isWritable);
         this.displayer.callbacks.on("onEnableWriteNowChanged", this.displayerWritableListener);
         this._prevFocused = this.attributes.focus;
+        this.addRedoUndoListeners(this.attributes.focus);
     }
 
+    private disposePrevFocusViewRedoUndoListeners = (prevFocused: string | undefined) => {
+        if (prevFocused === undefined) {
+            this.mainView.callbacks.off("onCanRedoStepsUpdate", this.onCanRedoStepsUpdate);
+            this.mainView.callbacks.off("onCanUndoStepsUpdate", this.onCanRedoStepsUpdate);
+        } else {
+            const appProxy = this.appProxies.get(prevFocused);
+            if (appProxy) {
+                appProxy.view?.callbacks.off("onCanRedoStepsUpdate", this.onCanRedoStepsUpdate);
+                appProxy.view?.callbacks.off("onCanUndoStepsUpdate", this.onCanUndoStepsUpdate);
+            }
+        }
+    };
+
+    private addRedoUndoListeners = (focused: string | undefined) => {
+        if (focused === undefined) {
+            this.addViewCallbacks(
+                this.mainView,
+                this.onCanRedoStepsUpdate,
+                this.onCanUndoStepsUpdate
+            );
+        } else {
+            const focusApp = this.appProxies.get(focused);
+            if (focusApp && focusApp.view) {
+                this.addViewCallbacks(
+                    focusApp.view,
+                    this.onCanRedoStepsUpdate,
+                    this.onCanUndoStepsUpdate
+                );
+            }
+        }
+    };
+
+    private addViewCallbacks = (
+        view: View,
+        redoListener: (steps: number) => void,
+        undoListener: (steps: number) => void
+    ) => {
+        redoListener(view.canRedoSteps);
+        undoListener(view.canUndoSteps);
+        view.callbacks.on("onCanRedoStepsUpdate", redoListener);
+        view.callbacks.on("onCanUndoStepsUpdate", undoListener);
+    };
+
+    private onCanRedoStepsUpdate = (steps: number) => {
+        callbacks.emit("canRedoStepsChange", steps);
+    };
+
+    private onCanUndoStepsUpdate = (steps: number) => {
+        callbacks.emit("canUndoStepsChange", steps);
+    };
+
     /**
      * 插件更新 attributes 时的回调
      *
@@ -591,6 +647,8 @@ export class AppManager {
         callbacks.clearListeners();
         this.callbacksNode?.dispose();
         this.appCreateQueue.destroy();
+        this.disposePrevFocusViewRedoUndoListeners(this._prevFocused);
+        this._prevFocused = undefined;
         this._prevSceneIndex = undefined;
     }
 }

package/src/ContainerResizeObserver.ts

@@ -1,6 +1,6 @@
 import { ResizeObserver as ResizeObserverPolyfill } from "@juggle/resize-observer";
 import { WindowManager } from "./index";
-import type { EmitterType} from "./index";
+import type { EmitterType } from "./index";
 
 const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;
 
@@ -13,7 +13,7 @@ export class ContainerResizeObserver {
         container: HTMLElement,
         sizer: HTMLElement,
         wrapper: HTMLDivElement,
-        emitter: EmitterType,
+        emitter: EmitterType
     ) {
         const containerResizeObserver = new ContainerResizeObserver(emitter);
         containerResizeObserver.observePlaygroundSize(container, sizer, wrapper);
@@ -31,7 +31,7 @@ export class ContainerResizeObserver {
             const containerRect = entries[0]?.contentRect;
             if (containerRect) {
                 this.updateSizer(containerRect, sizer, wrapper);
-                this.emitter.emit("playgroundSizeChange", containerRect)
+                this.emitter.emit("playgroundSizeChange", containerRect);
             }
         });
 

package/src/Cursor/Cursor.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { isEmpty } from "lodash";
+    import { ApplianceNames } from "white-web-sdk";
 
     export let cursorName: string;
     export let tagName: string;
@@ -19,6 +20,7 @@
     $: hasTagName = !isEmpty(tagName);
     $: hasAvatar = !isEmpty(avatar);
     $: display = visible ? "initial" : "none";
+    $: isLaserPointer = appliance === ApplianceNames.laserPointer;
 
     const computedAvatarStyle = () => {
         return Object.entries({
@@ -36,28 +38,30 @@
 <div
     class="netless-window-manager-cursor-mid"
     style="transform: translateX({x}px) translateY({y}px);display: {display}"
->
-    <div class="netless-window-manager-cursor-name">
-        <div
-            class={theme}
-            style="background-color: {backgroundColor};color: {color};opacity: {opacity}"
-        >
-            {#if hasAvatar}
-                <img
-                    class="netless-window-manager-cursor-selector-avatar"
-                    style={computedAvatarStyle()}
-                    src={avatar}
-                    alt="avatar"
-                />
-            {/if}
-            <span style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;max-width: 80px">{cursorName}</span>
-            {#if hasTagName}
-                <span class="netless-window-manager-cursor-tag-name" style="background-color: {cursorTagBackgroundColor}">
-                    {tagName}
-                </span>
-            {/if}
+>   
+    {#if !isLaserPointer}
+        <div class="netless-window-manager-cursor-name">
+            <div
+                class={theme}
+                style="background-color: {backgroundColor};color: {color};opacity: {opacity}"
+            >
+                {#if hasAvatar}
+                    <img
+                        class="netless-window-manager-cursor-selector-avatar"
+                        style={computedAvatarStyle()}
+                        src={avatar}
+                        alt="avatar"
+                    />
+                {/if}
+                <span style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;max-width: 80px">{cursorName}</span>
+                {#if hasTagName}
+                    <span class="netless-window-manager-cursor-tag-name" style="background-color: {cursorTagBackgroundColor}">
+                        {tagName}
+                    </span>
+                {/if}
+            </div>
         </div>
-    </div>
+    {/if}
     <div class="cursor-image-wrapper">
         <img class="netless-window-manager-cursor-{appliance}-image" {src} alt={appliance} />
     </div>

package/src/Cursor/Cursor.ts

@@ -23,7 +23,7 @@ export class Cursor {
         private cursorManager: CursorManager,
         private wrapper?: HTMLElement
     ) {
-        this.setMember();
+        this.updateMember();
         this.createCursor();
         this.autoHidden();
     }
@@ -158,9 +158,10 @@ export class Cursor {
         }
     }
 
-    public setMember() {
+    public updateMember() {
         this.member = this.manager.findMemberByUid(this.memberId);
         this.updateComponent();
+        return this.member;
     }
 
     private updateComponent() {

package/src/Cursor/icons.ts

@@ -4,6 +4,7 @@ import selector from "../image/selector-cursor.png";
 import eraser from "../image/eraser-cursor.png";
 import shape from "../image/shape-cursor.svg";
 import text from "../image/text-cursor.svg";
+import laser from "../image/laser-pointer-cursor.svg";
 
 export const ApplianceMap: {
     [key: string]: string;
@@ -13,4 +14,5 @@ export const ApplianceMap: {
     [ApplianceNames.eraser]: eraser,
     [ApplianceNames.shape]: shape,
     [ApplianceNames.text]: text,
+    [ApplianceNames.laserPointer]: laser,
 };

package/src/Cursor/index.ts

@@ -1,8 +1,9 @@
-import { throttle } from "lodash";
+import { ApplianceNames } from "white-web-sdk";
 import { Cursor } from "./Cursor";
 import { CursorState, Events } from "../constants";
 import { emitter, WindowManager } from "../index";
 import { SideEffectManager } from "side-effect-manager";
+import { throttle } from "lodash";
 import type { CursorMovePayload } from "../index";
 import type { PositionType } from "../AttributesDelegate";
 import type { Point, RoomMember, View } from "white-web-sdk";
@@ -27,7 +28,7 @@ export class CursorManager {
     private sideEffectManager = new SideEffectManager();
     private store = this.manager.store;
 
-    constructor(private manager: AppManager) {
+    constructor(private manager: AppManager, private enableCursor: boolean) {
         this.roomMembers = this.manager.room?.state.roomMembers;
         const wrapper = WindowManager.wrapper;
         if (wrapper) {
@@ -42,8 +43,12 @@ export class CursorManager {
             if (payload.state === CursorState.Leave) {
                 cursorInstance.leave();
             } else {
-                cursorInstance.setMember();
-                cursorInstance.move(payload.position);
+                const member = cursorInstance.updateMember();
+                const isLaserPointer =
+                    member?.memberState.currentApplianceName === ApplianceNames.laserPointer;
+                if (this.enableCursor || isLaserPointer) {
+                    cursorInstance.move(payload.position);
+                }
             }
         });
         this.sideEffectManager.add(() => {
@@ -51,7 +56,7 @@ export class CursorManager {
                 this.updateContainerRect();
             });
             return unsubscribe;
-        })
+        });
     }
 
     public setupWrapper(wrapper: HTMLElement) {

package/src/Utils/RoomHacker.ts

@@ -41,9 +41,9 @@ export const replaceRoomFunction = (room: Room | Player, manager: WindowManager)
         room.fillSceneSnapshot = (...args) => manager.mainView.fillSceneSnapshot(...args);
         room.generateScreenshot = (...args) => manager.mainView.generateScreenshot(...args);
         room.setMemberState = (...args) => manager.mainView.setMemberState(...args);
-        room.redo = () => manager.mainView.redo();
-        room.undo = () => manager.mainView.undo();
-        room.cleanCurrentScene = () => manager.mainView.cleanCurrentScene();
+        room.redo = () => manager.redo();
+        room.undo = () => manager.undo();
+        room.cleanCurrentScene = () => manager.cleanCurrentScene();
         delegateRemoveScenes(room);
     }
 };

package/src/image/laser-pointer-cursor.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
+    <title>编组 2</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <filter x="-120.0%" y="-120.0%" width="340.0%" height="340.0%" filterUnits="objectBoundingBox" id="filter-1">
+            <feGaussianBlur stdDeviation="4" in="SourceGraphic"></feGaussianBlur>
+        </filter>
+    </defs>
+    <g id="页面1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-2" transform="translate(9.000000, 9.000000)" fill="#FF0100">
+            <circle id="椭圆形" filter="url(#filter-1)" cx="5" cy="5" r="5"></circle>
+            <path d="M5,8 C6.65685425,8 8,6.65685425 8,5 C8,3.34314575 6.65685425,2 5,2 C3.34314575,2 2,3.34314575 2,5 C2,6.65685425 3.34314575,8 5,8 Z M5,6.28571429 C4.28991961,6.28571429 3.71428571,5.71008039 3.71428571,5 C3.71428571,4.28991961 4.28991961,3.71428571 5,3.71428571 C5.71008039,3.71428571 6.28571429,4.28991961 6.28571429,5 C6.28571429,5.71008039 5.71008039,6.28571429 5,6.28571429 Z" id="椭圆形" fill-rule="nonzero"></path>
+        </g>
+    </g>
+</svg>

package/src/index.ts

@@ -150,6 +150,8 @@ export type PublicEvent = {
     mainViewSceneIndexChange: number;
     focusedChange: string | undefined;
     mainViewScenesLengthChange: number;
+    canRedoStepsChange: number;
+    canUndoStepsChange: number;
 };
 
 export type MountParams = {
@@ -261,10 +263,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         await manager.ensureAttributes();
 
         manager.appManager = new AppManager(manager);
-
-        if (cursor) {
-            manager.cursorManager = new CursorManager(manager.appManager);
-        }
+        manager.cursorManager = new CursorManager(manager.appManager, Boolean(cursor));
 
         if (params.container) {
             manager.bindContainer(params.container);
@@ -370,6 +369,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         this.appManager?.refresh();
         this.appManager?.resetMaximized();
         this.appManager?.resetMinimized();
+        this.appManager?.displayerWritableListener(!this.room.isWritable);
         WindowManager.container = container;
     }
 
@@ -632,6 +632,24 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         return this.appManager?.mainViewScenesLength || 0;
     }
 
+    public get canRedoSteps(): number {
+        const focused = this.focused;
+        if (focused) {
+            return this.appManager?.focusApp?.view?.canRedoSteps || 0;
+        } else {
+            return this.mainView.canRedoSteps;
+        }
+    }
+
+    public get canUndoSteps(): number {
+        const focused = this.focused;
+        if (focused) {
+            return this.appManager?.focusApp?.view?.canUndoSteps || 0;
+        } else {
+            return this.mainView.canUndoSteps;
+        }
+    }
+
     /**
      * 查询所有的 App
      */
@@ -749,6 +767,24 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes> {
         }
     }
 
+    public redo(): number {
+        const focused = this.focused;
+        if (focused) {
+            return this.appManager?.focusApp?.view?.redo() || 0;
+        } else {
+            return this.mainView.redo();
+        }
+    }
+
+    public undo(): number {
+        const focused = this.focused;
+        if (focused) {
+            return this.appManager?.focusApp?.view?.undo() || 0;
+        } else {
+            return this.mainView.undo();
+        }
+    }
+
     private isDynamicPPT(scenes: SceneDefinition[]) {
         const sceneSrc = scenes[0]?.ppt?.src;
         return sceneSrc?.startsWith("pptx://");