@libresign/pdf-elements 0.4.0 → 1.0.0

package/src/components/PDFPage.vue

@@ -7,12 +7,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
   <canvas ref="canvas" />
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue'
+
+export default defineComponent({
   name: 'PDFPage',
+  emits: ['onMeasure'],
   props: {
     page: {
-      type: Promise,
+      type: Object as PropType<Promise<unknown>>,
       required: true,
     },
     scale: {
@@ -25,7 +28,7 @@ export default {
       dynamicScale: this.scale,
       isRendering: false,
       pendingRender: false,
-      renderTask: null,
+      renderTask: null as { cancel: () => void; promise: Promise<void> } | null,
     }
   },
   watch: {
@@ -41,7 +44,7 @@ export default {
     if (this.renderTask) {
       try {
         this.renderTask.cancel()
-      } catch (e) {
+      } catch {
         // Ignore render cancellation errors.
       }
       this.renderTask = null
@@ -73,12 +76,13 @@ export default {
         if (this.renderTask) {
           try {
             this.renderTask.cancel()
-          } catch (e) {
+          } catch {
             // Ignore render cancellation errors.
           }
           this.renderTask = null
         }
         const context = canvas.getContext('2d')
+        if (!context) return
         const viewport = _page.getViewport({
           scale: this.dynamicScale,
         })
@@ -100,7 +104,7 @@ export default {
       }
     },
   },
-}
+})
 </script>
 
 <style scoped>

package/src/index.ts

@@ -0,0 +1,18 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import type { App } from 'vue'
+import PDFElements from './components/PDFElements.vue'
+
+export { setWorkerPath } from './utils/asyncReader'
+export type { PDFDocumentEntry, PDFElementObject, PDFElementsPublicApi } from './types'
+
+const install = (app: App) => {
+  const name = PDFElements.name || 'PDFElements'
+  app.component(name, PDFElements)
+}
+
+;(PDFElements as { install?: (app: App) => void }).install = install
+
+export default PDFElements
+export { PDFElements }

package/src/types.ts

@@ -0,0 +1,35 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export interface PDFElementObject {
+  id?: string
+  x: number
+  y: number
+  width: number
+  height: number
+  type?: string
+  label?: string
+  icon?: string
+  resizable?: boolean
+  [key: string]: unknown
+}
+
+export interface PDFDocumentEntry {
+  name: string
+  file: unknown
+  pdfDoc: unknown
+  numPages: number
+  pages: Promise<unknown>[]
+  pageWidths: number[]
+  pagesScale: number[]
+  allObjects: PDFElementObject[][]
+}
+
+export interface PDFElementsPublicApi {
+  startAddingElement: (templateObject: PDFElementObject) => void
+  addObjectToPage: (object: PDFElementObject, pageIndex?: number, docIndex?: number) => boolean
+  getAllObjects: (docIndex?: number) => PDFElementObject[]
+  updateObject: (docIndex: number, objectId: string, payload: Partial<PDFElementObject>) => void
+  deleteObject: (docIndex: number, objectId: string) => void
+  duplicateObject: (docIndex: number, objectId: string) => void
+}

package/src/utils/asyncReader.ts

@@ -0,0 +1,103 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import type { PDFDocumentProxy, PDFWorker } from 'pdfjs-dist'
+
+let sharedWorker: PDFWorker | null = null
+let pdfjsPromise: Promise<typeof import('pdfjs-dist')> | null = null
+let workerUrlPromise: Promise<string> | null = null
+let workerSrcOverride: string | null = null
+
+function loadPdfjs() {
+  if (!pdfjsPromise) {
+    pdfjsPromise = import('pdfjs-dist')
+  }
+  return pdfjsPromise
+}
+
+function loadWorkerUrl() {
+  if (!workerUrlPromise) {
+    workerUrlPromise = import('pdfjs-dist/build/pdf.worker.min.mjs?url').then(
+      (mod) => mod.default as string
+    )
+  }
+  return workerUrlPromise
+}
+
+async function ensureWorkerSrc(pdfjs: typeof import('pdfjs-dist')) {
+  if (workerSrcOverride) {
+    pdfjs.GlobalWorkerOptions.workerSrc = workerSrcOverride
+    return
+  }
+  if (!pdfjs.GlobalWorkerOptions.workerSrc) {
+    pdfjs.GlobalWorkerOptions.workerSrc = await loadWorkerUrl()
+  }
+}
+
+async function getSharedWorker(pdfjs: typeof import('pdfjs-dist')): Promise<PDFWorker> {
+  if (!sharedWorker) {
+    await ensureWorkerSrc(pdfjs)
+    sharedWorker = new pdfjs.PDFWorker({}) as PDFWorker
+  }
+  return sharedWorker
+}
+
+export function setWorkerPath(path: string) {
+  workerSrcOverride = path
+  if (pdfjsPromise) {
+    pdfjsPromise.then((pdfjs) => {
+      pdfjs.GlobalWorkerOptions.workerSrc = path
+    })
+  }
+}
+
+export function readAsArrayBuffer(file: Blob): Promise<ArrayBuffer> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result as ArrayBuffer)
+    reader.onerror = reject
+    reader.readAsArrayBuffer(file)
+  })
+}
+
+type PdfInput =
+  | string
+  | ArrayBuffer
+  | ArrayBufferView
+  | Blob
+  | {
+      url?: string
+      data?: ArrayBuffer | Uint8Array
+      [key: string]: unknown
+    }
+
+export async function readAsPDF(
+  file: PdfInput,
+  options: Record<string, unknown> = {}
+): Promise<PDFDocumentProxy> {
+  const pdfjs = await loadPdfjs()
+  const worker = await getSharedWorker(pdfjs)
+  const isArrayBuffer = file instanceof ArrayBuffer
+  const isView = ArrayBuffer.isView(file)
+  const isBlob = typeof Blob !== 'undefined' && file instanceof Blob
+
+  if (file && typeof file === 'object' && !isArrayBuffer && !isView && !isBlob) {
+    return pdfjs.getDocument({ ...(file as Record<string, unknown>), ...options, worker }).promise
+  }
+  if (typeof file === 'string') {
+    return pdfjs.getDocument({ url: file, ...options, worker }).promise
+  }
+  if (isBlob) {
+    const data = await readAsArrayBuffer(file as Blob)
+    return pdfjs.getDocument({ data, ...options, worker }).promise
+  }
+  const data = isArrayBuffer
+    ? (file as ArrayBuffer)
+    : new Uint8Array(
+        (file as ArrayBufferView).buffer,
+        (file as ArrayBufferView).byteOffset,
+        (file as ArrayBufferView).byteLength
+      )
+
+  return pdfjs.getDocument({ data, ...options, worker }).promise
+}

