@netless/forge-imagery-doc 0.1.1 → 0.1.3

package/src/ContinuousContainer.ts

@@ -1,157 +1,157 @@
-import {LazyImage} from "./LazyImage";
-import {InfinityScroll} from "./InfinityScroll";
-import * as Y from "yjs";
-import {WhiteboardApplication} from "@netless/forge-whiteboard";
-import type {ImageryDoc} from "./ImageryDoc";
-import {Container, ContainerKeys} from "./Container";
+import { LazyImage } from './LazyImage';
+import { InfinityScroll } from './InfinityScroll';
+import * as Y from 'yjs';
+import { WhiteboardApplication } from '@netless/forge-whiteboard';
+import type { ImageryDoc } from './ImageryDoc';
+import { Container, ContainerKeys } from './Container';
 
 export class ContinuousContainer implements Container {
-    public readonly view: HTMLDivElement;
-    private parentView: HTMLDivElement;
-    private resizeObserver!: ResizeObserver;
-    private images: LazyImage[] = [];
-    private scroll: InfinityScroll;
-    private map: Y.Map<any>;
-    private whiteboardApp: WhiteboardApplication;
-    private imageDoc: ImageryDoc;
-    private totalHeight: number = 0;
-    private localScale: number = 1;
+  public readonly view: HTMLDivElement;
+  private parentView: HTMLDivElement;
+  private resizeObserver!: ResizeObserver;
+  private images: LazyImage[] = [];
+  private scroll: InfinityScroll;
+  private map: Y.Map<any>;
+  private whiteboardApp: WhiteboardApplication;
+  private imageDoc: ImageryDoc;
+  private totalHeight: number = 0;
+  private localScale: number = 1;
 
-    private get translateY(): number {
-        return this.map.get(ContainerKeys.translateY);
-    }
-    private set translateY(value: number) {
-        this.map.set(ContainerKeys.translateY, value);
-    }
+  private get translateY(): number {
+    return this.map.get(ContainerKeys.translateY);
+  }
+  private set translateY(value: number) {
+    this.map.set(ContainerKeys.translateY, value);
+  }
 
-    public get pageIndex(): number {
-        const step = 1 / this.images.length;
-        for (let i = 0; i < this.images.length; i++) {
-            if (this.translateY < step * i && Math.abs(this.translateY - step * i) >= 0.0001) {
-                return i - 1;
-            }
-        }
-        return this.images.length - 1;
+  public get pageIndex(): number {
+    const step = 1 / this.images.length;
+    for (let i = 0; i < this.images.length; i++) {
+      if (this.translateY < step * i && Math.abs(this.translateY - step * i) >= 0.0001) {
+        return i - 1;
+      }
     }
+    return this.images.length - 1;
+  }
 
-    public constructor(
-        map: Y.Map<any>,
-        whiteboardApp: WhiteboardApplication,
-        parentView: HTMLDivElement,
-        imageDoc: ImageryDoc,
-    ) {
-        this.imageDoc = imageDoc;
-        this.parentView = parentView;
-        this.map = map;
-        this.scroll = new InfinityScroll(this.parentView);
-        this.whiteboardApp = whiteboardApp;
-        this.view = document.createElement("div");
-        this.view.style.width = "100%";
-        this.view.style.height = "100%";
-        this.view.style.position = "absolute";
-        this.view.style.top = "0";
-        this.view.style.left = "0";
-        this.view.style.transformOrigin = "0, 0";
-        this.view.setAttribute("data-imagery-container", "continuous");
+  public constructor(
+    map: Y.Map<any>,
+    whiteboardApp: WhiteboardApplication,
+    parentView: HTMLDivElement,
+    imageDoc: ImageryDoc,
+  ) {
+    this.imageDoc = imageDoc;
+    this.parentView = parentView;
+    this.map = map;
+    this.scroll = new InfinityScroll(this.parentView);
+    this.whiteboardApp = whiteboardApp;
+    this.view = document.createElement('div');
+    this.view.style.width = '100%';
+    this.view.style.height = '100%';
+    this.view.style.position = 'absolute';
+    this.view.style.top = '0';
+    this.view.style.left = '0';
+    this.view.style.transformOrigin = '0, 0';
+    this.view.setAttribute('data-imagery-container', 'continuous');
 
-        this.resizeObserver = new ResizeObserver(this.handleResize);
-        this.resizeObserver.observe(this.view);
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver.observe(this.view);
 
-        this.whiteboardApp.updateInternalResizeObserverStatus(false);
-        this.map.observe(this.handleMapChange);
-        if (!this.map.has(ContainerKeys.scale)) {
-            this.map.set(ContainerKeys.scale, 1);
-        }
-        if (!this.map.has(ContainerKeys.translateX)) {
-            this.map.set(ContainerKeys.translateX, 0);
-        }
-        if (!this.map.has(ContainerKeys.translateY)) {
-            this.map.set(ContainerKeys.translateY, 0);
-        }
-        this.scroll.on("translate", (dx, dy) => {
-            this.handleTranslate(dx, dy);
-        });
+    this.whiteboardApp.updateInternalResizeObserverStatus(false);
+    this.map.observe(this.handleMapChange);
+    if (!this.map.has(ContainerKeys.scale)) {
+      this.map.set(ContainerKeys.scale, 1);
     }
-
-    public init() {
-        this.updateSyncedTransform();
-        this.totalHeight = this.images.reduce((prev, curr) => prev + curr.height, 0);
+    if (!this.map.has(ContainerKeys.translateX)) {
+      this.map.set(ContainerKeys.translateX, 0);
     }
-
-    private handleTranslate(dx: number, dy: number) {
-        const dyNormalized = dy / this.totalHeight;
-        let nextTy = this.translateY + dyNormalized;
-        nextTy = Math.max(0, nextTy);
-        nextTy = Math.min(1, nextTy);
-        this.translateY = nextTy;
+    if (!this.map.has(ContainerKeys.translateY)) {
+      this.map.set(ContainerKeys.translateY, 0);
     }
+    this.scroll.on('translate', (dx, dy) => {
+      this.handleTranslate(dx, dy);
+    });
+  }
 
-    private handleMapChange = (event: Y.YMapEvent<any>) => {
-        if (event.keysChanged.has(ContainerKeys.translateY)
-        ) {
-            this.updateSyncedTransform();
-        }
-    };
+  public init() {
+    this.updateSyncedTransform();
+    this.totalHeight = this.images.reduce((prev, curr) => prev + curr.height, 0);
+  }
 
-    public goto(index: number) {
-        let nextIndex = Math.max(0, index);
-        nextIndex = Math.min(this.images.length - 1, nextIndex);
-        this.translateY = nextIndex / this.images.length;
-    }
+  private handleTranslate(dx: number, dy: number) {
+    const dyNormalized = dy / this.totalHeight;
+    let nextTy = this.translateY + dyNormalized;
+    nextTy = Math.max(0, nextTy);
+    nextTy = Math.min(1, nextTy);
+    this.translateY = nextTy;
+  }
 
-    public append(image: LazyImage) {
-        this.images.push(image);
-        this.view.appendChild(image.view);
+  private handleMapChange = (event: Y.YMapEvent<any>) => {
+    if (event.keysChanged.has(ContainerKeys.translateY)
+    ) {
+      this.updateSyncedTransform();
     }
+  };
 
-    private async handleGoto(index: number): Promise<void> {
-        if (index < 0 || index >= this.images.length) {
-            return;
-        }
-        this.imageDoc.emit("renderStart", index);
-        const target = this.images[index];
-        if (target) {
-            await target.prepare();
-        }
-        this.imageDoc.emit("renderEnd", index);
-        for (let i = index - 3; i <= index + 3; i++) {
-            const img = this.images[i];
-            if (img) {
-                img.prepare();
-            }
-        }
-    }
+  public goto(index: number) {
+    let nextIndex = Math.max(0, index);
+    nextIndex = Math.min(this.images.length - 1, nextIndex);
+    this.translateY = nextIndex / this.images.length;
+  }
 
-    private handleResize = () => {
-        const bound = this.view.getBoundingClientRect();
-        let scaledHeight = 0;
-        for (const image of this.images) {
-            let scale = bound.width / image.width;
-            image.scale(scale);
-            scaledHeight += image.height * scale;
-        }
-        this.localScale = scaledHeight / this.totalHeight;
-        this.whiteboardApp.updateOptionSize(bound.width, bound.height);
-        this.whiteboardApp.adjustByOutFrame(bound.width, bound.height);
-        this.updateSyncedTransform();
-    }
+  public append(image: LazyImage) {
+    this.images.push(image);
+    this.view.appendChild(image.view);
+  }
 
-    private updateSyncedTransform = () => {
-        const bounds = this.view.getBoundingClientRect();
-        const maxTy = this.totalHeight * this.localScale - bounds.height;
-        let ty = this.translateY * this.totalHeight * this.localScale;
-        ty = Math.min(ty, maxTy);
-        ty = Math.max(ty, 0);
-        this.view.style.transform = `translate(0, ${-ty}px)`;
-        this.whiteboardApp.emitter.resetCamera();
-        this.whiteboardApp.emitter.translateCamera(0, -ty);
-        this.whiteboardApp.emitter.scaleCamera(this.localScale, "top-left");
-        console.log("localScale: ", this.localScale, this.translateY);
-        this.handleGoto(this.pageIndex);
+  private async handleGoto(index: number): Promise<void> {
+    if (index < 0 || index >= this.images.length) {
+      return;
+    }
+    this.imageDoc.emit('renderStart', index);
+    const target = this.images[index];
+    if (target) {
+      await target.prepare();
     }
+    this.imageDoc.emit('renderEnd', index);
+    for (let i = index - 3; i <= index + 3; i++) {
+      const img = this.images[i];
+      if (img) {
+        img.prepare();
+      }
+    }
+  }
 
-    public dispose() {
-        this.resizeObserver.disconnect();
-        this.scroll.dispose();
+  private handleResize = () => {
+    const bound = this.view.getBoundingClientRect();
+    let scaledHeight = 0;
+    for (const image of this.images) {
+      const scale = bound.width / image.width;
+      image.scale(scale);
+      scaledHeight += image.height * scale;
     }
+    this.localScale = scaledHeight / this.totalHeight;
+    this.whiteboardApp.updateOptionSize(bound.width, bound.height);
+    this.whiteboardApp.adjustByOutFrame(bound.width, bound.height);
+    this.updateSyncedTransform();
+  };
+
+  private updateSyncedTransform = () => {
+    const bounds = this.view.getBoundingClientRect();
+    const maxTy = this.totalHeight * this.localScale - bounds.height;
+    let ty = this.translateY * this.totalHeight * this.localScale;
+    ty = Math.min(ty, maxTy);
+    ty = Math.max(ty, 0);
+    this.view.style.transform = `translate(0, ${-ty}px)`;
+    this.whiteboardApp.emitter.resetCamera();
+    this.whiteboardApp.emitter.translateCamera(0, -ty);
+    this.whiteboardApp.emitter.scaleCamera(this.localScale, 'top-left');
+    console.log('localScale: ', this.localScale, this.translateY);
+    this.handleGoto(this.pageIndex);
+  };
+
+  public dispose() {
+    this.resizeObserver.disconnect();
+    this.scroll.dispose();
+  }
 }

package/src/FooterView.ts

@@ -1,139 +1,139 @@
-import { Icons } from "./icons";
-import {ImageryDoc} from "./ImageryDoc";
+import { Icons } from './icons';
+import { ImageryDoc } from './ImageryDoc';
 
-const EM_COLOR = "#8C8C8C";
+const EM_COLOR = '#8C8C8C';
 
 export class FooterView {
 
-    public readonly root: HTMLDivElement;
+  public readonly root: HTMLDivElement;
 
-    private prevPage: HTMLDivElement;
-    private nextPage: HTMLDivElement;
-    private sideBarToggle: HTMLDivElement;
-    private sideBarContainer: HTMLDivElement = document.createElement("div");
+  private prevPage: HTMLDivElement;
+  private nextPage: HTMLDivElement;
+  private sideBarToggle: HTMLDivElement;
+  private sideBarContainer: HTMLDivElement = document.createElement('div');
 
-    private isSlideBarVisible: boolean = false;
-    private imageryDoc: ImageryDoc;
+  private isSlideBarVisible: boolean = false;
+  private imageryDoc: ImageryDoc;
 
-    public constructor(imageryDoc: ImageryDoc) {
-        this.imageryDoc = imageryDoc;
-        this.root = document.createElement("div");
-        this.root.style.height = "24px";
-        this.root.style.zIndex = "2";
-        this.root.style.display = "flex";
-        this.root.style.alignItems = "center";
-        this.root.style.backgroundColor = "#fff";
-        this.root.style.borderTop = "1px solid #f0f0f0";
+  public constructor(imageryDoc: ImageryDoc) {
+    this.imageryDoc = imageryDoc;
+    this.root = document.createElement('div');
+    this.root.style.height = '24px';
+    this.root.style.zIndex = '2';
+    this.root.style.display = 'flex';
+    this.root.style.alignItems = 'center';
+    this.root.style.backgroundColor = '#fff';
+    this.root.style.borderTop = '1px solid #f0f0f0';
 
-        this.prevPage = this.createIcon(Icons.chevronLeft(EM_COLOR), "18px", () => {
-            this.imageryDoc.goto(this.imageryDoc.pageIndex - 1);
-        });
-        this.nextPage = this.createIcon(Icons.chevronRight(EM_COLOR), "18px", () => {
-            this.imageryDoc.goto(this.imageryDoc.pageIndex + 1);
-        });
-        this.sideBarToggle = this.createIcon(Icons.sideBar(EM_COLOR), "20px", () => {
-            this.createSideBar();
-            this.isSlideBarVisible = !this.isSlideBarVisible;
-            if (this.isSlideBarVisible) {
-                this.sideBarContainer.style.display = "block";
-            } else {
-                this.sideBarContainer.style.display = "none";
-            }
-        });
-        this.root.appendChild(this.sideBarToggle);
-        this.root.appendChild(this.createSpacer());
-        this.root.appendChild(this.prevPage);
-        this.root.appendChild(this.nextPage);
-        this.root.appendChild(this.createSpacer());
-    }
+    this.prevPage = this.createIcon(Icons.chevronLeft(EM_COLOR), '18px', () => {
+      this.imageryDoc.goto(this.imageryDoc.pageIndex - 1);
+    });
+    this.nextPage = this.createIcon(Icons.chevronRight(EM_COLOR), '18px', () => {
+      this.imageryDoc.goto(this.imageryDoc.pageIndex + 1);
+    });
+    this.sideBarToggle = this.createIcon(Icons.sideBar(EM_COLOR), '20px', () => {
+      this.createSideBar();
+      this.isSlideBarVisible = !this.isSlideBarVisible;
+      if (this.isSlideBarVisible) {
+        this.sideBarContainer.style.display = 'block';
+      } else {
+        this.sideBarContainer.style.display = 'none';
+      }
+    });
+    this.root.appendChild(this.sideBarToggle);
+    this.root.appendChild(this.createSpacer());
+    this.root.appendChild(this.prevPage);
+    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 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";
-        }
+  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 createSpacer(): HTMLDivElement {
+    const div = document.createElement('div');
+    div.style.flex = '1 1 auto';
+    return div;
+  }
 
-    private createIcon(svgContent: string, size: string, action: () => void): HTMLDivElement {
-        const icon = document.createElement("div");
-        icon.style.width = size;
-        icon.style.height = size;
-        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;
-    }
+  private createIcon(svgContent: string, size: string, action: () => void): HTMLDivElement {
+    const icon = document.createElement('div');
+    icon.style.width = size;
+    icon.style.height = size;
+    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;
+  }
 
-    private createSideBar() {
-        if (this.imageryDoc.pageCount === 0) {
-            return;
-        }
-        if (this.root.contains(this.sideBarContainer)) {
-            return;
-        }
-        this.sideBarContainer.style.width = "24%";
-        this.sideBarContainer.style.maxWidth = "180px";
-        this.sideBarContainer.style.height = "calc(100% - 24px)";
-        this.sideBarContainer.style.position = "absolute";
-        this.sideBarContainer.style.bottom = "24px";
-        this.sideBarContainer.style.left = "0";
-        this.sideBarContainer.style.fontSize = "0px";
-        this.sideBarContainer.style.overflow = "auto";
-        this.sideBarContainer.style.backgroundColor = "#EFEFEF";
-        this.root.appendChild(this.sideBarContainer);
-        for (let i = 0, l = this.imageryDoc.pageCount; i < l; i++) {
-            const reviewPage = document.createElement("div");
-            reviewPage.style.width = "100%";
-            reviewPage.style.marginTop = "12px";
-            const reviewIndex = document.createElement("div");
-            reviewIndex.style.cssText = "font-size:12px;width:100%;text-align:center;height:24px;line-height:24px;color:#585858";
-            reviewIndex.textContent = `${i + 1}`;
-            const reviewImg = document.createElement("img");
-            reviewImg.setAttribute("data-doc-index", `${i}`);
-            reviewImg.style.cssText = "width:80%;margin:0 10%;box-shadow:1px 1px 5px #9e9e9e";
-            this.imageryDoc.imgContent(i).then((base64Data) => {
-                reviewImg.src = base64Data;
-            });
-            reviewPage.appendChild(reviewImg);
-            reviewPage.appendChild(reviewIndex);
-            this.sideBarContainer.appendChild(reviewPage);
-        }
-        this.sideBarContainer.addEventListener("click", this.handleSideBarClick);
+  private createSideBar() {
+    if (this.imageryDoc.pageCount === 0) {
+      return;
     }
+    if (this.root.contains(this.sideBarContainer)) {
+      return;
+    }
+    this.sideBarContainer.style.width = '24%';
+    this.sideBarContainer.style.maxWidth = '180px';
+    this.sideBarContainer.style.height = 'calc(100% - 24px)';
+    this.sideBarContainer.style.position = 'absolute';
+    this.sideBarContainer.style.bottom = '24px';
+    this.sideBarContainer.style.left = '0';
+    this.sideBarContainer.style.fontSize = '0px';
+    this.sideBarContainer.style.overflow = 'auto';
+    this.sideBarContainer.style.backgroundColor = '#EFEFEF';
+    this.root.appendChild(this.sideBarContainer);
+    for (let i = 0, l = this.imageryDoc.pageCount; i < l; i++) {
+      const reviewPage = document.createElement('div');
+      reviewPage.style.width = '100%';
+      reviewPage.style.marginTop = '12px';
+      const reviewIndex = document.createElement('div');
+      reviewIndex.style.cssText = 'font-size:12px;width:100%;text-align:center;height:24px;line-height:24px;color:#585858';
+      reviewIndex.textContent = `${i + 1}`;
+      const reviewImg = document.createElement('img');
+      reviewImg.setAttribute('data-doc-index', `${i}`);
+      reviewImg.style.cssText = 'width:80%;margin:0 10%;box-shadow:1px 1px 5px #9e9e9e';
+      this.imageryDoc.imgContent(i).then((base64Data) => {
+        reviewImg.src = base64Data;
+      });
+      reviewPage.appendChild(reviewImg);
+      reviewPage.appendChild(reviewIndex);
+      this.sideBarContainer.appendChild(reviewPage);
+    }
+    this.sideBarContainer.addEventListener('click', this.handleSideBarClick);
+  }
 
-    private handleSideBarClick = (evt: MouseEvent) => {
-        const target = evt.target as HTMLElement;
-        const targetIndex = target.getAttribute("data-doc-index");
-        if (targetIndex) {
-            this.imageryDoc.goto(parseInt(targetIndex, 10));
-        }
-    };
+  private handleSideBarClick = (evt: MouseEvent) => {
+    const target = evt.target as HTMLElement;
+    const targetIndex = target.getAttribute('data-doc-index');
+    if (targetIndex) {
+      this.imageryDoc.goto(parseInt(targetIndex, 10));
+    }
+  };
 }

package/src/ImageryDoc.ts

@@ -1,7 +1,7 @@
-import EventEmitter from "eventemitter3";
-import {ApplicationInstanceType} from "@netless/forge-room";
+import EventEmitter from 'eventemitter3';
+import { ApplicationInstanceType } from '@netless/forge-room';
 
-import {ImageryDocPermissionFlag, ImageryDocPermissions} from "./ImageryDocPermissions";
+import { ImageryDocPermissionFlag, ImageryDocPermissions } from './ImageryDocPermissions';
 
 export interface ImageryDocEvents {
     /**
@@ -28,37 +28,37 @@ export interface ImageryDocEvents {
 
 export class ImageryDoc extends EventEmitter<ImageryDocEvents> implements ApplicationInstanceType {
 
-    public readonly view!: HTMLDivElement;
-    /**
+  public readonly view!: HTMLDivElement;
+  /**
      * 底部操作栏
      */
-    public readonly footView!: HTMLDivElement;
-    public readonly permissions!: ImageryDocPermissions;
+  public readonly footView!: HTMLDivElement;
+  public readonly permissions!: ImageryDocPermissions;
 
-    /**
+  /**
      * 当前页面索引, 从 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;
 
-    /**
+  /**
      * 获取图片内容, base64 编码
      * @param {number} index 页面索引
      */
-    public imgContent!: (index: number) => Promise<string>;
+  public imgContent!: (index: number) => Promise<string>;
 
-    /**
+  /**
      * 获取图片尺寸
      * @param {number} index 页面索引
      */
-    public imgSize!: (index: number) => {width: number, height: number};
+  public imgSize!: (index: number) => {width: number, height: number};
 }