Add CircleMask view example to NativeModuleSample

microsoft · Dec 2, 2024 · 8c624af · 8c624af
1 parent fd83101
commit 8c624af
Show file tree

Hide file tree

Showing 11 changed files with 464 additions and 0 deletions.
diff --git a/samples/NativeModuleSample/cpp-lib/example-old/src/App.tsx b/samples/NativeModuleSample/cpp-lib/example-old/src/App.tsx
@@ -9,6 +9,7 @@ import {
   SimpleHttpModule,
   type Point,
   DataMarshallingExamples,
+  CircleMask,
 } from 'native-module-sample';
 import type { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
 
@@ -255,6 +256,20 @@ export default function App() {
           )}
         </Text>
         <Text />
+        <CircleMask style={{ margin: 10 }}>
+          <View
+            style={{
+              backgroundColor: '#006666',
+              width: 100,
+              height: 100,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <Text style={{ fontSize: 20 }}>CircleMask</Text>
+          </View>
+        </CircleMask>
+        <Text />
       </View>
     </ScrollView>
   );

diff --git a/samples/NativeModuleSample/cpp-lib/example/src/App.tsx b/samples/NativeModuleSample/cpp-lib/example/src/App.tsx
@@ -9,6 +9,7 @@ import {
   SimpleHttpModule,
   type Point,
   DataMarshallingExamples,
+  CircleMask,
 } from 'native-module-sample';
 import type { Int32 } from 'react-native/Libraries/Types/CodegenTypes';
 
@@ -255,6 +256,20 @@ export default function App() {
           )}
         </Text>
         <Text />
