@sarmal/core 0.6.0 → 0.7.0

package/dist/index.js

@@ -49,7 +49,7 @@ function resolveCurve(curveDef) {
     period: curveDef.period ?? TWO_PI,
     speed: curveDef.speed ?? 1,
     skeleton: curveDef.skeleton,
-    skeletonFn: curveDef.skeletonFn,
+    skeletonFn: curveDef.skeletonFn
   };
 }
 function createEngine(curveDef, trailLength = 120) {
@@ -75,7 +75,7 @@ function createEngine(curveDef, trailLength = 120) {
       actualTime += deltaTime;
       if (morphCurveB !== null && _morphAlpha !== null) {
         const a = curve.fn(t, actualTime, {});
-        const tB = _morphStrategy === "normalized" ? (t / curve.period) * morphCurveB.period : t;
+        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 {
@@ -99,14 +99,14 @@ function createEngine(curveDef, trailLength = 120) {
       trail.clear();
     },
     seek(newT, { clearTrail = false } = {}) {
-      t = ((newT % curve.period) + curve.period) % curve.period;
+      t = (newT % curve.period + curve.period) % curve.period;
       if (clearTrail) {
         trail.clear();
       }
     },
     seekWithTrail(targetT, { wrap = false, step = curve.period / trailLength } = {}) {
       const advance = curve.speed * step;
-      const target = ((targetT % curve.period) + curve.period) % curve.period;
+      const target = (targetT % curve.period + curve.period) % curve.period;
       const targetTime = target / curve.speed;
       t = target;
       actualTime = targetTime;
@@ -132,16 +132,13 @@ function createEngine(curveDef, trailLength = 120) {
           ...frozenB,
           fn: (sampleT, time, params) => {
             const a = frozenA.fn(sampleT, time, params);
-            const tB =
-              frozenStrategy === "normalized"
-                ? (sampleT / frozenA.period) * frozenB.period
-                : sampleT;
+            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,
+              y: a.y + (b.y - a.y) * frozenAlpha
             };
-          },
+          }
         };
       }
       _morphStrategy = strategy;
@@ -153,6 +150,9 @@ function createEngine(curveDef, trailLength = 120) {
     },
     completeMorph() {
       if (morphCurveB !== null) {
+        if (_morphStrategy === "normalized" && curve.period !== morphCurveB.period) {
+          t = t / curve.period * morphCurveB.period;
+        }
         curve = morphCurveB;
       }
       morphCurveB = null;
@@ -163,26 +163,23 @@ function createEngine(curveDef, trailLength = 120) {
       const points = new Array(steps);
       if (morphCurveB !== null && _morphAlpha !== null) {
         for (let i = 0; i < steps; i++) {
-          const sampleT = (i / (steps - 1)) * curve.period;
+          const sampleT = i / (steps - 1) * curve.period;
           const a = sampleSkeleton(curve, sampleT);
-          const tB =
-            _morphStrategy === "normalized"
-              ? (sampleT / curve.period) * morphCurveB.period
-              : 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,
+            y: a.y + (b.y - a.y) * _morphAlpha
           };
         }
         return points;
       }
       for (let i = 0; i < steps; i++) {
-        const sampleT = (i / (steps - 1)) * curve.period;
+        const sampleT = i / (steps - 1) * curve.period;
         points[i] = sampleSkeleton(curve, sampleT);
       }
       return points;
-    },
+    }
   };
 }
 
