@netless/forge-slide 0.1.0

package/src/SlideApplication.ts

@@ -0,0 +1,313 @@
+import {Whiteboard, WhiteboardApplication, WhiteboardPermissionFlag} from "@netless/forge-whiteboard";
+import {ISlideConfig, Slide, SLIDE_EVENTS} from "@netless/slide";
+import {AbstractApplication} from "@netless/forge-room";
+import {SlideForge} from "./Slide";
+import {ForgeSlidePermissionFlag, ForgeSlidePermissions} from "./ForgeSlidePermession";
+import {FooterView} from "./FoorerView";
+import * as Y from "yjs";
+import {SideBarView} from "./SiderBarView";
+import {deepEqual, delay} from "./utils";
+
+export interface SlideApplicationOption {
+    prefix: string;
+    taskId: string;
+    options?: ISlideConfig;
+    /**
+     * 从指定的白板 id 继承白板权限以及工具栏配置
+     */
+    inheritWhiteboardId?: string;
+}
+
+export const Slide_APP_NAME = "forge_slide";
+
+export class SlideApplication extends AbstractApplication<SlideApplicationOption, SlideForge> {
+
+    static applicationName = Slide_APP_NAME;
+
+    public readonly name: string = Slide_APP_NAME;
+
+    private whiteboardApp!: WhiteboardApplication;
+    private whiteboard!: Whiteboard;
+    private rootView: HTMLDivElement = document.createElement("div");
+    private contentContainer: HTMLDivElement = document.createElement("div");
+    private whiteboardContainer: HTMLDivElement = document.createElement("div");
+    private slideContainer: HTMLDivElement = document.createElement("div");
+    private permissions!: ForgeSlidePermissions;
+    private footer: FooterView;
+    private sideBar: SideBarView;
+    private slide!: Slide;
+    private currentSlideIndex: number = 0;
+
+    constructor() {
+        super();
+        this.rootView.setAttribute("data-forge-app", Slide_APP_NAME);
+        this.rootView.style.background = "#f0f0f0f0";
+        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.slideContainer.style.width = "100%";
+        this.slideContainer.style.height = "100%";
+        // this.slideContainer.style.height = "calc(100% - 24px)";
+
+        this.footer = new FooterView();
+        this.sideBar = new SideBarView();
+        this.sideBar.on("pageChange", index => {
+            this.slide.renderSlide(index);
+        });
+        this.footer.on("prevStep", () => {
+            if (!this.permissions.hasPermission(ForgeSlidePermissionFlag.changeStep)) {
+                return;
+            }
+            if (this.slide.mainSeqStep > 0 || this.slide.mainSeqState !== "idle") {
+                this.slide.prevStep();
+            } else if (this.currentSlideIndex > 1){
+                if (!this.permissions.hasPermission(ForgeSlidePermissionFlag.changePage)) {
+                    return;
+                }
+                this.slide.renderSlide(this.currentSlideIndex - 1)
+            }
+        });
+        this.footer.on("nextStep", () => {
+            if (!this.permissions.hasPermission(ForgeSlidePermissionFlag.changeStep)) {
+                return;
+            }
+            if (this.slide.mainSeqStep < this.slide.mainSeqLength) {
+                this.slide.nextStep()
+            } else {
+                if (!this.permissions.hasPermission(ForgeSlidePermissionFlag.changePage)) {
+                    return;
+                }
+                this.slide.renderSlide(this.currentSlideIndex + 1)
+            }
+        });
+        this.footer.on("prevPage", () => {
+            if (!this.permissions.hasPermission(ForgeSlidePermissionFlag.changePage)) {
+                return;
+            }
+            if (this.currentSlideIndex > 1) {
+                this.slide.renderSlide(this.currentSlideIndex - 1);
+            }
+        });
+        this.footer.on("nextPage", () => {
+            if (!this.permissions.hasPermission(ForgeSlidePermissionFlag.changePage)) {
+                return;
+            }
+            if (this.currentSlideIndex < this.slide.slideCount) {
+                this.slide.renderSlide(this.currentSlideIndex + 1);
+            }
+        });
+
+        this.footer.on("sideBarToggle", () => {
+            if (!this.permissions.hasPermission(ForgeSlidePermissionFlag.changePage)) {
+                return;
+            }
+            if (this.sideBar.root.style.left === "0px") {
+                this.sideBar.root.style.left = "-240px";
+            } else {
+                this.sideBar.root.style.left = "0px";
+            }
+        })
+
+        this.rootView.appendChild(this.contentContainer);
+
+        this.emitter.on("renderStart", pageIndex => {
+            this.footer.prevPageState(pageIndex !== 0);
+        });
+
+        const that = this;
+        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.currentSlideIndex;
+            }
+        });
+        Object.defineProperty(this.emitter, "goto", {
+            get(): any {
+                return (index: number) => {
+                    if (index > 0 && index < this.slide.slideCount) {
+                        this.slide.renderSlide(index);
+                    }
+                };
+            }
+        });
+    }
+
+    emitter: SlideForge = new SlideForge();
+
+    private applySlideState = async (slideState: any, lastDispatch: any) => {
+        // console.log('%cstate', 'color: blue; font-size: 20px;');
+        // console.log(slideStateFromServer);
+        // console.log('%cevent', 'color: blue; font-size: 20px;');
+        // console.log(dispatchFromServer);
+        if (this.slide.slideState.currentSlideIndex < 0) {
+            this.slide.emit(SLIDE_EVENTS.syncReceive, lastDispatch);
+            return;
+        }
+        console.log('%cisEqual', 'color: blue; font-size: 20px;', deepEqual(this.slide.slideState, slideState));
+        if (this.slide.slideState.currentSlideIndex > 0 && deepEqual(this.slide.slideState, slideState)) {
+            this.slide.emit(SLIDE_EVENTS.syncReceive, lastDispatch);
+        } else {
+            await this.slide.setSlideState(slideState);
+            await delay(200);
+            this.slide.emit(SLIDE_EVENTS.syncReceive, lastDispatch);
+        }
+    }
+
+    private onSlideEventHandler = async (event: Y.YMapEvent<any>) => {
+        for (const [key, value] of event.changes.keys.entries()) {
+            if (key === "syncSlide") {
+                if (value.action === "add" || value.action === "update") {
+                    const { slideState: slideStateFromServer, dispatch: dispatchFromServer } = this.getMap(this.name).get("syncSlide");
+                    this.applySlideState(slideStateFromServer, dispatchFromServer);
+                }
+            }
+        }
+    }
+
+    public async initialize(option: SlideApplicationOption): Promise<void> {
+        const whiteboardApp = new WhiteboardApplication();
+        // @ts-ignore
+        whiteboardApp.roomDoc = this.roomDoc;
+        // @ts-ignore
+        whiteboardApp.appId = `${option.taskId}_wb`;
+        // @ts-ignore
+        whiteboardApp.userId = this.userId;
+        // @ts-ignore
+        whiteboardApp.userManager = this.userManager;
+        // @ts-ignore
+        whiteboardApp.applicationManager = this.applicationManager;
+
+        const json = await fetch(`${option.prefix}/${option.taskId}/jsonOutput/slide-1.json`).then(res => res.json())
+
+        await whiteboardApp.initialize({
+            width: json.width,
+            height: json.height,
+        });
+        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.view.style.zIndex = "4";
+        this.whiteboard.permissions.addPermission(WhiteboardPermissionFlag.all);
+        this.whiteboard.setCanvasBackgroundColor("#f0f0f000");
+        this.whiteboardContainer.style.position = "relative";
+        this.whiteboardContainer.style.flex = "0 0 auto";
+        this.whiteboardContainer.style.height = "calc(100% - 24px)";
+        this.whiteboardContainer.appendChild(this.whiteboard.view);
+        this.whiteboardContainer.appendChild(this.slideContainer);
+
+        this.contentContainer.appendChild(this.whiteboardContainer);
+        this.contentContainer.appendChild(this.footer.root);
+        this.contentContainer.appendChild(this.sideBar.root);
+
+        if (option.inheritWhiteboardId) {
+            whiteboardApp.linkToWhiteboard(option.inheritWhiteboardId);
+            console.log("inheritWhiteboardId", option.inheritWhiteboardId);
+        }
+
+        this.whiteboard.setViewModeToMain();
+
+
+        this.slideContainer.setAttribute("builder", "slide-builder")
+        this.slide = new Slide({
+            ...option.options,
+            interactive: true,
+            anchor: this.slideContainer,
+            mode: "interactive",
+            // logger: {
+            //     info: console.log,
+            //     warn: console.warn,
+            //     error: console.error,
+            // },
+        })
+        this.slide.setResource(option.taskId, option.prefix);
+        this.sideBar.initialize(json.slideCount, option);
+
+        this.slide.on("syncDispatch", event => {
+            this.getMap(this.name).set("syncSlide", {
+                slideState: this.slide.slideState,
+                dispatch: event,
+            })
+        })
+
+        this.slide.on("renderStart", (slideIndex) => {
+            this.whiteboardApp.emitter.view.style.opacity = "0";
+            this.whiteboardApp.emitter.addPage(`${slideIndex}`);
+            this.whiteboardApp.emitter.gotoPage(`${slideIndex}`);
+        })
+
+        this.slide.on("renderEnd", (slideIndex) => {
+            this.currentSlideIndex = slideIndex;
+            this.whiteboardApp.emitter.view.style.opacity = "1";
+        });
+
+        this.slide.on("stateChange", (state) => {
+            this.getMap(this.name).set("slideState", state)
+        })
+
+        this.getMap(this.name).observe(this.onSlideEventHandler);
+
+        (window as any).slide = this.slide;
+        (window as any).slideWhiteboard = this.whiteboardApp;
+
+        const syncSlide = this.getMap(this.name).get("slideState");
+        if (syncSlide && syncSlide.taskId === option.taskId) {
+            await this.slide.setSlideState(syncSlide)
+        } else {
+            this.slide.renderSlide(1);
+        }
+
+        this.permissions = new ForgeSlidePermissions(this.userManager, (userId: string) => {
+            return this.userMap(userId);
+        });
+        this.permissions.on("change", (userId, flags, value) => {
+            console.log(userId, flags, value);
+            if (this.userId === userId) {
+                if (flags.includes(ForgeSlidePermissionFlag.clickAnim)) {
+                    this.slideContainer.style.pointerEvents = "auto";
+                } else {
+                    this.slideContainer.style.pointerEvents = "none";
+                }
+            }
+        });
+        this.permissions.addPermission(ForgeSlidePermissionFlag.all);
+        this.whiteboardApp.disableViewModel();
+        // @ts-ignore
+        window.__forge_slide = this;
+        // @ts-ignore
+        window.slidePermissions = this.permissions;
+        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.slide.destroy();
+        this.sideBar.dispose();
+        this.getMap(this.name).unobserve(this.onSlideEventHandler)
+        return Promise.resolve(undefined);
+    }
+
+}

