diff --git a/change/react-native-windows-621a7e8e-3a57-4835-8f3c-bf3dce559da8.json b/change/react-native-windows-621a7e8e-3a57-4835-8f3c-bf3dce559da8.json new file mode 100644 index 00000000000..cda5224c121 --- /dev/null +++ b/change/react-native-windows-621a7e8e-3a57-4835-8f3c-bf3dce559da8.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Some fixes for rounded borders", + "packageName": "react-native-windows", + "email": "30809111+acoates-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/e2e-test-app-fabric/test/__image_snapshots__/view-component-test-test-ts-view-tests-views-can-have-outlines-2-snap.png b/packages/e2e-test-app-fabric/test/__image_snapshots__/view-component-test-test-ts-view-tests-views-can-have-outlines-2-snap.png index c88aa9e9aaa..43f3d987dad 100644 Binary files a/packages/e2e-test-app-fabric/test/__image_snapshots__/view-component-test-test-ts-view-tests-views-can-have-outlines-2-snap.png and b/packages/e2e-test-app-fabric/test/__image_snapshots__/view-component-test-test-ts-view-tests-views-can-have-outlines-2-snap.png differ diff --git a/packages/e2e-test-app-fabric/test/__image_snapshots__/view-component-test-test-ts-view-tests-views-can-have-rounded-borders-percentages-2-snap.png b/packages/e2e-test-app-fabric/test/__image_snapshots__/view-component-test-test-ts-view-tests-views-can-have-rounded-borders-percentages-2-snap.png index d15a9823bbb..c828bf5ca75 100644 Binary files a/packages/e2e-test-app-fabric/test/__image_snapshots__/view-component-test-test-ts-view-tests-views-can-have-rounded-borders-percentages-2-snap.png and b/packages/e2e-test-app-fabric/test/__image_snapshots__/view-component-test-test-ts-view-tests-views-can-have-rounded-borders-percentages-2-snap.png differ diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/BorderPrimitive.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/BorderPrimitive.cpp index e4889778140..fd25ebce122 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/BorderPrimitive.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/BorderPrimitive.cpp @@ -26,16 +26,18 @@ bool isColorMeaningful( void pixelRoundBorderRadii(facebook::react::BorderRadii &borderRadii, float scaleFactor) noexcept { // Always round radii down to avoid spikey circles borderRadii.topLeft = { - std::floor(borderRadii.topLeft.horizontal * scaleFactor), std::floor(borderRadii.topLeft.vertical * scaleFactor)}; + .vertical = std::floor(borderRadii.topLeft.vertical * scaleFactor), + .horizontal = std::floor(borderRadii.topLeft.horizontal * scaleFactor)}; borderRadii.topRight = { - std::floor(borderRadii.topRight.horizontal * scaleFactor), - std::floor(borderRadii.topRight.vertical * scaleFactor)}; + .vertical = std::floor(borderRadii.topRight.vertical * scaleFactor), + .horizontal = std::floor(borderRadii.topRight.horizontal * scaleFactor)}; borderRadii.bottomLeft = { - std::floor(borderRadii.bottomLeft.horizontal * scaleFactor), - std::floor(borderRadii.bottomLeft.vertical * scaleFactor)}; + .vertical = std::floor(borderRadii.bottomLeft.vertical * scaleFactor), + .horizontal = std::floor(borderRadii.bottomLeft.horizontal * scaleFactor)}; borderRadii.bottomRight = { - std::floor(borderRadii.bottomRight.horizontal * scaleFactor), - std::floor(borderRadii.bottomRight.vertical * scaleFactor)}; + .vertical = std::floor(borderRadii.bottomRight.vertical * scaleFactor), + .horizontal = std::floor(borderRadii.bottomRight.horizontal * scaleFactor), + }; } void scaleAndPixelRoundBorderWidths( @@ -268,30 +270,14 @@ RoundedPathParameters GenerateRoundedPathParameters( return result; } - float totalTopRadius = baseRadius.topLeft.horizontal + baseRadius.topRight.horizontal; - float totalRightRadius = baseRadius.topRight.vertical + baseRadius.bottomRight.vertical; - float totalBottomRadius = baseRadius.bottomRight.horizontal + baseRadius.bottomLeft.horizontal; - float totalLeftRadius = baseRadius.bottomLeft.vertical + baseRadius.topLeft.vertical; - - float maxHorizontalRadius = std::max(totalTopRadius, totalBottomRadius); - float maxVerticalRadius = std::max(totalLeftRadius, totalRightRadius); - - double totalWidth = inset.left + inset.right + pathSize.width; - double totalHeight = inset.top + inset.bottom + pathSize.height; - - float scaleHoriz = static_cast(maxHorizontalRadius / totalWidth); - float scaleVert = static_cast(maxVerticalRadius / totalHeight); - - float maxScale = std::max(1.0f, std::max(scaleHoriz, scaleVert)); - - result.topLeftRadiusX = std::max(0.0f, baseRadius.topLeft.horizontal / maxScale - inset.left); - result.topLeftRadiusY = std::max(0.0f, baseRadius.topLeft.vertical / maxScale - inset.top); - result.topRightRadiusX = std::max(0.0f, baseRadius.topRight.horizontal / maxScale - inset.right); - result.topRightRadiusY = std::max(0.0f, baseRadius.topRight.vertical / maxScale - inset.top); - result.bottomRightRadiusX = std::max(0.0f, baseRadius.bottomRight.horizontal / maxScale - inset.right); - result.bottomRightRadiusY = std::max(0.0f, baseRadius.bottomRight.vertical / maxScale - inset.bottom); - result.bottomLeftRadiusX = std::max(0.0f, baseRadius.bottomLeft.horizontal / maxScale - inset.left); - result.bottomLeftRadiusY = std::max(0.0f, baseRadius.bottomLeft.vertical / maxScale - inset.bottom); + result.topLeftRadiusX = std::max(0.0f, baseRadius.topLeft.horizontal - inset.left); + result.topLeftRadiusY = std::max(0.0f, baseRadius.topLeft.vertical - inset.top); + result.topRightRadiusX = std::max(0.0f, baseRadius.topRight.horizontal - inset.right); + result.topRightRadiusY = std::max(0.0f, baseRadius.topRight.vertical - inset.top); + result.bottomRightRadiusX = std::max(0.0f, baseRadius.bottomRight.horizontal - inset.right); + result.bottomRightRadiusY = std::max(0.0f, baseRadius.bottomRight.vertical - inset.bottom); + result.bottomLeftRadiusX = std::max(0.0f, baseRadius.bottomLeft.horizontal - inset.left); + result.bottomLeftRadiusY = std::max(0.0f, baseRadius.bottomLeft.vertical - inset.bottom); return result; } @@ -473,8 +459,8 @@ void SetBorderLayerProperties( /* else { - SetBorderLayerPropertiesCommon(theme, comContext, layer, shape, borderTexture, textureRect, - anchorPoint, anchorOffset, strokeWidth, borderColor, borderStyle); + SetBorderLayerPropertiesCommon(theme, compContext, layer, shape, borderTexture, textureRect, + anchorPoint, anchorOffset, size, relativeSizeAdjustment, strokeWidth, borderColor, borderStyle); } */ } @@ -516,11 +502,11 @@ void DrawAllBorderLayers( spTextures[0], // Target Layer, Source Texture, Target Texture {0, 0, - borderRadii.topLeft.vertical + borderWidths.left, - borderRadii.topLeft.horizontal + borderWidths.top}, // Texture Left, Top, Width, Height + borderRadii.topLeft.horizontal + borderWidths.left, + borderRadii.topLeft.vertical + borderWidths.top}, // Texture Left, Top, Width, Height {AnchorPosition::Left, AnchorPosition::Top}, // Layer Anchor Point {0, 0}, // Layer Anchor Offset - {borderRadii.topLeft.vertical + borderWidths.left, borderRadii.topLeft.horizontal + borderWidths.top}, // size + {borderRadii.topLeft.horizontal + borderWidths.left, borderRadii.topLeft.vertical + borderWidths.top}, // size {0.0f, 0.0f}, // relativeSize std::max(borderWidths.left, borderWidths.top), borderColors.left ? borderColors.left : borderColors.top, @@ -533,13 +519,13 @@ void DrawAllBorderLayers( spBorderLayers[1], shape, spTextures[1], - {borderRadii.topLeft.vertical + borderWidths.left, + {borderRadii.topLeft.horizontal + borderWidths.left, 0, - textureWidth - (borderRadii.topRight.vertical + borderWidths.right), + textureWidth - (borderRadii.topRight.horizontal + borderWidths.right), borderWidths.top}, {AnchorPosition::Left, AnchorPosition::Top}, - {borderRadii.topLeft.vertical + borderWidths.left, 0}, - {-(borderRadii.topLeft.vertical + borderWidths.left + borderRadii.topRight.vertical + borderWidths.right), + {borderRadii.topLeft.horizontal + borderWidths.left, 0}, + {-(borderRadii.topLeft.horizontal + borderWidths.left + borderRadii.topRight.horizontal + borderWidths.right), borderWidths.top}, // size {1.0f, 0.0f}, // relativeSize borderWidths.top, @@ -553,13 +539,13 @@ void DrawAllBorderLayers( spBorderLayers[2], shape, spTextures[2], - {textureWidth - (borderRadii.topRight.vertical + borderWidths.right), + {textureWidth - (borderRadii.topRight.horizontal + borderWidths.right), 0, textureWidth, - borderRadii.topRight.horizontal + borderWidths.top}, + borderRadii.topRight.vertical + borderWidths.top}, {AnchorPosition::Right, AnchorPosition::Top}, - {-(borderRadii.topRight.vertical + borderWidths.right), 0}, - {borderRadii.topRight.vertical + borderWidths.right, borderRadii.topRight.horizontal + borderWidths.top}, + {-(borderRadii.topRight.horizontal + borderWidths.right), 0}, + {borderRadii.topRight.horizontal + borderWidths.right, borderRadii.topRight.vertical + borderWidths.top}, {0.0f, 0.0f}, std::max(borderWidths.right, borderWidths.top), borderColors.right ? borderColors.right : borderColors.top, @@ -573,14 +559,14 @@ void DrawAllBorderLayers( shape, spTextures[3], {textureWidth - borderWidths.right, - borderWidths.top + borderRadii.topRight.horizontal, + borderWidths.top + borderRadii.topRight.vertical, textureWidth, - textureHeight - (borderWidths.bottom + borderRadii.bottomRight.horizontal)}, + textureHeight - (borderWidths.bottom + borderRadii.bottomRight.vertical)}, {AnchorPosition::Right, AnchorPosition::Top}, - {-borderWidths.right, borderWidths.top + borderRadii.topRight.horizontal}, + {-borderWidths.right, borderWidths.top + borderRadii.topRight.vertical}, {borderWidths.right, - -(borderWidths.top + borderRadii.topRight.horizontal + borderWidths.bottom + - borderRadii.bottomRight.horizontal)}, // size + -(borderWidths.top + borderRadii.topRight.vertical + borderWidths.bottom + + borderRadii.bottomRight.vertical)}, // size {0.0f, 1.0f}, borderWidths.right, borderColors.right, @@ -593,14 +579,14 @@ void DrawAllBorderLayers( spBorderLayers[4], shape, spTextures[4], - {textureWidth - (borderWidths.right + borderRadii.bottomRight.vertical), - textureHeight - (borderWidths.bottom + borderRadii.bottomRight.horizontal), + {textureWidth - (borderWidths.right + borderRadii.bottomRight.horizontal), + textureHeight - (borderWidths.bottom + borderRadii.bottomRight.vertical), textureWidth, textureHeight}, {AnchorPosition::Right, AnchorPosition::Bottom}, - {-(borderWidths.right + borderRadii.bottomRight.vertical), - -(borderWidths.bottom + borderRadii.bottomRight.horizontal)}, - {borderWidths.right + borderRadii.bottomRight.vertical, borderWidths.bottom + borderRadii.bottomRight.horizontal}, + {-(borderWidths.right + borderRadii.bottomRight.horizontal), + -(borderWidths.bottom + borderRadii.bottomRight.vertical)}, + {borderWidths.right + borderRadii.bottomRight.horizontal, borderWidths.bottom + borderRadii.bottomRight.vertical}, {0, 0}, std::max(borderWidths.right, borderWidths.bottom), borderColors.right ? borderColors.right : borderColors.bottom, @@ -613,13 +599,14 @@ void DrawAllBorderLayers( spBorderLayers[5], shape, spTextures[5], - {borderWidths.left + borderRadii.bottomLeft.vertical, + {borderWidths.left + borderRadii.bottomLeft.horizontal, textureHeight - borderWidths.bottom, - textureWidth - (borderWidths.right + borderRadii.bottomRight.vertical), + textureWidth - (borderWidths.right + borderRadii.bottomRight.horizontal), textureHeight}, {AnchorPosition::Left, AnchorPosition::Bottom}, - {borderWidths.left + borderRadii.bottomLeft.vertical, -borderWidths.bottom}, - {-(borderWidths.right + borderRadii.bottomLeft.vertical + borderWidths.left + borderRadii.bottomRight.vertical), + {borderWidths.left + borderRadii.bottomLeft.horizontal, -borderWidths.bottom}, + {-(borderWidths.right + borderRadii.bottomLeft.horizontal + borderWidths.left + + borderRadii.bottomRight.horizontal), borderWidths.bottom}, {1.0f, 0.0f}, borderWidths.bottom, @@ -634,12 +621,12 @@ void DrawAllBorderLayers( shape, spTextures[6], {0, - textureHeight - (borderWidths.bottom + borderRadii.bottomLeft.horizontal), - borderWidths.left + borderRadii.bottomLeft.vertical, + textureHeight - (borderWidths.bottom + borderRadii.bottomLeft.vertical), + borderWidths.left + borderRadii.bottomLeft.horizontal, textureHeight}, {AnchorPosition::Left, AnchorPosition::Bottom}, - {0, -(borderWidths.bottom + borderRadii.bottomLeft.horizontal)}, - {borderWidths.left + borderRadii.bottomLeft.vertical, borderWidths.bottom + borderRadii.bottomLeft.horizontal}, + {0, -(borderWidths.bottom + borderRadii.bottomLeft.vertical)}, + {borderWidths.left + borderRadii.bottomLeft.horizontal, borderWidths.bottom + borderRadii.bottomLeft.vertical}, {0, 0}, std::max(borderWidths.left, borderWidths.bottom), borderColors.left ? borderColors.left : borderColors.bottom, @@ -653,13 +640,13 @@ void DrawAllBorderLayers( shape, spTextures[7], {0, - borderWidths.top + borderRadii.topLeft.horizontal, + borderWidths.top + borderRadii.topLeft.vertical, borderWidths.left, - textureHeight - (borderWidths.bottom + borderRadii.bottomLeft.horizontal)}, + textureHeight - (borderWidths.bottom + borderRadii.bottomLeft.vertical)}, {AnchorPosition::Left, AnchorPosition::Top}, - {0, borderWidths.top + borderRadii.topLeft.horizontal}, + {0, borderWidths.top + borderRadii.topLeft.vertical}, {borderWidths.left, - -(borderWidths.top + borderRadii.topLeft.horizontal + borderWidths.bottom + borderRadii.bottomLeft.horizontal)}, + -(borderWidths.top + borderRadii.topLeft.vertical + borderWidths.bottom + borderRadii.bottomLeft.vertical)}, {0, 1}, borderWidths.left, borderColors.left, diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp index 276588594c6..46def20b57d 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp @@ -2208,7 +2208,6 @@ struct CompContext : winrt::implements< winrt::com_ptr m_d3dDevice; winrt::com_ptr m_d2dDevice; typename TTypeRedirects::CompositionGraphicsDevice m_compositionGraphicsDevice{nullptr}; - winrt::com_ptr m_d3dDeviceContext; }; winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual