@netless/forge-slide 0.1.0

package/dist/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function deepEqual(a: any, b: any, excludeKeys?: string[]): boolean;
+export declare function delay(time: number): Promise<void>;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +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"}

package/package.json

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

package/src/FoorerView.ts

@@ -0,0 +1,109 @@
+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;
+
+    public constructor() {
+        super();
+        this.root = document.createElement("div");
+        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;
+        icon.addEventListener("click", () => {
+            action();
+        });
+        icon.addEventListener("mouseover", () => {
+            icon.style.backgroundColor = "#f0f0f0";
+        });
+        icon.addEventListener("mouseout", () => {
+            icon.style.backgroundColor = "transparent";
+        });
+        return icon;
+    }
+}

package/src/ForgeSlidePermession.ts

@@ -0,0 +1,159 @@
+import { type RoomUser, type UserManager } from "@netless/forge-room";
+import EventEmitter from "eventemitter3";
+import * as Y from "yjs";
+
+export enum ForgeSlidePermissionFlag {
+    /**
+     * 没有任何权限, 只能同步他人的操作
+     */
+    none = 0b0000000000000000,
+    /**
+     * 可以操作上一步下一步动画
+     */
+    changeStep = 0b0000000000000001,
+    /**
+     * 可以切面页码
+     */
+    changePage = 0b0000000000000010,
+    /**
+     * 可以触发点击动画
+     */
+    clickAnim = 0b0000000000000100,
+    /**
+     * 拥有所有权限
+     */
+    all = ForgeSlidePermissionFlag.changePage |
+        ForgeSlidePermissionFlag.changeStep |
+        ForgeSlidePermissionFlag.clickAnim
+}
+
+export interface ForgeSlidePermissionEvents {
+    /**
+     * 当用户权限变更时触发
+     * @param { string } userId 对应 userId
+     * @param { ForgeSlidePermissionFlag[] } flags 当前权限列表
+     * @param { number } value 权限值
+     */
+    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);
+                }
+            }
+        }
+    }
+
+    /**
+     * 解析权限列表组合
+     * @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));
+    }
+}

package/src/SiderBarView.ts

@@ -0,0 +1,91 @@
+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 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";
+
+    }
+
+    private onMouseOver = (itemContainer: HTMLDivElement) => {
+        itemContainer.style.borderColor = "#ccc";
+    }
+
+    private onMouseOut = (itemContainer: HTMLDivElement) => {
+        itemContainer.style.borderColor = "transparent";
+    }
+
+    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");
+            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("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 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);
+
+            this.root.appendChild(itemContainer);
+        }
+    }
+
+    public dispose() {
+        this.itemList.forEach(item => {
+            item.removeEventListener("mouseover", () => this.onMouseOver(item))
+            item.removeEventListener("mouseout", () => this.onMouseOut(item))
+        })
+    }
+
+}

package/src/Slide.ts

@@ -0,0 +1,39 @@
+import EventEmitter from "eventemitter3";
+import { ApplicationInstanceType } from "@netless/forge-room";
+import { ForgeSlidePermissionFlag, ForgeSlidePermissions } from "./ForgeSlidePermession";
+
+export interface SlideEvents  {
+    /**
+     * 当用户权限变更时触发
+     * @param { string } userId 对应 userId
+     * @param { ForgeSlidePermissionFlag[] } flags 当前权限列表
+     * @param { number } value 权限值
+     */
+    permissionChange: (userId: string, flags: ForgeSlidePermissionFlag[], value: number) => void;
+
+    /**
+     * 开始渲染页面时触发
+     * @param {number} pageIndex 页面索引
+     */
+    renderStart: (pageIndex: number) => void;
+
+    /**
+     * 页面渲染完成时触发
+     * @param {number} pageIndex 页面索引
+     */
+    renderEnd: (pageIndex: number) => void;
+}
+
+
+export class SlideForge extends EventEmitter<SlideEvents> implements ApplicationInstanceType {
+
+    public readonly view!: HTMLDivElement;
+    public readonly permissions!: ForgeSlidePermissions;
+    public readonly pageIndex!: number;
+
+    /**
+     * 切换到参数指定页面, index 从 0 开始
+     * @param {number} index 页面索引
+     */
+    public goto!: (index: number) => Promise<void>
+}