pagyra-js 0.0.1

package/src/layout/inline/text-alignment.ts

@@ -0,0 +1,70 @@
+/**
+ * Strategy pattern for text alignment calculations.
+ * Each strategy determines how to offset content within available space.
+ */
+export interface TextAlignmentStrategy {
+    /**
+     * Calculate the horizontal offset for aligning content.
+     * @param lineWidth The actual width of content on the line
+     * @param availableWidth The total available width for the line
+     * @returns The offset (in pixels) to apply to the line start position
+     */
+    calculateOffset(lineWidth: number, availableWidth: number): number;
+}
+
+/**
+ * Left alignment strategy - content starts at the beginning
+ */
+export class LeftAlignment implements TextAlignmentStrategy {
+    calculateOffset(): number {
+        return 0;
+    }
+}
+
+/**
+ * Center alignment strategy - centers content within available space
+ */
+export class CenterAlignment implements TextAlignmentStrategy {
+    calculateOffset(lineWidth: number, availableWidth: number): number {
+        const slack = Math.max(availableWidth - lineWidth, 0);
+        return slack / 2;
+    }
+}
+
+/**
+ * Right/End alignment strategy - content ends at the end of available space
+ */
+export class RightAlignment implements TextAlignmentStrategy {
+    calculateOffset(lineWidth: number, availableWidth: number): number {
+        const slack = Math.max(availableWidth - lineWidth, 0);
+        return slack;
+    }
+}
+
+/**
+ * Justify alignment strategy - same as left for now (full justification handled separately via space adjustment)
+ */
+export class JustifyAlignment implements TextAlignmentStrategy {
+    calculateOffset(): number {
+        return 0;
+    }
+}
+
+/**
+ * Factory function to get the appropriate alignment strategy based on text-align value.
+ * @param textAlign The CSS text-align value (normalized)
+ * @returns The corresponding alignment strategy
+ */
+export function getAlignmentStrategy(textAlign?: string): TextAlignmentStrategy {
+    switch (textAlign) {
+        case "center":
+            return new CenterAlignment();
+        case "right":
+        case "end":
+            return new RightAlignment();
+        case "justify":
+            return new JustifyAlignment();
+        default:
+            return new LeftAlignment();
+    }
+}

package/src/layout/inline/tokenizer.ts

