fix(BaseViewManager): Remove dependency on WinRTXamlToolkit (microsoft#1218)

rozele · rozele · commit ba05035659e6 · 2017-07-25T15:08:20.000-04:00
The `SetClipToBounds` property from `WinRTXamlToolkit` is too simple to implement to justify the dependency. Also, the approach that uses dimensions seems to be a bit less complex that relying on both a XAML dependency property and the SizeChanged event. Fixes microsoft#1214
diff --git a/ReactWindows/ReactNative/UIManager/BaseViewManager.cs b/ReactWindows/ReactNative/UIManager/BaseViewManager.cs
@@ -3,6 +3,7 @@
 using ReactNative.UIManager.Annotations;
 using System;
 using System.Collections.Generic;
+using Windows.Foundation;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Automation;
 using Windows.UI.Xaml.Automation.Peers;
@@ -24,8 +25,8 @@ public abstract class BaseViewManager<TFrameworkElement, TLayoutShadowNode> :
         where TFrameworkElement : FrameworkElement
         where TLayoutShadowNode : LayoutShadowNode
     {
-        private readonly IDictionary<TFrameworkElement, Action<TFrameworkElement, Dimensions>> _transforms =
-            new Dictionary<TFrameworkElement, Action<TFrameworkElement, Dimensions>>();
+        private readonly IDictionary<TFrameworkElement, DimensionBoundProperties> _dimensionBoundProperties =
+            new Dictionary<TFrameworkElement, DimensionBoundProperties>();
 
         /// <summary>
         /// Set's the  <typeparamref name="TFrameworkElement"/> styling layout 
@@ -36,14 +37,20 @@ public abstract class BaseViewManager<TFrameworkElement, TLayoutShadowNode> :
         [ReactProp("transform")]
         public void SetTransform(TFrameworkElement view, JArray transforms)
         {
-            if (transforms == null && _transforms.Remove(view))
+            if (transforms == null)
             {
-                ResetProjectionMatrix(view);
-                ResetRenderTransform(view);
+                var dimensionBoundProperties = GetDimensionBoundProperties(view);
+                if (dimensionBoundProperties?.MatrixTransform != null)
+                {
+                    dimensionBoundProperties.MatrixTransform = null;
+                    ResetProjectionMatrix(view);
+                    ResetRenderTransform(view);
+                }
             }
             else
             {
-                _transforms[view] = (v, d) => SetProjectionMatrix(v, d, transforms);
+                var dimensionBoundProperties = GetOrCreateDimensionBoundProperties(view);
+                dimensionBoundProperties.MatrixTransform = transforms;
                 var dimensions = GetDimensions(view);
                 SetProjectionMatrix(view, dimensions, transforms);
             }
@@ -70,11 +77,19 @@ public void SetOverflow(TFrameworkElement view, string overflow)
         {
             if (overflow == "hidden")
             {
-                WinRTXamlToolkit.Controls.Extensions.FrameworkElementExtensions.SetClipToBounds(view, true);
+                var dimensionBoundProperties = GetOrCreateDimensionBoundProperties(view);
+                dimensionBoundProperties.OverflowHidden = true;
+                var dimensions = GetDimensions(view);
+                SetOverflowHidden(view, dimensions);
             }
             else
             {
-                WinRTXamlToolkit.Controls.Extensions.FrameworkElementExtensions.SetClipToBounds(view, false);
+                var dimensionBoundProperties = GetDimensionBoundProperties(view);
+                if (dimensionBoundProperties != null && dimensionBoundProperties.OverflowHidden)
+                {
+                    dimensionBoundProperties.OverflowHidden = false;
+                    SetOverflowVisible(view);
+                }
             }
         }
 
@@ -147,7 +162,7 @@ public override void OnDropViewInstance(ThemedReactContext reactContext, TFramew
         {
             view.PointerEntered -= OnPointerEntered;
             view.PointerExited -= OnPointerExited;
-            _transforms.Remove(view);
+            _dimensionBoundProperties.Remove(view);
         }
 
         /// <summary>
@@ -157,10 +172,17 @@ public override void OnDropViewInstance(ThemedReactContext reactContext, TFramew
         /// <param name="dimensions">The dimensions.</param>
         public override void SetDimensions(TFrameworkElement view, Dimensions dimensions)
         {
-            Action<TFrameworkElement, Dimensions> applyTransform;
-            if (_transforms.TryGetValue(view, out applyTransform))
+            var dimensionBoundProperties = GetDimensionBoundProperties(view);
+            var matrixTransform = dimensionBoundProperties?.MatrixTransform;
+            var overflowHidden = dimensionBoundProperties?.OverflowHidden ?? false;
+            if (matrixTransform != null)
+            {
+                SetProjectionMatrix(view, dimensions, matrixTransform);
+            }
+
+            if (overflowHidden)
             {
-                applyTransform(view, dimensions);
+                SetOverflowHidden(view, dimensions);
             }
 
             base.SetDimensions(view, dimensions);
@@ -197,6 +219,29 @@ private void OnPointerExited(object sender, PointerRoutedEventArgs e)
             TouchHandler.OnPointerExited(view, e);
         }
 
+        private DimensionBoundProperties GetDimensionBoundProperties(TFrameworkElement view)
+        {
+            DimensionBoundProperties properties;
+            if (!_dimensionBoundProperties.TryGetValue(view, out properties))
+            {
+                properties = null;
+            }
+
+            return properties;
+        }
+
+        private DimensionBoundProperties GetOrCreateDimensionBoundProperties(TFrameworkElement view)
+        {
+            DimensionBoundProperties properties;
+            if (!_dimensionBoundProperties.TryGetValue(view, out properties))
+            {
+                properties = new DimensionBoundProperties();
+                _dimensionBoundProperties.Add(view, properties);
+            }
+
+            return properties;
+        }
+
         private static void SetProjectionMatrix(TFrameworkElement view, Dimensions dimensions, JArray transforms)
         {
             var transformMatrix = TransformHelper.ProcessTransform(transforms);
@@ -224,12 +269,11 @@ private static void ApplyProjection(TFrameworkElement view, Matrix3D projectionM
             if (IsSimpleTranslationOnly(projectionMatrix))
             {
                 ResetProjectionMatrix(view);
-                var transform = new MatrixTransform();
+                var transform = EnsureMatrixTransform(view);
                 var matrix = transform.Matrix;
                 matrix.OffsetX = projectionMatrix.OffsetX;
                 matrix.OffsetY = projectionMatrix.OffsetY;
                 transform.Matrix = matrix;
-                view.RenderTransform = transform;
             }
             else
             {
@@ -271,6 +315,24 @@ private static void ResetRenderTransform(TFrameworkElement view)
             view.RenderTransform = null;
         }
 
+        private static MatrixTransform EnsureMatrixTransform(FrameworkElement view)
+        {
+            var transform = view.RenderTransform;
+            var matrixTransform = transform as MatrixTransform;
+            if (transform != null && matrixTransform == null)
+            {
+                throw new InvalidOperationException("Unknown transform set on framework element.");
+            }
+
+            if (matrixTransform == null)
+            {
+                matrixTransform = new MatrixTransform();
+                view.RenderTransform = matrixTransform;
+            }
+
+            return matrixTransform;
+        }
+
         private static Matrix3DProjection EnsureProjection(FrameworkElement view)
         {
             var projection = view.Projection;
@@ -288,5 +350,38 @@ private static Matrix3DProjection EnsureProjection(FrameworkElement view)
 
             return matrixProjection;
         }
+
+        private static void SetOverflowHidden(TFrameworkElement element, Dimensions dimensions)
+        {
+            if (double.IsNaN(dimensions.Width) || double.IsNaN(dimensions.Height))
+            {
+                element.Clip = null;
+            }
+            else
+            {
+                element.Clip = new RectangleGeometry
+                {
+                    Rect = new Rect
+                    {
+                        X = 0,
+                        Y = 0,
+                        Width = dimensions.Width,
+                        Height = dimensions.Height,
+                    },
+                };
+            }
+        }
+
+        private static void SetOverflowVisible(TFrameworkElement element)
+        {
+            element.Clip = null;
+        }
+
+        class DimensionBoundProperties
+        {
+            public bool OverflowHidden { get; set; }
+
+            public JArray MatrixTransform { get; set; }
+        }
     }
 }
diff --git a/ReactWindows/ReactNative/project.json b/ReactWindows/ReactNative/project.json
@@ -7,7 +7,6 @@
     "OpenCover": "4.6.519",
     "PCLStorage": "1.0.2",
     "System.Reactive": "3.1.1",
-    "WinRTXamlToolkit": "2.2.0"
   },
   "frameworks": {
     "uap10.0": {}
