[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>;
+ };
+};