@graphrefly/graphrefly 0.45.0 → 0.46.0

package/dist/chunk-42FQ27MQ.js

@@ -0,0 +1,594 @@
+import {
+  analyzeAndMeasure,
+  carveTextLineSlots,
+  computeCharPositions,
+  computeLineBreaks,
+  layoutNextLine
+} from "./chunk-3PSLNJDU.js";
+import {
+  emitToMeta
+} from "./chunk-KN3H5CNT.js";
+import {
+  countCells
+} from "./chunk-36NMM65U.js";
+
+// src/utils/reactive-layout/measurement-adapters.ts
+var CliMeasureAdapter = class {
+  cellPx;
+  constructor(opts) {
+    this.cellPx = opts?.cellPx ?? 8;
+  }
+  measureSegment(text, _font) {
+    return { width: countCells(text) * this.cellPx };
+  }
+};
+var PrecomputedAdapterKeyError = class extends Error {
+  name = "KeyError";
+};
+var PrecomputedAdapter = class {
+  metrics;
+  fallback;
+  constructor(opts) {
+    this.metrics = opts.metrics;
+    const fb = opts.fallback ?? "per-char";
+    if (fb !== "per-char" && fb !== "error") {
+      throw new Error(
+        `fallback must be 'per-char' or 'error', got ${JSON.stringify(opts.fallback)}`
+      );
+    }
+    this.fallback = fb;
+  }
+  measureSegment(text, font) {
+    const fontMap = this.metrics[font];
+    if (fontMap) {
+      const w = fontMap[text];
+      if (w !== void 0) return { width: w };
+    }
+    if (this.fallback === "error") {
+      throw new PrecomputedAdapterKeyError(
+        `PrecomputedAdapter: no metrics for segment ${JSON.stringify(text)} in font ${JSON.stringify(font)}`
+      );
+    }
+    let total = 0;
+    if (fontMap) {
+      for (const ch of text) {
+        const cw = fontMap[ch];
+        if (cw !== void 0) {
+          total += cw;
+        }
+      }
+    }
+    return { width: total };
+  }
+};
+var CanvasMeasureAdapter = class {
+  ctx = null;
+  currentFont = "";
+  emojiCorrection;
+  constructor(opts) {
+    this.emojiCorrection = opts?.emojiCorrection ?? 1;
+  }
+  getContext() {
+    if (!this.ctx) {
+      if (typeof OffscreenCanvas === "undefined") {
+        throw new Error(
+          "CanvasMeasureAdapter requires a browser environment with OffscreenCanvas support. Use CliMeasureAdapter or NodeCanvasMeasureAdapter for Node.js."
+        );
+      }
+      const canvas = new OffscreenCanvas(0, 0);
+      const ctx = canvas.getContext("2d");
+      if (!ctx) throw new Error("CanvasMeasureAdapter: failed to get 2d context");
+      this.ctx = ctx;
+    }
+    return this.ctx;
+  }
+  measureSegment(text, font) {
+    const ctx = this.getContext();
+    if (font !== this.currentFont) {
+      ctx.font = font;
+      this.currentFont = font;
+    }
+    let width = ctx.measureText(text).width;
+    if (this.emojiCorrection !== 1 && /\p{Emoji_Presentation}/u.test(text)) {
+      width *= this.emojiCorrection;
+    }
+    return { width };
+  }
+  clearCache() {
+    this.currentFont = "";
+  }
+};
+var NodeCanvasMeasureAdapter = class {
+  ctx = null;
+  currentFont = "";
+  canvasModule;
+  constructor(canvasModule) {
+    this.canvasModule = canvasModule;
+  }
+  getContext() {
+    if (!this.ctx) {
+      const canvas = this.canvasModule.createCanvas(0, 0);
+      const ctx = canvas.getContext("2d");
+      if (!ctx) throw new Error("NodeCanvasMeasureAdapter: failed to get 2d context");
+      this.ctx = ctx;
+    }
+    return this.ctx;
+  }
+  measureSegment(text, font) {
+    const ctx = this.getContext();
+    if (font !== this.currentFont) {
+      ctx.font = font;
+      this.currentFont = font;
+    }
+    return { width: ctx.measureText(text).width };
+  }
+  clearCache() {
+    this.currentFont = "";
+  }
+};
+var SvgBoundsAdapter = class {
+  measureSvg(content) {
+    const viewBoxMatch = content.match(/viewBox\s*=\s*["']([^"']+)["']/);
+    if (viewBoxMatch) {
+      const parts = viewBoxMatch[1].trim().split(/[\s,]+/);
+      if (parts.length >= 4) {
+        const w = Number.parseFloat(parts[2]);
+        const h = Number.parseFloat(parts[3]);
+        if (Number.isFinite(w) && Number.isFinite(h) && w > 0 && h > 0) {
+          return { width: w, height: h };
+        }
+        throw new Error(
+          "SvgBoundsAdapter: viewBox width/height are missing, non-finite, or not positive"
+        );
+      }
+    }
+    const widthMatch = content.match(/<svg[^>]*\bwidth\s*=\s*["']?([\d.]+)/);
+    const heightMatch = content.match(/<svg[^>]*\bheight\s*=\s*["']?([\d.]+)/);
+    if (widthMatch && heightMatch) {
+      const w = Number.parseFloat(widthMatch[1]);
+      const h = Number.parseFloat(heightMatch[1]);
+      if (Number.isFinite(w) && Number.isFinite(h) && w > 0 && h > 0) {
+        return { width: w, height: h };
+      }
+      throw new Error(
+        "SvgBoundsAdapter: svg width/height attributes are non-finite or not positive"
+      );
+    }
+    throw new Error(
+      "SvgBoundsAdapter: cannot determine dimensions \u2014 SVG has no viewBox or width/height attributes"
+    );
+  }
+};
+var ImageSizeAdapter = class {
+  sizes;
+  constructor(sizes) {
+    this.sizes = new Map(Object.entries(sizes));
+  }
+  measureImage(src) {
+    const dims = this.sizes.get(src);
+    if (!dims) {
+      throw new Error(`ImageSizeAdapter: no dimensions registered for ${JSON.stringify(src)}`);
+    }
+    return { width: dims.width, height: dims.height };
+  }
+};
+
+// src/utils/reactive-layout/reactive-block-layout.ts
+import { monotonicNs, node } from "@graphrefly/pure-ts/core";
+import { Graph } from "@graphrefly/pure-ts/graph";
+function measureBlock(block, maxWidth, adapters, measureCache, defaultFont, defaultLineHeight, index) {
+  switch (block.type) {
+    case "text": {
+      const font = block.font ?? defaultFont;
+      const lineHeight = block.lineHeight ?? defaultLineHeight;
+      const segments = analyzeAndMeasure(block.text, font, adapters.text, measureCache);
+      const lineBreaks = computeLineBreaks(segments, maxWidth, adapters.text, font, measureCache);
+      const charPositions = computeCharPositions(lineBreaks, segments, lineHeight);
+      const height = lineBreaks.lineCount * lineHeight;
+      let width = 0;
+      for (const line of lineBreaks.lines) {
+        if (line.width > width) width = line.width;
+      }
+      return {
+        index,
+        type: "text",
+        width: Math.min(width, maxWidth),
+        height,
+        textSegments: segments,
+        textLineBreaks: lineBreaks,
+        textCharPositions: charPositions
+      };
+    }
+    case "image": {
+      let w;
+      let h;
+      if (block.naturalWidth != null && block.naturalHeight != null) {
+        w = block.naturalWidth;
+        h = block.naturalHeight;
+      } else if (adapters.image) {
+        const dims = adapters.image.measureImage(block.src);
+        w = dims.width;
+        h = dims.height;
+      } else {
+        throw new Error(
+          `Image block at index ${index} has no naturalWidth/naturalHeight and no ImageMeasurer adapter`
+        );
+      }
+      if (w > maxWidth) {
+        h = h * maxWidth / w;
+        w = maxWidth;
+      }
+      return { index, type: "image", width: w, height: h };
+    }
+    case "svg": {
+      let w;
+      let h;
+      if (block.viewBox) {
+        w = block.viewBox.width;
+        h = block.viewBox.height;
+      } else if (adapters.svg) {
+        const dims = adapters.svg.measureSvg(block.content);
+        w = dims.width;
+        h = dims.height;
+      } else {
+        throw new Error(`SVG block at index ${index} has no viewBox and no SvgMeasurer adapter`);
+      }
+      if (w > maxWidth) {
+        h = h * maxWidth / w;
+        w = maxWidth;
+      }
+      return { index, type: "svg", width: w, height: h };
+    }
+  }
+}
+function measureBlocks(blocks, maxWidth, adapters, measureCache, defaultFont, defaultLineHeight) {
+  return blocks.map(
+    (block, i) => measureBlock(block, maxWidth, adapters, measureCache, defaultFont, defaultLineHeight, i)
+  );
+}
+function computeBlockFlow(measured, gap) {
+  const result = [];
+  let y = 0;
+  for (let i = 0; i < measured.length; i++) {
+    const m = measured[i];
+    result.push({ ...m, x: 0, y });
+    y += m.height + (i < measured.length - 1 ? gap : 0);
+  }
+  return result;
+}
+function computeTotalHeight(flow) {
+  if (flow.length === 0) return 0;
+  const last = flow[flow.length - 1];
+  return last.y + last.height;
+}
+function reactiveBlockLayout(opts) {
+  const {
+    adapters,
+    name = "reactive-block-layout",
+    defaultFont = "16px sans-serif",
+    defaultLineHeight = 20
+  } = opts;
+  const g = new Graph(name);
+  const measureCache = /* @__PURE__ */ new Map();
+  const blocksNode = node([], { name: "blocks", initial: opts.blocks ?? [] });
+  const maxWidthNode = node([], {
+    name: "max-width",
+    initial: Math.max(0, opts.maxWidth ?? 800)
+  });
+  const gapNode = node([], { name: "gap", initial: opts.gap ?? 0 });
+  const measuredBlocksNode = node(
+    [blocksNode, maxWidthNode],
+    (data, actions, ctx) => {
+      const blocksVal = data[0] != null && data[0].length > 0 ? data[0].at(-1) : ctx.prevData[0];
+      const mwVal = data[1] != null && data[1].length > 0 ? data[1].at(-1) : ctx.prevData[1];
+      const t0 = monotonicNs();
+      const result = measureBlocks(
+        blocksVal,
+        mwVal,
+        adapters,
+        measureCache,
+        defaultFont,
+        defaultLineHeight
+      );
+      const elapsed = monotonicNs() - t0;
+      const meta = measuredBlocksNode.meta;
+      if (meta) {
+        emitToMeta(meta["block-count"], result.length);
+        emitToMeta(meta["layout-time-ns"], elapsed);
+      }
+      actions.emit(result);
+      const flush = () => {
+        measureCache.clear();
+        adapters.text.clearCache?.();
+      };
+      return { onDeactivation: flush, onInvalidate: flush };
+    },
+    {
+      name: "measured-blocks",
+      describeKind: "derived",
+      meta: { "block-count": 0, "layout-time-ns": 0 },
+      equals: (a, b) => {
+        const ma = a;
+        const mb = b;
+        if (ma == null || mb == null) return ma === mb;
+        if (ma.length !== mb.length) return false;
+        for (let i = 0; i < ma.length; i++) {
+          const ba = ma[i];
+          const bb = mb[i];
+          if (ba.type !== bb.type || ba.width !== bb.width || ba.height !== bb.height || ba.index !== bb.index)
+            return false;
+        }
+        return true;
+      }
+    }
+  );
+  const blockFlowNode = node(
+    [measuredBlocksNode, gapNode],
+    (batchData, actions, ctx) => {
+      const data = batchData.map(
+        (batch, i) => batch != null && batch.length > 0 ? batch.at(-1) : ctx.prevData[i]
+      );
+      actions.emit(computeBlockFlow(data[0], data[1]));
+    },
+    {
+      name: "block-flow",
+      describeKind: "derived",
+      equals: (a, b) => {
+        const fa = a;
+        const fb = b;
+        if (fa == null || fb == null) return fa === fb;
+        if (fa.length !== fb.length) return false;
+        for (let i = 0; i < fa.length; i++) {
+          const pa = fa[i];
+          const pb = fb[i];
+          if (pa.x !== pb.x || pa.y !== pb.y || pa.width !== pb.width || pa.height !== pb.height)
+            return false;
+        }
+        return true;
+      }
+    }
+  );
+  const totalHeightNode = node(
+    [blockFlowNode],
+    (batchData, actions, ctx) => {
+      const data = batchData.map(
+        (batch, i) => batch != null && batch.length > 0 ? batch.at(-1) : ctx.prevData[i]
+      );
+      actions.emit(computeTotalHeight(data[0]));
+    },
+    { describeKind: "derived", name: "total-height" }
+  );
+  g.add(blocksNode, { name: "blocks" });
+  g.add(maxWidthNode, { name: "max-width" });
+  g.add(gapNode, { name: "gap" });
+  g.add(measuredBlocksNode, { name: "measured-blocks" });
+  g.add(blockFlowNode, { name: "block-flow" });
+  g.add(totalHeightNode, { name: "total-height" });
+  return {
+    graph: g,
+    setBlocks: (blocks) => g.set("blocks", blocks),
+    setMaxWidth: (mw) => g.set("max-width", Math.max(0, mw)),
+    setGap: (gap) => g.set("gap", gap),
+    measuredBlocks: measuredBlocksNode,
+    blockFlow: blockFlowNode,
+    totalHeight: totalHeightNode
+  };
+}
+
+// src/utils/reactive-layout/reactive-flow-layout.ts
+import { monotonicNs as monotonicNs2, node as node2 } from "@graphrefly/pure-ts/core";
+import { Graph as Graph2 } from "@graphrefly/pure-ts/graph";
+function circleIntervalForBand(o, bandTop, bandBottom) {
+  const hPad = o.hPad ?? 0;
+  const vPad = o.vPad ?? 0;
+  const top = bandTop - vPad;
+  const bottom = bandBottom + vPad;
+  if (top >= o.cy + o.r || bottom <= o.cy - o.r) return null;
+  const minDy = o.cy >= top && o.cy <= bottom ? 0 : o.cy < top ? top - o.cy : o.cy - bottom;
+  if (minDy >= o.r) return null;
+  const maxDx = Math.sqrt(o.r * o.r - minDy * minDy);
+  return { left: o.cx - maxDx - hPad, right: o.cx + maxDx + hPad };
+}
+function rectIntervalForBand(o, bandTop, bandBottom) {
+  const hPad = o.hPad ?? 0;
+  const vPad = o.vPad ?? 0;
+  if (bandBottom <= o.y - vPad) return null;
+  if (bandTop >= o.y + o.h + vPad) return null;
+  return { left: o.x - hPad, right: o.x + o.w + hPad };
+}
+function obstacleIntervalForBand(o, bandTop, bandBottom) {
+  return o.kind === "circle" ? circleIntervalForBand(o, bandTop, bandBottom) : rectIntervalForBand(o, bandTop, bandBottom);
+}
+function computeFlowLines(segments, container, columns, obstacles, lineHeight, minSlotWidth, opts) {
+  const paragraphSpacing = opts?.paragraphSpacing ?? lineHeight;
+  const lines = [];
+  let cursor = { segmentIndex: 0, graphemeIndex: 0 };
+  if (segments.length === 0 || columns.count <= 0 || lineHeight <= 0) {
+    return { lines, cursor };
+  }
+  const padX = container.paddingX ?? 0;
+  const padY = container.paddingY ?? 0;
+  const availWidth = Math.max(0, container.width - padX * 2);
+  const availHeight = Math.max(0, container.height - padY * 2);
+  const gapTotal = columns.gap * Math.max(0, columns.count - 1);
+  const colWidth = Math.max(0, (availWidth - gapTotal) / columns.count);
+  if (colWidth <= 0) return { lines, cursor };
+  outerCol: for (let col = 0; col < columns.count; col++) {
+    const colLeft = padX + col * (colWidth + columns.gap);
+    const colRight = colLeft + colWidth;
+    let bandTop = padY;
+    while (bandTop + lineHeight <= padY + availHeight) {
+      const bandBottom = bandTop + lineHeight;
+      const blocked = [];
+      for (let oi = 0; oi < obstacles.length; oi++) {
+        const iv = obstacleIntervalForBand(obstacles[oi], bandTop, bandBottom);
+        if (iv !== null) blocked.push(iv);
+      }
+      const slots = carveTextLineSlots({ left: colLeft, right: colRight }, blocked, minSlotWidth);
+      if (slots.length === 0) {
+        bandTop += lineHeight;
+        continue;
+      }
+      let hardBreakThisBand = false;
+      for (let si = 0; si < slots.length; si++) {
+        const slot = slots[si];
+        const slotW = slot.right - slot.left;
+        const line = layoutNextLine(segments, cursor, slotW);
+        if (line === null) {
+          return { lines, cursor };
+        }
+        if (line.text.length === 0 && line.width === 0) {
+          cursor = line.end;
+          hardBreakThisBand = true;
+          break;
+        }
+        lines.push({
+          x: slot.left,
+          y: bandTop,
+          width: line.width,
+          slotWidth: slotW,
+          text: line.text,
+          columnIndex: col,
+          flushToRight: slot.right < colRight - 0.5
+        });
+        cursor = line.end;
+      }
+      if (hardBreakThisBand) {
+        bandTop += paragraphSpacing;
+        continue;
+      }
+      bandTop += lineHeight;
+      if (cursor.segmentIndex >= segments.length) break outerCol;
+    }
+    if (cursor.segmentIndex >= segments.length) break;
+  }
+  return { lines, cursor };
+}
+function reactiveFlowLayout(opts) {
+  const { adapter, name = "reactive-flow-layout", minSlotWidth = 20 } = opts;
+  const g = new Graph2(name);
+  const measureCache = /* @__PURE__ */ new Map();
+  const textNode = node2([], { name: "text", initial: opts.text ?? "" });
+  const fontNode = node2([], { name: "font", initial: opts.font ?? "16px sans-serif" });
+  const lineHeightNode = node2([], { name: "line-height", initial: opts.lineHeight ?? 20 });
+  const containerNode = node2([], {
+    name: "container",
+    initial: opts.container ?? { width: 800, height: 600, paddingX: 0, paddingY: 0 }
+  });
+  const columnsNode = node2([], {
+    name: "columns",
+    initial: opts.columns ?? { count: 1, gap: 0 }
+  });
+  const obstaclesNode = node2([], { name: "obstacles", initial: opts.obstacles ?? [] });
+  const paragraphSpacingNode = node2([], {
+    name: "paragraph-spacing",
+    initial: opts.paragraphSpacing ?? null
+  });
+  const segmentsNode = node2(
+    [textNode, fontNode],
+    (data, actions, ctx) => {
+      const b0 = data[0];
+      const textVal = b0 != null && b0.length > 0 ? b0.at(-1) : ctx.prevData[0];
+      const b1 = data[1];
+      const fontVal = b1 != null && b1.length > 0 ? b1.at(-1) : ctx.prevData[1];
+      const result = analyzeAndMeasure(textVal, fontVal, adapter, measureCache);
+      actions.emit(result);
+      const flush = () => {
+        measureCache.clear();
+        adapter.clearCache?.();
+      };
+      return { onDeactivation: flush, onInvalidate: flush };
+    },
+    { name: "segments", describeKind: "derived" }
+  );
+  const flowLinesNode = node2(
+    [segmentsNode, containerNode, columnsNode, obstaclesNode, lineHeightNode, paragraphSpacingNode],
+    (batchData, actions, ctx) => {
+      const data = batchData.map(
+        (batch, i) => batch != null && batch.length > 0 ? batch.at(-1) : ctx.prevData[i]
+      );
+      const segments = data[0];
+      const t0 = monotonicNs2();
+      const effectiveSpacing = data[5] ?? data[4];
+      const { lines: result, cursor } = computeFlowLines(
+        segments,
+        data[1],
+        data[2],
+        data[3],
+        data[4],
+        minSlotWidth,
+        { paragraphSpacing: effectiveSpacing }
+      );
+      const elapsed = monotonicNs2() - t0;
+      const overflow = Math.max(0, segments.length - cursor.segmentIndex);
+      const meta = flowLinesNode.meta;
+      if (meta) {
+        emitToMeta(meta["line-count"], result.length);
+        emitToMeta(meta["layout-time-ns"], elapsed);
+        emitToMeta(meta["overflow-segments"], overflow);
+      }
+      actions.emit(result);
+    },
+    {
+      describeKind: "derived",
+      name: "flow-lines",
+      meta: {
+        "line-count": 0,
+        "layout-time-ns": 0,
+        "overflow-segments": 0
+      },
+      equals: (a, b) => {
+        const la = a;
+        const lb = b;
+        if (la.length !== lb.length) return false;
+        for (let i = 0; i < la.length; i++) {
+          const pa = la[i];
+          const pb = lb[i];
+          if (pa.x !== pb.x || pa.y !== pb.y || pa.width !== pb.width || pa.slotWidth !== pb.slotWidth || pa.text !== pb.text || pa.columnIndex !== pb.columnIndex || pa.flushToRight !== pb.flushToRight)
+            return false;
+        }
+        return true;
+      }
+    }
+  );
+  g.add(textNode, { name: "text" });
+  g.add(fontNode, { name: "font" });
+  g.add(lineHeightNode, { name: "line-height" });
+  g.add(containerNode, { name: "container" });
+  g.add(columnsNode, { name: "columns" });
+  g.add(obstaclesNode, { name: "obstacles" });
+  g.add(paragraphSpacingNode, { name: "paragraph-spacing" });
+  g.add(segmentsNode, { name: "segments" });
+  g.add(flowLinesNode, { name: "flow-lines" });
+  return {
+    graph: g,
+    setText: (t) => g.set("text", t),
+    setFont: (f) => g.set("font", f),
+    setLineHeight: (lh) => g.set("line-height", lh),
+    setContainer: (c) => g.set("container", c),
+    setColumns: (c) => g.set("columns", c),
+    setObstacles: (o) => g.set("obstacles", o),
+    setParagraphSpacing: (ps) => g.set("paragraph-spacing", ps),
+    segments: segmentsNode,
+    flowLines: flowLinesNode
+  };
+}
+
+export {
+  CliMeasureAdapter,
+  PrecomputedAdapter,
+  CanvasMeasureAdapter,
+  NodeCanvasMeasureAdapter,
+  SvgBoundsAdapter,
+  ImageSizeAdapter,
+  measureBlock,
+  measureBlocks,
+  computeBlockFlow,
+  computeTotalHeight,
+  reactiveBlockLayout,
+  circleIntervalForBand,
+  rectIntervalForBand,
+  computeFlowLines,
+  reactiveFlowLayout
+};
+//# sourceMappingURL=chunk-42FQ27MQ.js.map