diff --git a/apps/ai-game-creator-shell/src/features/ui-editor/utils/transform/tf2css.ts b/apps/ai-game-creator-shell/src/features/ui-editor/utils/transform/tf2css.ts index adee581a1..82b51c221 100644 --- a/apps/ai-game-creator-shell/src/features/ui-editor/utils/transform/tf2css.ts +++ b/apps/ai-game-creator-shell/src/features/ui-editor/utils/transform/tf2css.ts @@ -69,6 +69,18 @@ function toCssLength(percentage: number, pixelOffset: number): string { */ export function tf2css(transform: Transform): CSSProperties { assertFiniteTransform(transform); + // Keep conversion errors specific even when an extreme anchor also happens + // to violate the min/max ordering constraint. + const left = toPercentage(transform.anchor_min[0], 'Transform.anchor_min[0]'); + const top = toPercentage(transform.anchor_min[1], 'Transform.anchor_min[1]'); + const right = toRemainingPercentage( + transform.anchor_max[0], + 'Transform.anchor_max[0]', + ); + const bottom = toRemainingPercentage( + transform.anchor_max[1], + 'Transform.anchor_max[1]', + ); if ( transform.anchor_min[0] > transform.anchor_max[0] || transform.anchor_min[1] > transform.anchor_max[1] @@ -78,21 +90,9 @@ export function tf2css(transform: Transform): CSSProperties { return { position: 'absolute', - left: toCssLength( - toPercentage(transform.anchor_min[0], 'Transform.anchor_min[0]'), - transform.offset_min[0], - ), - top: toCssLength( - toPercentage(transform.anchor_min[1], 'Transform.anchor_min[1]'), - transform.offset_min[1], - ), - right: toCssLength( - toRemainingPercentage(transform.anchor_max[0], 'Transform.anchor_max[0]'), - -transform.offset_max[0], - ), - bottom: toCssLength( - toRemainingPercentage(transform.anchor_max[1], 'Transform.anchor_max[1]'), - -transform.offset_max[1], - ), + left: toCssLength(left, transform.offset_min[0]), + top: toCssLength(top, transform.offset_min[1]), + right: toCssLength(right, -transform.offset_max[0]), + bottom: toCssLength(bottom, -transform.offset_max[1]), }; }