@@ -0,0 +1,195 @@
+import { LayoutNode } from "../../dom/node.js";
+import { Display, FloatMode, WhiteSpace } from "../../css/enums.js";
+import { resolvedLineHeight } from "../../css/style.js";
+import { applyTextTransform } from "../../text/text-transform.js";
+import type { LayoutContext } from "../pipeline/strategy.js";
+import { FontEmbedder } from "../../pdf/font/embedder.js";
+import type { InlineFragment, LayoutItem } from "./types.js";
+import { measureInlineNode, measureSegment, countSpaces, type LayoutCallback } from "./measurement.js";
+import { estimateLineWidth } from "../utils/text-metrics.js";
+
+export function collectInlineFragments(
+    nodes: LayoutNode[],
+    containerWidth: number,
+    context: LayoutContext,
+    layoutCallback: LayoutCallback,
+): InlineFragment[] {
+    const fragments: InlineFragment[] = [];
+
+    const recurse = (node: LayoutNode) => {
+        if (node.style.display === Display.None) {
+            return;
+        }
+        if (node.style.float !== FloatMode.None) {
+            return;
+        }
+
+        if (isAtomicInline(node.style.display)) {
+            const metrics = measureInlineNode(node, containerWidth, context, layoutCallback);
+            fragments.push({ kind: "box", metrics });
+            return;
+        }
+
+        if (node.textContent && node.style.display === Display.Inline) {
+            fragments.push({
+                kind: "text",
+                node,
+                style: node.style,
+                text: node.textContent,
+                preserveLeading: !!node.customData?.preserveLeadingSpace,
+                preserveTrailing: !!node.customData?.preserveTrailingSpace,
+            });
+            return;
+        }
+
+        for (const child of node.children) {
+            if (!isInlineDisplay(child.style.display)) {
+                continue;
+            }
+            recurse(child);
+        }
+    };
+
+    for (const node of nodes) {
+        recurse(node);
+    }
+
+    return fragments;
+}
+
+export function tokenizeFragments(
+    fragments: InlineFragment[],
+    fontEmbedder: FontEmbedder | null,
+): LayoutItem[] {
+    const items: LayoutItem[] = [];
+    for (const fragment of fragments) {
+        if (fragment.kind === "box") {
+            items.push({
+                kind: "box",
+                width: fragment.metrics.outerWidth,
+                height: fragment.metrics.outerHeight,
+                lineHeight: fragment.metrics.outerHeight,
+                metrics: fragment.metrics,
+            });
+            continue;
+        }
+
+        const style = fragment.style;
+        const raw = fragment.text ?? "";
+        if (!raw) {
+            continue;
+        }
+        const effectiveText = applyTextTransform(raw, style.textTransform);
+        const lineHeight = resolvedLineHeight(style);
+        const segments = segmentTextWithWhitespace(effectiveText, style.whiteSpace);
+        for (const segment of segments) {
+            if (segment.kind === "newline") {
+                items.push({
+                    kind: "newline",
+                    width: 0,
+                    height: lineHeight,
+                    lineHeight,
+                });
+                continue;
+            }
+            const width = measureSegment(segment.text, style, fontEmbedder);
+            items.push({
+                kind: segment.kind,
+                width,
+                height: lineHeight,
+                lineHeight,
+                node: fragment.node,
+                style,
+                text: segment.text,
+                spaceCount: segment.kind === "space" ? countSpaces(segment.text) : 0,
+            });
+        }
+    }
+    return items;
+}
+
+export function segmentTextWithWhitespace(
+    text: string,
+    mode: WhiteSpace,
+): { kind: "word" | "space" | "newline"; text: string }[] {
+    const segments: { kind: "word" | "space" | "newline"; text: string }[] = [];
+    const regex = /(\n)|(\s+)|([^\s]+)/g;
+    let match: RegExpExecArray | null;
+    while ((match = regex.exec(text)) !== null) {
+        if (match[1]) {
+            if (mode === WhiteSpace.Pre || mode === WhiteSpace.PreWrap || mode === WhiteSpace.PreLine) {
+                segments.push({ kind: "newline", text: "\n" });
+            } else {
+                segments.push({ kind: "space", text: " " });
+            }
+        } else if (match[2]) {
+            segments.push({ kind: "space", text: match[2] });
+        } else if (match[3]) {
+            segments.push({ kind: "word", text: match[3] });
+        }
+    }
+    return segments;
+}
+
+export function splitWordItemToken(item: LayoutItem, availableWidth: number): [LayoutItem | null, LayoutItem | null] {
+    if (item.kind !== "word" || !item.text || !item.style) {
+        return [item, null];
+    }
+
+    let buffer = "";
+    let bufferWidth = 0;
+    for (const char of Array.from(item.text)) {
+        const candidate = buffer + char;
+        const candidateWidth = estimateLineWidth(candidate, item.style);
+        if (buffer && candidateWidth > availableWidth) {
+            break;
+        }
+        buffer = candidate;
+        bufferWidth = candidateWidth;
+    }
+
+    if (!buffer) {
+        return [item, null];
+    }
+
+    const head: LayoutItem = {
+        ...item,
+        text: buffer,
+        width: bufferWidth,
+    };
+    const tailText = item.text.slice(buffer.length);
+    if (!tailText) {
+        return [head, null];
+    }
+    const tail: LayoutItem = {
+        ...item,
+        text: tailText,
+        width: estimateLineWidth(tailText, item.style),
+    };
+    return [head, tail];
+}
+
+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;
+    }
+}
+
+function isAtomicInline(display: Display): boolean {
+    switch (display) {
+        case Display.InlineBlock:
+        case Display.InlineFlex:
+        case Display.InlineGrid:
+        case Display.InlineTable:
+            return true;
+        default:
+            return false;
+    }
+}

