[WIP] API: Transform composite component

examples/AnalogClock.re

@@ -81,25 +81,20 @@ module AnalogClock = {
         Style.[
           border(~width=4, ~color=Colors.white),
           height(300),
-          padding(15),
           position(`Relative),
           width(300),
         ];
 
-      let clockPointer = Style.[position(`Absolute), left(150)];
+      let clockPointer = Style.[];
 
       let hourStyle =
         Style.(
           merge(
             ~source=clockPointer,
             ~target=[
+		      position(`Absolute),
               backgroundColor(Colors.white),
               height(90),
-              top(105),
-              transform([
-                Transform.Rotate(Angle.from_degrees(hourDegrees)),
-                Transform.TranslateY(-45.),
-              ]),
               width(4),
             ],
           )
@@ -110,42 +105,30 @@ module AnalogClock = {
           merge(
             ~source=clockPointer,
             ~target=[
+		      position(`Absolute),
               backgroundColor(Colors.white),
               height(120),
-              top(90),
-              transform([
-                Transform.Rotate(Angle.from_degrees(minuteDegrees)),
-                Transform.TranslateY(-60.),
-              ]),
               width(4),
             ],
           )
         );
 
       let secondsStyle =
-        Style.(
-          merge(
-            ~source=clockPointer,
-            ~target=[
+        Style.[
               backgroundColor(Colors.red),
               height(150),
-              top(75),
-              transform([
-                Transform.Rotate(Angle.from_degrees(secondDegrees)),
-                Transform.TranslateY(-75.),
-              ]),
-              width(2),
-            ],
-          )
-        );
+              width(150),
+            ];
 
       (
         slots,
         <View style=containerStyle>
           <View style=clockContainer>
-            <View style=secondsStyle />
-            <View style=minutesStyle />
-            <View style=hourStyle />
+              <Transform.Rotate value={Angle.from_degrees(secondDegrees *. 2.)}>
+                <View style=secondsStyle />
+              </Transform.Rotate>
+                <View style=minutesStyle />
+                <View style=hourStyle />
           </View>
         </View>,
       );

examples/Examples.re

@@ -121,7 +121,7 @@ let state: state = {
       source: "OpenGLExample.re",
     },
   ],
-  selectedExample: "Animation",
+  selectedExample: "Analog Clock",
 };
 
 let getExampleByName = (state: state, example: string) =>

examples/Hello.re

@@ -44,18 +44,16 @@ module Logo = {
       (
         hooks,
         <View onMouseDown onMouseUp>
-          <Image
-            src="outrun-logo.png"
-            style=Style.[
-              width(512),
-              height(256),
-              opacity(logoOpacity),
-              transform([
-                Transform.RotateY(Angle.from_radians(rotationY)),
-                Transform.RotateX(Angle.from_radians(rotation)),
-              ]),
-            ]
-          />
+          <Revery_UI_Components.Transform.Rotate value={Radians(rotationY)}>
+            <Image
+              src="outrun-logo.png"
+              style=Style.[width(512), height(256), opacity(logoOpacity)]
+              /*transform([
+                  Transform.RotateY(Angle.from_radians(rotationY)),
+                  Transform.RotateX(Angle.from_radians(rotation)),
+                ]),*/
+            />
+          </Revery_UI_Components.Transform.Rotate>
         </View>,
       );
     });
@@ -101,10 +99,14 @@ module AnimatedText = {
           fontSize(24),
           marginHorizontal(8),
           opacity(animatedOpacity),
-          transform([Transform.TranslateY(translate)]),
         ];
 
-      (hooks, <Text style=textHeaderStyle text />);
+      (
+        hooks,
+        <Transform.TranslateY value=translate>
+          <Text style=textHeaderStyle text />
+        </Transform.TranslateY>,
+      );
     });
 };
 

examples/Slider.re

