reframe-video 0.1.2 → 0.2.0

package/dist/browserEntry.js

@@ -27,7 +27,7 @@
     if (n < 2) return 0;
     return closed ? n : n - 1;
   }
-  function pathPoint(points, closed, u) {
+  function pathPoint(points, closed, u, curviness = 1) {
     const n = points.length;
     if (n === 0) return [0, 0];
     if (n === 1) return [points[0][0], points[0][1]];
@@ -36,19 +36,41 @@
     const [p0, p1, p2, p3] = controls(points, closed, i);
     const t2 = t * t;
     const t3 = t2 * t;
-    const f = (a, b, c, d) => 0.5 * (2 * b + (-a + c) * t + (2 * a - 5 * b + 4 * c - d) * t2 + (-a + 3 * b - 3 * c + d) * t3);
-    return [f(p0[0], p1[0], p2[0], p3[0]), f(p0[1], p1[1], p2[1], p3[1])];
+    if (curviness === 1) {
+      const f = (a, b, c, d) => 0.5 * (2 * b + (-a + c) * t + (2 * a - 5 * b + 4 * c - d) * t2 + (-a + 3 * b - 3 * c + d) * t3);
+      return [f(p0[0], p1[0], p2[0], p3[0]), f(p0[1], p1[1], p2[1], p3[1])];
+    }
+    const h00 = 2 * t3 - 3 * t2 + 1;
+    const h10 = t3 - 2 * t2 + t;
+    const h01 = -2 * t3 + 3 * t2;
+    const h11 = t3 - t2;
+    const k = curviness * 0.5;
+    const H = (a, b, c, d) => h00 * b + h10 * k * (c - a) + h01 * c + h11 * k * (d - b);
+    return [H(p0[0], p1[0], p2[0], p3[0]), H(p0[1], p1[1], p2[1], p3[1])];
   }
-  function pathTangentAngle(points, closed, u) {
+  function pathTangentAngle(points, closed, u, curviness = 1) {
     const n = points.length;
     if (n < 2) return 0;
     const segs = segCountOf(points, closed);
     const { i, t } = locate(segs, u);
     const [p0, p1, p2, p3] = controls(points, closed, i);
     const t2 = t * t;
-    const d = (a, b, c, e) => 0.5 * (-a + c + 2 * (2 * a - 5 * b + 4 * c - e) * t + 3 * (-a + 3 * b - 3 * c + e) * t2);
-    const dx = d(p0[0], p1[0], p2[0], p3[0]);
-    const dy = d(p0[1], p1[1], p2[1], p3[1]);
+    let dx;
+    let dy;
+    if (curviness === 1) {
+      const d = (a, b, c, e) => 0.5 * (-a + c + 2 * (2 * a - 5 * b + 4 * c - e) * t + 3 * (-a + 3 * b - 3 * c + e) * t2);
+      dx = d(p0[0], p1[0], p2[0], p3[0]);
+      dy = d(p0[1], p1[1], p2[1], p3[1]);
+    } else {
+      const g00 = 6 * t2 - 6 * t;
+      const g10 = 3 * t2 - 4 * t + 1;
+      const g01 = -6 * t2 + 6 * t;
+      const g11 = 3 * t2 - 2 * t;
+      const k = curviness * 0.5;
+      const D = (a, b, c, e) => g00 * b + g10 * k * (c - a) + g01 * c + g11 * k * (e - b);
+      dx = D(p0[0], p1[0], p2[0], p3[0]);
+      dy = D(p0[1], p1[1], p2[1], p3[1]);
+    }
     if (dx === 0 && dy === 0) return 0;
     return Math.atan2(dy, dx) * 180 / Math.PI;
   }
@@ -125,8 +147,8 @@
     const currentValue = (target, prop) => {
       const v = current.get(key(target, prop));
       if (v !== void 0) return v;
-      if (prop === "opacity" || prop === "scale" || prop === "progress") return 1;
-      if (prop === "rotation") return 0;
+      if (prop === "opacity" || prop === "scale" || prop === "progress" || prop === "scaleX" || prop === "scaleY") return 1;
+      if (prop === "rotation" || prop === "skewX" || prop === "skewY") return 0;
       throw new Error(`cannot animate "${prop}" of "${target}": no base value to start from`);
     };
     const labelTimes = /* @__PURE__ */ new Map();
@@ -229,16 +251,17 @@
           const duration = tl.duration ?? DEFAULT_MOTIONPATH_DURATION;
           const points = tl.points;
           const closed = tl.closed ?? false;
+          const curviness = tl.curviness ?? 1;
           const autoRotate = tl.autoRotate ?? false;
           const rotateOffset = tl.rotateOffset ?? 0;
           let list = motionPaths.get(tl.target);
           if (!list) motionPaths.set(tl.target, list = []);
-          list.push({ t0: start, t1: start + duration, points, closed, autoRotate, rotateOffset, ...tl.ease !== void 0 && { ease: tl.ease } });
+          list.push({ t0: start, t1: start + duration, points, closed, curviness, autoRotate, rotateOffset, ...tl.ease !== void 0 && { ease: tl.ease } });
           if (points.length > 0) {
-            const [ex, ey] = pathPoint(points, closed, 1);
+            const [ex, ey] = pathPoint(points, closed, 1, curviness);
             current.set(key(tl.target, "x"), ex);
             current.set(key(tl.target, "y"), ey);
-            if (autoRotate) current.set(key(tl.target, "rotation"), pathTangentAngle(points, closed, 1) + rotateOffset);
+            if (autoRotate) current.set(key(tl.target, "rotation"), pathTangentAngle(points, closed, 1, curviness) + rotateOffset);
           }
           return start + duration;
         }
@@ -285,7 +308,7 @@
   }
 
   // ../core/src/validate.ts