package/src/layout/inline/types.ts

@@ -0,0 +1,76 @@
+import { LayoutNode } from "../../dom/node.js";
+import type { LayoutContext } from "../pipeline/strategy.js";
+import { FloatContext } from "../context/float-context.js";
+
+export interface InlineLayoutOptions {
+    container: LayoutNode;
+    inlineNodes: LayoutNode[];
+    context: LayoutContext;
+    floatContext: FloatContext;
+    contentX: number;
+    contentWidth: number;
+    startY: number;
+}
+
+export interface InlineMetrics {
+    node: LayoutNode;
+    contentWidth: number;
+    contentHeight: number;
+    lineOffset: number;
+    marginLeft: number;
+    marginRight: number;
+    marginTop: number;
+    marginBottom: number;
+    paddingLeft: number;
+    paddingRight: number;
+    paddingTop: number;
+    paddingBottom: number;
+    borderLeft: number;
+    borderRight: number;
+    borderTop: number;
+    borderBottom: number;
+    outerWidth: number;
+    outerHeight: number;
+}
+
+export type InlineFragment =
+    | {
+        kind: "text";
+        node: LayoutNode;
+        style: LayoutNode["style"];
+        text: string;
+        preserveLeading?: boolean;
+        preserveTrailing?: boolean;
+    }
+    | {
+        kind: "box";
+        metrics: InlineMetrics;
+    };
+
+export type LayoutItemKind = "word" | "space" | "box" | "newline";
+
+export interface LayoutItemBase {
+    kind: LayoutItemKind;
+    width: number;
+    height: number;
+    lineHeight: number;
+    node?: LayoutNode;
+    style?: LayoutNode["style"];
+    text?: string;
+    spaceCount?: number;
+}
+
+export interface BoxLayoutItem extends LayoutItemBase {
+    kind: "box";
+    metrics: InlineMetrics;
+}
+
+export type LayoutItem = LayoutItemBase | BoxLayoutItem;
+
+export interface InlineLayoutResult {
+    newCursorY: number;
+}
+
+export function isBoxItem(item: LayoutItem): item is BoxLayoutItem {
+    return item.kind === "box";
+}

package/src/layout/pipeline/context-factory.ts

@@ -0,0 +1,16 @@
+import type { LayoutNode } from "../../dom/node.js";
+import type { LayoutEnvironment } from "../context/layout-environment.js";
+import type { LayoutContext } from "./strategy.js";
+
+export interface LayoutContextFactory {
+  create(env: LayoutEnvironment, dispatcher: (node: LayoutNode) => void): LayoutContext;
+}
+
+export class DefaultLayoutContextFactory implements LayoutContextFactory {
+  create(env: LayoutEnvironment, dispatcher: (node: LayoutNode) => void): LayoutContext {
+    return {
+      env,
+      layoutChild: dispatcher,
+    };
+  }
+}

package/src/layout/pipeline/default-engine.ts

@@ -0,0 +1,24 @@
+import { LayoutEngine } from "./engine.js";
+import type { LayoutStrategy } from "./strategy.js";
+import { DisplayNoneStrategy } from "../strategies/display-none.js";
+import { BlockLayoutStrategy } from "../strategies/block.js";
+import { FlexLayoutStrategy } from "../strategies/flex.js";
+import { GridLayoutStrategy } from "../strategies/grid.js";
+import { TableLayoutStrategy } from "../strategies/table.js";
+import { FallbackStrategy } from "../strategies/fallback.js";
+import { InlineLayoutStrategy } from "../strategies/inline.js";
+import { ImageLayoutStrategy } from "../strategies/image.js";
+
+export function createDefaultLayoutEngine(): LayoutEngine {
+  const strategies: LayoutStrategy[] = [
+    new DisplayNoneStrategy(),
+    new ImageLayoutStrategy(),
+    new InlineLayoutStrategy(),
+    new BlockLayoutStrategy(),
+    new FlexLayoutStrategy(),
+    new GridLayoutStrategy(),
+    new TableLayoutStrategy(),
+    new FallbackStrategy(),
+  ];
+  return new LayoutEngine({ strategies });
+}

