@meframe/core 0.5.0 → 0.5.2

package/dist/workers/stages/export/{export.worker.Cw9iPvkh.js → export.worker.Dztm6GuN.js}

@@ -508,6 +508,23 @@ class WorkerChannel {
     this.port.onmessage = handler;
   }
 }
+function attachmentEntranceRelativeTimeUs(clipRelativeTimeUs, activeRanges) {
+  const containing = activeRanges?.find(
+    (r) => clipRelativeTimeUs >= r.startUs && clipRelativeTimeUs < r.endUs
+  );
+  if (!containing) {
+    return void 0;
+  }
+  return Math.max(0, clipRelativeTimeUs - containing.startUs);
+}
+function textAnimationFrameForTextLayer(layer, fallbackFrame, fps) {
+  const et = layer.entranceRelativeTimeUs;
+  if (et != null && Number.isFinite(et)) {
+    const frameDurationUs = 1e6 / fps;
+    return Math.floor(et / frameDurationUs);
+  }
+  return fallbackFrame;
+}
 function measureTextWidth(ctx, text, fontSize, fontFamily, fontWeight = 400) {
   ctx.save();
   ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
@@ -824,7 +841,7 @@ function needsSpaceBetweenWords(locale, text) {
   }
   return !["zh-CN", "ja-JP", "ko-KR"].includes(locale);
 }
