@netless/window-manager 0.4.70 → 0.4.71

package/dist/typings.d.ts

@@ -78,3 +78,7 @@ export type { SceneState, SceneDefinition, View, AnimationMode, Displayer, Room,
 export type { Storage, StorageStateChangedEvent, StorageStateChangedListener } from "./App/Storage";
 export * from "./Page";
 export * from "./Utils/error";
+export declare type AppPayload = {
+    appId: string;
+    view: View;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.70",
+  "version": "0.4.71",
   "description": "Multi-window mode for Netless Whiteboard",
   "author": "l1shen <lishen1635@gmail.com> (https://github.com/l1shen)",
   "license": "MIT",

package/src/App/AppContext.ts

@@ -29,6 +29,8 @@ import type {
 } from "./MagixEvent";
 import type { AddPageParams, PageController, PageState } from "../Page";
 import { internalEmitter } from "../InternalEmitter";
+import { WindowManager } from "../index";
+import { callbacks } from "../callback";
 
 export class AppContext<TAttributes extends {} = any, TMagixEventPayloads = any, TAppOptions = any>
     implements PageController
@@ -90,6 +92,9 @@ export class AppContext<TAttributes extends {} = any, TMagixEventPayloads = any,
             setTimeout(() => {
                 // 渲染需要时间，延迟 refresh
                 this.getRoom()?.refreshViewSize();
+                if (WindowManager.supportTeachingAidsPlugin) {
+                    callbacks.emit("onAppViewMounted", {appId: this.appId, view});
+                }
             }, 1000);
         }
     };

package/src/App/AppProxy.ts

@@ -30,6 +30,8 @@ import type { ReadonlyTeleBox } from "@netless/telebox-insider";
 import type { PageRemoveService, PageState } from "../Page";
 import { calculateNextIndex } from "../Page";
 import { boxEmitter } from "../BoxEmitter";
+import { WindowManager } from "../index";
+import { callbacks } from "../callback";
 
 export type AppEmitter = Emittery<AppEmitterEvent>;
 