-  var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "anchor"];
+  var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "scaleX", "scaleY", "skewX", "skewY", "anchor"];
   var PROPS_BY_TYPE = {
     rect: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth", "radius"],
     ellipse: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth"],
@@ -450,11 +473,22 @@
       m[1] * n[4] + m[3] * n[5] + m[5]
     ];
   }
-  function localMatrix(x, y, rotationDeg, scale) {
+  function localMatrix(x, y, rotationDeg, scale, scaleX = 1, scaleY = 1, skewXDeg = 0, skewYDeg = 0) {
     const r = rotationDeg * Math.PI / 180;
-    const cos = Math.cos(r) * scale;
-    const sin = Math.sin(r) * scale;
-    return [cos, sin, -sin, cos, x, y];
+    if (scaleX === 1 && scaleY === 1 && skewXDeg === 0 && skewYDeg === 0) {
+      const cos = Math.cos(r) * scale;
+      const sin = Math.sin(r) * scale;
+      return [cos, sin, -sin, cos, x, y];
+    }
+    const c = Math.cos(r);
+    const s = Math.sin(r);
+    const tx = Math.tan(skewXDeg * Math.PI / 180);
+    const ty = Math.tan(skewYDeg * Math.PI / 180);
+    const R = [c, s, -s, c, 0, 0];
+    const K = [1, ty, tx, 1, 0, 0];
+    const S = [scale * scaleX, 0, 0, scale * scaleY, 0, 0];
+    const m = multiply(R, multiply(K, S));
+    return [m[0], m[1], m[2], m[3], x, y];
   }
   var ANCHOR_FACTORS = {
     "top-left": [0, 0],
@@ -479,53 +513,54 @@
     if (Number.isFinite(until) && ramp > 0) envelope = Math.min(envelope, (until - t) / ramp);
     return Math.max(0, Math.min(1, envelope));
   }
-  function evaluate(compiled2, t) {
-    const ops = [];
-    const valueAt = (target, prop, fallback) => {
-      let value = compiled2.initialValues.get(`${target}.${prop}`) ?? fallback;
-      let segStart = Number.NEGATIVE_INFINITY;
-      const segs = compiled2.segments.get(`${target}.${prop}`);
-      if (segs) {
+  function sampleProp(compiled2, t, target, prop, fallback) {
+    let value = compiled2.initialValues.get(`${target}.${prop}`) ?? fallback;
+    let segStart = Number.NEGATIVE_INFINITY;
+    const segs = compiled2.segments.get(`${target}.${prop}`);
+    if (segs) {
+      let active;
+      for (const seg of segs) {
+        if (seg.t0 <= t) active = seg;
+        else break;
+      }
+      if (active) {
+        segStart = active.t0;
+        if (t >= active.t1) {
+          value = active.to;
+        } else {
+          const u = resolveEase(active.ease)((t - active.t0) / (active.t1 - active.t0));
+          value = lerpValue(active.from, active.to, u);
+        }
+      }
+    }
+    if (prop === "x" || prop === "y" || prop === "rotation") {
+      const drivers = compiled2.motionPaths.get(target);
+      if (drivers) {
         let active;
-        for (const seg of segs) {
-          if (seg.t0 <= t) active = seg;
+        for (const d of drivers) {
+          if (d.t0 <= t) active = d;
           else break;
         }
-        if (active) {
-          segStart = active.t0;
-          if (t >= active.t1) {
-            value = active.to;
-          } else {
-            const u = resolveEase(active.ease)((t - active.t0) / (active.t1 - active.t0));
-            value = lerpValue(active.from, active.to, u);
-          }
-        }
-      }
-      if (prop === "x" || prop === "y" || prop === "rotation") {
-        const drivers = compiled2.motionPaths.get(target);
-        if (drivers) {
-          let active;
-          for (const d of drivers) {
-            if (d.t0 <= t) active = d;
-            else break;
-          }
-          if (active && active.t0 >= segStart && (prop !== "rotation" || active.autoRotate) && active.points.length > 0) {
-            const span = active.t1 - active.t0;
-            const u = span <= 0 ? 1 : resolveEase(active.ease)(Math.max(0, Math.min(1, (t - active.t0) / span)));
-            if (prop === "x") value = pathPoint(active.points, active.closed, u)[0];
-            else if (prop === "y") value = pathPoint(active.points, active.closed, u)[1];
-            else value = pathTangentAngle(active.points, active.closed, u) + active.rotateOffset;
-          }
+        if (active && active.t0 >= segStart && (prop !== "rotation" || active.autoRotate) && active.points.length > 0) {
+          const span = active.t1 - active.t0;
+          const u = span <= 0 ? 1 : resolveEase(active.ease)(Math.max(0, Math.min(1, (t - active.t0) / span)));
+          if (prop === "x") value = pathPoint(active.points, active.closed, u, active.curviness)[0];
+          else if (prop === "y") value = pathPoint(active.points, active.closed, u, active.curviness)[1];
+          else value = pathTangentAngle(active.points, active.closed, u, active.curviness) + active.rotateOffset;
         }
       }
-      for (const b of compiled2.ir.behaviors ?? []) {
-        if (b.target === target && b.prop === prop && typeof value === "number") {
-          const envelope = behaviorEnvelope(b, t);
-          if (envelope > 0) value = value + envelope * sampleBehavior(b.behavior, t);
-        }
+    }
+    for (const b of compiled2.ir.behaviors ?? []) {
+      if (b.target === target && b.prop === prop && typeof value === "number") {
+        const envelope = behaviorEnvelope(b, t);
+        if (envelope > 0) value = value + envelope * sampleBehavior(b.behavior, t);
       }
-      return value;
-    };
+    }
+    return value;
+  }
+  function evaluate(compiled2, t) {
+    const ops = [];
+    const valueAt = (target, prop, fallback) => sampleProp(compiled2, t, target, prop, fallback);
     const num = (target, prop, fallback) => {
       const v = valueAt(target, prop, fallback);
       return typeof v === "number" ? v : fallback;
@@ -538,8 +573,9 @@
       const v = valueAt(target, prop, base ?? "");
       return v === "" && base === void 0 ? void 0 : String(v);
     };
-    const walk = (node, parent, parentOpacity) => {
+    const walk = (node, parent, parentOpacity, clips) => {
       const id = node.id;
+      const clipSpread = clips.length > 0 ? { clips } : void 0;
       if (node.type === "line") {
         const opacity2 = parentOpacity * num(id, "opacity", node.props.opacity ?? 1);
         if (opacity2 <= 0) return;
@@ -556,7 +592,8 @@
           x2: x1 + (num(id, "x2", node.props.x2) - x1) * progress,
           y2: y1 + (num(id, "y2", node.props.y2) - y1) * progress,
           stroke: str(id, "stroke", node.props.stroke),
-          strokeWidth: num(id, "strokeWidth", node.props.strokeWidth ?? 1)
+          strokeWidth: num(id, "strokeWidth", node.props.strokeWidth ?? 1),
+          ...clipSpread
         });
         return;
       }
@@ -568,13 +605,19 @@
           num(id, "x", node.props.x),
           num(id, "y", node.props.y),
           num(id, "rotation", node.props.rotation ?? 0),
-          num(id, "scale", node.props.scale ?? 1)
+          num(id, "scale", node.props.scale ?? 1),
+          num(id, "scaleX", node.props.scaleX ?? 1),
+          num(id, "scaleY", node.props.scaleY ?? 1),
+          num(id, "skewX", node.props.skewX ?? 0),
+          num(id, "skewY", node.props.skewY ?? 0)
         )
       );
       switch (node.type) {
-        case "group":
-          for (const child of node.children) walk(child, matrix, opacity);
+        case "group": {
+          const childClips = node.props.clip ? [...clips, { transform: matrix, shape: node.props.clip }] : clips;
+          for (const child of node.children) walk(child, matrix, opacity, childClips);
           return;
+        }
         case "rect":
         case "ellipse": {
           const width = num(id, "width", node.props.width);
@@ -594,7 +637,8 @@
             offsetY: -height * ay,
             ...fill !== void 0 && { fill },
             ...stroke !== void 0 && { stroke, strokeWidth },
-            ...node.type === "rect" && { radius: num(id, "radius", node.props.radius ?? 0) }
+            ...node.type === "rect" && { radius: num(id, "radius", node.props.radius ?? 0) },
+            ...clipSpread
           });
           return;
         }
@@ -611,7 +655,8 @@
             width,
             height,
             offsetX: -width * ax,
-            offsetY: -height * ay
+            offsetY: -height * ay,
+            ...clipSpread
           });
           return;
         }
@@ -628,7 +673,8 @@
             d: str(id, "d", node.props.d),
             progress: Math.max(0, Math.min(1, num(id, "progress", node.props.progress ?? 1))),
             ...fill !== void 0 && { fill },
-            ...stroke !== void 0 && { stroke, strokeWidth: num(id, "strokeWidth", node.props.strokeWidth ?? 1) }
+            ...stroke !== void 0 && { stroke, strokeWidth: num(id, "strokeWidth", node.props.strokeWidth ?? 1) },
+            ...clipSpread
           });
           return;
         }
