TanTan
e311ca3275
Build NapCat Artifacts / Windows Loader Test (push) Canceled after 0s
Build NapCat Artifacts / Type Check & Test (push) Canceled after 0s
Build NapCat Artifacts / Build NapCat.Framework (push) Canceled after 0s
Build NapCat Artifacts / Build NapCat.Shell (push) Canceled after 0s
42 lines
1.5 KiB
Plaintext
42 lines
1.5 KiB
Plaintext
import { px } from 'motion-dom';
|
|
|
|
function pixelsToPercent(pixels, axis) {
|
|
if (axis.max === axis.min)
|
|
return 0;
|
|
return (pixels / (axis.max - axis.min)) * 100;
|
|
}
|
|
/**
|
|
* We always correct borderRadius as a percentage rather than pixels to reduce paints.
|
|
* For example, if you are projecting a box that is 100px wide with a 10px borderRadius
|
|
* into a box that is 200px wide with a 20px borderRadius, that is actually a 10%
|
|
* borderRadius in both states. If we animate between the two in pixels that will trigger
|
|
* a paint each time. If we animate between the two in percentage we'll avoid a paint.
|
|
*/
|
|
const correctBorderRadius = {
|
|
correct: (latest, node) => {
|
|
if (!node.target)
|
|
return latest;
|
|
/**
|
|
* If latest is a string, if it's a percentage we can return immediately as it's
|
|
* going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number.
|
|
*/
|
|
if (typeof latest === "string") {
|
|
if (px.test(latest)) {
|
|
latest = parseFloat(latest);
|
|
}
|
|
else {
|
|
return latest;
|
|
}
|
|
}
|
|
/**
|
|
* If latest is a number, it's a pixel value. We use the current viewportBox to calculate that
|
|
* pixel value as a percentage of each axis
|
|
*/
|
|
const x = pixelsToPercent(latest, node.target.x);
|
|
const y = pixelsToPercent(latest, node.target.y);
|
|
return `${x}% ${y}%`;
|
|
},
|
|
};
|
|
|
|
export { correctBorderRadius, pixelsToPercent };
|