修复UI锚点溢出错误优先级

先校验锚点能否转换为 CSS 百分比,再校验 min/max 排序。

保留极端有限锚点的具体溢出错误,避免被通用排序错误覆盖。
This commit is contained in:
2026-08-19 14:38:33 +08:00
parent 6af962cde3
commit d96f081a44
@@ -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]),
};
}