@sarmal/core 0.18.0 → 0.20.0

package/dist/index.cjs

@@ -300,12 +300,20 @@ function computeNormal(trail, i) {
   const tangent = computeTangent(trail, i);
   return { x: -tangent.y, y: tangent.x };
 }
-function computeTrailQuad(trail, i, trailCount, toX, toY) {
+function computeTrailQuad(
+  trail,
+  i,
+  trailCount,
+  toX,
+  toY,
+  minWidth = TRAIL_MIN_WIDTH,
+  maxWidth = TRAIL_MAX_WIDTH,
+) {
   const progress = i / (trailCount - 1);
   const nextProgress = (i + 1) / (trailCount - 1);
   const opacity = Math.pow(progress, TRAIL_FADE_CURVE) * TRAIL_MAX_OPACITY;
-  const w0 = (TRAIL_MIN_WIDTH + progress * (TRAIL_MAX_WIDTH - TRAIL_MIN_WIDTH)) / 2;
-  const w1 = (TRAIL_MIN_WIDTH + nextProgress * (TRAIL_MAX_WIDTH - TRAIL_MIN_WIDTH)) / 2;
+  const w0 = (minWidth + progress * (maxWidth - minWidth)) / 2;
+  const w1 = (minWidth + nextProgress * (maxWidth - minWidth)) / 2;
   const curr = trail[i];
   const next = trail[i + 1];
   const n0 = computeNormal(trail, i);
@@ -869,62 +877,61 @@ function createSVGRenderer(options) {
   let trailPalette = resolveTrailPalette(trailColor);
   const ariaLabel = options.ariaLabel ?? "Loading";
   warnIfTrailColorMismatch(trailColor, trailStyle);
-  const htmlContainer = container;
-  const width = htmlContainer.offsetWidth || 200;
-  const height = htmlContainer.offsetHeight || 200;
-  const headRadius = options.headRadius ?? getHeadDotRadius(width, height);
-  const svg = el("svg");
-  svg.setAttribute("width", String(width));
-  svg.setAttribute("height", String(height));
-  svg.setAttribute("viewBox", `0 0 ${width} ${height}`);
-  svg.setAttribute("role", "img");
-  svg.setAttribute("aria-label", ariaLabel);
+  const viewSize = 100;
+  const headRadius = options.headRadius ?? 1.5;
+  const svgTrailMinWidth = 0.25;
+  const svgTrailMaxWidth = 1.25;
+  const svgSkeletonStrokeWidth = "0.75";
+  container.setAttribute("viewBox", `0 0 ${viewSize} ${viewSize}`);
+  container.setAttribute("role", "img");
+  container.setAttribute("aria-label", ariaLabel);
+  const group = el("g");
   const titleEl = el("title");
   titleEl.textContent = ariaLabel;
-  svg.appendChild(titleEl);
+  group.appendChild(titleEl);
   const skeletonPath = el("path");
   skeletonPath.setAttribute("data-sarmal-role", "skeleton");
   skeletonPath.setAttribute("fill", "none");
   skeletonPath.setAttribute("stroke", skeletonColor);
   skeletonPath.setAttribute("stroke-opacity", String(DEFAULT_SKELETON_OPACITY));
-  skeletonPath.setAttribute("stroke-width", "1.5");
+  skeletonPath.setAttribute("stroke-width", svgSkeletonStrokeWidth);
   if (skeletonColor === "transparent") {
     skeletonPath.setAttribute("visibility", "hidden");
   }
-  svg.appendChild(skeletonPath);
+  group.appendChild(skeletonPath);
   const skeletonPathA = el("path");
   skeletonPathA.setAttribute("fill", "none");
   skeletonPathA.setAttribute("stroke", skeletonColor);
-  skeletonPathA.setAttribute("stroke-width", "1.5");
+  skeletonPathA.setAttribute("stroke-width", svgSkeletonStrokeWidth);
   skeletonPathA.setAttribute("visibility", "hidden");
-  svg.appendChild(skeletonPathA);
+  group.appendChild(skeletonPathA);
   const skeletonPathB = el("path");
   skeletonPathB.setAttribute("fill", "none");
   skeletonPathB.setAttribute("stroke", skeletonColor);
-  skeletonPathB.setAttribute("stroke-width", "1.5");
+  skeletonPathB.setAttribute("stroke-width", svgSkeletonStrokeWidth);
   skeletonPathB.setAttribute("visibility", "hidden");
-  svg.appendChild(skeletonPathB);
+  group.appendChild(skeletonPathB);
   let morphPathABuilt = "";
   let morphPathBBuilt = "";
   const trailPaths = [];
   for (let i = 0; i < poolSize; i++) {
     const path = el("path");
     path.setAttribute("fill", trailSolid);
-    svg.appendChild(path);
+    group.appendChild(path);
     trailPaths.push(path);
   }
   const headCircle = el("circle");
   headCircle.setAttribute("data-sarmal-role", "head");
   headCircle.setAttribute("fill", headColor);
   headCircle.setAttribute("r", String(headRadius));
-  svg.appendChild(headCircle);
-  container.appendChild(svg);
+  group.appendChild(headCircle);
+  container.appendChild(group);
   let gradientAnimTime = 0;
   let scale = 1;
   let offsetX = 0;
   let offsetY = 0;
   function applyBoundaries(skeleton2) {
-    const b = computeBoundaries(skeleton2, width, height);
+    const b = computeBoundaries(skeleton2, viewSize, viewSize);
     if (b) {
       scale = b.scale;
       offsetX = b.offsetX;
@@ -960,6 +967,8 @@ function createSVGRenderer(options) {
         trailCount,
         px,
         py,
+        svgTrailMinWidth,
+        svgTrailMaxWidth,
       );
       const d = `M${l0x.toFixed(2)} ${l0y.toFixed(2)} L${l1x.toFixed(2)} ${l1y.toFixed(2)} L${r1x.toFixed(2)} ${r1y.toFixed(2)} L${r0x.toFixed(2)} ${r0y.toFixed(2)} Z`;
       trailPaths[i].setAttribute("d", d);
@@ -1082,7 +1091,7 @@ function createSVGRenderer(options) {
         morphResolve = null;
         morphReject = null;
       }
-      svg.remove();
+      group.remove();
     },
     ...enginePassthroughs(engine),
     morphTo(target, options2) {
@@ -1435,6 +1444,55 @@ var curves = {
   lame,
 };
 
+// src/catmull-rom.ts
+var PERIOD = 2 * Math.PI;
+function catmullRom1D(p0, p1, p2, p3, u) {
+  const u2 = u * u;
+  const u3 = u2 * u;
+  return (
+    0.5 *
+    (2 * p1 +
+      (-p0 + p2) * u +
+      (2 * p0 - 5 * p1 + 4 * p2 - p3) * u2 +
+      (-p0 + 3 * p1 - 3 * p2 + p3) * u3)
+  );
+}
+function evaluateCatmullRom(points, t) {
+  const N = points.length;
+  if (N === 0) {
+    return { x: 0, y: 0 };
+  }
+  if (N === 1) {
+    return { x: points[0][0], y: points[0][1] };
+  }
+  t = ((t % PERIOD) + PERIOD) % PERIOD;
+  const segmentSize = PERIOD / N;
+  let i = Math.floor(t / segmentSize);
+  if (i >= N) {
+    i = N - 1;
+  }
+  let u = (t - i * segmentSize) / segmentSize;
+  u = Math.max(0, Math.min(1, u));
+  const p0 = points[(i - 1 + N) % N];
+  const p1 = points[i];
+  const p2 = points[(i + 1) % N];
+  const p3 = points[(i + 2) % N];
+  return {
+    x: catmullRom1D(p0[0], p1[0], p2[0], p3[0], u),
+    y: catmullRom1D(p0[1], p1[1], p2[1], p3[1], u),
+  };
+}
+function drawCurve(points) {
+  if (points.length < 3) {
+    throw new Error(`drawCurve requires at least 3 points, received ${points.length}.`);
+  }
+  return {
+    name: "custom",
+    fn: (t) => evaluateCatmullRom(points, t),
+    period: PERIOD,
+  };
+}
+
 // src/index.ts
 function createSarmal(canvas, curveDef, options) {
   const { trailLength, ...rendererOpts } = options ?? {};
@@ -1451,8 +1509,10 @@ exports.createSarmal = createSarmal;
 exports.createSarmalSVG = createSarmalSVG;
 exports.curves = curves;
 exports.deltoid = deltoid;
+exports.drawCurve = drawCurve;
 exports.epicycloid3 = epicycloid3;
 exports.epitrochoid7 = epitrochoid7;
+exports.evaluateCatmullRom = evaluateCatmullRom;
 exports.lame = lame;
 exports.lissajous32 = lissajous32;
 exports.lissajous43 = lissajous43;