@libresign/pdf-elements 0.1.0

package/src/components/PDFPage.vue

@@ -0,0 +1,87 @@
+<!--
+SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<template>
+  <canvas ref="canvas" />
+</template>
+
+<script>
+export default {
+  name: 'PDFPage',
+  props: {
+    page: {
+      type: Promise,
+      required: true,
+    },
+    scale: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      dynamicScale: this.scale,
+      isRendering: false,
+      boundMeasure: null,
+    }
+  },
+  watch: {
+    scale(newScale) {
+      this.dynamicScale = newScale
+      this.render()
+    },
+  },
+  mounted() {
+    this.boundMeasure = this.measure.bind(this)
+    window.addEventListener('resize', this.boundMeasure)
+    this.render()
+  },
+  beforeUnmount() {
+    if (this.boundMeasure) {
+      window.removeEventListener('resize', this.boundMeasure)
+    }
+  },
+  methods: {
+    getCanvasMeasurement() {
+      return {
+        canvasWidth: this.$refs.canvas.width,
+        canvasHeight: this.$refs.canvas.height,
+      }
+    },
+    measure() {
+      this.$emit('onMeasure', {
+        scale: this.dynamicScale,
+      })
+    },
+    async render() {
+      if (this.isRendering) return
+      this.isRendering = true
+      try {
+        const _page = await this.page
+        const canvas = this.$refs.canvas
+        const context = canvas.getContext('2d')
+        const viewport = _page.getViewport({
+          scale: this.dynamicScale,
+        })
+        canvas.width = viewport.width
+        canvas.height = viewport.height
+        await _page.render({
+          canvasContext: context,
+          viewport,
+        }).promise
+        this.measure()
+      } finally {
+        this.isRendering = false
+      }
+    },
+  },
+}
+</script>
+
+<style scoped>
+canvas {
+  display: block;
+}
+</style>

package/src/index.js

@@ -0,0 +1,16 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import PDFElements from './components/PDFElements.vue'
+
+PDFElements.install = function(Vue) {
+  if (PDFElements.install.installed) return
+  Vue.component(PDFElements.name, PDFElements)
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  PDFElements.install(window.Vue)
+}
+
+export default PDFElements
+export { PDFElements }

package/src/utils/asyncReader.js

@@ -0,0 +1,20 @@
+// SPDX-FileCopyrightText: 2026 LibreCode coop and contributors
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist'
+import pdfWorkerCode from 'pdfjs-dist/build/pdf.worker.min.mjs'
+
+GlobalWorkerOptions.workerSrc = pdfWorkerCode
+
+export function readAsArrayBuffer(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result)
+    reader.onerror = reject
+    reader.readAsArrayBuffer(file)
+  })
+}
+
+export function readAsPDF(file) {
+  return getDocument(file).promise
+}