@netless/forge-slide 0.1.1-alpha.0 → 0.1.1-alpha.10

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@netless/forge-slide",
-  "version": "0.1.1-alpha.0",
+  "version": "0.1.1-alpha.10",
   "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": "0.1.12-alpha.0",
+    "@netless/forge-whiteboard": "0.1.15"
   },
   "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

@@ -0,0 +1,132 @@
+import EventEmitter from 'eventemitter3';
+import { Icons } from './icons';
+
+interface FooterViewEvents {
+    prevPage: () => void;
+    nextPage: () => void;
+    prevStep: () => void;
+    nextStep: () => void;
+    sideBarToggle: () => void;
+}
+
+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;
+  
+  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.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 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';
+    }
+  }
+
+  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 createSpacer(): HTMLDivElement {
+    const div = document.createElement('div');
+    div.style.flex = '1 1 auto';
+    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);
+  }
+  
+}

package/src/SiderBarView.ts

@@ -1,91 +1,113 @@
-import {SlideApplicationOption} from "./SlideApplication";
-import EventEmitter from "eventemitter3";
+import { SlideApplicationOption } from './SlideApplication';
+import EventEmitter from 'eventemitter3';
 
 interface SideBarViewEvents {
     pageChange: (index: number) => void;
 }
 
 export class SideBarView extends EventEmitter<SideBarViewEvents> {
-    public readonly root: HTMLDivElement = document.createElement("div");
-    private itemList: HTMLDivElement[] = [];
+  public readonly root: HTMLDivElement = document.createElement('div');
+  private isShow: boolean = false;
+  private eventsMap: Map<HTMLDivElement, (() => void)[]> = new Map();
 
-    public constructor() {
-        super();
-        this.root.style.backgroundColor = '#eee';
-        this.root.className = "slide-sidebar";
-        this.root.style.width = "240px";
-        this.root.style.height = "100%";
-        this.root.style.position = "absolute";
-        this.root.style.left = "-240px";
-        this.root.style.top = "0";
-        this.root.style.zIndex = "5";
-        this.root.style.transition = "left 0.3s ease-in-out";
-        this.root.style.overflow = "auto";
-        this.root.style.border = "1px solid #ccc";
-        this.root.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.1)";
-        this.root.style.display = "flex";
-        this.root.style.flexDirection = "column";
-        this.root.style.justifyContent = "flex-start";
-        this.root.style.alignItems = "center";
+  public constructor() {
+    super();
+    this.root.style.backgroundColor = '#eee';
+    this.root.className = 'forge-slide-sidebar';
+    this.root.style.width = '240px';
+    this.root.style.height = '100%';
+    this.root.style.position = 'absolute';
+    this.root.style.left = '-240px';
+    this.root.style.top = '0';
+    this.root.style.zIndex = '5';
+    this.root.style.transition = 'left 0.3s ease-in-out';
+    this.root.style.overflow = 'auto';
+    this.root.style.display = 'flex';
+    this.root.style.flexDirection = 'column';
+    this.root.style.justifyContent = 'flex-start';
+    this.root.style.alignItems = 'center';
+  }
 
-    }
-
-    private onMouseOver = (itemContainer: HTMLDivElement) => {
-        itemContainer.style.borderColor = "#ccc";
-    }
-
-    private onMouseOut = (itemContainer: HTMLDivElement) => {
-        itemContainer.style.borderColor = "transparent";
-    }
+  get isShowSideBar(): boolean {
+    return this.isShow;
+  }
 
