feat(windows): add clipPath and touch events (#1933)

Adding support for clipPath and touch events.

windows/RNSVG/BrushView.cpp

@@ -16,9 +16,11 @@ void BrushView::SetBounds(Windows::Foundation::Rect const &rect) {
 }
 
 void BrushView::Unload() {
-  m_brush.Close();
-  m_brush = nullptr;
-
+  if (m_brush) {
+    m_brush.Close();
+    m_brush = nullptr;
+  }
+  
   __super::Unload();
 }
 } // namespace winrt::RNSVG::implementation

windows/RNSVG/ClipPathView.cpp

@@ -0,0 +1,10 @@
+#include "pch.h"
+#include "ClipPathView.h"
+#include "ClipPathView.g.cpp"
+
+using namespace winrt;
+using namespace Microsoft::Graphics::Canvas;
+using namespace Microsoft::ReactNative;
+
+namespace winrt::RNSVG::implementation {
+} // namespace winrt::RNSVG::implementation

windows/RNSVG/ClipPathView.h

@@ -0,0 +1,19 @@
+#pragma once
+#include "ClipPathView.g.h"
+#include "GroupView.h"
+
+namespace winrt::RNSVG::implementation {
+struct ClipPathView : ClipPathViewT<ClipPathView, RNSVG::implementation::GroupView> {
+ public:
+  ClipPathView() = default;
+
+  // RenderableView
+  void Render(
+      Microsoft::Graphics::Canvas::UI::Xaml::CanvasControl const & /*canvas*/,
+      Microsoft::Graphics::Canvas::CanvasDrawingSession const & /*session*/){};
+};
+} // namespace winrt::RNSVG::implementation
+
+namespace winrt::RNSVG::factory_implementation {
+struct ClipPathView : ClipPathViewT<ClipPathView, implementation::ClipPathView> {};
+} // namespace winrt::RNSVG::factory_implementation

windows/RNSVG/ClipPathViewManager.cpp

@@ -0,0 +1,24 @@
+#include "pch.h"
+#include "ClipPathViewManager.h"
+#include "ClipPathViewManager.g.cpp"
+
+using namespace winrt;
+using namespace Microsoft::ReactNative;
+
+namespace winrt::RNSVG::implementation {
+ClipPathViewManager::ClipPathViewManager() {
+  m_class = RNSVG::SVGClass::RNSVGClipPath;
+  m_name = L"RNSVGClipPath";
+}
+
+IMapView<hstring, ViewManagerPropertyType> ClipPathViewManager::NativeProps() {
+  auto const &parentProps{__super::NativeProps()};
+  auto const &nativeProps{winrt::single_threaded_map<hstring, ViewManagerPropertyType>()};
+
+  for (auto const &prop : parentProps) {
+    nativeProps.Insert(prop.Key(), prop.Value());
+  }
+
+  return nativeProps.GetView();
+}
+} // namespace winrt::RNSVG::implementation

windows/RNSVG/ClipPathViewManager.h

@@ -0,0 +1,16 @@
+#pragma once
+#include "ClipPathViewManager.g.h"
+#include "GroupViewManager.h"
+
+namespace winrt::RNSVG::implementation {
+struct ClipPathViewManager : ClipPathViewManagerT<ClipPathViewManager, RNSVG::implementation::GroupViewManager> {
+  ClipPathViewManager();
+
+  // IViewManagerWithNativeProperties
+  Windows::Foundation::Collections::IMapView<hstring, Microsoft::ReactNative::ViewManagerPropertyType> NativeProps();
+};
+} // namespace winrt::RNSVG::implementation
+
+namespace winrt::RNSVG::factory_implementation {
+struct ClipPathViewManager : ClipPathViewManagerT<ClipPathViewManager, implementation::ClipPathViewManager> {};
+} // namespace winrt::RNSVG::factory_implementation

windows/RNSVG/GroupView.cpp

