@sarmal/core 0.5.0 → 0.7.0

package/dist/index.cjs

@@ -44,8 +44,8 @@ var CircularBuffer = class {
     return this.count;
   }
 };
-function createEngine(curveDef, trailLength = 120) {
-  const curve = {
+function resolveCurve(curveDef) {
+  return {
     name: curveDef.name,
     fn: curveDef.fn,
     period: curveDef.period ?? TWO_PI,
@@ -53,15 +53,37 @@ function createEngine(curveDef, trailLength = 120) {
     skeleton: curveDef.skeleton,
     skeletonFn: curveDef.skeletonFn
   };
+}
+function createEngine(curveDef, trailLength = 120) {
+  let curve = resolveCurve(curveDef);
   const trail = new CircularBuffer(trailLength);
   let t = 0;
   let actualTime = 0;
+  let morphCurveB = null;
+  let _morphAlpha = null;
+  let _morphStrategy = "normalized";
+  function sampleSkeleton(c, sampleT) {
+    if (c.skeletonFn) {
+      return c.skeletonFn(sampleT);
+    }
+    if (c.skeleton === "live") {
+      return c.fn(sampleT, actualTime, {});
+    }
+    return c.fn(sampleT, 0, {});
+  }
   return {
     tick(deltaTime) {
       t = (t + curve.speed * deltaTime) % curve.period;
       actualTime += deltaTime;
-      const point = curve.fn(t, actualTime, {});
-      trail.push(point.x, point.y);
+      if (morphCurveB !== null && _morphAlpha !== null) {
+        const a = curve.fn(t, actualTime, {});
+        const tB = _morphStrategy === "normalized" ? t / curve.period * morphCurveB.period : t;
+        const b = morphCurveB.fn(tB, actualTime, {});
+        trail.push(a.x + (b.x - a.x) * _morphAlpha, a.y + (b.y - a.y) * _morphAlpha);
+      } else {
+        const point = curve.fn(t, actualTime, {});
+        trail.push(point.x, point.y);
+      }
       return trail.toArray();
     },
     get trailCount() {
@@ -70,6 +92,9 @@ function createEngine(curveDef, trailLength = 120) {
     get isLiveSkeleton() {
       return curve.skeleton === "live";
     },
+    get morphAlpha() {
+      return _morphAlpha;
+    },
     reset() {
       t = 0;
       actualTime = 0;
@@ -98,24 +123,62 @@ function createEngine(curveDef, trailLength = 120) {
         trail.push(point.x, point.y);
       }
     },
+    startMorph(target, strategy = "normalized") {
+      const resolvedTarget = resolveCurve(target);
+      if (morphCurveB !== null && _morphAlpha !== null) {
+        const frozenAlpha = _morphAlpha;
+        const frozenA = curve;
+        const frozenB = morphCurveB;
+        const frozenStrategy = _morphStrategy;
+        curve = {
+          ...frozenB,
+          fn: (sampleT, time, params) => {
+            const a = frozenA.fn(sampleT, time, params);
+            const tB = frozenStrategy === "normalized" ? sampleT / frozenA.period * frozenB.period : sampleT;
+            const b = frozenB.fn(tB, time, params);
+            return {
+              x: a.x + (b.x - a.x) * frozenAlpha,
+              y: a.y + (b.y - a.y) * frozenAlpha
+            };
+          }
+        };
+      }
+      _morphStrategy = strategy;
+      morphCurveB = resolvedTarget;
+      _morphAlpha = 0;
+    },
+    setMorphAlpha(alpha) {
+      _morphAlpha = alpha;
+    },
+    completeMorph() {
+      if (morphCurveB !== null) {
+        if (_morphStrategy === "normalized" && curve.period !== morphCurveB.period) {
+          t = t / curve.period * morphCurveB.period;
+        }
+        curve = morphCurveB;
+      }
+      morphCurveB = null;
+      _morphAlpha = null;
+    },
     getSarmalSkeleton() {
       const steps = Math.ceil(curve.period * POINTS_PER_PERIOD_UNIT);
       const points = new Array(steps);
-      if (curve.skeletonFn) {
+      if (morphCurveB !== null && _morphAlpha !== null) {
         for (let i = 0; i < steps; i++) {
           const sampleT = i / (steps - 1) * curve.period;
-          points[i] = curve.skeletonFn(sampleT);
-        }
-      } else if (curve.skeleton === "live") {
-        for (let i = 0; i < steps; i++) {
-          const sampleT = i / (steps - 1) * curve.period;
-          points[i] = curve.fn(sampleT, actualTime, {});
-        }
-      } else {
-        for (let i = 0; i < steps; i++) {
-          const sampleT = i / (steps - 1) * curve.period;
-          points[i] = curve.fn(sampleT, 0, {});
+          const a = sampleSkeleton(curve, sampleT);
+          const tB = _morphStrategy === "normalized" ? sampleT / curve.period * morphCurveB.period : sampleT;
+          const b = sampleSkeleton(morphCurveB, tB);
+          points[i] = {
+            x: a.x + (b.x - a.x) * _morphAlpha,
+            y: a.y + (b.y - a.y) * _morphAlpha
+          };
         }
+        return points;
+      }
+      for (let i = 0; i < steps; i++) {
+        const sampleT = i / (steps - 1) * curve.period;
+        points[i] = sampleSkeleton(curve, sampleT);
       }
       return points;
     }
@@ -123,6 +186,7 @@ function createEngine(curveDef, trailLength = 120) {
 }
 
 // src/renderer.ts
+var DEFAULT_MORPH_DURATION_MS = 300;
 var DEFAULT_HEAD_RADIUS = 4;
 var DEFAULT_GLOW_SIZE = 20;
 var DEFAULT_SKELETON_COLOR = "#ffffff";
@@ -165,25 +229,20 @@ function createRenderer(options) {
   let offsetY = 0;
   let animationId = null;
   let lastTime = 0;
-  function calculateBoundaries() {
-    if (skeleton.length === 0) {
-      return;
-    }
-    const first = skeleton[0];
+  let morphResolve = null;
+  let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
+  let morphAlpha = 0;
+  let morphBoundsA = null;
+  let morphBoundsB = null;
+  function computeBoundaries(pts) {
+    if (pts.length === 0) return null;
+    const first = pts[0];
     let minX = first.x, maxX = first.x, minY = first.y, maxY = first.y;
-    for (const p of skeleton) {
-      if (p.x < minX) {
-        minX = p.x;
-      }
-      if (p.x > maxX) {
-        maxX = p.x;
-      }
-      if (p.y < minY) {
-        minY = p.y;
-      }
-      if (p.y > maxY) {
-        maxY = p.y;
-      }
+    for (const p of pts) {
+      if (p.x < minX) minX = p.x;
+      if (p.x > maxX) maxX = p.x;
+      if (p.y < minY) minY = p.y;
+      if (p.y > maxY) maxY = p.y;
     }
     const width = maxX - minX;
     const height = maxY - minY;
@@ -191,11 +250,22 @@ function createRenderer(options) {
     const canvasHeight = canvas.height;
     const scaleX = canvasWidth / (width * (1 + FIT_PADDING * 2));
     const scaleY = canvasHeight / (height * (1 + FIT_PADDING * 2));
-    scale = Math.min(scaleX, scaleY);
-    const boundsWidth = width * scale;
-    const boundsHeight = height * scale;
-    offsetX = (canvasWidth - boundsWidth) / 2 - minX * scale;
-    offsetY = (canvasHeight - boundsHeight) / 2 - minY * scale;
+    const s = Math.min(scaleX, scaleY);
+    const boundsWidth = width * s;
+    const boundsHeight = height * s;
+    return {
+      scale: s,
+      offsetX: (canvasWidth - boundsWidth) / 2 - minX * s,
+      offsetY: (canvasHeight - boundsHeight) / 2 - minY * s
+    };
+  }
+  function calculateBoundaries() {
+    const b = computeBoundaries(skeleton);
+    if (b) {
+      scale = b.scale;
+      offsetX = b.offsetX;
+      offsetY = b.offsetY;
+    }
   }
   function buildSkeletonCanvas() {
     if (skeleton.length < 2) return;
@@ -212,10 +282,25 @@ function createRenderer(options) {
     }
     skeletonCtx.stroke();
   }
+  function drawSkeletonPath(pts, opacity) {
+    if (pts.length < 2) return;
+    ctx.strokeStyle = `rgba(${hexToRgbComponents(opts.skeletonColor)},${opacity})`;
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.moveTo(pts[0].x * scale + offsetX, pts[0].y * scale + offsetY);
+    for (let i = 1; i < pts.length; i++) {
+      ctx.lineTo(pts[i].x * scale + offsetX, pts[i].y * scale + offsetY);
+    }
+    ctx.stroke();
+  }
   function drawSkeleton() {
     if (opts.skeletonColor === "transparent") {
       return;
     }
+    if (engine.morphAlpha !== null) {
+      drawSkeletonPath(engine.getSarmalSkeleton(), DEFAULT_SKELETON_OPACITY);
+      return;
+    }
     if (engine.isLiveSkeleton) {
       if (skeleton.length < 2) {
         return;
@@ -282,11 +367,34 @@ function createRenderer(options) {
     const now = performance.now();
     const deltaTime = Math.min((now - lastTime) / 1e3, 1 / 30);
     lastTime = now;
+    if (engine.morphAlpha !== null) {
+      morphAlpha = Math.min(1, morphAlpha + deltaTime / (morphDurationMs / 1e3));
+      engine.setMorphAlpha(morphAlpha);
+      if (morphBoundsA && morphBoundsB) {
+        const a = morphBoundsA;
+        const b = morphBoundsB;
+        scale = a.scale + (b.scale - a.scale) * morphAlpha;
+        offsetX = a.offsetX + (b.offsetX - a.offsetX) * morphAlpha;
+        offsetY = a.offsetY + (b.offsetY - a.offsetY) * morphAlpha;
+      }
+      if (morphAlpha >= 1) {
+        engine.completeMorph();
+        morphResolve?.();
+        morphResolve = null;
+        morphAlpha = 0;
+        morphBoundsA = null;
+        morphBoundsB = null;
+        skeleton = engine.getSarmalSkeleton();
+        if (!engine.isLiveSkeleton) {
+          buildSkeletonCanvas();
+        }
+      }
+    }
     trail = engine.tick(deltaTime);
     trailCount = engine.trailCount;
     head = trailCount > 0 ? trail[trailCount - 1] : null;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
-    if (engine.isLiveSkeleton) {
+    if (engine.isLiveSkeleton && engine.morphAlpha === null) {
       skeleton = engine.getSarmalSkeleton();
       calculateBoundaries();
     }
@@ -331,11 +439,38 @@ function createRenderer(options) {
     },
     seekWithTrail(t) {
       engine.seekWithTrail(t);
+    },
+    morphTo(target, options2) {
+      const interruptBounds = morphResolve !== null ? { scale, offsetX, offsetY } : null;
+      if (morphResolve !== null) {
+        engine.completeMorph();
+        morphResolve();
+        morphResolve = null;
+        morphAlpha = 0;
+        morphBoundsA = null;
+        morphBoundsB = null;
+      }
+      morphDurationMs = options2?.duration ?? DEFAULT_MORPH_DURATION_MS;
+      morphAlpha = 0;
+      morphBoundsA = interruptBounds ?? computeBoundaries(engine.getSarmalSkeleton()) ?? { scale, offsetX, offsetY };
+      engine.startMorph(target, options2?.morphStrategy);
+      const period = target.period ?? Math.PI * 2;
+      const samples = Math.max(50, Math.round(period * 20));
+      const skeletonFn = target.skeletonFn ?? ((t) => target.fn(t, 0, {}));
+      const skeletonB = Array.from(
+        { length: samples + 1 },
+        (_, i) => skeletonFn(i / samples * period)
+      );
+      morphBoundsB = computeBoundaries(skeletonB) ?? { scale, offsetX, offsetY };
+      return new Promise((resolve) => {
+        morphResolve = resolve;
+      });
     }
   };
 }
 
 // src/renderer-svg.ts
+var DEFAULT_MORPH_DURATION_MS2 = 300;
 var TRAIL_BATCH_COUNT = 12;
 var TRAIL_FADE_CURVE2 = 1.5;
 var TRAIL_MAX_OPACITY2 = 0.88;
@@ -400,6 +535,20 @@ function createSVGRenderer(options) {
   skeletonPath.setAttribute("stroke-opacity", String(DEFAULT_SKELETON_OPACITY2));
   skeletonPath.setAttribute("stroke-width", "1.5");
   svg.appendChild(skeletonPath);
+  const skeletonPathA = el("path");
+  skeletonPathA.setAttribute("fill", "none");
+  skeletonPathA.setAttribute("stroke", opts.skeletonColor);
+  skeletonPathA.setAttribute("stroke-width", "1.5");
+  skeletonPathA.setAttribute("visibility", "hidden");
+  svg.appendChild(skeletonPathA);
+  const skeletonPathB = el("path");
+  skeletonPathB.setAttribute("fill", "none");
+  skeletonPathB.setAttribute("stroke", opts.skeletonColor);
+  skeletonPathB.setAttribute("stroke-width", "1.5");
+  skeletonPathB.setAttribute("visibility", "hidden");
+  svg.appendChild(skeletonPathB);
+  let morphPathABuilt = "";
+  let morphPathBBuilt = "";
   const trailPaths = [];
   for (let i = 0; i < TRAIL_BATCH_COUNT; i++) {
     const path = el("path");
@@ -515,13 +664,69 @@ function createSVGRenderer(options) {
   let animationId = null;
   let lastTime = 0;
   const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  let morphResolve = null;
+  let morphDurationMs = DEFAULT_MORPH_DURATION_MS2;
+  let morphTarget = null;
+  let morphAlpha = 0;
+  function buildSkeletonPath(target, scale2, offsetX2, offsetY2) {
+    const period = target.period ?? Math.PI * 2;
+    const samples = Math.max(50, Math.round(period * 20));
+    const points = [];
+    for (let i = 0; i <= samples; i++) {
+      const t = i / samples * period;
+      const p = target.fn(t, 0, {});
+      points.push(p);
+    }
+    if (points.length < 2) {
+      return "";
+    }
+    const px2 = (p) => (p.x * scale2 + offsetX2).toFixed(2);
+    const py2 = (p) => (p.y * scale2 + offsetY2).toFixed(2);
+    let d = `M${px2(points[0])} ${py2(points[0])}`;
+    for (let i = 1; i < points.length; i++) {
+      d += ` L${px2(points[i])} ${py2(points[i])}`;
+    }
+    d += " Z";
+    return d;
+  }
   function renderFrame() {
     const now = performance.now();
     const dt = Math.min((now - lastTime) / 1e3, 1 / 30);
     lastTime = now;
+    if (engine.morphAlpha !== null) {
+      morphAlpha = Math.min(1, morphAlpha + dt / (morphDurationMs / 1e3));
+      engine.setMorphAlpha(morphAlpha);
+      if (morphPathABuilt) {
+        skeletonPathA.setAttribute("d", morphPathABuilt);
+        skeletonPathA.setAttribute("visibility", "visible");
+        skeletonPathA.setAttribute(
+          "stroke-opacity",
+          String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY2)
+        );
+      }
+      if (morphPathBBuilt) {
+        skeletonPathB.setAttribute("d", morphPathBBuilt);
+        skeletonPathB.setAttribute("visibility", "visible");
+        skeletonPathB.setAttribute("stroke-opacity", String(morphAlpha * DEFAULT_SKELETON_OPACITY2));
+      }
+      if (morphAlpha >= 1) {
+        engine.completeMorph();
+        morphResolve?.();
+        morphResolve = null;
+        morphTarget = null;
+        morphAlpha = 0;
+        morphPathABuilt = "";
+        morphPathBBuilt = "";
+        skeletonPathA.setAttribute("visibility", "hidden");
+        skeletonPathB.setAttribute("visibility", "hidden");
+        const newSkeleton = engine.getSarmalSkeleton();
+        calculateBoundaries(newSkeleton);
+        updateSkeleton(newSkeleton);
+      }
+    }
     const trail = engine.tick(dt);
     const trailCount = engine.trailCount;
-    if (engine.isLiveSkeleton) {
+    if (engine.isLiveSkeleton && engine.morphAlpha === null) {
       const liveSkeleton = engine.getSarmalSkeleton();
       calculateBoundaries(liveSkeleton);
       updateSkeleton(liveSkeleton);
@@ -562,6 +767,38 @@ function createSVGRenderer(options) {
     },
     seekWithTrail(t) {
       engine.seekWithTrail(t);
+    },
+    morphTo(target, options2) {
+      if (morphResolve !== null) {
+        engine.completeMorph();
+        morphResolve();
+        morphResolve = null;
+        morphAlpha = 0;
+        skeletonPathA.setAttribute("visibility", "hidden");
+        skeletonPathB.setAttribute("visibility", "hidden");
+      }
+      morphDurationMs = options2?.duration ?? DEFAULT_MORPH_DURATION_MS2;
+      morphTarget = target;
+      morphAlpha = 0;
+      const currentSkeleton = engine.getSarmalSkeleton();
+      if (currentSkeleton.length >= 2) {
+        const px2 = (p) => (p.x * scale + offsetX).toFixed(2);
+        const py2 = (p) => (p.y * scale + offsetY).toFixed(2);
+        morphPathABuilt = `M${px2(currentSkeleton[0])} ${py2(currentSkeleton[0])}`;
+        for (let i = 1; i < currentSkeleton.length; i++) {
+          morphPathABuilt += ` L${px2(currentSkeleton[i])} ${py2(currentSkeleton[i])}`;
+        }
+        morphPathABuilt += " Z";
+      } else {
+        morphPathABuilt = "";
+      }
+      engine.startMorph(target, options2?.morphStrategy);
+      if (morphTarget) {
+        morphPathBBuilt = buildSkeletonPath(morphTarget, scale, offsetX, offsetY);
+      }
+      return new Promise((resolve) => {
+        morphResolve = resolve;
+      });
     }
   };
 }