@weasel-js/text 1.7.0 → 1.7.2

package/dist/index.js

@@ -1,6 +1,7 @@
-import { resolveTextStyle, resolveAlign, cachedLayoutRuns, DECORATION_KINDS, decorationRule } from './chunk-SXEHVOGE.js';
-export { DEFAULT_TEXT_STYLE, LAYOUT_CACHE_STRUCTURAL_LIMIT, LAYOUT_CACHE_VARIANT_LIMIT, cachedLayoutRuns, fontString, layoutRuns, resolveAlign, resolveTextStyle } from './chunk-SXEHVOGE.js';
+import { resolveTextStyle, resolveAlign, cachedLayoutRuns, graphemeCount, wrapLines, DECORATION_KINDS, decorationRule } from './chunk-JQPOFIGT.js';
+export { BREAK_ALLOWED, BREAK_MANDATORY, DEFAULT_DECORATION_METRICS, DEFAULT_TEXT_STYLE, LAYOUT_CACHE_STRUCTURAL_LIMIT, LAYOUT_CACHE_VARIANT_LIMIT, NO_BREAK, cachedLayoutRuns, decorationMetrics, fontString, isHardLineBreak, layoutRuns, lineBreakOpportunities, resolveAlign, resolveTextStyle } from './chunk-JQPOFIGT.js';
 import { resolveScreenLength } from '@weasel-js/paint';
+import { faceMetricsOf, resolveFontVariant, faceMetricsFor } from '@weasel-js/font';
 
 // src/runs.ts
 function toRuns(input) {
@@ -232,43 +233,119 @@ function transformRunTexts(texts, transforms) {
   }
   return out;
 }
+var SMALL_CAPS_SCALE = 0.7;
+function smallCapsScale(face) {
+  const x = face?.xHeight;
+  const cap = face?.capHeight;
+  if (x === void 0 || cap === void 0 || x >= cap) return SMALL_CAPS_SCALE;
+  return x / cap;
+}
+function smallCapsScaleFor(family, weight, style) {
+  return smallCapsScale(faceMetricsOf(resolveFontVariant(family, weight, style)));
+}
+function isSmallCapsLetter(ch) {
+  return ch.toUpperCase() !== ch;
+}
+function smallCapsText(text, srcMap) {
+  let out = "";
+  const small = [];
+  const starts = [];
+  const ends = [];
+  let resized = false;
+  let anySmall = false;
+  let at = 0;
+  for (const ch of text) {
+    const shrink = isSmallCapsLetter(ch);
+    const piece = shrink ? ch.toUpperCase() : ch;
+    if (piece.length !== ch.length) resized = true;
+    anySmall ||= shrink;
+    const start = srcMap ? srcMap.starts[at] : at;
+    const end = srcMap ? srcMap.ends[at] : at + ch.length;
+    for (let k = 0; k < piece.length; k++) {
+      small.push(shrink);
+      starts.push(start);
+      ends.push(end);
+    }
+    out += piece;
+    at += ch.length;
+  }
+  if (!anySmall) return srcMap ? { text, srcMap } : { text };
+  const map = resized ? { length: srcMap?.length ?? text.length, starts, ends } : srcMap;
+  return { text: out, ...map ? { srcMap: map } : {}, small };
+}
 
 // src/runs/resolveRuns.ts
 var SCRIPT_METRICS = Object.freeze({
   super: Object.freeze({ size: 0.583, shift: 0.333 }),
   sub: Object.freeze({ size: 0.583, shift: -0.333 })
 });
+var resolvedScripts = /* @__PURE__ */ new WeakMap();
+function scriptMetrics(face) {
+  if (!face || !face.superscript && !face.subscript) return SCRIPT_METRICS;
+  let out = resolvedScripts.get(face);
+  if (!out) {
+    out = Object.freeze({
+      super: face.superscript ?? SCRIPT_METRICS.super,
+      sub: face.subscript ?? SCRIPT_METRICS.sub
+    });
+    resolvedScripts.set(face, out);
+  }
+  return out;
+}
+function scriptMetricsFor(family, weight, style) {
+  return scriptMetrics(faceMetricsOf(resolveFontVariant(family, weight, style)));
+}
 function numericWeight(w) {
   if (typeof w === "number") return w;
-  if (w === "bold") return 700;
+  if (w === "bold" || w === "bolder") return 700;
   if (w === "normal") return 400;
   const parsed = Number(w);
   return Number.isFinite(parsed) ? parsed : 400;
 }