package/src/icons.ts

@@ -0,0 +1,26 @@
+
+const prevPage = (color: string) => `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none">
+    <rect opacity="0.01" width="24" height="24" fill="white"/>
+    <path d="M15 4L15.4419 3.55806C15.3247 3.44085 15.1658 3.375 15 3.375V4ZM19 8H19.625C19.625 7.83424 19.5592 7.67527 19.4419 7.55806L19 8ZM6 4.625H15V3.375H6V4.625ZM14.5581 4.44194L18.5581 8.44194L19.4419 7.55806L15.4419 3.55806L14.5581 4.44194ZM18.375 8V13H19.625V8H18.375ZM18.375 13V19H19.625V13H18.375ZM18 19.375H12V20.625H18V19.375ZM5.625 13V5H4.375V13H5.625ZM18.375 19C18.375 19.2071 18.2071 19.375 18 19.375V20.625C18.8975 20.625 19.625 19.8975 19.625 19H18.375ZM6 3.375C5.10254 3.375 4.375 4.10254 4.375 5H5.625C5.625 4.79289 5.79289 4.625 6 4.625V3.375Z" fill="${color}" />
+    <path d="M14.375 4V7H15.625V4H14.375ZM16 8.625H19V7.375H16V8.625ZM14.375 7C14.375 7.89746 15.1025 8.625 16 8.625V7.375C15.7929 7.375 15.625 7.20711 15.625 7H14.375Z" fill="${color}"/>
+    <path d="M13 16H5" stroke="${color}" stroke-width="1.25" stroke-linejoin="round"/>
+    <path d="M9 12L7 14L5 16L7 18L9 20" stroke="${color}" stroke-width="1.25" stroke-linejoin="round"/>
+</svg>`
+
+const nextPage = (color: string) => `
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none">
+        <rect opacity="0.01" width="24" height="24" fill="white"/>
+        <path d="M15 4L15.4419 3.55806C15.3247 3.44085 15.1658 3.375 15 3.375V4ZM19 8H19.625C19.625 7.83424 19.5592 7.67527 19.4419 7.55806L19 8ZM6 4.625H15V3.375H6V4.625ZM14.5581 4.44194L18.5581 8.44194L19.4419 7.55806L15.4419 3.55806L14.5581 4.44194ZM5.625 19V5H4.375V19H5.625ZM12 19.375H6V20.625H12V19.375ZM18.375 8V13H19.625V8H18.375ZM4.375 19C4.375 19.8975 5.10254 20.625 6 20.625V19.375C5.79289 19.375 5.625 19.2071 5.625 19H4.375ZM6 3.375C5.10254 3.375 4.375 4.10254 4.375 5H5.625C5.625 4.79289 5.79289 4.625 6 4.625V3.375Z" fill="${color}"/>
+        <path d="M14.375 4V7H15.625V4H14.375ZM16 8.625H19V7.375H16V8.625ZM14.375 7C14.375 7.89746 15.1025 8.625 16 8.625V7.375C15.7929 7.375 15.625 7.20711 15.625 7H14.375Z" fill="${color}"/>
+        <path d="M11 16H19" stroke="${color}" stroke-width="1.25" stroke-linejoin="round"/>
+        <path d="M15 12L17 14L19 16L17 18L15 20" stroke="${color}" stroke-width="1.25" stroke-linejoin="round"/>
+    </svg>`
+const prevStep = (color: string) => `<svg style="width:100%;height:100%;padding:2px;box-sizing:border-box;" viewBox="0 0 12.3926 16.9629"><g><rect height="16.9629" opacity="0" width="12.3926" x="0" y="0"/><path d="M0 8.47656C0 8.7207 0.0878906 8.93555 0.273438 9.12109L8.01758 16.6895C8.18359 16.8652 8.39844 16.9531 8.65234 16.9531C9.16016 16.9531 9.55078 16.5723 9.55078 16.0645C9.55078 15.8105 9.44336 15.5957 9.28711 15.4297L2.17773 8.47656L9.28711 1.52344C9.44336 1.35742 9.55078 1.13281 9.55078 0.888672C9.55078 0.380859 9.16016 0 8.65234 0C8.39844 0 8.18359 0.0878906 8.01758 0.253906L0.273438 7.83203C0.0878906 8.00781 0 8.23242 0 8.47656Z" fill="${color}"/></g></svg>`;
+const nextStep = (color: string) => `<svg style="width:100%;height:100%;padding:2px;box-sizing:border-box;" viewBox="0 0 11.6895 16.9629"><g><rect height="16.9629" opacity="0" width="11.6895" x="0" y="0"/><path d="M11.6895 8.47656C11.6895 8.23242 11.5918 8.00781 11.4062 7.83203L3.67188 0.253906C3.49609 0.0878906 3.28125 0 3.02734 0C2.5293 0 2.13867 0.380859 2.13867 0.888672C2.13867 1.13281 2.23633 1.35742 2.39258 1.52344L9.50195 8.47656L2.39258 15.4297C2.23633 15.5957 2.13867 15.8105 2.13867 16.0645C2.13867 16.5723 2.5293 16.9531 3.02734 16.9531C3.28125 16.9531 3.49609 16.8652 3.67188 16.6895L11.4062 9.12109C11.5918 8.93555 11.6895 8.7207 11.6895 8.47656Z" fill="${color}"/></g></svg>`;
+const sideBar = (color: string) => `<svg style="width:100%;height:100%;padding:2px;box-sizing:border-box;" viewBox="0 0 23.3887 17.998"><g><rect height="17.998" opacity="0" width="23.3887" x="0" y="0"/><path d="M3.06641 17.998L19.9609 17.998C22.0117 17.998 23.0273 16.9824 23.0273 14.9707L23.0273 3.04688C23.0273 1.03516 22.0117 0.0195312 19.9609 0.0195312L3.06641 0.0195312C1.02539 0.0195312 0 1.02539 0 3.04688L0 14.9707C0 16.9922 1.02539 17.998 3.06641 17.998ZM3.08594 16.4258C2.10938 16.4258 1.57227 15.9082 1.57227 14.8926L1.57227 3.125C1.57227 2.10938 2.10938 1.5918 3.08594 1.5918L19.9414 1.5918C20.9082 1.5918 21.4551 2.10938 21.4551 3.125L21.4551 14.8926C21.4551 15.9082 20.9082 16.4258 19.9414 16.4258ZM7.44141 16.7285L8.97461 16.7285L8.97461 1.29883L7.44141 1.29883ZM5.56641 5.21484C5.85938 5.21484 6.12305 4.95117 6.12305 4.66797C6.12305 4.375 5.85938 4.12109 5.56641 4.12109L3.4668 4.12109C3.17383 4.12109 2.91992 4.375 2.91992 4.66797C2.91992 4.95117 3.17383 5.21484 3.4668 5.21484ZM5.56641 7.74414C5.85938 7.74414 6.12305 7.48047 6.12305 7.1875C6.12305 6.89453 5.85938 6.65039 5.56641 6.65039L3.4668 6.65039C3.17383 6.65039 2.91992 6.89453 2.91992 7.1875C2.91992 7.48047 3.17383 7.74414 3.4668 7.74414ZM5.56641 10.2637C5.85938 10.2637 6.12305 10.0195 6.12305 9.72656C6.12305 9.43359 5.85938 9.17969 5.56641 9.17969L3.4668 9.17969C3.17383 9.17969 2.91992 9.43359 2.91992 9.72656C2.91992 10.0195 3.17383 10.2637 3.4668 10.2637Z" fill="${color}"/></g></svg>`;
+
+export const Icons = {
+    prevPage, nextPage,
+    prevStep, nextStep,
+    sideBar,
+};

