reframe-video 0.1.0

package/dist/browserEntry.js

@@ -0,0 +1,532 @@
+"use strict";
+(() => {
+  // ../core/src/ir.ts
+  var DEFAULT_TO_DURATION = 0.5;
+  var DEFAULT_TWEEN_DURATION = 0.5;
+
+  // ../core/src/compile.ts
+  var key = (target, prop) => `${target}.${prop}`;
+  function compileScene(ir) {
+    const nodeById = /* @__PURE__ */ new Map();
+    const nodeOrder = [];
+    const collect = (nodes) => {
+      for (const node of nodes) {
+        nodeById.set(node.id, node);
+        nodeOrder.push(node.id);
+        if (node.type === "group") collect(node.children);
+      }
+    };
+    collect(ir.nodes);
+    const initialValues = /* @__PURE__ */ new Map();
+    for (const [id, node] of nodeById) {
+      for (const [prop, value] of Object.entries(node.props)) {
+        if (typeof value === "number" || typeof value === "string") {
+          initialValues.set(key(id, prop), value);
+        }
+      }
+    }
+    if (ir.initial !== void 0) {
+      const override = ir.states?.[ir.initial] ?? {};
+      for (const [id, props] of Object.entries(override)) {
+        for (const [prop, value] of Object.entries(props)) {
+          initialValues.set(key(id, prop), value);
+        }
+      }
+    }
+    const segments = /* @__PURE__ */ new Map();
+    const current = new Map(initialValues);
+    const pushSegment = (seg) => {
+      const k = key(seg.target, seg.prop);
+      let list = segments.get(k);
+      if (!list) segments.set(k, list = []);
+      list.push(seg);
+      current.set(k, seg.to);
+    };
+    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;
+      throw new Error(`cannot animate "${prop}" of "${target}": no base value to start from`);
+    };
+    const labelTimes = /* @__PURE__ */ new Map();
+    const walk = (tl, start) => {
+      const end = walkInner(tl, start);
+      if ("label" in tl && tl.label !== void 0) labelTimes.set(tl.label, { t0: start, t1: end });
+      return end;
+    };
+    const walkInner = (tl, start) => {
+      switch (tl.kind) {
+        case "seq": {
+          let t = start;
+          for (const child of tl.children) t = walk(child, t);
+          return t;
+        }
+        case "par": {
+          let end = start;
+          for (const child of tl.children) end = Math.max(end, walk(child, start));
+          return end;
+        }
+        case "stagger": {
+          let end = start;
+          tl.children.forEach((child, i) => {
+            end = Math.max(end, walk(child, start + i * tl.interval));
+          });
+          return end;
+        }
+        case "wait":
+          return start + tl.duration;
+        case "tween": {
+          const duration = tl.duration ?? DEFAULT_TWEEN_DURATION;
+          for (const [prop, toValue] of Object.entries(tl.props)) {
+            pushSegment({
+              target: tl.target,
+              prop,
+              t0: start,
+              t1: start + duration,
+              from: currentValue(tl.target, prop),
+              to: toValue,
+              ...tl.ease !== void 0 && { ease: tl.ease }
+            });
+          }
+          return start + duration;
+        }
+        case "to": {
+          const override = ir.states?.[tl.state] ?? {};
+          const duration = tl.duration ?? DEFAULT_TO_DURATION;
+          const staggerInterval = tl.stagger ?? 0;
+          const targets = nodeOrder.filter(
+            (id) => id in override && (tl.filter === void 0 || tl.filter.includes(id))
+          );
+          targets.forEach((id, i) => {
+            const t0 = start + i * staggerInterval;
+            for (const [prop, toValue] of Object.entries(override[id])) {
+              pushSegment({
+                target: id,
+                prop,
+                t0,
+                t1: t0 + duration,
+                from: currentValue(id, prop),
+                to: toValue,
+                ...tl.ease !== void 0 && { ease: tl.ease }
+              });
+            }
+          });
+          const last = Math.max(0, targets.length - 1);
+          return start + duration + last * staggerInterval;
+        }
+      }
+    };
+    const inferredEnd = ir.timeline ? walk(ir.timeline, 0) : 0;
+    for (const list of segments.values()) list.sort((a, b) => a.t0 - b.t0);
+    return {
+      ir,
+      duration: ir.duration ?? inferredEnd,
+      segments,
+      initialValues,
+      nodeById,
+      nodeOrder,
+      labelTimes
+    };
+  }
+
+  // ../core/src/validate.ts
+  var COMMON_PROPS = ["x", "y", "opacity", "rotation", "scale", "anchor"];
+  var PROPS_BY_TYPE = {
+    rect: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth", "radius"],
+    ellipse: [...COMMON_PROPS, "width", "height", "fill", "stroke", "strokeWidth"],
+    line: ["x1", "y1", "x2", "y2", "stroke", "strokeWidth", "opacity", "progress"],
+    text: [...COMMON_PROPS, "content", "contentDecimals", "fontFamily", "fontSize", "fontWeight", "fill", "letterSpacing"],
+    group: COMMON_PROPS
+  };
+
+  // ../core/src/behaviors.ts
+  function sampleBehavior(b, t) {
+    switch (b.name) {
+      case "oscillate": {
+        const { amplitude, frequency, phase = 0 } = b.params;
+        return amplitude * Math.sin(2 * Math.PI * frequency * t + phase);
+      }
+      case "wiggle": {
+        const { amplitude, frequency, seed } = b.params;
+        return amplitude * valueNoise(t * frequency, seed);
+      }
+    }
+  }
+  function valueNoise(x, seed) {
+    const i = Math.floor(x);
+    const f = x - i;
+    const u = f * f * (3 - 2 * f);
+    const a = hash01(i, seed) * 2 - 1;
+    const b = hash01(i + 1, seed) * 2 - 1;
+    return a + (b - a) * u;
+  }
+  function hash01(n, seed) {
+    let h = n * 374761393 + seed * 668265263 | 0;
+    h = h ^ h >>> 13 | 0;
+    h = Math.imul(h, 1274126177);
+    h = (h ^ h >>> 16) >>> 0;
+    return h / 4294967295;
+  }
+
+  // ../core/src/interpolate.ts
+  var EASE_TABLE = {
+    linear: (u) => u,
+    easeInQuad: (u) => u * u,
+    easeOutQuad: (u) => 1 - (1 - u) * (1 - u),
+    easeInOutQuad: (u) => u < 0.5 ? 2 * u * u : 1 - (-2 * u + 2) ** 2 / 2,
+    easeInCubic: (u) => u ** 3,
+    easeOutCubic: (u) => 1 - (1 - u) ** 3,
+    easeInOutCubic: (u) => u < 0.5 ? 4 * u ** 3 : 1 - (-2 * u + 2) ** 3 / 2,
+    easeInQuart: (u) => u ** 4,
+    easeOutQuart: (u) => 1 - (1 - u) ** 4,
+    easeInOutQuart: (u) => u < 0.5 ? 8 * u ** 4 : 1 - (-2 * u + 2) ** 4 / 2,
+    easeInExpo: (u) => u === 0 ? 0 : 2 ** (10 * u - 10),
+    easeOutExpo: (u) => u === 1 ? 1 : 1 - 2 ** (-10 * u),
+    easeInOutExpo: (u) => u === 0 ? 0 : u === 1 ? 1 : u < 0.5 ? 2 ** (20 * u - 10) / 2 : (2 - 2 ** (-20 * u + 10)) / 2
+  };
+  var EASE_NAMES = Object.keys(EASE_TABLE);
+  function resolveEase(ease) {
+    if (ease === void 0) return EASE_TABLE.linear;
+    if (typeof ease === "string") {
+      const fn = EASE_TABLE[ease];
+      if (!fn) throw new Error(`unknown ease "${ease}" \u2014 valid: ${Object.keys(EASE_TABLE).join(", ")}`);
+      return fn;
+    }
+    return cubicBezierEase(...ease.cubicBezier);
+  }
+  function cubicBezierEase(x1, y1, x2, y2) {
+    const bez = (a, b) => (t) => 3 * a * t * (1 - t) ** 2 + 3 * b * t * t * (1 - t) + t ** 3;
+    const bx = bez(x1, x2);
+    const by = bez(y1, y2);
+    const dbx = (t) => 3 * x1 * (1 - t) * (1 - 3 * t) + 3 * x2 * t * (2 - 3 * t) + 3 * t * t;
+    return (u) => {
+      if (u <= 0) return 0;
+      if (u >= 1) return 1;
+      let t = u;
+      for (let i = 0; i < 8; i++) {
+        const err = bx(t) - u;
+        if (Math.abs(err) < 1e-6) return by(t);
+        const d = dbx(t);
+        if (Math.abs(d) < 1e-6) break;
+        t -= err / d;
+      }
+      let lo = 0;
+      let hi = 1;
+      t = u;
+      while (hi - lo > 1e-6) {
+        if (bx(t) < u) lo = t;
+        else hi = t;
+        t = (lo + hi) / 2;
+      }
+      return by(t);
+    };
+  }
+  var HEX_COLOR = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+  function isColor(v) {
+    return typeof v === "string" && HEX_COLOR.test(v);
+  }
+  function parseColor(hex) {
+    let h = hex.slice(1);
+    if (h.length <= 4) h = [...h].map((c) => c + c).join("");
+    const n = parseInt(h.padEnd(8, "f"), 16);
+    return [n >>> 24 & 255, n >>> 16 & 255, n >>> 8 & 255, n & 255];
+  }
+  function formatColor([r, g, b, a]) {
+    const hex = (v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, "0");
+    return a >= 255 ? `#${hex(r)}${hex(g)}${hex(b)}` : `#${hex(r)}${hex(g)}${hex(b)}${hex(a)}`;
+  }
+  function lerpValue(from, to, u) {
+    if (typeof from === "number" && typeof to === "number") {
+      return from + (to - from) * u;
+    }
+    if (isColor(from) && isColor(to)) {
+      const a = parseColor(from);
+      const b = parseColor(to);
+      return formatColor([
+        a[0] + (b[0] - a[0]) * u,
+        a[1] + (b[1] - a[1]) * u,
+        a[2] + (b[2] - a[2]) * u,
+        a[3] + (b[3] - a[3]) * u
+      ]);
+    }
+    return to;
+  }
+
+  // ../core/src/evaluate.ts
+  var IDENTITY = [1, 0, 0, 1, 0, 0];
+  function multiply(m, n) {
+    return [
+      m[0] * n[0] + m[2] * n[1],
+      m[1] * n[0] + m[3] * n[1],
+      m[0] * n[2] + m[2] * n[3],
+      m[1] * n[2] + m[3] * n[3],
+      m[0] * n[4] + m[2] * n[5] + m[4],
+      m[1] * n[4] + m[3] * n[5] + m[5]
+    ];
+  }
+  function localMatrix(x, y, rotationDeg, scale) {
+    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];
+  }
+  var ANCHOR_FACTORS = {
+    "top-left": [0, 0],
+    "top-center": [0.5, 0],
+    "top-right": [1, 0],
+    "center-left": [0, 0.5],
+    center: [0.5, 0.5],
+    "center-right": [1, 0.5],
+    "bottom-left": [0, 1],
+    "bottom-center": [0.5, 1],
+    "bottom-right": [1, 1]
+  };
+  var TEXT_ALIGN = { 0: "left", 0.5: "center", 1: "right" };
+  var TEXT_BASELINE = { 0: "top", 0.5: "middle", 1: "bottom" };
+  function behaviorEnvelope(b, t) {
+    const from = b.from ?? Number.NEGATIVE_INFINITY;
+    const until = b.until ?? Number.POSITIVE_INFINITY;
+    if (t < from || t > until) return 0;
+    const ramp = b.ramp ?? 0.2;
+    let envelope = 1;
+    if (Number.isFinite(from) && ramp > 0) envelope = Math.min(envelope, (t - from) / ramp);
+    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;
+      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) {
+          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);
+          }
+        }
+      }
+      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;
+    };
+    const num = (target, prop, fallback) => {
+      const v = valueAt(target, prop, fallback);
+      return typeof v === "number" ? v : fallback;
+    };
+    const str = (target, prop, fallback) => {
+      const v = valueAt(target, prop, fallback);
+      return typeof v === "string" ? v : String(v);
+    };
+    const opt = (target, prop, base) => {
+      const v = valueAt(target, prop, base ?? "");
+      return v === "" && base === void 0 ? void 0 : String(v);
+    };
+    const walk = (node, parent, parentOpacity) => {
+      const id = node.id;
+      if (node.type === "line") {
+        const opacity2 = parentOpacity * num(id, "opacity", node.props.opacity ?? 1);
+        if (opacity2 <= 0) return;
+        const progress = Math.max(0, Math.min(1, num(id, "progress", node.props.progress ?? 1)));
+        const x1 = num(id, "x1", node.props.x1);
+        const y1 = num(id, "y1", node.props.y1);
+        ops.push({
+          type: "line",
+          id,
+          transform: parent,
+          opacity: opacity2,
+          x1,
+          y1,
+          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)
+        });
+        return;
+      }
+      const opacity = parentOpacity * num(id, "opacity", node.props.opacity ?? 1);
+      if (opacity <= 0) return;
+      const matrix = multiply(
+        parent,
+        localMatrix(
+          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)
+        )
+      );
+      switch (node.type) {
+        case "group":
+          for (const child of node.children) walk(child, matrix, opacity);
+          return;
+        case "rect":
+        case "ellipse": {
+          const width = num(id, "width", node.props.width);
+          const height = num(id, "height", node.props.height);
+          const [ax, ay] = ANCHOR_FACTORS[node.props.anchor ?? "top-left"];
+          const strokeWidth = num(id, "strokeWidth", node.props.strokeWidth ?? 1);
+          const fill = opt(id, "fill", node.props.fill);
+          const stroke = opt(id, "stroke", node.props.stroke);
+          ops.push({
+            type: node.type,
+            id,
+            transform: matrix,
+            opacity,
+            width,
+            height,
+            offsetX: -width * ax,
+            offsetY: -height * ay,
+            ...fill !== void 0 && { fill },
+            ...stroke !== void 0 && { stroke, strokeWidth },
+            ...node.type === "rect" && { radius: num(id, "radius", node.props.radius ?? 0) }
+          });
+          return;
+        }
+        case "text": {
+          const [ax, ay] = ANCHOR_FACTORS[node.props.anchor ?? "top-left"];
+          const raw = valueAt(id, "content", node.props.content);
+          const decimals = Math.max(
+            0,
+            Math.round(num(id, "contentDecimals", node.props.contentDecimals ?? 0))
+          );
+          ops.push({
+            type: "text",
+            id,
+            transform: matrix,
+            opacity,
+            content: typeof raw === "number" ? raw.toFixed(decimals) : raw,
+            fontFamily: str(id, "fontFamily", node.props.fontFamily),
+            fontSize: num(id, "fontSize", node.props.fontSize),
+            fontWeight: num(id, "fontWeight", node.props.fontWeight ?? 400),
+            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"
+          });
+          return;
+        }
+      }
+    };
+    for (const node of compiled2.ir.nodes) walk(node, IDENTITY, 1);
+    return ops;
+  }
+
+  // ../renderer-canvas/src/index.ts
+  function renderFrame(ctx2, compiled2, t) {
+    const { size, background } = compiled2.ir;
+    ctx2.setTransform(1, 0, 0, 1, 0, 0);
+    ctx2.clearRect(0, 0, size.width, size.height);
+    if (background) {
+      ctx2.fillStyle = background;
+      ctx2.fillRect(0, 0, size.width, size.height);
+    }
+    drawDisplayList(ctx2, evaluate(compiled2, t));
+  }
+  function drawDisplayList(ctx2, ops) {
+    for (const op of ops) {
+      ctx2.save();
+      ctx2.setTransform(...op.transform);
+      ctx2.globalAlpha = Math.max(0, Math.min(1, op.opacity));
+      switch (op.type) {
+        case "rect": {
+          ctx2.beginPath();
+          if (op.radius && op.radius > 0) {
+            ctx2.roundRect(op.offsetX, op.offsetY, op.width, op.height, op.radius);
+          } else {
+            ctx2.rect(op.offsetX, op.offsetY, op.width, op.height);
+          }
+          if (op.fill) {
+            ctx2.fillStyle = op.fill;
+            ctx2.fill();
+          }
+          if (op.stroke) {
+            ctx2.strokeStyle = op.stroke;
+            ctx2.lineWidth = op.strokeWidth ?? 1;
+            ctx2.stroke();
+          }
+          break;
+        }
+        case "ellipse": {
+          ctx2.beginPath();
+          ctx2.ellipse(
+            op.offsetX + op.width / 2,
+            op.offsetY + op.height / 2,
+            Math.abs(op.width / 2),
+            Math.abs(op.height / 2),
+            0,
+            0,
+            Math.PI * 2
+          );
+          if (op.fill) {
+            ctx2.fillStyle = op.fill;
+            ctx2.fill();
+          }
+          if (op.stroke) {
+            ctx2.strokeStyle = op.stroke;
+            ctx2.lineWidth = op.strokeWidth ?? 1;
+            ctx2.stroke();
+          }
+          break;
+        }
+        case "line": {
+          ctx2.beginPath();
+          ctx2.moveTo(op.x1, op.y1);
+          ctx2.lineTo(op.x2, op.y2);
+          ctx2.strokeStyle = op.stroke;
+          ctx2.lineWidth = op.strokeWidth;
+          ctx2.lineCap = "round";
+          ctx2.stroke();
+          break;
+        }
+        case "text": {
+          ctx2.font = `${op.fontWeight} ${op.fontSize}px ${quoteFamily(op.fontFamily)}`;
+          if (op.letterSpacing) ctx2.letterSpacing = `${op.letterSpacing}px`;
+          ctx2.textAlign = op.align;
+          ctx2.textBaseline = op.baseline;
+          ctx2.fillStyle = op.fill;
+          ctx2.fillText(op.content, 0, 0);
+          if (op.letterSpacing) ctx2.letterSpacing = "0px";
+          break;
+        }
+      }
+      ctx2.restore();
+    }
+  }
+  function quoteFamily(family) {
+    return family.includes(" ") && !family.includes('"') ? `"${family}"` : family;
+  }
+
+  // ../render-cli/src/browserEntry.ts
+  var compiled = null;
+  var ctx = null;
+  var canvas = null;
+  window.__reframe = {
+    init(ir) {
+      compiled = compileScene(ir);
+      canvas = document.createElement("canvas");
+      canvas.width = ir.size.width;
+      canvas.height = ir.size.height;
+      document.body.appendChild(canvas);
+      ctx = canvas.getContext("2d", { willReadFrequently: true });
+      if (!ctx) throw new Error("could not create 2d context");
+      return { duration: compiled.duration, fps: ir.fps ?? 30 };
+    },
+    renderFrame(t) {
+      if (!compiled || !ctx || !canvas) throw new Error("init() not called");
+      renderFrame(ctx, compiled, t);
+      return canvas.toDataURL("image/png");
+    }
+  };
+})();