Function renderShape

apps/sim/lib/pptx-renderer/renderer/shape-renderer.ts:288–1522

(node: ShapeNodeData, ctx: RenderContext)

 * Render a shape node into an absolutely-positioned HTML element with SVG geometry.
 */
export function renderShape(node: ShapeNodeData, 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`
  // Line-like: preset line/connector, or cxnSp (connection shape), or flat extent (one dimension 0)
  const presetKey = node.presetGeometry?.toLowerCase() ?? ''
  const outlineOnlyPresets = new Set([
    'arc',
    'leftbracket',
    'rightbracket',
    'leftbrace',
    'rightbrace',
    'bracketpair',
    'bracepair',
  ])
  const presetIsLine =
    !!presetKey &&
    (presetKey === 'line' ||
      presetKey === 'lineinv' ||
      presetKey.includes('connector') ||
      outlineOnlyPresets.has(presetKey))
  const isConnectorShape = node.source.localName === 'cxnSp'
  const flatExtent =
    (node.size.w > 0 && node.size.h === 0) || (node.size.w === 0 && node.size.h > 0)
  const isLineLike = presetIsLine || isConnectorShape || flatExtent
  const minH = isLineLike && node.size.h === 0 ? 1 : node.size.h
  const minW = isLineLike && node.size.w === 0 ? 1 : node.size.w
  wrapper.style.height = `${minH}px`
  if (node.size.w === 0) wrapper.style.width = `${minW}px`
  wrapper.style.overflow = 'visible'
  // Apply transforms (rotation + flip)
  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(' ')
  }

  const w = node.size.w
  const h = node.size.h
  // For path generation, pass original w/h so preset functions can detect zero-extent
  // directions (e.g. line preset draws vertical when w=0, horizontal when h=0).
  // For SVG viewport, use minW/minH to guarantee a visible container.
  const pathW = w
  const pathH = h

  // Style references (needed for path fallback and line resolution)
  const styleNode = node.source.child('style')
  const lnRef = styleNode.exists() ? styleNode.child('lnRef') : undefined