From e36f5583bda4fe7b24d5b4bda39de73d1b5a065f Mon Sep 17 00:00:00 2001 From: TatianaKapos Date: Fri, 29 Sep 2023 11:23:18 -0700 Subject: [PATCH 1/7] add skeleton code --- .../CompositionSwitcher.idl | 12 +++ .../Composition/CompositionContextHelper.cpp | 88 +++++++++++++++++++ .../Composition/SwitchComponentView.cpp | 6 ++ .../Fabric/Composition/SwitchComponentView.h | 1 + 4 files changed, 107 insertions(+) diff --git a/vnext/Microsoft.ReactNative/CompositionSwitcher.idl b/vnext/Microsoft.ReactNative/CompositionSwitcher.idl index 8a9aeb917de..c690dac67fa 100644 --- a/vnext/Microsoft.ReactNative/CompositionSwitcher.idl +++ b/vnext/Microsoft.ReactNative/CompositionSwitcher.idl @@ -110,6 +110,17 @@ namespace Microsoft.ReactNative.Composition void Color(Windows.UI.Color color); } + [webhosthidden] + [experimental] + interface ISwitchThumbVisual + { + IVisual InnerVisual { get; }; + void Size(Windows.Foundation.Numerics.Vector2 size); + void Position(Windows.Foundation.Numerics.Vector2 position); + Boolean IsVisible { get; set; }; + void Color(Windows.UI.Color color); + } + [webhosthidden] [experimental] interface IFocusVisual @@ -127,6 +138,7 @@ namespace Microsoft.ReactNative.Composition IScrollVisual CreateScrollerVisual(); IActivityVisual CreateActivityVisual(); ICaretVisual CreateCaretVisual(); + ISwitchThumbVisual CreateSwitchThumbVisual(); IFocusVisual CreateFocusVisual(); IDropShadow CreateDropShadow(); IBrush CreateColorBrush(Windows.UI.Color color); diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp index b0cc48aa64e..e342f4d1808 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp @@ -1029,6 +1029,82 @@ winrt::Microsoft::ReactNative::Composition::IVisual CompCaretVisual; #endif +// Switch Thumb animations +template +struct CompSwitchThumbVisual + : winrt::implements, winrt::Microsoft::ReactNative::Composition::ISwitchThumbVisual> { + CompSwitchThumbVisual(typename TTypeRedirects::Compositor const &compositor) + : m_compositor(compositor), + m_compVisual(compositor.CreateSpriteVisual()), + m_opacityAnimation(compositor.CreateScalarKeyFrameAnimation()) { + m_visual = CreateVisual(); + + // Create circle + auto ellipse = m_compositor.CreateEllipseGeometry(); + ellipse.Radius({10.0f, 10.0f}); + auto spriteShape = m_compositor.CreateSpriteShape(); + spriteShape.Geometry(ellipse); + spriteShape.Offset(winrt::Windows::Foundation::Numerics::float2(0.0f, 0.0f)); + auto spriteVisualBrush = m_compositor.CreateColorBrush(winrt::Windows::UI::Colors::Green()); + spriteShape.FillBrush(spriteVisualBrush); + auto circleShape = m_compositor.CreateShapeVisual(); + circleShape.Shapes().Append(spriteShape); + circleShape.Size({100.0f, 100.0f}); + + m_compVisual.Children().InsertAtTop(circleShape); + + } + + winrt::Microsoft::ReactNative::Composition::IVisual CreateVisual() const noexcept; + + winrt::Microsoft::ReactNative::Composition::IVisual InnerVisual() const noexcept { + return m_visual; + } + + void Color(winrt::Windows::UI::Color color) noexcept { + m_compVisual.Brush(m_compositor.CreateColorBrush(color)); + } + + void Size(winrt::Windows::Foundation::Numerics::float2 size) noexcept { + m_compVisual.Size(size); + } + + void Position(winrt::Windows::Foundation::Numerics::float2 position) noexcept { + m_compVisual.Offset({position.x, position.y, 0.0f}); + } + + bool IsVisible() const noexcept { + return m_isVisible; + } + + void IsVisible(bool value) noexcept { + } + + private: + bool m_isVisible{true}; + typename TTypeRedirects::SpriteVisual m_compVisual; + winrt::Microsoft::ReactNative::Composition::IVisual m_visual; + typename TTypeRedirects::ScalarKeyFrameAnimation m_opacityAnimation; + typename TTypeRedirects::Compositor m_compositor{nullptr}; +}; + +winrt::Microsoft::ReactNative::Composition::IVisual CompSwitchThumbVisual::CreateVisual() + const noexcept { + return winrt::make(m_compVisual); +} +using WindowsCompSwitchThumbVisual = CompSwitchThumbVisual; + +#ifdef USE_WINUI3 +winrt::Microsoft::ReactNative::Composition::IVisual CompSwitchThumbVisual::CreateVisual() + const noexcept { + return winrt::make(m_compVisual); +} +using MicrosoftCompSwitchThumbVisual = CompSwitchThumbVisual; +#endif + + +// ending + template struct CompFocusVisual : winrt::implements, winrt::Microsoft::ReactNative::Composition::IFocusVisual> { @@ -1186,6 +1262,8 @@ struct CompContext : winrt::implements< winrt::Microsoft::ReactNative::Composition::ICaretVisual CreateCaretVisual() noexcept; + winrt::Microsoft::ReactNative::Composition::ISwitchThumbVisual CreateSwitchThumbVisual() noexcept; + winrt::Microsoft::ReactNative::Composition::IFocusVisual CreateFocusVisual() noexcept; typename TTypeRedirects::CompositionGraphicsDevice CompositionGraphicsDevice() noexcept { @@ -1256,6 +1334,11 @@ CompContext::CreateCaretVisual() noexcept { return winrt::make(m_compositor); } +winrt::Microsoft::ReactNative::Composition::ISwitchThumbVisual +CompContext::CreateSwitchThumbVisual() noexcept { + return winrt::make(m_compositor); +} + winrt::Microsoft::ReactNative::Composition::IFocusVisual CompContext::CreateFocusVisual() noexcept { return winrt::make(m_compositor); @@ -1307,6 +1390,11 @@ CompContext::CreateCaretVisual() noexcept { return winrt::make(m_compositor); } +winrt::Microsoft::ReactNative::Composition::ISwitchThumbVisual +CompContext::CreateSwitchThumbVisual() noexcept { + return winrt::make(m_compositor); +} + winrt::Microsoft::ReactNative::Composition::IFocusVisual CompContext::CreateFocusVisual() noexcept { return winrt::make(m_compositor); diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp index 9fe432f0a09..721107f9dba 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp @@ -194,6 +194,12 @@ void SwitchComponentView::ensureVisual() noexcept { m_visual = m_compContext.CreateSpriteVisual(); OuterVisual().InsertAt(m_visual, 0); } + + if (!m_thumbVisual) { + m_thumbVisual = m_compContext.CreateSwitchThumbVisual(); + m_visual.InsertAt(m_thumbVisual.InnerVisual(), 0); + m_thumbVisual.IsVisible(true); + } } void SwitchComponentView::ensureDrawingSurface() noexcept { diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.h index 8fb3886d8e0..3358779b165 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.h @@ -63,6 +63,7 @@ struct SwitchComponentView : CompositionBaseComponentView { winrt::Microsoft::ReactNative::ReactContext m_context; facebook::react::SharedViewProps m_props; winrt::Microsoft::ReactNative::Composition::IDrawingSurfaceBrush m_drawingSurface; + winrt::Microsoft::ReactNative::Composition::ISwitchThumbVisual m_thumbVisual; }; } // namespace Microsoft::ReactNative From a17345131d8a5172d583af815295bf48e7d6aa03 Mon Sep 17 00:00:00 2001 From: TatianaKapos Date: Tue, 3 Oct 2023 11:28:09 -0700 Subject: [PATCH 2/7] adds offset animation --- .../Composition/CompositionContextHelper.cpp | 24 ++++++++++++++----- .../Composition/SwitchComponentView.cpp | 12 +++++++++- 2 files changed, 29 insertions(+), 7 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp index e342f4d1808..b41fa88f08c 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp @@ -1039,17 +1039,17 @@ struct CompSwitchThumbVisual m_opacityAnimation(compositor.CreateScalarKeyFrameAnimation()) { m_visual = CreateVisual(); - // Create circle + // Create Thumb auto ellipse = m_compositor.CreateEllipseGeometry(); - ellipse.Radius({10.0f, 10.0f}); + ellipse.Radius({8.25f, 8.25}); // controls the size auto spriteShape = m_compositor.CreateSpriteShape(); spriteShape.Geometry(ellipse); - spriteShape.Offset(winrt::Windows::Foundation::Numerics::float2(0.0f, 0.0f)); + spriteShape.Offset(winrt::Windows::Foundation::Numerics::float2(9.0f, 9.0f)); // controls the offset but gets cut off if outside of container auto spriteVisualBrush = m_compositor.CreateColorBrush(winrt::Windows::UI::Colors::Green()); spriteShape.FillBrush(spriteVisualBrush); auto circleShape = m_compositor.CreateShapeVisual(); circleShape.Shapes().Append(spriteShape); - circleShape.Size({100.0f, 100.0f}); + circleShape.Size({150.0f, 150.0f}); m_compVisual.Children().InsertAtTop(circleShape); @@ -1069,8 +1069,18 @@ struct CompSwitchThumbVisual m_compVisual.Size(size); } - void Position(winrt::Windows::Foundation::Numerics::float2 position) noexcept { - m_compVisual.Offset({position.x, position.y, 0.0f}); + void Position(winrt::Windows::Foundation::Numerics::float2 position) noexcept { + if (!isDrawn) { + isDrawn = true; + m_compVisual.Offset({position.x, position.y, 0.0f}); + } else { + auto animation = m_compositor.CreateVector3KeyFrameAnimation(); + animation.Duration(std::chrono::milliseconds(250)); + animation.Direction(TTypeRedirects::AnimationDirection::Normal); + animation.InsertKeyFrame(1.0f, {position.x, position.y, 0.0f}); + + m_compVisual.StartAnimation(L"Offset", animation); + } } bool IsVisible() const noexcept { @@ -1082,6 +1092,8 @@ struct CompSwitchThumbVisual private: bool m_isVisible{true}; + bool isDrawn{false}; + winrt::Windows::Foundation::Numerics::float2 position; typename TTypeRedirects::SpriteVisual m_compVisual; winrt::Microsoft::ReactNative::Composition::IVisual m_visual; typename TTypeRedirects::ScalarKeyFrameAnimation m_opacityAnimation; diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp index 721107f9dba..4b7d54cbb94 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp @@ -113,7 +113,7 @@ void SwitchComponentView::Draw() noexcept { // https://github.com/microsoft/microsoft-ui-xaml/blob/main/dev/CommonStyles/ToggleSwitch_themeresources.xaml constexpr float thumbMargin = 3.0f; - constexpr float thumbRadius = 7.0f; + constexpr float thumbRadius = 7.0f ; constexpr float trackWidth = 40.0f; constexpr float trackHeight = 20.0f; constexpr float trackCornerRadius = 10.0f; @@ -178,6 +178,16 @@ void SwitchComponentView::Draw() noexcept { D2D1_ELLIPSE thumb = D2D1::Ellipse(thumbCenter, thumbRadius, thumbRadius); d2dDeviceContext->FillEllipse(thumb, thumbBrush.get()); + // NEW + float thumbXnew = (trackMarginX + (thumbMargin * m_layoutMetrics.pointScaleFactor) + 1.0f); + float thumbYnew = (trackMarginY + (thumbMargin * m_layoutMetrics.pointScaleFactor) + 1.0f); + + if (switchProps->value) { + thumbXnew = thumbXnew + (trackWidth - thumbRadius - thumbRadius); + } + + m_thumbVisual.Position({thumbXnew, thumbYnew}); + // Restore old dpi setting d2dDeviceContext->SetDpi(oldDpiX, oldDpiY); } From 68ee0fa58322cd6717944ab02083c2668d9e3d48 Mon Sep 17 00:00:00 2001 From: TatianaKapos Date: Wed, 4 Oct 2023 10:24:01 -0700 Subject: [PATCH 3/7] add color and size with pointscalefactor --- .../Composition/CompositionContextHelper.cpp | 25 +++++------- .../Composition/SwitchComponentView.cpp | 40 +++++++++---------- .../Fabric/Composition/SwitchComponentView.h | 2 + 3 files changed, 32 insertions(+), 35 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp index b41fa88f08c..e7f8d8d2ddc 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp @@ -1035,24 +1035,18 @@ struct CompSwitchThumbVisual : winrt::implements, winrt::Microsoft::ReactNative::Composition::ISwitchThumbVisual> { CompSwitchThumbVisual(typename TTypeRedirects::Compositor const &compositor) : m_compositor(compositor), - m_compVisual(compositor.CreateSpriteVisual()), - m_opacityAnimation(compositor.CreateScalarKeyFrameAnimation()) { + m_compVisual(compositor.CreateSpriteVisual()) { m_visual = CreateVisual(); // Create Thumb - auto ellipse = m_compositor.CreateEllipseGeometry(); - ellipse.Radius({8.25f, 8.25}); // controls the size - auto spriteShape = m_compositor.CreateSpriteShape(); - spriteShape.Geometry(ellipse); - spriteShape.Offset(winrt::Windows::Foundation::Numerics::float2(9.0f, 9.0f)); // controls the offset but gets cut off if outside of container - auto spriteVisualBrush = m_compositor.CreateColorBrush(winrt::Windows::UI::Colors::Green()); - spriteShape.FillBrush(spriteVisualBrush); + m_geometry = m_compositor.CreateEllipseGeometry(); + m_spiritShape = m_compositor.CreateSpriteShape(); + m_spiritShape.Geometry(m_geometry); auto circleShape = m_compositor.CreateShapeVisual(); - circleShape.Shapes().Append(spriteShape); + circleShape.Shapes().Append(m_spiritShape); circleShape.Size({150.0f, 150.0f}); m_compVisual.Children().InsertAtTop(circleShape); - } winrt::Microsoft::ReactNative::Composition::IVisual CreateVisual() const noexcept; @@ -1062,15 +1056,18 @@ struct CompSwitchThumbVisual } void Color(winrt::Windows::UI::Color color) noexcept { - m_compVisual.Brush(m_compositor.CreateColorBrush(color)); + m_spiritShape.FillBrush(m_compositor.CreateColorBrush(color)); } void Size(winrt::Windows::Foundation::Numerics::float2 size) noexcept { + m_geometry.Radius(size); + m_spiritShape.Offset(size); m_compVisual.Size(size); } void Position(winrt::Windows::Foundation::Numerics::float2 position) noexcept { if (!isDrawn) { + // we don't want to animate if this is the first time the switch is drawn on screen isDrawn = true; m_compVisual.Offset({position.x, position.y, 0.0f}); } else { @@ -1093,11 +1090,11 @@ struct CompSwitchThumbVisual private: bool m_isVisible{true}; bool isDrawn{false}; - winrt::Windows::Foundation::Numerics::float2 position; typename TTypeRedirects::SpriteVisual m_compVisual; winrt::Microsoft::ReactNative::Composition::IVisual m_visual; - typename TTypeRedirects::ScalarKeyFrameAnimation m_opacityAnimation; typename TTypeRedirects::Compositor m_compositor{nullptr}; + winrt::Windows::UI::Composition::CompositionEllipseGeometry m_geometry{nullptr}; + winrt::Windows::UI::Composition::CompositionSpriteShape m_spiritShape{nullptr}; }; winrt::Microsoft::ReactNative::Composition::IVisual CompSwitchThumbVisual::CreateVisual() diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp index 4b7d54cbb94..ef60217b7eb 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp @@ -128,13 +128,6 @@ void SwitchComponentView::Draw() noexcept { offsetX + trackMarginX + trackWidth, offsetY + trackMarginY + trackHeight); - // switchProps->value = false - float thumbX = trackRect.left + thumbMargin + thumbRadius; - - if (switchProps->value) { - thumbX = trackRect.right - thumbMargin - thumbRadius; - } - winrt::com_ptr defaultBrush; D2D1_COLOR_F defaultColor = @@ -142,12 +135,11 @@ void SwitchComponentView::Draw() noexcept { winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(defaultColor, defaultBrush.put())); - winrt::com_ptr thumbBrush; + winrt::Windows::UI::Color thumbColor; if (!switchProps->disabled && switchProps->thumbTintColor) { - winrt::check_hresult( - d2dDeviceContext->CreateSolidColorBrush(switchProps->thumbTintColor.AsD2DColor(), thumbBrush.put())); + thumbColor = switchProps->thumbTintColor.AsWindowsColor(); } else { - thumbBrush = defaultBrush; + thumbColor = winrt::Windows::UI::Colors::Gray(); } const auto dpi = m_layoutMetrics.pointScaleFactor * 96.0f; @@ -173,20 +165,18 @@ void SwitchComponentView::Draw() noexcept { d2dDeviceContext->FillRoundedRectangle(track, trackBrush.get()); } - // switch thumb - D2D1_POINT_2F thumbCenter = D2D1 ::Point2F(thumbX, (trackRect.top + trackRect.bottom) / 2); - D2D1_ELLIPSE thumb = D2D1::Ellipse(thumbCenter, thumbRadius, thumbRadius); - d2dDeviceContext->FillEllipse(thumb, thumbBrush.get()); - - // NEW - float thumbXnew = (trackMarginX + (thumbMargin * m_layoutMetrics.pointScaleFactor) + 1.0f); - float thumbYnew = (trackMarginY + (thumbMargin * m_layoutMetrics.pointScaleFactor) + 1.0f); + // switch thumb - made with composition + float thumbX = (trackMarginX + thumbMargin) * m_layoutMetrics.pointScaleFactor; + float thumbY = (trackMarginY + thumbMargin) * m_layoutMetrics.pointScaleFactor; if (switchProps->value) { - thumbXnew = thumbXnew + (trackWidth - thumbRadius - thumbRadius); + thumbX = (trackMarginX + trackWidth - thumbRadius - thumbRadius - thumbMargin) * m_layoutMetrics.pointScaleFactor; } - m_thumbVisual.Position({thumbXnew, thumbYnew}); + m_thumbVisual.Size({thumbRadius * m_layoutMetrics.pointScaleFactor, thumbRadius * m_layoutMetrics.pointScaleFactor}); + m_thumbVisual.Position({thumbX, thumbY}); + m_thumbVisual.Color(thumbColor); + // Restore old dpi setting d2dDeviceContext->SetDpi(oldDpiX, oldDpiY); @@ -228,6 +218,14 @@ void SwitchComponentView::ensureDrawingSurface() noexcept { } } +void SwitchComponentView::onFocusLost() noexcept { + Super::onFocusLost(); +} + +void SwitchComponentView::onFocusGained() noexcept { + Super::onFocusGained(); +} + facebook::react::Tag SwitchComponentView::hitTest( facebook::react::Point pt, facebook::react::Point &localPt, diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.h index 3358779b165..c81516b4046 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.h @@ -56,6 +56,8 @@ struct SwitchComponentView : CompositionBaseComponentView { void ensureVisual() noexcept; void Draw() noexcept; void ensureDrawingSurface() noexcept; + void onFocusLost() noexcept; + void onFocusGained() noexcept; bool toggle() noexcept; facebook::react::Size m_contentSize; From 478d011f9e2ac212c63c6c66f888723f3d1fcb6e Mon Sep 17 00:00:00 2001 From: TatianaKapos Date: Wed, 4 Oct 2023 10:34:52 -0700 Subject: [PATCH 4/7] adds ability to switch composition --- .../Composition/CompositionContextHelper.cpp | 22 ++++++++++--------- .../Composition/SwitchComponentView.cpp | 8 +++---- 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp index e7f8d8d2ddc..294b70ba483 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp @@ -37,6 +37,7 @@ struct CompositionTypeTraits { using CompositionBackfaceVisibility = winrt::Windows::UI::Composition::CompositionBackfaceVisibility; using CompositionBrush = winrt::Windows::UI::Composition::CompositionBrush; using CompositionDrawingSurface = winrt::Windows::UI::Composition::CompositionDrawingSurface; + using CompositionEllipseGeometry = winrt::Windows::UI::Composition::CompositionEllipseGeometry; using CompositionNineGridBrush = winrt::Windows::UI::Composition::CompositionNineGridBrush; using CompositionPath = winrt::Windows::UI::Composition::CompositionPath; using CompositionSpriteShape = winrt::Windows::UI::Composition::CompositionSpriteShape; @@ -92,6 +93,7 @@ struct CompositionTypeTraits { using CompositionBackfaceVisibility = winrt::Microsoft::UI::Composition::CompositionBackfaceVisibility; using CompositionBrush = winrt::Microsoft::UI::Composition::CompositionBrush; using CompositionDrawingSurface = winrt::Microsoft::UI::Composition::CompositionDrawingSurface; + using CompositionEllipseGeometry = winrt::Microsoft::UI::Composition::CompositionEllipseGeometry; using CompositionNineGridBrush = winrt::Microsoft::UI::Composition::CompositionNineGridBrush; using CompositionPath = winrt::Microsoft::UI::Composition::CompositionPath; using CompositionSpriteShape = winrt::Microsoft::UI::Composition::CompositionSpriteShape; @@ -1031,11 +1033,11 @@ using MicrosoftCompCaretVisual = CompCaretVisual; // Switch Thumb animations template -struct CompSwitchThumbVisual - : winrt::implements, winrt::Microsoft::ReactNative::Composition::ISwitchThumbVisual> { +struct CompSwitchThumbVisual : winrt::implements< + CompSwitchThumbVisual, + winrt::Microsoft::ReactNative::Composition::ISwitchThumbVisual> { CompSwitchThumbVisual(typename TTypeRedirects::Compositor const &compositor) - : m_compositor(compositor), - m_compVisual(compositor.CreateSpriteVisual()) { + : m_compositor(compositor), m_compVisual(compositor.CreateSpriteVisual()) { m_visual = CreateVisual(); // Create Thumb @@ -1065,7 +1067,7 @@ struct CompSwitchThumbVisual m_compVisual.Size(size); } - void Position(winrt::Windows::Foundation::Numerics::float2 position) noexcept { + void Position(winrt::Windows::Foundation::Numerics::float2 position) noexcept { if (!isDrawn) { // we don't want to animate if this is the first time the switch is drawn on screen isDrawn = true; @@ -1084,8 +1086,7 @@ struct CompSwitchThumbVisual return m_isVisible; } - void IsVisible(bool value) noexcept { - } + void IsVisible(bool value) noexcept {} private: bool m_isVisible{true}; @@ -1093,8 +1094,10 @@ struct CompSwitchThumbVisual typename TTypeRedirects::SpriteVisual m_compVisual; winrt::Microsoft::ReactNative::Composition::IVisual m_visual; typename TTypeRedirects::Compositor m_compositor{nullptr}; - winrt::Windows::UI::Composition::CompositionEllipseGeometry m_geometry{nullptr}; - winrt::Windows::UI::Composition::CompositionSpriteShape m_spiritShape{nullptr}; + typename TTypeRedirects::CompositionSpriteShape m_spiritShape{nullptr}; + typename TTypeRedirects::CompositionEllipseGeometry m_geometry{nullptr}; + // winrt::Windows::UI::Composition::CompositionEllipseGeometry m_geometry{nullptr}; + // winrt::Windows::UI::Composition::CompositionSpriteShape m_spiritShape{nullptr}; }; winrt::Microsoft::ReactNative::Composition::IVisual CompSwitchThumbVisual::CreateVisual() @@ -1111,7 +1114,6 @@ winrt::Microsoft::ReactNative::Composition::IVisual CompSwitchThumbVisual; #endif - // ending template diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp index ef60217b7eb..e3dc9635ec8 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp @@ -113,7 +113,7 @@ void SwitchComponentView::Draw() noexcept { // https://github.com/microsoft/microsoft-ui-xaml/blob/main/dev/CommonStyles/ToggleSwitch_themeresources.xaml constexpr float thumbMargin = 3.0f; - constexpr float thumbRadius = 7.0f ; + constexpr float thumbRadius = 7.0f; constexpr float trackWidth = 40.0f; constexpr float trackHeight = 20.0f; constexpr float trackCornerRadius = 10.0f; @@ -173,11 +173,11 @@ void SwitchComponentView::Draw() noexcept { thumbX = (trackMarginX + trackWidth - thumbRadius - thumbRadius - thumbMargin) * m_layoutMetrics.pointScaleFactor; } - m_thumbVisual.Size({thumbRadius * m_layoutMetrics.pointScaleFactor, thumbRadius * m_layoutMetrics.pointScaleFactor}); + m_thumbVisual.Size( + {thumbRadius * m_layoutMetrics.pointScaleFactor, thumbRadius * m_layoutMetrics.pointScaleFactor}); m_thumbVisual.Position({thumbX, thumbY}); m_thumbVisual.Color(thumbColor); - // Restore old dpi setting d2dDeviceContext->SetDpi(oldDpiX, oldDpiY); } @@ -195,7 +195,7 @@ void SwitchComponentView::ensureVisual() noexcept { OuterVisual().InsertAt(m_visual, 0); } - if (!m_thumbVisual) { + if (!m_thumbVisual) { m_thumbVisual = m_compContext.CreateSwitchThumbVisual(); m_visual.InsertAt(m_thumbVisual.InnerVisual(), 0); m_thumbVisual.IsVisible(true); From 127393d1574c83e86c0e2110af2b194023eed53a Mon Sep 17 00:00:00 2001 From: TatianaKapos Date: Wed, 4 Oct 2023 10:45:20 -0700 Subject: [PATCH 5/7] remove old code --- .../Fabric/Composition/CompositionContextHelper.cpp | 4 ---- .../Fabric/Composition/SwitchComponentView.cpp | 9 --------- .../Fabric/Composition/SwitchComponentView.h | 2 -- 3 files changed, 15 deletions(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp index 294b70ba483..ef5ad100850 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp @@ -1096,8 +1096,6 @@ struct CompSwitchThumbVisual : winrt::implements< typename TTypeRedirects::Compositor m_compositor{nullptr}; typename TTypeRedirects::CompositionSpriteShape m_spiritShape{nullptr}; typename TTypeRedirects::CompositionEllipseGeometry m_geometry{nullptr}; - // winrt::Windows::UI::Composition::CompositionEllipseGeometry m_geometry{nullptr}; - // winrt::Windows::UI::Composition::CompositionSpriteShape m_spiritShape{nullptr}; }; winrt::Microsoft::ReactNative::Composition::IVisual CompSwitchThumbVisual::CreateVisual() @@ -1114,8 +1112,6 @@ winrt::Microsoft::ReactNative::Composition::IVisual CompSwitchThumbVisual; #endif -// ending - template struct CompFocusVisual : winrt::implements, winrt::Microsoft::ReactNative::Composition::IFocusVisual> { diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp index e3dc9635ec8..57a92538ead 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp @@ -198,7 +198,6 @@ void SwitchComponentView::ensureVisual() noexcept { if (!m_thumbVisual) { m_thumbVisual = m_compContext.CreateSwitchThumbVisual(); m_visual.InsertAt(m_thumbVisual.InnerVisual(), 0); - m_thumbVisual.IsVisible(true); } } @@ -218,14 +217,6 @@ void SwitchComponentView::ensureDrawingSurface() noexcept { } } -void SwitchComponentView::onFocusLost() noexcept { - Super::onFocusLost(); -} - -void SwitchComponentView::onFocusGained() noexcept { - Super::onFocusGained(); -} - facebook::react::Tag SwitchComponentView::hitTest( facebook::react::Point pt, facebook::react::Point &localPt, diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.h index c81516b4046..3358779b165 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.h +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.h @@ -56,8 +56,6 @@ struct SwitchComponentView : CompositionBaseComponentView { void ensureVisual() noexcept; void Draw() noexcept; void ensureDrawingSurface() noexcept; - void onFocusLost() noexcept; - void onFocusGained() noexcept; bool toggle() noexcept; facebook::react::Size m_contentSize; From bb203d3a3865685ad5f7e3c35575e79e0be20fb5 Mon Sep 17 00:00:00 2001 From: TatianaKapos Date: Wed, 4 Oct 2023 10:45:46 -0700 Subject: [PATCH 6/7] Change files --- ...ative-windows-646abbfc-a05b-44db-a498-bf96a28aa1c7.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/react-native-windows-646abbfc-a05b-44db-a498-bf96a28aa1c7.json diff --git a/change/react-native-windows-646abbfc-a05b-44db-a498-bf96a28aa1c7.json b/change/react-native-windows-646abbfc-a05b-44db-a498-bf96a28aa1c7.json new file mode 100644 index 00000000000..afa69f42104 --- /dev/null +++ b/change/react-native-windows-646abbfc-a05b-44db-a498-bf96a28aa1c7.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "add fabric switch path animation", + "packageName": "react-native-windows", + "email": "tatianakapos@microsoft.com", + "dependentChangeType": "patch" +} From 973c11ca0d7a8f28b2387af71d259f142fe9b543 Mon Sep 17 00:00:00 2001 From: TatianaKapos Date: Wed, 4 Oct 2023 11:55:16 -0700 Subject: [PATCH 7/7] fix build --- .../Fabric/Composition/CompositionContextHelper.cpp | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp index ef5ad100850..163ba109657 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp @@ -1107,7 +1107,7 @@ using WindowsCompSwitchThumbVisual = CompSwitchThumbVisual #ifdef USE_WINUI3 winrt::Microsoft::ReactNative::Composition::IVisual CompSwitchThumbVisual::CreateVisual() const noexcept { - return winrt::make(m_compVisual); + return winrt::make(m_compVisual); } using MicrosoftCompSwitchThumbVisual = CompSwitchThumbVisual; #endif