Adding SimpleViewManager and BaseViewManager implementation. Fixes #81

ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java

@@ -17,7 +17,7 @@ public abstract class BaseViewManager<T extends View, C extends LayoutShadowNode
     extends ViewManager<T, C> {
 
   private static final String PROP_BACKGROUND_COLOR = ViewProps.BACKGROUND_COLOR;
-  private static final String PROP_DECOMPOSED_MATRIX = "decomposedMatrix";
+  private static final String PROP_DECOMPOSED_MATRIX = "C";
   private static final String PROP_DECOMPOSED_MATRIX_ROTATE = "rotate";
   private static final String PROP_DECOMPOSED_MATRIX_ROTATE_X = "rotateX";
   private static final String PROP_DECOMPOSED_MATRIX_ROTATE_Y = "rotateY";

ReactWindows/ReactNative/ReactNative.csproj

@@ -191,6 +191,7 @@
     <Compile Include="Touch\JSResponderHandler.cs" />
     <Compile Include="Touch\OnInterceptTouchEventListener.cs" />
     <Compile Include="UIManager\Animation\AnimationRegistry.cs" />
+    <Compile Include="UIManager\BaseViewManager.cs" />
     <Compile Include="UIManager\CatalystStylesDiffMap.cs" />
     <Compile Include="UIManager\CatalystStylesDiffMapExtensions.cs" />
     <Compile Include="UIManager\Events\Event.cs" />
@@ -210,6 +211,7 @@
     <Compile Include="UIManager\ReactPointerEventsView.cs" />
     <Compile Include="UIManager\RootViewHelper.cs" />
     <Compile Include="UIManager\RootViewManager.cs" />
+    <Compile Include="UIManager\SimpleViewManager.cs" />
     <Compile Include="UIManager\TouchTargetHelper.cs" />
     <Compile Include="UIManager\FrameworkElementExtensions.cs" />
     <Compile Include="UIManager\ICatalystInterceptingViewGroup.cs" />

ReactWindows/ReactNative/UIManager/BaseViewManager.cs

@@ -0,0 +1,147 @@
+using Newtonsoft.Json.Linq;
+using ReactNative.Views.View;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+
+namespace ReactNative.UIManager {
+    /// <summary>
+    /// Base class that should be suitable for the majority of subclasses of <see cref="ViewManager"/>.
+    /// It provides support for base view properties such as backgroundColor, opacity, etc.
+    /// </summary>
+    public abstract class BaseViewManager : ViewManager<ReactViewPanel, LayoutShadowNode>
+    {
+        private static readonly string PROP_DECOMPOSED_MATRIX_ROTATE = "rotate";
+        private static readonly string PROP_DECOMPOSED_MATRIX_ROTATE_X = "rotateX";
+        private static readonly string PROP_DECOMPOSED_MATRIX_ROTATE_Y = "rotateY";
+        private static readonly string PROP_DECOMPOSED_MATRIX_SCALE_X = "scaleX";
+        private static readonly string PROP_DECOMPOSED_MATRIX_SCALE_Y = "scaleY";
+        private static readonly string PROP_DECOMPOSED_MATRIX_TRANSLATE_X = "translateX";
+        private static readonly string PROP_DECOMPOSED_MATRIX_TRANSLATE_Y = "translateY";
+
+        /// <summary>
+        /// Sets the background color of the <see cref="ReactViewPanel"/>.
+        /// </summary>
+        /// <param name="view"></param>
+        /// <param name="backgroundColor"></param>
+       [ReactProperty("backgroundColor", CustomType="Color")]
+       public void setBackgroundColor(ReactViewPanel view, string backgroundColor)
+        {
+            view.SetBackgroundColor(backgroundColor);
+        }
+
+        /// <summary>
+        /// Set's the <see cref="ReactViewPanel"/> styling layout properties, based on the <see cref="JObject"/> map.
+        /// </summary>
+        /// <param name="view">The view to style.</param>
+        /// <param name="decomposedMatrix">The requested styling properties to set.</param>
+        [ReactProperty("C")]
+        public void setDecomposedMatrix(ReactViewPanel view, JObject decomposedMatrix)
+        {
+            if (decomposedMatrix == null)
+            {
+                resetTransformMatrix(view);
+            }
+            else {
+                setTransformMatrix(view, decomposedMatrix);
+            }
+        }
+
+        /// <summary>
+        /// Sets the opacity of the <see cref="ReactViewPanel"/>.
+        /// </summary>
+        /// <param name="view">The WPF view panel.</param>
+        /// <param name="opacity"></param>
+        [ReactProperty("opacity", DefaultFloat = 1)]
+        public void setOpacity(ReactViewPanel view, float opacity)
+        {
+            view.Opacity = opacity;
+        }
+
+        /// <summary>
+        /// Sets the scaleX property of the <see cref="ReactViewPanel"/>.
+        /// </summary>
+        /// <param name="view">The WPF view panel.</param>
+        /// <param name="factor">The scaling factor.</param>
+        [ReactProperty("scaleX", DefaultFloat = 1)]
+        public void setScaleX(ReactViewPanel view, float factor)
+        {
+            view.setScaleX(factor);
+        }
+
+        /// <summary>
+        /// Sets the scaleY property of the <see cref="ReactViewPanel"/>.
+        /// </summary>
+        /// <param name="view">The WPF view panel.</param>
+        /// <param name="factor">The scaling factor.</param>
+        [ReactProperty("scaleY", DefaultFloat = 1)]
+        public void setScaleY(ReactViewPanel view, float factor)
+        {
+            view.setScaleY(factor);
+        }
+
+        /// <summary>
+        /// Sets the translateX property of the <see cref="ReactViewPanel"/>.
+        /// </summary>
+        /// <param name="view">The WPF view panel.</param>
+        /// <param name="factor">The scaling factor.</param>
+        [ReactProperty("translationX", DefaultFloat = 1)]
+        public void setTranslationX(ReactViewPanel view, float distance)
+        {
+            view.setTranslationX(distance);
+        }
+
+        /// <summary>
+        /// Sets the translateY property of the <see cref="ReactViewPanel"/>.
+        /// </summary>
+        /// <param name="view">The WPF view panel.</param>
+        /// <param name="factor">The scaling factor.</param>
+        [ReactProperty("translationY", DefaultFloat = 1)]
+        public void setTranslationY(ReactViewPanel view, float distance)
+        {
+            view.setTranslationY(distance);
+        }
+
+        /// <summary>
+        /// Retrieves the property using the given name and type.
+        /// </summary>
+        /// <param name="decomposedMatrix">The JSON property map.</param>
+        /// <param name="name">The property name.</param>
+        /// <param name="type">The property type.</param>
+        /// <returns></returns>
+        public static object GetProperty(JObject decomposedMatrix, string name, Type type)
+        {
+            var token = default(JToken);
+            if (decomposedMatrix.TryGetValue(name, out token))
+            {
+                return token.ToObject(type);
+            }
+
+            return null;
+        }
+
+        private static void setTransformMatrix(ReactViewPanel view, JObject matrix)
+        {
+            view.setTranslationX((float)GetProperty(matrix, PROP_DECOMPOSED_MATRIX_TRANSLATE_X, typeof(float)));
+            view.setTranslationY((float)GetProperty(matrix, PROP_DECOMPOSED_MATRIX_TRANSLATE_Y, typeof(float)));
+            view.setRotationX((float)GetProperty(matrix, PROP_DECOMPOSED_MATRIX_ROTATE_X, typeof(float)));
+            view.setRotationY((float)GetProperty(matrix, PROP_DECOMPOSED_MATRIX_ROTATE_Y, typeof(float)));
+            view.setScaleY((float)GetProperty(matrix, PROP_DECOMPOSED_MATRIX_SCALE_Y, typeof(float)));
+            view.setScaleX((float)GetProperty(matrix, PROP_DECOMPOSED_MATRIX_SCALE_X, typeof(float)));
+        }
+
+        private static void resetTransformMatrix(ReactViewPanel view)
+        {
+            view.setTranslationX(0);
+            view.setTranslationY(0);
+            view.setRotationX(0);
+            view.setRotationY(0);
+            view.setScaleX(1);
+            view.setScaleY(1);
+        }
+    }
+}

ReactWindows/ReactNative/UIManager/SimpleViewManager.cs

@@ -0,0 +1,34 @@
+using ReactNative.Views.View;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Windows.UI.Xaml;
+
+namespace ReactNative.UIManager
+{
+    /// <summary>
+    /// Common base class for most of the <see cref="ViewManager"/>s. 
+    /// It provides support for most common properties through extending <see cref="BaseViewManager"/>.
+    /// </summary>
+    public abstract class SimpleViewManager : BaseViewManager
+    {
+        /// <summary>
+        /// Creates a <see cref="LayoutShadowNode"/> instance.
+        /// </summary>
+        /// <returns></returns>
+        public override ReactShadowNode CreateShadowNodeInstance()
+        {
+            return new LayoutShadowNode();
+        }
+
+        public override Type ShadowNodeType
+        {
+            get
+            {
+                return typeof(LayoutShadowNode);
+            }
+        }
+    }
+}

ReactWindows/ReactNative/UIManager/ViewManager.Generic.cs

@@ -25,7 +25,7 @@ public abstract class ViewManager<TFrameworkElement, TReactShadowNode> : ViewMan
         /// collect properties exposed using the <see cref="ReactPropertyAttribute"/>
         /// annotation from the <see cref="ReactShadowNode"/> subclass.
         /// </summary>
-        public sealed override Type ShadowNodeType
+        public override Type ShadowNodeType
         {
             get
             {
@@ -43,7 +43,7 @@ public sealed override Type ShadowNodeType
         /// <see cref="ReactShadowNode"/>.
         /// </remarks>
         /// <returns>The shadow node instance.</returns>
-        public sealed override ReactShadowNode CreateShadowNodeInstance()
+        public override ReactShadowNode CreateShadowNodeInstance()
         {
             return CreateShadowNodeInstanceCore();
         }
@@ -84,7 +84,7 @@ public sealed override void ReceiveCommand(FrameworkElement view, int commandId,
         /// </summary>
         /// <param name="root">The root view.</param>
         /// <param name="extraData">The extra data.</param>
-        public sealed override void UpdateExtraData(FrameworkElement root, object extraData)
+        public override void UpdateExtraData(FrameworkElement root, object extraData)
         {
             UpdateExtraData((TFrameworkElement)root, extraData);
         }

ReactWindows/ReactNative/Views/View/ReactViewPanel.cs

@@ -76,7 +76,7 @@ private void OnInterceptTouchEvent(object sender, PointerRoutedEventArgs ev)
             _OnInterceptTouchEventListener.onInterceptTouchEvent(sender, ev);
         }
 
-        protected void SetBackgroundColor(string color)
+        public void SetBackgroundColor(string color)
         {
             this.Background = ParseColor(color);
         }
@@ -146,15 +146,80 @@ public void SetBorderPadding(float thickness)
         }
 
         /// <summary>
-        /// Sets an elevation 3D transformatin effect on the <see cref="ReactViewPanel"/>.
+        /// Sets an elevation 3D transformation effect on the <see cref="ReactViewPanel"/>.
         /// </summary>
         /// <param name="elevation">The positive negative elevation Z Index value of the view.</param>
         public void SetElevationEffect(float elevation)
         {
             _Transform.TranslateZ = elevation;
             this.Transform3D = _Transform;
         }
-
+
+        /// <summary>
+        /// Sets the distance to translate along the x-axis in pixels of the view panel.
+        /// </summary>
+        /// <param name="distance">The translation distance value along the x-axis.</param>
+        public void setTranslationX(float distance)
+        {
+            _Transform.TranslateX = distance;
+            this.Transform3D = _Transform;
+        }
+
+        /// <summary>
+        /// Sets the angle in degrees of clockwise rotation around the x-axis 
+        /// of the view panel.
+        /// </summary>
+        /// <param name="degrees">The x-axis rotation degrees.</param>
+        public void setRotationX(float degrees)
+        {
+            _Transform.RotationX = degrees;
+            this.Transform3D = _Transform;
+        }
+
+        /// <summary>
+        /// Sets the angle in degrees of clockwise rotation around the y-axis 
+        /// of the view panel.
+        /// </summary>
+        /// <param name="degrees">The y-axis rotation degrees.</param>
+        public void setRotationY(float degrees)
+        {
+            _Transform.RotationY = degrees;
+            this.Transform3D = _Transform;
+        }
+
+
+        /// <summary>
+        /// Sets the distance to translate along the y-axis in pixels of the view panel.
+        /// </summary>
+        /// <param name="value">The translation distance value along the y-axis.</param>
+        public void setTranslationY(float value)
+        {
+            _Transform.TranslateY = value;
+            this.Transform3D = _Transform;
+        }
+
+        /// <summary>
+        /// Sets the y-axis scale factor. You can use this property to stretch or shrink 
+        /// the panel  along the y-axis.
+        /// </summary>
+        /// <param name="factor">The y-axis scale factor.</param>
+        public void setScaleY(float factor)
+        {
+            _Transform.ScaleY = factor;
+            this.Transform3D = _Transform;
+        }
+
+        /// <summary>
+        /// Sets the y-axis scale factor. You can use this property to stretch or shrink 
+        /// the panel  along the x-axis.
+        /// </summary>
+        /// <param name="factor">The x-axis scale factor.</param>
+        public void setScaleX(float factor)
+        {
+            _Transform.ScaleX = factor;
+            this.Transform3D = _Transform;
+        }
+
         /// <summary>
         /// Retrieves the number of subviews for the current <see cref="ReactViewPanel"/> view.
         /// </summary>