@hypen-space/web 0.5.2 → 0.5.3

package/src/canvas/selection.ts

@@ -5,10 +5,14 @@
  * triple-click-line, and Ctrl/Cmd+C copy for canvas-rendered text.
  */
 
-import type { VirtualNode, Point, FontStyle, TextMetrics } from "./types.js";
-import { getScrollAwareBounds } from "./scroll.js";
-import { measureText } from "./text.js";
-import { createFontString } from "./utils.js";
+import type { VirtualNode, Point } from "./types.js";
+import {
+  SELECTION_HIGHLIGHT_COLOR,
+  nodeTextGeometry,
+  pointToOffset,
+  rangeToRects,
+  resolveNodeText,
+} from "./text-geometry.js";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -36,12 +40,6 @@ export interface SelectionRect {
   height: number;
 }
 
-// ---------------------------------------------------------------------------
-// Selection state
-// ---------------------------------------------------------------------------
-
-const HIGHLIGHT_COLOR = "rgba(59, 130, 246, 0.35)";
-
 // ---------------------------------------------------------------------------
 // SelectionManager
 // ---------------------------------------------------------------------------
@@ -202,7 +200,7 @@ export class SelectionManager {
   private selectWord(pos: TextPosition): void {
     const node = this.findNodeById(pos.nodeId);
     if (!node) return;
-    const text = resolveText(node);
+    const text = resolveNodeText(node);
     const start = wordBoundaryBefore(text, pos.offset);
     const end = wordBoundaryAfter(text, pos.offset);
     this.selection = {
@@ -214,7 +212,7 @@ export class SelectionManager {
   private selectAll(nodeId: string): void {
     const node = this.findNodeById(nodeId);
     if (!node) return;
-    const text = resolveText(node);
+    const text = resolveNodeText(node);
     this.selection = {
       anchor: { nodeId, offset: 0 },
       focus: { nodeId, offset: text.length },
@@ -225,7 +223,7 @@ export class SelectionManager {
     if (!this.selection) return null;
     const node = this.findNodeById(this.selection.anchor.nodeId);
     if (!node) return null;
-    const text = resolveText(node);
+    const text = resolveNodeText(node);
     const [start, end] = normalizeRange(this.selection);
     return text.slice(start, end);
   }
@@ -245,29 +243,50 @@ export class SelectionManager {
   private hitTestTextNode(
     node: VirtualNode,
     point: Point,
+    scrollX: number = 0,
+    scrollY: number = 0,
   ): TextPosition | null {
     if (!node.visible || !node.layout) return null;
 
+    const layout = node.layout;
+    const x = layout.x - scrollX;
+    const y = layout.y - scrollY;
+    const inBounds =
+      point.x >= x && point.x <= x + layout.width &&
+      point.y >= y && point.y <= y + layout.height;
+
+    // A clipping container confines its subtree to its own box — when the
+    // point is outside, no descendant text can be visible under it.
+    if (!inBounds) {
+      const overflow = node.props.overflow;
+      if (overflow === "hidden" || overflow === "scroll" || overflow === "auto") {
+        return null;
+      }
+    }
+
+    const childScrollX = scrollX + (node.scrollState?.scrollX ?? 0);
+    const childScrollY = scrollY + (node.scrollState?.scrollY ?? 0);
+
     // Check children first (front-to-back)
     for (let i = node.children.length - 1; i >= 0; i--) {
-      const result = this.hitTestTextNode(node.children[i], point);
+      const result = this.hitTestTextNode(node.children[i], point, childScrollX, childScrollY);
       if (result) return result;
     }
 
     // Only text nodes are selectable
     if (node.type !== "text") return null;
-
-    const bounds = getScrollAwareBounds(node);
-    if (!bounds) return null;
-    if (
-      point.x < bounds.x || point.x > bounds.x + bounds.width ||
-      point.y < bounds.y || point.y > bounds.y + bounds.height
-    ) {
-      return null;
-    }
+    if (!inBounds) return null;
 
     // Map point to character offset within this text node
-    const offset = pointToOffset(this.canvas, node, bounds, point);
+    const ctx = this.canvas.getContext("2d");
+    if (!ctx) return null;
+    const geometry = nodeTextGeometry(
+      node,
+      resolveNodeText(node),
+      x + layout.contentX,
+      y + layout.contentY,
+    );
+    const offset = pointToOffset(ctx, geometry, point);
     return { nodeId: node.id, offset };
   }
 
@@ -285,10 +304,17 @@ export class SelectionManager {
     const [start, end] = normalizeRange(this.selection);
     if (start === end) return; // caret only, no highlight
 
-    const rects = getSelectionRects(ctx, node, start, end);
+    const layout = node.layout!;
+    const geometry = nodeTextGeometry(
+      node,
+      resolveNodeText(node),
+      layout.x + layout.contentX,
+      layout.y + layout.contentY,
+    );
+    const rects = rangeToRects(ctx, geometry, start, end);
 
     ctx.save();
-    ctx.fillStyle = HIGHLIGHT_COLOR;
+    ctx.fillStyle = SELECTION_HIGHLIGHT_COLOR;
     for (const r of rects) {
       ctx.fillRect(r.x, r.y, r.width, r.height);
     }
@@ -321,16 +347,6 @@ export class SelectionManager {
 // Pure helpers
 // ---------------------------------------------------------------------------
 
-function resolveText(node: VirtualNode): string {
-  const raw = node.props[0] || node.props.text || "";
-  let text = String(raw);
-  const tt = node.props.textTransform || "none";
-  if (tt === "uppercase") text = text.toUpperCase();
-  else if (tt === "lowercase") text = text.toLowerCase();
-  else if (tt === "capitalize") text = text.replace(/\b\w/g, (c) => c.toUpperCase());
-  return text;
-}
-
 function normalizeRange(sel: TextSelection): [number, number] {
   const a = sel.anchor.offset;
   const b = sel.focus.offset;
@@ -364,180 +380,6 @@ function findById(node: VirtualNode, id: string): VirtualNode | null {
   return null;
 }
 
-// ---------------------------------------------------------------------------
-// Geometry: map a canvas point to a character offset
-// ---------------------------------------------------------------------------
-
-/**
- * Given a point inside a text node's bounds, return the character index
- * that the point falls on.
- */
-function pointToOffset(
-  canvas: HTMLCanvasElement,
-  node: VirtualNode,
-  bounds: { x: number; y: number; width: number; height: number },
-  point: Point,
-): number {
-  const ctx = canvas.getContext("2d");
-  if (!ctx) return 0;
-
-  const props = node.props;
-  const text = resolveText(node);
-  const layout = node.layout!;
-  const fontSize = parseFloat(props.fontSize) || 16;
-  const fontWeight = props.fontWeight || "normal";
-  const fontFamily = props.fontFamily || "system-ui, sans-serif";
-  const lineHeight = parseFloat(props.lineHeight) || fontSize * 1.2;
-  const textAlign = props.textAlign || "left";
-
-  const fontStyle: FontStyle = { fontSize, fontWeight, fontFamily, lineHeight };
-  const font = createFontString(fontSize, fontWeight, fontFamily);
-
-  ctx.save();
-  ctx.font = font;
-
-  const metrics = measureText(ctx, text, fontStyle, layout.contentWidth);
-  const contentX = bounds.x + layout.contentX;
-  const contentY = bounds.y + layout.contentY;
-
-  // Find which line the point falls on
-  const relY = point.y - contentY;
-  let lineIndex = Math.floor(relY / metrics.lineHeight);
-  lineIndex = Math.max(0, Math.min(lineIndex, metrics.lines.length - 1));
-
-  // Calculate character offset before this line
-  let charsBefore = 0;
-  for (let i = 0; i < lineIndex; i++) {
-    charsBefore += metrics.lines[i].length;
-    // Account for space/newline between lines (word wrap eats the space)
-    if (i < metrics.lines.length - 1) {
-      const nextLineStart = text.indexOf(metrics.lines[i + 1], charsBefore);
-      if (nextLineStart > charsBefore) charsBefore = nextLineStart;
-    }
-  }
-
-  const line = metrics.lines[lineIndex];
-
-  // Calculate line X offset (for text-align)
-  let lineX = contentX;
-  if (textAlign === "center") {
-    const lw = ctx.measureText(line).width;
-    lineX = contentX + (layout.contentWidth - lw) / 2;
-  } else if (textAlign === "right") {
-    const lw = ctx.measureText(line).width;
-    lineX = contentX + layout.contentWidth - lw;
-  }
-
-  // Binary search for the character at point.x
-  const relX = point.x - lineX;
-  let best = 0;
-  for (let i = 0; i <= line.length; i++) {
-    const w = ctx.measureText(line.slice(0, i)).width;
-    if (w <= relX) {
-      best = i;
-    } else {
-      // Check if we're closer to this char or the previous
-      const prevW = ctx.measureText(line.slice(0, i - 1)).width;
-      if (relX - prevW < w - relX) {
-        best = i - 1;
-      } else {
-        best = i;
-      }
-      break;
-    }
-  }
-
-  ctx.restore();
-  return charsBefore + best;
-}
-
-// ---------------------------------------------------------------------------
-// Geometry: compute highlight rectangles for a selection range
-// ---------------------------------------------------------------------------
-
-/**
- * Return a list of rectangles to paint as the selection highlight for
- * characters [start, end) within a text node.
- */
-function getSelectionRects(
-  ctx: CanvasRenderingContext2D,
-  node: VirtualNode,
-  start: number,
-  end: number,
-): SelectionRect[] {
-  const props = node.props;
-  const layout = node.layout!;
-  const text = resolveText(node);
-  const fontSize = parseFloat(props.fontSize) || 16;
-  const fontWeight = props.fontWeight || "normal";
-  const fontFamily = props.fontFamily || "system-ui, sans-serif";
-  const lineHeight = parseFloat(props.lineHeight) || fontSize * 1.2;
-  const textAlign = props.textAlign || "left";
-
-  const fontStyle: FontStyle = { fontSize, fontWeight, fontFamily, lineHeight };
-  const font = createFontString(fontSize, fontWeight, fontFamily);
-
-  ctx.save();
-  ctx.font = font;
-
-  const metrics = measureText(ctx, text, fontStyle, layout.contentWidth);
-  const x = layout.x + layout.contentX;
-  const y = layout.y + layout.contentY;
-
-  const rects: SelectionRect[] = [];
-
-  // Map lines to character ranges
-  let charOffset = 0;
-  for (let i = 0; i < metrics.lines.length; i++) {
-    const line = metrics.lines[i];
-    const lineStart = charOffset;
-    const lineEnd = charOffset + line.length;
-
-    // Find actual position in original text for this line
-    if (i > 0) {
-      const idx = text.indexOf(line, charOffset);
-      if (idx > charOffset) charOffset = idx;
-    }
-    const actualLineStart = charOffset;
-    const actualLineEnd = charOffset + line.length;
-
-    // Does this line overlap with the selection?
-    if (actualLineEnd <= start || actualLineStart >= end) {
-      charOffset = actualLineEnd;
-      continue;
-    }
-
-    // Clamp selection to this line
-    const selStart = Math.max(0, start - actualLineStart);
-    const selEnd = Math.min(line.length, end - actualLineStart);
-
-    // Calculate line X offset (text-align)
-    let lineX = x;
-    const lineWidth = ctx.measureText(line).width;
-    if (textAlign === "center") {
-      lineX = x + (layout.contentWidth - lineWidth) / 2;
-    } else if (textAlign === "right") {
-      lineX = x + layout.contentWidth - lineWidth;
-    }
-
-    // Measure selection bounds within this line
-    const startX = ctx.measureText(line.slice(0, selStart)).width;
-    const endX = ctx.measureText(line.slice(0, selEnd)).width;
-
-    rects.push({
-      x: lineX + startX,
-      y: y + i * metrics.lineHeight,
-      width: endX - startX,
-      height: metrics.lineHeight,
-    });
-
-    charOffset = actualLineEnd;
-  }
-
-  ctx.restore();
-  return rects;
-}
-
 // ---------------------------------------------------------------------------
 // Clipboard fallback
 // ---------------------------------------------------------------------------

package/src/canvas/text-geometry.ts

@@ -0,0 +1,311 @@
+/**
+ * Text Geometry
+ *
+ * Pure point↔offset↔rect math shared by static-text selection
+ * (SelectionManager), input caret placement, and selection/caret painting.
+ * Everything is parameterized by an explicit {@link TextGeometry} — no
+ * node-type assumptions — so the same math serves Text, Input, and Textarea.
+ *
+ * Font sizes go through `cssLengthToPx` (matching paint.ts) so geometry
+ * lines up with painted glyphs even for `rem`-valued props.
+ */
+
+import type { FontStyle, Point, Rectangle, VirtualNode } from "./types.js";
+import { measureText } from "./text.js";
+import { createFontString, cssLengthToPx } from "./utils.js";
+
+/** Selection highlight color shared by static text and input painting. */
+export const SELECTION_HIGHLIGHT_COLOR = "rgba(59, 130, 246, 0.35)";
+
+export interface TextGeometry {
+  /** Already-resolved text (node text or input value, post-transform). */
+  text: string;
+  font: FontStyle;
+  textAlign: "left" | "center" | "right";
+  verticalAlign: "top" | "middle" | "bottom";
+  /** Content-box origin in the coordinate space of queried points / returned rects. */
+  contentX: number;
+  contentY: number;
+  contentWidth: number;
+  contentHeight: number;
+  /** Width used for line wrapping; undefined = single line (no wrap). */
+  wrapWidth?: number;
+}
+
+/**
+ * Resolve a node's displayed text, applying `textTransform` the same way
+ * paint does — geometry must measure what is actually drawn.
+ */
+export function resolveNodeText(node: VirtualNode): string {
+  const raw = node.props[0] || node.props.text || "";
+  let text = String(raw);
+  const tt = node.props.textTransform || "none";
+  if (tt === "uppercase") text = text.toUpperCase();
+  else if (tt === "lowercase") text = text.toLowerCase();
+  else if (tt === "capitalize") text = text.replace(/\b\w/g, (c) => c.toUpperCase());
+  return text;
+}
+
+/** Font style from node props with paint.ts parity defaults. */
+export function nodeFontStyle(props: Record<string, any>): FontStyle {
+  const fontSize = cssLengthToPx(props.fontSize) ?? 16;
+  return {
+    fontSize,
+    fontWeight: props.fontWeight || "normal",
+    fontFamily: props.fontFamily || "system-ui, sans-serif",
+    lineHeight: cssLengthToPx(props.lineHeight) ?? fontSize * 1.2,
+  };
+}
+
+/**
+ * Build a TextGeometry for a node whose content box starts at
+ * (contentX, contentY) in the caller's coordinate space. Wrapping and
+ * vertical alignment are caller decisions: static text wraps at content
+ * width and is top-aligned (paintText parity); single-line inputs don't
+ * wrap and are middle-aligned (paintInput parity).
+ */
+export function nodeTextGeometry(
+  node: VirtualNode,
+  text: string,
+  contentX: number,
+  contentY: number,
+  opts?: { verticalAlign?: TextGeometry["verticalAlign"]; wrap?: boolean },
+): TextGeometry {
+  const layout = node.layout!;
+  return {
+    text,
+    font: nodeFontStyle(node.props),
+    textAlign: (node.props.textAlign || "left") as TextGeometry["textAlign"],
+    verticalAlign: opts?.verticalAlign ?? "top",
+    contentX,
+    contentY,
+    contentWidth: layout.contentWidth,
+    contentHeight: layout.contentHeight,
+    wrapWidth: (opts?.wrap ?? true) ? layout.contentWidth : undefined,
+  };
+}
+
+/**
+ * Character range each wrapped line covers in the original text. Word wrap
+ * eats the separator between lines, so line N+1's start is re-anchored with
+ * indexOf — same bookkeeping the selection code has always used.
+ */
+export interface LineRange {
+  start: number;
+  end: number;
+  line: string;
+}
+
+export function lineRanges(text: string, lines: string[]): LineRange[] {
+  const ranges: LineRange[] = [];
+  let charOffset = 0;
+  for (let i = 0; i < lines.length; i++) {
+    if (i > 0) {
+      if (lines[i] === "") {
+        // A blank line (from a hard "\n\n" or a trailing Enter) can't be
+        // re-anchored with indexOf — it sits just past its newline.
+        if (text[charOffset] === "\n") charOffset += 1;
+      } else {
+        const idx = text.indexOf(lines[i], charOffset);
+        if (idx > charOffset) charOffset = idx;
+      }
+    }
+    ranges.push({ start: charOffset, end: charOffset + lines[i].length, line: lines[i] });
+    charOffset += lines[i].length;
+  }
+  return ranges;
+}
+
+/**
+ * Line layout for geometry purposes. Wrapping goes through `measureText`
+ * (pretext-aware) per hard-break paragraph. Single-line text (`wrapWidth`
+ * undefined) deliberately does NOT: line-layout engines strip trailing
+ * whitespace at line ends, which would pin the caret before a just-typed
+ * space until the next visible character arrives. A single-line input's
+ * "line" is the raw text, spaces and all — `ctx.measureText` advances
+ * include them.
+ *
+ * For wrapped text, each paragraph's stripped whitespace tail is
+ * re-attached to its last line for the same reason — a textarea caret must
+ * sit after a just-typed space, including one typed right before a newline.
+ * (Blank lines from "\n" come from measureText itself.)
+ */
+function layoutLines(
+  ctx: CanvasRenderingContext2D,
+  g: TextGeometry,
+): { lines: string[]; lineHeight: number; height: number } {
+  const lineHeight = g.font.lineHeight || g.font.fontSize * 1.2;
+
+  if (g.wrapWidth === undefined) {
+    return { lines: [g.text], lineHeight, height: lineHeight };
+  }
+
+  const lines: string[] = [];
+  for (const paragraph of g.text.split("\n")) {
+    if (paragraph === "") {
+      lines.push("");
+      continue;
+    }
+    const m = measureText(ctx, paragraph, g.font, g.wrapWidth);
+    const paragraphLines = [...m.lines];
+    // Re-attach the paragraph's trailing whitespace (stripped by wrap
+    // layout) so the caret can sit after it.
+    const ranges = lineRanges(paragraph, paragraphLines);
+    const lastEnd = ranges.length > 0 ? ranges[ranges.length - 1].end : 0;
+    const tail = paragraph.slice(lastEnd);
+    if (tail.length > 0 && tail.trim() === "") {
+      paragraphLines[paragraphLines.length - 1] += tail;
+    }
+    lines.push(...paragraphLines);
+  }
+  if (lines.length === 0) lines.push("");
+
+  return { lines, lineHeight, height: lines.length * lineHeight };
+}
+
+function alignedStartY(g: TextGeometry, totalHeight: number): number {
+  if (g.verticalAlign === "middle") return g.contentY + (g.contentHeight - totalHeight) / 2;
+  if (g.verticalAlign === "bottom") return g.contentY + g.contentHeight - totalHeight;
+  return g.contentY;
+}
+
+function alignedLineX(ctx: CanvasRenderingContext2D, g: TextGeometry, line: string): number {
+  if (g.textAlign === "center") {
+    return g.contentX + (g.contentWidth - ctx.measureText(line).width) / 2;
+  }
+  if (g.textAlign === "right") {
+    return g.contentX + g.contentWidth - ctx.measureText(line).width;
+  }
+  return g.contentX;
+}
+
+/**
+ * Map a point to the character offset it falls on.
+ */
+export function pointToOffset(
+  ctx: CanvasRenderingContext2D,
+  g: TextGeometry,
+  point: Point,
+): number {
+  ctx.save();
+  ctx.font = createFontString(g.font.fontSize, g.font.fontWeight, g.font.fontFamily);
+
+  const metrics = layoutLines(ctx, g);
+  const startY = alignedStartY(g, metrics.height);
+
+  const relY = point.y - startY;
+  let lineIndex = Math.floor(relY / metrics.lineHeight);
+  lineIndex = Math.max(0, Math.min(lineIndex, metrics.lines.length - 1));
+
+  const ranges = lineRanges(g.text, metrics.lines);
+  const { start: lineStart, line } = ranges[lineIndex];
+
+  const relX = point.x - alignedLineX(ctx, g, line);
+
+  // Prefix widths are monotonic in prefix length, so bisect for the longest
+  // prefix that fits, then snap to whichever side of the boundary glyph is
+  // closer. A point left of the line start clamps to 0.
+  let best = 0;
+  if (relX > 0) {
+    let lo = 0;
+    let hi = line.length;
+    while (lo < hi) {
+      const mid = (lo + hi + 1) >> 1;
+      if (ctx.measureText(line.slice(0, mid)).width <= relX) {
+        lo = mid;
+      } else {
+        hi = mid - 1;
+      }
+    }
+    best = lo;
+    if (lo < line.length) {
+      const w = ctx.measureText(line.slice(0, lo)).width;
+      const nextW = ctx.measureText(line.slice(0, lo + 1)).width;
+      best = relX - w < nextW - relX ? lo : lo + 1;
+    }
+  }
+
+  ctx.restore();
+  return lineStart + best;
+}
+
+/**
+ * Rectangles covering characters [start, end) — one per wrapped line the
+ * range touches. Used for selection highlights.
+ */
+export function rangeToRects(
+  ctx: CanvasRenderingContext2D,
+  g: TextGeometry,
+  start: number,
+  end: number,
+): Rectangle[] {
+  if (start >= end) return [];
+  ctx.save();
+  ctx.font = createFontString(g.font.fontSize, g.font.fontWeight, g.font.fontFamily);
+
+  const metrics = layoutLines(ctx, g);
+  const startY = alignedStartY(g, metrics.height);
+  const ranges = lineRanges(g.text, metrics.lines);
+
+  const rects: Rectangle[] = [];
+  for (let i = 0; i < ranges.length; i++) {
+    const { start: lineStart, end: lineEnd, line } = ranges[i];
+    if (lineEnd <= start || lineStart >= end) continue;
+
+    const selStart = Math.max(0, start - lineStart);
+    const selEnd = Math.min(line.length, end - lineStart);
+
+    const lineX = alignedLineX(ctx, g, line);
+    const fromX = ctx.measureText(line.slice(0, selStart)).width;
+    const toX = ctx.measureText(line.slice(0, selEnd)).width;
+
+    rects.push({
+      x: lineX + fromX,
+      y: startY + i * metrics.lineHeight,
+      width: toX - fromX,
+      height: metrics.lineHeight,
+    });
+  }
+
+  ctx.restore();
+  return rects;
+}
+
+/**
+ * Caret rectangle for a character offset. At a wrap boundary the caret
+ * sits at the end of the earlier line (matching browser end-of-line
+ * placement for soft wraps).
+ */
+export function offsetToCaretRect(
+  ctx: CanvasRenderingContext2D,
+  g: TextGeometry,
+  offset: number,
+): Rectangle {
+  ctx.save();
+  ctx.font = createFontString(g.font.fontSize, g.font.fontWeight, g.font.fontFamily);
+
+  const metrics = layoutLines(ctx, g);
+  const startY = alignedStartY(g, metrics.height);
+  const ranges = lineRanges(g.text, metrics.lines);
+
+  const clamped = Math.max(0, Math.min(offset, g.text.length));
+  let lineIndex = ranges.length - 1;
+  for (let i = 0; i < ranges.length; i++) {
+    if (clamped <= ranges[i].end) {
+      lineIndex = i;
+      break;
+    }
+  }
+
+  const { start: lineStart, line } = ranges[lineIndex];
+  const col = Math.max(0, Math.min(clamped - lineStart, line.length));
+  const x = alignedLineX(ctx, g, line) + ctx.measureText(line.slice(0, col)).width;
+
+  ctx.restore();
+  return {
+    x,
+    y: startY + lineIndex * metrics.lineHeight,
+    width: 1,
+    height: metrics.lineHeight,
+  };
+}