pagyra-js 0.0.1

package/src/geometry/box.ts

@@ -0,0 +1,48 @@
+export class Box {
+  x = 0;
+  y = 0;
+  contentWidth = 0;
+  contentHeight = 0;
+  scrollWidth = 0;
+  scrollHeight = 0;
+  borderBoxWidth = 0;
+  borderBoxHeight = 0;
+  marginBoxWidth = 0;
+  marginBoxHeight = 0;
+  baseline = 0;
+  usedMarginLeft?: number;
+  usedMarginRight?: number;
+
+  clone(): Box {
+    const box = new Box();
+    box.x = this.x;
+    box.y = this.y;
+    box.contentWidth = this.contentWidth;
+    box.contentHeight = this.contentHeight;
+    box.scrollWidth = this.scrollWidth;
+    box.scrollHeight = this.scrollHeight;
+    box.borderBoxWidth = this.borderBoxWidth;
+    box.borderBoxHeight = this.borderBoxHeight;
+    box.marginBoxWidth = this.marginBoxWidth;
+    box.marginBoxHeight = this.marginBoxHeight;
+    box.baseline = this.baseline;
+    box.usedMarginLeft = this.usedMarginLeft;
+    box.usedMarginRight = this.usedMarginRight;
+    return box;
+  }
+}
+
+import type { FontEmbedder } from "../pdf/font/embedder.js";
+
+export interface Viewport {
+  readonly width: number;
+  readonly height: number;
+  readonly fontEmbedder?: FontEmbedder | null;
+}
+
+export interface ContainingBlock {
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+}

package/src/geometry/matrix.ts

@@ -0,0 +1,59 @@
+export interface Matrix {
+  a: number;
+  b: number;
+  c: number;
+  d: number;
+  e: number;
+  f: number;
+}
+
+/**
+ * Identity matrix (SVG/PDF convention: matrix(a,b,c,d,e,f) maps (x,y) -> (a*x + c*y + e, b*x + d*y + f))
+ */
+export function identityMatrix(): Matrix {
+  return { a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 };
+}
+
+/**
+ * Multiply two matrices in the conventional SVG 3x3 representation.
+ * Result = m1 * m2
+ */
+export function multiplyMatrices(m1: Matrix, m2: Matrix): Matrix {
+  return {
+    a: m1.a * m2.a + m1.c * m2.b,
+    b: m1.b * m2.a + m1.d * m2.b,
+    c: m1.a * m2.c + m1.c * m2.d,
+    d: m1.b * m2.c + m1.d * m2.d,
+    e: m1.a * m2.e + m1.c * m2.f + m1.e,
+    f: m1.b * m2.e + m1.d * m2.f + m1.f,
+  };
+}
+
+/**
+ * Apply a matrix to a point (x,y) and return transformed coordinates.
+ */
+export function applyMatrixToPoint(matrix: Matrix, x: number, y: number): { x: number; y: number } {
+  return {
+    x: matrix.a * x + matrix.c * y + matrix.e,
+    y: matrix.b * x + matrix.d * y + matrix.f,
+  };
+}
+
+/**
+ * Compute an approximate stroke scale for stroke-width adjustments based on a transform.
+ * This mirrors prior behavior used by the codebase but kept generic here.
+ */
+export function computeStrokeScale(viewportMatrix: Matrix, transform: Matrix): number {
+  const combined = multiplyMatrices(viewportMatrix, transform);
+  const det = combined.a * combined.d - combined.b * combined.c;
+  if (Number.isFinite(det) && det !== 0) {
+    const scale = Math.sqrt(Math.abs(det));
+    if (scale > 0) {
+      return scale;
+    }
+  }
+  const col1 = Math.hypot(combined.a, combined.b);
+  const col2 = Math.hypot(combined.c, combined.d);
+  const average = (col1 + col2) / 2;
+  return average > 0 ? average : 1;
+}

package/src/html/css/parse-css.ts