package/src/layout/pipeline/engine.ts

@@ -0,0 +1,59 @@
+import { LayoutNode } from "../../dom/node.js";
+import type { Viewport } from "../../geometry/box.js";
+import { LayoutEnvironment } from "../context/layout-environment.js";
+import type { FontEmbedder } from "../../pdf/font/embedder.js";
+import type { LayoutStrategy, LayoutContext } from "./strategy.js";
+import type { LayoutContextFactory } from "./context-factory.js";
+import { DefaultLayoutContextFactory } from "./context-factory.js";
+import type { TextMetricsInitializer } from "./text-metrics-initializer.js";
+import { DefaultTextMetricsInitializer } from "./text-metrics-initializer.js";
+import type { OutOfFlowManager } from "./out-of-flow-manager.js";
+import { DefaultOutOfFlowManager } from "./out-of-flow-manager.js";
+
+export interface LayoutEngineOptions {
+  strategies: readonly LayoutStrategy[];
+  contextFactory?: LayoutContextFactory;
+  textMetricsInitializer?: TextMetricsInitializer;
+  outOfFlowManager?: OutOfFlowManager;
+}
+
+export class LayoutEngine {
+  private readonly strategies: readonly LayoutStrategy[];
+  private readonly contextFactory: LayoutContextFactory;
+  private readonly textMetricsInitializer: TextMetricsInitializer;
+  private readonly outOfFlowManager: OutOfFlowManager;
+
+  constructor(options: LayoutEngineOptions) {
+    this.strategies = options.strategies;
+    this.contextFactory = options.contextFactory ?? new DefaultLayoutContextFactory();
+    this.textMetricsInitializer = options.textMetricsInitializer ?? new DefaultTextMetricsInitializer();
+    this.outOfFlowManager = options.outOfFlowManager ?? new DefaultOutOfFlowManager();
+  }
+
+  layoutTree(root: LayoutNode, viewport: Viewport, fontEmbedder: FontEmbedder | null): LayoutNode {
+    const environment = new LayoutEnvironment({ viewport, fontEmbedder });
+    const context: LayoutContext = this.contextFactory.create(environment, (node: LayoutNode) => {
+      this.layoutNodeInternal(node, context);
+    });
+
+    this.textMetricsInitializer.assign(root, fontEmbedder);
+
+    root.box.x = 0;
+    root.box.y = 0;
+    root.box.contentWidth = viewport.width;
+    root.box.contentHeight = viewport.height;
+
+    this.layoutNodeInternal(root, context);
+    this.outOfFlowManager.layoutOutOfFlow(root, context, (node, ctx) => this.layoutNodeInternal(node, ctx));
+    // Fragmentation is not yet implemented - placeholder for future expansion.
+    return root;
+  }
+
+  private layoutNodeInternal(node: LayoutNode, context: LayoutContext): void {
+    const strategy = this.strategies.find((s) => s.canLayout(node));
+    if (!strategy) {
+      throw new Error(`No layout strategy available for display: ${node.style.display}`);
+    }
+    strategy.layout(node, context);
+  }
+}

package/src/layout/pipeline/layout-tree.ts

@@ -0,0 +1,13 @@
+import { LayoutNode } from "../../dom/node.js";
+import type { Viewport } from "../../geometry/box.js";
+import { createDefaultLayoutEngine } from "./default-engine.js";
+import type { FontEmbedder } from "../../pdf/font/embedder.js";
+
+export function layoutTree(
+  root: LayoutNode,
+  viewport: Viewport,
+  fontEmbedder: FontEmbedder | null = null
+): LayoutNode {
+  const engine = createDefaultLayoutEngine();
+  return engine.layoutTree(root, viewport, fontEmbedder);
+}

package/src/layout/pipeline/out-of-flow-manager.ts

