genus-pdf-viewer 0.1.13 → 0.2.1

package/dist/viewer.js

@@ -0,0 +1,678 @@
+import * as pdfjsLib from "pdfjs-dist";
+import { VIEWER_STYLES } from "./styles.js";
+const GENUS_PDF_VIEWER_TAG = "genus-pdf-viewer";
+const DEFAULT_CONFIG = {
+    page: 1,
+    zoom: 1,
+    minZoom: 0.5,
+    maxZoom: 3,
+    zoomStep: 0.25,
+    fit: "width",
+    continuous: false,
+    showToolbar: true,
+    allowDownload: true,
+    withCredentials: false,
+};
+function parseBooleanAttribute(value, fallback) {
+    if (value === null) {
+        return fallback;
+    }
+    return value !== "false";
+}
+function parseNumberAttribute(value, fallback) {
+    if (value === null) {
+        return fallback;
+    }
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+}
+function isSameSource(left, right) {
+    if (typeof left === "string" && typeof right === "string") {
+        return left === right;
+    }
+    if (left instanceof URL && right instanceof URL) {
+        return left.toString() === right.toString();
+    }
+    return left === right;
+}
+function sameHeaders(left, right) {
+    const leftEntries = Object.entries(left ?? {});
+    const rightEntries = Object.entries(right ?? {});
+    if (leftEntries.length !== rightEntries.length) {
+        return false;
+    }
+    return leftEntries.every(([key, value]) => right?.[key] === value);
+}
+function clampPage(page, pageCount) {
+    return Math.max(1, Math.min(pageCount, Math.round(page)));
+}
+function clampZoom(zoom, minZoom, maxZoom) {
+    return Math.max(minZoom, Math.min(maxZoom, zoom));
+}
+function cloneSource(source) {
+    if (source instanceof Uint8Array) {
+        return new Uint8Array(source);
+    }
+    return source;
+}
+function resolveTitle(config) {
+    if (config.title) {
+        return config.title;
+    }
+    if (typeof config.src === "string") {
+        const lastPart = config.src.split("/").filter(Boolean).pop();
+        return lastPart ?? "PDF viewer";
+    }
+    if (config.src instanceof URL) {
+        const lastPart = config.src.pathname.split("/").filter(Boolean).pop();
+        return lastPart ?? "PDF viewer";
+    }
+    if (config.src instanceof Blob && config.src.type === "application/pdf") {
+        return "Document.pdf";
+    }
+    return "PDF viewer";
+}
+async function toDocumentParameters(config) {
+    if (typeof config.src === "string") {
+        return {
+            url: config.src,
+            withCredentials: config.withCredentials,
+            httpHeaders: config.httpHeaders,
+            stopAtErrors: true,
+        };
+    }
+    if (config.src instanceof URL) {
+        return {
+            url: config.src.toString(),
+            withCredentials: config.withCredentials,
+            httpHeaders: config.httpHeaders,
+            stopAtErrors: true,
+        };
+    }
+    if (config.src instanceof Blob) {
+        return {
+            data: new Uint8Array(await config.src.arrayBuffer()),
+            disableRange: true,
+            disableStream: true,
+            disableAutoFetch: true,
+            stopAtErrors: true,
+        };
+    }
+    return {
+        data: new Uint8Array(config.src),
+        disableRange: true,
+        disableStream: true,
+        disableAutoFetch: true,
+        stopAtErrors: true,
+    };
+}
+async function createBlobFromSource(config) {
+    if (config.src instanceof Blob) {
+        return config.src;
+    }
+    if (config.src instanceof Uint8Array) {
+        return new Blob([new Uint8Array(config.src)], { type: "application/pdf" });
+    }
+    const href = typeof config.src === "string"
+        ? config.src
+        : config.src instanceof URL
+            ? config.src.toString()
+            : null;
+    if (!href || typeof fetch === "undefined") {
+        return null;
+    }
+    const response = await fetch(href, {
+        headers: config.httpHeaders,
+        credentials: config.withCredentials ? "include" : "same-origin",
+    });
+    if (!response.ok) {
+        return null;
+    }
+    return response.blob();
+}
+function emitViewerEvent(element, type, detail) {
+    element.dispatchEvent(new CustomEvent(`genus-${type}`, {
+        bubbles: true,
+        detail,
+    }));
+}
+export class GenusPdfViewerElement extends HTMLElement {
+    static get observedAttributes() {
+        return ["src", "title", "page", "zoom", "fit", "continuous", "toolbar", "download"];
+    }
+    #config = null;
+    #document = null;
+    #loadingTask = null;
+    #pageCount = 0;
+    #loadVersion = 0;
+    #renderVersion = 0;
+    #shadow = this.attachShadow({ mode: "open" });
+    #toolbar = document.createElement("div");
+    #title = document.createElement("div");
+    #navGroup = document.createElement("div");
+    #zoomGroup = document.createElement("div");
+    #actionGroup = document.createElement("div");
+    #pageValue = document.createElement("span");
+    #zoomValue = document.createElement("span");
+    #prevButton = document.createElement("button");
+    #nextButton = document.createElement("button");
+    #zoomOutButton = document.createElement("button");
+    #zoomInButton = document.createElement("button");
+    #resetZoomButton = document.createElement("button");
+    #downloadButton = document.createElement("button");
+    #stage = document.createElement("div");
+    #status = document.createElement("div");
+    #handleResize = () => {
+        if (!this.#document || !this.#config) {
+            return;
+        }
+        if (this.#config.fit === "none") {
+            return;
+        }
+        void this.#render();
+    };
+    #handleScroll = () => {
+        if (!this.#config?.continuous) {
+            return;
+        }
+        const page = this.#detectVisiblePage();
+        if (!page || page === this.#config.page) {
+            return;
+        }
+        this.#config = { ...this.#config, page };
+        this.#syncToolbarState();
+        emitViewerEvent(this, "pagechange", {
+            page,
+            pageCount: this.#pageCount,
+        });
+    };
+    constructor() {
+        super();
+        const style = document.createElement("style");
+        style.textContent = VIEWER_STYLES;
+        const shell = document.createElement("div");
+        shell.className = "shell";
+        this.#toolbar.className = "toolbar";
+        this.#title.className = "title";
+        this.#navGroup.className = "toolbar-group toolbar-group-nav";
+        this.#zoomGroup.className = "toolbar-group toolbar-group-zoom";
+        this.#actionGroup.className = "toolbar-group toolbar-group-actions";
+        this.#pageValue.className = "value";
+        this.#zoomValue.className = "value";
+        this.#prevButton.type = "button";
+        this.#prevButton.textContent = "Prev";
+        this.#prevButton.addEventListener("click", () => {
+            void this.prevPage();
+        });
+        this.#nextButton.type = "button";
+        this.#nextButton.textContent = "Next";
+        this.#nextButton.addEventListener("click", () => {
+            void this.nextPage();
+        });
+        this.#zoomOutButton.type = "button";
+        this.#zoomOutButton.textContent = "−";
+        this.#zoomOutButton.addEventListener("click", () => {
+            void this.zoomOut();
+        });
+        this.#zoomInButton.type = "button";
+        this.#zoomInButton.textContent = "+";
+        this.#zoomInButton.addEventListener("click", () => {
+            void this.zoomIn();
+        });
+        this.#resetZoomButton.type = "button";
+        this.#resetZoomButton.textContent = "100%";
+        this.#resetZoomButton.addEventListener("click", () => {
+            void this.setZoom(1);
+        });
+        this.#downloadButton.type = "button";
+        this.#downloadButton.textContent = "Download";
+        this.#downloadButton.className = "primary";
+        this.#downloadButton.addEventListener("click", () => {
+            void this.download();
+        });
+        this.#navGroup.append(this.#prevButton, this.#pageValue, this.#nextButton);
+        this.#zoomGroup.append(this.#zoomOutButton, this.#zoomValue, this.#zoomInButton, this.#resetZoomButton);
+        this.#actionGroup.append(this.#downloadButton);
+        this.#toolbar.append(this.#title, this.#navGroup, this.#zoomGroup, this.#actionGroup);
+        this.#stage.className = "stage single";
+        this.#stage.addEventListener("scroll", this.#handleScroll);
+        this.#status.className = "status";
+        this.#stage.appendChild(this.#status);
+        shell.append(this.#toolbar, this.#stage);
+        this.#shadow.append(style, shell);
+    }
+    connectedCallback() {
+        window.addEventListener("resize", this.#handleResize);
+        if (!this.#config) {
+            const attributeConfig = this.#configFromAttributes();
+            if (attributeConfig) {
+                this.configure(attributeConfig);
+                return;
+            }
+        }
+        if (this.#config) {
+            void this.#loadAndRender();
+        }
+        else {
+            this.#setStatus("Set a PDF source to begin.");
+        }
+    }
+    disconnectedCallback() {
+        window.removeEventListener("resize", this.#handleResize);
+        void this.#teardownDocument();
+    }
+    attributeChangedCallback() {
+        const attributeConfig = this.#configFromAttributes();
+        if (attributeConfig) {
+            this.configure(attributeConfig);
+        }
+    }
+    configure(config) {
+        const nextZoom = config.zoom ?? DEFAULT_CONFIG.zoom;
+        const nextConfig = {
+            ...DEFAULT_CONFIG,
+            ...config,
+            src: cloneSource(config.src),
+            httpHeaders: config.httpHeaders ? { ...config.httpHeaders } : undefined,
+            page: config.page ?? DEFAULT_CONFIG.page,
+            zoom: nextZoom,
+        };
+        nextConfig.zoom = clampZoom(nextZoom, nextConfig.minZoom ?? DEFAULT_CONFIG.minZoom, nextConfig.maxZoom ?? DEFAULT_CONFIG.maxZoom);
+        const previous = this.#config;
+        this.#config = nextConfig;
+        this.#syncToolbarState();
+        if (!this.isConnected) {
+            return;
+        }
+        const sourceChanged = !previous ||
+            !isSameSource(previous.src, nextConfig.src) ||
+            previous.workerSrc !== nextConfig.workerSrc ||
+            previous.withCredentials !== nextConfig.withCredentials ||
+            !sameHeaders(previous.httpHeaders, nextConfig.httpHeaders);
+        if (sourceChanged) {
+            void this.#loadAndRender();
+            return;
+        }
+        const layoutChanged = previous.continuous !== nextConfig.continuous ||
+            previous.fit !== nextConfig.fit ||
+            previous.zoom !== nextConfig.zoom ||
+            previous.minZoom !== nextConfig.minZoom ||
+            previous.maxZoom !== nextConfig.maxZoom;
+        if (layoutChanged) {
+            void this.#render();
+            emitViewerEvent(this, "zoomchange", { zoom: nextConfig.zoom ?? DEFAULT_CONFIG.zoom });
+            return;
+        }
+        if (previous.page !== nextConfig.page) {
+            if (nextConfig.continuous) {
+                this.#scrollToPage(nextConfig.page ?? DEFAULT_CONFIG.page, true);
+            }
+            else {
+                void this.#render();
+            }
+            emitViewerEvent(this, "pagechange", {
+                page: nextConfig.page ?? DEFAULT_CONFIG.page,
+                pageCount: this.#pageCount,
+            });
+        }
+    }
+    async reload() {
+        await this.#loadAndRender();
+    }
+    async goToPage(page) {
+        if (!this.#config) {
+            return;
+        }
+        const nextPage = clampPage(page, this.#pageCount || Number.MAX_SAFE_INTEGER);
+        this.#config = { ...this.#config, page: nextPage };
+        this.#syncToolbarState();
+        if (this.#config.continuous) {
+            this.#scrollToPage(nextPage, true);
+        }
+        else {
+            await this.#render();
+        }
+        emitViewerEvent(this, "pagechange", {
+            page: nextPage,
+            pageCount: this.#pageCount,
+        });
+    }
+    async nextPage() {
+        if (!this.#config) {
+            return;
+        }
+        await this.goToPage((this.#config.page ?? DEFAULT_CONFIG.page) + 1);
+    }
+    async prevPage() {
+        if (!this.#config) {
+            return;
+        }
+        await this.goToPage((this.#config.page ?? DEFAULT_CONFIG.page) - 1);
+    }
+    async setZoom(zoom) {
+        if (!this.#config) {
+            return;
+        }
+        const nextZoom = clampZoom(zoom, this.#config.minZoom ?? DEFAULT_CONFIG.minZoom, this.#config.maxZoom ?? DEFAULT_CONFIG.maxZoom);
+        this.#config = { ...this.#config, zoom: nextZoom };
+        this.#syncToolbarState();
+        await this.#render();
+        emitViewerEvent(this, "zoomchange", { zoom: nextZoom });
+    }
+    async zoomIn() {
+        if (!this.#config) {
+            return;
+        }
+        await this.setZoom((this.#config.zoom ?? DEFAULT_CONFIG.zoom) +
+            (this.#config.zoomStep ?? DEFAULT_CONFIG.zoomStep));
+    }
+    async zoomOut() {
+        if (!this.#config) {
+            return;
+        }
+        await this.setZoom((this.#config.zoom ?? DEFAULT_CONFIG.zoom) -
+            (this.#config.zoomStep ?? DEFAULT_CONFIG.zoomStep));
+    }
+    async download() {
+        if (!this.#config?.allowDownload) {
+            return;
+        }
+        const link = document.createElement("a");
+        const blob = await createBlobFromSource(this.#config);
+        if (blob) {
+            const href = URL.createObjectURL(blob);
+            link.href = href;
+            link.download = resolveTitle(this.#config).endsWith(".pdf")
+                ? resolveTitle(this.#config)
+                : `${resolveTitle(this.#config)}.pdf`;
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+            URL.revokeObjectURL(href);
+            return;
+        }
+        if (typeof this.#config.src === "string") {
+            window.open(this.#config.src, "_blank", "noopener,noreferrer");
+            return;
+        }
+        if (this.#config.src instanceof URL) {
+            window.open(this.#config.src.toString(), "_blank", "noopener,noreferrer");
+        }
+    }
+    async destroy() {
+        await this.#teardownDocument();
+        this.#stage.replaceChildren(this.#status);
+        this.#setStatus("Viewer destroyed.");
+    }
+    #configFromAttributes() {
+        const src = this.getAttribute("src");
+        if (!src) {
+            return null;
+        }
+        return {
+            src,
+            title: this.getAttribute("title") ?? undefined,
+            page: parseNumberAttribute(this.getAttribute("page"), DEFAULT_CONFIG.page),
+            zoom: parseNumberAttribute(this.getAttribute("zoom"), DEFAULT_CONFIG.zoom),
+            fit: this.getAttribute("fit") ?? DEFAULT_CONFIG.fit,
+            continuous: parseBooleanAttribute(this.getAttribute("continuous"), DEFAULT_CONFIG.continuous),
+            showToolbar: parseBooleanAttribute(this.getAttribute("toolbar"), DEFAULT_CONFIG.showToolbar),
+            allowDownload: parseBooleanAttribute(this.getAttribute("download"), DEFAULT_CONFIG.allowDownload),
+        };
+    }
+    async #loadAndRender() {
+        const config = this.#config;
+        if (!config) {
+            return;
+        }
+        const loadVersion = ++this.#loadVersion;
+        this.#setStatus("Loading PDF...");
+        await this.#teardownDocument();
+        try {
+            const globalWorkerOptions = pdfjsLib.GlobalWorkerOptions;
+            globalWorkerOptions.workerPort = null;
+            globalWorkerOptions.workerSrc =
+                config.workerSrc ?? new URL("./pdf.worker.min.mjs", import.meta.url).toString();
+            const params = await toDocumentParameters(config);
+            const task = pdfjsLib.getDocument(params);
+            this.#loadingTask = task;
+            const documentProxy = await task.promise;
+            if (loadVersion !== this.#loadVersion) {
+                await documentProxy.destroy();
+                return;
+            }
+            this.#document = documentProxy;
+            this.#pageCount = documentProxy.numPages;
+            this.#config = {
+                ...config,
+                page: clampPage(config.page ?? DEFAULT_CONFIG.page, documentProxy.numPages),
+            };
+            this.#syncToolbarState();
+            await this.#render();
+            const detail = {
+                page: this.#config.page ?? DEFAULT_CONFIG.page,
+                pageCount: this.#pageCount,
+                zoom: this.#config.zoom ?? DEFAULT_CONFIG.zoom,
+            };
+            emitViewerEvent(this, "ready", detail);
+        }
+        catch (error) {
+            const detail = {
+                error,
+                message: this.#toErrorMessage(error),
+            };
+            this.#setStatus(detail.message);
+            emitViewerEvent(this, "error", detail);
+        }
+    }
+    async #teardownDocument() {
+        this.#renderVersion += 1;
+        const loadingTask = this.#loadingTask;
+        this.#loadingTask = null;
+        if (loadingTask) {
+            try {
+                await loadingTask.destroy();
+            }
+            catch {
+                // Ignore teardown failures.
+            }
+        }
+        const documentProxy = this.#document;
+        this.#document = null;
+        this.#pageCount = 0;
+        if (documentProxy) {
+            try {
+                await documentProxy.destroy();
+            }
+            catch {
+                // Ignore teardown failures.
+            }
+        }
+    }
+    async #render() {
+        const config = this.#config;
+        const documentProxy = this.#document;
+        if (!config || !documentProxy) {
+            return;
+        }
+        const renderVersion = ++this.#renderVersion;
+        const scrollSnapshot = config.continuous ? this.#captureScrollSnapshot() : null;
+        this.#setStatus(null);
+        this.#stage.className = config.continuous ? "stage" : "stage single";
+        const stageChildren = Array.from(this.#stage.children);
+        for (const child of stageChildren) {
+            if (child !== this.#status) {
+                child.remove();
+            }
+        }
+        if (config.continuous) {
+            const stack = document.createElement("div");
+            stack.className = "page-stack";
+            this.#stage.insertBefore(stack, this.#status);
+            for (let index = 1; index <= documentProxy.numPages; index += 1) {
+                if (renderVersion !== this.#renderVersion) {
+                    return;
+                }
+                const page = await documentProxy.getPage(index);
+                const wrapper = await this.#renderPage(page, config, index);
+                stack.appendChild(wrapper);
+                this.#animatePageEntry(wrapper);
+            }
+            this.#restoreScrollSnapshot(scrollSnapshot ?? {
+                page: config.page ?? DEFAULT_CONFIG.page,
+                offsetRatio: 0,
+            }, false);
+        }
+        else {
+            const pageNumber = clampPage(config.page ?? DEFAULT_CONFIG.page, documentProxy.numPages);
+            const page = await documentProxy.getPage(pageNumber);
+            const wrapper = await this.#renderPage(page, config, pageNumber);
+            this.#stage.insertBefore(wrapper, this.#status);
+            this.#animatePageEntry(wrapper);
+        }
+        this.#syncToolbarState();
+    }
+    async #renderPage(page, config, pageNumber) {
+        const wrapper = document.createElement("div");
+        wrapper.className = "page";
+        wrapper.dataset.page = String(pageNumber);
+        const canvas = document.createElement("canvas");
+        const context = canvas.getContext("2d");
+        if (!context) {
+            throw new Error("Canvas rendering context is unavailable.");
+        }
+        const scale = this.#computeScale(page, config);
+        const viewport = page.getViewport({ scale });
+        const dpr = window.devicePixelRatio || 1;
+        canvas.width = Math.floor(viewport.width * dpr);
+        canvas.height = Math.floor(viewport.height * dpr);
+        canvas.style.width = `${Math.floor(viewport.width)}px`;
+        canvas.style.height = `${Math.floor(viewport.height)}px`;
+        wrapper.style.width = canvas.style.width;
+        wrapper.style.minHeight = canvas.style.height;
+        wrapper.appendChild(canvas);
+        const renderContext = {
+            canvas,
+            canvasContext: context,
+            viewport,
+        };
+        if (dpr !== 1) {
+            renderContext.transform = [dpr, 0, 0, dpr, 0, 0];
+        }
+        await page.render(renderContext).promise;
+        return wrapper;
+    }
+    #computeScale(page, config) {
+        const viewport = page.getViewport({ scale: 1 });
+        const availableWidth = Math.max(320, this.#stage.clientWidth || 960) - 32;
+        const availableHeight = Math.max(320, this.#stage.clientHeight || 720) - 32;
+        let baseScale = 1;
+        if (config.fit === "width") {
+            baseScale = availableWidth / viewport.width;
+        }
+        else if (config.fit === "page") {
+            baseScale = Math.min(availableWidth / viewport.width, availableHeight / viewport.height);
+        }
+        return clampZoom(baseScale * (config.zoom ?? DEFAULT_CONFIG.zoom), config.minZoom ?? DEFAULT_CONFIG.minZoom, config.maxZoom ?? DEFAULT_CONFIG.maxZoom);
+    }
+    #syncToolbarState() {
+        const config = this.#config;
+        const page = config?.page ?? DEFAULT_CONFIG.page;
+        const zoom = config?.zoom ?? DEFAULT_CONFIG.zoom;
+        this.#toolbar.hidden = !(config?.showToolbar ?? DEFAULT_CONFIG.showToolbar);
+        this.#title.textContent = config ? resolveTitle(config) : "PDF viewer";
+        this.#pageValue.textContent = `${page} / ${this.#pageCount || 0}`;
+        this.#zoomValue.textContent = `${Math.round(zoom * 100)}%`;
+        this.#prevButton.disabled = page <= 1;
+        this.#nextButton.disabled = this.#pageCount > 0 ? page >= this.#pageCount : true;
+        this.#downloadButton.hidden = !(config?.allowDownload ?? DEFAULT_CONFIG.allowDownload);
+    }
+    #setStatus(message) {
+        if (!message) {
+            this.#status.className = "status";
+            this.#status.textContent = "";
+            return;
+        }
+        this.#status.className = "status visible";
+        this.#status.textContent = message;
+    }
+    #scrollToPage(page, smooth) {
+        const target = this.#stage.querySelector(`.page[data-page="${page}"]`);
+        if (!target) {
+            return;
+        }
+        target.scrollIntoView({
+            block: "start",
+            behavior: smooth ? "smooth" : "auto",
+        });
+    }
+    #captureScrollSnapshot() {
+        const currentPage = this.#detectVisiblePage();
+        if (!currentPage) {
+            return null;
+        }
+        const target = this.#stage.querySelector(`.page[data-page="${currentPage}"]`);
+        if (!target) {
+            return null;
+        }
+        const offsetWithinPage = Math.max(0, this.#stage.scrollTop - target.offsetTop);
+        const offsetRatio = target.offsetHeight > 0 ? Math.min(1, offsetWithinPage / target.offsetHeight) : 0;
+        return {
+            page: currentPage,
+            offsetRatio,
+        };
+    }
+    #restoreScrollSnapshot(snapshot, smooth) {
+        const target = this.#stage.querySelector(`.page[data-page="${snapshot.page}"]`);
+        if (!target) {
+            return;
+        }
+        const top = target.offsetTop + target.offsetHeight * snapshot.offsetRatio;
+        this.#stage.scrollTo({
+            top,
+            behavior: smooth ? "smooth" : "auto",
+        });
+    }
+    #animatePageEntry(wrapper) {
+        wrapper.classList.add("entering");
+        requestAnimationFrame(() => {
+            wrapper.classList.remove("entering");
+        });
+    }
+    #detectVisiblePage() {
+        const pages = Array.from(this.#stage.querySelectorAll(".page"));
+        if (pages.length === 0) {
+            return null;
+        }
+        const midpoint = this.#stage.scrollTop + this.#stage.clientHeight / 2;
+        const visible = pages.find((page) => {
+            const top = page.offsetTop;
+            const bottom = top + page.offsetHeight;
+            return midpoint >= top && midpoint <= bottom;
+        }) ?? pages[0];
+        const parsed = Number(visible.dataset.page);
+        return Number.isFinite(parsed) ? parsed : null;
+    }
+    #toErrorMessage(error) {
+        if (error instanceof Error && error.message) {
+            return error.message;
+        }
+        if (typeof error === "string") {
+            return error;
+        }
+        return "Failed to load PDF.";
+    }
+}
+export function defineGenusPdfViewerElement(tagName = GENUS_PDF_VIEWER_TAG) {
+    if (!customElements.get(tagName)) {
+        customElements.define(tagName, GenusPdfViewerElement);
+    }
+}
+export function createGenusPdfViewer(container, config) {
+    defineGenusPdfViewerElement();
+    const element = document.createElement(GENUS_PDF_VIEWER_TAG);
+    element.configure(config);
+    container.appendChild(element);
+    return element;
+}
+//# sourceMappingURL=viewer.js.map