@netless/forge-imagery-doc 0.1.2 → 0.1.3

package/src/ImageryDocApplication.ts

@@ -1,14 +1,14 @@
-import {AbstractApplication} from "@netless/forge-room";
-import {Whiteboard, WhiteboardApplication, WhiteboardPermissionFlag} from "@netless/forge-whiteboard";
-import * as Y from "yjs";
-
-import {ImageryDoc} from "./ImageryDoc";
-import {LazyImage} from "./LazyImage";
-import {Container} from "./Container";
-import {ImageryDocPermissionFlag, ImageryDocPermissions} from "./ImageryDocPermissions";
-import {FooterView} from "./FooterView";
-import {ContinuousContainer} from "./ContinuousContainer";
-import {SingleContainer} from "./SingleContainer";
+import { AbstractApplication } from '@netless/forge-room';
+import { Whiteboard, WhiteboardApplication, WhiteboardPermissionFlag } from '@netless/forge-whiteboard';
+import * as Y from 'yjs';
+
+import { ImageryDoc } from './ImageryDoc';
+import { LazyImage } from './LazyImage';
+import { Container } from './Container';
+import { ImageryDocPermissionFlag, ImageryDocPermissions } from './ImageryDocPermissions';
+import { FooterView } from './FooterView';
+import { ContinuousContainer } from './ContinuousContainer';
+import { SingleContainer } from './SingleContainer';
 
 export interface ImageryDocOption {
     images: {
@@ -20,206 +20,219 @@ export interface ImageryDocOption {
      * 从指定的白板 id 继承白板权限以及工具栏配置
      */
     inheritWhiteboardId?: string;
-    displayMode: "continuous" | "single";
+    displayMode: 'continuous' | 'single';
 }
 
-export const IMAGERY_DOC_APP_NAME = "imagery_doc";
+export const IMAGERY_DOC_APP_NAME = 'imagery_doc';
 
 /**
  * 需用户自行保证 ImageryDocApplication.view 的高宽比一致
  */
 export class ImageryDocApplication extends AbstractApplication<ImageryDocOption, ImageryDoc> {
 
-    static applicationName = IMAGERY_DOC_APP_NAME;
-
-    public readonly name: string = IMAGERY_DOC_APP_NAME;
-
-    public emitter: ImageryDoc = new ImageryDoc();
-
-    private whiteboardApp!: WhiteboardApplication;
-    private whiteboard!: Whiteboard;
-    private container!: Container;
-    private rootView: HTMLDivElement = document.createElement("div");
-    private contentContainer: HTMLDivElement = document.createElement("div");
-    private whiteboardContainer: HTMLDivElement = document.createElement("div");
-    private footerContainer: HTMLDivElement = document.createElement("div");
-    private permissions!: ImageryDocPermissions;
-    private footer: FooterView;
-    private images: LazyImage[] = [];
-
-    public constructor() {
-        super();
-        this.rootView.setAttribute("data-forge-app", "imagery-doc");
-        this.rootView.style.background = "red";
-        this.rootView.style.overflow = "hidden";
-
-        this.contentContainer.style.width = "100%";
-        this.contentContainer.style.height = "100%";
-        this.contentContainer.style.display = "flex";
-        this.contentContainer.style.flexDirection = "column";
-
-        this.footer = new FooterView(this.emitter);
-        this.rootView.appendChild(this.contentContainer);
-
-        this.emitter.on("renderStart", pageIndex => {
-            this.footer.prevPageState(pageIndex !== 0);
-            this.footer.nextPageState(pageIndex !== this.images.length - 1);
-        });
-
-        const that = this;
-        Object.defineProperty(this.emitter, "footView", {
-            get(): HTMLDivElement {
-                return that.footerContainer;
-            }
-        });
-        Object.defineProperty(this.emitter, "view", {
-            get(): any {
-                return that.rootView;
-            }
-        });
-        Object.defineProperty(this.emitter, "permissions", {
-            get(): any {
-                return that.permissions;
-            }
-        });
-        Object.defineProperty(this.emitter, "pageIndex", {
-            get(): any {
-                return that.container.pageIndex;
-            }
-        });
-        Object.defineProperty(this.emitter, "pageCount", {
-            get(): any {
-                return that.images.length;
-            }
-        });
-        Object.defineProperty(this.emitter, "goto", {
-            get(): any {
-                return (index: number) => {
-                    if (that.permissions.hasPermission(ImageryDocPermissionFlag.switchPage)) {
-                        that.container.goto(index);
-                    }
-                };
-            }
-        });
-        Object.defineProperty(this.emitter, "imgContent", {
-            get(): any {
-                return (index: number) => {
-                    return that.images[index].getImgContent();
-                };
-            }
-        });
-        Object.defineProperty(this.emitter, "imgSize", {
-            get(): any {
-                return (index: number) => {
-                    return {
-                        width: that.images[index].width,
-                        height: that.images[index].height
-                    }
-                };
-            }
-        });
+  static applicationName = IMAGERY_DOC_APP_NAME;
+
+  public readonly name: string = IMAGERY_DOC_APP_NAME;
+
+  public emitter: ImageryDoc = new ImageryDoc();
+
+  private whiteboardApp!: WhiteboardApplication;
+  private whiteboard!: Whiteboard;
+  private container!: Container;
+  private rootView: HTMLDivElement = document.createElement('div');
+  private contentContainer: HTMLDivElement = document.createElement('div');
+  private whiteboardContainer: HTMLDivElement = document.createElement('div');
+  private footerContainer: HTMLDivElement = document.createElement('div');
+  private permissions!: ImageryDocPermissions;
+  private footer: FooterView;
+  private images: LazyImage[] = [];
+
+  public constructor() {
+    super();
+    this.rootView.setAttribute('data-forge-app', 'imagery-doc');
+    this.rootView.style.background = 'red';
+    this.rootView.style.overflow = 'hidden';
+
+    this.contentContainer.style.width = '100%';
+    this.contentContainer.style.height = '100%';
+    this.contentContainer.style.display = 'flex';
+    this.contentContainer.style.flexDirection = 'column';
+
+    this.footer = new FooterView(this.emitter);
+    this.rootView.appendChild(this.contentContainer);
+
+    this.emitter.on('renderStart', pageIndex => {
+      this.footer.prevPageState(pageIndex !== 0);
+      this.footer.nextPageState(pageIndex !== this.images.length - 1);
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const that = this;
+    Object.defineProperty(this.emitter, 'footView', {
+      get(): HTMLDivElement {
+        return that.footerContainer;
+      },
+    });
+    Object.defineProperty(this.emitter, 'view', {
+      get(): any {
+        return that.rootView;
+      },
+    });
+    Object.defineProperty(this.emitter, 'permissions', {
+      get(): any {
+        return that.permissions;
+      },
+    });
+    Object.defineProperty(this.emitter, 'pageIndex', {
+      get(): any {
+        return that.container.pageIndex;
+      },
+    });
+    Object.defineProperty(this.emitter, 'pageCount', {
+      get(): any {
+        return that.images.length;
+      },
+    });
+    Object.defineProperty(this.emitter, 'goto', {
+      get(): any {
+        return (index: number) => {
+          if (that.permissions.hasPermission(ImageryDocPermissionFlag.switchPage)) {
+            that.container.goto(index);
+          }
+        };
+      },
+    });
+    Object.defineProperty(this.emitter, 'imgContent', {
+      get(): any {
+        return (index: number) => {
+          return that.images[index].getImgContent();
+        };
+      },
+    });
+    Object.defineProperty(this.emitter, 'imgSize', {
+      get(): any {
+        return (index: number) => {
+          return {
+            width: that.images[index].width,
+            height: that.images[index].height,
+          };
+        };
+      },
+    });
+  }
+
+  public async initialize(option: ImageryDocOption): Promise<void> {
+    const whiteboardApp = new WhiteboardApplication();
+    // @ts-ignore
+    whiteboardApp.roomDoc = this.roomDoc;
+    // @ts-ignore
+    whiteboardApp.appId = `${this.appId}_wb`;
+    // @ts-ignore
+    whiteboardApp.userId = this.userId;
+    // @ts-ignore
+    whiteboardApp.userManager = this.userManager;
+    // @ts-ignore
+    whiteboardApp.applicationManager = this.applicationManager;
+    await whiteboardApp.initialize({
+      width: -1,
+      height: -1,
+    });
+    this.whiteboardApp = whiteboardApp;
+    this.whiteboard = whiteboardApp.emitter;
+    this.whiteboard.enableCameraByMouse = false;
+    this.whiteboard.enableCameraByTouch = false;
+    this.whiteboard.view.style.width = '100%';
+    this.whiteboard.view.style.height = '100%';
+    this.whiteboard.view.style.position = 'absolute';
+    this.whiteboard.view.style.top = '0';
+    this.whiteboard.view.style.left = '0';
+    this.whiteboard.setCanvasBackgroundColor('#f0f0f000');
+
+    if (option.displayMode === 'single') {
+      this.container = new SingleContainer(
+        this.getMap('single-container'),
+        whiteboardApp,
+        this.whiteboardContainer,
+        this.emitter,
+      );
+    } else {
+      this.container = new ContinuousContainer(
+        this.getMap('continuous-container'),
+        whiteboardApp,
+        this.whiteboardContainer,
+        this.emitter,
+      );
     }
 
-    public async initialize(option: ImageryDocOption): Promise<void> {
-        const whiteboardApp = new WhiteboardApplication();
-        // @ts-ignore
-        whiteboardApp.roomDoc = this.roomDoc;
-        // @ts-ignore
-        whiteboardApp.appId = `${this.appId}_wb`;
-        // @ts-ignore
-        whiteboardApp.userId = this.userId;
-        // @ts-ignore
-        whiteboardApp.userManager = this.userManager;
-        // @ts-ignore
-        whiteboardApp.applicationManager = this.applicationManager;
-        await whiteboardApp.initialize({
-            width: -1,
-            height: -1
-        });
-        this.whiteboardApp = whiteboardApp;
-        this.whiteboard = whiteboardApp.emitter;
-        this.whiteboard.enableCameraByMouse = false;
-        this.whiteboard.enableCameraByTouch = false;
-        this.whiteboard.view.style.width = "100%";
-        this.whiteboard.view.style.height = "100%";
-        this.whiteboard.view.style.position = "absolute";
-        this.whiteboard.view.style.top = "0";
-        this.whiteboard.view.style.left = "0";
-        this.whiteboard.setCanvasBackgroundColor("#f0f0f000");
-
-        if (option.displayMode === "single") {
-            this.container = new SingleContainer(
-                this.getMap("single-container"),
-                whiteboardApp,
-                this.whiteboardContainer,
-                this.emitter,
-            );
-        } else {
-            this.container = new ContinuousContainer(
-                this.getMap("continuous-container"),
-                whiteboardApp,
-                this.whiteboardContainer,
-                this.emitter,
-            );
-        }
-
-        this.whiteboardContainer.style.position = "relative";
-        this.whiteboardContainer.style.flex = "1 1 auto";
-        this.whiteboardContainer.style.overflow = "hidden";
-        this.whiteboardContainer.appendChild(this.container.view);
-        this.whiteboardContainer.appendChild(this.whiteboard.view);
-
-        this.contentContainer.appendChild(this.whiteboardContainer);
-        this.contentContainer.appendChild(this.footerContainer);
-        this.footerContainer.appendChild(this.footer.root);
-
-        this.whiteboard.setViewModeToMain();
-
-        let i = 0;
-        this.whiteboard.permissions.addPermission(WhiteboardPermissionFlag.mainView);
-        while (i < option.images.length) {
-            const image = option.images[i];
-            this.images[i] = new LazyImage(image.src, image.width, image.height);
-            this.container.append(this.images[i]);
-            if (option.displayMode === "single") {
-                this.whiteboard.addPage(`doc_${i}`);
-            }
-            i += 1;
-        }
-        if (option.displayMode === "continuous") {
-            this.whiteboard.addPage("doc_continuous");
-            this.whiteboard.gotoPage("doc_continuous");
-        }
-
-        if (option.displayMode === "single") {
-            this.whiteboard.setViewModeToMain();
-        } else {
-            this.whiteboard.setViewModeToFree();
-        }
-
-        this.permissions = new ImageryDocPermissions(this.userManager, (userId: string) => {
-            return this.userMap(userId);
-        });
-        this.permissions.addPermission(ImageryDocPermissionFlag.all);
-        this.whiteboardApp.disableViewModel();
-        this.container.init();
-
-        this.whiteboard.permissions.removePermission(WhiteboardPermissionFlag.mainView);
-        if (option.inheritWhiteboardId) {
-            whiteboardApp.linkToWhiteboard(option.inheritWhiteboardId);
-        }
-
-        return Promise.resolve(undefined);
+    this.whiteboardContainer.style.position = 'relative';
+    this.whiteboardContainer.style.flex = '1 1 auto';
+    this.whiteboardContainer.style.overflow = 'hidden';
+    this.whiteboardContainer.appendChild(this.container.view);
+    this.whiteboardContainer.appendChild(this.whiteboard.view);
+
+    this.contentContainer.appendChild(this.whiteboardContainer);
+    this.contentContainer.appendChild(this.footerContainer);
+    this.footerContainer.appendChild(this.footer.root);
+
+    let i = 0;
+    this.whiteboard.permissions.addPermission(WhiteboardPermissionFlag.mainView);
+    this.whiteboard.setViewModeToMain();
+    while (i < option.images.length) {
+      const image = option.images[i];
+      this.images[i] = new LazyImage(image.src, image.width, image.height);
+      this.container.append(this.images[i]);
+      if (option.displayMode === 'single') {
+        this.whiteboard.addPage(`doc_${i}`);
+      }
+      i += 1;
     }
-
-    private userMap(userId: string): Y.Map<any> {
-        return this.getMap(`user/${userId}`);
+    if (option.displayMode === 'continuous') {
+      this.whiteboard.addPage('doc_continuous');
+      this.whiteboard.gotoPage('doc_continuous');
     }
 
-    public async dispose(): Promise<void> {
-        await this.whiteboardApp.dispose();
-        this.rootView.parentElement?.removeChild(this.rootView);
-        this.container.dispose();
-        return Promise.resolve(undefined);
+    this.whiteboard.setViewModeToFree();
+
+    this.permissions = new ImageryDocPermissions(this.userManager, (userId: string) => {
+      return this.userMap(userId);
+    });
+    this.permissions.on('change', (userId: string, flags: ImageryDocPermissionFlag[], value: number) => {
+      this.emitter.emit('permissionChange', userId, flags, value);
+    });
+
+    this.permissions.addPermission(ImageryDocPermissionFlag.all);
+    this.whiteboardApp.disableViewModel();
+    this.container.init();
+
+    this.whiteboard.permissions.removePermission(WhiteboardPermissionFlag.mainView);
+    if (option.inheritWhiteboardId) {
+      whiteboardApp.linkToWhiteboard(option.inheritWhiteboardId);
     }
+
+    return Promise.resolve(undefined);
+  }
+
+  private userMap(userId: string): Y.Map<any> {
+    return this.getMap(`user/${userId}`);
+  }
+
+  public async dispose(): Promise<void> {
+    await this.whiteboardApp.dispose();
+    this.rootView.parentElement?.removeChild(this.rootView);
+    this.container.dispose();
+    this.permissions.dispose();
+    Object.defineProperty(this.emitter, 'footView', { value: null });
+    Object.defineProperty(this.emitter, 'view', { value: null });
+    Object.defineProperty(this.emitter, 'permissions', { value: null });
+    Object.defineProperty(this.emitter, 'pageIndex', { value: null });
+    Object.defineProperty(this.emitter, 'pageCount', { value: null });
+    Object.defineProperty(this.emitter, 'goto', { value: null });
+    Object.defineProperty(this.emitter, 'imgContent', { value: null });
+    Object.defineProperty(this.emitter, 'imgSize', { value: null });
+    this.emitter.removeAllListeners();
+    return Promise.resolve(undefined);
+  }
 }
+
+// @ts-ignore
+window.__ImageryDocApplication = ImageryDocApplication;

package/src/ImageryDocPermissions.ts

@@ -1,6 +1,6 @@
-import { type RoomUser, type UserManager } from "@netless/forge-room";
-import EventEmitter from "eventemitter3";
-import * as Y from "yjs";
+import { type RoomUser, type UserManager } from '@netless/forge-room';
+import EventEmitter from 'eventemitter3';
+import * as Y from 'yjs';
 
 export enum ImageryDocPermissionFlag {
     /**
@@ -39,121 +39,131 @@ export interface ImageryDocPermissionEvents {
 
 export class ImageryDocPermissions extends EventEmitter<ImageryDocPermissionEvents> {
 
-    private requestUserMap: (userId: string) => Y.Map<any>;
-    private userManager: UserManager;
-    private observers: Map<string, any> = new Map();
-
-    public constructor(
-        userManager: UserManager,
-        requestUserMap: (userId: string) => Y.Map<any>,
-    ) {
-        super();
-        this.userManager = userManager;
-        this.requestUserMap = requestUserMap;
-        this.createModel(this.userManager.selfId);
-        this.userManager.userIdList().forEach((userId) => {
-            this.addObserve(userId);
-        });
-
-        this.userManager.on("join", this.handleUserJoin);
-        this.userManager.on("leave", this.handleUserLeave);
+  private requestUserMap: (userId: string) => Y.Map<any>;
+  private userManager: UserManager;
+  private observers: Map<string, any> = new Map();
+
+  public constructor(
+    userManager: UserManager,
+    requestUserMap: (userId: string) => Y.Map<any>,
+  ) {
+    super();
+    this.userManager = userManager;
+    this.requestUserMap = requestUserMap;
+    this.createModel(this.userManager.selfId);
+    this.userManager.userIdList().forEach((userId) => {
+      this.addObserve(userId);
+    });
+
+    this.userManager.on('join', this.handleUserJoin);
+    this.userManager.on('leave', this.handleUserLeave);
+  }
+
+  private handleUserLeave = (user: RoomUser) => {
+    const cb = this.observers.get(user.id);
+    if (cb) {
+      this.requestUserMap(user.id).unobserve(cb);
     }
+  };
 
-    private handleUserLeave = (user: RoomUser) => {
-        const cb = this.observers.get(user.id);
-        if (cb) {
-            this.requestUserMap(user.id).unobserve(cb);
-        }
-    };
+  private handleUserJoin = (user: RoomUser) => {
+    this.addObserve(user.id);
+  };
 
-    private handleUserJoin = (user: RoomUser) => {
-        this.addObserve(user.id);
+  private addObserve(userId: string) {
+    const observer = (evt: Y.YMapEvent<any>) => {
+      this.handleUserPermissionChange(userId, evt);
     };
-
-    private addObserve(userId: string) {
-        const observer = (evt: Y.YMapEvent<any>) => {
-            this.handleUserPermissionChange(userId, evt);
-        };
-        this.observers.set(userId, observer);
-        this.requestUserMap(userId).observe(observer)
-    }
-
-    private createModel(userId: string) {
-        const userMap = this.requestUserMap(userId);
-        if (!userMap.has("permission")) {
-            userMap.set("permission", 0);
-        }
+    this.observers.set(userId, observer);
+    this.requestUserMap(userId).observe(observer);
+  }
+
+  private createModel(userId: string) {
+    const userMap = this.requestUserMap(userId);
+    if (!userMap.has('permission')) {
+      userMap.set('permission', 0);
     }
-
-    private handleUserPermissionChange(userId: string, evt: Y.YMapEvent<any>) {
-        for (const [key, value] of evt.changes.keys.entries()) {
-            if (key === "permission") {
-                if (value.action === "add" || value.action === "update") {
-                    const newValue = this.requestUserMap(userId).get("permission");
-                    this.emit("change", userId, this.resolveFlags(newValue), newValue);
-                }
-            }
+  }
+
+  private handleUserPermissionChange(userId: string, evt: Y.YMapEvent<any>) {
+    for (const [key, value] of evt.changes.keys.entries()) {
+      if (key === 'permission') {
+        if (value.action === 'add' || value.action === 'update') {
+          const newValue = this.requestUserMap(userId).get('permission');
+          this.emit('change', userId, this.resolveFlags(newValue), newValue);
         }
+      }
     }
+  }
 
-    /**
+  /**
      * 解析权限列表组合
      * @param {number} value - 权限数字值
      * @return {WhiteboardPermissionFlag[]} - 权限列表
      */
-    public resolveFlags(value: number): ImageryDocPermissionFlag[] {
-        return [
-            ImageryDocPermissionFlag.switchPage,
-            ImageryDocPermissionFlag.sideBar,
-            ImageryDocPermissionFlag.camera
-        ].filter(v => (v & value) !== 0)
-    }
-
-    /**
+  public resolveFlags(value: number): ImageryDocPermissionFlag[] {
+    return [
+      ImageryDocPermissionFlag.switchPage,
+      ImageryDocPermissionFlag.sideBar,
+      ImageryDocPermissionFlag.camera,
+    ].filter(v => (v & value) !== 0);
+  }
+
+  /**
      * 获取权限列表组合对应的数值
      * @param { string } userId 不传表示获取自己
      */
-    public getPermissionValue(userId?: string): number {
-        return this.requestUserMap(userId ?? this.userManager.selfId).get("permission") ?? 0;
-    }
+  public getPermissionValue(userId?: string): number {
+    return this.requestUserMap(userId ?? this.userManager.selfId).get('permission') ?? 0;
+  }
 
-    /**
+  /**
      * 获取权限列表
      * @param {string=} userId 可选, 不传表示获取自己
      */
-    public getPermissionFlags(userId?: string): ImageryDocPermissionFlag[] {
-        const value = this.requestUserMap(userId ?? this.userManager.selfId).get("permission") ?? 0;
-        return this.resolveFlags(value);
-    }
+  public getPermissionFlags(userId?: string): ImageryDocPermissionFlag[] {
+    const value = this.requestUserMap(userId ?? this.userManager.selfId).get('permission') ?? 0;
+    return this.resolveFlags(value);
+  }
 
-    /**
+  /**
      * 返回对应 userId 是否有相应权限
      * @param {string=} userId 可选, 不传表示返回自己是否有相应权限
      * @param {WhiteboardPermissionFlag} flag
      */
-    public hasPermission(flag: ImageryDocPermissionFlag, userId?: string): boolean {
-        return ((this.requestUserMap(userId ?? this.userManager.selfId).get("permission") ?? 0) & flag) !== 0;
-    }
+  public hasPermission(flag: ImageryDocPermissionFlag, userId?: string): boolean {
+    return ((this.requestUserMap(userId ?? this.userManager.selfId).get('permission') ?? 0) & flag) !== 0;
+  }
 
-    /**
+  /**
      * 添加权限
      * @param {WhiteboardPermissionFlag} flag 权限标记
      * @param {string=} userId 可选, 为 userId 添加权限, 不传表示为自己添加权限
      */
-    public addPermission(flag: ImageryDocPermissionFlag, userId?: string) {
-        const userMap = this.requestUserMap(userId ?? this.userManager.selfId);
-        const oldValue = userMap.get("permission") ?? 0;
-        this.requestUserMap(userId ?? this.userManager.selfId).set("permission", oldValue | flag);
-    }
+  public addPermission(flag: ImageryDocPermissionFlag, userId?: string) {
+    const userMap = this.requestUserMap(userId ?? this.userManager.selfId);
+    const oldValue = userMap.get('permission') ?? 0;
+    this.requestUserMap(userId ?? this.userManager.selfId).set('permission', oldValue | flag);
+  }
 
-    /**
+  /**
      * 移除权限
      * @param {WhiteboardPermissionFlag} flag 权限标记
      * @param {string=} userId 可选, 为 userId 移除权限, 不传表示为自己移除权限
      */
-    public removePermission(flag: ImageryDocPermissionFlag, userId?: string) {
-        const userMap = this.requestUserMap(userId ?? this.userManager.selfId);
-        const oldValue = userMap.get("permission") ?? 0;
-        this.requestUserMap(userId ?? this.userManager.selfId).set("permission", oldValue & (~flag));
+  public removePermission(flag: ImageryDocPermissionFlag, userId?: string) {
+    const userMap = this.requestUserMap(userId ?? this.userManager.selfId);
+    const oldValue = userMap.get('permission') ?? 0;
+    this.requestUserMap(userId ?? this.userManager.selfId).set('permission', oldValue & (~flag));
+  }
+
+  public dispose() {
+    this.userManager.off('join', this.handleUserJoin);
+    this.userManager.off('leave', this.handleUserLeave);
+    for (const [userId, observer] of this.observers) {
+      this.requestUserMap(userId).unobserve(observer);
     }
+    this.observers.clear();
+    this.removeAllListeners();
+  }
 }