-function calculateYPosition$3(canvasHeight, totalHeight, globalPosition) {
+function calculateYPosition$4(canvasHeight, totalHeight, globalPosition) {
   if (!globalPosition) {
     return canvasHeight / 2 - totalHeight / 2;
   }
@@ -876,7 +893,7 @@ function renderBasicText(ctx, layer, canvasWidth, canvasHeight, _relativeFrame)
   ctx.lineJoin = "round";
   ctx.lineCap = "round";
   const totalHeight = lines.length * fontSize * lineHeight;
-  const startY = calculateYPosition$3(canvasHeight, totalHeight, layer.fontConfig?.globalPosition);
+  const startY = calculateYPosition$4(canvasHeight, totalHeight, layer.fontConfig?.globalPosition);
   for (let i = 0; i < lines.length; i++) {
     const line = lines[i];
     const y = startY + i * fontSize * lineHeight + fontSize / 2;
@@ -890,22 +907,184 @@ function renderBasicText(ctx, layer, canvasWidth, canvasHeight, _relativeFrame)
   }
   ctx.restore();
 }
-function renderTextWithEntrance(ctx, layer, canvasWidth, canvasHeight, relativeFrame) {
+const DEFAULT_DURATION_MS = 800;
+const DEFAULT_STAGGER_MS = 50;
+const SLIDE_BASE_PX = 50;
+const LETTER_SPREAD_BASE_PX = 20;
+const BLUR_START_PX = 10;
+const FONT_REF_PX = 40;
+function easeOutExpo(t) {
+  if (t <= 0) return 0;
+  if (t >= 1) return 1;
+  return 1 - Math.pow(2, -10 * t);
+}
+function calculateYPosition$3(canvasHeight, totalHeight, globalPosition) {
+  if (!globalPosition) {
+    return canvasHeight / 2 - totalHeight / 2;
+  }
+  if (globalPosition.top) {
+    const topPercent = parseFloat(globalPosition.top) / 100;
+    return canvasHeight * topPercent;
+  }
+  if (globalPosition.bottom) {
+    const bottomPercent = parseFloat(globalPosition.bottom) / 100;
+    return canvasHeight * (1 - bottomPercent) - totalHeight;
+  }
+  if (globalPosition.justifyContent === "center" || globalPosition.alignItems === "center") {
+    return canvasHeight / 2 - totalHeight / 2;
+  }
+  return canvasHeight / 2 - totalHeight / 2;
+}
+function charProgress(relativeFrame, fps, charIndex, staggerMs, durationMs) {
+  const tMs = relativeFrame / fps * 1e3;
+  const startMs = charIndex * staggerMs;
+  if (tMs <= startMs) return 0;
+  const raw = (tMs - startMs) / durationMs;
+  return easeOutExpo(Math.min(1, raw));
+}
+function buildCharSlots(ctx, layer, canvasWidth, canvasHeight) {
   const fontConfig = layer.fontConfig?.textStyle;
-  if (!fontConfig) return;
-  const entrance = springEasing(relativeFrame, {
-    damping: 200,
-    mass: 1,
-    stiffness: 300
-  });
-  const opacity = interpolate(entrance, [0, 1], [0, 1]);
-  const scale = interpolate(entrance, [0, 1], [0.9, 1]);
+  if (!fontConfig) return null;
+  const fontSize = fontConfig.fontSize;
+  const fontFamily = fontConfig.fontFamily;
+  const fontWeight = fontConfig.fontWeight;
+  const lineHeight = fontConfig.lineHeight || 1.2;
+  const maxWidth = canvasWidth * 0.64;
+  const text = getLetterCaseText(layer.text, layer.letterCase);
+  let lines;
+  if (layer.wordTimings && layer.wordTimings.length > 0) {
+    const needsSpace = needsSpaceBetweenWords(layer.localeCode || "en-US", text);
+    const words = text.split(needsSpace ? /\s+/ : "");
+    lines = formEvenLinesWithWords(
+      ctx,
+      words,
+      maxWidth,
+      fontSize,
+      needsSpace,
+      fontFamily,
+      fontWeight
+    );
+  } else {
+    lines = wrapText(ctx, text, maxWidth, fontSize, fontFamily, fontWeight);
+  }
+  const totalHeight = lines.length * fontSize * lineHeight;
+  const startY = calculateYPosition$3(canvasHeight, totalHeight, layer.fontConfig?.globalPosition);
+  ctx.save();
+  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  const slots = [];
+  let globalIndex = 0;
+  for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
+    const line = lines[lineIndex];
+    const y = startY + lineIndex * fontSize * lineHeight + fontSize / 2;
+    const lineWidth = measureTextWidth(ctx, line, fontSize, fontFamily, fontWeight);
+    let cx = canvasWidth / 2 - lineWidth / 2;
+    for (const ch of Array.from(line)) {
+      const cw = measureTextWidth(ctx, ch, fontSize, fontFamily, fontWeight);
+      slots.push({
+        ch,
+        x: cx + cw / 2,
+        y,
+        globalIndex
+      });
+      globalIndex++;
+      cx += cw;
+    }
+  }
+  ctx.restore();
+  return { slots, fontSize, lineHeight };
+}
+function renderCaptionStaggerEntrance(ctx, layer, canvasWidth, canvasHeight, relativeFrame, fps, preset) {
+  const built = buildCharSlots(ctx, layer, canvasWidth, canvasHeight);
+  if (!built) return;
+  const { slots, fontSize } = built;
+  const fontConfig = layer.fontConfig.textStyle;
+  const fontFamily = fontConfig.fontFamily;
+  const fontWeight = fontConfig.fontWeight;
+  const fill = fontConfig.fill;
+  const stroke = fontConfig.stroke;
+  const strokeWidth = fontConfig.strokeWidth || 0;
+  const scalePx = fontSize / FONT_REF_PX;
+  const staggerMs = DEFAULT_STAGGER_MS;
   ctx.save();
-  ctx.globalAlpha = opacity;
-  ctx.translate(canvasWidth / 2, canvasHeight / 2);
-  ctx.scale(scale, scale);
-  ctx.translate(-canvasWidth / 2, -canvasHeight / 2);
-  renderBasicText(ctx, layer, canvasWidth, canvasHeight);
+  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.lineJoin = "round";
+  ctx.lineCap = "round";
+  const tMsGlobal = relativeFrame / fps * 1e3;
+  for (const slot of slots) {
+    let p;
+    if (preset === "typewriter") {
+      const startMs = slot.globalIndex * staggerMs;
+      p = tMsGlobal >= startMs ? 1 : 0;
+    } else {
+      p = charProgress(relativeFrame, fps, slot.globalIndex, staggerMs, DEFAULT_DURATION_MS);
+    }
+    if (p <= 0 && preset !== "blur") continue;
+    const slidePx = SLIDE_BASE_PX * scalePx;
+    const spreadPx = LETTER_SPREAD_BASE_PX * scalePx;
+    ctx.save();
+    let opacity = p;
+    let tx = 0;
+    let ty = 0;
+    let rot = 0;
+    let sc = 1;
+    let sy = 1;
+    let blurPx = 0;
+    switch (preset) {
+      case "fade":
+        opacity = p;
+        break;
+      case "slideUp":
+        opacity = p;
+        ty = (1 - p) * slidePx;
+        break;
+      case "scale":
+        opacity = p;
+        sc = Math.max(0.04, p);
+        break;
+      case "rotateScale":
+        opacity = p;
+        rot = (1 - p) * 45 * Math.PI / 180;
+        sc = 0.5 + p * 0.5;
+        break;
+      case "blur":
+        opacity = p;
+        blurPx = (1 - p) * BLUR_START_PX;
+        break;
+      case "flip3d":
+        opacity = p;
+        sy = Math.max(0.04, p);
+        sc = 1;
+        break;
+      case "typewriter":
+        opacity = p >= 1 ? 1 : p;
+        break;
+      case "letterSpread":
+        opacity = p;
+        tx = (1 - p) * spreadPx * slot.globalIndex;
+        break;
+    }
+    ctx.globalAlpha = opacity;
+    if (blurPx > 0.01) {
+      ctx.filter = `blur(${blurPx}px)`;
+    }
+    ctx.translate(slot.x + tx, slot.y + ty);
+    ctx.rotate(rot);
+    if (preset === "flip3d") {
+      ctx.scale(1, sy);
+    } else {
+      ctx.scale(sc, sc);
+    }
+    if (stroke && strokeWidth > 0) {
+      ctx.strokeStyle = stroke;
+      ctx.lineWidth = strokeWidth;
+      ctx.strokeText(slot.ch, 0, 0);
+    }
+    ctx.fillStyle = fill;
+    ctx.fillText(slot.ch, 0, 0);
+    ctx.restore();
+  }
   ctx.restore();
 }
 function usToFrame$2(us, fps) {
@@ -1541,6 +1720,7 @@ class LayerRenderer {
   renderTextLayer(layer) {
     const animationType = layer.animation?.type;
     const hasWordTimings = layer.wordTimings && layer.wordTimings.length > 0;
+    const animFrame = textAnimationFrameForTextLayer(layer, this.currentFrame, this.fps);
     const needsWordTimings = ["wordByWord", "characterKTV", "wordByWordFancy"].includes(
       animationType || ""
     );
@@ -1550,24 +1730,32 @@ class LayerRenderer {
     }
     switch (animationType) {
       case "wordByWord":
-        renderWordByWord(this.ctx, layer, this.width, this.height, this.currentFrame, this.fps);
+        renderWordByWord(this.ctx, layer, this.width, this.height, animFrame, this.fps);
         break;
       case "characterKTV":
-        renderCharacterKTV(this.ctx, layer, this.width, this.height, this.currentFrame, this.fps);
+        renderCharacterKTV(this.ctx, layer, this.width, this.height, animFrame, this.fps);
         break;
       case "wordByWordFancy":
-        renderWordByWordFancy(
+        renderWordByWordFancy(this.ctx, layer, this.width, this.height, animFrame, this.fps);
+        break;
+      case "fade":
+      case "slideUp":
+      case "scale":
+      case "rotateScale":
+      case "blur":
+      case "flip3d":
+      case "typewriter":
+      case "letterSpread":
+        renderCaptionStaggerEntrance(
           this.ctx,
           layer,
           this.width,
           this.height,
-          this.currentFrame,
-          this.fps
+          animFrame,
+          this.fps,
+          animationType
         );
         break;
-      case "fade":
-        renderTextWithEntrance(this.ctx, layer, this.width, this.height, this.currentFrame);
-        break;
       default:
         renderBasicText(this.ctx, layer, this.width, this.height, this.currentFrame);
         break;
@@ -2914,7 +3102,7 @@ function resolveActiveLayers(layers, timestamp) {
     );
   });
 }
-function materializeLayer(layer, frame, imageMap, globalTimeUs) {
+function materializeLayer(layer, frame, imageMap, globalTimeUs, clipRelativeTimeUs) {
   const baseLayer = {
     id: layer.layerId,
     type: layer.type,
@@ -2937,6 +3125,7 @@ function materializeLayer(layer, frame, imageMap, globalTimeUs) {
   }
   if (layer.type === "text") {
     const payload = layer.payload;
+    const entranceRelativeTimeUs = clipRelativeTimeUs != null ? attachmentEntranceRelativeTimeUs(clipRelativeTimeUs, layer.activeRanges) : void 0;
     return {
       ...baseLayer,
       type: "text",
@@ -2945,7 +3134,8 @@ function materializeLayer(layer, frame, imageMap, globalTimeUs) {
       fontConfig: payload.fontConfig,
       animation: payload.animation,
       wordTimings: payload.wordTimings,
-      letterCase: payload.letterCase
+      letterCase: payload.letterCase,
+      entranceRelativeTimeUs
     };
   }
   if (layer.type === "image") {
@@ -3215,7 +3405,7 @@ class ExportWorker {
     if (!activeLayers.length) return null;
     const clipStartUs = instruction.baseConfig.timeline?.clipStartUs ?? 0;
     const globalTimeUs = clipStartUs + clipRelativeTime;
-    const layers = activeLayers.map((layer) => materializeLayer(layer, frame, this.imageMap, globalTimeUs)).filter((layer) => layer !== null);
+    const layers = activeLayers.map((layer) => materializeLayer(layer, frame, this.imageMap, globalTimeUs, clipRelativeTime)).filter((layer) => layer !== null);
     if (!layers.length) return null;
     return {
       timeUs: clipRelativeTime,
@@ -3253,4 +3443,4 @@ const export_worker = null;
 export {
   export_worker as default
 };
-//# sourceMappingURL=export.worker.Cw9iPvkh.js.map
+//# sourceMappingURL=export.worker.Dztm6GuN.js.map