refactor(core,renderer): bake group scale at parse time

Resolve OOXML group chOff/chExt → ext scale into each descendant's
absolute position and size during parsing, then normalize the group
so childOffset=(0,0) and childExtent=size. Rendering becomes a pure
pass-through: the group emits only its own translate/rotate/flip,
and child elements render at their final stretched dimensions.

Matches the model OnlyOffice uses in CGroupShape.getResultScaleCoefficients
+ Shape.recalculateTransform. Removes the AccumScale plumbing and
foreignObject inverse-scale wrappers that were introduced to
preserve glyph isotropy under a non-uniform group transform;
neither is needed once scale no longer crosses the SVG tree.

Verified against slide 10 of the group-test fixture: stretched
frames render identically while glyphs stay isotropic, and all 148
unit tests pass.

Refs #20, #21

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: tthallos

packages/core/src/parser/SlideParser.ts

@@ -636,6 +636,55 @@ function parseGroup(
   return group
 }
 
+/**
+ * Resolve a group's non-uniform child-coord scale into each descendant's
+ * absolute geometry, then normalize the group so the renderer emits no
+ * inner scale.
+ *
+ * OOXML groups map a child coord rect `[chOff, chOff+chExt]` onto the
+ * outer rect `[off, off+ext]`. When `ext/chExt` isn't 1:1, descendants
+ * should be *drawn* at the scaled size, but their text glyphs should
+ * stay isotropic — PowerPoint stretches the frame, not the glyphs.
+ *
+ * Propagating the scale through an SVG group transform contaminates
+ * every foreignObject underneath (text distorts). Instead we bake the
+ * scale into each child's `position`/`size` here; stroke widths, font
+ * sizes, and margins are left untouched, matching PowerPoint's
+ * behavior. Nested groups recurse: their own `childExtent` stays in
+ * their own child coord space, so re-baking compounds cleanly.
+ */
+function bakeGroupScale(group: GroupElement): void {
+  const cx =
+    group.childExtent.width > 0 ? group.size.width / group.childExtent.width : 1
+  const cy =
+    group.childExtent.height > 0 ? group.size.height / group.childExtent.height : 1
+  const chOffX = group.childOffset.x
+  const chOffY = group.childOffset.y
+
+  const hasTransform = cx !== 1 || cy !== 1 || chOffX !== 0 || chOffY !== 0
+
+  if (hasTransform) {
+    for (const child of group.children) {
+      child.position = {
+        x: (child.position.x - chOffX) * cx,
+        y: (child.position.y - chOffY) * cy,
+      }
+      child.size = {
+        width: child.size.width * cx,
+        height: child.size.height * cy,
+      }
+    }
+  }
+
+  for (const child of group.children) {
+    if (child.type === 'group') bakeGroupScale(child)
+  }
+
+  // Renderer now sees an identity child space.
+  group.childOffset = { x: 0, y: 0 }
+  group.childExtent = { width: group.size.width, height: group.size.height }
+}
+
 // ---- GraphicFrame (table or other) ----
 
 function parseGraphicFrame(
@@ -1418,6 +1467,16 @@ export function parseSlide(
     slide.elements = parseSpTreeChildren(spTree, slideCtx, tagIndex.top)
   }
 
+  // Bake group scales into child geometry. OOXML groups declare a child
+  // coord space via chOff/chExt that differs from the group's outer ext,
+  // producing a (possibly non-uniform) scale for descendants. We resolve
+  // this scale into each child's absolute position/size at parse time
+  // (matching OnlyOffice's model) so the renderer doesn't need to carry
+  // a non-uniform scale through foreignObject boundaries.
+  for (const el of slide.elements) {
+    if (el.type === 'group') bakeGroupScale(el)
+  }
+
   // Parse slide transition
   const transition = parseTransition(sld)
   if (transition) slide.transition = transition

packages/renderer/src/ShapeRenderer.ts

@@ -6,7 +6,6 @@ import type { ShapeElement, LineEnd } from '@pagus-kit/core'
 import { generateShapePath } from '@pagus-kit/core'
 import { renderFill } from './FillRenderer'
 import { renderText } from './TextRenderer'
-import type { AccumScale } from './SlideRenderer'
 import { fmt, ptToPx, dashArray } from './utils/svg'
 
 const LINE_END_SIZE: Record<string, number> = { small: 3, medium: 5, large: 8 }
@@ -91,7 +90,6 @@ export function renderShape(
   genId: () => string,
   fontSubs?: Record<string, string>,
   hiddenParagraphs?: Set<number>,
-  accumScale?: AccumScale,
 ): string {
   const w = shape.size.width
   const h = shape.size.height
@@ -151,7 +149,7 @@ export function renderShape(
   // Text (foreignObject) — NOT flipped, stays readable
   let textEl = ''
   if (shape.textBody && shape.textBody.paragraphs.length > 0) {
-    textEl = renderText(shape.textBody, shape.size, fontSubs, hiddenParagraphs, accumScale)
+    textEl = renderText(shape.textBody, shape.size, fontSubs, hiddenParagraphs)
   }
 
   if (textEl || isLine) {

packages/renderer/src/SlideRenderer.ts

@@ -115,29 +115,13 @@ function buildShadowFilter(shadow: Shadow, defs: string[], genId: () => string):
 
 // ---- Element rendering dispatch ----
 
-/**
- * Accumulated group scale from the root down to this element.
- * When a group's outer `ext` differs from its inner `chExt`, the group applies
- * a non-uniform scale to its descendants. Text glyphs should NOT inherit that
- * non-uniformity (PowerPoint stretches the frame, not the glyphs), so we
- * thread the cumulative scale down and let text-emitting renderers cancel the
- * non-uniform component via an inverse transform.
- */
-export interface AccumScale {
-  x: number
-  y: number
-}
-
-const IDENTITY_SCALE: AccumScale = { x: 1, y: 1 }
-
 function renderElement(
   el: SlideElement,
   defs: string[],
   genId: () => string,
   slideSize: Size,
   fontSubs?: Record<string, string>,
   hiddenIds?: string[],
-  accumScale: AccumScale = IDENTITY_SCALE,
 ): string {
   const transform = buildTransformAttr(el, slideSize.width, slideSize.height)
 
@@ -160,7 +144,7 @@ function renderElement(
 
   switch (el.type) {
     case 'shape':
-      content = renderShape(el, defs, genId, fontSubs, hiddenParagraphs, accumScale)
+      content = renderShape(el, defs, genId, fontSubs, hiddenParagraphs)
       break
     case 'image':
       content = renderImage(el, defs, genId)
@@ -169,13 +153,13 @@ function renderElement(
       content = renderMedia(el)
       break
     case 'table':
-      content = renderTable(el, fontSubs, accumScale)
+      content = renderTable(el, fontSubs)
       break
     case 'chart':
       content = renderChart(el)
       break
     case 'group':
-      content = renderGroup(el, defs, genId, slideSize, fontSubs, hiddenIds, accumScale)
+      content = renderGroup(el, defs, genId, slideSize, fontSubs, hiddenIds)
       break
     default:
       content = ''
@@ -202,46 +186,15 @@ function renderGroup(
   slideSize: Size,
   fontSubs?: Record<string, string>,
   hiddenIds?: string[],
-  accumScale: AccumScale = IDENTITY_SCALE,
 ): string {
-  // Group applies a coordinate space transformation for its children
-  // childOffset and childExtent define the source coordinate space
-  // group's size defines the destination
-  const scaleX =
-    group.childExtent.width > 0
-      ? ptToPx(group.size.width) / ptToPx(group.childExtent.width)
-      : 1
-  const scaleY =
-    group.childExtent.height > 0
-      ? ptToPx(group.size.height) / ptToPx(group.childExtent.height)
-      : 1
-
-  const offsetX = fmt(-ptToPx(group.childOffset.x) * scaleX)
-  const offsetY = fmt(-ptToPx(group.childOffset.y) * scaleY)
-
-  const hasScale = scaleX !== 1 || scaleY !== 1
-  const hasOffset = group.childOffset.x !== 0 || group.childOffset.y !== 0
-
-  let innerTransform = ''
-  if (hasScale) {
-    innerTransform = `translate(${offsetX},${offsetY}) scale(${fmt(scaleX)},${fmt(scaleY)})`
-  } else if (hasOffset) {
-    innerTransform = `translate(${offsetX},${offsetY})`
-  }
-
-  const childAccumScale: AccumScale = hasScale
-    ? { x: accumScale.x * scaleX, y: accumScale.y * scaleY }
-    : accumScale
-
-  const childrenSvg = group.children
-    .map((child) => renderElement(child, defs, genId, slideSize, fontSubs, hiddenIds, childAccumScale))
+  // Child coord-space → outer rect scale is resolved at parse time
+  // (see bakeGroupScale in core). Each child's position/size is already
+  // expressed in the group's outer coord space, so this is a pure
+  // container — only the group's own translate/rotate/flip (applied by
+  // renderElement) are emitted.
+  return group.children
+    .map((child) => renderElement(child, defs, genId, slideSize, fontSubs, hiddenIds))
     .join('')
-
-  if (innerTransform) {
-    return `<g transform="${innerTransform}">${childrenSvg}</g>`
-  }
-
-  return childrenSvg
 }
 
 // ---- Main render function ----

packages/renderer/src/TableRenderer.ts

@@ -5,7 +5,6 @@
 import type { TableElement, TableCell, BorderLine } from '@pagus-kit/core'
 import { fillToCss } from './FillRenderer'
 import { renderTextInline } from './TextRenderer'
-import type { AccumScale } from './SlideRenderer'
 import { fmt, ptToPx, cssStyle } from './utils/svg'
 
 /** Mix a hex color toward white by the given ratio (0 = white, 1 = full color). */
@@ -87,7 +86,7 @@ function renderCell(cell: TableCell, colWidthPx: number, rowHeightPx: number, hi
  * @param table - The table element from the IR
  * @returns SVG foreignObject string containing an HTML table
  */
-export function renderTable(table: TableElement, fontSubs?: Record<string, string>, accumScale?: AccumScale): string {
+export function renderTable(table: TableElement, fontSubs?: Record<string, string>): string {
   const wpx = ptToPx(table.size.width)
   const hpx = ptToPx(table.size.height)
 
@@ -143,28 +142,14 @@ export function renderTable(table: TableElement, fontSubs?: Record<string, strin
     'table-layout': 'fixed',
   })
 
-  // Non-uniform group scale compensation (see TextRenderer for rationale).
-  const sx = accumScale?.x ?? 1
-  const sy = accumScale?.y ?? 1
-  const needsCompensation = sx !== sy && sx > 0 && sy > 0
-  const s = needsCompensation ? Math.min(sx, sy) : 1
-  const invX = needsCompensation ? s / sx : 1
-  const invY = needsCompensation ? s / sy : 1
-  const expX = needsCompensation ? sx / s : 1
-  const expY = needsCompensation ? sy / s : 1
-
-  const fo =
-    `<foreignObject x="0" y="0" width="${fmt(wpx * expX)}" height="${fmt(hpx * expY)}">` +
-    `<table xmlns="http://www.w3.org/1999/xhtml" style="${tableStyle}">` +
-    colgroup +
-    `<tbody>` +
-    rowsHtml +
-    `</tbody>` +
-    `</table>` +
-    `</foreignObject>`
-
-  if (needsCompensation) {
-    return `<g transform="scale(${fmt(invX)},${fmt(invY)})">${fo}</g>`
-  }
-  return fo
+  return [
+    `<foreignObject x="0" y="0" width="${fmt(wpx)}" height="${fmt(hpx)}">`,
+    `<table xmlns="http://www.w3.org/1999/xhtml" style="${tableStyle}">`,
+    colgroup,
+    `<tbody>`,
+    rowsHtml,
+    `</tbody>`,
+    `</table>`,
+    `</foreignObject>`,
+  ].join('')
 }

packages/renderer/src/TextRenderer.ts

@@ -3,7 +3,6 @@
  */
 
 import type { TextBody, TextRun, Paragraph, Size, ResolvedColor, LineSpacing } from '@pagus-kit/core'
-import type { AccumScale } from './SlideRenderer'
 import { escapeHtml, ptToPx, fmt, cssStyle } from './utils/svg'
 
 function colorToCss(color: ResolvedColor): string {
@@ -367,7 +366,6 @@ export function renderText(
   containerSize: Size,
   fontSubs?: Record<string, string>,
   hiddenParagraphs?: Set<number>,
-  accumScale?: AccumScale,
 ): string {
   const { bodyProperties, paragraphs } = textBody
   const { anchor, margins } = bodyProperties
@@ -455,33 +453,13 @@ export function renderText(
 
   const shrinkAttr = isShrinkNoScale ? ' data-pagus-shrink-fit="1"' : ''
 
-  // Non-uniform group scale compensation.
-  // PowerPoint stretches the shape frame but keeps text glyphs isotropic. SVG
-  // propagates a non-uniform parent scale into the foreignObject HTML, which
-  // would horizontally (or vertically) distort text. To neutralize the
-  // non-uniform component while preserving the overall size chosen by the
-  // smaller axis, we wrap the foreignObject in an inverse scale and expand
-  // its intrinsic dimensions so the post-wrap box still fills the frame.
-  const sx = accumScale?.x ?? 1
-  const sy = accumScale?.y ?? 1
-  const needsCompensation = sx !== sy && sx > 0 && sy > 0
-  const s = needsCompensation ? Math.min(sx, sy) : 1
-  const invX = needsCompensation ? s / sx : 1
-  const invY = needsCompensation ? s / sy : 1
-  const expX = needsCompensation ? sx / s : 1
-  const expY = needsCompensation ? sy / s : 1
-
-  const fo =
-    `<foreignObject x="0" y="${fmt(foY * expY)}" width="${fmt(containerWPx * expX)}" height="${fmt(foHeight * expY)}" overflow="visible">` +
-    `<div xmlns="http://www.w3.org/1999/xhtml"${shrinkAttr} style="${wrapperStyle}">` +
-    html +
-    `</div>` +
-    `</foreignObject>`
-
-  if (needsCompensation) {
-    return `<g transform="scale(${fmt(invX)},${fmt(invY)})">${fo}</g>`
-  }
-  return fo
+  return [
+    `<foreignObject x="0" y="${fmt(foY)}" width="${fmt(containerWPx)}" height="${fmt(foHeight)}" overflow="visible">`,
+    `<div xmlns="http://www.w3.org/1999/xhtml"${shrinkAttr} style="${wrapperStyle}">`,
+    html,
+    `</div>`,
+    `</foreignObject>`,
+  ].join('')
 }
 
 /**