@netless/forge-imagery-doc 0.1.1 → 0.1.3

package/src/SingleContainer.ts

@@ -1,248 +1,258 @@
-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 const delay = (value: number) => new Promise(resolve => setTimeout(resolve, value));
 
 async function waitUntil(fn: () => boolean, timeout: number): Promise<void> {
-    let start = Date.now();
-    while (!fn() && Date.now() - start < timeout) {
-        await delay(50);
-        start = Date.now();
-    }
+  let start = Date.now();
+  while (!fn() && Date.now() - start < timeout) {
+    await delay(50);
+    start = Date.now();
+  }
 }
 
 export class SingleContainer implements Container {
-    public readonly view: HTMLDivElement;
-    private parentView: HTMLDivElement;
-    private resizeObserver!: ResizeObserver;
-    private images: LazyImage[] = [];
-    private currentImage: LazyImage | null = null;
-    private scroll: InfinityScroll;
-    private map: Y.Map<any>;
-    private whiteboardApp: WhiteboardApplication;
-    private timeoutId: any = null;
-    private imageDoc: ImageryDoc;
+  public readonly view: HTMLDivElement;
+  private parentView: HTMLDivElement;
+  private resizeObserver!: ResizeObserver;
+  private images: LazyImage[] = [];
+  private currentImage: LazyImage | null = null;
+  private scroll: InfinityScroll;
+  private map: Y.Map<any>;
+  private whiteboardApp: WhiteboardApplication;
+  private imageDoc: ImageryDoc;
+
+  private get scale(): number {
+    return this.map.get(ContainerKeys.scale);
+  }
+  private set scale(value: number) {
+    this.map.set(ContainerKeys.scale, value);
+  }
+  private get translateX(): number {
+    return this.map.get(ContainerKeys.translateX);
+  }
+  private set translateX(value: number) {
+    this.map.set(ContainerKeys.translateX, 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 {
+    return this.map.get(ContainerKeys.pageIndex);
+  }
+
+  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 = 'center';
+    this.view.setAttribute('data-imagery-container', 'single');
+
+    this.resizeObserver = new ResizeObserver(this.handleResize);
+    this.resizeObserver.observe(this.view);
 
-    private get scale(): number {
-        return this.map.get(ContainerKeys.scale);
+    this.whiteboardApp.updateInternalResizeObserverStatus(false);
+    this.map.observe(this.handleMapChange);
+    if (!this.map.has(ContainerKeys.scale)) {
+      this.map.set(ContainerKeys.scale, 1);
     }
-    private set scale(value: number) {
-        this.map.set(ContainerKeys.scale, value);
+    if (!this.map.has(ContainerKeys.translateX)) {
+      this.map.set(ContainerKeys.translateX, 0);
     }
-    private get translateX(): number {
-        return this.map.get(ContainerKeys.translateX);
+    if (!this.map.has(ContainerKeys.translateY)) {
+      this.map.set(ContainerKeys.translateY, 0);
     }
-    private set translateX(value: number) {
-        this.map.set(ContainerKeys.translateX, value);
+    if (!this.map.has(ContainerKeys.pageIndex)) {
+      this.map.set(ContainerKeys.pageIndex, 0);
     }
-    private get translateY(): number {
-        return this.map.get(ContainerKeys.translateY);
+    this.scroll.on('translate', (dx, dy) => {
+      this.handleTranslate(dx, dy);
+    });
+    this.scroll.on('scale', (scale) => {
+      let nextScale = this.scale * scale;
+      nextScale = Math.max(1, nextScale);
+      nextScale = Math.min(2, nextScale);
+      this.scale = nextScale;
+      this.handleTranslate(0, 0);
+    });
+    //@ts-ignore
+    window.__doc = this;
+  }
+
+  public init() {
+    this.handleGoto(this.pageIndex)
+      .catch(_error => {
+        // todo error
+      });
+    this.updateSyncedTransform();
+  }
+
+  private resetTranslateOnResize() {
+    const image = this.view.children[0];
+    if (!image) {
+      return;
     }
-    private set translateY(value: number) {
-        this.map.set(ContainerKeys.translateY, value);
+    const imageBounds = image.getBoundingClientRect();
+    const parentBounds = this.parentView.getBoundingClientRect();
+    const maxDx = (imageBounds.width - parentBounds.width) / 2;
+    const maxDy = (imageBounds.height - parentBounds.height) / 2;
+    if (maxDx < 0) {
+      this.translateX = 0;
     }
-    public get pageIndex(): number {
-        return this.map.get(ContainerKeys.pageIndex);
+    if (maxDy < 0) {
+      this.translateY = 0;
     }
+  }
 
-    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 = "center";
-        this.view.setAttribute("data-imagery-container", "single");
-
-        this.resizeObserver = new ResizeObserver(this.handleResize);
-        this.resizeObserver.observe(this.view);
-        (window as any).imageWhiteboard = this.whiteboardApp;
-
-        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);
-        }
-        if (!this.map.has(ContainerKeys.pageIndex)) {
-            this.map.set(ContainerKeys.pageIndex, 0);
-        }
-        this.scroll.on("translate", (dx, dy) => {
-            this.handleTranslate(dx, dy);
-        });
-        this.scroll.on("scale", (scale) => {
-            let nextScale = this.scale * scale;
-            nextScale = Math.max(1, nextScale);
-            nextScale = Math.min(2, nextScale);
-            this.scale = nextScale;
-            this.handleTranslate(0, 0);
-        });
+  private handleTranslate(dx: number, dy: number) {
+    const image = this.view.children[0];
+    if (!image) {
+      return;
+    }
+    const imageBounds = image.getBoundingClientRect();
+    const parentBounds = this.parentView.getBoundingClientRect();
+    const maxDx = (imageBounds.width - parentBounds.width) / 2;
+    const maxDy = (imageBounds.height - parentBounds.height) / 2;
+
+    if (maxDx > 0) {
+      let nextDx = this.translateX * parentBounds.width + dx;
+      if (nextDx >= 0) {
+        nextDx = Math.min(nextDx, maxDx);
+      } else {
+        nextDx = Math.max(nextDx, -maxDx);
+      }
+      this.translateX = nextDx / parentBounds.width;
+    } else {
+      this.translateX = 0;
+    }
+    if (maxDy > 0) {
+      let nextDy = this.translateY * parentBounds.height + dy;
+      if (nextDy >= 0) {
+        nextDy = Math.min(nextDy, maxDy);
+      } else {
+        nextDy = Math.max(nextDy, -maxDy);
+      }
+      this.translateY = nextDy / parentBounds.height;
+    } else {
+      this.translateY = 0;
     }
+  }
 
-    public init() {
-        this.handleGoto(this.pageIndex)
-            .catch(error => {
-                // todo error
-            });
-        this.updateSyncedTransform();
-    }
-
-    private handleTranslate(dx: number, dy: number) {
-        const image = this.view.children[0];
-        if (!image) {
-            return;
-        }
-        const imageBounds = image.getBoundingClientRect();
-        const parentBounds = this.parentView.getBoundingClientRect();
-        const maxDx = (imageBounds.width - parentBounds.width) / 2;
-        const maxDy = (imageBounds.height - parentBounds.height) / 2;
-
-        if (maxDx > 0) {
-            let nextDx = this.translateX * parentBounds.width + dx;
-            if (nextDx >= 0) {
-                nextDx = Math.min(nextDx, maxDx);
-            } else {
-                nextDx = Math.max(nextDx, -maxDx);
-            }
-            this.translateX = nextDx / parentBounds.width;
-        } else {
-            this.translateX = 0;
-        }
-        if (maxDy > 0) {
-            let nextDy = this.translateY * parentBounds.height + dy;
-            if (nextDy >= 0) {
-                nextDy = Math.min(nextDy, maxDy);
-            } else {
-                nextDy = Math.max(nextDy, -maxDy);
-            }
-            this.translateY = nextDy / parentBounds.height;
-        } else {
-            this.translateY = 0;
-        }
-    }
-
-    private handleMapChange = (event: Y.YMapEvent<any>) => {
-
-        if (event.keysChanged.has(ContainerKeys.scale) ||
+  private handleMapChange = (event: Y.YMapEvent<any>) => {
+
+    if (event.keysChanged.has(ContainerKeys.scale) ||
             event.keysChanged.has(ContainerKeys.translateX) ||
             event.keysChanged.has(ContainerKeys.translateY)
-        ) {
-            this.updateSyncedTransform();
-        }
-
-        if (event.keysChanged.has(ContainerKeys.pageIndex)) {
-            this.handleGoto(this.pageIndex)
-                .catch(error => {
-                    // todo error
-                });
-        }
-    };
-
-    public goto(index: number) {
-        let nextIndex = Math.max(0, index);
-        nextIndex = Math.min(this.images.length - 1, nextIndex);
-        this.map.set(ContainerKeys.pageIndex, nextIndex);
-    }
-
-    public append(image: LazyImage) {
-        this.images.push(image);
-    }
-
-    private async handleGoto(index: number): Promise<void> {
-        await waitUntil(() => this.images.length > 0, 3000);
-        if (index < 0 || index >= this.images.length) {
-            return;
-        }
-        this.imageDoc.emit("renderStart", index);
-        if (this.view.children[0]) {
-            this.view.removeChild(this.view.children[0]);
-        }
-        this.whiteboardApp.emitter.view.style.opacity = "0";
-        const target = this.images[index];
-        if (target) {
-            await target.prepare();
-            this.view.appendChild(target.view);
-            this.currentImage = target;
-            this.whiteboardApp.emitter.gotoPage(`doc_${index}`);
-            this.whiteboardApp.updateOptionSize(
-                this.currentImage.width,
-                this.currentImage.height
-            );
-            this.whiteboardApp.emitter.view.style.opacity = "1";
-            this.handleResize();
-        }
-        this.imageDoc.emit("renderEnd", index);
-        for (let i = index - 3; i <= index + 3; i++) {
-            const img = this.images[i];
-            if (img) {
-                img.prepare();
-            }
-        }
-    }
-
-    private handleResize = () => {
-        const bound = this.parentView.getBoundingClientRect();
-        if (this.currentImage) {
-            let scale = bound.width / this.currentImage.width;
-            if (this.currentImage.height * scale > bound.height) {
-                scale = bound.height / this.currentImage.height;
-            }
-            const tx = Math.round((bound.width - this.currentImage.width * scale) / 2 / scale);
-            const ty = Math.round((bound.height - this.currentImage.height * scale) / 2 / scale);
-            this.currentImage.view.style.transform = `scale(${scale}) translate(${tx}px, ${ty}px)`;
-            this.updateSyncedTransform();
-        }
-    }
-
-    private updateSyncedTransform = () => {
-        if (!this.currentImage) {
-            return;
-        }
-        const parentBounds = this.parentView.getBoundingClientRect();
-        const tx = -this.translateX * parentBounds.width / this.scale;
-        const ty = -this.translateY * parentBounds.height / this.scale;
-        this.view.style.transform = `scale(${this.scale}) translate(${tx}px, ${ty}px)`;
-        const whiteboardView = this.whiteboardApp.emitter.view;
-        whiteboardView.style.width = `${parentBounds.width}px`;
-        whiteboardView.style.height = `${parentBounds.height}px`;
-        whiteboardView.style.top = "0";
-        whiteboardView.style.left = "0";
-        whiteboardView.style.transform = `scale(${this.scale}) translate(${tx}px, ${ty}px)`;
-        this.whiteboardApp.adjustByOutFrame(parentBounds.width, parentBounds.height);
-        window.clearTimeout(this.timeoutId);
-        this.timeoutId = window.setTimeout(() => {
-            whiteboardView.style.width = `${parentBounds.width * this.scale}px`;
-            whiteboardView.style.height = `${parentBounds.height * this.scale}px`;
-            whiteboardView.style.top = `${-(this.scale - 1) * parentBounds.height / 2 + ty * this.scale}px`;
-            whiteboardView.style.left = `${-(this.scale - 1) * parentBounds.width / 2 + tx * this.scale}px`;
-            whiteboardView.style.transform = `scale(1) translate(0px, 0px)`;
-            this.whiteboardApp.adjustByOutFrame(parentBounds.width * this.scale, parentBounds.height * this.scale);
-        }, 200);
-    }
-
-    public dispose() {
-        this.resizeObserver.disconnect();
-        this.scroll.dispose();
-        window.clearTimeout(this.timeoutId);
+    ) {
+      this.updateSyncedTransform();
     }
+
+    if (event.keysChanged.has(ContainerKeys.pageIndex)) {
+      this.handleGoto(this.pageIndex)
+        .catch(_error => {
+          // todo error
+        });
+    }
+  };
+
+  public goto(index: number) {
+    let nextIndex = Math.max(0, index);
+    nextIndex = Math.min(this.images.length - 1, nextIndex);
+    this.map.set(ContainerKeys.pageIndex, nextIndex);
+  }
+
+  public append(image: LazyImage) {
+    this.images.push(image);
+  }
+
+  private async handleGoto(index: number): Promise<void> {
+    await waitUntil(() => this.images.length > 0, 3000);
+    if (index < 0 || index >= this.images.length) {
+      return;
+    }
+    this.imageDoc.emit('renderStart', index);
+    if (this.view.children[0]) {
+      this.view.removeChild(this.view.children[0]);
+    }
+    this.whiteboardApp.emitter.view.style.opacity = '0';
+    const target = this.images[index];
+    if (target) {
+      await target.prepare();
+      this.view.appendChild(target.view);
+      this.currentImage = target;
+      this.whiteboardApp.emitter.gotoPage(`doc_${index}`);
+      this.whiteboardApp.updateOptionSize(
+        this.currentImage.width,
+        this.currentImage.height,
+      );
+      this.whiteboardApp.emitter.view.style.opacity = '1';
+      this.handleResize();
+    }
+    this.imageDoc.emit('renderEnd', index);
+    for (let i = index - 3; i <= index + 3; i++) {
+      const img = this.images[i];
+      if (img) {
+        img.prepare();
+      }
+    }
+  }
+
+  private handleResize = () => {
+    const bound = this.parentView.getBoundingClientRect();
+    if (this.currentImage) {
+      let scale = bound.width / this.currentImage.width;
+      if (this.currentImage.height * scale > bound.height) {
+        scale = bound.height / this.currentImage.height;
+      }
+      const tx = Math.round((bound.width - this.currentImage.width * scale) / 2 / scale);
+      const ty = Math.round((bound.height - this.currentImage.height * scale) / 2 / scale);
+      this.currentImage.view.style.transform = `scale(${scale}) translate(${tx}px, ${ty}px)`;
+      this.updateSyncedTransform();
+      this.resetTranslateOnResize();
+    }
+  };
+
+  private updateSyncedTransform = () => {
+    if (!this.currentImage) {
+      return;
+    }
+    const parentBounds = this.parentView.getBoundingClientRect();
+    const tx = -this.translateX * parentBounds.width / this.scale;
+    const ty = -this.translateY * parentBounds.height / this.scale;
+    this.view.style.transform = `scale(${this.scale}) translate(${tx}px, ${ty}px)`;
+    this.whiteboardApp.adjustByOutFrame(parentBounds.width * this.scale, parentBounds.height * this.scale);
+    const whiteboardSize = this.whiteboardApp.getViewSize();
+    const whiteboardScale = this.whiteboardApp.getInherentScale();
+    this.whiteboardApp.emitter.resetCamera();
+    this.whiteboardApp.emitter.translateCamera(
+      -this.translateX * whiteboardSize[0] / whiteboardScale / this.scale,
+      -this.translateY * whiteboardSize[1] / whiteboardScale / this.scale,
+    );
+  };
+
+  public dispose() {
+    this.map.unobserve(this.handleMapChange);
+    this.resizeObserver.disconnect();
+    this.scroll.dispose();
+  }
 }

package/src/icons.ts

@@ -3,7 +3,7 @@ const chevronRight = (color: string) => `<svg style="width:100%;height:100%;padd
 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 = {
-    chevronLeft,
-    chevronRight,
-    sideBar,
+  chevronLeft,
+  chevronRight,
+  sideBar,
 };

package/src/index.ts

@@ -1,5 +1,5 @@
-export { ImageryDoc } from "./ImageryDoc";
-export { ImageryDocApplication } from "./ImageryDocApplication";
-export { ImageryDocPermissionFlag } from "./ImageryDocPermissions";
+export { ImageryDoc } from './ImageryDoc';
+export { ImageryDocApplication } from './ImageryDocApplication';
+export { ImageryDocPermissionFlag } from './ImageryDocPermissions';
 
-export type { ImageryDocOption } from "./ImageryDocApplication";
+export type { ImageryDocOption } from './ImageryDocApplication';