PdfEditor.vue

<!--
  - SPDX-FileCopyrightText: 2024 LibreCode coop and LibreCode contributors
  - SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<VuePdfEditor ref="vuePdfEditor"
		width="100%"
		height="100%"
		class="vue-pdf-editor"
		:show-choose-file-btn="false"
		:show-customize-editor="false"
		:show-line-size-select="false"
		:show-font-size-select="false"
		:show-font-select="false"
		:show-rename="false"
		:show-save-btn="false"
		:save-to-upload="false"
		:init-files="files"
		:init-file-names="fileNames"
		:init-image-scale="1"
		:seal-image-show="false"
		:page-count-format="t('libresign', '{currentPage} of {totalPages}')"
		@pdf-editor:end-init="endInit">
		<template #custom="{ object, pagesScale, onUpdate, onDelete }">
			<Signature :x="object.x"
				:y="object.y"
				:fix-size="object.signer.readOnly"
				:read-only="object.signer.readOnly"
				:display-name="object.signer.displayName"
				:width="object.width"
				:height="object.height"
				:origin-width="object.originWidth"
				:origin-height="object.originHeight"
				:page-scale="pagesScale"
				@onUpdate="onUpdate"
				@onDelete="() => { onDeleteSigner(object); onDelete(); }" />
		</template>
	</VuePdfEditor>
</template>

<script>
// eslint-disable-next-line import/default
import VuePdfEditor from '@libresign/vue-pdf-editor'

import Signature from './Signature.vue'

export default {
	name: 'PdfEditor',
	components: {
		VuePdfEditor,
		Signature,
	},
	props: {
		files: {
			type: Array,
			default: () => [],
		},
		fileNames: {
			type: Array,
			default: () => [],
		},
		readOnly: {
			type: Boolean,
			default: false,
		},
	},
	mounted() {
		window.addEventListener('resize', this.adjustZoomToFit)
	},
	beforeDestroy() {
		window.removeEventListener('resize', this.adjustZoomToFit)
	},
	methods: {
		calculateOptimalScale(maxPageWidth) {
			const containerWidth = this.$el?.clientWidth || 0
			if (!containerWidth || !maxPageWidth) return 1

			const availableWidth = containerWidth - 80
			return Math.max(0.1, Math.min(2, availableWidth / maxPageWidth))
		},
		adjustZoomToFit() {
			const vuePdfEditor = this.$refs.vuePdfEditor
			const canvases = this.$el?.querySelectorAll('canvas')
			if (!vuePdfEditor?.pdfDocuments?.length || !canvases?.length) return

			const maxCanvasWidth = Math.max(...Array.from(canvases).map(canvas =>
				canvas.width / (vuePdfEditor.scale || 1)
			))

			const optimalScale = this.calculateOptimalScale(maxCanvasWidth)
			if (Math.abs(optimalScale - vuePdfEditor.scale) > 0.01) {
				vuePdfEditor.scale = optimalScale
			}
		},
		endInit(event) {
			setTimeout(() => this.adjustZoomToFit(), 200)
			this.$emit('pdf-editor:end-init', { ...event })
		},
		onDeleteSigner(object) {
			this.$emit('pdf-editor:on-delete-signer', object)
		},
		addSigner(signer) {
			const object = {
				id: this.$refs.vuePdfEditor.genID(),
				type: 'custom',
				signer,
				width: signer.element.coordinates.width,
				height: signer.element.coordinates.height,
				originWidth: signer.element.coordinates.width,
				originHeight: signer.element.coordinates.height,
				x: signer.element.coordinates.left,
				y: signer.element.coordinates.top,
			}

			const docIndex = signer.element.documentIndex !== undefined
				? signer.element.documentIndex
				: this.$refs.vuePdfEditor.selectedDocIndex

			this.$refs.vuePdfEditor.addObjectToPage(
				object,
				signer.element.coordinates.page - 1,
				docIndex,
			)
		},
	},
}
</script>
<style>
/** @todo remove this, only necessary because VuePdfEditor use Tailwind and the Tailwind have a global CSS that affect this */
audio, canvas, embed, iframe, img, object, svg, video {
	display: unset;
}

canvas {
	border-bottom: 2px solid #eee;
}
</style>

<style lang="scss" scoped>
.vue-pdf-editor {
	overflow: unset !important;
	min-height: 0;
	position: unset !important;
	display: flex;
}
</style>