@meframe/core 0.1.3 → 0.1.4

package/dist/stages/compose/LayerRenderer.js

@@ -106,14 +106,22 @@ class LayerRenderer {
       if (imageLayer.source) {
         const imgWidth = imageLayer.source.width;
         const imgHeight = imageLayer.source.height;
-        return this.calculateDimensionsFromConfig(imgWidth, imgHeight, imageLayer.renderConfig);
+        const hasValidRenderConfig = !!(imageLayer.renderConfig?.width !== void 0 || imageLayer.renderConfig?.height !== void 0);
+        if (hasValidRenderConfig) {
+          return this.calculateDimensionsFromConfig(imgWidth, imgHeight, imageLayer.renderConfig);
+        }
+        return { width: imgWidth, height: imgHeight };
       }
     } else if (layer.type === "video") {
       const videoLayer = layer;
       const videoFrame = videoLayer.videoFrame;
       const videoWidth = videoFrame.displayWidth || videoFrame.codedWidth;
       const videoHeight = videoFrame.displayHeight || videoFrame.codedHeight;
-      return this.calculateDimensionsFromConfig(videoWidth, videoHeight, videoLayer.renderConfig);
+      const hasValidRenderConfig = !!(videoLayer.renderConfig?.width !== void 0 || videoLayer.renderConfig?.height !== void 0);
+      if (hasValidRenderConfig) {
+        return this.calculateDimensionsFromConfig(videoWidth, videoHeight, videoLayer.renderConfig);
+      }
+      return { width: videoWidth, height: videoHeight };
     }
     return { width: this.width, height: this.height };
   }