+function isBoldWeight(w) {
+  return numericWeight(w) >= 600;
+}
+function resolveRunFace(run, style) {
+  return {
+    fontFamily: run.fontFamily ?? style.fontFamily,
+    fontWeight: run.fontWeight ?? (run.bold ? 700 : numericWeight(style.fontWeight)),
+    fontStyle: run.italic ? "italic" : style.fontStyle
+  };
+}
 function resolveRuns(runs, style, viewScale = 1) {
   const out = [];
-  const baseWeight = numericWeight(style.fontWeight);
   const shown = transformRunTexts(
     runs.map((r) => r.text),
     runs.map((r) => r.textTransform ?? style.textTransform)
   );
   for (let i = 0; i < runs.length; i++) {
     const run = runs[i];
-    const { text, srcMap } = shown[i];
+    let { text, srcMap } = shown[i];
     const scriptKey = run.script ?? style.script;
-    const script = scriptKey ? SCRIPT_METRICS[scriptKey] : void 0;
+    const { fontFamily, fontWeight, fontStyle } = resolveRunFace(run, style);
+    const script = scriptKey ? scriptMetricsFor(fontFamily, fontWeight, fontStyle)[scriptKey] : void 0;
     const shiftEm = run.baselineShift ?? script?.shift ?? 0;
     const scale = run.fontScale ?? script?.size ?? 1;
     const relative = run.fontSize === void 0 && scale !== 1;
+    const fontSize = run.fontSize !== void 0 ? resolveScreenLength(run.fontSize, viewScale) : style.fontSize * scale;
+    let sizeMap;
+    if ((run.fontVariantCaps ?? style.fontVariantCaps) === "small-caps") {
+      const caps = smallCapsText(text, srcMap);
+      text = caps.text;
+      srcMap = caps.srcMap;
+      if (caps.small) {
+        const small = fontSize * smallCapsScaleFor(fontFamily, fontWeight, fontStyle);
+        sizeMap = caps.small.map((s) => s ? small : fontSize);
+      }
+    }
     out.push({
       text,
       ...srcMap ? { srcMap } : {},
-      fontFamily: run.fontFamily ?? style.fontFamily,
-      // An absolute size wins over a relative one; naming both is a consumer
-      // saying "this size exactly", which a multiplier cannot improve on.
-      fontSize: run.fontSize !== void 0 ? resolveScreenLength(run.fontSize, viewScale) : style.fontSize * scale,
-      fontWeight: run.bold ? 700 : baseWeight,
-      fontStyle: run.italic ? "italic" : style.fontStyle,
+      fontFamily,
+      fontSize,
+      ...sizeMap ? { sizeMap } : {},
+      fontWeight,
+      fontStyle,
       fill: run.fill ?? style.fill,
       // Unlike the decorations below, a run's stroke *replaces* the node's
       // rather than adding to it — there is only one outline to paint.
@@ -303,7 +380,8 @@ function textPoseLayoutInput(pose, scale = 1) {
       maxWidth: style.wrap ? pose.width : Infinity,
       alignWidth: pose.width,
       lineHeight: style.lineHeight,
-      align: resolveAlign(style.align, style.direction)
+      align: resolveAlign(style.align, style.direction),
+      justify: style.align === "justify"
     }
   };
 }
@@ -319,46 +397,21 @@ function layoutTextPose(pose, scale = 1) {
 
 // src/measure/measureText.ts
 function measuredWidth(ctx, text, style) {
-  return ctx.measureText(text).width + text.length * style.letterSpacing;
+  return ctx.measureText(text).width + (style.letterSpacing === 0 ? 0 : graphemeCount(text) * style.letterSpacing);
 }
 function measureText(ctx, text, maxWidth, style) {
-  const lines = [];
-  const lineStarts = [];
-  const paragraphs = text.split("\n");
-  let pos = 0;
-  for (let pi = 0; pi < paragraphs.length; pi++) {
-    if (pi > 0) pos += 1;
-    const paragraph = paragraphs[pi];
-    if (paragraph === "") {
-      lines.push("");
-      lineStarts.push(pos);
-      continue;
-    }
-    const words = paragraph.split(/(\s+)/).filter((w) => w.length > 0);
-    let current = "";
-    let currentStart = pos;
-    let consumed = 0;
-    for (const word of words) {
-      if (current === "") currentStart = pos + consumed;
-      const candidate = current + word;
-      if (current === "" || measuredWidth(ctx, candidate, style) <= maxWidth) {
-        current = candidate;
-      } else {
-        lines.push(current.trimEnd());
-        lineStarts.push(currentStart);
-        if (/^\s+$/.test(word)) {
-          current = "";
-        } else {
-          current = word;
-          currentStart = pos + consumed;
-        }
-      }
-      consumed += word.length;
-    }
-    lines.push(current.trimEnd());
-    lineStarts.push(currentStart);
-    pos += paragraph.length;
+  const cps = [];
+  const at = [];
+  let u = 0;
+  for (const ch of text) {
+    cps.push(ch.codePointAt(0));
+    at.push(u);
+    u += ch.length;
   }
+  at.push(u);
+  const wrapped = wrapLines(cps, maxWidth, (start, end) => measuredWidth(ctx, text.slice(at[start], at[end]), style));
+  const lines = wrapped.map((l) => text.slice(at[l.start], at[l.end]).replace(/ +$/, ""));
+  const lineStarts = wrapped.map((l) => at[l.start]);
   const height = lines.length * style.fontSize * style.lineHeight;
   return { lines, lineStarts, height };
 }
@@ -391,8 +444,8 @@ function textLineBoxes(pose, opts = {}) {
   }
   return out;
 }
-function runMetrics(run, fontSize) {
-  const script = run.script ? SCRIPT_METRICS[run.script] : void 0;
+function runMetrics(run, fontSize, face) {
+  const script = run.script ? scriptMetrics(face)[run.script] : void 0;
   const scale = run.fontScale ?? script?.size ?? 1;
   const shiftEm = run.baselineShift ?? script?.shift ?? 0;
   return {
@@ -402,68 +455,84 @@ function runMetrics(run, fontSize) {
     y: shiftEm === 0 ? 0 : -shiftEm * fontSize
   };
 }
-function layoutMarkdown(runs, maxWidth, fontSize, measure, lineHeightFactor = 1.3) {
+function layoutMarkdown(runs, maxWidth, fontSize, measure, lineHeightFactor = 1.3, faceOf) {
   if (runs.length === 0) return { lines: [], width: 0, height: 0 };
   const shown = transformRunTexts(runs.map((r) => r.text), runs.map((r) => r.textTransform ?? "none"));
-  runs = runs.map((r, i) => shown[i].text === r.text ? r : { ...r, text: shown[i].text });
-  const lines = [];
-  let currentRuns = [];
-  let lineX = 0;
-  let lineMaxSize = 0;
-  function commitLine() {
-    const effectiveFontSize = lineMaxSize > 0 ? lineMaxSize : fontSize;
-    const lineHeight = effectiveFontSize * lineHeightFactor;
-    lines.push({ runs: currentRuns, width: lineX, height: lineHeight });
-    currentRuns = [];
-    lineX = 0;
-    lineMaxSize = 0;
-  }
-  function processSegment(segRun) {
-    const { size: effectiveSize, y: runY } = runMetrics(segRun, fontSize);
-    lineMaxSize = Math.max(lineMaxSize, effectiveSize);
-    if (maxWidth === Infinity) {
-      const w = measure(segRun.text, effectiveSize, segRun.bold ?? false, segRun.italic ?? false);
-      currentRuns.push({ ...segRun, x: lineX, width: w, y: runY, size: effectiveSize });
-      lineX += w;
+  const segs = [];
+  runs.forEach((r, i) => {
+    const text = shown[i].text;
+    if (r.fontVariantCaps !== "small-caps") {
+      segs.push(text === r.text ? r : { ...r, text });
       return;
     }
-    const words = segRun.text.split(/ /);
-    let wordBuf = "";
-    for (let wi = 0; wi < words.length; wi++) {
-      const word = words[wi];
-      const candidate = wordBuf.length > 0 ? wordBuf + " " + word : word;
-      const candidateW = measure(candidate, effectiveSize, segRun.bold ?? false, segRun.italic ?? false);
-      if (lineX + candidateW > maxWidth && (lineX > 0 || wordBuf.length > 0)) {
-        if (wordBuf.length > 0) {
-          const w = measure(wordBuf, effectiveSize, segRun.bold ?? false, segRun.italic ?? false);
-          currentRuns.push({ ...segRun, text: wordBuf, x: lineX, width: w, y: runY, size: effectiveSize });
-          lineX += w;
-        }
-        commitLine();
-        lineMaxSize = Math.max(lineMaxSize, effectiveSize);
-        wordBuf = word;
+    const caps = smallCapsText(text);
+    if (!caps.small) {
+      segs.push({ ...r, text: caps.text });
+      return;
+    }
+    let at = 0;
+    for (const piece of caps.text) {
+      const small = caps.small[at];
+      at += piece.length;
+      const prev = segs[segs.length - 1];
+      if (prev?.source === r && prev.smallCaps === true === small) prev.text += piece;
+      else segs.push({ ...r, text: piece, source: r, ...small ? { smallCaps: true } : {} });
+    }
+  });
+  const cps = [];
+  const runOf = [];
+  const startOf = [];
+  const endOf = [];
+  segs.forEach((r, ri) => {
+    let at = 0;
+    for (const ch of r.text) {
+      cps.push(ch.codePointAt(0));
+      runOf.push(ri);
+      startOf.push(at);
+      at += ch.length;
+      endOf.push(at);
+    }
+  });
+  const placed = segs.map(({ smallCaps, source: _source, ...run }) => {
+    const face = faceOf?.(run.bold ?? false, run.italic ?? false);
+    const { size: runSize, y } = runMetrics(run, fontSize, face);
+    return { run, face, y, runSize, size: smallCaps ? runSize * smallCapsScale(face) : runSize };
+  });
+  const pieceWidth = (p) => {
+    const { run, size } = placed[p.run];
+    return measure(run.text.slice(p.start, p.end), size, run.bold ?? false, run.italic ?? false);
+  };
+  function piecesOf(from, to) {
+    const out = [];
+    for (let k = from; k < to; k++) {
+      const last = out[out.length - 1];
+      if (last && last.run === runOf[k] && last.end === startOf[k]) {
+        out[out.length - 1] = { ...last, end: endOf[k] };
       } else {
-        wordBuf = candidate;
+        out.push({ run: runOf[k], start: startOf[k], end: endOf[k] });
       }
     }
-    if (wordBuf.length > 0) {
-      const w = measure(wordBuf, effectiveSize, segRun.bold ?? false, segRun.italic ?? false);
-      currentRuns.push({ ...segRun, text: wordBuf, x: lineX, width: w, y: runY, size: effectiveSize });
-      lineX += w;
-    }
+    return out;
   }
-  for (const run of runs) {
-    const segments = run.text.split("\n");
-    for (let si = 0; si < segments.length; si++) {
-      if (si > 0) commitLine();
-      const seg = segments[si];
-      if (seg.length > 0) {
-        processSegment({ ...run, text: seg });
-      }
+  const lines = [];
+  function commitLine(line) {
+    let x = 0;
+    let maxSize = 0;
+    const positioned = [];
+    for (const p of line) {
+      const { run, face, size, y, runSize } = placed[p.run];
+      const width2 = pieceWidth(p);
+      positioned.push({ ...run, text: run.text.slice(p.start, p.end), x, width: width2, y, size, ...face ? { face } : {} });
+      x += width2;
+      maxSize = Math.max(maxSize, runSize);
     }
+    lines.push({ runs: positioned, width: x, height: (maxSize > 0 ? maxSize : fontSize) * lineHeightFactor });
   }
-  if (currentRuns.length > 0) {
-    commitLine();
+  const widthOf = (start, end) => piecesOf(start, end).reduce((w, p) => w + pieceWidth(p), 0);
+  for (const line of wrapLines(cps, maxWidth, widthOf)) {
+    let end = line.end;
+    if (line.wrapped) while (end > line.start && cps[end - 1] === 32) end--;
+    commitLine(piecesOf(line.start, end));
   }
   const width = Math.max(...lines.map((l) => l.width));
   const height = lines.reduce((sum, l) => sum + l.height, 0);
@@ -512,7 +581,10 @@ function blockLeft(ctx, x, width) {
 function createMarkdownRenderer(ctx, text, fontSize, maxWidth = Infinity, fontOpts = {}) {
   const measure = canvasMeasure(ctx, fontOpts);
   const parsed = typeof text === "string" ? markdownToRuns(text) : text;
-  const layout = layoutMarkdown(parsed, maxWidth, fontSize, measure, fontOpts.lineHeight);
+  const family = fontOpts.family ?? "sans-serif";
+  const weight = numericWeight(fontOpts.weight ?? 400);
+  const faceOf = (bold, italic) => faceMetricsFor(family, bold ? 700 : weight, italic ? "italic" : "normal");
+  const layout = layoutMarkdown(parsed, maxWidth, fontSize, measure, fontOpts.lineHeight, faceOf);
   function walk(c, x, y, drawRun) {
     const align = c.textAlign;
     const left = blockLeft(c, x, layout.width);
@@ -537,7 +609,7 @@ function createMarkdownRenderer(ctx, text, fontSize, maxWidth = Infinity, fontOp
       _ctx.fillStyle = s.fill;
       for (const kind of DECORATION_KINDS) {
         if (!s.flags[kind]) continue;
-        const { y0, y1 } = decorationRule(kind, s.baselineY, s.size);
+        const { y0, y1 } = decorationRule(kind, s.baselineY, s.size, s.face);
         _ctx.fillRect(s.x0, y0, s.x1 - s.x0, y1 - y0);
       }
     };
@@ -556,11 +628,11 @@ function createMarkdownRenderer(ctx, text, fontSize, maxWidth = Infinity, fontOp
       };
       const baselineY = ry + alphabeticBaselineBelow(_ctx);
       const open = span;
-      if (open !== null && open.line === line && open.x1 === rx && open.fill === fill && open.size === run.size && open.baselineY === baselineY && DECORATION_KINDS.every((k) => open.flags[k] === flags[k])) {
+      if (open !== null && open.line === line && open.x1 === rx && open.fill === fill && open.size === run.size && open.face === run.face && open.baselineY === baselineY && DECORATION_KINDS.every((k) => open.flags[k] === flags[k])) {
         open.x1 = rx + run.width;
       } else {
         flush();
-        span = { flags, fill, size: run.size, baselineY, line, x0: rx, x1: rx + run.width };
+        span = { flags, fill, size: run.size, face: run.face, baselineY, line, x0: rx, x1: rx + run.width };
       }
     });
     flush();
@@ -571,6 +643,6 @@ function createMarkdownRenderer(ctx, text, fontSize, maxWidth = Infinity, fontOp
   return { renderer, strokeRenderer, width: layout.width, height: layout.height };
 }
 
-export { MARKDOWN_RUN_GRAMMAR, SCRIPT_METRICS, createMarkdownRenderer, layoutMarkdown, layoutTextPose, markdownToRuns, measureText, measureTextBounds, measuredWidth, resolveRuns, runsToMarkdown, runsToPlainText, textLineBoxes, textPoseLayoutInput, toRuns, transformRunTexts, verticalAlignOffset };
+export { MARKDOWN_RUN_GRAMMAR, SCRIPT_METRICS, SMALL_CAPS_SCALE, createMarkdownRenderer, isBoldWeight, isSmallCapsLetter, layoutMarkdown, layoutTextPose, markdownToRuns, measureText, measureTextBounds, measuredWidth, numericWeight, resolveRunFace, resolveRuns, runsToMarkdown, runsToPlainText, scriptMetrics, scriptMetricsFor, smallCapsScale, smallCapsScaleFor, smallCapsText, textLineBoxes, textPoseLayoutInput, toRuns, transformRunTexts, verticalAlignOffset };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map