From b61b3f2b886adb8dbfdc78ce3610373a44f3b14d Mon Sep 17 00:00:00 2001 From: Eduard Wisch Date: Wed, 8 Apr 2026 16:24:25 +0200 Subject: [PATCH] fix: Fabric-Overlay positioniert .canvas-container statt #fabric-canvas MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fabric.js wickelt das Canvas in einen .canvas-container-Wrapper ein. Vorher habe ich nur das innere #fabric-canvas absolut positioniert, während der Wrapper im normalen Flow unter dem PDF-Canvas blieb - dadurch konnten die Tools nicht klicken (Klicks gingen ans PDF-Canvas) und Annotationen erschienen unter dem Bild. Jetzt wird der .canvas-container exakt über dem PDF-Canvas platziert mit z-index:10 und pointer-events:auto. Co-Authored-By: Claude Opus 4.6 (1M context) [deploy] --- js/editor.js | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) 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'; }); }