data/bericht
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Fabric-Overlay positioniert .canvas-container statt #fabric-canvas
All checks were successful
Deploy bericht / deploy (push) Successful in 1s
Details

Browse source 
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) <noreply@anthropic.com>
[deploy]
This commit is contained in:
Eduard Wisch 2026-04-08 16:24:25 +02:00
parent e730495089
commit b61b3f2b88
1 changed files with 16 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
js/editor.js
View file

@ -167,24 +167,29 @@
} }
function resizeFabricToCanvas() { 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.setWidth(pdfCanvas.width);
fabricCanvas.setHeight(pdfCanvas.height); fabricCanvas.setHeight(pdfCanvas.height);
// Warten bis der Browser die neue Größe applied hat
requestAnimationFrame(() => { 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 rect = pdfCanvas.getBoundingClientRect();
const wrap = pdfCanvas.parentElement; const wrap = pdfCanvas.parentElement;
const wrapRect = wrap.getBoundingClientRect(); const wrapRect = wrap.getBoundingClientRect();
const fc = document.getElementById('fabric-canvas');
fc.style.position = 'absolute'; container.style.position = 'absolute';
fc.style.left = (rect.left - wrapRect.left + wrap.scrollLeft) + 'px'; container.style.left = (rect.left - wrapRect.left + wrap.scrollLeft) + 'px';
fc.style.top = (rect.top - wrapRect.top + wrap.scrollTop) + 'px'; container.style.top = (rect.top - wrapRect.top + wrap.scrollTop) + 'px';
fc.style.width = pdfCanvas.clientWidth + 'px'; container.style.width = pdfCanvas.clientWidth + 'px';
fc.style.height = pdfCanvas.clientHeight + 'px'; container.style.height = pdfCanvas.clientHeight + 'px';
container.style.zIndex = '10';
container.style.pointerEvents = 'auto';
}); });
} }