From 920a4ecabcdfdef87690134e393fcd5aa1c20f19 Mon Sep 17 00:00:00 2001 From: bryphe Date: Fri, 10 May 2019 15:56:09 -0700 Subject: [PATCH 1/4] Refactor Transform --- src/UI/Node.re | 2 +- src/UI/Revery_UI.re | 1 - src/UI/Selector.re | 2 +- src/UI/Style.re | 4 ++-- src/UI/{Transform.re => TransformStyle.re} | 0 src/UI/{Transform.rei => TransformStyle.rei} | 0 src/UI_Components/Revery_UI_Components.re | 1 + src/UI_Components/ScrollView.re | 15 +++++++++------ src/UI_Components/Transform.re | 19 +++++++++++++++++++ 9 files changed, 33 insertions(+), 11 deletions(-) rename src/UI/{Transform.re => TransformStyle.re} (100%) rename src/UI/{Transform.rei => TransformStyle.rei} (100%) create mode 100644 src/UI_Components/Transform.re 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..90c3d2173 100644 --- a/src/UI/Revery_UI.re +++ b/src/UI/Revery_UI.re @@ -10,7 +10,6 @@ module ImageResizeMode = ImageResizeMode; module Layout = Layout; module LayoutTypes = Layout.LayoutTypes; module Style = Style; -module Transform = Transform; module Selector = Selector; class node = class Node.node; 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 100% rename from src/UI/Transform.re rename to src/UI/TransformStyle.re 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..1c4d455b9 100644 --- a/src/UI_Components/ScrollView.re +++ b/src/UI_Components/ScrollView.re @@ -46,10 +46,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 +187,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 +219,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..42ce8bb97 --- /dev/null +++ b/src/UI_Components/Transform.re @@ -0,0 +1,19 @@ +open Revery_UI; + + +module Rotate = { + +let createElement = (~children, ~value, ()) => { + let style = Style.[transform(Transform.Rotate(value))]; + + ...children ; + }; +}; + +module TranslateY = { +let createElement = (~children, ~value, ()) => { + let style = Style.[transform(Transform.TranslateY(value))]; + + ...children ; + }; +}; From 7b6136aa171409031e752ddefad23dd9a6a82098 Mon Sep 17 00:00:00 2001 From: bryphe Date: Fri, 10 May 2019 16:22:17 -0700 Subject: [PATCH 2/4] Formatting --- examples/AnalogClock.re | 30 ++++++++++++++--------------- examples/Hello.re | 9 +++++---- examples/Slider.re | 11 ++++++----- src/Revery.re | 1 + src/UI/Revery_UI.re | 1 + src/UI_Components/ScrollView.re | 1 - src/UI_Components/Transform.re | 34 +++++++++++++++++++++++++++++++-- 7 files changed, 60 insertions(+), 27 deletions(-) diff --git a/examples/AnalogClock.re b/examples/AnalogClock.re index 24b9144bf..09f959395 100644 --- a/examples/AnalogClock.re +++ b/examples/AnalogClock.re @@ -96,10 +96,6 @@ module AnalogClock = { backgroundColor(Colors.white), height(90), top(105), - transform([ - Transform.Rotate(Angle.from_degrees(hourDegrees)), - Transform.TranslateY(-45.), - ]), width(4), ], ) @@ -113,10 +109,6 @@ module AnalogClock = { backgroundColor(Colors.white), height(120), top(90), - transform([ - Transform.Rotate(Angle.from_degrees(minuteDegrees)), - Transform.TranslateY(-60.), - ]), width(4), ], ) @@ -130,10 +122,6 @@ module AnalogClock = { backgroundColor(Colors.red), height(150), top(75), - transform([ - Transform.Rotate(Angle.from_degrees(secondDegrees)), - Transform.TranslateY(-75.), - ]), width(2), ], ) @@ -143,9 +131,21 @@ module AnalogClock = { slots, - - - + + + + + + + + + + + + + + + , ); diff --git a/examples/Hello.re b/examples/Hello.re index 0d3327081..d8334e755 100644 --- a/examples/Hello.re +++ b/examples/Hello.re @@ -44,18 +44,20 @@ module Logo = { ( hooks, + + , ); }); @@ -101,10 +103,9 @@ 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..c24a492d8 100644 --- a/examples/Slider.re +++ b/examples/Slider.re @@ -65,18 +65,19 @@ 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/Revery_UI.re b/src/UI/Revery_UI.re index 90c3d2173..9536cdb6b 100644 --- a/src/UI/Revery_UI.re +++ b/src/UI/Revery_UI.re @@ -11,6 +11,7 @@ module Layout = Layout; module LayoutTypes = Layout.LayoutTypes; module Style = Style; module Selector = Selector; +module TransformStyle = TransformStyle; class node = class Node.node; class viewNode = class ViewNode.viewNode; diff --git a/src/UI_Components/ScrollView.re b/src/UI_Components/ScrollView.re index 1c4d455b9..ba11a6e0f 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 diff --git a/src/UI_Components/Transform.re b/src/UI_Components/Transform.re index 42ce8bb97..c0729a9b6 100644 --- a/src/UI_Components/Transform.re +++ b/src/UI_Components/Transform.re @@ -4,7 +4,37 @@ open Revery_UI; module Rotate = { let createElement = (~children, ~value, ()) => { - let style = Style.[transform(Transform.Rotate(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 ; }; @@ -12,7 +42,7 @@ let createElement = (~children, ~value, ()) => { module TranslateY = { let createElement = (~children, ~value, ()) => { - let style = Style.[transform(Transform.TranslateY(value))]; + let style = Style.[transform([TransformStyle.TranslateY(value)])]; ...children ; }; From 2f5a06bb99839fb8beb90819e45147de08a3873d Mon Sep 17 00:00:00 2001 From: bryphe Date: Fri, 10 May 2019 16:25:12 -0700 Subject: [PATCH 3/4] Formatting --- examples/AnalogClock.re | 30 +++++++++++++++--------------- examples/Hello.re | 29 +++++++++++++++-------------- examples/Slider.re | 23 ++++++++++------------- src/UI_Components/ScrollView.re | 18 +++++++++--------- src/UI_Components/Transform.re | 26 ++++++++++++-------------- 5 files changed, 61 insertions(+), 65 deletions(-) diff --git a/examples/AnalogClock.re b/examples/AnalogClock.re index 09f959395..511f35771 100644 --- a/examples/AnalogClock.re +++ b/examples/AnalogClock.re @@ -131,21 +131,21 @@ module AnalogClock = { slots, - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + , ); diff --git a/examples/Hello.re b/examples/Hello.re index d8334e755..e52e68810 100644 --- a/examples/Hello.re +++ b/examples/Hello.re @@ -44,20 +44,16 @@ module Logo = { ( hooks, - - + - + Transform.RotateY(Angle.from_radians(rotationY)), + Transform.RotateX(Angle.from_radians(rotation)), + ]),*/ + /> + , ); }); @@ -105,7 +101,12 @@ module AnimatedText = { opacity(animatedOpacity), ]; - (hooks, ); + ( + hooks, + + + , + ); }); }; diff --git a/examples/Slider.re b/examples/Slider.re index c24a492d8..455e3d15f 100644 --- a/examples/Slider.re +++ b/examples/Slider.re @@ -65,19 +65,16 @@ module AdjustableLogo = { hooks, - - - - - - - + + + + + + + diff --git a/src/UI_Components/ScrollView.re b/src/UI_Components/ScrollView.re index ba11a6e0f..41796b76c 100644 --- a/src/UI_Components/ScrollView.re +++ b/src/UI_Components/ScrollView.re @@ -45,8 +45,8 @@ let make = let scrollBarThickness = 10; - let translateX = (-1.) *. float_of_int(actualScrollLeft); - let 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) { @@ -218,13 +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 index c0729a9b6..f0d08337a 100644 --- a/src/UI_Components/Transform.re +++ b/src/UI_Components/Transform.re @@ -1,49 +1,47 @@ open Revery_UI; - module Rotate = { - -let createElement = (~children, ~value, ()) => { + let createElement = (~children, ~value, ()) => { let style = Style.[transform([TransformStyle.Rotate(value)])]; ...children ; - }; + }; }; module RotateX = { -let createElement = (~children, ~value, ()) => { + let createElement = (~children, ~value, ()) => { let style = Style.[transform([TransformStyle.RotateX(value)])]; ...children ; - }; + }; }; module RotateY = { -let createElement = (~children, ~value, ()) => { + let createElement = (~children, ~value, ()) => { let style = Style.[transform([TransformStyle.RotateY(value)])]; ...children ; - }; + }; }; module RotateZ = { -let createElement = (~children, ~value, ()) => { + let createElement = (~children, ~value, ()) => { let style = Style.[transform([TransformStyle.RotateZ(value)])]; ...children ; - }; + }; }; module TranslateX = { -let createElement = (~children, ~value, ()) => { + let createElement = (~children, ~value, ()) => { let style = Style.[transform([TransformStyle.TranslateX(value)])]; ...children ; - }; + }; }; module TranslateY = { -let createElement = (~children, ~value, ()) => { + let createElement = (~children, ~value, ()) => { let style = Style.[transform([TransformStyle.TranslateY(value)])]; ...children ; - }; + }; }; From 12ec8e7632f9af7b69a8e5979986e53116a02f56 Mon Sep 17 00:00:00 2001 From: bryphe Date: Fri, 10 May 2019 17:04:06 -0700 Subject: [PATCH 4/4] Tweaks to clock --- examples/AnalogClock.re | 31 +++++++------------------------ examples/Examples.re | 2 +- src/UI/TransformStyle.re | 3 +++ 3 files changed, 11 insertions(+), 25 deletions(-) diff --git a/examples/AnalogClock.re b/examples/AnalogClock.re index 511f35771..1aafeee4b 100644 --- a/examples/AnalogClock.re +++ b/examples/AnalogClock.re @@ -81,21 +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), width(4), ], ) @@ -106,46 +105,30 @@ module AnalogClock = { merge( ~source=clockPointer, ~target=[ + position(`Absolute), backgroundColor(Colors.white), height(120), - top(90), width(4), ], ) ); let secondsStyle = - Style.( - merge( - ~source=clockPointer, - ~target=[ + Style.[ backgroundColor(Colors.red), height(150), - top(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/src/UI/TransformStyle.re b/src/UI/TransformStyle.re index e4a169cef..e3d76244d 100644 --- a/src/UI/TransformStyle.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.),