@aznabee/freehand-ui 0.1.8 → 0.2.0

package/README.md

@@ -424,7 +424,41 @@ Server-rendered markup is unaffected: the overlay is drawn in an effect, so the
 
 - Inline object props (`note={{ text: "hi" }}`) are compared by value, so a re-render does not tear down and redraw the overlay with a new random seed.
 - `disabled` skips drawing entirely - useful behind a reduced-motion check or a feature flag.
-- TypeScript definitions ship with the package for both entry points.
+- TypeScript definitions ship with the package for every entry point.
+
+---
+
+## React Native
+
+The same doodles, drawn with [react-native-svg](https://github.com/software-mansion/react-native-svg). Import from the `native` entry point - it needs `react-native-svg` installed in the app.
+
+```bash
+npm install @aznabee/freehand-ui react-native-svg
+```
+
+```tsx
+import Doodle from "@aznabee/freehand-ui/native";
+
+<Doodle
+  note={{ text: "start chat", position: "bottom", underline: false }}
+  arrow={{ from: "left", to: "edge", style: "curved" }}
+  decorations={{ types: ["heart"] }}
+  radius={16}
+>
+  <TouchableOpacity onPress={start}>...</TouchableOpacity>
+</Doodle>
+```
+
+`<Doodle>` is a plain `View` - every `View` prop passes through - and takes the same options as the web component. The doodle is drawn in an absolutely positioned layer that ignores touches and never affects layout, so, as on the web, an ancestor with `overflow: "hidden"` clips it.
+
+Differences from the web:
+
+- **Corner radius** is not detected from the children. Pass `radius`, or it is read from the wrapper's own `borderRadius` style.
+- **Handwriting** uses the platform's built-in face - Noteworthy on iOS, `casual` on Android - because nothing is fetched at runtime. Link Caveat into the app and pass `fontFamily="Caveat"` to match the web exactly.
+- **Note width** is estimated from the glyphs rather than measured, which is close enough to place the note and its underline.
+- **Arrows** draw on and lean as they do on the web (the lean runs on the native driver). A dotted shaft stays still instead of crawling. Both are skipped when the OS asks for reduced motion.
+- **Language**: React Native has no `navigator.languages`, so pass `locale` (your app's i18n language) to choose from a multilingual note.
+- `childSelector` has no equivalent.
 
 ---
 

package/dist/freehand-ui.cjs

@@ -577,8 +577,13 @@ function annotationAnchor(position, rect, offset = 12) {
   return point;
 }
 
-// src/renderer.js
+// src/svg-dom.js
 var SVG_NS = "http://www.w3.org/2000/svg";
+function createSvgElement(tag) {
+  return document.createElementNS(SVG_NS, tag);
+}
+
+// src/renderer.js
 var XML_NS = "http://www.w3.org/XML/1998/namespace";
 var HANDWRITTEN_FONT = '"Caveat", "Kalam", "Patrick Hand", "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive';
 var NOTE_FONT_SIZE = 19;
@@ -802,7 +807,7 @@ function createBorderBreaks(perimeter, config, random) {
   return breaks;
 }
 function createGroup(parent, x, y, rotation = 0) {
-  const group = document.createElementNS(SVG_NS, "g");
+  const group = createSvgElement("g");
   group.setAttribute(
     "transform",
     `translate(${fmt(x)} ${fmt(y)}) rotate(${rotation.toFixed(1)})`
@@ -811,7 +816,7 @@ function createGroup(parent, x, y, rotation = 0) {
   return group;
 }
 function appendPath(svg, d, style) {
-  const path = document.createElementNS(SVG_NS, "path");
+  const path = createSvgElement("path");
   path.setAttribute("d", d);
   path.setAttribute("fill", style.fill ?? "none");
   path.setAttribute("stroke", style.color);
@@ -826,7 +831,7 @@ function appendPath(svg, d, style) {
   return path;
 }
 function appendGlow(svg, radius, style) {
-  const circle = document.createElementNS(SVG_NS, "circle");
+  const circle = createSvgElement("circle");
   circle.setAttribute("r", fmt(radius));
   circle.setAttribute("fill", style.color);
   circle.setAttribute("opacity", String(style.opacity));
@@ -1130,7 +1135,7 @@ function drawArrow(svg, rect, arrowOptions, style, seed, origin = null, context
       tipAngle = Math.atan2(end.y - c2y, end.x - c2x);
     }
   }
-  const group = document.createElementNS(SVG_NS, "g");
+  const group = createSvgElement("g");
   svg.appendChild(group);
   const shaftPaths = [];
   if (ghost) {
@@ -1220,8 +1225,8 @@ function createNoteText(svg, text, style, options = {}) {
   const lines = wrapWords(text, options.wordsPerLine ?? DEFAULT_WORDS_PER_LINE);
   const lineHeight = fontSize * 1.05;
   const rtl = options.rtl ?? isRtlText(text);
-  const group = document.createElementNS(SVG_NS, "g");
-  const textEl = document.createElementNS(SVG_NS, "text");
+  const group = createSvgElement("g");
+  const textEl = createSvgElement("text");
   textEl.setAttribute("x", "0");
   textEl.setAttribute("y", "0");
   textEl.setAttribute("fill", style.color);
@@ -1240,7 +1245,7 @@ function createNoteText(svg, text, style, options = {}) {
     textEl.setAttributeNS(XML_NS, "xml:lang", options.locale);
   }
   const tspans = lines.map((line, index) => {
-    const tspan = document.createElementNS(SVG_NS, "tspan");
+    const tspan = createSvgElement("tspan");
     tspan.textContent = line;
     tspan.setAttribute("x", "0");
     tspan.setAttribute("dy", index === 0 ? "0" : String(lineHeight));
@@ -1304,7 +1309,7 @@ function placeNoteText(note, box, style, seed, options = {}) {
   return note.group;
 }
 function createOverlaySvg(left, top, width, height) {
-  const svg = document.createElementNS(SVG_NS, "svg");
+  const svg = createSvgElement("svg");
   svg.setAttribute("class", OVERLAY_CLASS);
   svg.setAttribute("xmlns", SVG_NS);
   svg.setAttribute("width", String(width));

package/dist/freehand-ui.js

@@ -552,8 +552,13 @@ function annotationAnchor(position, rect, offset = 12) {
   return point;
 }
 
-// src/renderer.js
+// src/svg-dom.js
 var SVG_NS = "http://www.w3.org/2000/svg";
+function createSvgElement(tag) {
+  return document.createElementNS(SVG_NS, tag);
+}
+
+// src/renderer.js
 var XML_NS = "http://www.w3.org/XML/1998/namespace";
 var HANDWRITTEN_FONT = '"Caveat", "Kalam", "Patrick Hand", "Bradley Hand", "Segoe Script", "Comic Sans MS", cursive';
 var NOTE_FONT_SIZE = 19;
@@ -777,7 +782,7 @@ function createBorderBreaks(perimeter, config, random) {
   return breaks;
 }
 function createGroup(parent, x, y, rotation = 0) {
-  const group = document.createElementNS(SVG_NS, "g");
+  const group = createSvgElement("g");
   group.setAttribute(
     "transform",
     `translate(${fmt(x)} ${fmt(y)}) rotate(${rotation.toFixed(1)})`
@@ -786,7 +791,7 @@ function createGroup(parent, x, y, rotation = 0) {
   return group;
 }
 function appendPath(svg, d, style) {
-  const path = document.createElementNS(SVG_NS, "path");
+  const path = createSvgElement("path");
   path.setAttribute("d", d);
   path.setAttribute("fill", style.fill ?? "none");
   path.setAttribute("stroke", style.color);
@@ -801,7 +806,7 @@ function appendPath(svg, d, style) {
   return path;
 }
 function appendGlow(svg, radius, style) {
-  const circle = document.createElementNS(SVG_NS, "circle");
+  const circle = createSvgElement("circle");
   circle.setAttribute("r", fmt(radius));
   circle.setAttribute("fill", style.color);
   circle.setAttribute("opacity", String(style.opacity));
@@ -1105,7 +1110,7 @@ function drawArrow(svg, rect, arrowOptions, style, seed, origin = null, context
       tipAngle = Math.atan2(end.y - c2y, end.x - c2x);
     }
   }
-  const group = document.createElementNS(SVG_NS, "g");
+  const group = createSvgElement("g");
   svg.appendChild(group);
   const shaftPaths = [];
   if (ghost) {
@@ -1195,8 +1200,8 @@ function createNoteText(svg, text, style, options = {}) {
   const lines = wrapWords(text, options.wordsPerLine ?? DEFAULT_WORDS_PER_LINE);
   const lineHeight = fontSize * 1.05;
   const rtl = options.rtl ?? isRtlText(text);
-  const group = document.createElementNS(SVG_NS, "g");
-  const textEl = document.createElementNS(SVG_NS, "text");
+  const group = createSvgElement("g");
+  const textEl = createSvgElement("text");
   textEl.setAttribute("x", "0");
   textEl.setAttribute("y", "0");
   textEl.setAttribute("fill", style.color);
@@ -1215,7 +1220,7 @@ function createNoteText(svg, text, style, options = {}) {
     textEl.setAttributeNS(XML_NS, "xml:lang", options.locale);
   }
   const tspans = lines.map((line, index) => {
-    const tspan = document.createElementNS(SVG_NS, "tspan");
+    const tspan = createSvgElement("tspan");
     tspan.textContent = line;
     tspan.setAttribute("x", "0");
     tspan.setAttribute("dy", index === 0 ? "0" : String(lineHeight));
@@ -1279,7 +1284,7 @@ function placeNoteText(note, box, style, seed, options = {}) {
   return note.group;
 }
 function createOverlaySvg(left, top, width, height) {
-  const svg = document.createElementNS(SVG_NS, "svg");
+  const svg = createSvgElement("svg");
   svg.setAttribute("class", OVERLAY_CLASS);
   svg.setAttribute("xmlns", SVG_NS);
   svg.setAttribute("width", String(width));