@@ -105,6 +105,9 @@ void GroupView::CreateGeometry(UI::Xaml::CanvasControl const &canvas) {
   auto const &resourceCreator{canvas.try_as<ICanvasResourceCreator>()};
   std::vector<Geometry::CanvasGeometry> geometries;
   for (auto const &child : Children()) {
+    if (!child.Geometry()) {
+      child.CreateGeometry(canvas);
+    }
     geometries.push_back(child.Geometry());
   }
 
@@ -134,7 +137,9 @@ void GroupView::Render(UI::Xaml::CanvasControl const &canvas, CanvasDrawingSessi
     session.Transform(transform * SvgTransform());
   }
 
-  if (auto const &opacityLayer{session.CreateLayer(m_opacity)}) {
+  auto const &clipPathGeometry{ClipPathGeometry()};
+
+  if (auto const &opacityLayer{clipPathGeometry ? session.CreateLayer(m_opacity, clipPathGeometry) : session.CreateLayer(m_opacity)}) {
     if (Children().Size() == 0) {
       __super::Render(canvas, session);
     } else {
@@ -169,4 +174,31 @@ void GroupView::Unload() {
 
   __super::Unload();
 }
+
+winrt::RNSVG::IRenderable GroupView::HitTest(Windows::Foundation::Point const &point) {
+  RNSVG::IRenderable renderable{nullptr};
+  if (IsResponsible()) {
+    for (auto const &child : Children()) {
+      if (auto const &hit{child.HitTest(point)}) {
+        renderable = hit;
+      }
+    }
+    if (renderable && !renderable.IsResponsible()) {
+      renderable = *this;
+    } else if (!renderable){
+      if (!Geometry()) {
+        if (auto const &svgRoot{SvgRoot()}) {
+          CreateGeometry(svgRoot.Canvas());
+        }
+      }
+      if (Geometry()) {
+        auto const &bounds{Geometry().ComputeBounds()};
+        if (Windows::UI::Xaml::RectHelper::Contains(bounds, point)) {
+          renderable = *this;
+        }
+      }
+    }
+  }
+  return renderable;
+}
 } // namespace winrt::RNSVG::implementation

windows/RNSVG/GroupView.h

@@ -40,6 +40,8 @@ struct GroupView : GroupViewT<GroupView, RNSVG::implementation::RenderableView>
 
   virtual void Unload();
 
+  virtual RNSVG::IRenderable HitTest(Windows::Foundation::Point const &point);
+
  private:
   Microsoft::ReactNative::IReactContext m_reactContext{nullptr};
   Windows::Foundation::Collections::IVector<RNSVG::IRenderable> m_children{

windows/RNSVG/GroupViewManager.cpp

@@ -43,6 +43,10 @@ void GroupViewManager::AddView(FrameworkElement const &parent, UIElement const &
       groupView.Children().Append(childView);
       childView.MergeProperties(groupView);
 
+      if (childView.IsResponsible() && !groupView.IsResponsible()) {
+        groupView.IsResponsible(true);
+      }
+
       if (auto const &root{groupView.SvgRoot()}) {
         root.InvalidateCanvas();
       }

windows/RNSVG/ImageView.cpp

@@ -104,7 +104,9 @@ void ImageView::Render(UI::Xaml::CanvasControl const &canvas, CanvasDrawingSessi
     transformEffect.TransformMatrix(Utils::GetViewBoxTransform(vbRect, elRect, m_align, m_meetOrSlice));
   }
 
-  if (auto const &opacityLayer{session.CreateLayer(m_opacity)}) {
+  auto const &clipPathGeometry{ClipPathGeometry()};
+
+  if (auto const &opacityLayer{clipPathGeometry ? session.CreateLayer(m_opacity, clipPathGeometry) : session.CreateLayer(m_opacity)}) {
     if (m_source.format == ImageSourceFormat::Bitmap && m_bitmap) {
       auto const &transform{session.Transform()};
       if (m_propSetMap[RNSVG::BaseProp::Matrix]) {

windows/RNSVG/PathView.cpp

@@ -41,7 +41,7 @@ void PathView::CreateGeometry(UI::Xaml::CanvasControl const &canvas) {
   auto const &resourceCreator{canvas.try_as<ICanvasResourceCreator>()};
   Svg::CanvasSvgDocument doc{resourceCreator};
   auto const &path{doc.CreatePathAttribute(m_segmentData, m_commands)};
-  Geometry(path.CreatePathGeometry());
+  Geometry(path.CreatePathGeometry(FillRule()));
 }
 
 void PathView::ParsePath() {

windows/RNSVG/RNSVG.vcxproj

@@ -122,12 +122,14 @@
     <ClInclude Include="BrushView.h" />
     <ClInclude Include="CircleView.h" />
     <ClInclude Include="CircleViewManager.h" />
+    <ClInclude Include="ClipPathView.h" />
     <ClInclude Include="DefsView.h" />
     <ClInclude Include="DefsViewManager.h" />
     <ClInclude Include="EllipseView.h" />
     <ClInclude Include="EllipseViewManager.h" />
     <ClInclude Include="GroupView.h" />
     <ClInclude Include="GroupViewManager.h" />
+    <ClInclude Include="ClipPathViewManager.h" />
     <ClInclude Include="ImageView.h" />
     <ClInclude Include="ImageViewManager.h" />
     <ClInclude Include="LinearGradientView.h" />
@@ -166,6 +168,8 @@
     <ClCompile Include="BrushView.cpp" />
     <ClCompile Include="CircleView.cpp" />
     <ClCompile Include="CircleViewManager.cpp" />
+    <ClCompile Include="ClipPathView.cpp" />
+    <ClCompile Include="ClipPathViewManager.cpp" />
     <ClCompile Include="DefsView.cpp" />
     <ClCompile Include="DefsViewManager.cpp" />
     <ClCompile Include="EllipseView.cpp" />

windows/RNSVG/RNSVG.vcxproj.filters

@@ -124,6 +124,12 @@
     <ClCompile Include="RadialGradientViewManager.cpp">
       <Filter>ViewManagers\GroupViewManagers</Filter>
     </ClCompile>
+    <ClCompile Include="ClipPathViewManager.cpp">
+      <Filter>ViewManagers\GroupViewManagers</Filter>
+    </ClCompile>
+    <ClCompile Include="ClipPathView.cpp">
+      <Filter>Views\GroupViews</Filter>
+    </ClCompile>
   </ItemGroup>
   <ItemGroup>
     <ClInclude Include="pch.h" />
@@ -240,6 +246,12 @@
     <ClInclude Include="RadialGradientViewManager.h">
       <Filter>ViewManagers\GroupViewManagers</Filter>
     </ClInclude>
+    <ClInclude Include="ClipPathViewManager.h">
+      <Filter>ViewManagers\GroupViewManagers</Filter>
+    </ClInclude>
+    <ClInclude Include="ClipPathView.h">
+      <Filter>Views\GroupViews</Filter>
+    </ClInclude>
   </ItemGroup>
   <ItemGroup>
     <None Include="PropertySheet.props" />

windows/RNSVG/ReactPackageProvider.cpp

@@ -21,6 +21,7 @@
 #include "LinearGradientViewManager.h"
 #include "RadialGradientViewManager.h"
 #include "PatternViewManager.h"
+#include "ClipPathViewManager.h"
 
 using namespace winrt::Microsoft::ReactNative;
 
@@ -45,6 +46,7 @@ namespace winrt::RNSVG::implementation
     packageBuilder.AddViewManager(L"LinearGradientViewManager", []() { return winrt::make<LinearGradientViewManager>(); });
     packageBuilder.AddViewManager(L"RadialGradientViewManager", []() { return winrt::make<RadialGradientViewManager>(); });
     packageBuilder.AddViewManager(L"PatternViewManager", []() { return winrt::make<PatternViewManager>(); });
+    packageBuilder.AddViewManager(L"ClipPathViewManager", []() { return winrt::make<ClipPathViewManager>(); });
   }
 
 } // namespace winrt::RNSVG::implementation

windows/RNSVG/RenderableView.cpp

@@ -187,6 +187,10 @@ void RenderableView::UpdateProperties(IJSValueReader const &reader, bool forceUp
       }
     } else if (propertyName == "opacity" && forceUpdate) {
       m_opacity = Utils::JSValueAsFloat(propertyValue, 1.0f);
+    } else if (propertyName == "clipPath") {
+      m_clipPathId = to_hstring(Utils::JSValueAsString(propertyValue));
+    }  else if (propertyName == "responsible") {
+      m_isResponsible = propertyValue.AsBoolean();
     }
 
     // forceUpdate = true means the property is being set on an element
@@ -230,9 +234,11 @@ void RenderableView::Render(UI::Xaml::CanvasControl const &canvas, CanvasDrawing
     geometry = geometry.Transform(SvgTransform());
   }
 
+  auto const &clipPathGeometry{ClipPathGeometry()};
+
   geometry = Geometry::CanvasGeometry::CreateGroup(resourceCreator, {geometry}, FillRule());
 
-  if (auto const &opacityLayer{session.CreateLayer(m_opacity)}) {
+  if (auto const &opacityLayer{clipPathGeometry ? session.CreateLayer(m_opacity, clipPathGeometry) : session.CreateLayer(m_opacity)}) {
     if (auto const &fillLayer{session.CreateLayer(FillOpacity())}) {
       auto const &fill{Utils::GetCanvasBrush(FillBrushId(), Fill(), SvgRoot(), geometry, resourceCreator)};
       session.FillGeometry(geometry, fill);
@@ -325,6 +331,18 @@ RNSVG::SvgView RenderableView::SvgRoot() {
   return nullptr;
 }
 
+Geometry::CanvasGeometry RenderableView::ClipPathGeometry() {
+  if (!m_clipPathId.empty()) {
+    if (auto const &clipPath{SvgRoot().Templates().TryLookup(m_clipPathId)}) {
+      if (!clipPath.Geometry()) {
+        clipPath.CreateGeometry(SvgRoot().Canvas());
+      }
+      return clipPath.Geometry();
+    }
+  }
+  return nullptr;
+}
+
 void RenderableView::Unload() {
   if (m_geometry) {
     m_geometry.Close();
@@ -338,6 +356,21 @@ void RenderableView::Unload() {
   m_strokeDashArray.Clear();
 }
 
+RNSVG::IRenderable RenderableView::HitTest(Point const &point) {
+  if (m_geometry) {
+    bool strokeContainsPoint{false};
+    if (auto const &svgRoot{SvgRoot()}) {
+      float canvasDiagonal{Utils::GetCanvasDiagonal(svgRoot.Canvas().Size())};
+      float strokeWidth{Utils::GetAbsoluteLength(StrokeWidth(), canvasDiagonal)};
+      strokeContainsPoint = m_geometry.StrokeContainsPoint(point, strokeWidth);
+    }
+    if (m_geometry.FillContainsPoint(point) || strokeContainsPoint) {
+      return *this;
+    }
+  }
+  return nullptr;
+}
+
 void RenderableView::SetColor(const JSValueObject& propValue, Windows::UI::Color fallbackColor, std::string propName) {
   switch (propValue["type"].AsInt64()) {
     case 1: {

windows/RNSVG/RenderableView.h

@@ -20,6 +20,9 @@ struct RenderableView : RenderableViewT<RenderableView> {
   hstring Id() { return m_id; }
   Numerics::float3x2 SvgTransform() { return m_transformMatrix; }
 
+  bool IsResponsible() { return m_isResponsible; }
+  void IsResponsible(bool isResponsible) { m_isResponsible = isResponsible; }
+
   hstring FillBrushId() { return m_fillBrushId; }
   Windows::UI::Color Fill() { return m_fill; }
   float FillOpacity() { return m_fillOpacity; }
@@ -33,6 +36,7 @@ struct RenderableView : RenderableViewT<RenderableView> {
   Microsoft::Graphics::Canvas::Geometry::CanvasCapStyle StrokeLineCap() { return m_strokeLineCap; }
   Microsoft::Graphics::Canvas::Geometry::CanvasLineJoin StrokeLineJoin() { return m_strokeLineJoin; }
   Microsoft::Graphics::Canvas::Geometry::CanvasFilledRegionDetermination FillRule() { return m_fillRule; }
+  Microsoft::Graphics::Canvas::Geometry::CanvasGeometry ClipPathGeometry();
 
   virtual void UpdateProperties(Microsoft::ReactNative::IJSValueReader const &reader, bool forceUpdate = true, bool invalidate = true);
   virtual void CreateGeometry(Microsoft::Graphics::Canvas::UI::Xaml::CanvasControl const & /*canvas*/) {}
@@ -45,6 +49,7 @@ struct RenderableView : RenderableViewT<RenderableView> {
   virtual void CreateResources(
       Microsoft::Graphics::Canvas::ICanvasResourceCreator const & /*resourceCreator*/,
       Microsoft::Graphics::Canvas::UI::CanvasCreateResourcesEventArgs const & /*args*/) { }
+  virtual RNSVG::IRenderable HitTest(Windows::Foundation::Point const &point);
 
  protected:
   float m_opacity{1.0f};
@@ -69,8 +74,10 @@ struct RenderableView : RenderableViewT<RenderableView> {
   Windows::UI::Xaml::FrameworkElement m_parent{nullptr};
   Microsoft::Graphics::Canvas::Geometry::CanvasGeometry m_geometry{nullptr};
   bool m_recreateResources{true};
-
+  bool m_isResponsible{false};
+  
   hstring m_id{L""};
+  hstring m_clipPathId{L""};
   Numerics::float3x2 m_transformMatrix{Numerics::make_float3x2_rotation(0)};
   Windows::UI::Color m_fill{Windows::UI::Colors::Black()};
   Windows::UI::Color m_stroke{Windows::UI::Colors::Transparent()};

windows/RNSVG/RenderableViewManager.cpp

@@ -40,6 +40,8 @@ Windows::UI::Xaml::FrameworkElement RenderableViewManager::CreateView() {
       return winrt::RNSVG::RadialGradientView();
     case RNSVG::SVGClass::RNSVGPattern:
       return winrt::RNSVG::PatternView();
+    case RNSVG::SVGClass::RNSVGClipPath:
+      return winrt::RNSVG::ClipPathView();
   }
 
   throw hresult_not_implemented();
@@ -64,6 +66,8 @@ IMapView<hstring, ViewManagerPropertyType> RenderableViewManager::NativeProps()
   nativeProps.Insert(L"matrix", ViewManagerPropertyType::Array);
   nativeProps.Insert(L"opacity", ViewManagerPropertyType::Number);
   nativeProps.Insert(L"propList", ViewManagerPropertyType::Array);
+  nativeProps.Insert(L"clipPath", ViewManagerPropertyType::String);
+  nativeProps.Insert(L"responsible", ViewManagerPropertyType::Boolean);
 
   return nativeProps.GetView();
 }

windows/RNSVG/SvgView.cpp

@@ -83,6 +83,8 @@ void SvgView::UpdateProperties(IJSValueReader const &reader, bool forceUpdate, b
         m_meetOrSlice = Utils::GetMeetOrSlice(propertyValue);
       } else if (propertyName == "color") {
         m_currentColor = Utils::JSValueAsColor(propertyValue);
+      } else if (propertyName == "responsible") {
+        m_isResponsible = propertyValue.AsBoolean();
       }
     }
 
@@ -157,6 +159,12 @@ void SvgView::CreateResources(ICanvasResourceCreator const &resourceCreator, UI:
   }
 }
 
+void SvgView::CreateGeometry(UI::Xaml::CanvasControl const& canvas) {
+  if (m_group) {
+    m_group.CreateGeometry(canvas);
+  }
+}
+
 void SvgView::Canvas_CreateResources(UI::Xaml::CanvasControl const &sender, UI::CanvasCreateResourcesEventArgs const &args) {
   CreateResources(sender, args);
 }

windows/RNSVG/SvgView.h

@@ -24,6 +24,9 @@ struct SvgView : SvgViewT<SvgView> {
 
   Windows::UI::Color CurrentColor() { return m_currentColor; }
 
+  bool IsResponsible() { return m_isResponsible; }
+  void IsResponsible(bool isResponsible) { m_isResponsible = isResponsible; }
+
   Windows::Foundation::Collections::IMap<hstring, RNSVG::IRenderable> Templates() {
     return m_templates;
   }
@@ -42,6 +45,8 @@ struct SvgView : SvgViewT<SvgView> {
   void CreateResources(
       Microsoft::Graphics::Canvas::ICanvasResourceCreator const &resourceCreator,
       Microsoft::Graphics::Canvas::UI::CanvasCreateResourcesEventArgs const &args);
+  void CreateGeometry(Microsoft::Graphics::Canvas::UI::Xaml::CanvasControl const &canvas);
+  RNSVG::IRenderable HitTest(Windows::Foundation::Point const & /*point*/) { return nullptr; }
 
   // Overrides
   Windows::Foundation::Size MeasureOverride(Windows::Foundation::Size availableSize);
@@ -64,6 +69,7 @@ struct SvgView : SvgViewT<SvgView> {
 
  private:
   bool m_hasRendered{false};
+  bool m_isResponsible{false};
   Microsoft::ReactNative::IReactContext m_reactContext{nullptr};
   Microsoft::Graphics::Canvas::UI::Xaml::CanvasControl m_canvas{};
   Windows::UI::Xaml::FrameworkElement m_parent{nullptr};

windows/RNSVG/SvgViewManager.cpp

@@ -4,6 +4,8 @@
 #include "SvgViewManager.g.cpp"
 #endif
 
+#include <winrt/Windows.UI.Input.h>
+#include <winrt/Windows.UI.Xaml.Input.h>
 #include <winrt/Windows.UI.Xaml.Media.h>
 #include <winrt/Windows.UI.Xaml.Shapes.h>
 
@@ -11,6 +13,7 @@
 #include "SvgView.h"
 
 namespace winrt {
+using namespace Windows::Foundation;
 using namespace Windows::Foundation::Collections;
 using namespace Microsoft::Graphics::Canvas::UI::Xaml;
 using namespace Microsoft::ReactNative;
@@ -44,6 +47,7 @@ IMapView<hstring, ViewManagerPropertyType> SvgViewManager::NativeProps() {
   nativeProps.Insert(L"height", ViewManagerPropertyType::Number);
   nativeProps.Insert(L"width", ViewManagerPropertyType::Number);
   nativeProps.Insert(L"color", ViewManagerPropertyType::Color);
+  nativeProps.Insert(L"responsible", ViewManagerPropertyType::Boolean);
 
   // viewBox
   nativeProps.Insert(L"minX", ViewManagerPropertyType::Number);
@@ -106,4 +110,18 @@ void SvgViewManager::ReplaceChild(
     svgView.Group(newGroup);
   }
 }
+
+void SvgViewManager::OnPointerEvent(IInspectable const& view, ReactPointerEventArgs const& args) {
+  if (auto const &svgView{view.try_as<RNSVG::SvgView>()}) {
+    auto const &group{svgView.Group()};
+    if (group.IsResponsible()) {
+      auto const& point{args.Args().GetCurrentPoint(svgView).Position()};
+      for (auto const &child : group.Children()) {
+        if (auto const &target{child.HitTest(point)}) {
+          args.Target(target);
+        }
+      }
+    }
+  }
+}
 } // namespace winrt::RNSVG::implementation

windows/RNSVG/SvgViewManager.h

@@ -30,6 +30,11 @@ struct SvgViewManager : SvgViewManagerT<SvgViewManager> {
       Windows::UI::Xaml::UIElement const &oldChild,
       Windows::UI::Xaml::UIElement const &newChild);
 
+  // IViewManagerWithPointerEvents
+  void OnPointerEvent(
+      Windows::Foundation::IInspectable const &view,
+      Microsoft::ReactNative::ReactPointerEventArgs const &args);
+
  private:
   Microsoft::ReactNative::IReactContext m_reactContext{nullptr};
 };

windows/RNSVG/ViewManagers.idl

@@ -8,6 +8,7 @@ namespace RNSVG
     , Microsoft.ReactNative.IViewManagerWithReactContext
     , Microsoft.ReactNative.IViewManagerWithNativeProperties
     , Microsoft.ReactNative.IViewManagerWithChildren
+    , Microsoft.ReactNative.IViewManagerWithPointerEvents
   {
     SvgViewManager();
   };
@@ -101,6 +102,12 @@ namespace RNSVG
     SymbolViewManager();
   };
 
+  [default_interface]
+  runtimeclass ClipPathViewManager : GroupViewManager
+  {
+    ClipPathViewManager();
+  };
+
   [default_interface]
   unsealed runtimeclass TextViewManager : GroupViewManager
   {

windows/RNSVG/Views.idl

@@ -6,6 +6,7 @@ namespace RNSVG
   {
     Windows.UI.Xaml.FrameworkElement SvgParent;
     Microsoft.Graphics.Canvas.Geometry.CanvasGeometry Geometry;
+    Boolean IsResponsible;
 
     void CreateResources(
       Microsoft.Graphics.Canvas.ICanvasResourceCreator resourceCreator,
@@ -17,6 +18,8 @@ namespace RNSVG
     void MergeProperties(RenderableView other);
     void SaveDefinition();
     void Unload();
+    void CreateGeometry(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl canvas);
+    IRenderable HitTest(Windows.Foundation.Point point);
   };
 
   [default_interface]
@@ -55,8 +58,7 @@ namespace RNSVG
     Microsoft.Graphics.Canvas.Geometry.CanvasCapStyle StrokeLineCap{ get; };
     Microsoft.Graphics.Canvas.Geometry.CanvasLineJoin StrokeLineJoin{ get; };
     Microsoft.Graphics.Canvas.Geometry.CanvasFilledRegionDetermination FillRule{ get; };
-
-    void CreateGeometry(Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl canvas);
+    Microsoft.Graphics.Canvas.Geometry.CanvasGeometry ClipPathGeometry { get; };
   };
 
   [default_interface]
@@ -152,6 +154,12 @@ namespace RNSVG
     MeetOrSlice MeetOrSlice{ get; };
   };
 
+  [default_interface]
+  runtimeclass ClipPathView : GroupView
+  {
+    ClipPathView();
+  };
+
   [default_interface]
   unsealed runtimeclass BrushView : GroupView
   {