tldraw 5.2.0-next.e2b8d10bf10e → 5.2.0

package/dist-esm/lib/shapes/shared/freehand/getStrokePoints.mjs

@@ -1,104 +1,39 @@
 import { Vec } from "@tldraw/editor";
-const MIN_PRESSURE = 0.025;
+import {
+  distances,
+  ingest,
+  inputX,
+  inputY,
+  inputZ,
+  pointCount,
+  pointX,
+  pointY,
+  pressures,
+  runningLengths
+} from "./core.mjs";
 function getStrokePoints(rawInputPoints, options = {}) {
-  const { streamline = 0.5, size = 16, simulatePressure = false } = options;
-  if (rawInputPoints.length === 0) return [];
-  const t = 0.15 + (1 - streamline) * 0.85;
-  let pts = rawInputPoints.map(Vec.From);
-  let pointsRemovedFromNearEnd = 0;
-  if (!simulatePressure) {
-    for (const pt2 of pts) {
-      if (pt2.z < MIN_PRESSURE) {
-        pt2.z = MIN_PRESSURE;
-      }
-    }
-  }
-  if (pts.length === 0)
-    return [
-      {
-        point: Vec.From(rawInputPoints[0]),
-        input: Vec.From(rawInputPoints[0]),
-        pressure: simulatePressure ? 0.5 : 0.15,
-        vector: new Vec(1, 1),
-        distance: 0,
-        runningLength: 0,
-        radius: 1
-      }
-    ];
-  let pt = pts[1];
-  while (pt) {
-    if (Vec.Dist2(pt, pts[0]) > (size / 3) ** 2) break;
-    pts[0].z = Math.max(pts[0].z, pt.z);
-    pts.splice(1, 1);
-    pt = pts[1];
-  }
-  const last = pts.pop();
-  pt = pts[pts.length - 1];
-  while (pt) {
-    if (Vec.Dist2(pt, last) > (size / 3) ** 2) break;
-    pts.pop();
-    pt = pts[pts.length - 1];
-    pointsRemovedFromNearEnd++;
-  }
-  pts.push(last);
-  const isComplete = options.last || !options.simulatePressure || pts.length > 1 && Vec.Dist2(pts[pts.length - 1], pts[pts.length - 2]) < size ** 2 || pointsRemovedFromNearEnd > 0;
-  if (pts.length === 2 && options.simulatePressure) {
-    const last2 = pts[1];
-    pts = pts.slice(0, -1);
-    for (let i = 1; i < 5; i++) {
-      const next = Vec.Lrp(pts[0], last2, i / 4);
-      next.z = (pts[0].z + (last2.z - pts[0].z)) * i / 4;
-      pts.push(next);
-    }
-  }
-  const strokePoints = [
-    {
-      point: pts[0],
-      input: pts[0],
-      pressure: simulatePressure ? 0.5 : pts[0].z,
-      vector: new Vec(1, 1),
-      distance: 0,
-      runningLength: 0,
-      radius: 1
-    }
-  ];
-  let totalLength = 0;
-  let prev = strokePoints[0];
-  let point, distance;
-  if (isComplete && streamline > 0) {
-    pts.push(pts[pts.length - 1].clone());
-  }
-  for (let i = 1, n = pts.length; i < n; i++) {
-    point = !t || options.last && i === n - 1 ? pts[i].clone() : pts[i].clone().lrp(prev.point, 1 - t);
-    if (prev.point.equals(point)) continue;
-    distance = Vec.Dist(point, prev.point);
-    totalLength += distance;
-    if (i < 4 && totalLength < size) {
-      continue;
-    }
-    prev = {
-      input: pts[i],
-      // The adjusted point
+  ingest(rawInputPoints, options);
+  const n = pointCount;
+  const ptX = pointX;
+  const ptY = pointY;
+  const inX = inputX;
+  const inY = inputY;
+  const inZ = inputZ;
+  const press = pressures;
+  const dists = distances;
+  const runs = runningLengths;
+  const strokePoints = new Array(n);
+  for (let i = 0; i < n; i++) {
+    const input = new Vec(inX[i], inY[i], inZ[i]);
+    const point = i === 0 ? input : new Vec(ptX[i], ptY[i], inZ[i]);
+    strokePoints[i] = {
       point,
-      // The input pressure (or .5 if not specified)
-      pressure: simulatePressure ? 0.5 : pts[i].z,
-      // The vector from the current point to the previous point
-      vector: Vec.Sub(prev.point, point).uni(),
-      // The distance between the current point and the previous point
-      distance,
-      // The total distance so far
-      runningLength: totalLength,
-      // The stroke point's radius
+      input,
+      pressure: press[i],
+      distance: dists[i],
+      runningLength: runs[i],
       radius: 1
     };
-    strokePoints.push(prev);
-  }
-  if (strokePoints[1]?.vector) {
-    strokePoints[0].vector = strokePoints[1].vector.clone();
-  }
-  if (totalLength < 1) {
-    const maxPressureAmongPoints = Math.max(0.5, ...strokePoints.map((s) => s.pressure));
-    strokePoints.forEach((s) => s.pressure = maxPressureAmongPoints);
   }
   return strokePoints;
 }

package/dist-esm/lib/shapes/shared/freehand/getStrokePoints.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/shapes/shared/freehand/getStrokePoints.ts"],
-  "sourcesContent": ["import { Vec, VecLike } from '@tldraw/editor'\nimport type { StrokeOptions, StrokePoint } from './types'\n\nconst MIN_PRESSURE = 0.025\n\n/**\n * ## getStrokePoints\n *\n * Get an array of points as objects with an adjusted point, pressure, vector, distance, and\n * runningLength.\n *\n * @param points - An array of points (as `[x, y, pressure]` or `{x, y, pressure}`). Pressure is\n *   optional in both cases.\n * @param options - An object with options.\n * @public\n */\nexport function getStrokePoints(\n\trawInputPoints: VecLike[],\n\toptions: StrokeOptions = {}\n): StrokePoint[] {\n\tconst { streamline = 0.5, size = 16, simulatePressure = false } = options\n\n\t// If we don't have any points, return an empty array.\n\tif (rawInputPoints.length === 0) return []\n\n\t// Find the interpolation level between points.\n\tconst t = 0.15 + (1 - streamline) * 0.85\n\n\t// Whatever the input is, make sure that the points are in number[][].\n\tlet pts = rawInputPoints.map(Vec.From)\n\n\tlet pointsRemovedFromNearEnd = 0\n\n\tif (!simulatePressure) {\n\t\t// Clamp any zero/near-zero pressure points to a minimum value.\n\t\t// Some pens or OSes report z=0 even while the pen is touching,\n\t\t// so we clamp rather than strip to avoid removing real input.\n\t\tfor (const pt of pts) {\n\t\t\tif (pt.z < MIN_PRESSURE) {\n\t\t\t\tpt.z = MIN_PRESSURE\n\t\t\t}\n\t\t}\n\t}\n\n\tif (pts.length === 0)\n\t\treturn [\n\t\t\t{\n\t\t\t\tpoint: Vec.From(rawInputPoints[0]),\n\t\t\t\tinput: Vec.From(rawInputPoints[0]),\n\t\t\t\tpressure: simulatePressure ? 0.5 : 0.15,\n\t\t\t\tvector: new Vec(1, 1),\n\t\t\t\tdistance: 0,\n\t\t\t\trunningLength: 0,\n\t\t\t\tradius: 1,\n\t\t\t},\n\t\t]\n\n\t// Strip points that are too close to the first point.\n\tlet pt = pts[1]\n\twhile (pt) {\n\t\tif (Vec.Dist2(pt, pts[0]) > (size / 3) ** 2) break\n\t\tpts[0].z = Math.max(pts[0].z, pt.z) // Use maximum pressure\n\t\tpts.splice(1, 1)\n\t\tpt = pts[1]\n\t}\n\n\t// Strip points that are too close to the last point.\n\tconst last = pts.pop()!\n\tpt = pts[pts.length - 1]\n\twhile (pt) {\n\t\tif (Vec.Dist2(pt, last) > (size / 3) ** 2) break\n\t\tpts.pop()\n\t\tpt = pts[pts.length - 1]\n\t\tpointsRemovedFromNearEnd++\n\t}\n\tpts.push(last)\n\n\tconst isComplete =\n\t\toptions.last ||\n\t\t!options.simulatePressure ||\n\t\t(pts.length > 1 && Vec.Dist2(pts[pts.length - 1], pts[pts.length - 2]) < size ** 2) ||\n\t\tpointsRemovedFromNearEnd > 0\n\n\t// Add extra points between the two, to help avoid \"dash\" lines\n\t// for strokes with tapered start and ends. Don't mutate the\n\t// input array!\n\tif (pts.length === 2 && options.simulatePressure) {\n\t\tconst last = pts[1]\n\t\tpts = pts.slice(0, -1)\n\t\tfor (let i = 1; i < 5; i++) {\n\t\t\tconst next = Vec.Lrp(pts[0], last, i / 4)\n\t\t\tnext.z = ((pts[0].z + (last.z - pts[0].z)) * i) / 4\n\t\t\tpts.push(next)\n\t\t}\n\t}\n\n\t// The strokePoints array will hold the points for the stroke.\n\t// Start it out with the first point, which needs no adjustment.\n\tconst strokePoints: StrokePoint[] = [\n\t\t{\n\t\t\tpoint: pts[0],\n\t\t\tinput: pts[0],\n\t\t\tpressure: simulatePressure ? 0.5 : pts[0].z,\n\t\t\tvector: new Vec(1, 1),\n\t\t\tdistance: 0,\n\t\t\trunningLength: 0,\n\t\t\tradius: 1,\n\t\t},\n\t]\n\n\t// We use the totalLength to keep track of the total distance\n\tlet totalLength = 0\n\n\t// We're set this to the latest point, so we can use it to calculate\n\t// the distance and vector of the next point.\n\tlet prev = strokePoints[0]\n\n\t// Iterate through all of the points, creating StrokePoints.\n\tlet point: Vec, distance: number\n\n\tif (isComplete && streamline > 0) {\n\t\tpts.push(pts[pts.length - 1].clone())\n\t}\n\n\tfor (let i = 1, n = pts.length; i < n; i++) {\n\t\tpoint =\n\t\t\t!t || (options.last && i === n - 1) ? pts[i].clone() : pts[i].clone().lrp(prev.point, 1 - t)\n\n\t\t// If the new point is the same as the previous point, skip ahead.\n\t\tif (prev.point.equals(point)) continue\n\n\t\t// How far is the new point from the previous point?\n\t\tdistance = Vec.Dist(point, prev.point)\n\n\t\t// Add this distance to the total \"running length\" of the line.\n\t\ttotalLength += distance\n\n\t\t// At the start of the line, we wait until the new point is a\n\t\t// certain distance away from the original point, to avoid noise\n\n\t\tif (i < 4 && totalLength < size) {\n\t\t\tcontinue\n\t\t}\n\n\t\t// Create a new strokepoint (it will be the new \"previous\" one).\n\t\tprev = {\n\t\t\tinput: pts[i],\n\t\t\t// The adjusted point\n\t\t\tpoint,\n\t\t\t// The input pressure (or .5 if not specified)\n\t\t\tpressure: simulatePressure ? 0.5 : pts[i].z,\n\t\t\t// The vector from the current point to the previous point\n\t\t\tvector: Vec.Sub(prev.point, point).uni(),\n\t\t\t// The distance between the current point and the previous point\n\t\t\tdistance,\n\t\t\t// The total distance so far\n\t\t\trunningLength: totalLength,\n\t\t\t// The stroke point's radius\n\t\t\tradius: 1,\n\t\t}\n\n\t\t// Push it to the strokePoints array.\n\t\tstrokePoints.push(prev)\n\t}\n\n\t// Set the vector of the first point to be the same as the second point.\n\tif (strokePoints[1]?.vector) {\n\t\tstrokePoints[0].vector = strokePoints[1].vector.clone()\n\t}\n\n\tif (totalLength < 1) {\n\t\tconst maxPressureAmongPoints = Math.max(0.5, ...strokePoints.map((s) => s.pressure))\n\t\tstrokePoints.forEach((s) => (s.pressure = maxPressureAmongPoints))\n\t}\n\n\treturn strokePoints\n}\n"],
-  "mappings": "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",
-  "names": ["pt", "last"]
+  "sourcesContent": ["import { Vec, VecLike } from '@tldraw/editor'\nimport {\n\tdistances,\n\tingest,\n\tinputX,\n\tinputY,\n\tinputZ,\n\tpointCount,\n\tpointX,\n\tpointY,\n\tpressures,\n\trunningLengths,\n} from './core'\nimport type { StrokeOptions, StrokePoint } from './types'\n\n/**\n * ## getStrokePoints\n *\n * Get an array of points as objects with an adjusted point, pressure, vector, distance, and\n * runningLength.\n *\n * @param points - An array of points (as `[x, y, pressure]` or `{x, y, pressure}`). Pressure is\n *   optional in both cases.\n * @param options - An object with options.\n * @public\n */\nexport function getStrokePoints(\n\trawInputPoints: VecLike[],\n\toptions: StrokeOptions = {}\n): StrokePoint[] {\n\tingest(rawInputPoints, options)\n\n\tconst n = pointCount\n\tconst ptX = pointX\n\tconst ptY = pointY\n\tconst inX = inputX\n\tconst inY = inputY\n\tconst inZ = inputZ\n\tconst press = pressures\n\tconst dists = distances\n\tconst runs = runningLengths\n\tconst strokePoints: StrokePoint[] = new Array(n)\n\tfor (let i = 0; i < n; i++) {\n\t\tconst input = new Vec(inX[i], inY[i], inZ[i])\n\t\t// The first point needs no adjustment, so its point and input are the same vector.\n\t\tconst point = i === 0 ? input : new Vec(ptX[i], ptY[i], inZ[i])\n\t\tstrokePoints[i] = {\n\t\t\tpoint,\n\t\t\tinput,\n\t\t\tpressure: press[i],\n\t\t\tdistance: dists[i],\n\t\t\trunningLength: runs[i],\n\t\t\tradius: 1,\n\t\t}\n\t}\n\treturn strokePoints\n}\n"],
+  "mappings": "AAAA,SAAS,WAAoB;AAC7B;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AAcA,SAAS,gBACf,gBACA,UAAyB,CAAC,GACV;AAChB,SAAO,gBAAgB,OAAO;AAE9B,QAAM,IAAI;AACV,QAAM,MAAM;AACZ,QAAM,MAAM;AACZ,QAAM,MAAM;AACZ,QAAM,MAAM;AACZ,QAAM,MAAM;AACZ,QAAM,QAAQ;AACd,QAAM,QAAQ;AACd,QAAM,OAAO;AACb,QAAM,eAA8B,IAAI,MAAM,CAAC;AAC/C,WAAS,IAAI,GAAG,IAAI,GAAG,KAAK;AAC3B,UAAM,QAAQ,IAAI,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;AAE5C,UAAM,QAAQ,MAAM,IAAI,QAAQ,IAAI,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;AAC9D,iBAAa,CAAC,IAAI;AAAA,MACjB;AAAA,MACA;AAAA,MACA,UAAU,MAAM,CAAC;AAAA,MACjB,UAAU,MAAM,CAAC;AAAA,MACjB,eAAe,KAAK,CAAC;AAAA,MACrB,QAAQ;AAAA,IACT;AAAA,EACD;AACA,SAAO;AACR;",
+  "names": []
 }

package/dist-esm/lib/shapes/shared/freehand/svg.mjs

@@ -1,34 +1,70 @@
-import { average, precise } from "@tldraw/editor";
+import { finishPath, resetPath, toCenti, writeCPair, writeStr } from "./fmt.mjs";
 function getSvgPathFromStrokePoints(points, closed = false) {
   const len = points.length;
   if (len < 2) {
     return "";
   }
-  let a = points[0].point;
-  let b = points[1].point;
+  resetPath();
   if (len === 2) {
-    return `M${precise(a)}L${precise(b)}`;
+    const a = points[0].point;
+    const b = points[1].point;
+    const ax = toCenti(a.x);
+    const ay = toCenti(a.y);
+    writeStr("M");
+    writeCPair(ax, ay);
+    writeStr("l");
+    writeCPair(toCenti(b.x) - ax, toCenti(b.y) - ay);
+    return finishPath();
+  }
+  const first = points[0].point;
+  const second = points[1].point;
+  const third = points[2].point;
+  const secondX = toCenti(second.x);
+  const secondY = toCenti(second.y);
+  const m01x = Math.round((first.x + second.x) * 50);
+  const m01y = Math.round((first.y + second.y) * 50);
+  const m12x = Math.round((second.x + third.x) * 50);
+  const m12y = Math.round((second.y + third.y) * 50);
+  let cx = m12x;
+  let cy = m12y;
+  if (closed) {
+    writeStr("M");
+    writeCPair(m01x, m01y);
+    writeStr("q");
+    writeCPair(secondX - m01x, secondY - m01y);
+    writeCPair(m12x - m01x, m12y - m01y);
+    writeStr("t");
+  } else {
+    const firstX = toCenti(first.x);
+    const firstY = toCenti(first.y);
+    writeStr("M");
+    writeCPair(firstX, firstY);
+    writeStr("q");
+    writeCPair(secondX - firstX, secondY - firstY);
+    writeCPair(m12x - firstX, m12y - firstY);
+    if (len > 3) writeStr("t");
   }
-  let result = "";
   for (let i = 2, max = len - 1; i < max; i++) {
-    a = points[i].point;
-    b = points[i + 1].point;
-    result += average(a, b);
+    const p = points[i].point;
+    const q = points[i + 1].point;
+    const mx = Math.round((p.x + q.x) * 50);
+    const my = Math.round((p.y + q.y) * 50);
+    writeCPair(mx - cx, my - cy);
+    cx = mx;
+    cy = my;
   }
+  const last = points[len - 1].point;
   if (closed) {
-    return `M${average(points[0].point, points[1].point)}Q${precise(points[1].point)}${average(
-      points[1].point,
-      points[2].point
-    )}T${result}${average(points[len - 1].point, points[0].point)}${average(
-      points[0].point,
-      points[1].point
-    )}Z`;
+    const mLastX = Math.round((last.x + first.x) * 50);
+    const mLastY = Math.round((last.y + first.y) * 50);
+    writeCPair(mLastX - cx, mLastY - cy);
+    writeCPair(m01x - mLastX, m01y - mLastY);
+    writeStr("Z");
   } else {
-    return `M${precise(points[0].point)}Q${precise(points[1].point)}${average(
-      points[1].point,
-      points[2].point
-    )}${points.length > 3 ? "T" : ""}${result}L${precise(points[len - 1].point)}`;
+    writeStr("l");
+    writeCPair(toCenti(last.x) - cx, toCenti(last.y) - cy);
   }
+  return finishPath();
 }
 export {
   getSvgPathFromStrokePoints

package/dist-esm/lib/shapes/shared/freehand/svg.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/shapes/shared/freehand/svg.ts"],
-  "sourcesContent": ["import { average, precise } from '@tldraw/editor'\nimport { StrokePoint } from './types'\n\n/**\n * Turn an array of stroke points into a path of quadratic curves.\n *\n * @param points - The stroke points returned from perfect-freehand\n * @param closed - Whether the shape is closed\n *\n * @public\n */\nexport function getSvgPathFromStrokePoints(points: StrokePoint[], closed = false): string {\n\tconst len = points.length\n\n\tif (len < 2) {\n\t\treturn ''\n\t}\n\n\tlet a = points[0].point\n\tlet b = points[1].point\n\n\tif (len === 2) {\n\t\treturn `M${precise(a)}L${precise(b)}`\n\t}\n\n\tlet result = ''\n\n\tfor (let i = 2, max = len - 1; i < max; i++) {\n\t\ta = points[i].point\n\t\tb = points[i + 1].point\n\t\tresult += average(a, b)\n\t}\n\n\tif (closed) {\n\t\t// If closed, draw a curve from the last point to the first\n\t\treturn `M${average(points[0].point, points[1].point)}Q${precise(points[1].point)}${average(\n\t\t\tpoints[1].point,\n\t\t\tpoints[2].point\n\t\t)}T${result}${average(points[len - 1].point, points[0].point)}${average(\n\t\t\tpoints[0].point,\n\t\t\tpoints[1].point\n\t\t)}Z`\n\t} else {\n\t\t// If not closed, draw a curve starting at the first point and\n\t\t// ending at the midpoint of the last and second-last point, then\n\t\t// complete the curve with a line segment to the last point.\n\t\treturn `M${precise(points[0].point)}Q${precise(points[1].point)}${average(\n\t\t\tpoints[1].point,\n\t\t\tpoints[2].point\n\t\t)}${points.length > 3 ? 'T' : ''}${result}L${precise(points[len - 1].point)}`\n\t}\n}\n"],
-  "mappings": "AAAA,SAAS,SAAS,eAAe;AAW1B,SAAS,2BAA2B,QAAuB,SAAS,OAAe;AACzF,QAAM,MAAM,OAAO;AAEnB,MAAI,MAAM,GAAG;AACZ,WAAO;AAAA,EACR;AAEA,MAAI,IAAI,OAAO,CAAC,EAAE;AAClB,MAAI,IAAI,OAAO,CAAC,EAAE;AAElB,MAAI,QAAQ,GAAG;AACd,WAAO,IAAI,QAAQ,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC;AAAA,EACpC;AAEA,MAAI,SAAS;AAEb,WAAS,IAAI,GAAG,MAAM,MAAM,GAAG,IAAI,KAAK,KAAK;AAC5C,QAAI,OAAO,CAAC,EAAE;AACd,QAAI,OAAO,IAAI,CAAC,EAAE;AAClB,cAAU,QAAQ,GAAG,CAAC;AAAA,EACvB;AAEA,MAAI,QAAQ;AAEX,WAAO,IAAI,QAAQ,OAAO,CAAC,EAAE,OAAO,OAAO,CAAC,EAAE,KAAK,CAAC,IAAI,QAAQ,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG;AAAA,MAClF,OAAO,CAAC,EAAE;AAAA,MACV,OAAO,CAAC,EAAE;AAAA,IACX,CAAC,IAAI,MAAM,GAAG,QAAQ,OAAO,MAAM,CAAC,EAAE,OAAO,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG;AAAA,MAC/D,OAAO,CAAC,EAAE;AAAA,MACV,OAAO,CAAC,EAAE;AAAA,IACX,CAAC;AAAA,EACF,OAAO;AAIN,WAAO,IAAI,QAAQ,OAAO,CAAC,EAAE,KAAK,CAAC,IAAI,QAAQ,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG;AAAA,MACjE,OAAO,CAAC,EAAE;AAAA,MACV,OAAO,CAAC,EAAE;AAAA,IACX,CAAC,GAAG,OAAO,SAAS,IAAI,MAAM,EAAE,GAAG,MAAM,IAAI,QAAQ,OAAO,MAAM,CAAC,EAAE,KAAK,CAAC;AAAA,EAC5E;AACD;",
+  "sourcesContent": ["import { finishPath, resetPath, toCenti, writeCPair, writeStr } from './fmt'\nimport { StrokePoint } from './types'\n\n/**\n * Turn an array of stroke points into a path of quadratic curves.\n *\n * The path uses relative commands with coordinates rounded to hundredths of a pixel, which\n * renders identically to the absolute 4-decimal form but is much smaller and faster to build.\n *\n * @param points - The stroke points returned from perfect-freehand\n * @param closed - Whether the shape is closed\n *\n * @public\n */\nexport function getSvgPathFromStrokePoints(points: StrokePoint[], closed = false): string {\n\tconst len = points.length\n\n\tif (len < 2) {\n\t\treturn ''\n\t}\n\n\tresetPath()\n\n\tif (len === 2) {\n\t\tconst a = points[0].point\n\t\tconst b = points[1].point\n\t\tconst ax = toCenti(a.x)\n\t\tconst ay = toCenti(a.y)\n\t\twriteStr('M')\n\t\twriteCPair(ax, ay)\n\t\twriteStr('l')\n\t\twriteCPair(toCenti(b.x) - ax, toCenti(b.y) - ay)\n\t\treturn finishPath()\n\t}\n\n\tconst first = points[0].point\n\tconst second = points[1].point\n\tconst third = points[2].point\n\n\tconst secondX = toCenti(second.x)\n\tconst secondY = toCenti(second.y)\n\t// midpoint of the first and second points\n\tconst m01x = Math.round((first.x + second.x) * 50)\n\tconst m01y = Math.round((first.y + second.y) * 50)\n\t// midpoint of the second and third points\n\tconst m12x = Math.round((second.x + third.x) * 50)\n\tconst m12y = Math.round((second.y + third.y) * 50)\n\n\t// Current position in integer hundredths\n\tlet cx = m12x\n\tlet cy = m12y\n\n\tif (closed) {\n\t\t// If closed, start at the first midpoint and draw a curve through the second point\n\t\twriteStr('M')\n\t\twriteCPair(m01x, m01y)\n\t\twriteStr('q')\n\t\twriteCPair(secondX - m01x, secondY - m01y)\n\t\twriteCPair(m12x - m01x, m12y - m01y)\n\t\twriteStr('t')\n\t} else {\n\t\t// If not closed, draw a curve starting at the first point and\n\t\t// ending at the midpoint of the second and third points.\n\t\tconst firstX = toCenti(first.x)\n\t\tconst firstY = toCenti(first.y)\n\t\twriteStr('M')\n\t\twriteCPair(firstX, firstY)\n\t\twriteStr('q')\n\t\twriteCPair(secondX - firstX, secondY - firstY)\n\t\twriteCPair(m12x - firstX, m12y - firstY)\n\t\tif (len > 3) writeStr('t')\n\t}\n\n\t// Continue the smooth quadratic chain through the midpoints of the remaining points\n\tfor (let i = 2, max = len - 1; i < max; i++) {\n\t\tconst p = points[i].point\n\t\tconst q = points[i + 1].point\n\t\tconst mx = Math.round((p.x + q.x) * 50)\n\t\tconst my = Math.round((p.y + q.y) * 50)\n\t\twriteCPair(mx - cx, my - cy)\n\t\tcx = mx\n\t\tcy = my\n\t}\n\n\tconst last = points[len - 1].point\n\n\tif (closed) {\n\t\t// Draw a curve from the last-first midpoint back to the first-second midpoint\n\t\tconst mLastX = Math.round((last.x + first.x) * 50)\n\t\tconst mLastY = Math.round((last.y + first.y) * 50)\n\t\twriteCPair(mLastX - cx, mLastY - cy)\n\t\twriteCPair(m01x - mLastX, m01y - mLastY)\n\t\twriteStr('Z')\n\t} else {\n\t\t// Complete the curve with a line segment to the last point.\n\t\twriteStr('l')\n\t\twriteCPair(toCenti(last.x) - cx, toCenti(last.y) - cy)\n\t}\n\n\treturn finishPath()\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY,WAAW,SAAS,YAAY,gBAAgB;AAc9D,SAAS,2BAA2B,QAAuB,SAAS,OAAe;AACzF,QAAM,MAAM,OAAO;AAEnB,MAAI,MAAM,GAAG;AACZ,WAAO;AAAA,EACR;AAEA,YAAU;AAEV,MAAI,QAAQ,GAAG;AACd,UAAM,IAAI,OAAO,CAAC,EAAE;AACpB,UAAM,IAAI,OAAO,CAAC,EAAE;AACpB,UAAM,KAAK,QAAQ,EAAE,CAAC;AACtB,UAAM,KAAK,QAAQ,EAAE,CAAC;AACtB,aAAS,GAAG;AACZ,eAAW,IAAI,EAAE;AACjB,aAAS,GAAG;AACZ,eAAW,QAAQ,EAAE,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC,IAAI,EAAE;AAC/C,WAAO,WAAW;AAAA,EACnB;AAEA,QAAM,QAAQ,OAAO,CAAC,EAAE;AACxB,QAAM,SAAS,OAAO,CAAC,EAAE;AACzB,QAAM,QAAQ,OAAO,CAAC,EAAE;AAExB,QAAM,UAAU,QAAQ,OAAO,CAAC;AAChC,QAAM,UAAU,QAAQ,OAAO,CAAC;AAEhC,QAAM,OAAO,KAAK,OAAO,MAAM,IAAI,OAAO,KAAK,EAAE;AACjD,QAAM,OAAO,KAAK,OAAO,MAAM,IAAI,OAAO,KAAK,EAAE;AAEjD,QAAM,OAAO,KAAK,OAAO,OAAO,IAAI,MAAM,KAAK,EAAE;AACjD,QAAM,OAAO,KAAK,OAAO,OAAO,IAAI,MAAM,KAAK,EAAE;AAGjD,MAAI,KAAK;AACT,MAAI,KAAK;AAET,MAAI,QAAQ;AAEX,aAAS,GAAG;AACZ,eAAW,MAAM,IAAI;AACrB,aAAS,GAAG;AACZ,eAAW,UAAU,MAAM,UAAU,IAAI;AACzC,eAAW,OAAO,MAAM,OAAO,IAAI;AACnC,aAAS,GAAG;AAAA,EACb,OAAO;AAGN,UAAM,SAAS,QAAQ,MAAM,CAAC;AAC9B,UAAM,SAAS,QAAQ,MAAM,CAAC;AAC9B,aAAS,GAAG;AACZ,eAAW,QAAQ,MAAM;AACzB,aAAS,GAAG;AACZ,eAAW,UAAU,QAAQ,UAAU,MAAM;AAC7C,eAAW,OAAO,QAAQ,OAAO,MAAM;AACvC,QAAI,MAAM,EAAG,UAAS,GAAG;AAAA,EAC1B;AAGA,WAAS,IAAI,GAAG,MAAM,MAAM,GAAG,IAAI,KAAK,KAAK;AAC5C,UAAM,IAAI,OAAO,CAAC,EAAE;AACpB,UAAM,IAAI,OAAO,IAAI,CAAC,EAAE;AACxB,UAAM,KAAK,KAAK,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE;AACtC,UAAM,KAAK,KAAK,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE;AACtC,eAAW,KAAK,IAAI,KAAK,EAAE;AAC3B,SAAK;AACL,SAAK;AAAA,EACN;AAEA,QAAM,OAAO,OAAO,MAAM,CAAC,EAAE;AAE7B,MAAI,QAAQ;AAEX,UAAM,SAAS,KAAK,OAAO,KAAK,IAAI,MAAM,KAAK,EAAE;AACjD,UAAM,SAAS,KAAK,OAAO,KAAK,IAAI,MAAM,KAAK,EAAE;AACjD,eAAW,SAAS,IAAI,SAAS,EAAE;AACnC,eAAW,OAAO,QAAQ,OAAO,MAAM;AACvC,aAAS,GAAG;AAAA,EACb,OAAO;AAEN,aAAS,GAAG;AACZ,eAAW,QAAQ,KAAK,CAAC,IAAI,IAAI,QAAQ,KAAK,CAAC,IAAI,EAAE;AAAA,EACtD;AAEA,SAAO,WAAW;AACnB;",
   "names": []
 }

package/dist-esm/lib/shapes/shared/freehand/svgInk.mjs

@@ -1,7 +1,30 @@
-import { Vec, assert, average, precise, toDomPrecision } from "@tldraw/editor";
-import { getStrokeOutlineTracks } from "./getStrokeOutlinePoints.mjs";
-import { getStrokePoints } from "./getStrokePoints.mjs";
-import { setStrokePointRadii } from "./setStrokePointRadii.mjs";
+import { assert } from "@tldraw/editor";
+import {
+  computeRadii,
+  ingest,
+  inputX,
+  inputY,
+  loadSrcFromPipeline,
+  loadSrcPartition,
+  pointCount,
+  pointX,
+  pointY,
+  radii,
+  srcCount,
+  srcRadius,
+  srcX,
+  srcY
+} from "./core.mjs";
+import { finishPath, resetPath, toCenti, writeC, writeCPair, writeStr } from "./fmt.mjs";
+import {
+  buildTracks,
+  trackLeftCount,
+  trackLeftX,
+  trackLeftY,
+  trackRightCount,
+  trackRightX,
+  trackRightY
+} from "./getStrokeOutlinePoints.mjs";
 function svgInk(rawInputPoints, options = {}) {
   const { start = {}, end = {} } = options;
   const { cap: capStart = true } = start;
@@ -9,129 +32,221 @@ function svgInk(rawInputPoints, options = {}) {
   assert(!start.taper && !end.taper, "cap taper not supported here");
   assert(!start.easing && !end.easing, "cap easing not supported here");
   assert(capStart && capEnd, "cap must be true");
-  const points = getStrokePoints(rawInputPoints, options);
-  setStrokePointRadii(points, options);
-  const partitions = partitionAtElbows(points);
-  let svg = "";
-  for (const partition of partitions) {
-    svg += renderPartition(partition, options);
-  }
-  return svg;
+  ingest(rawInputPoints, options);
+  computeRadii(options);
+  resetPath();
+  partitionAtElbows(options);
+  return finishPath();
 }
-function partitionAtElbows(points) {
-  if (points.length <= 2) return [points];
-  const result = [];
-  let currentPartition = [points[0]];
-  let prevV = Vec.Sub(points[1].point, points[0].point).uni();
-  let nextV;
-  let dpr;
-  let prevPoint, thisPoint, nextPoint;
-  for (let i = 1, n = points.length; i < n - 1; i++) {
-    prevPoint = points[i - 1];
-    thisPoint = points[i];
-    nextPoint = points[i + 1];
-    nextV = Vec.Sub(nextPoint.point, thisPoint.point).uni();
-    dpr = Vec.Dpr(prevV, nextV);
-    prevV = nextV;
+function partitionAtElbows(options) {
+  const n = pointCount;
+  if (n === 0) return;
+  if (n <= 2) {
+    loadSrcFromPipeline();
+    renderPartition(options, false, 0, 0);
+    return;
+  }
+  const ptX = pointX;
+  const ptY = pointY;
+  const rads = radii;
+  let a = 0;
+  let aElbow = false;
+  let hasAnchor = false;
+  let anchorX = 0;
+  let anchorY = 0;
+  let dx = ptX[1] - ptX[0];
+  let dy = ptY[1] - ptY[0];
+  let len = Math.sqrt(dx * dx + dy * dy);
+  let prevVx = dx / len;
+  let prevVy = dy / len;
+  for (let i = 1; i < n - 1; i++) {
+    dx = ptX[i + 1] - ptX[i];
+    dy = ptY[i + 1] - ptY[i];
+    len = Math.sqrt(dx * dx + dy * dy);
+    const nextVx = dx / len;
+    const nextVy = dy / len;
+    const dpr = prevVx * nextVx + prevVy * nextVy;
+    prevVx = nextVx;
+    prevVy = nextVy;
     if (dpr < -0.8) {
-      const elbowPoint = {
-        ...thisPoint,
-        point: thisPoint.input
-      };
-      currentPartition.push(elbowPoint);
-      result.push(cleanUpPartition(currentPartition));
-      currentPartition = [elbowPoint];
+      finishPartition(a, aElbow, i, true, false, hasAnchor, anchorX, anchorY, options);
+      a = i;
+      aElbow = true;
+      hasAnchor = true;
+      anchorX = ptX[i];
+      anchorY = ptY[i];
       continue;
     }
-    currentPartition.push(thisPoint);
     if (dpr > 0.7) {
       continue;
     }
-    if ((Vec.Dist2(prevPoint.point, thisPoint.point) + Vec.Dist2(thisPoint.point, nextPoint.point)) / ((prevPoint.radius + thisPoint.radius + nextPoint.radius) / 3) ** 2 < 1.5) {
-      currentPartition.push(thisPoint);
-      result.push(cleanUpPartition(currentPartition));
-      currentPartition = [thisPoint];
+    const pdx = ptX[i] - ptX[i - 1];
+    const pdy = ptY[i] - ptY[i - 1];
+    const ndx = ptX[i + 1] - ptX[i];
+    const ndy = ptY[i + 1] - ptY[i];
+    const meanRadius = (rads[i - 1] + rads[i] + rads[i + 1]) / 3;
+    if ((pdx * pdx + pdy * pdy + ndx * ndx + ndy * ndy) / (meanRadius * meanRadius) < 1.5) {
+      finishPartition(a, aElbow, i, false, true, hasAnchor, anchorX, anchorY, options);
+      a = i;
+      aElbow = false;
+      hasAnchor = false;
       continue;
     }
   }
-  currentPartition.push(points[points.length - 1]);
-  result.push(cleanUpPartition(currentPartition));
-  return result;
+  finishPartition(a, aElbow, n - 1, false, false, hasAnchor, anchorX, anchorY, options);
 }
-function cleanUpPartition(partition) {
-  const startPoint = partition[0];
-  let nextPoint;
-  while (partition.length > 2) {
-    nextPoint = partition[1];
-    if (Vec.Dist2(startPoint.point, nextPoint.point) < ((startPoint.radius + nextPoint.radius) / 2 * 0.5) ** 2) {
-      partition.splice(1, 1);
+function finishPartition(a, aElbow, b, bElbow, bDup, hasAnchor, anchorX, anchorY, options) {
+  const ptX = pointX;
+  const ptY = pointY;
+  const rads = radii;
+  const len = b - a + 1 + (bDup ? 1 : 0);
+  let s = 0;
+  let e = 0;
+  const startX = aElbow ? inputX[a] : ptX[a];
+  const startY = aElbow ? inputY[a] : ptY[a];
+  const startRadius = rads[a];
+  while (len - s > 2) {
+    const i = a + 1 + s;
+    const dx = startX - ptX[i];
+    const dy = startY - ptY[i];
+    if (dx * dx + dy * dy < ((startRadius + rads[i]) / 2 * 0.5) ** 2) {
+      hasAnchor = true;
+      anchorX = ptX[i];
+      anchorY = ptY[i];
+      s++;
     } else {
       break;
     }
   }
-  const endPoint = partition[partition.length - 1];
-  let prevPoint;
-  while (partition.length > 2) {
-    prevPoint = partition[partition.length - 2];
-    if (Vec.Dist2(endPoint.point, prevPoint.point) < ((endPoint.radius + prevPoint.radius) / 2 * 0.5) ** 2) {
-      partition.splice(partition.length - 2, 1);
+  const endX = bElbow ? inputX[b] : ptX[b];
+  const endY = bElbow ? inputY[b] : ptY[b];
+  const endRadius = rads[b];
+  while (len - s - e > 2) {
+    const i = bDup ? b - e : b - 1 - e;
+    const dx = endX - ptX[i];
+    const dy = endY - ptY[i];
+    if (dx * dx + dy * dy < ((endRadius + rads[i]) / 2 * 0.5) ** 2) {
+      e++;
     } else {
       break;
     }
   }
-  if (partition.length > 1) {
-    partition[0] = {
-      ...partition[0],
-      vector: Vec.Sub(partition[0].point, partition[1].point).uni()
-    };
-    partition[partition.length - 1] = {
-      ...partition[partition.length - 1],
-      vector: Vec.Sub(
-        partition[partition.length - 2].point,
-        partition[partition.length - 1].point
-      ).uni()
-    };
-  }
-  return partition;
+  const innerStart = a + 1 + s;
+  const innerEnd = bDup ? b - e : b - 1 - e;
+  loadSrcPartition(a, aElbow, innerStart, innerEnd, b, bElbow, bDup && e === 0);
+  renderPartition(options, hasAnchor, anchorX, anchorY);
+}
+function writeCirclePath(cx, cy, r) {
+  const ncx = toCenti(cx);
+  const ncy = toCenti(cy);
+  const nr = toCenti(r);
+  writeStr("M ");
+  writeC(ncx);
+  writeStr(" ");
+  writeC(ncy);
+  writeStr(" m -");
+  writeC(nr);
+  writeStr(", 0 a ");
+  writeC(nr);
+  writeStr(",");
+  writeC(nr);
+  writeStr(" 0 1,1 ");
+  writeC(nr * 2);
+  writeStr(",0 a ");
+  writeC(nr);
+  writeStr(",");
+  writeC(nr);
+  writeStr(" 0 1,1 -");
+  writeC(nr * 2);
+  writeStr(",0");
 }
-function circlePath(cx, cy, r) {
-  return "M " + cx + " " + cy + " m -" + r + ", 0 a " + r + "," + r + " 0 1,1 " + r * 2 + ",0 a " + r + "," + r + " 0 1,1 -" + r * 2 + ",0";
+function writeCapArc(nr, dx, dy) {
+  writeStr("a");
+  writeC(nr);
+  writeStr(",");
+  writeC(nr);
+  writeStr(" 0 0 1 ");
+  writeCPair(dx, dy);
 }
-function renderPartition(strokePoints, options = {}) {
-  if (strokePoints.length === 0) return "";
-  if (strokePoints.length === 1) {
-    return circlePath(strokePoints[0].point.x, strokePoints[0].point.y, strokePoints[0].radius);
+function renderPartition(options, hasAnchor, anchorX, anchorY) {
+  const n = srcCount;
+  if (n === 0) return;
+  if (n === 1) {
+    writeCirclePath(srcX[0], srcY[0], srcRadius[0]);
+    return;
   }
-  const { left, right } = getStrokeOutlineTracks(strokePoints, options);
-  right.reverse();
-  let svg = `M${precise(left[0])}T`;
-  for (let i = 1; i < left.length; i++) {
-    svg += average(left[i - 1], left[i]);
+  buildTracks(options, hasAnchor, anchorX, anchorY);
+  const lxs = trackLeftX;
+  const lys = trackLeftY;
+  const rxs = trackRightX;
+  const rys = trackRightY;
+  let cx = toCenti(lxs[0]);
+  let cy = toCenti(lys[0]);
+  writeStr("M");
+  writeCPair(cx, cy);
+  writeStr("t");
+  let prevX = lxs[0];
+  let prevY = lys[0];
+  for (let i = 1; i < trackLeftCount; i++) {
+    const ptX = lxs[i];
+    const ptY = lys[i];
+    const mx = Math.round((prevX + ptX) * 50);
+    const my = Math.round((prevY + ptY) * 50);
+    writeCPair(mx - cx, my - cy);
+    cx = mx;
+    cy = my;
+    prevX = ptX;
+    prevY = ptY;
   }
   {
-    const point = strokePoints[strokePoints.length - 1];
-    const radius = point.radius;
-    const direction = point.vector.clone().per().neg();
-    const arcStart = Vec.Add(point.point, Vec.Mul(direction, radius));
-    const arcEnd = Vec.Add(point.point, Vec.Mul(direction, -radius));
-    svg += `${precise(arcStart)}A${toDomPrecision(radius)},${toDomPrecision(
-      radius
-    )} 0 0 1 ${precise(arcEnd)}T`;
+    const pointX2 = srcX[n - 1];
+    const pointY2 = srcY[n - 1];
+    const radius = srcRadius[n - 1];
+    const vdx = srcX[n - 2] - pointX2;
+    const vdy = srcY[n - 2] - pointY2;
+    const vlen = Math.sqrt(vdx * vdx + vdy * vdy);
+    const dx = -vdy / vlen * radius;
+    const dy = vdx / vlen * radius;
+    const asx = toCenti(pointX2 + dx);
+    const asy = toCenti(pointY2 + dy);
+    const aex = toCenti(pointX2 - dx);
+    const aey = toCenti(pointY2 - dy);
+    writeCPair(asx - cx, asy - cy);
+    writeCapArc(toCenti(radius), aex - asx, aey - asy);
+    writeStr("t");
+    cx = aex;
+    cy = aey;
   }
-  for (let i = 1; i < right.length; i++) {
-    svg += average(right[i - 1], right[i]);
+  prevX = rxs[trackRightCount - 1];
+  prevY = rys[trackRightCount - 1];
+  for (let i = trackRightCount - 2; i >= 0; i--) {
+    const ptX = rxs[i];
+    const ptY = rys[i];
+    const mx = Math.round((prevX + ptX) * 50);
+    const my = Math.round((prevY + ptY) * 50);
+    writeCPair(mx - cx, my - cy);
+    cx = mx;
+    cy = my;
+    prevX = ptX;
+    prevY = ptY;
   }
   {
-    const point = strokePoints[0];
-    const radius = point.radius;
-    const direction = point.vector.clone().per();
-    const arcStart = Vec.Add(point.point, Vec.Mul(direction, radius));
-    const arcEnd = Vec.Add(point.point, Vec.Mul(direction, -radius));
-    svg += `${precise(arcStart)}A${toDomPrecision(radius)},${toDomPrecision(
-      radius
-    )} 0 0 1 ${precise(arcEnd)}Z`;
+    const pointX2 = srcX[0];
+    const pointY2 = srcY[0];
+    const radius = srcRadius[0];
+    const vdx = pointX2 - srcX[1];
+    const vdy = pointY2 - srcY[1];
+    const vlen = Math.sqrt(vdx * vdx + vdy * vdy);
+    const dx = vdy / vlen * radius;
+    const dy = -vdx / vlen * radius;
+    const asx = toCenti(pointX2 + dx);
+    const asy = toCenti(pointY2 + dy);
+    const aex = toCenti(pointX2 - dx);
+    const aey = toCenti(pointY2 - dy);
+    writeCPair(asx - cx, asy - cy);
+    writeCapArc(toCenti(radius), aex - asx, aey - asy);
+    writeStr("Z");
   }
-  return svg;
 }
 export {
   svgInk