@aznabee/freehand-ui 0.2.1 → 0.3.0

package/dist/index.d.ts

@@ -28,7 +28,25 @@ export type DecorationType =
  */
 export type LocalizedText = string | Record<string, string>;
 
+/**
+ * Words of a note drawn in a colour (and weight) of their own. Every
+ * occurrence of `text` in the note is painted, including one that wraps onto
+ * the next line. Where two highlights overlap, the earlier one wins.
+ */
+export interface NoteHighlight {
+  /** The words to find, exactly as written in the note. */
+  text: string;
+  /** Any CSS colour. Omit to keep the note's own colour. */
+  color?: string;
+  /** e.g. `700`. Omit to keep the note's own weight. */
+  fontWeight?: number | string;
+}
+
 export interface NoteOptions {
+  /**
+   * What the note says. A line break (`\n`) starts a new line; see
+   * `wordsPerLine` for how the rest is wrapped.
+   */
   text: LocalizedText;
   /**
    * Which side of the element the note sits on. Always honoured - a note that
@@ -49,6 +67,27 @@ export interface NoteOptions {
    * visitor's own languages. Only meaningful when `text` is a map.
    */
   locale?: string | string[] | null;
+  /**
+   * Colour of the handwriting and its underline. Defaults to the doodle's own
+   * `color`.
+   */
+  color?: string;
+  /** Size of the handwriting, px. Default `19`. */
+  fontSize?: number;
+  /** Weight of the handwriting. Default `600`. */
+  fontWeight?: number | string;
+  /**
+   * Rotate the note by exactly this many degrees (negative leans it up to the
+   * right). Omit for a small random tilt, different for each note.
+   */
+  tilt?: number;
+  /**
+   * Words per line. Default `2`. Use `0` to break only where the text has a
+   * line break (`\n`).
+   */
+  wordsPerLine?: number;
+  /** Paint some of the words in another colour, e.g. `{ text: "Game Mode!", color: "#ffc83d" }`. */
+  highlight?: NoteHighlight | NoteHighlight[];
 }
 
 export interface ArrowAnimationOptions {
@@ -85,6 +124,14 @@ export interface ArrowOptions {
   /** `"edge"` lands just outside the frame; `"center"` points into it. */
   to?: DoodlePosition | "edge";
   style?: "curved" | "straight" | "dotted" | "looped";
+  /** Colour of the arrow. Defaults to the doodle's own `color`. */
+  color?: string;
+  /** Thickness of the arrow's line, px. Defaults to the doodle's `strokeWidth`. */
+  strokeWidth?: number;
+  /** How shaky the pen is. Defaults to the doodle's `roughness`. */
+  roughness?: number;
+  /** `0`-`1`. Defaults to the doodle's `opacity`. */
+  opacity?: number;
   /**
    * Motion for the arrow. On by default - the shaft draws itself on and the
    * whole mark leans toward its target. `false` draws it static. Respects

package/dist/native.cjs

@@ -342,6 +342,9 @@ function mergeOptions(options = {}) {
       // `animate: false` opts out, an object tunes speed and gestures
       animate: normalizeArrowAnimation(config.animate)
     };
+    for (const key of ["color", "strokeWidth", "roughness", "opacity"]) {
+      if (config[key] !== void 0) merged.arrow[key] = config[key];
+    }
   }
   if (merged.decorations === true) {
     merged.decorations = { count: null, types: null };
@@ -1269,7 +1272,24 @@ function boundsOf(points) {
     height: Math.max(...ys) - Math.min(...ys)
   };
 }
-function drawArrow(svg, rect, arrowOptions, style, seed, origin = null, context = {}) {
+function resolveArrowStyle(base, options = {}) {
+  const style = { ...base };
+  if (typeof options.color === "string" && options.color.trim()) {
+    style.color = options.color;
+  }
+  if (Number.isFinite(options.strokeWidth) && options.strokeWidth > 0) {
+    style.strokeWidth = options.strokeWidth;
+  }
+  if (Number.isFinite(options.roughness) && options.roughness >= 0) {
+    style.roughness = options.roughness;
+  }
+  if (Number.isFinite(options.opacity)) {
+    style.opacity = Math.min(1, Math.max(0, options.opacity));
+  }
+  return style;
+}
+function drawArrow(svg, rect, arrowOptions, baseStyle, seed, origin = null, context = {}) {
+  const style = resolveArrowStyle(baseStyle, arrowOptions);
   const random = createRandom(seed + 17);
   const { start, end } = arrowEndpoints(rect, arrowOptions, random, origin);
   const dx = end.x - start.x;
@@ -1389,17 +1409,69 @@ function drawUnderline(svg, x, y, width, style, random) {
   );
 }
 var DEFAULT_WORDS_PER_LINE = 2;
-function wrapWords(text, perLine) {
+function wrapWords(text, perLine, marks = null) {
+  const source = String(text);
   const lines = [];
-  for (const paragraph of String(text).split(/\r?\n/)) {
-    const words = paragraph.trim().split(/\s+/).filter(Boolean);
+  let cursor = 0;
+  for (const [index, paragraph] of source.split(/(\r?\n)/).entries()) {
+    const start = cursor;
+    cursor += paragraph.length;
+    if (index % 2 === 1) continue;
+    const words = [...paragraph.matchAll(/\S+/g)].map((m) => ({
+      text: m[0],
+      at: start + m.index
+    }));
     if (!words.length) continue;
     const size = Number.isFinite(perLine) && perLine >= 1 ? Math.round(perLine) : words.length;
     for (let i = 0; i < words.length; i += size) {
-      lines.push(words.slice(i, i + size).join(" "));
+      lines.push(lineOf(words.slice(i, i + size), marks));
     }
   }
-  return lines.length ? lines : [String(text)];
+  return lines.length ? lines : [lineOf([{ text: source, at: 0 }], marks)];
+}
+function lineOf(words, marks) {
+  const text = words.map((w) => w.text).join(" ");
+  const result = [];
+  let previous = -1;
+  words.forEach((word, index) => {
+    const first = marks ? marks[word.at] ?? -1 : -1;
+    if (index > 0) result.push(previous === first ? first : -1);
+    for (let k = 0; k < word.text.length; k++) {
+      result.push(marks ? marks[word.at + k] ?? -1 : -1);
+    }
+    previous = marks ? marks[word.at + word.text.length - 1] ?? -1 : -1;
+  });
+  return { text, marks: result };
+}
+function normalizeHighlights(highlight) {
+  const list = Array.isArray(highlight) ? highlight : highlight ? [highlight] : [];
+  return list.map((entry) => typeof entry === "string" ? { text: entry } : entry).filter((entry) => entry && typeof entry.text === "string" && entry.text);
+}
+function highlightMarks(text, highlights) {
+  if (!highlights.length) return null;
+  const marks = new Int16Array(text.length).fill(-1);
+  let any = false;
+  highlights.forEach((highlight, index) => {
+    for (let at = text.indexOf(highlight.text); at !== -1; at = text.indexOf(highlight.text, at + highlight.text.length)) {
+      for (let k = at; k < at + highlight.text.length; k++) {
+        if (marks[k] === -1) {
+          marks[k] = index;
+          any = true;
+        }
+      }
+    }
+  });
+  return any ? marks : null;
+}
+function segmentsOf(line) {
+  const segments = [];
+  for (let i = 0; i < line.text.length; i++) {
+    const highlight = line.marks[i] ?? -1;
+    const last = segments[segments.length - 1];
+    if (last && last.highlight === highlight) last.text += line.text[i];
+    else segments.push({ text: line.text[i], highlight });
+  }
+  return segments;
 }
 function measureWidth(element, content, fontSize) {
   try {
@@ -1416,7 +1488,13 @@ function measureWidth(element, content, fontSize) {
 }
 function createNoteText(svg, text, style, options = {}) {
   const fontSize = style.fontSize ?? NOTE_FONT_SIZE;
-  const lines = wrapWords(text, options.wordsPerLine ?? DEFAULT_WORDS_PER_LINE);
+  const highlights = normalizeHighlights(options.highlight);
+  const wrapped = wrapWords(
+    text,
+    options.wordsPerLine ?? DEFAULT_WORDS_PER_LINE,
+    highlightMarks(String(text), highlights)
+  );
+  const lines = wrapped.map((line) => line.text);
   const lineHeight = fontSize * 1.05;
   const rtl = options.rtl ?? isRtlText(text);
   const group = createSvgElement("g");
@@ -1427,7 +1505,7 @@ function createNoteText(svg, text, style, options = {}) {
   textEl.setAttribute("opacity", String(style.opacity));
   textEl.setAttribute("font-size", String(fontSize));
   textEl.setAttribute("font-family", style.fontFamily || HANDWRITTEN_FONT);
-  textEl.setAttribute("font-weight", "600");
+  textEl.setAttribute("font-weight", String(style.fontWeight ?? "600"));
   textEl.setAttribute("letter-spacing", "0.4");
   textEl.setAttribute("text-anchor", "start");
   textEl.setAttribute("dominant-baseline", "auto");
@@ -1438,11 +1516,25 @@ function createNoteText(svg, text, style, options = {}) {
   if (options.locale) {
     textEl.setAttributeNS(XML_NS, "xml:lang", options.locale);
   }
-  const tspans = lines.map((line, index) => {
+  const tspans = wrapped.map((line, index) => {
     const tspan = createSvgElement("tspan");
-    tspan.textContent = line;
     tspan.setAttribute("x", "0");
     tspan.setAttribute("dy", index === 0 ? "0" : String(lineHeight));
+    const segments = segmentsOf(line);
+    if (segments.every((segment) => segment.highlight === -1)) {
+      tspan.textContent = line.text;
+    } else {
+      for (const segment of segments) {
+        const run = createSvgElement("tspan");
+        run.textContent = segment.text;
+        const highlight = highlights[segment.highlight];
+        if (highlight?.color) run.setAttribute("fill", highlight.color);
+        if (highlight?.fontWeight != null) {
+          run.setAttribute("font-weight", String(highlight.fontWeight));
+        }
+        tspan.appendChild(run);
+      }
+    }
     textEl.appendChild(tspan);
     return tspan;
   });
@@ -1545,7 +1637,21 @@ function nudgeIntoBand(box, guard, band) {
   if (!dx) return box;
   return { ...box, x: box.x + dx };
 }
-function renderAnnotation(svg, rect, noteOptions, style, seed = 1, layout = {}) {
+function resolveNoteStyle(base, options = {}) {
+  const style = { ...base };
+  if (typeof options.color === "string" && options.color.trim()) {
+    style.color = options.color;
+  }
+  if (Number.isFinite(options.fontSize) && options.fontSize > 0) {
+    style.fontSize = options.fontSize;
+  }
+  if (typeof options.fontWeight === "number" && options.fontWeight > 0 || typeof options.fontWeight === "string" && options.fontWeight.trim()) {
+    style.fontWeight = options.fontWeight;
+  }
+  return style;
+}
+function renderAnnotation(svg, rect, noteOptions, baseStyle, seed = 1, layout = {}) {
+  const style = resolveNoteStyle(baseStyle, noteOptions ?? {});
   const { text, locale } = resolveLocalizedText(
     noteOptions?.text,
     noteOptions?.locale
@@ -1556,9 +1662,11 @@ function renderAnnotation(svg, rect, noteOptions, style, seed = 1, layout = {})
   const random = createRandom(seed + 9);
   const note = createNoteText(svg, text, style, {
     wordsPerLine: noteOptions.wordsPerLine,
-    locale
+    locale,
+    highlight: noteOptions.highlight
   });
-  const tilt = (random() - 0.45) * 7;
+  const randomTilt = (random() - 0.45) * 7;
+  const tilt = Number.isFinite(noteOptions.tilt) ? noteOptions.tilt : randomTilt;
   const tiltPad = Math.abs(Math.sin(tilt * Math.PI / 180)) * note.width * 0.5;
   const size = {
     width: note.width,
@@ -2156,7 +2264,16 @@ function blurOf(node) {
 }
 function renderNode(node, key, context) {
   const props = { key, ...propsOf(node) };
-  if (node.tagName === "tspan") return (0, import_react.createElement)(import_react_native_svg.TSpan, props, node.textContent);
+  if (node.tagName === "tspan") {
+    if (node.children.length) {
+      return (0, import_react.createElement)(
+        import_react_native_svg.TSpan,
+        props,
+        ...node.children.map((child, index) => renderNode(child, index, context))
+      );
+    }
+    return (0, import_react.createElement)(import_react_native_svg.TSpan, props, node.textContent);
+  }
   if (node.tagName === "circle" && blurOf(node) > 0) {
     const id = `${context.prefix}-glow-${context.defs.length}`;
     const color = props.fill;

package/dist/native.d.ts

@@ -8,6 +8,7 @@ export type {
   DecorationType,
   LocalizedText,
   NoteOptions,
+  NoteHighlight,
   ArrowOptions,
   ArrowAnimationOptions,
   DecorationOptions,

package/dist/native.js

@@ -343,6 +343,9 @@ function mergeOptions(options = {}) {
       // `animate: false` opts out, an object tunes speed and gestures
       animate: normalizeArrowAnimation(config.animate)
     };
+    for (const key of ["color", "strokeWidth", "roughness", "opacity"]) {
+      if (config[key] !== void 0) merged.arrow[key] = config[key];
+    }
   }
   if (merged.decorations === true) {
     merged.decorations = { count: null, types: null };
@@ -1270,7 +1273,24 @@ function boundsOf(points) {
     height: Math.max(...ys) - Math.min(...ys)
   };
 }
-function drawArrow(svg, rect, arrowOptions, style, seed, origin = null, context = {}) {
+function resolveArrowStyle(base, options = {}) {
+  const style = { ...base };
+  if (typeof options.color === "string" && options.color.trim()) {
+    style.color = options.color;
+  }
+  if (Number.isFinite(options.strokeWidth) && options.strokeWidth > 0) {
+    style.strokeWidth = options.strokeWidth;
+  }
+  if (Number.isFinite(options.roughness) && options.roughness >= 0) {
+    style.roughness = options.roughness;
+  }
+  if (Number.isFinite(options.opacity)) {
+    style.opacity = Math.min(1, Math.max(0, options.opacity));
+  }
+  return style;
+}
+function drawArrow(svg, rect, arrowOptions, baseStyle, seed, origin = null, context = {}) {
+  const style = resolveArrowStyle(baseStyle, arrowOptions);
   const random = createRandom(seed + 17);
   const { start, end } = arrowEndpoints(rect, arrowOptions, random, origin);
   const dx = end.x - start.x;
@@ -1390,17 +1410,69 @@ function drawUnderline(svg, x, y, width, style, random) {
   );
 }
 var DEFAULT_WORDS_PER_LINE = 2;
-function wrapWords(text, perLine) {
+function wrapWords(text, perLine, marks = null) {
+  const source = String(text);
   const lines = [];
-  for (const paragraph of String(text).split(/\r?\n/)) {
-    const words = paragraph.trim().split(/\s+/).filter(Boolean);
+  let cursor = 0;
+  for (const [index, paragraph] of source.split(/(\r?\n)/).entries()) {
+    const start = cursor;
+    cursor += paragraph.length;
+    if (index % 2 === 1) continue;
+    const words = [...paragraph.matchAll(/\S+/g)].map((m) => ({
+      text: m[0],
+      at: start + m.index
+    }));
     if (!words.length) continue;
     const size = Number.isFinite(perLine) && perLine >= 1 ? Math.round(perLine) : words.length;
     for (let i = 0; i < words.length; i += size) {
-      lines.push(words.slice(i, i + size).join(" "));
+      lines.push(lineOf(words.slice(i, i + size), marks));
     }
   }
-  return lines.length ? lines : [String(text)];
+  return lines.length ? lines : [lineOf([{ text: source, at: 0 }], marks)];
+}
+function lineOf(words, marks) {
+  const text = words.map((w) => w.text).join(" ");
+  const result = [];
+  let previous = -1;
+  words.forEach((word, index) => {
+    const first = marks ? marks[word.at] ?? -1 : -1;
+    if (index > 0) result.push(previous === first ? first : -1);
+    for (let k = 0; k < word.text.length; k++) {
+      result.push(marks ? marks[word.at + k] ?? -1 : -1);
+    }
+    previous = marks ? marks[word.at + word.text.length - 1] ?? -1 : -1;
+  });
+  return { text, marks: result };
+}
+function normalizeHighlights(highlight) {
+  const list = Array.isArray(highlight) ? highlight : highlight ? [highlight] : [];
+  return list.map((entry) => typeof entry === "string" ? { text: entry } : entry).filter((entry) => entry && typeof entry.text === "string" && entry.text);
+}
+function highlightMarks(text, highlights) {
+  if (!highlights.length) return null;
+  const marks = new Int16Array(text.length).fill(-1);
+  let any = false;
+  highlights.forEach((highlight, index) => {
+    for (let at = text.indexOf(highlight.text); at !== -1; at = text.indexOf(highlight.text, at + highlight.text.length)) {
+      for (let k = at; k < at + highlight.text.length; k++) {
+        if (marks[k] === -1) {
+          marks[k] = index;
+          any = true;
+        }
+      }
+    }
+  });
+  return any ? marks : null;
+}
+function segmentsOf(line) {
+  const segments = [];
+  for (let i = 0; i < line.text.length; i++) {
+    const highlight = line.marks[i] ?? -1;
+    const last = segments[segments.length - 1];
+    if (last && last.highlight === highlight) last.text += line.text[i];
+    else segments.push({ text: line.text[i], highlight });
+  }
+  return segments;
 }
 function measureWidth(element, content, fontSize) {
   try {
@@ -1417,7 +1489,13 @@ function measureWidth(element, content, fontSize) {
 }
 function createNoteText(svg, text, style, options = {}) {
   const fontSize = style.fontSize ?? NOTE_FONT_SIZE;
-  const lines = wrapWords(text, options.wordsPerLine ?? DEFAULT_WORDS_PER_LINE);
+  const highlights = normalizeHighlights(options.highlight);
+  const wrapped = wrapWords(
+    text,
+    options.wordsPerLine ?? DEFAULT_WORDS_PER_LINE,
+    highlightMarks(String(text), highlights)
+  );
+  const lines = wrapped.map((line) => line.text);
   const lineHeight = fontSize * 1.05;
   const rtl = options.rtl ?? isRtlText(text);
   const group = createSvgElement("g");
@@ -1428,7 +1506,7 @@ function createNoteText(svg, text, style, options = {}) {
   textEl.setAttribute("opacity", String(style.opacity));
   textEl.setAttribute("font-size", String(fontSize));
   textEl.setAttribute("font-family", style.fontFamily || HANDWRITTEN_FONT);
-  textEl.setAttribute("font-weight", "600");
+  textEl.setAttribute("font-weight", String(style.fontWeight ?? "600"));
   textEl.setAttribute("letter-spacing", "0.4");
   textEl.setAttribute("text-anchor", "start");
   textEl.setAttribute("dominant-baseline", "auto");
@@ -1439,11 +1517,25 @@ function createNoteText(svg, text, style, options = {}) {
   if (options.locale) {
     textEl.setAttributeNS(XML_NS, "xml:lang", options.locale);
   }
-  const tspans = lines.map((line, index) => {
+  const tspans = wrapped.map((line, index) => {
     const tspan = createSvgElement("tspan");
-    tspan.textContent = line;
     tspan.setAttribute("x", "0");
     tspan.setAttribute("dy", index === 0 ? "0" : String(lineHeight));
+    const segments = segmentsOf(line);
+    if (segments.every((segment) => segment.highlight === -1)) {
+      tspan.textContent = line.text;
+    } else {
+      for (const segment of segments) {
+        const run = createSvgElement("tspan");
+        run.textContent = segment.text;
+        const highlight = highlights[segment.highlight];
+        if (highlight?.color) run.setAttribute("fill", highlight.color);
+        if (highlight?.fontWeight != null) {
+          run.setAttribute("font-weight", String(highlight.fontWeight));
+        }
+        tspan.appendChild(run);
+      }
+    }
     textEl.appendChild(tspan);
     return tspan;
   });
@@ -1546,7 +1638,21 @@ function nudgeIntoBand(box, guard, band) {
   if (!dx) return box;
   return { ...box, x: box.x + dx };
 }
-function renderAnnotation(svg, rect, noteOptions, style, seed = 1, layout = {}) {
+function resolveNoteStyle(base, options = {}) {
+  const style = { ...base };
+  if (typeof options.color === "string" && options.color.trim()) {
+    style.color = options.color;
+  }
+  if (Number.isFinite(options.fontSize) && options.fontSize > 0) {
+    style.fontSize = options.fontSize;
+  }
+  if (typeof options.fontWeight === "number" && options.fontWeight > 0 || typeof options.fontWeight === "string" && options.fontWeight.trim()) {
+    style.fontWeight = options.fontWeight;
+  }
+  return style;
+}
+function renderAnnotation(svg, rect, noteOptions, baseStyle, seed = 1, layout = {}) {
+  const style = resolveNoteStyle(baseStyle, noteOptions ?? {});
   const { text, locale } = resolveLocalizedText(
     noteOptions?.text,
     noteOptions?.locale
@@ -1557,9 +1663,11 @@ function renderAnnotation(svg, rect, noteOptions, style, seed = 1, layout = {})
   const random = createRandom(seed + 9);
   const note = createNoteText(svg, text, style, {
     wordsPerLine: noteOptions.wordsPerLine,
-    locale
+    locale,
+    highlight: noteOptions.highlight
   });
-  const tilt = (random() - 0.45) * 7;
+  const randomTilt = (random() - 0.45) * 7;
+  const tilt = Number.isFinite(noteOptions.tilt) ? noteOptions.tilt : randomTilt;
   const tiltPad = Math.abs(Math.sin(tilt * Math.PI / 180)) * note.width * 0.5;
   const size = {
     width: note.width,
@@ -2157,7 +2265,16 @@ function blurOf(node) {
 }
 function renderNode(node, key, context) {
   const props = { key, ...propsOf(node) };
-  if (node.tagName === "tspan") return h(TSpan, props, node.textContent);
+  if (node.tagName === "tspan") {
+    if (node.children.length) {
+      return h(
+        TSpan,
+        props,
+        ...node.children.map((child, index) => renderNode(child, index, context))
+      );
+    }
+    return h(TSpan, props, node.textContent);
+  }
   if (node.tagName === "circle" && blurOf(node) > 0) {
     const id = `${context.prefix}-glow-${context.defs.length}`;
     const color = props.fill;