package/src/index.ts

@@ -0,0 +1,5 @@
+export { SlideApplication } from "./SlideApplication";
+export { SlideForge } from "./Slide";
+export { ForgeSlidePermissionFlag } from "./ForgeSlidePermession";
+
+export type { SlideApplicationOption } from "./SlideApplication";

package/src/utils.ts

@@ -0,0 +1,62 @@
+export function deepEqual(a: any, b: any, excludeKeys: string[] = ["time"]) {
+    // 严格相等检查
+    if (a === b) return true;
+
+    // 非对象类型检查
+    if (typeof a !== 'object' || a === null || typeof b !== 'object' || b === null) return false;
+
+    // 构造函数检查
+    if (a.constructor !== b.constructor) return false;
+
+    // 特殊对象处理
+    if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
+    if (a instanceof RegExp && b instanceof RegExp) return a.toString() === b.toString();
+
+    // 获取并过滤属性键（核心修改点）
+    const filterKeys = (obj: any) =>
+        Reflect.ownKeys(obj).filter(k => typeof k === "string" ? !excludeKeys.includes(k) : false);
+
+    const keysA = filterKeys(a);
+    const keysB = filterKeys(b);
+
+    // 属性数量检查
+    if (keysA.length !== keysB.length) return false;
+
+    // 分类型处理属性名
+    const processKeys = (keys: (string | symbol)[]) => ({
+        strings: keys.filter(k => typeof k === 'string').sort(),
+        symbols: keys.filter(k => typeof k === 'symbol')
+    });
+
+    const { strings: strA, symbols: symA } = processKeys(keysA);
+    const { strings: strB, symbols: symB } = processKeys(keysB);
+
+    // 字符串键顺序敏感比较
+    if (!arrayEqual(strA, strB)) return false;
+
+    // Symbol键存在性检查
+    if (symA.length !== symB.length) return false;
+    const symSet = new Set(symB);
+    if (!symA.every(k => symSet.has(k))) return false;
+
+    // 合并所有需比较的键
+    const allKeys = [...strA, ...symA];
+
+    // 递归比较属性值（传递排除键）
+    for (const key of allKeys) {
+        if (!deepEqual(a[key], b[key], excludeKeys)) return false;
+    }
+
+    return true;
+}
+
+// 辅助函数：比较数组是否严格相等
+function arrayEqual(arr1: any[], arr2: any[]) {
+    if (arr1.length !== arr2.length) return false;
+    for (let i = 0; i < arr1.length; i++) {
+        if (arr1[i] !== arr2[i]) return false;
+    }
+    return true;
+}
+
+export async function delay(time: number): Promise<void> { return new Promise(resolve => setTimeout(resolve, time)); }

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json", // 继承根配置
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"],
+}