pagyra-js 0.0.1

package/src/index.ts

@@ -0,0 +1,35 @@
+export * from "./core.js";
+export * from "./html-to-pdf.js";
+export * from "./svg/index.js";
+
+import { LayoutNode } from "./dom/node.js";
+import { ComputedStyle } from "./css/style.js";
+import { layoutTree } from "./layout/pipeline/layout-tree.js";
+import type { Viewport } from "./geometry/box.js";
+
+export function demoLayout(viewport: Viewport = { width: 800, height: 600 }): LayoutNode {
+  const root = new LayoutNode(new ComputedStyle());
+  const paragraph = new LayoutNode(
+    new ComputedStyle({
+      marginTop: 16,
+      marginBottom: 16,
+    }),
+  );
+  root.appendChild(paragraph);
+
+  layoutTree(root, viewport);
+  return root;
+}
+
+import { fileURLToPath } from "node:url";
+import { log } from "./logging/debug.js";
+
+const isMain = fileURLToPath(import.meta.url) === process.argv[1];
+if (isMain) {
+  const tree = demoLayout();
+  log('INDEX', 'debug', "Root layout:", {
+    width: tree.box.contentWidth,
+    height: tree.box.contentHeight,
+    children: tree.children.length,
+  });
+}

package/src/layout/context/float-context.ts

@@ -0,0 +1,62 @@
+export interface FloatRect {
+  readonly top: number;
+  readonly bottom: number;
+  readonly inlineStart: number;
+  readonly inlineEnd: number;
+}
+
+interface RegisteredFloat {
+  readonly side: "left" | "right";
+  readonly rect: FloatRect;
+}
+
+export class FloatContext {
+  private readonly floats: RegisteredFloat[] = [];
+
+  register(side: "left" | "right", rect: FloatRect): void {
+    this.floats.push({ side, rect });
+  }
+
+  bottom(side: "left" | "right"): number {
+    let result = 0;
+    for (const entry of this.floats) {
+      if (entry.side === side) {
+        result = Math.max(result, entry.rect.bottom);
+      }
+    }
+    return result;
+  }
+
+  inlineOffsets(top: number, bottom: number, containingBlockWidth: number): { start: number; end: number } {
+    let leftOffset = 0;
+    let rightOffset = 0;
+    for (const { side, rect } of this.floats) {
+      if (!rangesOverlap(rect.top, rect.bottom, top, bottom)) {
+        continue;
+      }
+      if (side === "left") {
+        leftOffset = Math.max(leftOffset, rect.inlineEnd);
+      } else {
+        rightOffset = Math.max(rightOffset, containingBlockWidth - rect.inlineStart);
+      }
+    }
+    return {
+      start: leftOffset,
+      end: containingBlockWidth - rightOffset,
+    };
+  }
+
+  nextUnblockedY(top: number, bottom: number): number | null {
+    let candidate: number | null = null;
+    for (const { rect } of this.floats) {
+      if (rangesOverlap(rect.top, rect.bottom, top, bottom)) {
+        candidate = candidate === null ? rect.bottom : Math.min(candidate, rect.bottom);
+      }
+    }
+    return candidate;
+  }
+}
+
+function rangesOverlap(aStart: number, aEnd: number, bStart: number, bEnd: number): boolean {
+  return Math.max(aStart, bStart) < Math.min(aEnd, bEnd);
+}

package/src/layout/context/layout-environment.ts

@@ -0,0 +1,29 @@
+import type { Viewport } from "../../geometry/box.js";
+import type { FontEmbedder } from "../../pdf/font/embedder.js";
+import type { Environment } from "../../environment/environment.js";
+
+export interface LayoutEnvironmentOptions {
+  viewport: Viewport;
+  fontEmbedder: FontEmbedder | null;
+  getEnv?: Environment["getEnv"];
+}
+
+export class LayoutEnvironment {
+  private readonly envAccessor: Environment["getEnv"];
+
+  constructor(private readonly options: LayoutEnvironmentOptions) {
+    this.envAccessor = options.getEnv ?? (() => undefined);
+  }
+
+  get viewport(): Viewport {
+    return this.options.viewport;
+  }
+
+  get fontEmbedder(): FontEmbedder | null {
+    return this.options.fontEmbedder;
+  }
+
+  getEnv(name: string): string | undefined {
+    return this.envAccessor(name);
+  }
+}

