@netless/forge-imagery-doc 0.1.0

package/src/SingleContainer.ts

@@ -0,0 +1,248 @@
+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();
+    }
+}
+
+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;
+
+    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);
+        (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);
+        });
+    }
+
+    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) ||
+            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);
+    }
+}

package/src/icons.ts

@@ -0,0 +1,9 @@
+const chevronLeft = (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 chevronRight = (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 = {
+    chevronLeft,
+    chevronRight,
+    sideBar,
+};

package/src/index.ts

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

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["src/**/*", "node_modules/paper/dist/paper.d.ts"],
+  "compilerOptions": {
+    "outDir": "dist"
+  }
+}