@sarmal/core 0.15.0 → 0.16.0

package/dist/index.js

@@ -519,6 +519,7 @@ function warnIfTrailColorMismatch(trailColor, trailStyle) {
     );
   }
 }
+var getHeadDotRadius = (w, h) => Math.max(1, 3 * Math.sqrt(Math.min(w, h) / 160));
 
 // src/renderer.ts
 var WHITE_HEX = "#ffffff";
@@ -549,9 +550,8 @@ function createRenderer(options) {
   warnIfTrailColorMismatch(trailColor, trailStyle);
   const dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
   function setupCanvas() {
-    const rect = canvas.getBoundingClientRect();
-    const lw = rect.width || 200;
-    const lh = rect.height || 200;
+    const lw = canvas.offsetWidth || 200;
+    const lh = canvas.offsetHeight || 200;
     applyDprSizing(canvas, lw, lh, dpr);
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
   }
@@ -569,6 +569,7 @@ function createRenderer(options) {
   let animationId = null;
   let lastTime = 0;
   let morphResolve = null;
+  let morphReject = null;
   let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
   let morphAlpha = 0;
   let gradientAnimTime = 0;
@@ -673,8 +674,7 @@ function createRenderer(options) {
     }
     const x = head.x * scale + offsetX;
     const y = head.y * scale + offsetY;
-    const r =
-      options.headRadius ?? Math.max(2, 3 * Math.sqrt(Math.min(logicalWidth, logicalHeight) / 160));
+    const r = options.headRadius ?? getHeadDotRadius(logicalWidth, logicalHeight);
     ctx.fillStyle = headColor;
     ctx.beginPath();
     ctx.arc(x, y, r, 0, Math.PI * 2);
@@ -698,6 +698,7 @@ function createRenderer(options) {
         engine.completeMorph();
         morphResolve?.();
         morphResolve = null;
+        morphReject = null;
         morphAlpha = 0;
         skeleton = engine.getSarmalSkeleton();
         if (!engine.isLiveSkeleton) {
@@ -760,6 +761,11 @@ function createRenderer(options) {
         cancelAnimationFrame(animationId);
         animationId = null;
       }
+      if (morphReject !== null) {
+        morphReject(new Error("Instance destroyed during morph"));
+        morphResolve = null;
+        morphReject = null;
+      }
     },
     ...enginePassthroughs(engine),
     morphTo(target, options2) {
@@ -767,13 +773,15 @@ function createRenderer(options) {
         engine.completeMorph();
         morphResolve();
         morphResolve = null;
+        morphReject = null;
         morphAlpha = 0;
       }
       morphDurationMs = options2?.duration ?? DEFAULT_MORPH_DURATION_MS;
       morphAlpha = 0;
       engine.startMorph(target, options2?.morphStrategy);
-      return new Promise((resolve) => {
+      return new Promise((resolve, reject) => {
         morphResolve = resolve;
+        morphReject = reject;
       });
     },
     setRenderOptions(partial) {
@@ -848,11 +856,10 @@ function createSVGRenderer(options) {
   let trailPalette = resolveTrailPalette(trailColor);
   const ariaLabel = options.ariaLabel ?? "Loading";
   warnIfTrailColorMismatch(trailColor, trailStyle);
-  const rect = container.getBoundingClientRect();
-  const width = rect.width || 200;
-  const height = rect.height || 200;
-  const headRadius =
-    options.headRadius ?? Math.max(2, 3 * Math.sqrt(Math.min(width, height) / 160));
+  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));
@@ -932,7 +939,10 @@ function createSVGRenderer(options) {
       }
       return;
     }
-    for (let i = 0; i < trailCount - 1; i++) {
+    const startIdx = Math.max(0, trailCount - 1 - MAX_TRAIL_SEGMENTS);
+    const drawnCount = trailCount - 1 - startIdx;
+    for (let i = startIdx; i < trailCount - 1; i++) {
+      const j = i - startIdx;
       const { l0x, l0y, r0x, r0y, l1x, l1y, r1x, r1y, opacity, progress } = computeTrailQuad(
         trail,
         i,
@@ -941,15 +951,15 @@ function createSVGRenderer(options) {
         py,
       );
       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);
-      trailPaths[i].setAttribute("fill-opacity", opacity.toFixed(3));
+      trailPaths[j].setAttribute("d", d);
+      trailPaths[j].setAttribute("fill-opacity", opacity.toFixed(3));
       if (trailStyle !== "default") {
         const timeOffset = trailStyle === "gradient-animated" ? gradientAnimTime * 5e-4 : 0;
         const { r, g, b } = getPaletteColor(trailPalette, progress, timeOffset);
-        trailPaths[i].setAttribute("fill", `rgb(${r},${g},${b})`);
+        trailPaths[j].setAttribute("fill", `rgb(${r},${g},${b})`);
       }
     }
-    for (let i = trailCount - 1; i < trailPaths.length; i++) {
+    for (let i = drawnCount; i < trailPaths.length; i++) {
       trailPaths[i].setAttribute("d", "");
     }
   }
@@ -968,6 +978,7 @@ function createSVGRenderer(options) {
   const prefersReducedMotion =
     typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
   let morphResolve = null;
+  let morphReject = null;
   let morphDurationMs = DEFAULT_MORPH_DURATION_MS;
   let morphTarget = null;
   let morphAlpha = 0;
@@ -995,6 +1006,7 @@ function createSVGRenderer(options) {
         engine.completeMorph();
         morphResolve?.();
         morphResolve = null;
+        morphReject = null;
         morphTarget = null;
         morphAlpha = 0;
         morphPathABuilt = "";
@@ -1054,6 +1066,11 @@ function createSVGRenderer(options) {
         cancelAnimationFrame(animationId);
         animationId = null;
       }
+      if (morphReject !== null) {
+        morphReject(new Error("Instance destroyed during morph"));
+        morphResolve = null;
+        morphReject = null;
+      }
       svg.remove();
     },
     ...enginePassthroughs(engine),
@@ -1062,6 +1079,7 @@ function createSVGRenderer(options) {
         engine.completeMorph();
         morphResolve();
         morphResolve = null;
+        morphReject = null;
         morphAlpha = 0;
         skeletonPathA.setAttribute("visibility", "hidden");
         skeletonPathB.setAttribute("visibility", "hidden");
@@ -1076,8 +1094,9 @@ function createSVGRenderer(options) {
         const targetSkeleton = sampleCurveSkeleton(target);
         morphPathBBuilt = pointsToPathString(targetSkeleton, scale, offsetX, offsetY);
       }
-      return new Promise((resolve) => {
+      return new Promise((resolve, reject) => {
         morphResolve = resolve;
+        morphReject = reject;
       });
     },
     setRenderOptions(partial) {