@netless/forge-slide 0.1.1-alpha.8 → 1.0.0-alpha.1

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,WAAW,GAAE,MAAM,EAAa,WAkDzE;AAWD,wBAAsB,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAA8D"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,WAAW,GAAE,MAAM,EAAmB,WAkD/E;AAWD,wBAAsB,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAA8D"}

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@netless/forge-slide",
-  "version": "0.1.1-alpha.8",
+  "version": "1.0.0-alpha.1",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@netless/slide": "^1.4.15",
-    "uuid": "^11.0.5",
-    "@netless/forge-room": "0.1.8",
-    "@netless/forge-whiteboard": "0.1.14"
+    "@netless/slide": "^1.4.21"
   },
   "peerDependencies": {
     "eventemitter3": "^5.0.1",
     "yjs": "^13.6.18",
-    "@netless/forge-room": "0.1.8"
+    "uuid": "^11.0.5",
+    "@netless/forge-room": "1.0.0-alpha.1",
+    "@netless/forge-whiteboard": "0.1.20-alpha.1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "scripts": {
     "dev": "onChange 'src/**/*' -- npm run build",
-    "build": "tsc --emitDeclarationOnly && node build.mjs"
+    "build": "pnpm lint && tsc --emitDeclarationOnly && node build.mjs",
+    "lint": "eslint src"
   }
 }

package/src/FooterView.ts

