diff --git a/js/editor.js b/js/editor.js index 8833f8f..7fc29e8 100644 --- a/js/editor.js +++ b/js/editor.js @@ -167,24 +167,29 @@ } function resizeFabricToCanvas() { - // Die tatsächlich angezeigte Größe (nicht der Drawing-Buffer) bestimmt - // die Position des Fabric-Overlays. Wir setzen das Fabric-Canvas auf - // die Buffer-Größe (für scharfe Annotationen) und positionieren es - // exakt über dem sichtbaren PDF-Canvas. fabricCanvas.setWidth(pdfCanvas.width); fabricCanvas.setHeight(pdfCanvas.height); - // Warten bis der Browser die neue Größe applied hat requestAnimationFrame(() => { + // Fabric wickelt das Canvas in einen .canvas-container ein — + // DIESEN müssen wir absolut über dem PDF-Canvas positionieren, + // nicht das innere #fabric-canvas direkt. + const fcEl = document.getElementById('fabric-canvas'); + const container = fcEl.parentElement && fcEl.parentElement.classList.contains('canvas-container') + ? fcEl.parentElement + : fcEl; + const rect = pdfCanvas.getBoundingClientRect(); const wrap = pdfCanvas.parentElement; const wrapRect = wrap.getBoundingClientRect(); - const fc = document.getElementById('fabric-canvas'); - fc.style.position = 'absolute'; - fc.style.left = (rect.left - wrapRect.left + wrap.scrollLeft) + 'px'; - fc.style.top = (rect.top - wrapRect.top + wrap.scrollTop) + 'px'; - fc.style.width = pdfCanvas.clientWidth + 'px'; - fc.style.height = pdfCanvas.clientHeight + 'px'; + + container.style.position = 'absolute'; + container.style.left = (rect.left - wrapRect.left + wrap.scrollLeft) + 'px'; + container.style.top = (rect.top - wrapRect.top + wrap.scrollTop) + 'px'; + container.style.width = pdfCanvas.clientWidth + 'px'; + container.style.height = pdfCanvas.clientHeight + 'px'; + container.style.zIndex = '10'; + container.style.pointerEvents = 'auto'; }); }