reframe-video 0.1.0 → 0.1.2

package/dist/renderer-canvas.js

@@ -1,6 +1,6 @@
 // ../renderer-canvas/src/index.ts
 import { evaluate } from "@reframe/core";
-function renderFrame(ctx, compiled, t) {
+function renderFrame(ctx, compiled, t, images) {
   const { size, background } = compiled.ir;
   ctx.setTransform(1, 0, 0, 1, 0, 0);
   ctx.clearRect(0, 0, size.width, size.height);
@@ -8,9 +8,9 @@ function renderFrame(ctx, compiled, t) {
     ctx.fillStyle = background;
     ctx.fillRect(0, 0, size.width, size.height);
   }
-  drawDisplayList(ctx, evaluate(compiled, t));
+  drawDisplayList(ctx, evaluate(compiled, t), images);
 }
-function drawDisplayList(ctx, ops) {
+function drawDisplayList(ctx, ops, images) {
   for (const op of ops) {
     ctx.save();
     ctx.setTransform(...op.transform);
@@ -66,6 +66,48 @@ function drawDisplayList(ctx, ops) {
         ctx.stroke();
         break;
       }
+      case "image": {
+        const img = images?.get(op.src);
+        if (img) {
+          ctx.drawImage(img, op.offsetX, op.offsetY, op.width, op.height);
+        } else {
+          ctx.fillStyle = "#2A2A30";
+          ctx.fillRect(op.offsetX, op.offsetY, op.width, op.height);
+          ctx.strokeStyle = "#FF00FF";
+          ctx.lineWidth = 2;
+          ctx.strokeRect(op.offsetX, op.offsetY, op.width, op.height);
+          ctx.beginPath();
+          ctx.moveTo(op.offsetX, op.offsetY);
+          ctx.lineTo(op.offsetX + op.width, op.offsetY + op.height);
+          ctx.moveTo(op.offsetX + op.width, op.offsetY);
+          ctx.lineTo(op.offsetX, op.offsetY + op.height);
+          ctx.stroke();
+        }
+        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`;
@@ -83,6 +125,19 @@ function drawDisplayList(ctx, ops) {
 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