walter-boente_book-collection/js/snapToBaseline.js

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');
}