@@ -651,13 +697,14 @@
             fill: str(id, "fill", node.props.fill ?? "#ffffff"),
             letterSpacing: num(id, "letterSpacing", node.props.letterSpacing ?? 0),
             align: TEXT_ALIGN[ax] ?? "left",
-            baseline: TEXT_BASELINE[ay] ?? "top"
+            baseline: TEXT_BASELINE[ay] ?? "top",
+            ...clipSpread
           });
           return;
         }
       }
     };
-    for (const node of compiled2.ir.nodes) walk(node, IDENTITY, 1);
+    for (const node of compiled2.ir.nodes) walk(node, IDENTITY, 1, []);
     return ops;
   }
 
@@ -675,6 +722,21 @@
   function drawDisplayList(ctx2, ops, images2) {
     for (const op of ops) {
       ctx2.save();
+      if (op.clips) {
+        for (const clip of op.clips) {
+          ctx2.setTransform(...clip.transform);
+          ctx2.beginPath();
+          const { shape } = clip;
+          if (shape.kind === "ellipse") {
+            ctx2.ellipse(shape.x + shape.width / 2, shape.y + shape.height / 2, Math.abs(shape.width / 2), Math.abs(shape.height / 2), 0, 0, Math.PI * 2);
+          } else if (shape.radius && shape.radius > 0) {
+            ctx2.roundRect(shape.x, shape.y, shape.width, shape.height, shape.radius);
+          } else {
+            ctx2.rect(shape.x, shape.y, shape.width, shape.height);
+          }
+          ctx2.clip();
+        }
+      }
       ctx2.setTransform(...op.transform);
       ctx2.globalAlpha = Math.max(0, Math.min(1, op.opacity));
       switch (op.type) {