Function renderGroup

apps/sim/lib/pptx-renderer/renderer/group-renderer.ts:25–172

(
  node: GroupNodeData,
  ctx: RenderContext,
  renderNode: (childNode: BaseNodeData, ctx: RenderContext) => HTMLElement
)

 * @param renderNode A callback to render individual child nodes (avoids circular deps)
 */
export function renderGroup(
  node: GroupNodeData,
  ctx: RenderContext,
  renderNode: (childNode: BaseNodeData, ctx: RenderContext) => HTMLElement
): 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`

  // Apply rotation transform
  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(' ')
    wrapper.style.transformOrigin = 'center center'
  }

  const chOff = node.childOffset
  const chExt = node.childExtent
  const groupW = node.size.w
  const groupH = node.size.h

  // Resolve group fill from grpSpPr for children that use a:grpFill
  const grpSpPr = node.source.child('grpSpPr')
  const childCtx: RenderContext = { ...ctx }
  if (grpSpPr.exists()) {
    // Check if the group itself has a fill (solidFill, gradFill, etc.)
    // that children can inherit via grpFill
    const FILL_TAGS = ['solidFill', 'gradFill', 'blipFill', 'pattFill']
    for (const tag of FILL_TAGS) {
      if (grpSpPr.child(tag).exists()) {
        childCtx.groupFillNode = grpSpPr
        break
      }
    }
    // If the group itself uses grpFill, propagate the parent's group fill
    if (!childCtx.groupFillNode && grpSpPr.child('grpFill').exists() && ctx.groupFillNode) {
      childCtx.groupFillNode = ctx.groupFillNode
    }
  }

  // Cycle diagram: 3 pie sectors + 3 circular arrows → one circle (3 equal 120° sectors) centered in the diagram.
  const parsedChildren = new Map<number, BaseNodeData | undefined>()
  const parseByIndex = (index: number): BaseNodeData | undefined => {
    if (!parsedChildren.has(index)) {
      parsedChildren.set(index, parseGroupChild(node.children[index], ctx))
    }