buninu-browser 0.0.2

package/lib/render-tree/index.js

@@ -0,0 +1,263 @@
+import { extractSvg } from "./svg.js";
+import { controlKind } from "../style/computed-style.js";
+
+const PLACEHOLDER_COLOR = "rgba(117, 117, 117, 1)";
+const CHECKED_COLOR = "rgba(0, 117, 255, 1)";
+const NON_RENDERED_ELEMENTS = new Set([
+  "BASE",
+  "BASEFONT",
+  "BGSOUND",
+  "HEAD",
+  "LINK",
+  "META",
+  "NOFRAMES",
+  "SCRIPT",
+  "STYLE",
+  "NOSCRIPT",
+  "TEMPLATE",
+  "TITLE",
+]);
+
+const BLOCK_ELEMENTS = new Set([
+  "ADDRESS", "ARTICLE", "ASIDE", "BLOCKQUOTE", "BODY", "DIV", "DL", "FIELDSET",
+  "FIGCAPTION", "FIGURE", "FOOTER", "FORM", "H1", "H2", "H3", "H4", "H5", "H6",
+  "HEADER", "HR", "LI", "MAIN", "NAV", "OL", "P", "PRE", "SECTION", "TABLE", "UL",
+]);
+
+/**
+ * Builds the engine-owned render representation from the authoritative DOM.
+ * IDs remain stable when the same DOM node appears in a later generation.
+ */
+export class RenderTreeBuilder {
+  #ids = new WeakMap();
+  #pseudoKeys = new WeakMap();
+  #nextId = 1;
+  #generation = 0;
+
+  build(document, styleEngine = null, resources = null) {
+    const nodesById = new Map();
+    const body = document.body;
+    let root = body
+      ? this.#element(body, nodesById, true, styleEngine, resources)
+      : this.#node(document, "root", nodesById, { tagName: null, children: [] });
+    // DOM scripts can append visible elements directly to <html>, outside
+    // <body> (for example casty's fixed-position click marker). Include those
+    // siblings without changing the body's established root layout.
+    if (body && document.documentElement) {
+      const siblings = [...document.documentElement.children]
+        .filter((element) => element !== body && element.tagName !== "HEAD")
+        .map((element) => this.#element(element, nodesById, false, styleEngine, resources))
+        .filter(Boolean);
+      if (siblings.length) {
+        root = Object.freeze({ ...root, children: Object.freeze([...root.children, ...siblings]) });
+        nodesById.set(root.id, root);
+      }
+    }
+
+    return Object.freeze({
+      generation: ++this.#generation,
+      root,
+      nodesById,
+    });
+  }
+
+  #id(domNode) {
+    let id = this.#ids.get(domNode);
+    if (id === undefined) {
+      id = this.#nextId++;
+      this.#ids.set(domNode, id);
+    }
+    return id;
+  }
+
+  #node(domNode, type, nodesById, properties, idKey = domNode) {
+    const node = Object.freeze({
+      id: this.#id(idKey),
+      type,
+      domNode,
+      ...properties,
+    });
+    nodesById.set(node.id, node);
+    return node;
+  }
+
+  /**
+   * Form controls show their current state, not their DOM children: a
+   * textarea or text input its value (or placeholder), a select its selected
+   * option, an input button its label, and a checked checkbox or radio a mark.
+   */
+  #control(element, control, style, nodesById) {
+    let keys = this.#pseudoKeys.get(element);
+    if (!keys) this.#pseudoKeys.set(element, keys = { before: {}, after: {}, beforeText: {}, afterText: {} });
+    keys.value ??= {};
+    let boxStyle = style;
+    let text = "";
+    let textStyle = style;
+    if (control === "checkbox" || control === "radio") {
+      if (element.checked) {
+        boxStyle = Object.freeze({
+          ...style,
+          backgroundColor: CHECKED_COLOR,
+          borderColors: Object.freeze([CHECKED_COLOR, CHECKED_COLOR, CHECKED_COLOR, CHECKED_COLOR]),
+          color: "rgba(255, 255, 255, 1)",
+          fontSize: 10,
+          fontWeight: 700,
+          lineHeight: 11,
+          lineHeightFactor: null,
+          textAlign: "center",
+          whiteSpace: "pre",
+        });
+        textStyle = boxStyle;
+        text = control === "checkbox" ? "✓" : "●";
+      }
+    } else if (control === "select") {
+      const option = element.selectedOptions?.[0] ?? element.querySelector?.("option");
+      text = `${(option?.label || option?.textContent || "").trim()} ▾`;
+    } else if (control === "button") {
+      const type = String(element.getAttribute("type") ?? "").toLowerCase();
+      text = element.value || { submit: "Submit", reset: "Reset", file: "Choose File" }[type] || "";
+    } else {
+      const value = String(element.value ?? "");
+      const type = String(element.getAttribute("type") ?? "text").toLowerCase();
+      text = type === "password" ? "•".repeat([...value].length) : value;
+      if (!text && element.getAttribute("placeholder")) {
+        text = element.getAttribute("placeholder");
+        textStyle = Object.freeze({ ...style, color: PLACEHOLDER_COLOR });
+      }
+    }
+    const children = text
+      ? [this.#node(element, "text", nodesById, { text, style: textStyle, pseudo: "value", children: Object.freeze([]) }, keys.value)]
+      : [];
+    return this.#node(element, "inline-block", nodesById, {
+      tagName: element.tagName,
+      style: boxStyle,
+      children: Object.freeze(children),
+    });
+  }
+
+  /**
+   * ::before/::after boxes. They belong to the originating element for hit
+   * testing (domNode) but take stable IDs from per-element pseudo keys.
+   */
+  #pseudo(element, pseudo, styleEngine, nodesById) {
+    const style = styleEngine?.getPseudo?.(element, pseudo);
+    if (!style) return null;
+    let keys = this.#pseudoKeys.get(element);
+    if (!keys) this.#pseudoKeys.set(element, keys = { before: {}, after: {}, beforeText: {}, afterText: {} });
+    const children = style.content
+      ? [this.#node(element, "text", nodesById, {
+        text: style.content,
+        style,
+        children: Object.freeze([]),
+      }, keys[`${pseudo}Text`])]
+      : [];
+    return this.#node(element, boxType(style), nodesById, {
+      tagName: `::${pseudo}`,
+      pseudo,
+      style,
+      children: Object.freeze(children),
+    }, keys[pseudo]);
+  }
+
+  #element(element, nodesById, isRoot = false, styleEngine = null, resources = null) {
+    const style = styleEngine?.get(element) ?? null;
+    if (!isRoot && (style?.display === "none" || NON_RENDERED_ELEMENTS.has(element.tagName) || element.hasAttribute("hidden"))) {
+      return null;
+    }
+    if (element.tagName === "BR") {
+      return this.#node(element, "line-break", nodesById, {
+        tagName: "BR",
+        style,
+        children: Object.freeze([]),
+      });
+    }
+    if (element.localName === "svg") {
+      // Inline SVG is a replaced element; its shapes are drawn into its box.
+      const svg = extractSvg(element, style?.color ?? "rgba(0, 0, 0, 1)");
+      const [, , viewWidth, viewHeight] = svg.viewBox ?? [];
+      return this.#node(element, "image", nodesById, {
+        tagName: "SVG",
+        style,
+        resource: null,
+        svg,
+        widthAttribute: svg.width ?? (svg.height && viewWidth ? svg.height * viewWidth / viewHeight : viewWidth ?? null),
+        heightAttribute: svg.height ?? (svg.width && viewHeight ? svg.width * viewHeight / viewWidth : viewHeight ?? null),
+        children: Object.freeze([]),
+      });
+    }
+    if (element.tagName === "IMG" || element.tagName === "VIDEO") {
+      return this.#node(element, "image", nodesById, {
+        tagName: element.tagName,
+        style,
+        resource: resources?.get(element) ?? null,
+        widthAttribute: positiveDimension(element.getAttribute("width")),
+        heightAttribute: positiveDimension(element.getAttribute("height")),
+        children: Object.freeze([]),
+      });
+    }
+
+    const control = style ? controlKind(element) : null;
+    if (control && control !== "button" || (control === "button" && element.tagName === "INPUT")) {
+      return this.#control(element, control, style, nodesById);
+    }
+
+    const children = [];
+    const before = this.#pseudo(element, "before", styleEngine, nodesById);
+    if (before) children.push(before);
+    for (const child of element.childNodes) {
+      let rendered = null;
+      if (child.nodeType === 3) {
+        rendered = this.#node(child, "text", nodesById, {
+          text: child.data ?? child.textContent ?? "",
+          style,
+          children: Object.freeze([]),
+        });
+      } else if (child.nodeType === 1) {
+        rendered = this.#element(child, nodesById, false, styleEngine, resources);
+      }
+      if (rendered) children.push(rendered);
+    }
+    const after = this.#pseudo(element, "after", styleEngine, nodesById);
+    if (after) children.push(after);
+
+    const type = isRoot ? "root" : boxType(style, element.tagName);
+    return this.#node(element, type, nodesById, {
+      tagName: element.tagName,
+      style,
+      children: Object.freeze(children),
+    });
+  }
+}
+
+function boxType(style, tagName = null) {
+  const display = style?.display;
+  if (["flex", "inline-flex", "inline-block", "grid", "inline-grid"].includes(display)) return display;
+  if (["table", "inline-table", "table-row-group", "table-header-group", "table-footer-group", "table-row",
+    "table-cell", "table-caption", "table-column", "table-column-group"].includes(display)) return display;
+  return ["block", "list-item"].includes(display) || BLOCK_ELEMENTS.has(tagName) ? "block" : "inline";
+}
+
+function positiveDimension(value) {
+  const number = Number(value);
+  return Number.isFinite(number) && number > 0 ? number : null;
+}
+
+/** Temporary text layout input until fragments and line boxes are introduced. */
+export function renderTreeText(tree) {
+  const lines = [""];
+
+  function visit(node) {
+    if (node.type === "text") {
+      lines[lines.length - 1] += node.text;
+      return;
+    }
+    if (node.type === "line-break") {
+      if (lines[lines.length - 1] !== "") lines.push("");
+      return;
+    }
+    for (const child of node.children) visit(child);
+  }
+
+  visit(tree.root);
+  return lines.join("\n");
+}