@@ -0,0 +1,85 @@
+import * as cssParser from "css";
+import { createSelectorMatcher } from "../../css/selectors/matcher.js";
+
+export type DomEl = any; // adapt to your DOM type, e.g. HTMLElement or any
+
+export interface CssRuleEntry {
+  selector: string;
+  declarations: Record<string, string>;
+  match: (el: DomEl) => boolean;
+}
+
+export interface FontFaceRule {
+  declarations: Record<string, string>;
+}
+
+export interface ParsedCss {
+  styleRules: CssRuleEntry[];
+  fontFaceRules: FontFaceRule[];
+}
+
+type CssDeclaration = cssParser.Declaration;
+type CssRule = cssParser.Rule;
+type CssFontFaceRule = cssParser.FontFace;
+
+export function buildCssRules(cssText: string): ParsedCss {
+  const result: ParsedCss = { styleRules: [], fontFaceRules: [] };
+  if (!cssText.trim()) {
+    return result;
+  }
+  const stylesheet = cssParser.parse(cssText);
+  const rules = stylesheet.stylesheet?.rules ?? [];
+
+  for (const rule of rules) {
+    if (rule.type === "rule") {
+      const typedRule = rule as CssRule;
+      const selectors = typedRule.selectors ?? [];
+      const decls = typedRule.declarations ?? [];
+      const declarations: Record<string, string> = {};
+      for (const decl of decls) {
+        if (decl.type !== "declaration") continue;
+        const declaration = decl as CssDeclaration;
+        if (!declaration.property || declaration.value === undefined) {
+          continue;
+        }
+        const prop = declaration.property.trim();
+        if (prop.startsWith('--')) {
+          declarations[prop] = declaration.value.trim();
+        } else {
+          declarations[prop.toLowerCase()] = declaration.value.trim();
+        }
+      }
+      for (const selector of selectors) {
+        const matcher = createSelectorMatcher(selector.trim());
+        if (!matcher) {
+          console.warn(`Invalid CSS selector: ${selector.trim()}`);
+          continue;
+        }
+        result.styleRules.push({ selector, declarations: { ...declarations }, match: matcher });
+      }
+    } else if (rule.type === "font-face") {
+      const typedRule = rule as CssFontFaceRule;
+      const decls = typedRule.declarations ?? [];
+      const declarations: Record<string, string> = {};
+      for (const decl of decls) {
+        if (decl.type !== "declaration") continue;
+        const declaration = decl as CssDeclaration;
+        if (!declaration.property || declaration.value === undefined) {
+          continue;
+        }
+        const prop = declaration.property.trim();
+        if (prop.startsWith('--')) {
+          declarations[prop] = declaration.value.trim();
+        } else {
+          declarations[prop.toLowerCase()] = declaration.value.trim();
+        }
+      }
+      result.fontFaceRules.push({ declarations });
+    }
+  }
+  return result;
+}
+
+export function parseCss(cssText: string): ParsedCss {
+  return buildCssRules(cssText);
+}

package/src/html/dom-converter.ts

