@netless/window-manager 1.0.0-canary.9 → 1.0.1

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 { emitter } from "../InternalEmitter";
+import { internalEmitter } from "../InternalEmitter";
 import { SideEffectManager } from "side-effect-manager";
-import { throttle } from "lodash";
 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,31 +23,73 @@ 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 playground = WindowManager.playground;
-        if (playground) {
-            this.setupWrapper(playground);
+        const wrapper = WindowManager.wrapper;
+        if (wrapper) {
+            this.setupWrapper(wrapper);
         }
         this.sideEffectManager.add(() => {
-            return emitter.on("cursorMove", this.onCursorMove);
+            return internalEmitter.on("cursorMove", this.onCursorMove);
         });
-
         this.sideEffectManager.add(() => {
-            return emitter.on("playgroundSizeChange", () => this.updateContainerRect());
+            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);
+            }
         }
     }
 
@@ -65,12 +108,19 @@ export class CursorManager {
     private initCursorInstance = (uid: string) => {
         let cursorInstance = this.cursorInstances.get(uid);
         if (!cursorInstance) {
-            cursorInstance = new Cursor(this.manager, uid, this, WindowManager.playground);
+            cursorInstance = new Cursor(this.manager, uid, this, WindowManager.wrapper);
             this.cursorInstances.set(uid, cursorInstance);
         }
         return cursorInstance;
     };
 
+    private enableCustomCursor() {
+        this.sideEffectManager.add(
+            () => enableLocal(this.manager.getMemberState()),
+            LocalCursorSideEffectId
+        );
+    }
+
     private canMoveCursor(member: RoomMember | undefined) {
         const isLaserPointer =
             member?.memberState.currentApplianceName === ApplianceNames.laserPointer;
@@ -105,15 +155,70 @@ export class CursorManager {
         return this.manager.focusApp?.view;
     }
 
-    private mouseMoveListener = throttle((event: PointerEvent) => {
-        if (event.pointerType === "touch") {
-            if (!event.isPrimary) return;
+    private mouseMoveListener_ = (event: PointerEvent, isTouch: boolean) => {
+        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();
+        if (now - this.mouseMoveTimer > 48) {
+            this.mouseMoveTimer = now;
+            if (
+                WindowManager.supportAppliancePlugin &&
+                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 view = event.type === "main" ? this.manager.mainView : this.focusView;
+            const point = this.getPoint(view, clientX, clientY);
+            if (point) {
+                this.onCursorMove({
+                    uid: this.manager.uid,
+                    position: {
+                        x: point.x,
+                        y: point.y,
+                        type: event.type,
+                    },
+                });
+            }
         }
-        this.updateCursor(this.getType(event), event.clientX, event.clientY);
-    }, 16);
+    }
 
     private updateCursor(event: EventType, clientX: number, clientY: number) {
-        if (this.wrapperRect && this.manager.canOperate) {
+        const self = findMemberByUid(this.manager.room, this.manager.uid);
+        if (this.wrapperRect && this.manager.canOperate && this.canMoveCursor(self)) {
             const view = event.type === "main" ? this.manager.mainView : this.focusView;
             const point = this.getPoint(view, clientX, clientY);
             if (point) {
@@ -163,13 +268,9 @@ export class CursorManager {
         }
     };
 
-    private mouseLeaveListener = () => {
-        this.hideCursor(this.manager.uid);
-    };
-
     public updateContainerRect() {
         this.containerRect = WindowManager.container?.getBoundingClientRect();
-        this.wrapperRect = WindowManager.playground?.getBoundingClientRect();
+        this.wrapperRect = WindowManager.wrapper?.getBoundingClientRect();
     }
 
     public deleteCursor(uid: string) {

package/src/Helper.ts

@@ -1,24 +1,39 @@
-import { getVersionNumber } from "./Utils/Common";
-import { REQUIRE_VERSION } from "./constants";
+import pRetry from "p-retry";
+import type { Room, RoomMember } from "white-web-sdk";
 import { WhiteVersion } from "white-web-sdk";
+import { REQUIRE_VERSION } from "./constants";
+import { WindowManager } from "./index";
+import { getVersionNumber } from "./Utils/Common";
 import { WhiteWebSDKInvalidError } from "./Utils/error";
-import type { Room , RoomMember} from "white-web-sdk";
+import { log } from "./Utils/log";
 
 export const setupWrapper = (
     root: HTMLElement
 ): {
     playground: HTMLDivElement;
+    wrapper: HTMLDivElement;
+    sizer: HTMLDivElement;
     mainViewElement: HTMLDivElement;
 } => {
     const playground = document.createElement("div");
     playground.className = "netless-window-manager-playground";
 
+    const sizer = document.createElement("div");
+    sizer.className = "netless-window-manager-sizer";
+
+    const wrapper = document.createElement("div");
+    wrapper.className = "netless-window-manager-wrapper";
+
     const mainViewElement = document.createElement("div");
     mainViewElement.className = "netless-window-manager-main-view";
-    playground.appendChild(mainViewElement);
+
+    playground.appendChild(sizer);
+    sizer.appendChild(wrapper);
+    wrapper.appendChild(mainViewElement);
     root.appendChild(playground);
+    WindowManager.wrapper = wrapper;
 
-    return { playground, mainViewElement };
+    return { playground, wrapper, sizer, mainViewElement };
 };
 
 export const checkVersion = () => {
@@ -29,15 +44,80 @@ export const checkVersion = () => {
 };
 
 export const findMemberByUid = (room: Room | undefined, uid: string) => {
-    const roomMembers = room?.state.roomMembers;
-    return roomMembers?.find(member => member.payload?.uid === uid);
+    const roomMembers = room?.state.roomMembers || [];
+    let maxMemberId = -1; // 第一个进入房间的用户 memberId 是 0
+    let result: RoomMember | undefined = undefined;
+    for (const member of roomMembers) {
+        if (member.payload?.uid === uid && maxMemberId < member.memberId) {
+            maxMemberId = member.memberId;
+            result = member;
+        }
+    }
+    return result;
 };
 
-export type Member = RoomMember & { uid: string };
+export const createInvisiblePlugin = async (room: Room): Promise<WindowManager> => {
+    let manager = room.getInvisiblePlugin(WindowManager.kind) as WindowManager;
+    if (manager) return manager;
 
-export const serializeRoomMembers = (members: readonly RoomMember[]) => {
-    return members.map(member => ({
-        uid: member.payload?.uid || "",
-        ...member,
-    }));
-}
+    let resolve!: (manager: WindowManager) => void;
+    const promise = new Promise<WindowManager>(r => {
+        // @ts-expect-error Set private property.
+        WindowManager._resolve = resolve = r;
+    });
+
+    let wasReadonly = false;
+    const canOperate = isRoomTokenWritable(room);
+    if (!room.isWritable && canOperate) {
+        wasReadonly = true;
+        await pRetry(
+            async count => {
+                log(`switching to writable (x${count})`);
+                await room.setWritable(true);
+            },
+            { retries: 10, maxTimeout: 5000 }
+        );
+    }
+    if (room.isWritable) {
+        log("creating InvisiblePlugin...");
+        room.createInvisiblePlugin(WindowManager, {}).catch(console.warn);
+    } else {
+        if (canOperate) console.warn("[WindowManager]: failed to switch to writable");
+        console.warn("[WindowManager]: waiting for others to create the plugin...");
+    }
+
+    const timeout = setTimeout(() => {
+        console.warn("[WindowManager]: no one called createInvisiblePlugin() after 20 seconds");
+    }, 20_000);
+
+    const abort = setTimeout(() => {
+        throw new Error("[WindowManager]: no one called createInvisiblePlugin() after 60 seconds");
+    }, 60_000);
+
+    const interval = setInterval(() => {
+        manager = room.getInvisiblePlugin(WindowManager.kind) as WindowManager;
+        if (manager) {
+            clearTimeout(abort);
+            clearTimeout(timeout);
+            clearInterval(interval);
+            resolve(manager);
+            if (wasReadonly && room.isWritable) {
+                setTimeout(() => room.setWritable(false).catch(console.warn), 500);
+            }
+        }
+    }, 200);
+
+    return promise;
+};
+
+const isRoomTokenWritable = (room: Room) => {
+    try {
+        const str = atob(room.roomToken.slice("NETLESSROOM_".length));
+        const index = str.indexOf("&role=");
+        const role = +str[index + "&role=".length];
+        return role < 2;
+    } catch (error) {
+        console.error(error);
+        return false;
+    }
+};

package/src/InternalEmitter.ts

@@ -1,8 +1,5 @@
 import Emittery from "emittery";
-import type { TeleBoxRect } from "@netless/telebox-insider";
 import type { AppInitState, CursorMovePayload } from "./index";
-import type { Member } from "./Helper";
-import type { MemberState } from "white-web-sdk";
 
 export type RemoveSceneParams = {
     scenePath: string;
@@ -18,7 +15,7 @@ export type EmitterEvent = {
     mainViewMounted: undefined;
     observerIdChange: number;
     boxStateChange: string;
-    playgroundSizeChange: TeleBoxRect;
+    playgroundSizeChange: DOMRect;
     startReconnect: undefined;
     onReconnected: undefined;
     removeScenes: RemoveSceneParams;
@@ -31,9 +28,7 @@ export type EmitterEvent = {
     changePageState: undefined;
     writableChange: boolean;
     containerSizeRatioUpdate: number;
-    roomMembersChange: Member[];
-    memberStateChange: MemberState;
 };
 
 export type EmitterType = Emittery<EmitterEvent>;
-export const emitter: EmitterType = new Emittery();
+export const internalEmitter: EmitterType = new Emittery();

package/src/Page/index.ts

@@ -15,4 +15,4 @@ export const calculateNextIndex = (index: number, pageState: PageState) => {
         nextIndex = pageState.index;
     }
     return nextIndex;
-}
+};

package/src/PageState.ts

@@ -1,21 +1,22 @@
-import { callbacks } from "./callback";
-import { emitter } from "./InternalEmitter";
 import type { AppManager } from "./AppManager";
 import type { PageState } from "./Page";
 
+import { internalEmitter } from "./InternalEmitter";
+import { callbacks } from "./callback";
+
 export class PageStateImpl {
     constructor(private manager: AppManager) {
-        emitter.on("changePageState", () => {
+        internalEmitter.on("changePageState", () => {
             callbacks.emit("pageStateChange", this.toObject());
         });
     }
 
     public get index(): number {
-        return this.manager?.store.getMainViewSceneIndex() || 0;
+        return this.manager.store.getMainViewSceneIndex() || 0;
     }
 
     public get length(): number {
-        return this.manager?.mainViewScenesLength || 0;
+        return this.manager.mainViewScenesLength || 0;
     }
 
     public toObject(): PageState {

package/src/ReconnectRefresher.ts

@@ -4,6 +4,7 @@ import { RoomPhase } from "white-web-sdk";
 import type { Room } from "white-web-sdk";
 import type { EmitterType } from "./InternalEmitter";
 import { EnsureReconnectEvent } from "./constants";
+import { wait } from "./Utils/Common";
 
 export type ReconnectRefresherContext = {
     emitter: EmitterType;
@@ -41,19 +42,24 @@ export class ReconnectRefresher {
         this.ctx = ctx;
     }
 
-    private onPhaseChanged = (phase: RoomPhase) => {
+    private onPhaseChanged = async (phase: RoomPhase) => {
         if (phase === RoomPhase.Reconnecting) {
             this.ctx.emitter.emit("startReconnect");
         }
         if (phase === RoomPhase.Connected && this.phase === RoomPhase.Reconnecting) {
-            this.room?.dispatchMagixEvent(EnsureReconnectEvent, {});
+            if (this.room?.isWritable) {
+                this.room?.dispatchMagixEvent(EnsureReconnectEvent, {});
+            } else {
+                await wait(500);
+                this.onReconnected();
+            }
         }
         this.phase = phase;
     };
 
     private onReconnected = debounce(() => {
         this._onReconnected();
-    }, 3000);
+    }, 1000);
 
     private _onReconnected = () => {
         log("onReconnected refresh reactors");
@@ -88,7 +94,6 @@ export class ReconnectRefresher {
             this.reactors.set(id, func);
             this.disposers.set(id, func());
         }
-        return () => this.remove(id);
     }
 
     public remove(id: string) {

package/src/RedoUndo.ts

@@ -1,5 +1,5 @@
 import { callbacks } from "./callback";
-import { emitter } from "./InternalEmitter";
+import { internalEmitter } from "./InternalEmitter";
 import type { View } from "white-web-sdk";
 import type { AppProxy } from "./App";
 
@@ -11,13 +11,13 @@ export type RedoUndoContext = {
 
 export class RedoUndo {
     constructor(private context: RedoUndoContext) {
-        emitter.on("focusedChange", changed => {
+        internalEmitter.on("focusedChange", changed => {
             this.disposePrevFocusViewRedoUndoListeners(changed.prev);
             setTimeout(() => {
                 this.addRedoUndoListeners(changed.focused);
             }, 0);
         });
-        emitter.on("rootDirRemoved", () => {
+        internalEmitter.on("rootDirRemoved", () => {
             this.disposePrevFocusViewRedoUndoListeners(context.focus());
             this.addRedoUndoListeners(context.focus());
         });

package/src/Register/index.ts

@@ -8,7 +8,7 @@ export type LoadAppEvent = {
     reason?: string;
 };
 
-export type SyncRegisterAppPayload =  { kind: string, src: string, name: string | undefined };
+export type SyncRegisterAppPayload = { kind: string; src: string; name: string | undefined };
 export type SyncRegisterApp = (payload: SyncRegisterAppPayload) => void;
 
 class AppRegister {
@@ -25,38 +25,43 @@ class AppRegister {
 
     public onSyncRegisterAppChange = (payload: SyncRegisterAppPayload) => {
         this.register({ kind: payload.kind, src: payload.src });
-    }
+    };
 
     public async register(params: RegisterParams): Promise<void> {
         this.appClassesCache.delete(params.kind);
         this.registered.set(params.kind, params);
 
-        const srcOrAppOrFunction = params.src;
+        const paramSrc = params.src;
         let downloadApp: () => Promise<NetlessApp>;
 
-        if (typeof srcOrAppOrFunction === "string") {
+        if (typeof paramSrc === "string") {
             downloadApp = async () => {
-                let appClass = (await loadApp(srcOrAppOrFunction, params.kind, params.name)) as any;
+                const result = (await loadApp(paramSrc, params.kind, params.name)) as any;
+                if (result.__esModule) {
+                    return result.default;
+                }
+                return result;
+            };
+            if (this.syncRegisterApp) {
+                this.syncRegisterApp({ kind: params.kind, src: paramSrc, name: params.name });
+            }
+        }
+        if (typeof paramSrc === "function") {
+            downloadApp = async () => {
+                let appClass = (await paramSrc()) as any;
                 if (appClass) {
-                    if (appClass.__esModule) {
+                    if (appClass.__esModule || appClass.default) {
                         appClass = appClass.default;
                     }
                     return appClass;
                 } else {
-                    throw new Error(
-                        `[WindowManager]: load remote script failed, ${srcOrAppOrFunction}`
-                    );
+                    throw new Error(`[WindowManager]: load remote script failed, ${paramSrc}`);
                 }
             };
-            if (this.syncRegisterApp) {
-                this.syncRegisterApp({ kind: params.kind, src: srcOrAppOrFunction, name: params.name });
-            }
-        } else if (typeof srcOrAppOrFunction === "function") {
-            downloadApp = srcOrAppOrFunction;
-        } else {
-            downloadApp = async () => srcOrAppOrFunction;
         }
-
+        if (typeof paramSrc === "object") {
+            downloadApp = async () => paramSrc;
+        }
         this.appClasses.set(params.kind, async () => {
             let app = this.appClassesCache.get(params.kind);
             if (!app) {