@netless/window-manager 0.4.71-beta.0 → 0.4.71

package/package.json

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

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 设置为初始值

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

@@ -4,12 +4,13 @@ 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, Room, 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,19 +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 onceCount = true;
+    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) {
@@ -43,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);
+            }
         }
     }
 
@@ -73,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;
@@ -111,38 +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.onceCount){
+            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
+                        state: CursorState.Leave,
                     } as CursorMovePayload);
-                    this.onceCount = false;
+                    this.leaveFlag = false;
                 }
-                return ;
+                return;
             }
             this.mouseMoveListener_(event, isTouch);
-            this.onceCount = true;
+            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/index.ts

@@ -126,6 +126,15 @@ export type AppInitState = {
 
 export type CursorMovePayload = { uid: string; state?: "leave"; position: Position };
 
+export type CursorOptions = {
+    /**
+     * If `"custom"`, it will render the pencil / eraser cursor as a circle and shapes cursor as a cross.
+     *
+     * @default "default"
+     */
+    style?: "default" | "custom";
+};
+
 export type MountParams = {
     room: Room | Player;
     container?: HTMLElement;
@@ -137,6 +146,7 @@ export type MountParams = {
     collectorStyles?: Partial<CSSStyleDeclaration>;
     overwriteStyles?: string;
     cursor?: boolean;
+    cursorOptions?: CursorOptions;
     debug?: boolean;
     disableCameraTransform?: boolean;
     prefersColorScheme?: TeleBoxColorScheme;
@@ -148,7 +158,10 @@ export type MountParams = {
 
 export const reconnectRefresher = new ReconnectRefresher({ emitter: internalEmitter });
 
-export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any> implements PageController {
+export class WindowManager
+    extends InvisiblePlugin<WindowMangerAttributes, any>
+    implements PageController
+{
     public static kind = "WindowManager";
     public static displayer: Displayer;
     public static wrapper?: HTMLElement;
@@ -249,7 +262,12 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
         manager.appManager = new AppManager(manager);
         manager.appManager.polling = params.polling || false;
         manager._pageState = new PageStateImpl(manager.appManager);
-        manager.cursorManager = new CursorManager(manager.appManager, Boolean(cursor), params.applianceIcons);
+        manager.cursorManager = new CursorManager(
+            manager.appManager,
+            Boolean(cursor),
+            params.cursorOptions,
+            params.applianceIcons
+        );
         if (containerSizeRatio) {
             manager.containerSizeRatio = containerSizeRatio;
         }
@@ -296,16 +314,12 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
         manager: WindowManager,
         container: HTMLElement,
         params: {
-            chessboard?: boolean,
-            overwriteStyles?: string,
-            fullscreen?: boolean,
+            chessboard?: boolean;
+            overwriteStyles?: string;
+            fullscreen?: boolean;
         }
     ) {
-        const {
-            chessboard,
-            overwriteStyles,
-            fullscreen,
-        } = params;
+        const { chessboard, overwriteStyles, fullscreen } = params;
         if (!WindowManager.container) {
             WindowManager.container = container;
         }
@@ -370,7 +384,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
         this.appManager?.resetMaximized();
         this.appManager?.resetMinimized();
         this.appManager?.displayerWritableListener(!this.room.isWritable);
-        WindowManager.container = container;        
+        WindowManager.container = container;
     }
 
     public bindCollectorContainer(container: HTMLElement) {
@@ -581,7 +595,7 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
                 console.warn(`[WindowManager]: index ${index} out of range`);
                 return false;
             }
-            return this.appManager.removeSceneByIndex(needRemoveIndex);;
+            return this.appManager.removeSceneByIndex(needRemoveIndex);
         } else {
             return false;
         }
@@ -629,7 +643,10 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
      *
      * 返回一个用于撤销此监听的函数
      */
-    public onAppEvent(kind: string, listener: (args: { kind: string, appId: string, type: string, value: any }) => void): () => void {
+    public onAppEvent(
+        kind: string,
+        listener: (args: { kind: string; appId: string; type: string; value: any }) => void
+    ): () => void {
         return internalEmitter.on(`custom-${kind}` as any, listener);
     }
 
@@ -753,6 +770,17 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
         }
     }
 
+    public get cursorStyle(): "default" | "custom" {
+        return this.cursorManager?.style || "default";
+    }
+
+    public set cursorStyle(value: "default" | "custom") {
+        if (!this.cursorManager) {
+            throw new Error("[WindowManager]: cursor is not enabled, please set { cursor: true }.");
+        }
+        this.cursorManager.style = value;
+    }
+
     public get mainViewSceneIndex(): number {
         return this._pageState?.index || 0;
     }
@@ -982,8 +1010,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
     }
 
     public refresh() {
-       this._refresh();
-       this.appManager?.dispatchInternalEvent(Events.Refresh);
+        this._refresh();
+        this.appManager?.dispatchInternalEvent(Events.Refresh);
     }
 
     /** @inner */
@@ -997,7 +1025,9 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
 
     public setContainerSizeRatio(ratio: number) {
         if (!isNumber(ratio) || !(ratio > 0)) {
-            throw new Error(`[WindowManager]: updateContainerSizeRatio error, ratio must be a positive number. but got ${ratio}`);
+            throw new Error(
+                `[WindowManager]: updateContainerSizeRatio error, ratio must be a positive number. but got ${ratio}`
+            );
         }
         WindowManager.containerSizeRatio = ratio;
         this.containerSizeRatio = ratio;

package/src/style.css

@@ -53,7 +53,6 @@
     height: 100%;
 }
 
-
 .netless-window-manager-cursor-pencil-image {
     width: 26px;
     height: 26px;