Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[0.74] [Fabric] Fix experimental winui3 builds #13215

Merged
merged 3 commits into from
May 13, 2024
+50 −18
Merged

[0.74] [Fabric] Fix experimental winui3 builds #13215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
097992c
Fix experimental winui3 builds (#13203)
acoates-ms May 10, 2024
32b50f0
fix change file
marlenecota May 10, 2024
3ec4ffc
Merge branch '0.74-stable' into 0.74-backport
acoates-ms May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/react-native-windows-3f811585-510f-4097-972b-2aa34b14cb56.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Expose CompositionContext from CreateCompositionComponentViewArgs",
"packageName": "react-native-windows",
"email": "30809111+acoates-ms@users.noreply.github.com",
"dependentChangeType": "patch"
}
47 changes: 31 additions & 16 deletions packages/playground/windows/playground-composition/CustomComponent.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,11 @@ struct CustomComponent : CustomComponentT<CustomComponent> {
CustomComponent(
bool nativeLayout,
const winrt::Microsoft::ReactNative::Composition::CreateCompositionComponentViewArgs &args)
: base_type(args), m_nativeLayout(nativeLayout) {}
: base_type(args),
m_nativeLayout(nativeLayout),
m_compContext(
args.as<winrt::Microsoft::ReactNative::Composition::Experimental::IInternalCreateComponentViewArgs>()
.CompositionContext()) {}

~CustomComponent() {
#ifdef USE_EXPERIMENTAL_WINUI3
Expand Down Expand Up @@ -100,27 +104,37 @@ struct CustomComponent : CustomComponentT<CustomComponent> {
base_type::FinalizeUpdates(updateMask);
}

winrt::Microsoft::UI::Composition::Visual CreateVisual() noexcept {
winrt::Microsoft::ReactNative::Composition::Experimental::IVisual CreateInternalVisual() noexcept {
#ifdef USE_EXPERIMENTAL_WINUI3

m_xamlIsland = winrt::Microsoft::UI::Xaml::XamlIsland{};
m_xamlIsland.Content(CreateXamlButtonContent());

m_contentIsland = m_xamlIsland.ContentIsland();
auto systemCompContext =
m_compContext
.try_as<winrt::Microsoft::ReactNative::Composition::Experimental::SystemCompositionContextHelper>();
if (systemCompContext) {
m_xamlIsland = winrt::Microsoft::UI::Xaml::XamlIsland{};
m_xamlIsland.Content(CreateXamlButtonContent());

m_contentIsland = m_xamlIsland.ContentIsland();
}
#endif

m_visual = Compositor().CreateSpriteVisual();
// m_visual.Brush(CompositionContext().CreateColorBrush({255, 255, 0, 255}));
m_visual = m_compContext.CreateSpriteVisual();
// m_visual.Brush(m_compContext.CreateColorBrush({255, 255, 0, 255}));
#ifdef USE_EXPERIMENTAL_WINUI3

auto hwnd = reinterpret_cast<HWND>(
winrt::Microsoft::ReactNative::ReactCoreInjection::GetTopLevelWindowId(ReactContext().Properties()));
if (systemCompContext) {
auto hwnd = reinterpret_cast<HWND>(
winrt::Microsoft::ReactNative::ReactCoreInjection::GetTopLevelWindowId(ReactContext().Properties()));

m_siteBridge = winrt::Microsoft::UI::Content::SystemVisualSiteBridge::Create(
m_contentIsland.Compositor(), m_visual, winrt::Microsoft::UI::GetWindowIdFromWindow(hwnd));
m_siteBridge.Connect(m_contentIsland);
auto containerVisual =
winrt::Microsoft::ReactNative::Composition::Experimental::SystemCompositionContextHelper::InnerVisual(
m_visual)
.as<winrt::Windows::UI::Composition::ContainerVisual>();
m_siteBridge = winrt::Microsoft::UI::Content::SystemVisualSiteBridge::Create(
m_contentIsland.Compositor(), containerVisual, winrt::Microsoft::UI::GetWindowIdFromWindow(hwnd));
m_siteBridge.Connect(m_contentIsland);

auto rootXamlVisualSize = m_contentIsland.Root().Size();
auto rootXamlVisualSize = m_contentIsland.Root().Size();
}
#endif

return m_visual;
Expand Down Expand Up @@ -165,9 +179,10 @@ struct CustomComponent : CustomComponentT<CustomComponent> {

private:
const bool m_nativeLayout;
winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext m_compContext;
winrt::Microsoft::UI::Xaml::Controls::TextBlock m_buttonLabelTextBlock{nullptr};
winrt::Microsoft::ReactNative::IComponentState m_state;
winrt::Microsoft::UI::Composition::Visual m_visual{nullptr};
winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_visual;
#ifdef USE_EXPERIMENTAL_WINUI3
winrt::Microsoft::UI::Xaml::XamlIsland m_xamlIsland{nullptr};
winrt::Microsoft::UI::Content::ContentIsland m_contentIsland{nullptr};
Expand Down
2 changes: 1 addition & 1 deletion packages/playground/windows/playground-composition/CustomComponent.idl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ namespace PlaygroundApp
[default_interface]
[webhosthidden]
[experimental]
runtimeclass CustomComponent : Microsoft.ReactNative.Composition.ViewComponentView
runtimeclass CustomComponent : Microsoft.ReactNative.Composition.ViewComponentView, Microsoft.ReactNative.Composition.Experimental.IInternalCreateVisual
{
}
}
9 changes: 9 additions & 0 deletions vnext/Microsoft.ReactNative/CompositionComponentView.idl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,15 @@ namespace Microsoft.ReactNative.Composition
Default = 0x00000007, // ShadowProps | NativeBorder | Background
};

namespace Experimental {
[webhosthidden]
[experimental]
interface IInternalCreateComponentViewArgs
{
ICompositionContext CompositionContext { get; };
}
}

[experimental]
[webhosthidden]
runtimeclass CreateCompositionComponentViewArgs : Microsoft.ReactNative.CreateComponentViewArgs {
Expand Down
3 changes: 2 additions & 1 deletion vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ namespace winrt::Microsoft::ReactNative::Composition::implementation {
struct CreateCompositionComponentViewArgs
: public CreateCompositionComponentViewArgsT<
CreateCompositionComponentViewArgs,
winrt::Microsoft::ReactNative::implementation::CreateComponentViewArgs> {
winrt::Microsoft::ReactNative::implementation::CreateComponentViewArgs,
winrt::Microsoft::ReactNative::Composition::Experimental::IInternalCreateComponentViewArgs> {
CreateCompositionComponentViewArgs(
const winrt::Microsoft::ReactNative::IReactContext &reactContext,
facebook::react::Tag tag,
Expand Down