修复UI锚点溢出错误优先级
先校验锚点能否转换为 CSS 百分比,再校验 min/max 排序。 保留极端有限锚点的具体溢出错误,避免被通用排序错误覆盖。
This commit is contained in:
@@ -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]),
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user