-    private onClickHandle = (index: number) => {
-        this.emit("pageChange", index);
-    }
+  public initialize(slideCount: number, option: SlideApplicationOption): void {
+    for (let i = 1; i <= slideCount; i++) {
+      const itemContainer = document.createElement('div');
+      itemContainer.style.width = '60%';
+      itemContainer.style.display = 'flex';
+      itemContainer.style.justifyContent = 'center';
+      itemContainer.style.alignItems = 'flex-start';
+      itemContainer.style.position = 'relative';
+      itemContainer.style.borderRadius = '4px';
+      itemContainer.style.transition = 'border-color .3s';
+      itemContainer.style.marginBottom = '10px';
+      
+      const onMouseOverHandle = () => {
+        itemContainer.style.borderColor = '#ccc';
+      };
+      const onMouseOutHandle = () => {
+        itemContainer.style.borderColor = 'transparent';
+      };
+      const onClickHandle = () => {
+        this.emit('pageChange', i);
+      };
 
-    public initialize(slideCount: number, option: SlideApplicationOption): void {
-        for (let i = 1; i <= slideCount; i++) {
-            const itemContainer = document.createElement("div");
-            this.itemList.push(itemContainer);
-            itemContainer.style.width = "60%";
-            itemContainer.style.display = "flex";
-            itemContainer.style.justifyContent = "center";
-            itemContainer.style.alignItems = "flex-start";
-            itemContainer.style.border = "7px solid transparent";
-            itemContainer.style.position = "relative";
-            itemContainer.style.borderRadius = "4px"
-            itemContainer.style.transition = "border-color .3s";
-            itemContainer.style.marginBottom = "10px";
+      itemContainer.addEventListener('click', onClickHandle);
+      itemContainer.addEventListener('mouseover', onMouseOverHandle);
+      itemContainer.addEventListener('mouseout', onMouseOutHandle);
+      this.eventsMap.set(itemContainer, [onClickHandle, onMouseOverHandle, onMouseOutHandle]);
 
-            itemContainer.addEventListener("mouseover", () => this.onMouseOver(itemContainer))
-            itemContainer.addEventListener("mouseout", () => this.onMouseOut(itemContainer))
-            itemContainer.addEventListener("click", () => this.onClickHandle(i))
+      const pageIndex = document.createElement('span');
+      pageIndex.textContent = `${i}`;
+      pageIndex.style.position = 'absolute';
+      pageIndex.style.top = '1px';
+      pageIndex.style.left = '-10px';
+      pageIndex.style.transform = 'translate(-100%)';
+      pageIndex.style.fontSize = '12px';
+      pageIndex.style.color = '#5f5f5f';
 
-            const pageIndex = document.createElement("span");
-            pageIndex.textContent = `${i}`;
-            pageIndex.style.position = "absolute";
-            pageIndex.style.top = "1px";
-            pageIndex.style.left = "-10px";
-            pageIndex.style.transform = "translate(-100%)";
-            pageIndex.style.fontSize = "12px";
-            pageIndex.style.color = "#5f5f5f";
+      const preview = document.createElement('img');
+      preview.style.width = '100%';
+      preview.style.display = 'inline-block';
+      preview.src = `${option.prefix}/${option.taskId}/preview/${i}.png`;
 
-            const preview = document.createElement("img");
-            preview.style.width = "100%";
-            preview.style.display = "inline-block";
-            preview.src = `${option.prefix}/${option.taskId}/preview/${i}.png`;
+      itemContainer.appendChild(preview);
+      itemContainer.appendChild(pageIndex);
 
-            itemContainer.appendChild(preview);
-            itemContainer.appendChild(pageIndex);
+      this.root.appendChild(itemContainer);
+    }
+  }
 
-            this.root.appendChild(itemContainer);
-        }
+  public hidden() {
+    if (!this.root) {
+      return;
     }
+    this.root.style.left = '-240px';
+    this.root.style.border = 'none';
+    this.root.style.boxShadow = 'none';
+    this.isShow = false;
+  }
 
-    public dispose() {
-        this.itemList.forEach(item => {
-            item.removeEventListener("mouseover", () => this.onMouseOver(item))
-            item.removeEventListener("mouseout", () => this.onMouseOut(item))
-        })
+  public show() {
+    if (!this.root) {
+      return;
     }
+    this.root.style.left = '0';
+    this.root.style.border = '1px solid #ccc';
+    this.root.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.1)';
+    this.isShow = true;
+  }
+
+  public dispose() {
+    this.removeAllListeners();
+    this.eventsMap.forEach((handlers, element) => {
+      const [clickEvent, mouseOverEvent, mouseOutEvent] = handlers;
+      element.removeEventListener('click', clickEvent);
+      element.removeEventListener('mouseover', mouseOverEvent);
+      element.removeEventListener('mouseout', mouseOutEvent);
+    });
+  }
 
 }

package/src/Slide.ts

@@ -1,6 +1,6 @@
-import EventEmitter from "eventemitter3";
-import { ApplicationInstanceType } from "@netless/forge-room";
-import { ForgeSlidePermissionFlag, ForgeSlidePermissions } from "./ForgeSlidePermession";
+import EventEmitter from 'eventemitter3';
+import { ApplicationInstanceType } from '@netless/forge-room';
+import { ForgeSlidePermissionFlag, ForgeSlidePermissions } from './ForgeSlidePermession';
 
 export interface SlideEvents  {
     /**
@@ -39,56 +39,57 @@ export interface SlideEvents  {
 
 export class SlideForge extends EventEmitter<SlideEvents> implements ApplicationInstanceType {
 
-    public readonly view!: HTMLDivElement;
-    public readonly permissions!: ForgeSlidePermissions;
-    public readonly footView!: HTMLDivElement;
-    /**
+  public readonly view!: HTMLDivElement;
+  public readonly permissions!: ForgeSlidePermissions;
+  public readonly footView!: HTMLDivElement;
+  public readonly sideBarView!: HTMLDivElement;
+  /**
      * 当前页面索引, 从 0 开始
      */
-    public readonly pageIndex!: number;
-    /**
+  public readonly pageIndex!: number;
+  /**
      * 总页数
      */
-    public readonly pageCount!: number;
-    /**
+  public readonly pageCount!: number;
+  /**
      * 切换到参数指定页面, index 从 0 开始
      * @param {number} index 页面索引
      */
-    public goto!: (index: number) => void
-    /**
+  public goto!: (index: number) => void;
+  /**
      * 下一步, 如果已经是本页的最后一步, 则切换到下一页
      */
-    public nextStep!: () => void
-    /**
+  public nextStep!: () => void;
+  /**
      * 上一步, 如果已经是本页的第一步, 则切换到上一页
      */
-    public prevStep!: () => void
-    /**
+  public prevStep!: () => void;
+  /**
      * 下一页, 如果是最后一页, 则不执行任何操作
      */
-    public nextPage!: () => void
-    /**
+  public nextPage!: () => void;
+  /**
      * 上一页, 如果是第一页, 则不执行任何操作
      */
-    public prevPage!: () => void
-    /**
+  public prevPage!: () => void;
+  /**
      * 切换侧栏显示状态
      */
-    public sideBarToggle!: () => void
+  public sideBarToggle!: () => void;
 
-    /**
+  /**
      * 获取预览图图片内容, base64 编码
      * @param {number} index 页面索引
      */
-    public imgContent!: (index: number) => Promise<string>;
-    /**
+  public imgContent!: (index: number) => Promise<string>;
+  /**
      * 获取预览图图片链接
      * @param {number} index 页面索引
      */
-    public imgUrl!: (index: number) => Promise<string>;
-    /**
+  public imgUrl!: (index: number) => Promise<string>;
+  /**
      * 获取预览图图片尺寸
      * @param {number} index 页面索引
      */
-    public imgSize!: (index: number) => Promise<{width: number, height: number}>;
+  public imgSize!: (index: number) => Promise<{width: number, height: number}>;
 }