diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java index 9a697ce3a54..e758ac48a13 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/BaseViewManager.java @@ -17,7 +17,7 @@ public abstract class BaseViewManager { 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"; diff --git a/ReactWindows/ReactNative/ReactNative.csproj b/ReactWindows/ReactNative/ReactNative.csproj index ad2928d6bda..5fc513da0d3 100644 --- a/ReactWindows/ReactNative/ReactNative.csproj +++ b/ReactWindows/ReactNative/ReactNative.csproj @@ -191,6 +191,7 @@ + @@ -210,6 +211,7 @@ + diff --git a/ReactWindows/ReactNative/UIManager/BaseViewManager.cs b/ReactWindows/ReactNative/UIManager/BaseViewManager.cs new file mode 100644 index 00000000000..03e7c313fa5 --- /dev/null +++ b/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 { + /// + /// Base class that should be suitable for the majority of subclasses of . + /// It provides support for base view properties such as backgroundColor, opacity, etc. + /// + public abstract class BaseViewManager : ViewManager + { + 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"; + + /// + /// Sets the background color of the . + /// + /// + /// + [ReactProperty("backgroundColor", CustomType="Color")] + public void setBackgroundColor(ReactViewPanel view, string backgroundColor) + { + view.SetBackgroundColor(backgroundColor); + } + + /// + /// Set's the styling layout properties, based on the map. + /// + /// The view to style. + /// The requested styling properties to set. + [ReactProperty("C")] + public void setDecomposedMatrix(ReactViewPanel view, JObject decomposedMatrix) + { + if (decomposedMatrix == null) + { + resetTransformMatrix(view); + } + else { + setTransformMatrix(view, decomposedMatrix); + } + } + + /// + /// Sets the opacity of the . + /// + /// The WPF view panel. + /// + [ReactProperty("opacity", DefaultFloat = 1)] + public void setOpacity(ReactViewPanel view, float opacity) + { + view.Opacity = opacity; + } + + /// + /// Sets the scaleX property of the . + /// + /// The WPF view panel. + /// The scaling factor. + [ReactProperty("scaleX", DefaultFloat = 1)] + public void setScaleX(ReactViewPanel view, float factor) + { + view.setScaleX(factor); + } + + /// + /// Sets the scaleY property of the . + /// + /// The WPF view panel. + /// The scaling factor. + [ReactProperty("scaleY", DefaultFloat = 1)] + public void setScaleY(ReactViewPanel view, float factor) + { + view.setScaleY(factor); + } + + /// + /// Sets the translateX property of the . + /// + /// The WPF view panel. + /// The scaling factor. + [ReactProperty("translationX", DefaultFloat = 1)] + public void setTranslationX(ReactViewPanel view, float distance) + { + view.setTranslationX(distance); + } + + /// + /// Sets the translateY property of the . + /// + /// The WPF view panel. + /// The scaling factor. + [ReactProperty("translationY", DefaultFloat = 1)] + public void setTranslationY(ReactViewPanel view, float distance) + { + view.setTranslationY(distance); + } + + /// + /// Retrieves the property using the given name and type. + /// + /// The JSON property map. + /// The property name. + /// The property type. + /// + 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); + } + } +} diff --git a/ReactWindows/ReactNative/UIManager/SimpleViewManager.cs b/ReactWindows/ReactNative/UIManager/SimpleViewManager.cs new file mode 100644 index 00000000000..8e91654a09c --- /dev/null +++ b/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 +{ + /// + /// Common base class for most of the s. + /// It provides support for most common properties through extending . + /// + public abstract class SimpleViewManager : BaseViewManager + { + /// + /// Creates a instance. + /// + /// + public override ReactShadowNode CreateShadowNodeInstance() + { + return new LayoutShadowNode(); + } + + public override Type ShadowNodeType + { + get + { + return typeof(LayoutShadowNode); + } + } + } +} diff --git a/ReactWindows/ReactNative/UIManager/ViewManager.Generic.cs b/ReactWindows/ReactNative/UIManager/ViewManager.Generic.cs index 92fb38e9e8b..dd95a706949 100644 --- a/ReactWindows/ReactNative/UIManager/ViewManager.Generic.cs +++ b/ReactWindows/ReactNative/UIManager/ViewManager.Generic.cs @@ -25,7 +25,7 @@ public abstract class ViewManager : ViewMan /// collect properties exposed using the /// annotation from the subclass. /// - public sealed override Type ShadowNodeType + public override Type ShadowNodeType { get { @@ -43,7 +43,7 @@ public sealed override Type ShadowNodeType /// . /// /// The shadow node instance. - public sealed override ReactShadowNode CreateShadowNodeInstance() + public override ReactShadowNode CreateShadowNodeInstance() { return CreateShadowNodeInstanceCore(); } @@ -84,7 +84,7 @@ public sealed override void ReceiveCommand(FrameworkElement view, int commandId, /// /// The root view. /// The extra data. - public sealed override void UpdateExtraData(FrameworkElement root, object extraData) + public override void UpdateExtraData(FrameworkElement root, object extraData) { UpdateExtraData((TFrameworkElement)root, extraData); } diff --git a/ReactWindows/ReactNative/Views/View/ReactViewPanel.cs b/ReactWindows/ReactNative/Views/View/ReactViewPanel.cs index 63f661ad032..f1652bdbb8b 100644 --- a/ReactWindows/ReactNative/Views/View/ReactViewPanel.cs +++ b/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,7 +146,7 @@ public void SetBorderPadding(float thickness) } /// - /// Sets an elevation 3D transformatin effect on the . + /// Sets an elevation 3D transformation effect on the . /// /// The positive negative elevation Z Index value of the view. public void SetElevationEffect(float elevation) @@ -154,7 +154,72 @@ public void SetElevationEffect(float elevation) _Transform.TranslateZ = elevation; this.Transform3D = _Transform; } - + + /// + /// Sets the distance to translate along the x-axis in pixels of the view panel. + /// + /// The translation distance value along the x-axis. + public void setTranslationX(float distance) + { + _Transform.TranslateX = distance; + this.Transform3D = _Transform; + } + + /// + /// Sets the angle in degrees of clockwise rotation around the x-axis + /// of the view panel. + /// + /// The x-axis rotation degrees. + public void setRotationX(float degrees) + { + _Transform.RotationX = degrees; + this.Transform3D = _Transform; + } + + /// + /// Sets the angle in degrees of clockwise rotation around the y-axis + /// of the view panel. + /// + /// The y-axis rotation degrees. + public void setRotationY(float degrees) + { + _Transform.RotationY = degrees; + this.Transform3D = _Transform; + } + + + /// + /// Sets the distance to translate along the y-axis in pixels of the view panel. + /// + /// The translation distance value along the y-axis. + public void setTranslationY(float value) + { + _Transform.TranslateY = value; + this.Transform3D = _Transform; + } + + /// + /// Sets the y-axis scale factor. You can use this property to stretch or shrink + /// the panel along the y-axis. + /// + /// The y-axis scale factor. + public void setScaleY(float factor) + { + _Transform.ScaleY = factor; + this.Transform3D = _Transform; + } + + /// + /// Sets the y-axis scale factor. You can use this property to stretch or shrink + /// the panel along the x-axis. + /// + /// The x-axis scale factor. + public void setScaleX(float factor) + { + _Transform.ScaleX = factor; + this.Transform3D = _Transform; + } + /// /// Retrieves the number of subviews for the current view. ///