fix(BaseViewManager): Ensure transform is applied from view center (microsoft#1202)

rozele · web-flow · commit 655dcce01485 · 2017-07-17T12:40:02.000-04:00
We needed to include a hack that applied the transform matrices from the center of the view as opposed to from the top left corner of the view. In some cases, this hack was not applied because the width and height of the view had not yet been set by the layout engine. To work around this, we apply the transforms any time the dimensions of the view are updated. Fixes microsoft#1182
diff --git a/ReactWindows/ReactNative.Shared/UIManager/ViewManager.cs b/ReactWindows/ReactNative.Shared/UIManager/ViewManager.cs
@@ -172,7 +172,7 @@ public Dimensions GetDimensions(TFrameworkElement view)
             return new Dimensions
             {
                 X = Canvas.GetLeft(view),
-                Y = Canvas.GetLeft(view),
+                Y = Canvas.GetTop(view),
                 Width = view.Width,
                 Height = view.Height,
             };
diff --git a/ReactWindows/ReactNative/UIManager/BaseViewManager.cs b/ReactWindows/ReactNative/UIManager/BaseViewManager.cs
@@ -2,6 +2,7 @@
 using ReactNative.Touch;
 using ReactNative.UIManager.Annotations;
 using System;
+using System.Collections.Generic;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Automation;
 using Windows.UI.Xaml.Automation.Peers;
@@ -23,6 +24,9 @@ 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>>();
+
         /// <summary>
         /// Set's the  <typeparamref name="TFrameworkElement"/> styling layout 
         /// properties, based on the <see cref="JObject"/> map.
@@ -32,14 +36,16 @@ public abstract class BaseViewManager<TFrameworkElement, TLayoutShadowNode> :
         [ReactProp("transform")]
         public void SetTransform(TFrameworkElement view, JArray transforms)
         {
-            if (transforms == null)
+            if (transforms == null && _transforms.Remove(view))
             {
                 ResetProjectionMatrix(view);
                 ResetRenderTransform(view);
             }
             else
             {
-                SetProjectionMatrix(view, transforms);
+                _transforms[view] = (v, d) => SetProjectionMatrix(v, d, transforms);
+                var dimensions = GetDimensions(view);
+                SetProjectionMatrix(view, dimensions, transforms);
             }
         }
 
@@ -141,6 +147,23 @@ public override void OnDropViewInstance(ThemedReactContext reactContext, TFramew
         {
             view.PointerEntered -= OnPointerEntered;
             view.PointerExited -= OnPointerExited;
+            _transforms.Remove(view);
+        }
+
+        /// <summary>
+        /// Sets the dimensions of the view.
+        /// </summary>
+        /// <param name="view">The view.</param>
+        /// <param name="dimensions">The dimensions.</param>
+        public override void SetDimensions(TFrameworkElement view, Dimensions dimensions)
+        {
+            Action<TFrameworkElement, Dimensions> applyTransform;
+            if (_transforms.TryGetValue(view, out applyTransform))
+            {
+                applyTransform(view, dimensions);
+            }
+
+            base.SetDimensions(view, dimensions);
         }
 
         /// <summary>
@@ -174,22 +197,22 @@ private void OnPointerExited(object sender, PointerRoutedEventArgs e)
             TouchHandler.OnPointerExited(view, e);
         }
 
-        private static void SetProjectionMatrix(TFrameworkElement view, JArray transforms)
+        private static void SetProjectionMatrix(TFrameworkElement view, Dimensions dimensions, JArray transforms)
         {
             var transformMatrix = TransformHelper.ProcessTransform(transforms);
 
             var translateMatrix = Matrix3D.Identity;
             var translateBackMatrix = Matrix3D.Identity;
-            if (!double.IsNaN(view.Width))
+            if (!double.IsNaN(dimensions.Width))
             {
-                translateMatrix.OffsetX = -view.Width / 2;
-                translateBackMatrix.OffsetX = view.Width / 2;
+                translateMatrix.OffsetX = -dimensions.Width / 2;
+                translateBackMatrix.OffsetX = dimensions.Width / 2;
             }
 
-            if (!double.IsNaN(view.Height))
+            if (!double.IsNaN(dimensions.Height))
             {
-                translateMatrix.OffsetY = -view.Height / 2;
-                translateBackMatrix.OffsetY = view.Height / 2;
+                translateMatrix.OffsetY = -dimensions.Height / 2;
+                translateBackMatrix.OffsetY = dimensions.Height / 2;
             }
 
             var projectionMatrix = translateMatrix * transformMatrix * translateBackMatrix;

Original file line number	Diff line number	Diff line change
`@@ -172,7 +172,7 @@ public Dimensions GetDimensions(TFrameworkElement view)`
`172`	`172`	`return new Dimensions`
`173`	`173`	`{`
`174`	`174`	`X = Canvas.GetLeft(view),`
`175`		`- Y = Canvas.GetLeft(view),`
	`175`	`+ Y = Canvas.GetTop(view),`
`176`	`176`	`Width = view.Width,`
`177`	`177`	`Height = view.Height,`
`178`	`178`	`};`