@@ -0,0 +1,433 @@
+// src/html/dom-converter.ts
+
+import { type DomEl, type CssRuleEntry } from "./css/parse-css.js";
+import { LayoutNode, type LayoutNodeOptions } from "../dom/node.js";
+import { ComputedStyle } from "../css/style.js";
+import { cloneLineHeight } from "../css/line-height.js";
+import { computeStyleForElement } from "../css/compute-style.js";
+import { convertImageElement, resolveImageSource, canLoadHttpResource, type ConversionContext } from "./image-converter.js";
+import { Display, WhiteSpace } from "../css/enums.js";
+import { parseSvg } from "../svg/parser.js";
+import type { SvgRootNode } from "../svg/types.js";
+import { ImageService } from "../image/image-service.js";
+import type { ImageInfo } from "../image/types.js";
+import { log } from "../logging/debug.js";
+import { decodeBase64ToUint8Array } from "../utils/base64.js";
+
+function findMeaningfulSibling(start: Node | null, direction: "previous" | "next"): Node | null {
+  let current = start;
+  const getNext = direction === "previous"
+    ? (node: Node) => node.previousSibling
+    : (node: Node) => node.nextSibling;
+  while (current) {
+    if (current.nodeType === current.TEXT_NODE) {
+      const content = current.textContent ?? "";
+      if (content.replace(/\s+/g, "").length > 0) {
+        return current;
+      }
+    } else if (current.nodeType === current.ELEMENT_NODE) {
+      const tagName = (current as Element).tagName.toLowerCase();
+      if (!["script", "style", "meta", "link"].includes(tagName)) {
+        return current;
+      }
+    }
+    current = getNext(current);
+  }
+  return null;
+}
+
+function hasMeaningfulPreviousSibling(node: Node): boolean {
+  return findMeaningfulSibling(node.previousSibling, "previous") !== null;
+}
+
+function hasMeaningfulNextSibling(node: Node): boolean {
+  return findMeaningfulSibling(node.nextSibling, "next") !== null;
+}
+
+function isInlineDisplay(display: Display): boolean {
+  return (
+    display === Display.Inline ||
+    display === Display.InlineBlock ||
+    display === Display.InlineFlex ||
+    display === Display.InlineGrid ||
+    display === Display.InlineTable
+  );
+}
+
+function shouldPreserveCollapsedWhitespace(children: LayoutNode[], style: ComputedStyle): boolean {
+  if (style.whiteSpace === WhiteSpace.Pre || style.whiteSpace === WhiteSpace.PreWrap) {
+    return true;
+  }
+  const lastChild = children.length > 0 ? children[children.length - 1] : null;
+  return !!lastChild && isInlineDisplay(lastChild.style.display);
+}
+
+function extractCssUrl(raw: string): string {
+  const trimmed = raw.trim();
+  if (!trimmed) {
+    return "";
+  }
+  if (trimmed.startsWith("url(") && trimmed.endsWith(")")) {
+    let inner = trimmed.slice(4, -1).trim();
+    if (
+      (inner.startsWith("'") && inner.endsWith("'")) ||
+      (inner.startsWith("\"") && inner.endsWith("\""))
+    ) {
+      inner = inner.slice(1, -1);
+    }
+    return inner;
+  }
+  if (
+    (trimmed.startsWith("'") && trimmed.endsWith("'")) ||
+    (trimmed.startsWith("\"") && trimmed.endsWith("\""))
+  ) {
+    return trimmed.slice(1, -1);
+  }
+  return trimmed;
+}
+
+function isDataUri(value: string): boolean {
+  return /^data:/i.test(value);
+}
+
+function isHttpUrl(value: string): boolean {
+  return /^https?:\/\//i.test(value);
+}
+
+function parseSpan(raw: string | null): number | undefined {
+  if (!raw) return undefined;
+  const parsed = Number.parseInt(raw, 10);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : undefined;
+}
+
+async function loadBackgroundImage(
+  cssUrl: string,
+  context: ConversionContext,
+): Promise<{ info: ImageInfo; resolvedSrc: string } | null> {
+  const imageService = ImageService.getInstance(context.environment);
+  const resolvedSrc = resolveImageSource(cssUrl, context);
+
+  if (isHttpUrl(resolvedSrc) && !canLoadHttpResource(resolvedSrc, context)) {
+    log('dom-converter', 'warn', `Skipping remote background image (${resolvedSrc}); remote assets are not supported.`);
+    return null;
+  }
+
+  try {
+    let imageInfo: ImageInfo;
+    if (isDataUri(resolvedSrc)) {
+      const match = resolvedSrc.match(/^data:image\/(.+);base64,(.+)$/);
+      if (!match) {
+        log('dom-converter', 'warn', `Unsupported data URI format for background image: ${cssUrl}`);
+        return null;
+      }
+      const bytes = decodeBase64ToUint8Array(match[2]);
+      const copy = bytes.slice();
+      imageInfo = await imageService.decodeImage(copy.buffer);
+    } else {
+      imageInfo = await imageService.loadImage(resolvedSrc);
+    }
+    return { info: imageInfo, resolvedSrc };
+  } catch (error) {
+    log('dom-converter', 'warn', `Failed to load background image ${cssUrl}:`, error instanceof Error ? error.message : String(error));
+    return null;
+  }
+}
+
+async function hydrateBackgroundImages(style: ComputedStyle, context: ConversionContext): Promise<void> {
+  if (!style.backgroundLayers || style.backgroundLayers.length === 0) {
+    return;
+  }
+
+  for (const layer of style.backgroundLayers) {
+    if (layer.kind !== "image") {
+      continue;
+    }
+    if (layer.imageInfo) {
+      continue;
+    }
+    const cssUrl = extractCssUrl(layer.url);
+    if (!cssUrl) {
+      continue;
+    }
+
+    const loaded = await loadBackgroundImage(cssUrl, context);
+    if (!loaded) {
+      continue;
+    }
+    layer.originalUrl = cssUrl;
+    layer.resolvedUrl = loaded.resolvedSrc;
+    layer.imageInfo = loaded.info;
+  }
+}
+
+export async function convertDomNode(
+  node: Node,
+  cssRules: CssRuleEntry[],
+  parentStyle: ComputedStyle,
+  context: ConversionContext,
+): Promise<LayoutNode | null> {
+  log('dom-converter', 'debug', `convertDomNode - entering function for node type: ${node.nodeType}, tagName: ${(node as any).tagName || 'text node'}`);
+  if (node.nodeType === node.TEXT_NODE) {
+    const raw = node.textContent ?? "";
+    const collapsed = raw.replace(/\s+/g, " ").normalize("NFC");
+    const trimmed = collapsed.trim();
+
+    const hasPrev = hasMeaningfulPreviousSibling(node);
+    const hasNext = hasMeaningfulNextSibling(node);
+
+    if (trimmed.length === 0) {
+      const keepSpace = hasPrev && hasNext;
+      if (!keepSpace) {
+        return null;
+      }
+      log('dom-converter', 'debug', "convertDomNode - processing text node: (single space)");
+      const textStyle = new ComputedStyle({
+        display: Display.Inline,
+        color: parentStyle.color,
+        fontSize: parentStyle.fontSize,
+        lineHeight: cloneLineHeight(parentStyle.lineHeight),
+        fontFamily: parentStyle.fontFamily,
+        fontWeight: parentStyle.fontWeight,
+        fontStyle: parentStyle.fontStyle,
+        letterSpacing: parentStyle.letterSpacing,
+        wordSpacing: parentStyle.wordSpacing,
+        textDecorationLine: parentStyle.textDecorationLine,
+        textDecorationColor: parentStyle.textDecorationColor,
+        textDecorationStyle: parentStyle.textDecorationStyle,
+        textTransform: parentStyle.textTransform,
+        transform: parentStyle.transform as any,
+        textShadows: parentStyle.textShadows,
+      });
+      return new LayoutNode(textStyle, [], {
+        textContent: " ",
+        customData: {
+          preserveLeadingSpace: true,
+          preserveTrailingSpace: true,
+        },
+      });
+    }
+
+    let text = trimmed;
+    const preserveLeading = collapsed.startsWith(" ") && hasPrev;
+    const preserveTrailing = collapsed.endsWith(" ") && hasNext;
+
+    if (preserveLeading) {
+      text = " " + text;
+    }
+    if (preserveTrailing) {
+      text = text + " ";
+    }
+
+    log('dom-converter', 'debug', "convertDomNode - processing text node:", text.substring(0, 50) + (text.length > 50 ? '...' : ''));
+    const textStyle = new ComputedStyle({
+      display: Display.Inline,
+      color: parentStyle.color,
+      fontSize: parentStyle.fontSize,
+      lineHeight: cloneLineHeight(parentStyle.lineHeight),
+      fontFamily: parentStyle.fontFamily,
+      fontWeight: parentStyle.fontWeight,
+      fontStyle: parentStyle.fontStyle,
+      letterSpacing: parentStyle.letterSpacing,
+      wordSpacing: parentStyle.wordSpacing,
+      textDecorationLine: parentStyle.textDecorationLine,
+      textDecorationColor: parentStyle.textDecorationColor,
+      textDecorationStyle: parentStyle.textDecorationStyle,
+      textTransform: parentStyle.textTransform,
+      transform: parentStyle.transform as any,
+      textShadows: parentStyle.textShadows,
+    });
+    return new LayoutNode(textStyle, [], {
+      textContent: text,
+      customData: {
+        preserveLeadingSpace: preserveLeading,
+        preserveTrailingSpace: preserveTrailing,
+      },
+    });
+  }
+
+  if (node.nodeType !== node.ELEMENT_NODE) return null;
+
+  const element = node as DomEl;
+  const tagName = element.tagName.toLowerCase();
+  log('dom-converter', 'debug', `convertDomNode - processing element: ${tagName}, with style attr: ${element.getAttribute("style")}`);
+  if (tagName === "script" || tagName === "style") return null;
+
+  // Handle image elements
+  if (tagName === "img") {
+    return await convertImageElement(element, cssRules, parentStyle, context);
+  }
+
+  if (tagName === "svg") {
+    const ownStyle = computeStyleForElement(element, cssRules, parentStyle, context.units, context.rootFontSize);
+    log('dom-converter', 'debug', "convertDomNode - computed style backgroundLayers:", ownStyle.backgroundLayers);
+    const svgRoot = parseSvg(element, { warn: (message) => log('svg-parser', 'warn', message) });
+    if (!svgRoot) {
+      return new LayoutNode(ownStyle, [], { tagName });
+    }
+    const intrinsic = resolveSvgIntrinsicSize(svgRoot, element);
+    return new LayoutNode(ownStyle, [], {
+      tagName,
+      intrinsicInlineSize: intrinsic.width,
+      intrinsicBlockSize: intrinsic.height,
+      customData: {
+        svg: {
+          root: svgRoot,
+          intrinsicWidth: intrinsic.width,
+          intrinsicHeight: intrinsic.height,
+          // Propagate resource roots so SVG rendering can resolve image hrefs
+          resourceBaseDir: context && (context as any).resourceBaseDir,
+          assetRootDir: context && (context as any).assetRootDir,
+        },
+      },
+    });
+  }
+
+  if (tagName === "br") {
+    const textStyle = new ComputedStyle({
+      display: Display.Inline,
+      color: parentStyle.color,
+      fontSize: parentStyle.fontSize,
+      lineHeight: cloneLineHeight(parentStyle.lineHeight),
+      fontFamily: parentStyle.fontFamily,
+      fontWeight: parentStyle.fontWeight,
+      fontStyle: parentStyle.fontStyle,
+      textTransform: parentStyle.textTransform,
+    });
+    return new LayoutNode(textStyle, [], { textContent: "\n" });
+  }
+
+  // ✅ Coalescing de #text
+  const ownStyle = computeStyleForElement(element, cssRules, parentStyle, context.units, context.rootFontSize);
+  await hydrateBackgroundImages(ownStyle, context);
+  log('dom-converter', 'debug', "convertDomNode - computed style backgroundLayers:", ownStyle.backgroundLayers);
+  
+  // Log if this is the div element that should have the gradient
+  if (element.tagName.toLowerCase() === 'div' && element.getAttribute("style")?.includes('linear-gradient')) {
+    log('dom-converter', 'debug', "Found div with gradient style!");
+  }
+  const layoutChildren: LayoutNode[] = [];
+  let textBuf = "";
+
+  for (const child of Array.from(element.childNodes) as Node[]) {
+    if (child.nodeType === child.TEXT_NODE) {
+      textBuf += child.textContent ?? "";
+      continue;
+    }
+    if (textBuf) {
+      let normalized = textBuf.replace(/\s+/g, " ").normalize("NFC");
+      if (normalized.trim().length === 0) {
+        normalized = shouldPreserveCollapsedWhitespace(layoutChildren, ownStyle) ? " " : "";
+      }
+      if (normalized) {
+        const preserveLeading = normalized.startsWith(" ");
+        const preserveTrailing = normalized.endsWith(" ");
+        layoutChildren.push(new LayoutNode(new ComputedStyle({
+          display: Display.Inline,
+          color: ownStyle.color,
+          fontSize: ownStyle.fontSize,
+          lineHeight: cloneLineHeight(ownStyle.lineHeight),
+          fontFamily: ownStyle.fontFamily,
+          fontWeight: ownStyle.fontWeight,
+          fontStyle: ownStyle.fontStyle,
+          letterSpacing: ownStyle.letterSpacing,
+          wordSpacing: ownStyle.wordSpacing,
+          overflowWrap: ownStyle.overflowWrap,
+          whiteSpace: ownStyle.whiteSpace,
+          textDecorationLine: ownStyle.textDecorationLine,
+          textDecorationColor: ownStyle.textDecorationColor,
+          textDecorationStyle: ownStyle.textDecorationStyle,
+          textTransform: ownStyle.textTransform,
+          transform: ownStyle.transform as any,
+          textShadows: ownStyle.textShadows,
+        }), [], {
+          textContent: normalized,
+          customData: {
+            preserveLeadingSpace: preserveLeading,
+            preserveTrailingSpace: preserveTrailing,
+          },
+        }));
+      }
+      textBuf = "";
+    }
+    const sub = await convertDomNode(child, cssRules, ownStyle, context);
+    if (sub) layoutChildren.push(sub);
+  }
+  if (textBuf) {
+    let normalized = textBuf.replace(/\s+/g, " ").normalize("NFC");
+    if (normalized.trim().length === 0) {
+      normalized = shouldPreserveCollapsedWhitespace(layoutChildren, ownStyle) ? " " : "";
+    }
+    if (normalized) {
+      const preserveLeading = normalized.startsWith(" ");
+      const preserveTrailing = normalized.endsWith(" ");
+      layoutChildren.push(new LayoutNode(new ComputedStyle({
+        display: Display.Inline,
+        color: ownStyle.color,
+        fontSize: ownStyle.fontSize,
+        lineHeight: cloneLineHeight(ownStyle.lineHeight),
+        fontFamily: ownStyle.fontFamily,
+        fontWeight: ownStyle.fontWeight,
+        fontStyle: ownStyle.fontStyle,
+        letterSpacing: ownStyle.letterSpacing,
+        wordSpacing: ownStyle.wordSpacing,
+        overflowWrap: ownStyle.overflowWrap,
+        whiteSpace: ownStyle.whiteSpace,
+        textDecorationLine: ownStyle.textDecorationLine,
+        textDecorationColor: ownStyle.textDecorationColor,
+        textDecorationStyle: ownStyle.textDecorationStyle,
+        textTransform: ownStyle.textTransform,
+        transform: ownStyle.transform as any,
+        textShadows: ownStyle.textShadows,
+      }), [], {
+        textContent: normalized,
+        customData: {
+          preserveLeadingSpace: preserveLeading,
+          preserveTrailingSpace: preserveTrailing,
+        },
+      }));
+    }
+  }
+
+  // Preserve the original HTML ID
+  const id = element.getAttribute("id");
+  const options: LayoutNodeOptions = { tagName };
+  if (tagName === "td" || tagName === "th") {
+    options.tableColSpan = parseSpan(element.getAttribute("colspan")) ?? 1;
+    options.tableRowSpan = parseSpan(element.getAttribute("rowspan")) ?? 1;
+  }
+  if (id) {
+    options.customData = { ...options.customData, id };
+  }
+  return new LayoutNode(ownStyle, layoutChildren, options);
+}
+
+function resolveSvgIntrinsicSize(svg: SvgRootNode, element: Element): { width: number; height: number } {
+  let width = svg.width;
+  let height = svg.height;
+  if (svg.viewBox) {
+    if (!width || width <= 0) {
+      width = svg.viewBox.width;
+    }
+    if (!height || height <= 0) {
+      height = svg.viewBox.height;
+    }
+  }
+  if (!width || width <= 0) {
+    width = attributeToNumber(element.getAttribute("width")) ?? 100;
+  }
+  if (!height || height <= 0) {
+    height = attributeToNumber(element.getAttribute("height")) ?? width;
+  }
+  return {
+    width: Number.isFinite(width) && width > 0 ? width : 100,
+    height: Number.isFinite(height) && height > 0 ? height : 100,
+  };
+}
+
+function attributeToNumber(raw: string | null): number | undefined {
+  if (!raw) {
+    return undefined;
+  }
+  const value = Number.parseFloat(raw);
+  return Number.isFinite(value) ? value : undefined;
+}