fix(TouchHandler): Consider all possible views for click target (microsoft#736)

rozele · web-flow · commit f3f19311e7f6 · 2016-10-03T17:03:15.000-04:00
Previously, we were only considering the hierarchy from the pointer "OriginalSource" in the pointer events calculations. Unfortunately, this meant that if a transparent overlay with "box-none" or "none" pointer events was set, as is the case for "react-native-drawer", then no alternative targets would be considered. This change uses VisualTreeHelper.FindElementsInHostCoordinates to consider all possible targets. Fixes microsoft#715
diff --git a/ReactWindows/ReactNative/Touch/TouchHandler.cs b/ReactWindows/ReactNative/Touch/TouchHandler.cs
@@ -4,8 +4,10 @@
 using ReactNative.UIManager.Events;
 using System;
 using System.Collections.Generic;
+using Windows.Foundation;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
 
 namespace ReactNative.Touch
 {
@@ -45,8 +47,7 @@ private void OnPointerPressed(object sender, PointerRoutedEventArgs e)
                 throw new InvalidOperationException("A pointer with this ID already exists.");
             }
 
-            var reactView = GetReactViewFromView(e.OriginalSource as UIElement);
-
+            var reactView = GetReactViewFromPoint(e.GetCurrentPoint(_view).Position);
             if (reactView != null && _view.CapturePointer(e.Pointer))
             {
                 var reactTag = reactView.GetReactCompoundView().GetReactTagAtPoint(reactView,
@@ -123,31 +124,38 @@ private int IndexOfPointerWithId(uint pointerId)
             return -1;
         }
 
-        private UIElement GetReactViewFromView(DependencyObject originalSource)
+        private UIElement GetReactViewFromPoint(Point point)
         {
-            var viewHierarchy = RootViewHelper.GetReactViewHierarchy(originalSource);
-            if (viewHierarchy.Count == 0)
-            {
-                return null;
-            }
+            var sources = VisualTreeHelper.FindElementsInHostCoordinates(point, _view);
+
+            // Get the first React view that does not have pointer events set
+            // to 'none' or 'box-none', and is not a child of a view with 
+            // 'box-only' or 'none' settings for pointer events.
 
-            var target = -1;
-            for (var i = 0; i < viewHierarchy.Count; ++i)
+            // TODO: use pooled data structure
+            var isBoxOnlyCache = new Dictionary<UIElement, bool>();
+            foreach (var source in sources)
             {
-                var view = viewHierarchy[i];
-                var pointerEvents = view.GetPointerEvents();
-                if (pointerEvents != PointerEvents.None && pointerEvents != PointerEvents.BoxNone)
+                if (!source.HasTag())
+                {
+                    continue;
+                }
+
+                var pointerEvents = source.GetPointerEvents();
+                if (pointerEvents == PointerEvents.None || pointerEvents == PointerEvents.BoxNone)
                 {
-                    target = i;
+                    continue;
                 }
 
-                if (pointerEvents == PointerEvents.BoxOnly || pointerEvents == PointerEvents.None)
+                var viewHierarchy = RootViewHelper.GetReactViewHierarchy(source);
+                var isBoxOnly = IsBoxOnlyWithCache(viewHierarchy, isBoxOnlyCache);
+                if (!isBoxOnly)
                 {
-                    break;
+                    return source;
                 }
             }
 
-            return target < 0 ? null : viewHierarchy[target];
+            return null;
         }
 
         private void UpdatePointerForEvent(ReactPointer pointer, PointerRoutedEventArgs e)
@@ -184,6 +192,42 @@ private void DispatchTouchEvent(TouchEventType touchEventType, List<ReactPointer
                 .DispatchEvent(touchEvent);
         }
 
+        private static bool IsBoxOnlyWithCache(IEnumerable<UIElement> hierarchy, IDictionary<UIElement, bool> cache)
+        {
+            var enumerator = hierarchy.GetEnumerator();
+
+            // Skip the first element (only checking ancestors)
+            if (!enumerator.MoveNext())
+            {
+                return false;
+            }
+
+            return IsBoxOnlyWithCacheRecursive(enumerator, cache);
+        }
+
+        private static bool IsBoxOnlyWithCacheRecursive(IEnumerator<UIElement> enumerator, IDictionary<UIElement, bool> cache)
+        {
+            if (!enumerator.MoveNext())
+            {
+                return false;
+            }
+
+            var currentView = enumerator.Current;
+            var isBoxOnly = default(bool);
+            if (!cache.TryGetValue(currentView, out isBoxOnly))
+            {
+                var pointerEvents = currentView.GetPointerEvents();
+
+                isBoxOnly = pointerEvents == PointerEvents.BoxOnly 
+                    || pointerEvents == PointerEvents.None
+                    || IsBoxOnlyWithCacheRecursive(enumerator, cache);
+
+                cache.Add(currentView, isBoxOnly);
+            }
+
+            return isBoxOnly;
+        }
+
         class TouchEvent : Event
         {
             private readonly TouchEventType _touchEventType;
diff --git a/ReactWindows/ReactNative/UIManager/RootViewHelper.cs b/ReactWindows/ReactNative/UIManager/RootViewHelper.cs
@@ -36,17 +36,11 @@ public static ReactRootView GetRootView(DependencyObject view)
         }
 
         /// <summary>
-        /// Returns the list of pointer events views in the hierarchy, starting
-        /// from the root view.
+        /// Gets the hierarchy of React views from the given view.
         /// </summary>
         /// <param name="view">The view.</param>
-        /// <returns>The pointer events hierarchy.</returns>
-        public static IList<UIElement> GetReactViewHierarchy(DependencyObject view)
-        {
-            return GetReactViewHierarchyCore(view).Reverse().ToList();
-        }
-
-        private static IEnumerable<UIElement> GetReactViewHierarchyCore(DependencyObject view)
+        /// <returns>The view hierarchy.</returns>
+        public static IEnumerable<UIElement> GetReactViewHierarchy(DependencyObject view)
         {
             var current = view;
             while (true)