package/src/utils/{geometry.js → geometry.ts}

@@ -1,14 +1,28 @@
 // SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-export function clampPosition(x, y, width, height, pageWidth, pageHeight) {
+export function clampPosition(
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  pageWidth: number,
+  pageHeight: number
+) {
   return {
     x: Math.max(0, Math.min(x, pageWidth - width)),
     y: Math.max(0, Math.min(y, pageHeight - height)),
   }
 }
 
-export function getVisibleArea(newX, newY, objWidth, objHeight, pageWidth, pageHeight) {
+export function getVisibleArea(
+  newX: number,
+  newY: number,
+  objWidth: number,
+  objHeight: number,
+  pageWidth: number,
+  pageHeight: number
+) {
   const visibleLeft = Math.max(0, newX)
   const visibleTop = Math.max(0, newY)
   const visibleRight = Math.min(pageWidth, newX + objWidth)

package/src/utils/{measurements.js → measurements.ts}

@@ -1,7 +1,26 @@
 // SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-export function getCachedMeasurement(cache, cacheKey, pageRef, pagesScale) {
+export interface CanvasMeasurement {
+  canvasWidth: number
+  canvasHeight: number
+}
+
+export interface PageMeasurement {
+  width: number
+  height: number
+}
+
+export interface PageMeasurementProvider {
+  getCanvasMeasurement: () => CanvasMeasurement
+}
+
+export function getCachedMeasurement(
+  cache: Record<string, PageMeasurement>,
+  cacheKey: string,
+  pageRef: PageMeasurementProvider,
+  pagesScale: number
+) {
   const cached = cache[cacheKey]
   if (cached) {
     return cached

package/src/utils/{objectStore.js → objectStore.ts}

@@ -1,12 +1,14 @@
 // SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-export function objectIdExistsInDoc(doc, objectId) {
+import type { PDFDocumentEntry, PDFElementObject } from '../types'
+
+export function objectIdExistsInDoc(doc: PDFDocumentEntry | undefined, objectId: string) {
   if (!doc || !objectId) return false
   return doc.allObjects.some((objects) => objects.some((obj) => obj.id === objectId))
 }
 
-export function findObjectPageIndex(doc, objectId) {
+export function findObjectPageIndex(doc: PDFDocumentEntry | undefined, objectId: string) {
   if (!doc || !objectId) return undefined
   for (let pageIndex = 0; pageIndex < doc.allObjects.length; pageIndex++) {
     if (doc.allObjects[pageIndex].some((obj) => obj.id === objectId)) {
@@ -16,7 +18,12 @@ export function findObjectPageIndex(doc, objectId) {
   return undefined
 }
 
-export function updateObjectInDoc(doc, pageIndex, objectId, payload) {
+export function updateObjectInDoc(
+  doc: PDFDocumentEntry | undefined,
+  pageIndex: number,
+  objectId: string,
+  payload: Partial<PDFElementObject>
+) {
   const objects = doc?.allObjects?.[pageIndex]
   if (!objects) return false
   const objectIndex = objects.findIndex((obj) => obj.id === objectId)
@@ -25,7 +32,11 @@ export function updateObjectInDoc(doc, pageIndex, objectId, payload) {
   return true
 }
 
-export function removeObjectFromDoc(doc, pageIndex, objectId) {
+export function removeObjectFromDoc(
+  doc: PDFDocumentEntry | undefined,
+  pageIndex: number,
+  objectId: string
+) {
   const objects = doc?.allObjects?.[pageIndex]
   if (!objects) return false
   const objectIndex = objects.findIndex((obj) => obj.id === objectId)

package/src/utils/{pageBounds.js → pageBounds.ts}

@@ -1,13 +1,13 @@
 // SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-export function getViewportWindow(scrollTop, viewHeight, margin = 300) {
+export function getViewportWindow(scrollTop: number, viewHeight: number, margin = 300) {
   return {
     minY: Math.max(0, scrollTop - margin),
     maxY: scrollTop + viewHeight + margin,
   }
 }
 
-export function isPageInViewport(offsetTop, offsetHeight, minY, maxY) {
+export function isPageInViewport(offsetTop: number, offsetHeight: number, minY: number, maxY: number) {
   return !(offsetTop + offsetHeight < minY || offsetTop > maxY)
 }

package/src/utils/{zoom.js → zoom.ts}

@@ -1,7 +1,9 @@
 // SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-export function applyScaleToDocs(docs, scale) {
+import type { PDFDocumentEntry } from '../types'
+
+export function applyScaleToDocs(docs: PDFDocumentEntry[], scale: number) {
   docs.forEach((doc) => {
     doc.pagesScale = doc.pagesScale.map(() => scale)
   })

package/dist/demo.html

@@ -1 +0,0 @@
-<!doctype html><meta charset="utf-8"><title>pdf-elements demo</title><script src="./pdf-elements.umd.js"></script><link rel="stylesheet" href="./pdf-elements.css"><script>console.log(pdf-elements)</script>