@@ -194,6 +196,9 @@ export class AppProxy implements PageRemoveService {
                     appRegister.notifyApp(this.kind, "created", { appId, result });
                     this.afterSetupApp(boxInitState);
                     this.fixMobileSize();
+                    if (WindowManager.supportTeachingAidsPlugin) {
+                        callbacks.emit("onAppSetup", appId);
+                    }
                 }, SETUP_APP_DELAY);
             });
             this.boxManager?.createBox({
@@ -391,6 +396,9 @@ export class AppProxy implements PageRemoveService {
     private setFocusScenePathHandler = debounce((fullPath: string | undefined) => {
         if (this.view && fullPath && fullPath !== this.view?.focusScenePath) {
             setViewFocusScenePath(this.view, fullPath);
+            if (WindowManager.supportTeachingAidsPlugin) {
+                callbacks.emit("onAppScenePathChange", {appId: this.id, view:this.view});
+            }
         }
     }, 50);
 

package/src/AppManager.ts

@@ -31,7 +31,14 @@ import {
 } from "./Utils/Common";
 import type { ReconnectRefresher } from "./ReconnectRefresher";
 import type { BoxManager } from "./BoxManager";
-import type { Displayer, Room, ScenesCallbacksNode, SceneState, RoomState } from "white-web-sdk";
+import type {
+    Displayer,
+    Room,
+    ScenesCallbacksNode,
+    SceneState,
+    RoomState,
+    MemberState,
+} from "white-web-sdk";
 import type { AddAppParams, BaseInsertParams, TeleBoxRect } from "./index";
 import type {
     BoxClosePayload,
@@ -111,6 +118,10 @@ export class AppManager {
         });
     }
 
+    public getMemberState(): MemberState {
+        return this.room?.state.memberState || ({ strokeColor: [0, 0, 0] } as MemberState);
+    }
+
     private onRemoveScenes = async (params: RemoveSceneParams) => {
         const { scenePath } = params;
         // 如果移除根目录就把 scenePath 设置为初始值
@@ -373,6 +384,9 @@ export class AppManager {
             x: payload.x,
             y: payload.y,
         });
+        if (WindowManager.supportTeachingAidsPlugin) {
+            callbacks.emit("onBoxMove", payload);
+        }
     };
 
     private onBoxResize = (payload: BoxResizePayload) => {
@@ -382,11 +396,18 @@ export class AppManager {
                 width: payload.width,
                 height: payload.height,
             });
+            if (WindowManager.supportTeachingAidsPlugin) {
+                callbacks.emit("onBoxResize", payload);
+            }
         }
     };
 
     private onBoxFocus = (payload: BoxFocusPayload) => {
         this.windowManger.safeSetAttributes({ focus: payload.appId });
+        if (WindowManager.supportTeachingAidsPlugin) {
+            // (WindowManager.externalNotifyManager as any).emit('onBoxFocus', payload)
+            callbacks.emit("onBoxFocus", payload);
+        }
     };
 
     private onBoxClose = (payload: BoxClosePayload) => {
@@ -394,10 +415,16 @@ export class AppManager {
         if (appProxy) {
             appProxy.destroy(false, true, true, payload.error);
         }
+        if (WindowManager.supportTeachingAidsPlugin) {
+            callbacks.emit("onBoxClose", payload);
+        }
     };
 
     private onBoxStateChange = (payload: BoxStateChangePayload) => {
         this.dispatchInternalEvent(Events.AppBoxStateChange, payload);
+        if (WindowManager.supportTeachingAidsPlugin) {
+            callbacks.emit("onBoxStateChange", payload);
+        }
     };
 
     public addAppsChangeListener = () => {
@@ -581,6 +608,9 @@ export class AppManager {
             this.setMainViewFocusPath();
         }
         internalEmitter.emit("mainViewMounted");
+        if (WindowManager.supportTeachingAidsPlugin) {
+            callbacks.emit("onMainViewMounted", mainView);
+        }
     }
 
     public setMainViewFocusPath(scenePath?: string) {

package/src/Cursor/Cursor.svelte

@@ -15,7 +15,8 @@
     export let color: string;
     export let cursorTagBackgroundColor: string;
     export let opacity: number;
-    export let pencilEraserSize: number;
+    export let pencilEraserSize: number | undefined;
+    export let custom: boolean | undefined;
 
     $: hasName = !isEmpty(cursorName);
     $: hasTagName = !isEmpty(tagName);
@@ -40,9 +41,9 @@
 </script>
 
 <div
-    class="netless-window-manager-cursor-mid"
+    class={"netless-window-manager-cursor-mid" + (custom ? " netless-window-manager-cursor-custom" : "")}
     style="transform: translateX({x}px) translateY({y}px);display: {display}"
->   
+>
     {#if !isLaserPointer}
         <div class="netless-window-manager-cursor-name {offset} {pencilEraserSize3ImageOffset}">
             <div
@@ -67,6 +68,10 @@
         </div>
     {/if}
     <div class="cursor-image-wrapper">
-        <img class="netless-window-manager-cursor-{appliance}-image {pencilEraserSize3ImageOffset}" {src} alt={appliance} />
+        <img
+            class="netless-window-manager-cursor-{appliance}-image {pencilEraserSize3ImageOffset}"
+            {src}
+            alt={appliance}
+        />
     </div>
 </div>

package/src/Cursor/Cursor.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+
+declare class Cursor extends SvelteComponentTyped<{
+    readonly cursorName: string;
+    readonly tagName?: string;
+    readonly backgroundColor: string;
+    readonly appliance: string;
+    readonly x: number;
+    readonly y: number;
+    readonly src?: string;
+    readonly visible: boolean;
+    readonly avatar: string;
+    readonly theme: string;
+    readonly color: string;
+    readonly cursorTagBackgroundColor: string;
+    readonly opacity: number;
+    readonly pencilEraserSize?: number;
+    readonly custom?: boolean;
+}> {}
+
+export default Cursor;

package/src/Cursor/Cursor.ts

@@ -1,12 +1,15 @@
-import App from "./Cursor.svelte";
-import { ApplianceNames } from "white-web-sdk";
-import { findMemberByUid } from "../Helper";
-import { omit } from "lodash";
-import type { Position } from "../AttributesDelegate";
 import type { RoomMember } from "white-web-sdk";
-import type { CursorManager } from "./index";
-import type { SvelteComponent } from "svelte";
+import type { CursorOptions } from "../index";
 import type { AppManager } from "../AppManager";
+import type { Position } from "../AttributesDelegate";
+import type { CursorManager } from "./index";
+
+import { omit } from "lodash";
+import { ApplianceNames } from "white-web-sdk";
+
+import { findMemberByUid } from "../Helper";
+import App from "./Cursor.svelte";
+import { remoteIcon } from "./icons2";
 
 export type Payload = {
     [key: string]: any;
@@ -15,7 +18,8 @@ export type Payload = {
 export class Cursor {
     private member?: RoomMember;
     private timer?: number;
-    private component?: SvelteComponent;
+    private component?: App;
+    private style: CursorOptions["style"] & string = "default";
 
     constructor(
         private manager: AppManager,
@@ -26,6 +30,7 @@ export class Cursor {
         this.updateMember();
         this.createCursor();
         this.autoHidden();
+        this.setStyle(cursorManager.style);
     }
 
     public move = (position: Position) => {
@@ -46,6 +51,16 @@ export class Cursor {
         }
     };
 
+    public setStyle = (style: typeof this.style) => {
+        this.style = style;
+        if (this.component) {
+            this.component.$set({
+                src: this.getIcon(),
+                custom: this.isCustomIcon(),
+            });
+        }
+    };
+
     public leave = () => {
         this.hide();
     };
@@ -56,6 +71,10 @@ export class Cursor {
         if (point) {
             let translateX = point.x - 2;
             let translateY = point.y - 18;
+            if (this.isCustomIcon()) {
+                translateX -= 11;
+                translateY += 4;
+            }
             if (type === "app") {
                 const wrapperRect = this.cursorManager.wrapperRect;
                 if (wrapperRect) {
@@ -80,6 +99,11 @@ export class Cursor {
         return `rgb(${rgb})`;
     }
 
+    public get memberColorHex(): string {
+        const [r, g, b] = this.member?.memberState?.strokeColor || [236, 52, 85];
+        return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+    }
+
     private get payload(): Payload | undefined {
         return this.member?.payload;
     }
@@ -145,6 +169,7 @@ export class Cursor {
             appliance: this.memberApplianceName as string,
             avatar: this.memberAvatar,
             src: this.getIcon(),
+            custom: this.isCustomIcon(),
             visible: false,
             backgroundColor: this.memberColor,
             cursorName: this.memberCursorName,
@@ -157,18 +182,49 @@ export class Cursor {
         };
     }
 
-    private getIcon() {
-        if (this.member) {
-            const icons = this.cursorManager.applianceIcons;
-            let applianceSrc = icons[ApplianceNames.shape];
-            if (this.memberApplianceName === ApplianceNames.pencilEraser) {
-                const size = this.member?.memberState.pencilEraserSize || 1;
-                applianceSrc = icons[`${this.memberApplianceName}${size}`];
-            } else {
-                applianceSrc = icons[this.memberApplianceName || ApplianceNames.shape];
-            }
-            return applianceSrc || icons[ApplianceNames.shape];
+    private getIcon(): string | undefined {
+        if (!this.member) return;
+
+        const { memberApplianceName, memberColorHex } = this;
+        const { userApplianceIcons, applianceIcons } = this.cursorManager;
+
+        let iconsKey: string | undefined = this.memberApplianceName;
+        if (iconsKey === ApplianceNames.pencilEraser) {
+            iconsKey = `${iconsKey}${this.member?.memberState.pencilEraserSize || 1}`;
         }
+
+        const userApplianceSrc = iconsKey && userApplianceIcons[iconsKey];
+        if (userApplianceSrc) return userApplianceSrc;
+
+        if (this.style === "custom" && memberApplianceName) {
+            const customApplianceSrc = remoteIcon(memberApplianceName, memberColorHex);
+            if (customApplianceSrc) return customApplianceSrc;
+        }
+
+        const applianceSrc = applianceIcons[iconsKey || ApplianceNames.shape];
+        return applianceSrc || applianceIcons[ApplianceNames.shape];
+    }
+
+    private isCustomIcon(): boolean {
+        if (!this.member) return false;
+
+        const { memberApplianceName, memberColorHex } = this;
+        const { userApplianceIcons } = this.cursorManager;
+
+        let iconsKey: string | undefined = this.memberApplianceName;
+        if (iconsKey === ApplianceNames.pencilEraser) {
+            iconsKey = `${iconsKey}${this.member?.memberState.pencilEraserSize || 1}`;
+        }
+
+        const userApplianceSrc = iconsKey && userApplianceIcons[iconsKey];
+        if (userApplianceSrc) return false;
+
+        if (this.style === "custom" && memberApplianceName) {
+            const customApplianceSrc = remoteIcon(memberApplianceName, memberColorHex);
+            if (customApplianceSrc) return true;
+        }
+
+        return false;
     }
 
     public updateMember() {

package/src/Cursor/icons2.ts

@@ -0,0 +1,66 @@
+import type { MemberState } from "white-web-sdk";
+import { ApplianceNames } from "white-web-sdk";
+
+type Color = string;
+
+const staticCircle = `data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='12' cy='12' r='2.5' stroke='%23000' stroke-linejoin='square'/%3E%3Ccircle cx='12' cy='12' r='3.5' stroke='%23FFF'/%3E%3C/g%3E%3C/svg%3E`;
+
+function circleUrl(color: Color): string {
+    return `data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='12' cy='12' r='2.5' stroke='%23${color}' stroke-linejoin='square'/%3E%3Ccircle cx='12' cy='12' r='3.5' stroke='%23${color}'/%3E%3C/g%3E%3C/svg%3E`;
+}
+
+function crossUrl(color: Color): string {
+    return `data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M5 12H19' stroke='%23${color}' stroke-linejoin='round'/%3E%3Cpath d='M12 5V19' stroke='%23${color}' stroke-linejoin='round'/%3E%3C/svg%3E`;
+}
+
+function cssCursor(url: string): string {
+    return `url("${url}") 12 12, auto`;
+}
+
+function makeStyleContent(config: { [cursor: string]: string }): string {
+    let result = "";
+    for (const cursor in config) {
+        result += `.netless-whiteboard.${cursor} {cursor: ${config[cursor]}}\n`;
+    }
+    return result;
+}
+
+const $style = document.createElement("style");
+
+export function enableLocal(memberState: MemberState): () => void {
+    const [r, g, b] = memberState.strokeColor;
+    const hex = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+    $style.textContent = makeStyleContent({
+        "cursor-pencil": cssCursor(circleUrl(hex)),
+        "cursor-eraser": cssCursor(staticCircle),
+        "cursor-rectangle": cssCursor(crossUrl(hex)),
+        "cursor-ellipse": cssCursor(crossUrl(hex)),
+        "cursor-straight": cssCursor(crossUrl(hex)),
+        "cursor-arrow": cssCursor(crossUrl(hex)),
+        "cursor-shape": cssCursor(crossUrl(hex)),
+    });
+    document.head.appendChild($style);
+
+    return () => {
+        if ($style.parentNode == null) return;
+        document.head.removeChild($style);
+    };
+}
+
+const shapeAppliances: Set<ApplianceNames> = new Set([
+    ApplianceNames.rectangle,
+    ApplianceNames.ellipse,
+    ApplianceNames.straight,
+    ApplianceNames.arrow,
+    ApplianceNames.shape,
+]);
+
+export function remoteIcon(applianceName: ApplianceNames, hex: string): string | undefined {
+    if (applianceName === ApplianceNames.pencil) {
+        return circleUrl(hex);
+    } else if (applianceName === ApplianceNames.eraser) {
+        return staticCircle;
+    } else if (shapeAppliances.has(applianceName)) {
+        return crossUrl(hex);
+    }
+}

package/src/Cursor/index.ts

@@ -1,15 +1,16 @@
-import { ApplianceNames } from "white-web-sdk";
+import { ApplianceNames, isRoom } from "white-web-sdk";
 import { Cursor } from "./Cursor";
 import { CursorState, Events } from "../constants";
 import { internalEmitter } from "../InternalEmitter";
 import { SideEffectManager } from "side-effect-manager";
 import { WindowManager } from "../index";
-import type { CursorMovePayload, ApplianceIcons } from "../index";
+import type { CursorMovePayload, ApplianceIcons, CursorOptions } from "../index";
 import type { PositionType } from "../AttributesDelegate";
-import type { Point, RoomMember, View } from "white-web-sdk";
+import type { Point, Room, RoomMember, RoomState, View } from "white-web-sdk";
 import type { AppManager } from "../AppManager";
 import { ApplianceMap } from "./icons";
 import { findMemberByUid } from "../Helper";
+import { enableLocal } from "./icons2";
 
 export type EventType = {
     type: PositionType;
@@ -22,17 +23,27 @@ export type MoveCursorParams = {
     y: number;
 };
 
+const LocalCursorSideEffectId = "local-cursor";
+
 export class CursorManager {
     public containerRect?: DOMRect;
     public wrapperRect?: DOMRect;
     public cursorInstances: Map<string, Cursor> = new Map();
     public roomMembers?: readonly RoomMember[];
+    public userApplianceIcons: ApplianceIcons = {};
+
     private mainViewElement?: HTMLDivElement;
     private sideEffectManager = new SideEffectManager();
     private store = this.manager.store;
-    public applianceIcons: ApplianceIcons = ApplianceMap;
+    private leaveFlag = true;
+    private _style: CursorOptions["style"] & string = "default";
 
-    constructor(private manager: AppManager, private enableCursor: boolean, applianceIcons?: ApplianceIcons) {
+    constructor(
+        private manager: AppManager,
+        private enableCursor: boolean,
+        cursorOptions?: CursorOptions,
+        applianceIcons?: ApplianceIcons
+    ) {
         this.roomMembers = this.manager.room?.state.roomMembers;
         const wrapper = WindowManager.wrapper;
         if (wrapper) {
@@ -41,12 +52,44 @@ export class CursorManager {
         this.sideEffectManager.add(() => {
             return internalEmitter.on("cursorMove", this.onCursorMove);
         });
-
         this.sideEffectManager.add(() => {
             return internalEmitter.on("playgroundSizeChange", () => this.updateContainerRect());
         });
+        const room = this.manager.room;
+        if (room) {
+            this.sideEffectManager.add(() => {
+                const update = (state: RoomState) => {
+                    if (this.style === "custom" && state.memberState) this.enableCustomCursor();
+                };
+                room.callbacks.on("onRoomStateChanged", update);
+                return () => room.callbacks.off("onRoomStateChanged", update);
+            });
+        }
         if (applianceIcons) {
-            this.applianceIcons = { ...ApplianceMap, ...applianceIcons };
+            this.userApplianceIcons = applianceIcons;
+        }
+        this.style = cursorOptions?.style || "default";
+    }
+
+    public get applianceIcons(): ApplianceIcons {
+        return { ...ApplianceMap, ...this.userApplianceIcons };
+    }
+
+    public get style() {
+        return this._style;
+    }
+
+    public set style(value) {
+        if (this._style !== value) {
+            this._style = value;
+            this.cursorInstances.forEach(cursor => {
+                cursor.setStyle(value);
+            });
+            if (value === "custom") {
+                this.enableCustomCursor();
+            } else {
+                this.sideEffectManager.flush(LocalCursorSideEffectId);
+            }
         }
     }
 
@@ -71,6 +114,13 @@ export class CursorManager {
         return cursorInstance;
     };
 
+    private enableCustomCursor() {
+        this.sideEffectManager.add(
+            () => enableLocal(this.manager.getMemberState()),
+            LocalCursorSideEffectId
+        );
+    }
+
     private canMoveCursor(member: RoomMember | undefined) {
         const isLaserPointer =
             member?.memberState.currentApplianceName === ApplianceNames.laserPointer;
@@ -109,28 +159,48 @@ export class CursorManager {
         const type = this.getType(event);
         this.updateCursor(type, event.clientX, event.clientY);
         isTouch && this.showPencilEraserIfNeeded(type, event.clientX, event.clientY);
-    }
+    };
 
     private mouseMoveTimer = 0;
     private mouseMoveListener = (event: PointerEvent) => {
         const isTouch = event.pointerType === "touch";
         if (isTouch && !event.isPrimary) return;
-
-        const now = Date.now()
+        const now = Date.now();
         if (now - this.mouseMoveTimer > 48) {
             this.mouseMoveTimer = now;
+            if (
+                WindowManager.supportTeachingAidsPlugin &&
+                isRoom(WindowManager.displayer) &&
+                (WindowManager.displayer as Room).disableDeviceInputs
+            ) {
+                if (this.leaveFlag) {
+                    this.manager.dispatchInternalEvent(Events.CursorMove, {
+                        uid: this.manager.uid,
+                        state: CursorState.Leave,
+                    } as CursorMovePayload);
+                    this.leaveFlag = false;
+                }
+                return;
+            }
             this.mouseMoveListener_(event, isTouch);
+            this.leaveFlag = true;
         }
-    }
+    };
 
     private mouseLeaveListener = () => {
         this.hideCursor(this.manager.uid);
-    }
+    };
 
     private showPencilEraserIfNeeded(event: EventType, clientX: number, clientY: number) {
         const self = findMemberByUid(this.manager.room, this.manager.uid);
-        const isPencilEraser = self?.memberState.currentApplianceName === ApplianceNames.pencilEraser;
-        if (this.wrapperRect && this.manager.canOperate && this.canMoveCursor(self) && isPencilEraser) {
+        const isPencilEraser =
+            self?.memberState.currentApplianceName === ApplianceNames.pencilEraser;
+        if (
+            this.wrapperRect &&
+            this.manager.canOperate &&
+            this.canMoveCursor(self) &&
+            isPencilEraser
+        ) {
             const view = event.type === "main" ? this.manager.mainView : this.focusView;
             const point = this.getPoint(view, clientX, clientY);
             if (point) {

package/src/callback.ts

@@ -1,8 +1,10 @@
 import Emittery from "emittery";
 import type { TeleBoxColorScheme, TELE_BOX_STATE } from "@netless/telebox-insider";
-import type { CameraState, SceneState, ViewVisionMode } from "white-web-sdk";
+import type { CameraState, SceneState, View, ViewVisionMode } from "white-web-sdk";
 import type { LoadAppEvent } from "./Register";
 import type { PageState } from "./Page";
+import type { BoxClosePayload, BoxFocusPayload, BoxMovePayload, BoxResizePayload, BoxStateChangePayload } from "./BoxEmitter";
+import type { AppPayload } from "./typings";
 
 export type PublicEvent = {
     mainViewModeChange: ViewVisionMode;
@@ -22,6 +24,15 @@ export type PublicEvent = {
     pageStateChange: PageState;
     fullscreenChange: boolean;
     appsChange: string[]; // APP 列表变化时触发
+    onBoxMove: BoxMovePayload;
+    onBoxResize: BoxResizePayload;
+    onBoxFocus: BoxFocusPayload;
+    onBoxClose: BoxClosePayload;
+    onBoxStateChange: BoxStateChangePayload;
+    onMainViewMounted: View;
+    onAppViewMounted: AppPayload;
+    onAppSetup: string;
+    onAppScenePathChange: AppPayload;
 };
 
 export type CallbacksType = Emittery<PublicEvent>;