@alchemy.run/sigil 0.0.0-alpha.1 → 0.0.0-alpha.11

package/src/paint-tree.ts

@@ -0,0 +1,220 @@
+import { type DOMElement } from "#/dom.ts";
+import { getMaxWidth } from "#/get-max-width.ts";
+import { renderBackground } from "#/render-background.ts";
+import { renderBorder } from "#/render-border.ts";
+import type { Canvas } from "#/screen/canvas.ts";
+import { serializeLine } from "#/screen/serialize.ts";
+import { squashTextNodes } from "#/squash-text-nodes.ts";
+import {
+  hasCompatibilityText,
+  structuredTextBaseStyle,
+  structuredTextLines,
+  wrapStructuredText,
+  sampleStructuredText,
+} from "#/structured-text.ts";
+import type { AnsiTransformer } from "#/transform-adapter.ts";
+import { Yoga } from "#/yoga/index.ts";
+
+export const renderAccessibleText = (
+  node: DOMElement,
+  options: {
+    parentRole?: string;
+    skipStaticElements?: boolean;
+  } = {},
+): string => {
+  if (options.skipStaticElements && node.internal_static) {
+    return "";
+  }
+
+  if (node.yogaNode?.getDisplay() === Yoga.DISPLAY_NONE) {
+    return "";
+  }
+
+  let output = "";
+
+  if (node.nodeName === "ink-text") {
+    output = squashTextNodes(node);
+  } else if (node.nodeName === "ink-box" || node.nodeName === "ink-root") {
+    const separator =
+      node.style.flexDirection === "row" || node.style.flexDirection === "row-reverse" ? " " : "\n";
+
+    const childNodes =
+      node.style.flexDirection === "row-reverse" || node.style.flexDirection === "column-reverse"
+        ? [...node.childNodes].reverse()
+        : [...node.childNodes];
+
+    output = childNodes
+      .map((childNode) => {
+        const screenReaderOutput = renderAccessibleText(childNode as DOMElement, {
+          parentRole: node.internal_accessibility?.role,
+          skipStaticElements: options.skipStaticElements,
+        });
+        return screenReaderOutput;
+      })
+      .filter(Boolean)
+      .join(separator);
+  }
+
+  if (node.internal_accessibility) {
+    const { role, state } = node.internal_accessibility;
+
+    if (state) {
+      const stateKeys = Object.keys(state) as Array<keyof typeof state>;
+      const stateDescription = stateKeys.filter((key) => state[key]).join(", ");
+
+      if (stateDescription) {
+        output = `(${stateDescription}) ${output}`;
+      }
+    }
+
+    if (role && role !== options.parentRole) {
+      output = `${role}: ${output}`;
+    }
+  }
+
+  return output;
+};
+
+// After nodes are laid out, render each to output object, which later gets rendered to terminal
+export const paintTree = (
+  node: DOMElement,
+  output: Canvas,
+  options: {
+    offsetX?: number;
+    offsetY?: number;
+    transformers?: AnsiTransformer[];
+    skipStaticElements: boolean;
+  },
+) => {
+  const { offsetX = 0, offsetY = 0, transformers = [], skipStaticElements } = options;
+
+  if (skipStaticElements && node.internal_static) {
+    return;
+  }
+
+  const { yogaNode } = node;
+
+  if (yogaNode) {
+    if (yogaNode.getDisplay() === Yoga.DISPLAY_NONE) {
+      return;
+    }
+
+    // Left and top positions in Yoga are relative to their parent node
+    const x = offsetX + yogaNode.getComputedLeft();
+    const y = offsetY + yogaNode.getComputedTop();
+
+    // Transformers are functions that transform final text output of each component
+    // The canvas applies explicit compatibility transformers at this boundary.
+    const newTransformers = node.internal_transform
+      ? [node.internal_transform, ...transformers]
+      : transformers;
+
+    if (node.nodeName === "ink-text") {
+      const text = squashTextNodes(node);
+
+      if (text.length > 0) {
+        const maxWidth = getMaxWidth(yogaNode);
+        const firstChildYoga = node.childNodes[0]?.yogaNode;
+        const paddingX = firstChildYoga?.getComputedLeft() ?? 0;
+        const paddingY = firstChildYoga?.getComputedTop() ?? 0;
+        const textWrap = node.style.textWrap ?? "wrap";
+        // `none` text may paint past the screen's nominal width; the screen
+        // grows the touched rows on demand. Clip rects still apply.
+        const overflow = textWrap === "none";
+        const lines = wrapStructuredText(
+          structuredTextLines(node),
+          maxWidth,
+          textWrap,
+          structuredTextBaseStyle(node),
+        );
+        const paintBounds = {
+          x: x + paddingX,
+          y: y + paddingY,
+          width: Math.max(
+            1,
+            ...lines.map((line) => line.reduce((width, cell) => width + cell.width, 0)),
+          ),
+          height: lines.length,
+        };
+        const sampled = sampleStructuredText(lines, paintBounds, output.paintContext);
+
+        if (hasCompatibilityText(node)) {
+          const textTransformers = collectTransformers(node, transformers);
+          output.writeAnsi(
+            paintBounds.x,
+            paintBounds.y,
+            sampled
+              .map((line) =>
+                serializeLine(line, {
+                  colorProfile: output.paintContext.profile ?? "truecolor",
+                  trimEnd: false,
+                }),
+              )
+              .join("\n"),
+            { transformers: textTransformers, overflow },
+          );
+        } else {
+          output.writeCells(paintBounds.x, paintBounds.y, sampled, { overflow });
+        }
+      }
+
+      return;
+    }
+
+    let clipped = false;
+
+    if (node.nodeName === "ink-box") {
+      renderBackground(x, y, node, output);
+      renderBorder(x, y, node, output);
+
+      const clipHorizontally =
+        node.style.overflowX === "hidden" || node.style.overflow === "hidden";
+      const clipVertically = node.style.overflowY === "hidden" || node.style.overflow === "hidden";
+
+      if (clipHorizontally || clipVertically) {
+        const x1 = clipHorizontally ? x + yogaNode.getComputedBorder(Yoga.EDGE_LEFT) : undefined;
+
+        const x2 = clipHorizontally
+          ? x + yogaNode.getComputedWidth() - yogaNode.getComputedBorder(Yoga.EDGE_RIGHT)
+          : undefined;
+
+        const y1 = clipVertically ? y + yogaNode.getComputedBorder(Yoga.EDGE_TOP) : undefined;
+
+        const y2 = clipVertically
+          ? y + yogaNode.getComputedHeight() - yogaNode.getComputedBorder(Yoga.EDGE_BOTTOM)
+          : undefined;
+
+        output.clip({ x1, x2, y1, y2 });
+        clipped = true;
+      }
+    }
+
+    if (node.nodeName === "ink-root" || node.nodeName === "ink-box") {
+      for (const childNode of node.childNodes) {
+        paintTree(childNode as DOMElement, output, {
+          offsetX: x,
+          offsetY: y,
+          transformers: newTransformers,
+          skipStaticElements,
+        });
+      }
+
+      if (clipped) {
+        output.unclip();
+      }
+    }
+  }
+};
+
+function collectTransformers(
+  node: DOMElement,
+  inherited: readonly AnsiTransformer[],
+): AnsiTransformer[] {
+  return [
+    ...node.childNodes.flatMap((child) =>
+      child.nodeName === "#text" ? [] : collectTransformers(child, []),
+    ),
+    ...(node.internal_transform ? [node.internal_transform] : []),
+    ...inherited,
+  ];
+}