@@ -202,7 +199,7 @@ var GLOW_INNER_EDGE = 0.4;
 var GLOW_FALLOFF_OPACITY = 0.53;
 function hexToRgbComponents(hex) {
   const n = parseInt(hex.slice(1), 16);
-  return `${n >> 16},${(n >> 8) & 255},${n & 255}`;
+  return `${n >> 16},${n >> 8 & 255},${n & 255}`;
 }
 function createRenderer(options) {
   const canvas = options.canvas;
@@ -216,7 +213,7 @@ function createRenderer(options) {
     trailColor: options.trailColor ?? "#ffffff",
     headColor: options.headColor ?? "#ffffff",
     headRadius: options.headRadius ?? DEFAULT_HEAD_RADIUS,
-    glowSize: options.glowSize ?? DEFAULT_GLOW_SIZE,
+    glowSize: options.glowSize ?? DEFAULT_GLOW_SIZE
   };
   const trailRgb = hexToRgbComponents(opts.trailColor);
   const headRgbFalloff = `rgba(${hexToRgbComponents(opts.headColor)},${GLOW_FALLOFF_OPACITY})`;
@@ -232,32 +229,18 @@ function createRenderer(options) {
   let lastTime = 0;
   let morphResolve = null;
   let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
-  let morphTarget = null;
   let morphAlpha = 0;
-  let skeletonCanvasA = null;
-  let skeletonCanvasB = null;
-  function calculateBoundaries() {
-    if (skeleton.length === 0) {
-      return;
-    }
-    const first = skeleton[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;
-      }
+  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 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;
@@ -265,11 +248,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;
@@ -286,20 +280,23 @@ 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) {
-      if (skeletonCanvasA) {
-        ctx.globalAlpha = (1 - morphAlpha) * DEFAULT_SKELETON_OPACITY;
-        ctx.drawImage(skeletonCanvasA, 0, 0);
-      }
-      if (skeletonCanvasB) {
-        ctx.globalAlpha = morphAlpha * DEFAULT_SKELETON_OPACITY;
-        ctx.drawImage(skeletonCanvasB, 0, 0);
-      }
-      ctx.globalAlpha = 1;
+      drawSkeletonPath(engine.getSarmalSkeleton(), DEFAULT_SKELETON_OPACITY);
       return;
     }
     if (engine.isLiveSkeleton) {
@@ -371,23 +368,31 @@ function createRenderer(options) {
     if (engine.morphAlpha !== null) {
       morphAlpha = Math.min(1, morphAlpha + deltaTime / (morphDurationMs / 1e3));
       engine.setMorphAlpha(morphAlpha);
-      skeleton = engine.getSarmalSkeleton();
-      calculateBoundaries();
+      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;
-        morphTarget = null;
         morphAlpha = 0;
-        skeletonCanvasA = null;
-        skeletonCanvasB = null;
+        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 || engine.morphAlpha !== null) {
+    if (engine.isLiveSkeleton && engine.morphAlpha === null) {
       skeleton = engine.getSarmalSkeleton();
       calculateBoundaries();
     }
@@ -434,54 +439,31 @@ function createRenderer(options) {
       engine.seekWithTrail(t);
     },
     morphTo(target, options2) {
+      const interruptBounds = morphResolve !== null ? { scale, offsetX, offsetY } : null;
       if (morphResolve !== null) {
         engine.completeMorph();
         morphResolve();
         morphResolve = null;
         morphAlpha = 0;
-        skeletonCanvasA = null;
-        skeletonCanvasB = null;
+        morphBoundsA = null;
+        morphBoundsB = null;
       }
       morphDurationMs = options2?.duration ?? DEFAULT_MORPH_DURATION_MS;
-      morphTarget = target;
       morphAlpha = 0;
-      const currentSkeleton = engine.getSarmalSkeleton();
-      if (currentSkeleton.length >= 2) {
-        skeletonCanvasA = new OffscreenCanvas(canvas.width, canvas.height);
-        const ctxA = skeletonCanvasA.getContext("2d");
-        ctxA.strokeStyle = `rgba(${hexToRgbComponents(opts.skeletonColor)},${DEFAULT_SKELETON_OPACITY})`;
-        ctxA.lineWidth = 1.5;
-        ctxA.beginPath();
-        const first = currentSkeleton[0];
-        ctxA.moveTo(first.x * scale + offsetX, first.y * scale + offsetY);
-        for (let i = 1; i < currentSkeleton.length; i++) {
-          const p = currentSkeleton[i];
-          ctxA.lineTo(p.x * scale + offsetX, p.y * scale + offsetY);
-        }
-        ctxA.stroke();
-      }
+      morphBoundsA = interruptBounds ?? computeBoundaries(engine.getSarmalSkeleton()) ?? { scale, offsetX, offsetY };
       engine.startMorph(target, options2?.morphStrategy);
-      if (morphTarget && !engine.isLiveSkeleton) {
-        skeletonCanvasB = new OffscreenCanvas(canvas.width, canvas.height);
-        const skeletonCtx = skeletonCanvasB.getContext("2d");
-        skeletonCtx.strokeStyle = `rgba(${hexToRgbComponents(opts.skeletonColor)},${DEFAULT_SKELETON_OPACITY})`;
-        skeletonCtx.lineWidth = 1.5;
-        skeletonCtx.beginPath();
-        const period = morphTarget.period ?? Math.PI * 2;
-        const samples = Math.max(50, Math.round(period * 20));
-        const firstB = morphTarget.fn(0, 0, {});
-        skeletonCtx.moveTo(firstB.x * scale + offsetX, firstB.y * scale + offsetY);
-        for (let i = 1; i <= samples; i++) {
-          const t = (i / samples) * period;
-          const p = morphTarget.fn(t, 0, {});
-          skeletonCtx.lineTo(p.x * scale + offsetX, p.y * scale + offsetY);
-        }
-        skeletonCtx.stroke();
-      }
+      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;
       });
-    },
+    }
   };
 }
 
