reframe-video 0.1.1 → 0.1.2

package/dist/renderer-canvas.js

@@ -85,6 +85,29 @@ function drawDisplayList(ctx, ops, images) {
         }
         break;
       }
+      case "path": {
+        const p = new Path2D(op.d);
+        if (op.fill) {
+          ctx.fillStyle = op.fill;
+          ctx.fill(p);
+        }
+        if (op.stroke && (op.strokeWidth ?? 1) > 0) {
+          ctx.strokeStyle = op.stroke;
+          ctx.lineWidth = op.strokeWidth ?? 1;
+          ctx.lineJoin = "round";
+          ctx.lineCap = "round";
+          if (op.progress < 1) {
+            const len = pathLength(op.d);
+            if (len > 0) {
+              ctx.setLineDash([len, len]);
+              ctx.lineDashOffset = len * (1 - op.progress);
+            }
+          }
+          ctx.stroke(p);
+          ctx.setLineDash([]);
+        }
+        break;
+      }
       case "text": {
         ctx.font = `${op.fontWeight} ${op.fontSize}px ${quoteFamily(op.fontFamily)}`;
         if (op.letterSpacing) ctx.letterSpacing = `${op.letterSpacing}px`;
@@ -102,6 +125,19 @@ function drawDisplayList(ctx, ops, images) {
 function quoteFamily(family) {
   return family.includes(" ") && !family.includes('"') ? `"${family}"` : family;
 }
+var pathLengthCache = /* @__PURE__ */ new Map();
+function pathLength(d) {
+  const hit = pathLengthCache.get(d);
+  if (hit !== void 0) return hit;
+  let len = 0;
+  if (typeof document !== "undefined") {
+    const el = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    el.setAttribute("d", d);
+    len = el.getTotalLength();
+  }
+  pathLengthCache.set(d, len);
+  return len;
+}
 export {
   drawDisplayList,
   renderFrame