From 6b3bff1d35eb1fa29a739482dad6eaef14fb8ac9 Mon Sep 17 00:00:00 2001 From: Abhijeet Jha <74712637+iamAbhi-916@users.noreply.github.com> Date: Tue, 16 Dec 2025 12:38:39 +0530 Subject: [PATCH 1/3] Fix DPI scaling for debugging overlay highlights --- .../Fabric/Composition/DebuggingOverlayComponentView.cpp | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/DebuggingOverlayComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/DebuggingOverlayComponentView.cpp index 84452bf67aa..dcac6c7ada7 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/DebuggingOverlayComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/DebuggingOverlayComponentView.cpp @@ -86,10 +86,11 @@ void DebuggingOverlayComponentView::HandleCommand( if (auto root = rootComponentView()) { auto rootVisual = root->OuterVisual(); auto brush = m_compContext.CreateColorBrush({204, 200, 230, 255}); + auto scaleFactor = root->theme()->PointScaleFactor(); for (auto &element : elements) { auto overlayVisual = m_compContext.CreateSpriteVisual(); - overlayVisual.Size({element.width, element.height}); - overlayVisual.Offset({element.x, element.y, 0.0f}); + overlayVisual.Size({element.width * scaleFactor, element.height * scaleFactor}); + overlayVisual.Offset({element.x * scaleFactor, element.y * scaleFactor, 0.0f}); overlayVisual.Brush(brush); rootVisual.InsertAt(overlayVisual, root->overlayIndex() + m_activeOverlays); From 22a2486a44fbed1af07297b98775dd7b19ca17f3 Mon Sep 17 00:00:00 2001 From: Abhijeet Jha <74712637+iamAbhi-916@users.noreply.github.com> Date: Tue, 16 Dec 2025 13:00:24 +0530 Subject: [PATCH 2/3] Change files --- ...ative-windows-4a3033f2-c79a-4a04-859f-0c4647cf1b4d.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/react-native-windows-4a3033f2-c79a-4a04-859f-0c4647cf1b4d.json diff --git a/change/react-native-windows-4a3033f2-c79a-4a04-859f-0c4647cf1b4d.json b/change/react-native-windows-4a3033f2-c79a-4a04-859f-0c4647cf1b4d.json new file mode 100644 index 00000000000..5ef35d7d587 --- /dev/null +++ b/change/react-native-windows-4a3033f2-c79a-4a04-859f-0c4647cf1b4d.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Fix DPI scaling for debugging overlay highlights", + "packageName": "react-native-windows", + "email": "74712637+iamAbhi-916@users.noreply.github.com", + "dependentChangeType": "patch" +} From 225f44eb7f205cdc8505786381b2a4a83b2f2b1f Mon Sep 17 00:00:00 2001 From: Abhijeet Jha <74712637+iamAbhi-916@users.noreply.github.com> Date: Tue, 16 Dec 2025 13:57:52 +0530 Subject: [PATCH 3/3] pointScaleFactor from m_layoutMetrics as its member of base class ComponentView --- .../Fabric/Composition/DebuggingOverlayComponentView.cpp | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/DebuggingOverlayComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/DebuggingOverlayComponentView.cpp index dcac6c7ada7..365ba85cdb4 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/DebuggingOverlayComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/DebuggingOverlayComponentView.cpp @@ -86,7 +86,7 @@ void DebuggingOverlayComponentView::HandleCommand( if (auto root = rootComponentView()) { auto rootVisual = root->OuterVisual(); auto brush = m_compContext.CreateColorBrush({204, 200, 230, 255}); - auto scaleFactor = root->theme()->PointScaleFactor(); + float scaleFactor = m_layoutMetrics.pointScaleFactor; for (auto &element : elements) { auto overlayVisual = m_compContext.CreateSpriteVisual(); overlayVisual.Size({element.width * scaleFactor, element.height * scaleFactor});