@@ -1,5 +1,5 @@
-import EventEmitter from "eventemitter3";
-import { Icons } from "./icons";
+import EventEmitter from 'eventemitter3';
+import { Icons } from './icons';
 
 interface FooterViewEvents {
     prevPage: () => void;
@@ -9,102 +9,156 @@ interface FooterViewEvents {
     sideBarToggle: () => void;
 }
 
-const EM_COLOR = "#8C8C8C";
+const EM_COLOR = '#8C8C8C';
 
 export class FooterView extends EventEmitter<FooterViewEvents> {
 
-    public readonly root: HTMLDivElement;
-
-    private prevStep: HTMLDivElement;
-    private nextStep: HTMLDivElement;
-
-    private prevPage: HTMLDivElement;
-    private nextPage: HTMLDivElement;
-
-    private sideBarToggle: HTMLDivElement;
-
-    public constructor() {
-        super();
-        this.root = document.createElement("div");
-        this.root.classList.add("forge-slide-footer");
-        this.root.style.height = "24px";
-        this.root.style.zIndex = "6";
-        this.root.style.display = "flex";
-        this.root.style.alignItems = "center";
-        this.root.style.justifyContent = "center";
-        this.root.style.backgroundColor = "#fff";
-
-        this.prevStep = this.createIcon(Icons.prevStep(EM_COLOR), () => {
-            this.emit("prevStep");
-        });
-
-        this.nextStep = this.createIcon(Icons.nextStep(EM_COLOR), () => {
-            this.emit("nextStep");
-        });
-
-        this.prevPage = this.createIcon(Icons.prevPage(EM_COLOR), () => {
-            this.emit("prevPage");
-        });
-
-        this.nextPage = this.createIcon(Icons.nextPage(EM_COLOR), () => {
-            this.emit("nextPage");
-        });
-
-        this.sideBarToggle = this.createIcon(Icons.sideBar(EM_COLOR), () => {
-            this.emit("sideBarToggle")
-        });
-
-        this.root.appendChild(this.sideBarToggle);
-        this.root.appendChild(this.createSpacer());
-        this.root.appendChild(this.prevPage);
-        this.root.appendChild(this.prevStep);
-        this.root.appendChild(this.nextStep);
-        this.root.appendChild(this.nextPage);
-        this.root.appendChild(this.createSpacer());
-    }
+  public readonly root: HTMLDivElement;
 
-    public prevPageState(enable: boolean): void {
-        if (enable) {
-            this.prevPage.style.pointerEvents = "all";
-            this.prevPage.style.opacity = "1";
-        } else {
-            this.prevPage.style.pointerEvents = "none";
-            this.prevPage.style.opacity = "0.5";
-        }
-    }
+  private nextStep: HTMLDivElement;
+  private pauseIcon: HTMLDivElement;
 
-    public nextPageState(enable: boolean): void {
-        if (enable) {
-            this.nextPage.style.pointerEvents = "all";
-            this.nextPage.style.opacity = "1";
-        } else {
-            this.nextPage.style.pointerEvents = "none";
-            this.nextPage.style.opacity = "0.5";
-        }
-    }
+  private prevPage: HTMLDivElement;
+  private nextPage: HTMLDivElement;
 
-    private createSpacer(): HTMLDivElement {
-        const div = document.createElement("div");
-        div.style.flex = "1 1 auto";
-        return div;
-    }
+  private sideBarToggle: HTMLDivElement;
+
+  private currentPageIndex: number = 0;
+  private totalPageIndex: number = 0;
+  private pageIndexContainer: HTMLDivElement;
+
+  private eventMap: Map<HTMLDivElement, (() => void)[]> = new Map();
+
+  public constructor() {
+    super();
+    this.root = document.createElement('div');
+    this.root.classList.add('forge-slide-footer');
+    this.root.style.padding = '0 16px 0 0';
+    this.root.style.height = '24px';
+    this.root.style.zIndex = '6';
+    this.root.style.display = 'flex';
+    this.root.style.alignItems = 'center';
+    this.root.style.justifyContent = 'center';
+    this.root.style.backgroundColor = '#fff';
+
+
+    this.prevPage = this.createIcon(Icons.prevPage(EM_COLOR), () => {
+      this.emit('prevPage');
+    });
+
+    this.nextStep = this.createIcon(Icons.nextStep(EM_COLOR), () => {
+      this.emit('nextStep');
+    });
+
+    this.pauseIcon = this.createIcon(Icons.pause(EM_COLOR), () => {
 
-    private createIcon(svgContent: string, action: () => void): HTMLDivElement {
-        const icon = document.createElement("div");
-        icon.style.width = "18px";
-        icon.style.height = "18px";
-        icon.style.borderRadius = "2px";
-        icon.style.margin = "6px";
-        icon.innerHTML = svgContent;
-        icon.addEventListener("click", () => {
-            action();
-        });
-        icon.addEventListener("mouseover", () => {
-            icon.style.backgroundColor = "#f0f0f0";
-        });
-        icon.addEventListener("mouseout", () => {
-            icon.style.backgroundColor = "transparent";
-        });
-        return icon;
+    });
+    this.pauseIcon.style.display = 'none';
+
+    this.nextPage = this.createIcon(Icons.nextPage(EM_COLOR), () => {
+      this.emit('nextPage');
+    });
+
+    this.sideBarToggle = this.createIcon(Icons.sideBar(EM_COLOR), () => {
+      this.emit('sideBarToggle');
+    });
+
+
+    this.pageIndexContainer = this.createPageNumber();
+
+    this.root.appendChild(this.sideBarToggle);
+    this.root.appendChild(this.createSpacer());
+    this.root.appendChild(this.prevPage);
+    this.root.appendChild(this.nextStep);
+    this.root.appendChild(this.pauseIcon);
+    this.root.appendChild(this.nextPage);
+    this.root.appendChild(this.createSpacer());
+    this.root.appendChild(this.pageIndexContainer);
+  }
+
+  public changeIconToPause(): void {
+    this.nextStep.style.display = 'none';
+    this.pauseIcon.style.display = 'block';
+  }
+
+  public changeIconToNextStep(): void {
+    this.nextStep.style.display = 'block';
+    this.pauseIcon.style.display = 'none';
+  }
+
+  public setCurrentPageIndex(index: number): void {
+    this.currentPageIndex = index;
+    this.pageIndexContainer.textContent = `${this.currentPageIndex} / ${this.totalPageIndex}`;
+  }
+
+  public setTotalPageIndex(count: number): void {
+    this.totalPageIndex = count;
+  }
+
+  public prevPageState(enable: boolean): void {
+    if (enable) {
+      this.prevPage.style.pointerEvents = 'all';
+      this.prevPage.style.opacity = '1';
+    } else {
+      this.prevPage.style.pointerEvents = 'none';
+      this.prevPage.style.opacity = '0.5';
     }
-}
+  }
+
+  private createSpacer(): HTMLDivElement {
+    const div = document.createElement('div');
+    div.style.flex = '1 1 auto';
+    return div;
+  }
+
+  private createPageNumber(): HTMLDivElement {
+    const div = document.createElement('div');
+    div.style.fontSize = '13px';
+    div.style.margin = '6px';
+    div.style.color = '#191919';
+    div.style.fontFamily = 'system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"';
+    div.style.fontWeight = '400';
+    div.style.lineHeight = '18px';
+    div.style.userSelect = 'none';
+    return div;
+  }
+
+  private createIcon(svgContent: string, action: () => void): HTMLDivElement {
+    const icon = document.createElement('div');
+    icon.style.width = '18px';
+    icon.style.height = '18px';
+    icon.style.borderRadius = '2px';
+    icon.style.margin = '6px';
+    icon.innerHTML = svgContent;
+    const onClickHandle = () => {
+      action();
+    };
+    const onMouseOverHandle = () => {
+      icon.style.backgroundColor = '#f0f0f0';
+    };
+    const onMouseOutHandle = () => {
+      icon.style.backgroundColor = 'transparent';
+    };
+    icon.addEventListener('click', onClickHandle);
+    icon.addEventListener('mouseover', onMouseOverHandle);
+    icon.addEventListener('mouseout', onMouseOutHandle);
+    this.eventMap.set(icon, [onClickHandle, onMouseOutHandle, onMouseOverHandle]);
+    return icon;
+  }
+
+  private clearHTMLEventListeners() {
+    this.eventMap.forEach((value, key) => {
+      if (key) {
+        const [clickEvent, mouseOutEvent, mouseOverEvent] = value;
+        key.removeEventListener('click', clickEvent);
+        key.removeEventListener('mouseover', mouseOverEvent);
+        key.removeEventListener('mouseout', mouseOutEvent);
+      }
+    });
+  }
+
+  dispose() {
+    this.removeAllListeners();
+    this.clearHTMLEventListeners();
+  }
+}

package/src/ForgeSlidePermession.ts

@@ -1,6 +1,4 @@
-import { type RoomUser, type UserManager } from "@netless/forge-room";
-import EventEmitter from "eventemitter3";
-import * as Y from "yjs";
+import { AbstractApplicationPermissions, ApplicationPermissionEvents } from '@netless/forge-room';
 
 export enum ForgeSlidePermissionFlag {
     /**
@@ -27,7 +25,7 @@ export enum ForgeSlidePermissionFlag {
         ForgeSlidePermissionFlag.clickAnim
 }
 
-export interface ForgeSlidePermissionEvents {
+export interface ForgeSlidePermissionEvents extends ApplicationPermissionEvents {
     /**
      * 当用户权限变更时触发
      * @param { string } userId 对应 userId
@@ -37,123 +35,18 @@ export interface ForgeSlidePermissionEvents {
     change: (userId: string, flags: ForgeSlidePermissionFlag[], value: number) => void;
 }
 
-export class ForgeSlidePermissions extends EventEmitter<ForgeSlidePermissionEvents> {
-
-    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 handleUserJoin = (user: RoomUser) => {
-        this.addObserve(user.id);
-    };
-
-    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);
-        }
-    }
-
-    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);
-                }
-            }
-        }
-    }
-
-    /**
+export class ForgeSlidePermissions extends AbstractApplicationPermissions<ForgeSlidePermissionFlag, ForgeSlidePermissionEvents> {
+  /**
      * 解析权限列表组合
      * @param {number} value - 权限数字值
      * @return {WhiteboardPermissionFlag[]} - 权限列表
      */
-    public resolveFlags(value: number): ForgeSlidePermissionFlag[] {
-        return [
-            ForgeSlidePermissionFlag.changePage,
-            ForgeSlidePermissionFlag.changeStep,
-            ForgeSlidePermissionFlag.clickAnim
-        ].filter(v => (v & value) !== 0)
-    }
-
-    /**
-     * 获取权限列表组合对应的数值
-     * @param { string } userId 不传表示获取自己
-     */
-    public getPermissionValue(userId?: string): number {
-        return this.requestUserMap(userId ?? this.userManager.selfId).get("permission") ?? 0;
-    }
-
-    /**
-     * 获取权限列表
-     * @param {string=} userId 可选, 不传表示获取自己
-     */
-    public getPermissionFlags(userId?: string): ForgeSlidePermissionFlag[] {
-        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: ForgeSlidePermissionFlag, 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: ForgeSlidePermissionFlag, 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: ForgeSlidePermissionFlag, 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 resolveFlags(value: number): ForgeSlidePermissionFlag[] {
+    return [
+      ForgeSlidePermissionFlag.changePage,
+      ForgeSlidePermissionFlag.changeStep,
+      ForgeSlidePermissionFlag.clickAnim,
+    ].filter(v => (v & value) !== 0);
+  }
+  
+}