mejoras

2025-05-23 00:26:53 +02:00
parent 19fa52ca65
commit 28c225687a
431 changed files with 161955 additions and 2096 deletions
--- a/resources/views/livewire/pdf-viewer.blade.php
+++ b/resources/views/livewire/pdf-viewer.blade.php
@@ -0,0 +1,74 @@
+<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>