@@ -65,18 +65,16 @@ module AdjustableLogo = {
         hooks,
         <View style=containerStyle>
           <View>
-            <Image
-              src="outrun-logo.png"
-              style=Style.[
-                width(512),
-                height(256),
-                transform([
-                  Transform.RotateZ(Angle.from_radians(rotationZ)),
-                  Transform.RotateY(Angle.from_radians(rotationY)),
-                  Transform.RotateX(Angle.from_radians(rotationX)),
-                ]),
-              ]
-            />
+            <Transform.RotateZ value={Angle.from_radians(rotationZ)}>
+              <Transform.RotateY value={Angle.from_radians(rotationY)}>
+                <Transform.RotateX value={Angle.from_radians(rotationX)}>
+                  <Image
+                    src="outrun-logo.png"
+                    style=Style.[width(512), height(256)]
+                  />
+                </Transform.RotateX>
+              </Transform.RotateY>
+            </Transform.RotateZ>
           </View>
           <View style=controlsStyle>
             <View style=verticalSliderContainerStyle>

src/Revery.re

@@ -19,6 +19,7 @@ module UI = {
    * Revery.UI.Components
    */
   module Components = Revery_UI_Components;
+  module Transform = Components.Transform;
 };
 
 module Platform = {

src/UI/Node.re

@@ -139,7 +139,7 @@ class node (()) = {
       ),
     );
     let animationTransform =
-      Transform.toMat4(
+      TransformStyle.toMat4(
         float_of_int(dimensions.width) /. 2.,
         float_of_int(dimensions.height) /. 2.,
         _this#getStyle().transform,

src/UI/Revery_UI.re

@@ -10,8 +10,8 @@ module ImageResizeMode = ImageResizeMode;
 module Layout = Layout;
 module LayoutTypes = Layout.LayoutTypes;
 module Style = Style;
-module Transform = Transform;
 module Selector = Selector;
+module TransformStyle = TransformStyle;
 
 class node = class Node.node;
 class viewNode = class ViewNode.viewNode;

src/UI/Selector.re

@@ -44,7 +44,7 @@ type selector('a) =
   | Border: selector(Border.t)
   | BorderHorizontal: selector(Border.t)
   | BorderVertical: selector(Border.t)
-  | Transform: selector(list(Transform.t))
+  | Transform: selector(list(TransformStyle.t))
   | Opacity: selector(float)
   | BoxShadow: selector(BoxShadow.properties)
   | Cursor: selector(option(MouseCursors.t));

src/UI/Style.re

@@ -76,7 +76,7 @@ type t = {
   borderHorizontal: Border.t,
   borderVertical: Border.t,
   borderRadius: float,
-  transform: list(Transform.t),
+  transform: list(TransformStyle.t),
   opacity: float,
   boxShadow: BoxShadow.properties,
   cursor: option(MouseCursors.t),
@@ -316,7 +316,7 @@ type coreStyleProps = [
   | `BorderHorizontal(Border.t)
   | `BorderVertical(Border.t)
   | `BorderRadius(float)
-  | `Transform(list(Transform.t))
+  | `Transform(list(TransformStyle.t))
   | `Opacity(float)
   | `BoxShadow(BoxShadow.properties)
   | `Cursor(option(MouseCursors.t))

src/UI/Transform.re → src/UI/TransformStyle.re

@@ -21,6 +21,9 @@ let _rotateWithOrigin = (x: float, y: float, angle, axis, m: Mat4.t) => {
   let postTranslate = Mat4.create();
   let rotation = Mat4.create();
 
+	prerr_endline ("X: " ++ string_of_float(x));
+	prerr_endline ("Y: " ++ string_of_float(y));
+
   Mat4.fromTranslation(
     preTranslate,
     Vec3.create((-1.) *. x, (-1.) *. y, 0.),

src/UI_Components/Revery_UI_Components.re

@@ -14,5 +14,6 @@ module Slider = Slider;
 module Input = Input;
 module RadioButtons = RadioButtons;
 module Checkbox = Checkbox;
+module Transform = Transform;
 module Tree = Tree;
 module Dropdown = Dropdown;

src/UI_Components/ScrollView.re

@@ -1,6 +1,5 @@
 open Revery_Core;
 open Revery_UI;
-open Revery_UI.Transform;
 
 type direction =
   | Top
@@ -46,10 +45,8 @@ let make =
 
     let scrollBarThickness = 10;
 
-    let innerViewTransform = [
-      TranslateX((-1.) *. float_of_int(actualScrollLeft)),
-      TranslateY((-1.) *. float_of_int(actualScrollTop)),
-    ];
+    let translateX = (-1.) *. float_of_int(actualScrollLeft);
+    let translateY = (-1.) *. float_of_int(actualScrollTop);
 
     let (horizontalScrollBar, verticalScrollBar, scroll) =
       switch (outerRef) {
@@ -189,7 +186,6 @@ let make =
 
     let innerStyle =
       Style.[
-        transform(innerViewTransform),
         position(`Absolute),
         top(0),
         /* TODO: #287 This styling will need to be adjusted to handle horizontal scrolling */
@@ -222,7 +218,13 @@ let make =
           onMouseWheel=scroll
           ref={r => setOuterRef(Some(r))}
           style=Style.[flexGrow(1), position(`Relative), overflow(`Scroll)]>
-          <View style=innerStyle> children </View>
+          <View style=innerStyle>
+            <Transform.TranslateX value=translateX>
+              <Transform.TranslateY value=translateY>
+                children
+              </Transform.TranslateY>
+            </Transform.TranslateX>
+          </View>
           <View style=verticalScrollbarContainerStyle>
             verticalScrollBar
           </View>

src/UI_Components/Transform.re

@@ -0,0 +1,47 @@
+open Revery_UI;
+
+module Rotate = {
+  let createElement = (~children, ~value, ()) => {
+    let style = Style.[transform([TransformStyle.Rotate(value)])];
+
+    <View style> ...children </View>;
+  };
+};
+module RotateX = {
+  let createElement = (~children, ~value, ()) => {
+    let style = Style.[transform([TransformStyle.RotateX(value)])];
+
+    <View style> ...children </View>;
+  };
+};
+module RotateY = {
+  let createElement = (~children, ~value, ()) => {
+    let style = Style.[transform([TransformStyle.RotateY(value)])];
+
+    <View style> ...children </View>;
+  };
+};
+
+module RotateZ = {
+  let createElement = (~children, ~value, ()) => {
+    let style = Style.[transform([TransformStyle.RotateZ(value)])];
+
+    <View style> ...children </View>;
+  };
+};
+
+module TranslateX = {
+  let createElement = (~children, ~value, ()) => {
+    let style = Style.[transform([TransformStyle.TranslateX(value)])];
+
+    <View style> ...children </View>;
+  };
+};
+
+module TranslateY = {
+  let createElement = (~children, ~value, ()) => {
+    let style = Style.[transform([TransformStyle.TranslateY(value)])];
+
+    <View style> ...children </View>;
+  };
+};