diff --git a/examples/AnalogClock.re b/examples/AnalogClock.re index 24b9144bf..1aafeee4b 100644 --- a/examples/AnalogClock.re +++ b/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, - - - + + + + + , ); diff --git a/examples/Examples.re b/examples/Examples.re index d365c4ab5..414eca8c8 100644 --- a/examples/Examples.re +++ b/examples/Examples.re @@ -121,7 +121,7 @@ let state: state = { source: "OpenGLExample.re", }, ], - selectedExample: "Animation", + selectedExample: "Analog Clock", }; let getExampleByName = (state: state, example: string) => diff --git a/examples/Hello.re b/examples/Hello.re index 0d3327081..e52e68810 100644 --- a/examples/Hello.re +++ b/examples/Hello.re @@ -44,18 +44,16 @@ module Logo = { ( hooks, - + + + , ); }); @@ -101,10 +99,14 @@ module AnimatedText = { fontSize(24), marginHorizontal(8), opacity(animatedOpacity), - transform([Transform.TranslateY(translate)]), ]; - (hooks, ); + ( + hooks, + + + , + ); }); }; diff --git a/examples/Slider.re b/examples/Slider.re index 0aa9edcee..455e3d15f 100644 --- a/examples/Slider.re +++ b/examples/Slider.re @@ -65,18 +65,16 @@ module AdjustableLogo = { hooks, - + + + + + + + diff --git a/src/Revery.re b/src/Revery.re index 346e3b231..d011321eb 100644 --- a/src/Revery.re +++ b/src/Revery.re @@ -19,6 +19,7 @@ module UI = { * Revery.UI.Components */ module Components = Revery_UI_Components; + module Transform = Components.Transform; }; module Platform = { diff --git a/src/UI/Node.re b/src/UI/Node.re index 7bafee197..c31404505 100644 --- a/src/UI/Node.re +++ b/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, diff --git a/src/UI/Revery_UI.re b/src/UI/Revery_UI.re index 528e9ea8d..9536cdb6b 100644 --- a/src/UI/Revery_UI.re +++ b/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; diff --git a/src/UI/Selector.re b/src/UI/Selector.re index acff89201..c46f5124f 100644 --- a/src/UI/Selector.re +++ b/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)); diff --git a/src/UI/Style.re b/src/UI/Style.re index be23531f5..2c03d8afb 100644 --- a/src/UI/Style.re +++ b/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)) diff --git a/src/UI/Transform.re b/src/UI/TransformStyle.re similarity index 95% rename from src/UI/Transform.re rename to src/UI/TransformStyle.re index e4a169cef..e3d76244d 100644 --- a/src/UI/Transform.re +++ b/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.), diff --git a/src/UI/Transform.rei b/src/UI/TransformStyle.rei similarity index 100% rename from src/UI/Transform.rei rename to src/UI/TransformStyle.rei diff --git a/src/UI_Components/Revery_UI_Components.re b/src/UI_Components/Revery_UI_Components.re index 08938021b..01b7c9ce6 100644 --- a/src/UI_Components/Revery_UI_Components.re +++ b/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; diff --git a/src/UI_Components/ScrollView.re b/src/UI_Components/ScrollView.re index 6e5bcd4b8..41796b76c 100644 --- a/src/UI_Components/ScrollView.re +++ b/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)]> - children + + + + children + + + verticalScrollBar diff --git a/src/UI_Components/Transform.re b/src/UI_Components/Transform.re new file mode 100644 index 000000000..f0d08337a --- /dev/null +++ b/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)])]; + + ...children ; + }; +}; +module RotateX = { + let createElement = (~children, ~value, ()) => { + let style = Style.[transform([TransformStyle.RotateX(value)])]; + + ...children ; + }; +}; +module RotateY = { + let createElement = (~children, ~value, ()) => { + let style = Style.[transform([TransformStyle.RotateY(value)])]; + + ...children ; + }; +}; + +module RotateZ = { + let createElement = (~children, ~value, ()) => { + let style = Style.[transform([TransformStyle.RotateZ(value)])]; + + ...children ; + }; +}; + +module TranslateX = { + let createElement = (~children, ~value, ()) => { + let style = Style.[transform([TransformStyle.TranslateX(value)])]; + + ...children ; + }; +}; + +module TranslateY = { + let createElement = (~children, ~value, ()) => { + let style = Style.[transform([TransformStyle.TranslateY(value)])]; + + ...children ; + }; +};