package/src/layout/debug.ts

@@ -0,0 +1,18 @@
+import type { LayoutContext } from "./pipeline/strategy.js";
+
+let LAYOUT_DEBUG: boolean | undefined;
+
+const initialize = (context: LayoutContext) => {
+  if (LAYOUT_DEBUG === undefined) {
+    LAYOUT_DEBUG = context.env.getEnv("PAGYRA_DEBUG_LAYOUT") === "1";
+  }
+};
+
+export const createLayoutDebug = (context: LayoutContext) => {
+  initialize(context);
+  return (...args: unknown[]): void => {
+    if (LAYOUT_DEBUG) {
+      console.log(...args);
+    }
+  };
+};

package/src/layout/inline/bounding-box-calculator.ts

@@ -0,0 +1,132 @@
+import { LayoutNode, type InlineRun } from "../../dom/node.js";
+import { resolvedLineHeight } from "../../css/style.js";
+import { isInlineDisplay } from "./inline-utils.js";
+
+/**
+ * Represents a bounding rectangle with min/max coordinates
+ */
+interface BoundingRect {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+
+/**
+ * Responsible for computing and propagating bounding boxes for inline nodes.
+ * Handles both the initial box calculation from runs and the propagation to ancestors.
+ */
+export class BoundingBoxCalculator {
+    private boundingBoxes = new Map<LayoutNode, BoundingRect>();
+
+    /**
+     * Compute per-node box sizes from their inline runs.
+     * Assigns box dimensions based on the runs' position and sizes.
+     */
+    computeNodeBoxes(nodeRuns: Map<LayoutNode, InlineRun[]>): void {
+        for (const [node, runs] of nodeRuns.entries()) {
+            node.inlineRuns = runs;
+            node.lineBoxes = undefined;
+
+            const lineCount = runs.reduce((max, run) => Math.max(max, run.lineIndex + 1), 0);
+            const lh = resolvedLineHeight(node.style);
+            node.box.contentHeight = lineCount * lh;
+
+            // Calculate actual content width by finding the extent of all runs
+            // relative to the node's box.x position
+            if (runs.length > 0) {
+                // Find the actual extent of all runs from their positions and widths
+                // Initialize with the first run's values to avoid Infinity edge cases
+                const firstRun = runs[0];
+                let minX = firstRun.startX;
+                let maxX = firstRun.startX + firstRun.width;
+                for (let i = 1; i < runs.length; i++) {
+                    const run = runs[i];
+                    minX = Math.min(minX, run.startX);
+                    maxX = Math.max(maxX, run.startX + run.width);
+                }
+                // The content width is the span from minX to maxX
+                // Since node.box.x is set to minX in run-placer, the content width is maxX - minX
+                const actualWidth = maxX - minX;
+                node.box.contentWidth = actualWidth;
+            } else {
+                node.box.contentWidth = 0;
+            }
+
+            node.box.borderBoxWidth = node.box.contentWidth;
+            node.box.borderBoxHeight = node.box.contentHeight;
+            node.box.marginBoxWidth = node.box.borderBoxWidth;
+            node.box.marginBoxHeight = node.box.borderBoxHeight;
+            node.box.scrollWidth = Math.max(node.box.scrollWidth, node.box.contentWidth);
+            node.box.scrollHeight = Math.max(node.box.scrollHeight, node.box.contentHeight);
+        }
+    }
+
+    /**
+     * Propagate bounding boxes from text nodes to their inline ancestors.
+     * This ensures that container nodes (like spans) have a bounding box that encompasses their content,
+     * even if they didn't generate box items themselves (e.g. no padding/border).
+     */
+    propagateBoundingBoxes(nodeRuns: Map<LayoutNode, InlineRun[]>, container: LayoutNode): void {
+        // Collect bounding boxes from all nodes with runs
+        for (const [node] of nodeRuns.entries()) {
+            const rect: BoundingRect = {
+                minX: node.box.x,
+                minY: node.box.y,
+                maxX: node.box.x + node.box.contentWidth,
+                maxY: node.box.y + node.box.contentHeight,
+            };
+
+            // Propagate upwards to inline ancestors
+            let curr = node.parent;
+            while (curr && curr !== container && isInlineDisplay(curr.style.display)) {
+                this.updateBox(curr, rect);
+                curr = curr.parent;
+            }
+        }
+
+        // Apply computed bounding boxes back to the nodes
+        for (const [node, rect] of this.boundingBoxes.entries()) {
+            node.box.x = rect.minX;
+            node.box.y = rect.minY;
+            node.box.contentWidth = rect.maxX - rect.minX;
+            node.box.contentHeight = rect.maxY - rect.minY;
+            node.box.borderBoxWidth = Math.max(node.box.borderBoxWidth, node.box.contentWidth);
+            node.box.borderBoxHeight = Math.max(node.box.borderBoxHeight, node.box.contentHeight);
+            node.box.marginBoxWidth = Math.max(node.box.marginBoxWidth, node.box.borderBoxWidth);
+            node.box.marginBoxHeight = Math.max(node.box.marginBoxHeight, node.box.borderBoxHeight);
+        }
+    }
+
+    /**
+     * Update or create a bounding box for a node by incorporating a new rectangle.
+     * Expands the existing bounding box to include the new rect.
+     */
+    private updateBox(node: LayoutNode, rect: BoundingRect): void {
+        let current = this.boundingBoxes.get(node);
+        if (!current) {
+            // Seed with existing box if it appears valid (non-zero size), otherwise start with the new rect.
+            if (node.box.contentWidth > 0 || node.box.contentHeight > 0) {
+                current = {
+                    minX: node.box.x,
+                    minY: node.box.y,
+                    maxX: node.box.x + node.box.contentWidth,
+                    maxY: node.box.y + node.box.contentHeight,
+                };
+                // Union with the new rect
+                current.minX = Math.min(current.minX, rect.minX);
+                current.minY = Math.min(current.minY, rect.minY);
+                current.maxX = Math.max(current.maxX, rect.maxX);
+                current.maxY = Math.max(current.maxY, rect.maxY);
+            } else {
+                current = { ...rect };
+            }
+            this.boundingBoxes.set(node, current);
+        } else {
+            current.minX = Math.min(current.minX, rect.minX);
+            current.minY = Math.min(current.minY, rect.minY);
+            current.maxX = Math.max(current.maxX, rect.maxX);
+            current.maxY = Math.max(current.maxY, rect.maxY);
+        }
+    }
+}

package/src/layout/inline/font-baseline-calculator.ts

@@ -0,0 +1,76 @@
+import type { FontMetrics } from "../../fonts/types.js";
+
+/**
+ * Default ascent ratio for fonts when metrics are unavailable.
+ * Most fonts have an ascent around 75-80% of the font size.
+ */
+const DEFAULT_ASCENT_RATIO = 0.75;
+
+/**
+ * Calculate the baseline position for a line of text.
+ * 
+ * The baseline is the invisible line on which text sits. In proper typography,
+ * the baseline should be positioned based on the font's ascent (the height
+ * above the baseline where ascenders like 'h', 'b' extend).
+ * 
+ * When line-height is larger than font-size, we need to account for "half-leading"
+ * (the extra space distributed equally above and below the text).
+ * 
+ * @param lineTop - The Y coordinate of the top of the line box
+ * @param fontSize - The font size in pixels
+ * @param lineHeight - The line height in pixels
+ * @param fontMetrics - Optional font metrics for precise calculations
+ * @returns The Y coordinate of the baseline
+ */
+export function calculateBaseline(
+    lineTop: number,
+    fontSize: number,
+    lineHeight: number,
+    fontMetrics?: FontMetrics | null
+): number {
+    let ascent: number;
+
+    if (fontMetrics) {
+        // Use actual font metrics when available
+        const { metrics } = fontMetrics;
+        const unitsPerEm = metrics.unitsPerEm;
+        const ascentUnits = metrics.ascender;
+
+        // Convert font units to pixels
+        ascent = (ascentUnits / unitsPerEm) * fontSize;
+    } else {
+        // Use heuristic when font metrics unavailable
+        ascent = fontSize * DEFAULT_ASCENT_RATIO;
+    }
+
+    // Calculate half-leading (extra space above/below the text)
+    const leading = lineHeight - fontSize;
+    const halfLeading = leading / 2;
+
+    // Baseline is at: lineTop + halfLeading + ascent
+    return lineTop + halfLeading + ascent;
+}
+
+/**
+ * Get font metrics ascent ratio for a given font.
+ * Returns the ratio of ascent to font size.
+ * 
+ * @param fontMetrics - Font metrics
+ * @returns Ascent ratio (typically 0.7-0.9)
+ */
+export function getAscentRatio(fontMetrics: FontMetrics): number {
+    const { metrics } = fontMetrics;
+    return metrics.ascender / metrics.unitsPerEm;
+}
+
+/**
+ * Get font metrics descent ratio for a given font.
+ * Returns the ratio of descent to font size (negative value).
+ * 
+ * @param fontMetrics - Font metrics
+ * @returns Descent ratio (typically -0.2 to -0.3)
+ */
+export function getDescentRatio(fontMetrics: FontMetrics): number {
+    const { metrics } = fontMetrics;
+    return metrics.descender / metrics.unitsPerEm;
+}

package/src/layout/inline/inline-utils.ts

@@ -0,0 +1,94 @@
+import { LayoutNode } from "../../dom/node.js";
+import { Display, FloatMode } from "../../css/enums.js";
+import { resolveLength } from "../../css/length.js";
+
+/**
+ * Resolves the text-align property by walking up the tree to find the first valid value.
+ * Returns undefined if no valid value is found.
+ */
+export function resolveInlineTextAlign(node: LayoutNode): string | undefined {
+    let current: LayoutNode | null = node;
+    while (current) {
+        const value = current.style.textAlign;
+        if (value) {
+            const normalized = value.toLowerCase();
+            if (normalized !== "start" && normalized !== "auto") {
+                return normalized;
+            }
+        }
+        current = current.parent;
+    }
+    return undefined;
+}
+
+/**
+ * Checks if a display mode is an inline-type display.
+ */
+export function isInlineDisplay(display: Display): boolean {
+    switch (display) {
+        case Display.Inline:
+        case Display.InlineBlock:
+        case Display.InlineFlex:
+        case Display.InlineGrid:
+        case Display.InlineTable:
+            return true;
+        default:
+            return false;
+    }
+}
+
+/**
+ * Determines if a node should layout its inline children.
+ */
+export function shouldLayoutInlineChildren(node: LayoutNode): boolean {
+    if (node.children.length === 0) {
+        return false;
+    }
+    if (node.style.display !== Display.Inline) {
+        return false;
+    }
+    return true;
+}
+
+/**
+ * Collects child nodes that participate in inline layout.
+ * Filters out nodes with display:none, floated nodes, and non-inline display modes.
+ */
+export function collectInlineParticipants(node: LayoutNode): LayoutNode[] {
+    const participants: LayoutNode[] = [];
+    for (const child of node.children) {
+        if (child.style.display === Display.None) {
+            continue;
+        }
+        if (child.style.float !== FloatMode.None) {
+            continue;
+        }
+        if (!isInlineDisplay(child.style.display)) {
+            continue;
+        }
+        participants.push(child);
+    }
+    return participants;
+}
+
+/**
+ * Calculates the inline extent (start and end positions) of a node within its container.
+ * Includes margins, borders, and padding in the calculation.
+ */
+export function inlineExtentWithinContainer(node: LayoutNode, referenceWidth: number): { start: number; end: number } {
+    const marginLeft = resolveLength(node.style.marginLeft, referenceWidth, { auto: "zero" });
+    const marginRight = resolveLength(node.style.marginRight, referenceWidth, { auto: "zero" });
+    const paddingLeft = resolveLength(node.style.paddingLeft, referenceWidth, { auto: "zero" });
+    const paddingRight = resolveLength(node.style.paddingRight, referenceWidth, { auto: "zero" });
+    const borderLeft = resolveLength(node.style.borderLeft, referenceWidth, { auto: "zero" });
+    const borderRight = resolveLength(node.style.borderRight, referenceWidth, { auto: "zero" });
+
+    const marginStart = node.box.x - paddingLeft - borderLeft - marginLeft;
+    const width =
+        node.box.contentWidth + paddingLeft + paddingRight + borderLeft + borderRight + marginLeft + marginRight;
+
+    return {
+        start: marginStart,
+        end: marginStart + width,
+    };
+}