@@ -508,7 +490,7 @@ function createSVGRenderer(options) {
     headColor: options.headColor ?? "#ffffff",
     headRadius: options.headRadius ?? 4,
     glowSize: options.glowSize ?? 20,
-    ariaLabel: options.ariaLabel ?? "Loading",
+    ariaLabel: options.ariaLabel ?? "Loading"
   };
   const uid = ++instanceCount;
   const gradientId = `sarmal-glow-${uid}`;
@@ -592,10 +574,7 @@ function createSVGRenderer(options) {
       return;
     }
     const first = skeleton2[0];
-    let minX = first.x,
-      maxX = first.x,
-      minY = first.y,
-      maxY = first.y;
+    let minX = first.x, maxX = first.x, minY = first.y, maxY = first.y;
     for (const p of skeleton2) {
       if (p.x < minX) {
         minX = p.x;
@@ -682,8 +661,7 @@ function createSVGRenderer(options) {
   }
   let animationId = null;
   let lastTime = 0;
-  const prefersReducedMotion =
-    typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const prefersReducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
   let morphResolve = null;
   let morphDurationMs = DEFAULT_MORPH_DURATION_MS2;
   let morphTarget = null;
@@ -693,7 +671,7 @@ function createSVGRenderer(options) {
     const samples = Math.max(50, Math.round(period * 20));
     const points = [];
     for (let i = 0; i <= samples; i++) {
-      const t = (i / samples) * period;
+      const t = i / samples * period;
       const p = target.fn(t, 0, {});
       points.push(p);
     }
@@ -716,26 +694,18 @@ function createSVGRenderer(options) {
     if (engine.morphAlpha !== null) {
       morphAlpha = Math.min(1, morphAlpha + dt / (morphDurationMs / 1e3));
       engine.setMorphAlpha(morphAlpha);
-      const morphSkeleton = engine.getSarmalSkeleton();
-      calculateBoundaries(morphSkeleton);
-      if (!engine.isLiveSkeleton) {
-        updateSkeleton(morphSkeleton);
-      }
       if (morphPathABuilt) {
         skeletonPathA.setAttribute("d", morphPathABuilt);
         skeletonPathA.setAttribute("visibility", "visible");
         skeletonPathA.setAttribute(
           "stroke-opacity",
-          String((1 - morphAlpha) * DEFAULT_SKELETON_OPACITY2),
+          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),
-        );
+        skeletonPathB.setAttribute("stroke-opacity", String(morphAlpha * DEFAULT_SKELETON_OPACITY2));
       }
       if (morphAlpha >= 1) {
         engine.completeMorph();
@@ -747,11 +717,14 @@ function createSVGRenderer(options) {
         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);
@@ -824,7 +797,7 @@ function createSVGRenderer(options) {
       return new Promise((resolve) => {
         morphResolve = resolve;
       });
-    },
+    }
   };
 }
 function createSarmalSVG(container, curveDef, options) {
@@ -836,29 +809,26 @@ function createSarmalSVG(container, curveDef, options) {
 // src/curves.ts
 var TWO_PI2 = Math.PI * 2;
 function artemis2(t, _time, _params) {
-  const a = 0.35,
-    b = 0.15,
-    ox = 0.175;
-  const s = Math.sin(t),
-    c = Math.cos(t);
+  const a = 0.35, b = 0.15, ox = 0.175;
+  const s = Math.sin(t), c = Math.cos(t);
   const denom = 1 + s * s;
   return {
-    x: (c * (1 + a * c)) / denom - ox,
-    y: (s * c * (1 + b * c)) / denom,
+    x: c * (1 + a * c) / denom - ox,
+    y: s * c * (1 + b * c) / denom
   };
 }
 function epitrochoid7(t, _time, _params) {
   const d = 1 + 0.55 * Math.sin(t * 0.5);
   return {
     x: 7 * Math.cos(t) - d * Math.cos(7 * t),
-    y: 7 * Math.sin(t) - d * Math.sin(7 * t),
+    y: 7 * Math.sin(t) - d * Math.sin(7 * t)
   };
 }
 function epitrochoid7Skeleton(t) {
   const d = 1.275;
   return {
     x: 7 * Math.cos(t) - d * Math.cos(7 * t),
-    y: 7 * Math.sin(t) - d * Math.sin(7 * t),
+    y: 7 * Math.sin(t) - d * Math.sin(7 * t)
   };
 }
 function astroid(t, _time, _params) {
@@ -866,56 +836,55 @@ function astroid(t, _time, _params) {
   const s = Math.sin(t);
   return {
     x: c * c * c,
-    y: s * s * s,
+    y: s * s * s
   };
 }
 function deltoid(t, _time, _params) {
   return {
     x: 2 * Math.cos(t) + Math.cos(2 * t),
-    y: 2 * Math.sin(t) - Math.sin(2 * t),
+    y: 2 * Math.sin(t) - Math.sin(2 * t)
   };
 }
 function rose5(t, _time, _params) {
   const r = Math.cos(5 * t);
   return {
     x: r * Math.cos(t),
-    y: r * Math.sin(t),
+    y: r * Math.sin(t)
   };
 }
 function rose3(t, _time, _params) {
   const r = Math.cos(3 * t);
   return {
     x: r * Math.cos(t),
-    y: r * Math.sin(t),
+    y: r * Math.sin(t)
   };
 }
 function lissajous32(t, time, _params) {
   const phi = time * 0.45;
   return {
     x: Math.sin(3 * t + phi),
-    y: Math.sin(2 * t),
+    y: Math.sin(2 * t)
   };
 }
 function lissajous43(t, time, _params) {
   const phi = time * 0.38;
   return {
     x: Math.sin(4 * t + phi),
-    y: Math.sin(3 * t),
+    y: Math.sin(3 * t)
   };
 }
 function epicycloid3(t, _time, _params) {
   return {
     x: 4 * Math.cos(t) - Math.cos(4 * t),
-    y: 4 * Math.sin(t) - Math.sin(4 * t),
+    y: 4 * Math.sin(t) - Math.sin(4 * t)
   };
 }
 function lame(t, time, _params) {
   const p = 1.75 + 1.25 * Math.sin(time * 0.48);
-  const c = Math.cos(t),
-    s = Math.sin(t);
+  const c = Math.cos(t), s = Math.sin(t);
   return {
     x: Math.sign(c) * Math.pow(Math.abs(c), p),
-    y: Math.sign(s) * Math.pow(Math.abs(s), p),
+    y: Math.sign(s) * Math.pow(Math.abs(s), p)
   };
 }
 var curves = {
@@ -923,66 +892,66 @@ var curves = {
     name: "Artemis II",
     fn: artemis2,
     period: TWO_PI2,
-    speed: 0.7,
+    speed: 0.7
   },
   epitrochoid7: {
     name: "Epitrochoid",
     fn: epitrochoid7,
     period: TWO_PI2,
     speed: 1.4,
-    skeletonFn: epitrochoid7Skeleton,
+    skeletonFn: epitrochoid7Skeleton
   },
   astroid: {
     name: "Astroid",
     fn: astroid,
     period: TWO_PI2,
-    speed: 1.1,
+    speed: 1.1
   },
   deltoid: {
     name: "Deltoid",
     fn: deltoid,
     period: TWO_PI2,
-    speed: 0.9,
+    speed: 0.9
   },
   rose5: {
     name: "Rose (n=5)",
     fn: rose5,
     period: TWO_PI2,
-    speed: 1,
+    speed: 1
   },
   rose3: {
     name: "Rose (n=3)",
     fn: rose3,
     period: TWO_PI2,
-    speed: 1.15,
+    speed: 1.15
   },
   lissajous32: {
     name: "Lissajous 3:2",
     fn: lissajous32,
     period: TWO_PI2,
     speed: 2,
-    skeleton: "live",
+    skeleton: "live"
   },
   lissajous43: {
     name: "Lissajous 4:3",
     fn: lissajous43,
     period: TWO_PI2,
     speed: 1.8,
-    skeleton: "live",
+    skeleton: "live"
   },
   epicycloid3: {
     name: "Epicycloid (n=3)",
     fn: epicycloid3,
     period: TWO_PI2,
-    speed: 0.75,
+    speed: 0.75
   },
   lame: {
     name: "Lam\xE9 Curve",
     fn: lame,
     period: TWO_PI2,
     speed: 1,
-    skeleton: "live",
-  },
+    skeleton: "live"
+  }
 };
 
 // src/index.ts
@@ -994,4 +963,4 @@ function createSarmal(canvas, curveDef, options) {
 
 export { createEngine, createRenderer, createSVGRenderer, createSarmal, createSarmalSVG, curves };
 //# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map