@@ -165,7 +173,8 @@ class LayerRenderer {
     let renderY;
     let renderWidth;
     let renderHeight;
-    if (renderConfig) {
+    const hasValidRenderConfig = !!(renderConfig?.width !== void 0 || renderConfig?.height !== void 0);
+    if (hasValidRenderConfig) {
       const dimensions = this.calculateDimensionsFromConfig(videoWidth, videoHeight, renderConfig);
       renderWidth = dimensions.width;
       renderHeight = dimensions.height;
@@ -196,7 +205,7 @@ class LayerRenderer {
     }
   }
   renderImageLayer(layer) {
-    const { source, crop, renderConfig } = layer;
+    const { source, crop, renderConfig, attachmentId } = layer;
     if (source instanceof ImageData) {
       if (crop) {
         const tempCanvas = new OffscreenCanvas(crop.width, crop.height);
@@ -215,12 +224,18 @@ class LayerRenderer {
     let renderY;
     let renderWidth;
     let renderHeight;
-    if (renderConfig) {
+    const hasValidRenderConfig = !!(renderConfig?.width !== void 0 || renderConfig?.height !== void 0);
+    if (hasValidRenderConfig) {
       const dimensions = this.calculateDimensionsFromConfig(imgWidth, imgHeight, renderConfig);
       renderWidth = dimensions.width;
       renderHeight = dimensions.height;
       renderX = 0;
       renderY = 0;
+    } else if (attachmentId) {
+      renderWidth = imgWidth;
+      renderHeight = imgHeight;
+      renderX = 0;
+      renderY = 0;
     } else {
       const naturalScale = this.width / imgWidth;
       const dimensions = this.calculateRenderDimensions(imgWidth, imgHeight, naturalScale);

package/dist/stages/compose/LayerRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayerRenderer.js","sources":["../../../src/stages/compose/LayerRenderer.ts"],"sourcesContent":["import type { Layer, VideoLayer, ImageLayer, TextLayer, Transform2D, MaskConfig } from './types';\nimport { renderBasicText, renderTextWithEntrance } from './text-renderers/basic-text-renderer';\nimport { renderWordByWord } from './text-renderers/word-by-word-renderer';\nimport { renderCharacterKTV } from './text-renderers/character-ktv-renderer';\nimport { renderWordByWordFancy } from './text-renderers/word-fancy-renderer';\n\n/**\n * LayerRenderer - Handles rendering of individual layers\n * Single responsibility: Draw a single layer to the canvas context\n */\nexport class LayerRenderer {\n  private ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D;\n  private width: number;\n  private height: number;\n  private currentFrame: number = 0;\n  private fps: number = 30;\n  private readonly FILL_THRESHOLD = 0.9;\n\n  constructor(\n    ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D,\n    width: number,\n    height: number,\n    fps: number = 30\n  ) {\n    this.ctx = ctx;\n    this.width = width;\n    this.height = height;\n    this.fps = fps;\n    this.ensureHighQualityRendering();\n  }\n\n  setCurrentFrame(frame: number): void {\n    this.currentFrame = frame;\n  }\n\n  private ensureHighQualityRendering(): void {\n    this.ctx.imageSmoothingEnabled = true;\n    this.ctx.imageSmoothingQuality = 'high';\n  }\n\n  /**\n   * Render a single layer with all its properties\n   */\n  renderLayer(layer: Layer): void {\n    if (!layer.visible || layer.opacity <= 0) return;\n\n    // Only save/restore context if layer has properties that need it\n    const needsStateManagement =\n      layer.opacity !== 1 || layer.blendMode || layer.transform || layer.mask;\n\n    if (needsStateManagement) {\n      this.ctx.save();\n    }\n\n    try {\n      // Apply layer properties only when needed\n      if (layer.opacity !== 1) {\n        this.ctx.globalAlpha = layer.opacity;\n      }\n\n      if (layer.blendMode) {\n        this.ctx.globalCompositeOperation = layer.blendMode;\n      }\n\n      if (layer.transform) {\n        // Get layer dimensions for transform anchor calculation\n        const layerDimensions = this.getLayerDimensions(layer);\n        this.applyTransform(layer.transform, layerDimensions);\n      }\n      // Render based on layer type\n      switch (layer.type) {\n        case 'video':\n          this.renderVideoLayer(layer as VideoLayer);\n          break;\n        case 'image':\n          this.renderImageLayer(layer as ImageLayer);\n          break;\n        case 'text':\n          this.renderTextLayer(layer as TextLayer);\n          break;\n      }\n\n      // Apply mask if present\n      if (layer.mask) {\n        this.applyMask(layer.mask);\n      }\n    } finally {\n      if (needsStateManagement) {\n        this.ctx.restore();\n      }\n    }\n  }\n\n  private parseDimension(\n    value: number | string | undefined,\n    canvasSize: number\n  ): number | undefined {\n    if (value === undefined) return undefined;\n    if (typeof value === 'number') return value;\n\n    // value is string at this point\n    const strValue = value as string;\n\n    // Parse percentage string like \"5%\"\n    if (strValue.includes('%')) {\n      const numValue = parseFloat(strValue);\n      return isNaN(numValue) ? undefined : (numValue / 100) * canvasSize;\n    }\n\n    // Parse as pixel value\n    const parsed = parseFloat(strValue);\n    return isNaN(parsed) ? undefined : parsed;\n  }\n\n  /**\n   * Calculate dimensions from renderConfig\n   * Returns dimensions maintaining aspect ratio when only one dimension is specified\n   */\n  private calculateDimensionsFromConfig(\n    sourceWidth: number,\n    sourceHeight: number,\n    renderConfig: { width?: number | string; height?: number | string } | undefined\n  ): { width: number; height: number } {\n    if (!renderConfig) {\n      return { width: sourceWidth, height: sourceHeight };\n    }\n\n    const width = this.parseDimension(renderConfig.width, this.width);\n    const height = this.parseDimension(renderConfig.height, this.height);\n\n    if (width && height) {\n      return { width, height };\n    } else if (width) {\n      return {\n        width,\n        height: Math.round((sourceHeight / sourceWidth) * width),\n      };\n    } else if (height) {\n      return {\n        width: Math.round((sourceWidth / sourceHeight) * height),\n        height,\n      };\n    } else {\n      // renderConfig exists but empty, use original size\n      return { width: sourceWidth, height: sourceHeight };\n    }\n  }\n\n  private getLayerDimensions(layer: Layer): { width: number; height: number } {\n    if (layer.type === 'image') {\n      const imageLayer = layer as ImageLayer;\n      if (imageLayer.source) {\n        const imgWidth = imageLayer.source.width;\n        const imgHeight = imageLayer.source.height;\n        return this.calculateDimensionsFromConfig(imgWidth, imgHeight, imageLayer.renderConfig);\n      }\n    } else if (layer.type === 'video') {\n      const videoLayer = layer as VideoLayer;\n      const videoFrame = videoLayer.videoFrame;\n      const videoWidth = videoFrame.displayWidth || videoFrame.codedWidth;\n      const videoHeight = videoFrame.displayHeight || videoFrame.codedHeight;\n      return this.calculateDimensionsFromConfig(videoWidth, videoHeight, videoLayer.renderConfig);\n    }\n    // Default to canvas dimensions\n    return { width: this.width, height: this.height };\n  }\n\n  /**\n   * Calculate render dimensions with smart fill logic\n   * @param sourceWidth Source width\n   * @param sourceHeight Source height\n   * @param naturalScale Natural scale factor (scaleY for video, scaleX for image)\n   * @returns Render dimensions and position\n   */\n  private calculateRenderDimensions(\n    sourceWidth: number,\n    sourceHeight: number,\n    naturalScale: number\n  ): { width: number; height: number; x: number; y: number } {\n    const scaledWidth = sourceWidth * naturalScale;\n    const scaledHeight = sourceHeight * naturalScale;\n\n    // Smart fill: when scaled size is close to container (>90%), use cover mode\n    const shouldFill =\n      scaledWidth / this.width > this.FILL_THRESHOLD &&\n      scaledHeight / this.height > this.FILL_THRESHOLD;\n\n    let renderWidth: number;\n    let renderHeight: number;\n\n    if (shouldFill) {\n      // Cover mode: use Math.max to ensure entire canvas is covered while maintaining aspect ratio\n      const coverScale = Math.max(this.width / sourceWidth, this.height / sourceHeight);\n      renderWidth = Math.round(sourceWidth * coverScale);\n      renderHeight = Math.round(sourceHeight * coverScale);\n    } else {\n      // Natural scale mode: use scaled dimensions\n      renderWidth = Math.round(scaledWidth);\n      renderHeight = Math.round(scaledHeight);\n    }\n\n    // Center the content\n    const renderX = Math.round((this.width - renderWidth) / 2);\n    const renderY = Math.round((this.height - renderHeight) / 2);\n\n    return { width: renderWidth, height: renderHeight, x: renderX, y: renderY };\n  }\n\n  private applyTransform(\n    transform: Transform2D,\n    layerDimensions: { width: number; height: number }\n  ): void {\n    // Use layer dimensions (not canvas dimensions) for anchor calculation\n    const anchorX = transform.anchorX ?? 0.5;\n    const anchorY = transform.anchorY ?? 0.5;\n    const centerX = layerDimensions.width * anchorX;\n    const centerY = layerDimensions.height * anchorY;\n\n    // Move to the layer position + anchor offset\n    this.ctx.translate(transform.x + centerX, transform.y + centerY);\n\n    if (transform.rotation) {\n      this.ctx.rotate(transform.rotation);\n    }\n\n    this.ctx.scale(transform.scaleX, transform.scaleY);\n\n    if (transform.skewX || transform.skewY) {\n      this.ctx.transform(1, transform.skewY ?? 0, transform.skewX ?? 0, 1, 0, 0);\n    }\n\n    // Move back by anchor offset\n    this.ctx.translate(-centerX, -centerY);\n  }\n\n  private renderVideoLayer(layer: VideoLayer): void {\n    const { videoFrame, crop, renderConfig } = layer;\n\n    const videoWidth = videoFrame.displayWidth || videoFrame.codedWidth;\n    const videoHeight = videoFrame.displayHeight || videoFrame.codedHeight;\n\n    let renderX: number;\n    let renderY: number;\n    let renderWidth: number;\n    let renderHeight: number;\n\n    if (renderConfig) {\n      // Has renderConfig: explicit dimensions\n      const dimensions = this.calculateDimensionsFromConfig(videoWidth, videoHeight, renderConfig);\n      renderWidth = dimensions.width;\n      renderHeight = dimensions.height;\n      // Center the video\n      renderX = Math.round((this.width - renderWidth) / 2);\n      renderY = Math.round((this.height - renderHeight) / 2);\n    } else {\n      // No renderConfig: legacy smart fill (height-based)\n      const naturalScale = this.height / videoHeight;\n      const dimensions = this.calculateRenderDimensions(videoWidth, videoHeight, naturalScale);\n      renderX = dimensions.x;\n      renderY = dimensions.y;\n      renderWidth = dimensions.width;\n      renderHeight = dimensions.height;\n    }\n\n    if (crop) {\n      this.ctx.drawImage(\n        videoFrame,\n        crop.x,\n        crop.y,\n        crop.width,\n        crop.height,\n        renderX,\n        renderY,\n        renderWidth,\n        renderHeight\n      );\n    } else {\n      this.ctx.drawImage(videoFrame, renderX, renderY, renderWidth, renderHeight);\n    }\n    // NOTE: Do not close videoFrame - it's managed by RcFrame wrapper\n  }\n\n  private renderImageLayer(layer: ImageLayer): void {\n    const { source, crop, renderConfig } = layer;\n\n    // Handle ImageData by putting it on canvas first\n    if (source instanceof ImageData) {\n      if (crop) {\n        // For ImageData with crop, we need to extract the cropped region\n        const tempCanvas = new OffscreenCanvas(crop.width, crop.height);\n        const tempCtx = tempCanvas.getContext('2d')!;\n        tempCtx.putImageData(source, -crop.x, -crop.y);\n        this.ctx.drawImage(tempCanvas, 0, 0, this.width, this.height);\n      } else {\n        // Put ImageData directly\n        this.ctx.putImageData(source, 0, 0);\n      }\n      return;\n    }\n\n    if (!source) return;\n\n    const imgWidth = source.width;\n    const imgHeight = source.height;\n\n    let renderX: number;\n    let renderY: number;\n    let renderWidth: number;\n    let renderHeight: number;\n\n    if (renderConfig) {\n      // Has renderConfig: explicit dimensions\n      const dimensions = this.calculateDimensionsFromConfig(imgWidth, imgHeight, renderConfig);\n      renderWidth = dimensions.width;\n      renderHeight = dimensions.height;\n      // Images with renderConfig start at origin (for overlay positioning)\n      renderX = 0;\n      renderY = 0;\n    } else {\n      // No renderConfig: legacy smart fill (width-based, main track)\n      const naturalScale = this.width / imgWidth;\n      const dimensions = this.calculateRenderDimensions(imgWidth, imgHeight, naturalScale);\n      renderWidth = dimensions.width;\n      renderHeight = dimensions.height;\n      // Center the image\n      renderX = Math.round((this.width - renderWidth) / 2);\n      renderY = Math.round((this.height - renderHeight) / 2);\n    }\n\n    if (crop) {\n      this.ctx.drawImage(\n        source,\n        crop.x,\n        crop.y,\n        crop.width,\n        crop.height,\n        renderX,\n        renderY,\n        renderWidth,\n        renderHeight\n      );\n    } else {\n      this.ctx.drawImage(source, renderX, renderY, renderWidth, renderHeight);\n    }\n  }\n\n  private renderTextLayer(layer: TextLayer): void {\n    const animationType = layer.animation?.type;\n    const hasWordTimings = layer.wordTimings && layer.wordTimings.length > 0;\n\n    const needsWordTimings = ['wordByWord', 'characterKTV', 'wordByWordFancy'].includes(\n      animationType || ''\n    );\n\n    if (needsWordTimings && !hasWordTimings) {\n      renderBasicText(this.ctx, layer, this.width, this.height, this.currentFrame);\n      return;\n    }\n\n    switch (animationType) {\n      case 'wordByWord':\n        renderWordByWord(this.ctx, layer, this.width, this.height, this.currentFrame, this.fps);\n        break;\n      case 'characterKTV':\n        renderCharacterKTV(this.ctx, layer, this.width, this.height, this.currentFrame, this.fps);\n        break;\n      case 'wordByWordFancy':\n        renderWordByWordFancy(\n          this.ctx,\n          layer,\n          this.width,\n          this.height,\n          this.currentFrame,\n          this.fps\n        );\n        break;\n      case 'fade':\n        renderTextWithEntrance(this.ctx, layer, this.width, this.height, this.currentFrame);\n        break;\n      default:\n        renderBasicText(this.ctx, layer, this.width, this.height, this.currentFrame);\n        break;\n    }\n  }\n\n  private applyMask(mask: MaskConfig): void {\n    this.ctx.globalCompositeOperation = mask.invert ? 'source-out' : 'destination-in';\n\n    if (mask.source) {\n      this.ctx.drawImage(mask.source, 0, 0, this.width, this.height);\n    } else if (mask.shape === 'circle') {\n      this.ctx.beginPath();\n      this.ctx.arc(\n        this.width / 2,\n        this.height / 2,\n        Math.min(this.width, this.height) / 2,\n        0,\n        Math.PI * 2\n      );\n      this.ctx.fill();\n    }\n  }\n\n  updateDimensions(width: number, height: number): void {\n    this.width = width;\n    this.height = height;\n    this.ensureHighQualityRendering();\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"LayerRenderer.js","sources":["../../../src/stages/compose/LayerRenderer.ts"],"sourcesContent":["import type { Layer, VideoLayer, ImageLayer, TextLayer, Transform2D, MaskConfig } from './types';\nimport { renderBasicText, renderTextWithEntrance } from './text-renderers/basic-text-renderer';\nimport { renderWordByWord } from './text-renderers/word-by-word-renderer';\nimport { renderCharacterKTV } from './text-renderers/character-ktv-renderer';\nimport { renderWordByWordFancy } from './text-renderers/word-fancy-renderer';\n\n/**\n * LayerRenderer - Handles rendering of individual layers\n * Single responsibility: Draw a single layer to the canvas context\n */\nexport class LayerRenderer {\n  private ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D;\n  private width: number;\n  private height: number;\n  private currentFrame: number = 0;\n  private fps: number = 30;\n  private readonly FILL_THRESHOLD = 0.9;\n\n  constructor(\n    ctx: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D,\n    width: number,\n    height: number,\n    fps: number = 30\n  ) {\n    this.ctx = ctx;\n    this.width = width;\n    this.height = height;\n    this.fps = fps;\n    this.ensureHighQualityRendering();\n  }\n\n  setCurrentFrame(frame: number): void {\n    this.currentFrame = frame;\n  }\n\n  private ensureHighQualityRendering(): void {\n    this.ctx.imageSmoothingEnabled = true;\n    this.ctx.imageSmoothingQuality = 'high';\n  }\n\n  /**\n   * Render a single layer with all its properties\n   */\n  renderLayer(layer: Layer): void {\n    if (!layer.visible || layer.opacity <= 0) return;\n\n    // Only save/restore context if layer has properties that need it\n    const needsStateManagement =\n      layer.opacity !== 1 || layer.blendMode || layer.transform || layer.mask;\n\n    if (needsStateManagement) {\n      this.ctx.save();\n    }\n\n    try {\n      // Apply layer properties only when needed\n      if (layer.opacity !== 1) {\n        this.ctx.globalAlpha = layer.opacity;\n      }\n\n      if (layer.blendMode) {\n        this.ctx.globalCompositeOperation = layer.blendMode;\n      }\n\n      if (layer.transform) {\n        // Get layer dimensions for transform anchor calculation\n        const layerDimensions = this.getLayerDimensions(layer);\n        this.applyTransform(layer.transform, layerDimensions);\n      }\n      // Render based on layer type\n      switch (layer.type) {\n        case 'video':\n          this.renderVideoLayer(layer as VideoLayer);\n          break;\n        case 'image':\n          this.renderImageLayer(layer as ImageLayer);\n          break;\n        case 'text':\n          this.renderTextLayer(layer as TextLayer);\n          break;\n      }\n\n      // Apply mask if present\n      if (layer.mask) {\n        this.applyMask(layer.mask);\n      }\n    } finally {\n      if (needsStateManagement) {\n        this.ctx.restore();\n      }\n    }\n  }\n\n  private parseDimension(\n    value: number | string | undefined,\n    canvasSize: number\n  ): number | undefined {\n    if (value === undefined) return undefined;\n    if (typeof value === 'number') return value;\n\n    // value is string at this point\n    const strValue = value as string;\n\n    // Parse percentage string like \"5%\"\n    if (strValue.includes('%')) {\n      const numValue = parseFloat(strValue);\n      return isNaN(numValue) ? undefined : (numValue / 100) * canvasSize;\n    }\n\n    // Parse as pixel value\n    const parsed = parseFloat(strValue);\n    return isNaN(parsed) ? undefined : parsed;\n  }\n\n  /**\n   * Calculate dimensions from renderConfig\n   * Returns dimensions maintaining aspect ratio when only one dimension is specified\n   */\n  private calculateDimensionsFromConfig(\n    sourceWidth: number,\n    sourceHeight: number,\n    renderConfig: { width?: number | string; height?: number | string } | undefined\n  ): { width: number; height: number } {\n    if (!renderConfig) {\n      return { width: sourceWidth, height: sourceHeight };\n    }\n\n    const width = this.parseDimension(renderConfig.width, this.width);\n    const height = this.parseDimension(renderConfig.height, this.height);\n\n    if (width && height) {\n      return { width, height };\n    } else if (width) {\n      return {\n        width,\n        height: Math.round((sourceHeight / sourceWidth) * width),\n      };\n    } else if (height) {\n      return {\n        width: Math.round((sourceWidth / sourceHeight) * height),\n        height,\n      };\n    } else {\n      // renderConfig exists but empty, use original size\n      return { width: sourceWidth, height: sourceHeight };\n    }\n  }\n\n  private getLayerDimensions(layer: Layer): { width: number; height: number } {\n    if (layer.type === 'image') {\n      const imageLayer = layer as ImageLayer;\n      if (imageLayer.source) {\n        const imgWidth = imageLayer.source.width;\n        const imgHeight = imageLayer.source.height;\n\n        // Check if has valid renderConfig\n        const hasValidRenderConfig = !!(\n          imageLayer.renderConfig?.width !== undefined ||\n          imageLayer.renderConfig?.height !== undefined\n        );\n\n        if (hasValidRenderConfig) {\n          return this.calculateDimensionsFromConfig(imgWidth, imgHeight, imageLayer.renderConfig);\n        }\n        // No valid renderConfig: return original dimensions\n        return { width: imgWidth, height: imgHeight };\n      }\n    } else if (layer.type === 'video') {\n      const videoLayer = layer as VideoLayer;\n      const videoFrame = videoLayer.videoFrame;\n      const videoWidth = videoFrame.displayWidth || videoFrame.codedWidth;\n      const videoHeight = videoFrame.displayHeight || videoFrame.codedHeight;\n\n      // Check if has valid renderConfig\n      const hasValidRenderConfig = !!(\n        videoLayer.renderConfig?.width !== undefined ||\n        videoLayer.renderConfig?.height !== undefined\n      );\n\n      if (hasValidRenderConfig) {\n        return this.calculateDimensionsFromConfig(videoWidth, videoHeight, videoLayer.renderConfig);\n      }\n      // No valid renderConfig: return original dimensions\n      return { width: videoWidth, height: videoHeight };\n    }\n    // Default to canvas dimensions\n    return { width: this.width, height: this.height };\n  }\n\n  /**\n   * Calculate render dimensions with smart fill logic\n   * @param sourceWidth Source width\n   * @param sourceHeight Source height\n   * @param naturalScale Natural scale factor (scaleY for video, scaleX for image)\n   * @returns Render dimensions and position\n   */\n  private calculateRenderDimensions(\n    sourceWidth: number,\n    sourceHeight: number,\n    naturalScale: number\n  ): { width: number; height: number; x: number; y: number } {\n    const scaledWidth = sourceWidth * naturalScale;\n    const scaledHeight = sourceHeight * naturalScale;\n\n    // Smart fill: when scaled size is close to container (>90%), use cover mode\n    const shouldFill =\n      scaledWidth / this.width > this.FILL_THRESHOLD &&\n      scaledHeight / this.height > this.FILL_THRESHOLD;\n\n    let renderWidth: number;\n    let renderHeight: number;\n\n    if (shouldFill) {\n      // Cover mode: use Math.max to ensure entire canvas is covered while maintaining aspect ratio\n      const coverScale = Math.max(this.width / sourceWidth, this.height / sourceHeight);\n      renderWidth = Math.round(sourceWidth * coverScale);\n      renderHeight = Math.round(sourceHeight * coverScale);\n    } else {\n      // Natural scale mode: use scaled dimensions\n      renderWidth = Math.round(scaledWidth);\n      renderHeight = Math.round(scaledHeight);\n    }\n\n    // Center the content\n    const renderX = Math.round((this.width - renderWidth) / 2);\n    const renderY = Math.round((this.height - renderHeight) / 2);\n\n    return { width: renderWidth, height: renderHeight, x: renderX, y: renderY };\n  }\n\n  private applyTransform(\n    transform: Transform2D,\n    layerDimensions: { width: number; height: number }\n  ): void {\n    // Use layer dimensions (not canvas dimensions) for anchor calculation\n    const anchorX = transform.anchorX ?? 0.5;\n    const anchorY = transform.anchorY ?? 0.5;\n    const centerX = layerDimensions.width * anchorX;\n    const centerY = layerDimensions.height * anchorY;\n\n    // Move to the layer position + anchor offset\n    this.ctx.translate(transform.x + centerX, transform.y + centerY);\n\n    if (transform.rotation) {\n      this.ctx.rotate(transform.rotation);\n    }\n\n    this.ctx.scale(transform.scaleX, transform.scaleY);\n\n    if (transform.skewX || transform.skewY) {\n      this.ctx.transform(1, transform.skewY ?? 0, transform.skewX ?? 0, 1, 0, 0);\n    }\n\n    // Move back by anchor offset\n    this.ctx.translate(-centerX, -centerY);\n  }\n\n  private renderVideoLayer(layer: VideoLayer): void {\n    const { videoFrame, crop, renderConfig } = layer;\n\n    const videoWidth = videoFrame.displayWidth || videoFrame.codedWidth;\n    const videoHeight = videoFrame.displayHeight || videoFrame.codedHeight;\n\n    let renderX: number;\n    let renderY: number;\n    let renderWidth: number;\n    let renderHeight: number;\n\n    // Check if has valid renderConfig (with actual width or height values)\n    const hasValidRenderConfig = !!(\n      renderConfig?.width !== undefined || renderConfig?.height !== undefined\n    );\n\n    if (hasValidRenderConfig) {\n      // Has valid renderConfig: explicit dimensions\n      const dimensions = this.calculateDimensionsFromConfig(videoWidth, videoHeight, renderConfig);\n      renderWidth = dimensions.width;\n      renderHeight = dimensions.height;\n      // Center the video\n      renderX = Math.round((this.width - renderWidth) / 2);\n      renderY = Math.round((this.height - renderHeight) / 2);\n    } else {\n      // No valid renderConfig: legacy smart fill (height-based)\n      const naturalScale = this.height / videoHeight;\n      const dimensions = this.calculateRenderDimensions(videoWidth, videoHeight, naturalScale);\n      renderX = dimensions.x;\n      renderY = dimensions.y;\n      renderWidth = dimensions.width;\n      renderHeight = dimensions.height;\n    }\n\n    if (crop) {\n      this.ctx.drawImage(\n        videoFrame,\n        crop.x,\n        crop.y,\n        crop.width,\n        crop.height,\n        renderX,\n        renderY,\n        renderWidth,\n        renderHeight\n      );\n    } else {\n      this.ctx.drawImage(videoFrame, renderX, renderY, renderWidth, renderHeight);\n    }\n    // NOTE: Do not close videoFrame - it's managed by RcFrame wrapper\n  }\n\n  private renderImageLayer(layer: ImageLayer): void {\n    const { source, crop, renderConfig, attachmentId } = layer;\n\n    // Handle ImageData by putting it on canvas first\n    if (source instanceof ImageData) {\n      if (crop) {\n        // For ImageData with crop, we need to extract the cropped region\n        const tempCanvas = new OffscreenCanvas(crop.width, crop.height);\n        const tempCtx = tempCanvas.getContext('2d')!;\n        tempCtx.putImageData(source, -crop.x, -crop.y);\n        this.ctx.drawImage(tempCanvas, 0, 0, this.width, this.height);\n      } else {\n        // Put ImageData directly\n        this.ctx.putImageData(source, 0, 0);\n      }\n      return;\n    }\n\n    if (!source) return;\n\n    const imgWidth = source.width;\n    const imgHeight = source.height;\n\n    let renderX: number;\n    let renderY: number;\n    let renderWidth: number;\n    let renderHeight: number;\n\n    // Check if has valid renderConfig (with actual width or height values)\n    const hasValidRenderConfig = !!(\n      renderConfig?.width !== undefined || renderConfig?.height !== undefined\n    );\n\n    if (hasValidRenderConfig) {\n      // Has valid renderConfig: explicit dimensions\n      const dimensions = this.calculateDimensionsFromConfig(imgWidth, imgHeight, renderConfig);\n      renderWidth = dimensions.width;\n      renderHeight = dimensions.height;\n      // Images with renderConfig start at origin (for overlay positioning via transform)\n      renderX = 0;\n      renderY = 0;\n    } else if (attachmentId) {\n      // Attachment without valid renderConfig: use original size, start at origin\n      renderWidth = imgWidth;\n      renderHeight = imgHeight;\n      renderX = 0;\n      renderY = 0;\n    } else {\n      // No renderConfig and not attachment: legacy smart fill (width-based, main track)\n      const naturalScale = this.width / imgWidth;\n      const dimensions = this.calculateRenderDimensions(imgWidth, imgHeight, naturalScale);\n      renderWidth = dimensions.width;\n      renderHeight = dimensions.height;\n      // Center the image\n      renderX = Math.round((this.width - renderWidth) / 2);\n      renderY = Math.round((this.height - renderHeight) / 2);\n    }\n\n    if (crop) {\n      this.ctx.drawImage(\n        source,\n        crop.x,\n        crop.y,\n        crop.width,\n        crop.height,\n        renderX,\n        renderY,\n        renderWidth,\n        renderHeight\n      );\n    } else {\n      this.ctx.drawImage(source, renderX, renderY, renderWidth, renderHeight);\n    }\n  }\n\n  private renderTextLayer(layer: TextLayer): void {\n    const animationType = layer.animation?.type;\n    const hasWordTimings = layer.wordTimings && layer.wordTimings.length > 0;\n\n    const needsWordTimings = ['wordByWord', 'characterKTV', 'wordByWordFancy'].includes(\n      animationType || ''\n    );\n\n    if (needsWordTimings && !hasWordTimings) {\n      renderBasicText(this.ctx, layer, this.width, this.height, this.currentFrame);\n      return;\n    }\n\n    switch (animationType) {\n      case 'wordByWord':\n        renderWordByWord(this.ctx, layer, this.width, this.height, this.currentFrame, this.fps);\n        break;\n      case 'characterKTV':\n        renderCharacterKTV(this.ctx, layer, this.width, this.height, this.currentFrame, this.fps);\n        break;\n      case 'wordByWordFancy':\n        renderWordByWordFancy(\n          this.ctx,\n          layer,\n          this.width,\n          this.height,\n          this.currentFrame,\n          this.fps\n        );\n        break;\n      case 'fade':\n        renderTextWithEntrance(this.ctx, layer, this.width, this.height, this.currentFrame);\n        break;\n      default:\n        renderBasicText(this.ctx, layer, this.width, this.height, this.currentFrame);\n        break;\n    }\n  }\n\n  private applyMask(mask: MaskConfig): void {\n    this.ctx.globalCompositeOperation = mask.invert ? 'source-out' : 'destination-in';\n\n    if (mask.source) {\n      this.ctx.drawImage(mask.source, 0, 0, this.width, this.height);\n    } else if (mask.shape === 'circle') {\n      this.ctx.beginPath();\n      this.ctx.arc(\n        this.width / 2,\n        this.height / 2,\n        Math.min(this.width, this.height) / 2,\n        0,\n        Math.PI * 2\n      );\n      this.ctx.fill();\n    }\n  }\n\n  updateDimensions(width: number, height: number): void {\n    this.width = width;\n    this.height = height;\n    this.ensureHighQualityRendering();\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/workers/stages/compose/{video-compose.worker.C8728Oi3.js → video-compose.worker.Dieo8Oun.js}

@@ -875,14 +875,22 @@ class LayerRenderer {
       if (imageLayer.source) {
         const imgWidth = imageLayer.source.width;
         const imgHeight = imageLayer.source.height;
-        return this.calculateDimensionsFromConfig(imgWidth, imgHeight, imageLayer.renderConfig);
+        const hasValidRenderConfig = !!(imageLayer.renderConfig?.width !== void 0 || imageLayer.renderConfig?.height !== void 0);
+        if (hasValidRenderConfig) {
+          return this.calculateDimensionsFromConfig(imgWidth, imgHeight, imageLayer.renderConfig);
+        }
+        return { width: imgWidth, height: imgHeight };
       }
     } else if (layer.type === "video") {
       const videoLayer = layer;
       const videoFrame = videoLayer.videoFrame;
       const videoWidth = videoFrame.displayWidth || videoFrame.codedWidth;
       const videoHeight = videoFrame.displayHeight || videoFrame.codedHeight;
-      return this.calculateDimensionsFromConfig(videoWidth, videoHeight, videoLayer.renderConfig);
+      const hasValidRenderConfig = !!(videoLayer.renderConfig?.width !== void 0 || videoLayer.renderConfig?.height !== void 0);
+      if (hasValidRenderConfig) {
+        return this.calculateDimensionsFromConfig(videoWidth, videoHeight, videoLayer.renderConfig);
+      }
+      return { width: videoWidth, height: videoHeight };
     }
     return { width: this.width, height: this.height };
   }
@@ -934,7 +942,8 @@ class LayerRenderer {
     let renderY;
     let renderWidth;
     let renderHeight;
-    if (renderConfig) {
+    const hasValidRenderConfig = !!(renderConfig?.width !== void 0 || renderConfig?.height !== void 0);
+    if (hasValidRenderConfig) {
       const dimensions = this.calculateDimensionsFromConfig(videoWidth, videoHeight, renderConfig);
       renderWidth = dimensions.width;
       renderHeight = dimensions.height;
@@ -965,7 +974,7 @@ class LayerRenderer {
     }
   }
   renderImageLayer(layer) {
-    const { source, crop, renderConfig } = layer;
+    const { source, crop, renderConfig, attachmentId } = layer;
     if (source instanceof ImageData) {
       if (crop) {
         const tempCanvas = new OffscreenCanvas(crop.width, crop.height);
@@ -984,12 +993,18 @@ class LayerRenderer {
     let renderY;
     let renderWidth;
     let renderHeight;
-    if (renderConfig) {
+    const hasValidRenderConfig = !!(renderConfig?.width !== void 0 || renderConfig?.height !== void 0);
+    if (hasValidRenderConfig) {
       const dimensions = this.calculateDimensionsFromConfig(imgWidth, imgHeight, renderConfig);
       renderWidth = dimensions.width;
       renderHeight = dimensions.height;
       renderX = 0;
       renderY = 0;
+    } else if (attachmentId) {
+      renderWidth = imgWidth;
+      renderHeight = imgHeight;
+      renderX = 0;
+      renderY = 0;
     } else {
       const naturalScale = this.width / imgWidth;
       const dimensions = this.calculateRenderDimensions(imgWidth, imgHeight, naturalScale);
@@ -2029,12 +2044,18 @@ function materializeLayer(layer, frame, imageMap, globalTimeUs) {
   };
   if (layer.type === "video") {
     const payload = layer.payload;
-    return {
+    const videoLayer = {
       ...baseLayer,
       type: "video",
-      videoFrame: frame,
-      renderConfig: payload.renderConfig
+      videoFrame: frame
     };
+    if (payload.renderConfig) {
+      videoLayer.renderConfig = {
+        ...payload.renderConfig.width !== void 0 && { width: payload.renderConfig.width },
+        ...payload.renderConfig.height !== void 0 && { height: payload.renderConfig.height }
+      };
+    }
+    return videoLayer;
   }
   if (layer.type === "text") {
     const payload = layer.payload;
@@ -2057,9 +2078,14 @@ function materializeLayer(layer, frame, imageMap, globalTimeUs) {
       ...baseLayer,
       type: "image",
       source,
-      attachmentId: payload.attachmentId,
-      renderConfig: payload.renderConfig
+      attachmentId: payload.attachmentId
     };
+    if (payload.renderConfig) {
+      imageLayer.renderConfig = {
+        ...payload.renderConfig.width !== void 0 && { width: payload.renderConfig.width },
+        ...payload.renderConfig.height !== void 0 && { height: payload.renderConfig.height }
+      };
+    }
     if (payload.animation && globalTimeUs !== void 0) {
       const animState = computeAnimationState(payload.animation, globalTimeUs);
       if (!animState.visible) {
@@ -2461,4 +2487,4 @@ export {
   VideoComposeWorker,
   videoCompose_worker as default
 };
-//# sourceMappingURL=video-compose.worker.C8728Oi3.js.map
+//# sourceMappingURL=video-compose.worker.Dieo8Oun.js.map