package/lib/render-tree/svg.js

@@ -0,0 +1,210 @@
+/**
+ * Inline SVG as a replaced element: the <svg> subtree is turned into a list
+ * of shapes (SVG path data plus paint) in the viewBox coordinate system,
+ * which the painter draws scaled into the element's box.
+ *
+ * Supported: path, rect, circle, ellipse, line, polyline, polygon, nested g
+ * and svg; fill, stroke, stroke-width, fill-rule, opacity, fill-opacity,
+ * stroke-opacity and transform (matrix, translate, scale, rotate) from
+ * attributes, inherited through groups; currentColor. Text, gradients,
+ * patterns, masks, filters and <use> are not drawn.
+ */
+
+const SHAPES = new Set(["path", "rect", "circle", "ellipse", "line", "polyline", "polygon"]);
+const SKIPPED = new Set(["defs", "clippath", "mask", "pattern", "symbol", "lineargradient", "radialgradient", "filter", "title", "desc", "metadata", "style", "script"]);
+const IDENTITY = Object.freeze([1, 0, 0, 1, 0, 0]);
+
+/**
+ * @param {Element} element the <svg> element
+ * @param {string} currentColor the element's computed color (rgba)
+ * @returns {{ viewBox: number[] | null, width: number | null, height: number | null, shapes: object[] }}
+ */
+export function extractSvg(element, currentColor) {
+  const viewBox = parseNumbers(element.getAttribute("viewBox"));
+  const shapes = [];
+  const root = {
+    fill: "rgba(0, 0, 0, 1)",
+    stroke: null,
+    strokeWidth: 1,
+    fillRule: "nonzero",
+    fillOpacity: 1,
+    strokeOpacity: 1,
+    opacity: 1,
+    matrix: IDENTITY,
+  };
+  walk(element, inherit(root, element, currentColor, true));
+
+  function walk(node, paint) {
+    for (const child of node.children ?? []) {
+      const name = child.localName?.toLowerCase();
+      if (!name || SKIPPED.has(name) || child.getAttribute("display") === "none" || child.getAttribute("visibility") === "hidden") continue;
+      const childPaint = inherit(paint, child, currentColor, false);
+      if (name === "g" || name === "svg" || name === "a") {
+        walk(child, childPaint);
+        continue;
+      }
+      if (!SHAPES.has(name)) continue;
+      const d = shapePath(name, child);
+      if (!d) continue;
+      // A line has no interior to fill (SVG 2 §10.5).
+      const fill = name === "line" ? null : childPaint.fill;
+      if (!fill && !childPaint.stroke) continue;
+      shapes.push(Object.freeze({
+        d,
+        fill,
+        stroke: childPaint.stroke,
+        strokeWidth: childPaint.strokeWidth,
+        fillRule: childPaint.fillRule,
+        fillOpacity: childPaint.fillOpacity * childPaint.opacity,
+        strokeOpacity: childPaint.strokeOpacity * childPaint.opacity,
+        matrix: childPaint.matrix,
+      }));
+    }
+  }
+
+  return Object.freeze({
+    viewBox: viewBox.length === 4 && viewBox[2] > 0 && viewBox[3] > 0 ? Object.freeze(viewBox) : null,
+    width: length(element.getAttribute("width")),
+    height: length(element.getAttribute("height")),
+    shapes: Object.freeze(shapes),
+  });
+}
+
+/** Paint properties of `element`, inheriting from `parent`. Opacity multiplies down the tree. */
+function inherit(parent, element, currentColor, isRoot) {
+  const attribute = (name) => {
+    // Presentation attributes, overridden by the style attribute.
+    const style = element.getAttribute("style") ?? "";
+    const fromStyle = new RegExp(`(?:^|;)\\s*${name}\\s*:\\s*([^;]+)`, "i").exec(style)?.[1]?.trim();
+    return fromStyle ?? element.getAttribute(name);
+  };
+  const paint = { ...parent };
+  const fill = attribute("fill");
+  if (fill != null && fill !== "inherit") paint.fill = color(fill, currentColor);
+  const stroke = attribute("stroke");
+  if (stroke != null && stroke !== "inherit") paint.stroke = color(stroke, currentColor);
+  const strokeWidth = length(attribute("stroke-width"));
+  if (strokeWidth != null) paint.strokeWidth = strokeWidth;
+  const fillRule = attribute("fill-rule");
+  if (fillRule === "evenodd" || fillRule === "nonzero") paint.fillRule = fillRule;
+  const number = (name) => {
+    const value = Number.parseFloat(attribute(name));
+    return Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : null;
+  };
+  paint.fillOpacity = number("fill-opacity") ?? parent.fillOpacity;
+  paint.strokeOpacity = number("stroke-opacity") ?? parent.strokeOpacity;
+  paint.opacity = parent.opacity * (number("opacity") ?? 1);
+  // The root's own transform does not apply (it is a CSS box), its children's do.
+  const transform = isRoot ? null : element.getAttribute("transform");
+  if (transform) paint.matrix = multiply(parent.matrix, parseTransform(transform));
+  return paint;
+}
+
+function color(value, currentColor) {
+  const text = String(value).trim();
+  if (text === "none" || text.startsWith("url(")) return null;
+  if (text.toLowerCase() === "currentcolor") return currentColor;
+  return Bun.color(text, "rgba") ?? null;
+}
+
+function length(value) {
+  if (value == null) return null;
+  const match = /^\s*([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)\s*(px)?\s*$/i.exec(String(value));
+  return match ? Number(match[1]) : null;
+}
+
+function parseNumbers(value) {
+  return String(value ?? "").trim().split(/[\s,]+/).filter(Boolean).map(Number).filter(Number.isFinite);
+}
+
+/** SVG path data for a basic shape (SVG 2 §10). */
+function shapePath(name, element) {
+  const number = (attribute) => length(element.getAttribute(attribute)) ?? 0;
+  switch (name) {
+    case "path":
+      return element.getAttribute("d")?.trim() || null;
+    case "rect": {
+      const [x, y, width, height] = [number("x"), number("y"), number("width"), number("height")];
+      if (width <= 0 || height <= 0) return null;
+      let rx = length(element.getAttribute("rx"));
+      let ry = length(element.getAttribute("ry"));
+      rx ??= ry ?? 0;
+      ry ??= rx;
+      rx = Math.min(rx, width / 2);
+      ry = Math.min(ry, height / 2);
+      if (rx <= 0 || ry <= 0) return `M${x} ${y}h${width}v${height}h${-width}Z`;
+      return `M${x + rx} ${y}h${width - 2 * rx}a${rx} ${ry} 0 0 1 ${rx} ${ry}v${height - 2 * ry}`
+        + `a${rx} ${ry} 0 0 1 ${-rx} ${ry}h${-(width - 2 * rx)}a${rx} ${ry} 0 0 1 ${-rx} ${-ry}`
+        + `v${-(height - 2 * ry)}a${rx} ${ry} 0 0 1 ${rx} ${-ry}Z`;
+    }
+    case "circle":
+    case "ellipse": {
+      const [cx, cy] = [number("cx"), number("cy")];
+      const rx = name === "circle" ? number("r") : number("rx");
+      const ry = name === "circle" ? rx : number("ry");
+      if (rx <= 0 || ry <= 0) return null;
+      return `M${cx - rx} ${cy}a${rx} ${ry} 0 1 0 ${2 * rx} 0a${rx} ${ry} 0 1 0 ${-2 * rx} 0Z`;
+    }
+    case "line":
+      return `M${number("x1")} ${number("y1")}L${number("x2")} ${number("y2")}`;
+    case "polyline":
+    case "polygon": {
+      const points = parseNumbers(element.getAttribute("points"));
+      if (points.length < 4) return null;
+      let d = `M${points[0]} ${points[1]}`;
+      for (let index = 2; index + 1 < points.length; index += 2) d += `L${points[index]} ${points[index + 1]}`;
+      return name === "polygon" ? `${d}Z` : d;
+    }
+    default:
+      return null;
+  }
+}
+
+/** A transform list as an [a, b, c, d, e, f] matrix (SVG 2 §8.5). */
+export function parseTransform(text) {
+  let matrix = IDENTITY;
+  for (const match of String(text).matchAll(/(matrix|translate|scale|rotate|skewX|skewY)\s*\(([^)]*)\)/gi)) {
+    const args = parseNumbers(match[2]);
+    let next = null;
+    switch (match[1].toLowerCase()) {
+      case "matrix":
+        if (args.length === 6) next = args;
+        break;
+      case "translate":
+        next = [1, 0, 0, 1, args[0] ?? 0, args[1] ?? 0];
+        break;
+      case "scale":
+        next = [args[0] ?? 1, 0, 0, args[1] ?? args[0] ?? 1, 0, 0];
+        break;
+      case "rotate": {
+        const angle = (args[0] ?? 0) * Math.PI / 180;
+        const [cos, sin] = [Math.cos(angle), Math.sin(angle)];
+        const rotation = [cos, sin, -sin, cos, 0, 0];
+        const [cx, cy] = [args[1] ?? 0, args[2] ?? 0];
+        next = cx || cy
+          ? multiply(multiply([1, 0, 0, 1, cx, cy], rotation), [1, 0, 0, 1, -cx, -cy])
+          : rotation;
+        break;
+      }
+      case "skewx":
+        next = [1, 0, Math.tan((args[0] ?? 0) * Math.PI / 180), 1, 0, 0];
+        break;
+      case "skewy":
+        next = [1, Math.tan((args[0] ?? 0) * Math.PI / 180), 0, 1, 0, 0];
+        break;
+    }
+    if (next) matrix = multiply(matrix, next);
+  }
+  return matrix;
+}
+
+function multiply([a1, b1, c1, d1, e1, f1], [a2, b2, c2, d2, e2, f2]) {
+  return Object.freeze([
+    a1 * a2 + c1 * b2,
+    b1 * a2 + d1 * b2,
+    a1 * c2 + c1 * d2,
+    b1 * c2 + d1 * d2,
+    a1 * e2 + c1 * f2 + e1,
+    b1 * e2 + d1 * f2 + f1,
+  ]);
+}