chore: import upstream snapshot with attribution

apps/sim/lib/pptx-renderer/renderer/image-renderer.ts

@@ -0,0 +1,656 @@
+/**
+ * Image renderer — converts PicNodeData into positioned HTML image/video/audio elements.
+ */
+
+import type { PicNodeData } from '../model/nodes/pic-node'
+import { hexToRgb } from '../utils/color'
+import { parseEmfContent } from '../utils/emf-parser'
+import { getOrCreateBlobUrl, resolveMediaPath } from '../utils/media'
+import { renderPdfToImage } from '../utils/pdf-renderer'
+import type { RenderContext } from './render-context'
+import { resolveColor } from './style-resolver'
+
+/**
+ * Check if a file extension is an unsupported legacy format (WMF only now; EMF is handled).
+ */
+function isUnsupportedFormat(path: string): boolean {
+  const ext = path.split('.').pop()?.toLowerCase() || ''
+  return ext === 'wmf'
+}
+
+/**
+ * Check if a file path is an EMF image.
+ */
+function isEmfFormat(path: string): boolean {
+  const ext = path.split('.').pop()?.toLowerCase() || ''
+  return ext === 'emf'
+}
+
+// ---------------------------------------------------------------------------
+// Image Rendering
+// ---------------------------------------------------------------------------
+
+/**
+ * Render a picture node into an absolutely-positioned HTML element.
+ *
+ * Handles:
+ * - Standard images (png, jpg, gif, svg, bmp)
+ * - Unsupported formats (emf, wmf) with placeholder
+ * - Video elements with controls
+ * - Audio elements with controls
+ * - Crop via CSS clip-path
+ * - Rotation and flip transforms
+ */
+export function renderImage(node: PicNodeData, ctx: RenderContext): HTMLElement {
+  const wrapper = document.createElement('div')
+  wrapper.style.position = 'absolute'
+  wrapper.style.left = `${node.position.x}px`
+  wrapper.style.top = `${node.position.y}px`
+  wrapper.style.width = `${node.size.w}px`
+  wrapper.style.height = `${node.size.h}px`
+  wrapper.style.overflow = 'hidden'
+
+  // Apply transforms
+  const transforms: string[] = []
+  if (node.rotation !== 0) {
+    transforms.push(`rotate(${node.rotation}deg)`)
+  }
+  if (node.flipH) {
+    transforms.push('scaleX(-1)')
+  }
+  if (node.flipV) {
+    transforms.push('scaleY(-1)')
+  }
+  if (transforms.length > 0) {
+    wrapper.style.transform = transforms.join(' ')
+  }
+
+  // ---- Handle video ----
+  if (node.isVideo) {
+    renderVideo(node, ctx, wrapper)
+    return wrapper
+  }
+
+  // ---- Handle audio ----
+  if (node.isAudio) {
+    renderAudio(node, ctx, wrapper)
+    return wrapper
+  }
+
+  // ---- Resolve image data ----
+  const embedId = node.blipEmbed
+  if (!embedId) {
+    renderPlaceholder(wrapper, 'No image data')
+    return wrapper
+  }
+
+  const rel = ctx.slide.rels.get(embedId)
+  if (!rel) {
+    renderPlaceholder(wrapper, 'Missing image reference')
+    return wrapper
+  }
+
+  const mediaPath = resolveMediaPath(rel.target)
+
+  // Check for unsupported formats (WMF)
+  if (isUnsupportedFormat(mediaPath)) {
+    renderUnsupportedPlaceholder(wrapper, mediaPath)
+    return wrapper
+  }
+
+  const data = ctx.presentation.media.get(mediaPath)
+  if (!data) {
+    renderPlaceholder(wrapper, 'Image not found')
+    return wrapper
+  }
+
+  // Handle EMF images — extract embedded PDF/bitmap content
+  if (isEmfFormat(mediaPath)) {
+    const emfData = data instanceof Uint8Array ? data : new Uint8Array(data)
+    renderEmf(emfData, node, ctx, wrapper, mediaPath)
+    return wrapper
+  }
+
+  // Create blob URL (with caching)
+  const url = getOrCreateBlobUrl(mediaPath, data, ctx.mediaUrlCache)
+
+  // Create image element
+  const img = document.createElement('img')
+  img.src = url
+  img.style.width = '100%'
+  img.style.height = '100%'
+  img.style.objectFit = 'fill'
+  img.style.display = 'block'
+  img.draggable = false
+
+  // Apply crop if present.
+  // OOXML srcRect defines what portion of the source image is cropped away.
+  // The REMAINING visible region must stretch to fill the entire shape bounding box.
+  // We achieve this by scaling the <img> larger than the wrapper and offsetting it,
+  // relying on the wrapper's overflow:hidden to clip.
+  if (node.crop) {
+    const { top, right, bottom, left } = node.crop
+    // Visible fraction of original image in each dimension
+    const visibleW = 1 - left - right
+    const visibleH = 1 - top - bottom
+    // Guard against degenerate crops (<=0 visible)
+    if (visibleW > 0.001 && visibleH > 0.001) {
+      // Scale image so the visible portion fills the wrapper exactly
+      const scaleX = 1 / visibleW // e.g. if 95.4% visible → scale to ~104.8%
+      const scaleY = 1 / visibleH
+      // Use pixel values for offset — CSS margin-top/margin-left percentages are
+      // both relative to the containing block's WIDTH (not height), which causes
+      // incorrect offsets for non-square wrappers with significant crops.
+      const wrapperW = node.size.w
+      const wrapperH = node.size.h
+      img.style.width = `${(scaleX * wrapperW).toFixed(4)}px`
+      img.style.height = `${(scaleY * wrapperH).toFixed(4)}px`
+      img.style.marginLeft = `${(-left * scaleX * wrapperW).toFixed(4)}px`
+      img.style.marginTop = `${(-top * scaleY * wrapperH).toFixed(4)}px`
+    }
+  }
+
+  // --- Blip effects ---
+  const blip = node.source.child('blipFill').child('blip')
+  const blipOpacity = resolveBlipOpacity(blip)
+  if (blipOpacity < 1) {
+    wrapper.style.opacity = `${Number(blipOpacity.toFixed(4))}`
+  }
+
+  // Duotone: recolor image (dark→color1, light→color2)
+  const duotone = blip.child('duotone')
+  if (duotone.exists()) {
+    applyDuotoneFilter(duotone, ctx, img, wrapper)
+  }
+
+  // Luminance: brightness/contrast adjustment
+  const lum = blip.child('lum')
+  if (lum.exists()) {
+    applyLumEffect(lum, img)
+  }
+
+  // BiLevel: threshold to black/white
+  const biLevel = blip.child('biLevel')
+  if (biLevel.exists()) {
+    applyBiLevelEffect(biLevel, img)
+  }
+
+  wrapper.appendChild(img)
+  return wrapper
+}
+
+/**
+ * Resolve overall image opacity from OOXML blip alpha modifiers.
+ *
+ * Supported today:
+ * - alphaModFix amt="N"
+ * - alphaMod val="N"
+ * - alphaOff val="N"
+ */
+function resolveBlipOpacity(blip: SafeXmlNode): number {
+  let alpha = 1
+
+  const alphaModFix = blip.child('alphaModFix')
+  if (alphaModFix.exists()) {
+    alpha *= (alphaModFix.numAttr('amt') ?? 100000) / 100000
+  }
+
+  const alphaMod = blip.child('alphaMod')
+  if (alphaMod.exists()) {
+    alpha *= (alphaMod.numAttr('val') ?? 100000) / 100000
+  }
+
+  const alphaOff = blip.child('alphaOff')
+  if (alphaOff.exists()) {
+    alpha += (alphaOff.numAttr('val') ?? 0) / 100000
+  }
+
+  return Math.max(0, Math.min(1, alpha))
+}
+
+/**
+ * Render a video element inside the wrapper.
+ */
+function renderVideo(node: PicNodeData, ctx: RenderContext, wrapper: HTMLElement): void {
+  // Try to get video URL from mediaRId
+  const videoUrl = resolveMediaUrl(node.mediaRId, ctx)
+
+  // Also try to show poster image from blipEmbed
+  let posterUrl: string | undefined
+  if (node.blipEmbed) {
+    const rel = ctx.slide.rels.get(node.blipEmbed)
+    if (rel) {
+      const mediaPath = resolveMediaPath(rel.target)
+      const data = ctx.presentation.media.get(mediaPath)
+      if (data && !isUnsupportedFormat(mediaPath)) {
+        posterUrl = getOrCreateBlobUrl(mediaPath, data, ctx.mediaUrlCache)
+      }
+    }
+  }
+
+  if (videoUrl) {
+    const video = document.createElement('video')
+    video.src = videoUrl
+    video.controls = true
+    video.style.width = '100%'
+    video.style.height = '100%'
+    video.style.objectFit = 'contain'
+    video.style.backgroundColor = '#000'
+    if (posterUrl) {
+      video.poster = posterUrl
+    }
+    wrapper.appendChild(video)
+  } else if (posterUrl) {
+    // No video data available — show poster with play overlay
+    const img = document.createElement('img')
+    img.src = posterUrl
+    img.style.width = '100%'
+    img.style.height = '100%'
+    img.style.objectFit = 'fill'
+    wrapper.appendChild(img)
+
+    const overlay = document.createElement('div')
+    overlay.style.position = 'absolute'
+    overlay.style.inset = '0'
+    overlay.style.display = 'flex'
+    overlay.style.alignItems = 'center'
+    overlay.style.justifyContent = 'center'
+    overlay.style.backgroundColor = 'rgba(0,0,0,0.3)'
+    overlay.style.color = '#fff'
+    overlay.style.fontSize = '24px'
+    overlay.textContent = '\u25B6' // play symbol
+    wrapper.appendChild(overlay)
+  } else {
+    renderPlaceholder(wrapper, 'Video')
+  }
+}
+
+/**
+ * Render an audio element inside the wrapper.
+ */
+function renderAudio(node: PicNodeData, ctx: RenderContext, wrapper: HTMLElement): void {
+  const audioUrl = resolveMediaUrl(node.mediaRId, ctx)
+
+  if (audioUrl) {
+    // Show poster image if available
+    if (node.blipEmbed) {
+      const rel = ctx.slide.rels.get(node.blipEmbed)
+      if (rel) {
+        const mediaPath = resolveMediaPath(rel.target)
+        const data = ctx.presentation.media.get(mediaPath)
+        if (data && !isUnsupportedFormat(mediaPath)) {
+          const cached = getOrCreateBlobUrl(mediaPath, data, ctx.mediaUrlCache)
+          const img = document.createElement('img')
+          img.src = cached
+          img.style.width = '100%'
+          img.style.height = 'calc(100% - 32px)'
+          img.style.objectFit = 'contain'
+          wrapper.appendChild(img)
+        }
+      }
+    }
+
+    const audio = document.createElement('audio')
+    audio.src = audioUrl
+    audio.controls = true
+    audio.style.width = '100%'
+    audio.style.position = 'absolute'
+    audio.style.bottom = '0'
+    audio.style.left = '0'
+    wrapper.appendChild(audio)
+  } else {
+    renderPlaceholder(wrapper, 'Audio')
+  }
+}
+
+/**
+ * Resolve a media URL from a relationship ID.
+ */
+function resolveMediaUrl(rId: string | undefined, ctx: RenderContext): string | undefined {
+  if (!rId) return undefined
+
+  const rel = ctx.slide.rels.get(rId)
+  if (!rel) return undefined
+
+  // Check if target is an external URL
+  if (rel.target.startsWith('http://') || rel.target.startsWith('https://')) {
+    return rel.target
+  }
+
+  // Resolve from embedded media
+  const mediaPath = resolveMediaPath(rel.target)
+  const data = ctx.presentation.media.get(mediaPath)
+  if (!data) return undefined
+
+  return getOrCreateBlobUrl(mediaPath, data, ctx.mediaUrlCache)
+}
+
+/**
+ * Render a placeholder div for missing or error content.
+ */
+function renderPlaceholder(wrapper: HTMLElement, message: string): void {
+  const placeholder = document.createElement('div')
+  placeholder.style.width = '100%'
+  placeholder.style.height = '100%'
+  placeholder.style.display = 'flex'
+  placeholder.style.alignItems = 'center'
+  placeholder.style.justifyContent = 'center'
+  placeholder.style.backgroundColor = '#f0f0f0'
+  placeholder.style.color = '#888'
+  placeholder.style.fontSize = '12px'
+  placeholder.style.border = '1px dashed #ccc'
+  placeholder.textContent = message
+  wrapper.appendChild(placeholder)
+}
+
+/**
+ * Render a placeholder for unsupported image formats (WMF).
+ */
+function renderUnsupportedPlaceholder(wrapper: HTMLElement, path: string): void {
+  const ext = path.split('.').pop()?.toUpperCase() || 'Unknown'
+  const placeholder = document.createElement('div')
+  placeholder.style.width = '100%'
+  placeholder.style.height = '100%'
+  placeholder.style.display = 'flex'
+  placeholder.style.flexDirection = 'column'
+  placeholder.style.alignItems = 'center'
+  placeholder.style.justifyContent = 'center'
+  placeholder.style.backgroundColor = '#f5f5f5'
+  placeholder.style.color = '#999'
+  placeholder.style.fontSize = '11px'
+  placeholder.style.border = '1px dashed #ddd'
+
+  const icon = document.createElement('div')
+  icon.style.fontSize = '24px'
+  icon.style.marginBottom = '4px'
+  icon.textContent = '\uD83D\uDDBC' // framed picture emoji
+
+  const label = document.createElement('div')
+  label.textContent = `Unsupported format: ${ext}`
+
+  placeholder.appendChild(icon)
+  placeholder.appendChild(label)
+  wrapper.appendChild(placeholder)
+}
+
+// ---------------------------------------------------------------------------
+// EMF Rendering
+// ---------------------------------------------------------------------------
+
+/**
+ * Render EMF content by extracting embedded PDF or bitmap data.
+ */
+function renderEmf(
+  data: Uint8Array,
+  node: PicNodeData,
+  ctx: RenderContext,
+  wrapper: HTMLElement,
+  mediaPath: string
+): void {
+  const content = parseEmfContent(data)
+
+  switch (content.type) {
+    case 'pdf':
+      renderEmfPdf(content.data, wrapper, node, ctx, mediaPath)
+      break
+    case 'bitmap':
+      renderEmfBitmap(content.imageData, wrapper, ctx, mediaPath)
+      break
+    case 'empty':
+      // Render nothing — transparent placeholder
+      break
+    case 'unsupported':
+      renderUnsupportedPlaceholder(wrapper, mediaPath)
+      break
+  }
+}
+
+/**
+ * Render an embedded PDF from EMF using pdfjs-dist.
+ * Populates the wrapper asynchronously — the wrapper is returned immediately.
+ */
+function renderEmfPdf(
+  pdfData: Uint8Array,
+  wrapper: HTMLElement,
+  node: PicNodeData,
+  ctx: RenderContext,
+  mediaPath: string
+): void {
+  const cacheKey = `${mediaPath}:emf-pdf`
+  const cached = ctx.mediaUrlCache.get(cacheKey)
+  if (cached) {
+    wrapper.appendChild(createFillImage(cached))
+    return
+  }
+
+  renderPdfToImage(pdfData, node.size.w, node.size.h)
+    .then((url) => {
+      if (url) {
+        ctx.mediaUrlCache.set(cacheKey, url)
+        wrapper.appendChild(createFillImage(url))
+      }
+    })
+    .catch(() => {
+      // PDF rendering failed — leave wrapper empty (transparent)
+    })
+}
+
+/**
+ * Render an embedded DIB bitmap from EMF.
+ */
+function renderEmfBitmap(
+  imageData: ImageData,
+  wrapper: HTMLElement,
+  ctx: RenderContext,
+  mediaPath: string
+): void {
+  const cacheKey = `${mediaPath}:emf-bitmap`
+  const cached = ctx.mediaUrlCache.get(cacheKey)
+  if (cached) {
+    wrapper.appendChild(createFillImage(cached))
+    return
+  }
+
+  const canvas = document.createElement('canvas')
+  canvas.width = imageData.width
+  canvas.height = imageData.height
+  const canvasCtx = canvas.getContext('2d')
+  if (!canvasCtx) return
+
+  canvasCtx.putImageData(imageData, 0, 0)
+  canvas.toBlob((blob) => {
+    if (!blob) return
+    const url = URL.createObjectURL(blob)
+    ctx.mediaUrlCache.set(cacheKey, url)
+    wrapper.appendChild(createFillImage(url))
+  }, 'image/png')
+}
+
+/**
+ * Create an <img> element that fills its container.
+ */
+function createFillImage(url: string): HTMLImageElement {
+  const img = document.createElement('img')
+  img.src = url
+  img.style.width = '100%'
+  img.style.height = '100%'
+  img.style.objectFit = 'fill'
+  img.style.display = 'block'
+  img.draggable = false
+  return img
+}
+
+// ---------------------------------------------------------------------------
+// Duotone Effect
+// ---------------------------------------------------------------------------
+
+import type { SafeXmlNode } from '../parser/xml-parser'
+
+/**
+ * Apply a duotone effect to an image via canvas pixel manipulation.
+ *
+ * OOXML `<a:duotone>` contains two color children (dark and light).
+ * The image is converted to grayscale, then black→color1, white→color2.
+ */
+function applyDuotoneFilter(
+  duotone: SafeXmlNode,
+  ctx: RenderContext,
+  img: HTMLImageElement,
+  _wrapper: HTMLElement
+): void {
+  // Extract the two colors (first = dark, second = light)
+  const colorChildren = duotone.allChildren()
+  if (colorChildren.length < 2) return
+
+  const { color: c1 } = resolveColor(colorChildren[0], ctx)
+  const { color: c2 } = resolveColor(colorChildren[1], ctx)
+  if (!c1 || !c2) return
+
+  const hex1 = c1.startsWith('#') ? c1 : `#${c1}`
+  const hex2 = c2.startsWith('#') ? c2 : `#${c2}`
+  const rgb1 = hexToRgb(hex1)
+  const rgb2 = hexToRgb(hex2)
+
+  // After the image loads, redraw it through a canvas with duotone applied
+  const apply = () => {
+    const w = img.naturalWidth
+    const h = img.naturalHeight
+    if (!w || !h) return
+
+    const canvas = document.createElement('canvas')
+    canvas.width = w
+    canvas.height = h
+    const c = canvas.getContext('2d')
+    if (!c) return
+
+    c.drawImage(img, 0, 0)
+    const imageData = c.getImageData(0, 0, w, h)
+    const data = imageData.data
+
+    for (let i = 0; i < data.length; i += 4) {
+      // Convert to grayscale using luminance weights
+      const gray = (0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2]) / 255
+      // Linearly interpolate between color1 (dark) and color2 (light)
+      data[i] = Math.round(rgb1.r + (rgb2.r - rgb1.r) * gray)
+      data[i + 1] = Math.round(rgb1.g + (rgb2.g - rgb1.g) * gray)
+      data[i + 2] = Math.round(rgb1.b + (rgb2.b - rgb1.b) * gray)
+      // Alpha channel (data[i+3]) is preserved
+    }
+
+    c.putImageData(imageData, 0, 0)
+    img.src = canvas.toDataURL()
+  }
+
+  if (img.complete && img.naturalWidth) {
+    apply()
+  } else {
+    img.addEventListener('load', apply, { once: true })
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Luminance Effect
+// ---------------------------------------------------------------------------
+
+/**
+ * Apply a luminance (brightness/contrast) effect to an image.
+ *
+ * OOXML `<a:lum>` supports `bright` (additive brightness offset, 0–100000 = 0–100%)
+ * and `contrast` (multiplicative contrast, -100000 to 100000).
+ * e.g. bright="100000" makes the entire image white (preserving alpha).
+ */
+function applyLumEffect(lum: SafeXmlNode, img: HTMLImageElement): void {
+  const bright = (lum.numAttr('bright') ?? 0) / 100000 // 0–1
+  const contrast = (lum.numAttr('contrast') ?? 0) / 100000 // -1 to 1
+
+  if (bright === 0 && contrast === 0) return
+
+  const apply = () => {
+    const w = img.naturalWidth
+    const h = img.naturalHeight
+    if (!w || !h) return
+
+    const canvas = document.createElement('canvas')
+    canvas.width = w
+    canvas.height = h
+    const c = canvas.getContext('2d')
+    if (!c) return
+
+    c.drawImage(img, 0, 0)
+    const imageData = c.getImageData(0, 0, w, h)
+    const data = imageData.data
+
+    for (let i = 0; i < data.length; i += 4) {
+      for (let ch = 0; ch < 3; ch++) {
+        // Normalize to 0–1
+        let v = data[i + ch] / 255
+        // Apply contrast (expand/compress around 0.5)
+        if (contrast !== 0) {
+          v = 0.5 + (v - 0.5) * (1 + contrast)
+        }
+        // Apply additive brightness offset
+        v += bright
+        data[i + ch] = Math.round(Math.max(0, Math.min(255, v * 255)))
+      }
+      // Alpha preserved
+    }
+
+    c.putImageData(imageData, 0, 0)
+    img.src = canvas.toDataURL()
+  }
+
+  if (img.complete && img.naturalWidth) {
+    apply()
+  } else {
+    img.addEventListener('load', apply, { once: true })
+  }
+}
+
+// ---------------------------------------------------------------------------
+// BiLevel Effect
+// ---------------------------------------------------------------------------
+
+/**
+ * Apply a bi-level (threshold) effect to an image.
+ *
+ * OOXML `<a:biLevel thresh="25000">` converts the image to black and white.
+ * Each pixel's luminance is compared to the threshold (0–100000 = 0–100%).
+ * Pixels above become white, pixels below become black. Alpha is preserved.
+ */
+function applyBiLevelEffect(biLevel: SafeXmlNode, img: HTMLImageElement): void {
+  const thresh = (biLevel.numAttr('thresh') ?? 50000) / 100000 // 0–1
+
+  const apply = () => {
+    const w = img.naturalWidth
+    const h = img.naturalHeight
+    if (!w || !h) return
+
+    const canvas = document.createElement('canvas')
+    canvas.width = w
+    canvas.height = h
+    const c = canvas.getContext('2d')
+    if (!c) return
+
+    c.drawImage(img, 0, 0)
+    const imageData = c.getImageData(0, 0, w, h)
+    const data = imageData.data
+
+    for (let i = 0; i < data.length; i += 4) {
+      const gray = (0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2]) / 255
+      const val = gray >= thresh ? 255 : 0
+      data[i] = val
+      data[i + 1] = val
+      data[i + 2] = val
+      // Alpha preserved
+    }
+
+    c.putImageData(imageData, 0, 0)
+    img.src = canvas.toDataURL()
+  }
+
+  if (img.complete && img.naturalWidth) {
+    apply()
+  } else {
+    img.addEventListener('load', apply, { once: true })
+  }
+}