@netless/forge-imagery-doc 0.1.0

package/src/ImageryDocApplication.ts

@@ -0,0 +1,225 @@
+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: {
+        src: string;
+        width: number;
+        height: number;
+    }[];
+    /**
+     * 从指定的白板 id 继承白板权限以及工具栏配置
+     */
+    inheritWhiteboardId?: string;
+    displayMode: "continuous" | "single";
+}
+
+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
+                    }
+                };
+            }
+        });
+    }
+
+    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);
+    }
+
+    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();
+        return Promise.resolve(undefined);
+    }
+}

package/src/ImageryDocPermissions.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 ImageryDocPermissionFlag {
+    /**
+     * 没有任何权限, 只能同步他人的操作
+     */
+    none = 0b0000000000000000,
+    /**
+     * 可以切换页面
+     */
+    switchPage = 0b0000000000000001,
+    /**
+     * 可以操作相机, 包括缩放, 平移
+     */
+    camera = 0b0000000000000010,
+    /**
+     * 可以操作侧边栏
+     */
+    sideBar = 0b0000000000000100,
+    /**
+     * 拥有所有权限
+     */
+    all = ImageryDocPermissionFlag.switchPage |
+        ImageryDocPermissionFlag.camera |
+        ImageryDocPermissionFlag.sideBar
+}
+
+export interface ImageryDocPermissionEvents {
+    /**
+     * 当用户权限变更时触发
+     * @param { string } userId 对应 userId
+     * @param { ImageryDocPermissionFlag[] } flags 当前权限列表
+     * @param { number } value 权限值
+     */
+    change: (userId: string, flags: ImageryDocPermissionFlag[], value: number) => void;
+}
+
+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 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): 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;
+    }
+
+    /**
+     * 获取权限列表
+     * @param {string=} userId 可选, 不传表示获取自己
+     */
+    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;
+    }
+
+    /**
+     * 添加权限
+     * @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);
+    }
+
+    /**
+     * 移除权限
+     * @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));
+    }
+}

package/src/InfinityScroll.ts

@@ -0,0 +1,55 @@
+import EventEmitter from "eventemitter3";
+
+interface InfinityScrollEvents {
+    scale: (value: number) => void;
+    translate: (x: number, y: number) => void;
+}
+
+export class InfinityScroll extends EventEmitter<InfinityScrollEvents> {
+
+    public readonly view: HTMLDivElement;
+    private lastDelta: {x: number, y: number} = { x: 0, y: 0 };
+    private lastTriggerTime: number = 0;
+
+    public constructor(view: HTMLDivElement) {
+        super();
+        this.view = view;
+        this.view.addEventListener("wheel", this.handleWheel, { passive: false, capture: true });
+    }
+
+    private handleWheel = (evt: WheelEvent) => {
+        evt.preventDefault();
+        evt.stopImmediatePropagation();
+        evt.stopPropagation();
+
+        if (Date.now() - this.lastTriggerTime < 32) {
+            this.lastDelta.y += evt.deltaY;
+            this.lastDelta.x += evt.deltaX;
+            return;
+        }
+        if (evt.ctrlKey) { // 双指捏合
+            // @ts-ignore
+            const wheelDelta = Math.sign((evt.wheelDelta || 100)) * 120;
+            const deltaY = evt.deltaY + this.lastDelta.y;
+            let scale: number;
+            if (deltaY > 0) {
+                scale = Math.max(1 - Math.abs(deltaY / wheelDelta), 0.00000001)
+            } else { // 放大
+                scale = 1 + Math.abs(deltaY / wheelDelta)
+            }
+            scale = Math.max(0.9, scale);
+            scale = Math.min(1.1, scale);
+            this.emit("scale", scale);
+        } else { // 拖动
+            const deltaX = this.lastDelta.x + evt.deltaX;
+            const deltaY = this.lastDelta.y + evt.deltaY;
+            this.emit("translate", deltaX, deltaY);
+        }
+        this.lastTriggerTime = Date.now();
+        this.lastDelta = { x: 0, y: 0 };
+    };
+
+    public dispose() {
+        this.view.removeEventListener("wheel", this.handleWheel);
+    }
+}

package/src/LazyImage.ts

@@ -0,0 +1,66 @@
+import { kvStore } from "@netless/forge-room";
+
+export class LazyImage {
+
+    public readonly view: HTMLDivElement;
+    public readonly width: number;
+    public readonly height: number;
+    private src: string;
+
+    public constructor(src: string, width: number, height: number) {
+        this.src = src;
+        this.width = width;
+        this.height = height;
+        this.view = document.createElement("div");
+        this.view.setAttribute("data-forge-src", src);
+        this.view.style.width = `${width}px`;
+        this.view.style.height = `${height}px`;
+        this.view.style.transformOrigin = "0 0";
+    }
+
+    public scale(scale: number) {
+        // this.localScale = scale;
+        this.view.style.width = `${this.width * scale}px`;
+        this.view.style.height = `${this.height * scale}px`;
+        // this.img.style.width = "100%";
+    }
+
+    public async getImgContent(): Promise<string> {
+        let base64Data: string | null = null;
+        try {
+            base64Data = await kvStore.getItem(this.src);
+        } catch {
+            // ignore
+        }
+        if (base64Data) {
+            return base64Data;
+        }
+
+        const response = await fetch(this.src);
+        const blob = await response.blob();
+        return new Promise<string>((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                kvStore.setItem(this.src, reader.result as string);
+                resolve(reader.result as string);
+            };
+            reader.onerror = () => {
+                reject(reader.error);
+            };
+            reader.readAsDataURL(blob);
+        });
+    }
+
+    public async prepare(): Promise<void> {
+        if (this.view.children.length > 0) {
+            return;
+        }
+        const base64Data: string = await this.getImgContent();
+        const img = document.createElement("img");
+        img.src = base64Data;
+        img.style.width = "100%";
+        if (this.view.children.length === 0) {
+            this.view.appendChild(img);
+        }
+    }
+}