@@ -0,0 +1,73 @@
+import type { LayoutNode } from "../../dom/node.js";
+import { Position } from "../../css/enums.js";
+import { resolveLength, isAutoLength } from "../../css/length.js";
+import type { LayoutContext } from "./strategy.js";
+import { containingBlock } from "../utils/node-math.js";
+import type { LayoutEnvironment } from "../context/layout-environment.js";
+
+export interface OutOfFlowManager {
+  layoutOutOfFlow(
+    root: LayoutNode,
+    context: LayoutContext,
+    dispatcher: (node: LayoutNode, context: LayoutContext) => void
+  ): void;
+}
+
+export class DefaultOutOfFlowManager implements OutOfFlowManager {
+  layoutOutOfFlow(
+    root: LayoutNode,
+    context: LayoutContext,
+    dispatcher: (node: LayoutNode, context: LayoutContext) => void
+  ): void {
+    const positionedNodes: LayoutNode[] = [];
+    root.walk((node) => {
+      if (node.style.position === Position.Absolute || node.style.position === Position.Fixed) {
+        positionedNodes.push(node);
+      }
+    });
+    for (const node of positionedNodes) {
+      dispatcher(node, context);
+      this.positionAbsoluteOrFixed(node, context.env);
+    }
+  }
+
+  private positionAbsoluteOrFixed(node: LayoutNode, env: LayoutEnvironment): void {
+    const cb = containingBlock(node, env.viewport);
+    const widthRef = cb.width;
+    const heightRef = cb.height;
+
+    const resolveInset = (value: typeof node.style.left, reference: number): number | undefined => {
+      if (value === undefined || isAutoLength(value)) {
+        return undefined;
+      }
+      return resolveLength(value, reference, { auto: "zero" });
+    };
+
+    const left = resolveInset(node.style.left, widthRef);
+    const right = resolveInset(node.style.right, widthRef);
+    const top = resolveInset(node.style.top, heightRef);
+    const bottom = resolveInset(node.style.bottom, heightRef);
+
+    const borderBoxWidth = node.box.borderBoxWidth || node.box.contentWidth;
+    const borderBoxHeight = node.box.borderBoxHeight || node.box.contentHeight;
+    const measuredWidth = node.box.marginBoxWidth || borderBoxWidth;
+    const measuredHeight = node.box.marginBoxHeight || borderBoxHeight;
+
+    let x = cb.x;
+    if (left !== undefined) {
+      x = cb.x + left;
+    } else if (right !== undefined) {
+      x = cb.x + cb.width - measuredWidth - right;
+    }
+
+    let y = cb.y;
+    if (top !== undefined) {
+      y = cb.y + top;
+    } else if (bottom !== undefined) {
+      y = cb.y + cb.height - measuredHeight - bottom;
+    }
+
+    node.box.x = x;
+    node.box.y = y;
+  }
+}

package/src/layout/pipeline/strategy.ts

@@ -0,0 +1,12 @@
+import { LayoutNode } from "../../dom/node.js";
+import { LayoutEnvironment } from "../context/layout-environment.js";
+
+export interface LayoutContext {
+  readonly env: LayoutEnvironment;
+  layoutChild(node: LayoutNode): void;
+}
+
+export interface LayoutStrategy {
+  canLayout(node: LayoutNode): boolean;
+  layout(node: LayoutNode, context: LayoutContext): void;
+}

package/src/layout/pipeline/text-metrics-initializer.ts

@@ -0,0 +1,13 @@
+import type { LayoutNode } from "../../dom/node.js";
+import type { FontEmbedder } from "../../pdf/font/embedder.js";
+import { assignIntrinsicTextMetrics } from "../utils/text-metrics.js";
+
+export interface TextMetricsInitializer {
+  assign(root: LayoutNode, fontEmbedder: FontEmbedder | null): void;
+}
+
+export class DefaultTextMetricsInitializer implements TextMetricsInitializer {
+  assign(root: LayoutNode, fontEmbedder: FontEmbedder | null): void {
+    assignIntrinsicTextMetrics(root, fontEmbedder);
+  }
+}