+        <CircleMask style={{ margin: 10 }}>
+          <View
+            style={{
+              backgroundColor: '#006666',
+              width: 100,
+              height: 100,
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <Text style={{ fontSize: 20 }}>CircleMask</Text>
+          </View>
+        </CircleMask>
+        <Text />
       </View>
     </ScrollView>
   );

diff --git a/samples/NativeModuleSample/cpp-lib/package.json b/samples/NativeModuleSample/cpp-lib/package.json
@@ -153,6 +153,10 @@
     "includesGeneratedCode": true,
     "windows": {
       "namespace": "NativeModuleSampleCodegen",
+      "generators": [
+        "modulesWindows",
+        "componentsWindows"
+      ],
       "outputDirectory": "windows/NativeModuleSample/codegen",
       "separateDataTypes": true
     }

diff --git a/samples/NativeModuleSample/cpp-lib/src/CircleMaskNativeComponent.ts b/samples/NativeModuleSample/cpp-lib/src/CircleMaskNativeComponent.ts
@@ -0,0 +1,9 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
+
+interface CircleMaskProps extends ViewProps {}
+
+export default codegenNativeComponent<CircleMaskProps>('CircleMask');
diff --git a/samples/NativeModuleSample/cpp-lib/src/index.tsx b/samples/NativeModuleSample/cpp-lib/src/index.tsx
@@ -17,3 +17,6 @@ export { type Response } from './NativeSimpleHttpModule';
 export const SimpleHttpModule = {
   GetHttpResponse: NativeSimpleHttpModule.GetHttpResponse,
 };
+
+export {default as CircleMask} from './CircleMaskNativeComponent';
+export * from './CircleMaskNativeComponent';
diff --git a/samples/NativeModuleSample/cpp-lib/windows/NativeModuleSample/CircleMask.cpp b/samples/NativeModuleSample/cpp-lib/windows/NativeModuleSample/CircleMask.cpp
@@ -0,0 +1,142 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "pch.h"
+
+#include "CircleMask.h"
+
+namespace winrt::NativeModuleSample::implementation
+{
+
+void RegisterCircleMaskNativeComponent(
+    winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) noexcept
+{
+#ifdef RNW_NEW_ARCH
+  NativeModuleSampleCodegen::RegisterCircleMaskNativeComponent<CircleMaskComponentView>(packageBuilder, {});
+#else
+  packageBuilder.AddViewManager(L"CircleMaskViewManager", []() { return winrt::make<CircleMaskViewManager>(); });
+#endif  
+}
+
+#ifdef RNW_NEW_ARCH
+
+winrt::Microsoft::UI::Composition::Visual CircleMaskComponentView::CreateVisual(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept
+{
+  // Adapting https://github.com/microsoft/WindowsAppSDK-Samples/blob/main/Samples/SceneGraph/SampleGalleryApp/Samples/CompCapabilities/CompCapabilities.xaml.cs#L139
+
+  auto compositor = view.as<winrt::Microsoft::ReactNative::Composition::ComponentView>().Compositor();
+  // auto compositionContext = view.as<winrt::Microsoft::ReactNative::Composition::ComponentView>().CompositionContext();
+
+  winrt::Windows::Foundation::Size size{100, 100};
+
+  // // Create circle mask 
+  // auto circleMaskSurface = compositionContext.CreateDrawingSurfaceBrush(size)
+
+  // Get child visual
+  auto circleVisual = compositor.CreateSpriteVisual();
+
+  // // Apply mask to Visual
+  // auto maskBrush = compositor.CreateMaskBrush();
+  // maskBrush.Source(???);
+  // maskBrush.Mask(circleMaskSurface);
+
+
+  // circleVisual.Brush(maskBrush);
+
+  // // Insert visual
+  // InnerVisual().InsertAt(circleVisual, 0);
+
+  return circleVisual;
+}
+
+#else
+
+// IViewManager
+winrt::hstring CircleMaskViewManager::Name() noexcept
+{
+  return L"CircleMask";
+}
+
+winrt::Windows::UI::Xaml::FrameworkElement CircleMaskViewManager::CreateView() noexcept
+{
+  auto const &view = winrt::Windows::UI::Xaml::Controls::Border();
+
+  auto const &binding = winrt::Windows::UI::Xaml::Data::Binding();
+  binding.Source(view);
+  binding.Path(winrt::Windows::UI::Xaml::PropertyPath(L"Height"));
+  binding.Converter(HeightToCornerRadiusConverter::Instance());
+
+  view.SetBinding(winrt::Windows::UI::Xaml::Controls::Border::CornerRadiusProperty(), binding);
+
+  return view;
+}
+
+// IViewManagerWithChildren
+
+void CircleMaskViewManager::AddView(
+    winrt::Windows::UI::Xaml::FrameworkElement const &parent,
+    winrt::Windows::UI::Xaml::UIElement const &child,
+    int64_t /*index*/) noexcept
+{
+  if (auto const &border = parent.try_as<winrt::Windows::UI::Xaml::Controls::Border>()) {
+    border.Child(child);
+  }
+}
+
+void CircleMaskViewManager::RemoveAllChildren(winrt::Windows::UI::Xaml::FrameworkElement const &parent) noexcept
+{
+  if (auto const &border = parent.try_as<winrt::Windows::UI::Xaml::Controls::Border>()) {
+    border.Child(nullptr);
+  }
+}
+
+void CircleMaskViewManager::RemoveChildAt(winrt::Windows::UI::Xaml::FrameworkElement const &parent, int64_t /*index*/) noexcept
+{
+  if (auto const &border = parent.try_as<winrt::Windows::UI::Xaml::Controls::Border>()) {
+    border.Child(nullptr);
+  }
+}
+
+void CircleMaskViewManager::ReplaceChild(
+    winrt::Windows::UI::Xaml::FrameworkElement const &parent,
+    winrt::Windows::UI::Xaml::UIElement const & /*oldChild*/,
+    winrt::Windows::UI::Xaml::UIElement const &newChild) noexcept
+{
+  if (auto const &border = parent.try_as<winrt::Windows::UI::Xaml::Controls::Border>()) {
+    border.Child(newChild);
+  }
+}
+
+winrt::Windows::Foundation::IInspectable HeightToCornerRadiusConverter::Convert(
+    winrt::Windows::Foundation::IInspectable const &value,
+    winrt::Windows::UI::Xaml::Interop::TypeName const & /*targetType*/,
+    winrt::Windows::Foundation::IInspectable const & /*parameter*/,
+    winrt::hstring const & /*language*/) noexcept
+{
+  double d = winrt::unbox_value<double>(value);
+
+  if (isnan(d)) {
+    d = 0.0;
+  }
+
+  return winrt::box_value(winrt::Windows::UI::Xaml::CornerRadiusHelper::FromUniformRadius(d));
+}
+
+winrt::Windows::Foundation::IInspectable HeightToCornerRadiusConverter::ConvertBack(
+    winrt::Windows::Foundation::IInspectable const &value,
+    winrt::Windows::UI::Xaml::Interop::TypeName const & /*targetType*/,
+    winrt::Windows::Foundation::IInspectable const & /*parameter*/,
+    winrt::hstring const & /*language*/) noexcept
+{
+  return value;
+}
+
+winrt::Windows::UI::Xaml::Data::IValueConverter HeightToCornerRadiusConverter::Instance() noexcept
+{
+  static auto const &instance = winrt::make<HeightToCornerRadiusConverter>();
+  return instance;
+};
+
+#endif // #ifndef RNW_NEW_ARCH
+
+} // namespace winrt::NativeModuleSample::implementation
diff --git a/samples/NativeModuleSample/cpp-lib/windows/NativeModuleSample/CircleMask.h b/samples/NativeModuleSample/cpp-lib/windows/NativeModuleSample/CircleMask.h
@@ -0,0 +1,92 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#pragma once
+
+#include "pch.h"
+
+#ifdef RNW_NEW_ARCH
+
+#include "codegen/react/components/NativeModuleSampleSpec/CircleMask.g.h"
+
+#include <winrt/Microsoft.ReactNative.Composition.Experimental.h>
+
+#else
+
+#include <winrt/Windows.UI.Xaml.Controls.h>
+#include <winrt/Windows.UI.Xaml.Data.h>
+
+#endif
+
+namespace winrt::NativeModuleSample::implementation
+{
+
+void RegisterCircleMaskNativeComponent(
+    winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) noexcept;
+
+#ifdef RNW_NEW_ARCH
+
+struct CircleMaskComponentView : winrt::implements<CircleMaskComponentView, winrt::IInspectable>,
+                                  NativeModuleSampleCodegen::BaseCircleMask<CircleMaskComponentView>
+{
+  winrt::Microsoft::UI::Composition::Visual CreateVisual(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept;
+};
+
+#else
+
+struct CircleMaskViewManager : winrt::implements<
+                                  CircleMaskViewManager,
+                                  winrt::Microsoft::ReactNative::IViewManager,
+                                  winrt::Microsoft::ReactNative::IViewManagerWithChildren>
+{
+ public:
+  CircleMaskViewManager(){}
+
+  // IViewManager
+  winrt::hstring Name() noexcept;
+
+  winrt::Windows::UI::Xaml::FrameworkElement CreateView() noexcept;
+
+  // IViewManagerWithChildren
+
+  void AddView(
+      winrt::Windows::UI::Xaml::FrameworkElement const &parent,
+      winrt::Windows::UI::Xaml::UIElement const &child,
+      int64_t /*index*/) noexcept;
+
+  void RemoveAllChildren(winrt::Windows::UI::Xaml::FrameworkElement const &parent) noexcept;
+
+  void RemoveChildAt(winrt::Windows::UI::Xaml::FrameworkElement const &parent, int64_t /*index*/) noexcept;
+
+  void ReplaceChild(
+      winrt::Windows::UI::Xaml::FrameworkElement const &parent,
+      winrt::Windows::UI::Xaml::UIElement const & /*oldChild*/,
+      winrt::Windows::UI::Xaml::UIElement const &newChild) noexcept;
+};
+
+struct HeightToCornerRadiusConverter
+    : winrt::implements<HeightToCornerRadiusConverter, winrt::Windows::UI::Xaml::Data::IValueConverter>
+{
+ public:
+  HeightToCornerRadiusConverter(){}
+
+  winrt::Windows::Foundation::IInspectable Convert(
+      winrt::Windows::Foundation::IInspectable const &value,
+      winrt::Windows::UI::Xaml::Interop::TypeName const & /*targetType*/,
+      winrt::Windows::Foundation::IInspectable const & /*parameter*/,
+      winrt::hstring const & /*language*/) noexcept;
+
+  winrt::Windows::Foundation::IInspectable ConvertBack(
+      winrt::Windows::Foundation::IInspectable const &value,
+      winrt::Windows::UI::Xaml::Interop::TypeName const & /*targetType*/,
+      winrt::Windows::Foundation::IInspectable const & /*parameter*/,
+      winrt::hstring const & /*language*/) noexcept;
+
+  static winrt::Windows::UI::Xaml::Data::IValueConverter Instance() noexcept;
+
+  // IValueConverter
+};
+
+#endif // #ifdef RNW_NEW_ARCH
+
+} // namespace winrt::NativeModuleSample::implementation
diff --git a/samples/NativeModuleSample/cpp-lib/windows/NativeModuleSample/NativeModuleSample.vcxproj b/samples/NativeModuleSample/cpp-lib/windows/NativeModuleSample/NativeModuleSample.vcxproj
@@ -103,6 +103,7 @@
     <ClInclude Include="DataMarshallingExamples.h" />
     <ClInclude Include="FancyMath.h" />
     <ClInclude Include="SimpleHttpModule.h" />
+    <ClInclude Include="CircleMask.h" />
     <ClInclude Include="ReactPackageProvider.h">
       <DependentUpon>ReactPackageProvider.idl</DependentUpon>
     </ClInclude>
@@ -114,6 +115,7 @@
     <ClCompile Include="pch.cpp">
       <PrecompiledHeader>Create</PrecompiledHeader>
     </ClCompile>
+    <ClCompile Include="CircleMask.cpp" />
     <ClCompile Include="ReactPackageProvider.cpp">
       <DependentUpon>ReactPackageProvider.idl</DependentUpon>
     </ClCompile>

diff --git a/.../NativeModuleSample/cpp-lib/windows/NativeModuleSample/NativeModuleSample.vcxproj.filters b/.../NativeModuleSample/cpp-lib/windows/NativeModuleSample/NativeModuleSample.vcxproj.filters
@@ -30,11 +30,17 @@
     <ClInclude Include="SimpleHttpModule.h">
       <Filter>Header Files</Filter>
     </ClInclude>
+    <ClInclude Include="CircleMask.h">
+      <Filter>Header Files</Filter>
+    </ClInclude>
     <ClInclude Include="pch.h">
       <Filter>Header Files</Filter>
     </ClInclude>
   </ItemGroup>
   <ItemGroup>
+    <ClCompile Include="CircleMask.cpp">
+      <Filter>Source Files</Filter>
+    </ClCompile>
     <ClCompile Include="pch.cpp">
       <Filter>Source Files</Filter>
     </ClCompile>

diff --git a/samples/NativeModuleSample/cpp-lib/windows/NativeModuleSample/ReactPackageProvider.cpp b/samples/NativeModuleSample/cpp-lib/windows/NativeModuleSample/ReactPackageProvider.cpp
@@ -12,6 +12,8 @@
 #include "FancyMath.h"
 #include "SimpleHttpModule.h"
 
+#include "CircleMask.h"
+
 using namespace winrt::Microsoft::ReactNative;
 
 namespace winrt::NativeModuleSample::implementation
@@ -20,6 +22,7 @@ namespace winrt::NativeModuleSample::implementation
 void ReactPackageProvider::CreatePackage(IReactPackageBuilder const &packageBuilder) noexcept
 {
   AddAttributedModules(packageBuilder, true);
+  RegisterCircleMaskNativeComponent(packageBuilder);
 }
 
 } // namespace winrt::NativeModuleSample::implementation