74 lines
2.6 KiB
PHP
74 lines
2.6 KiB
PHP
|
<div class="h-screen bg-gray-100" wire:ignore>
|
|||
|
|
<!-- Toolbar -->
|
|||
|
|
<div class="fixed top-0 left-0 right-0 bg-white shadow-lg p-4 flex gap-4 z-50">
|
|||
|
|
<button @click="zoomIn">➕</button>
|
|||
|
|
<button @click="zoomOut">➖</button>
|
|||
|
|
<input type="number" v-model="currentPage" @change="goToPage">
|
|||
|
|
<span>@{{ currentPage }}/@{{ totalPages }}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Visor PDF -->
|
|||
|
|
<div id="pdf-container" class="pt-16">
|
|||
|
|
<livewire-pdf
|
|||
|
|
:url="$pdfUrl"
|
|||
|
|
@page-loaded="totalPages = $event.total"
|
|||
|
|
@page-changed="currentPage = $event.current"
|
|||
|
|
:page="$currentPage"
|
|||
|
|
:zoom="$zoomLevel"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Canvas para Anotaciones -->
|
|||
|
|
<canvas id="annotation-layer" class="absolute top-0 left-0"></canvas>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
const fabricCanvas = new fabric.Canvas('annotation-layer');
|
|||
|
|
|
|||
|
|
// Lógica de interacción con Fabric.js
|
|||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|||
|
|
Livewire.on('refreshAnnotations', () => {
|
|||
|
|
// Cargar anotaciones desde backend
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.4.120/pdf.min.js"></script>
|
|||
|
|
<script>
|
|||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|||
|
|
const container = document.getElementById('pdf-viewer');
|
|||
|
|
const pdfInstance = pdfjsLib.getDocument('{{ $pdfUrl }}');
|
|||
|
|
|
|||
|
|
pdfInstance.promise.then(pdf => {
|
|||
|
|
window.pdfDoc = pdf;
|
|||
|
|
Livewire.emit('totalPages', pdf.numPages);
|
|||
|
|
|
|||
|
|
// Función para renderizar página
|
|||
|
|
const renderPage = (num) => {
|
|||
|
|
pdf.getPage(num).then(page => {
|
|||
|
|
const viewport = page.getViewport({ scale: $wire.zoomLevel });
|
|||
|
|
const canvas = document.createElement('canvas');
|
|||
|
|
const context = canvas.getContext('2d');
|
|||
|
|
|
|||
|
|
canvas.height = viewport.height;
|
|||
|
|
canvas.width = viewport.width;
|
|||
|
|
|
|||
|
|
container.innerHTML = '';
|
|||
|
|
container.appendChild(canvas);
|
|||
|
|
|
|||
|
|
page.render({
|
|||
|
|
canvasContext: context,
|
|||
|
|
viewport: viewport
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Escuchar cambios desde Livewire
|
|||
|
|
Livewire.on('pageChanged', page => renderPage(page));
|
|||
|
|
Livewire.on('zoomChanged', zoom => renderPage($wire.currentPage));
|
|||
|
|
|
|||
|
|
// Renderizar primera página
|
|||
|
|
renderPage($wire.currentPage);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|