import { Handler } from '/csspageweaver/lib/paged.esm.js'; export default class snapToBaseline extends Handler { constructor(chunker, polisher, caller) { super(chunker, polisher, caller); this.baseline; } beforeParsed(content){ this.baseline = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--baseline').trim()); content.querySelectorAll('blockquote').forEach((bq) => { const prev = bq.previousElementSibling; if (!prev || prev.nodeName !== 'P') { bq.style.color = 'red'; } }); } renderNode(node, sourceNode){ if (node.nodeName === 'P') { this.baseline = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--baseline').trim()); if (!shouldSnap(node)) return node; const area = node.closest('.pagedjs_area'); if (area) { const areaRect = area.getBoundingClientRect(); // getClientRects()[0] = premier fragment (colonne 1 si le paragraphe // s'étend sur 2 colonnes). getBoundingClientRect().top retournerait // le minimum des deux tops, soit le haut de la colonne 2 — incorrect. const firstRect = node.getClientRects()[0]; if (!firstRect) return node; const relativeTop = firstRect.top - areaRect.top; const modulo = relativeTop % this.baseline; if (modulo !== 0) { node.style.paddingTop = (this.baseline - modulo) + 'px'; node.style.color = "green"; } } return node; } } afterPageLayout(pageElement, page, breakToken){ const area = pageElement.querySelector('.pagedjs_area'); if (!area) return; const areaRect = area.getBoundingClientRect(); const paragraphs = pageElement.querySelectorAll('p'); paragraphs.forEach((node) => { if (!shouldSnap(node)) return; const firstRect = node.getClientRects()[0]; if (!firstRect) return; // firstRect.bottom = bas du premier fragment (colonne 1 pour un paragraphe // qui s'étend sur 2 colonnes). Cela permet de cibler correctement les // paragraphes dont la première partie touche le bas de la colonne. if (firstRect.bottom < areaRect.bottom - this.baseline) return; const relativeTop = firstRect.top - areaRect.top; const modulo = relativeTop % this.baseline; if (modulo !== 0) { node.style.paddingTop = (this.baseline - modulo) + 'px'; } }); } } function shouldSnap(node) { return !node.closest('blockquote'); }