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> |