API: Add 'ref' for primitives for direct access to Node (#139)

* Initial ref API + exercise in test app

* Formatting

* Revert formatting for Autocomplete.re

* Formatting

* Switch to internalId

examples/Hello.re

@@ -158,6 +158,7 @@ let init = app => {
       )}>
       <Logo />
       <view
+        ref={r => print_endline("View internal id:" ++ string_of_int(r#getInternalId()))}
         style={Style.make(~flexDirection=Row, ~alignItems=AlignFlexEnd, ())}>
         <AnimatedText delay=0.0 textContent="Welcome" />
         <AnimatedText delay=0.5 textContent="to" />

src/UI/FontCache.re

@@ -34,4 +34,4 @@ let load = (fontName: string, size: int) => {
     };
     Fontkit.dummyFont(size);
   };
-};
+};

src/UI/Node.re

@@ -5,19 +5,31 @@ module LayoutTypes = Layout.LayoutTypes;
 
 open Revery_Math;
 
+module UniqueId = {
+  let current = ref(0);
+
+  let getUniqueId = () => {
+    let ret = current^;
+    current := current^ + 1;
+    ret;
+  };
+};
+
 class node ('a) (()) = {
   as _this;
   val _children: ref(list(node('a))) = ref([]);
   val _style: ref(Style.t) = ref(Style.defaultStyle);
-  val _events: ref(NodeEvents.t) = ref(NodeEvents.default);
+  val _events: ref(NodeEvents.t(node('a))) = ref(NodeEvents.make());
   val _layoutNode = ref(Layout.createNode([||], Layout.defaultStyle));
   val _parent: ref(option(node('a))) = ref(None);
+  val _internalId: int = UniqueId.getUniqueId();
   pub draw = (pass: 'a, parentContext: NodeDrawContext.t) => {
     let style: Style.t = _this#getStyle();
     let localContext =
       NodeDrawContext.createFromParent(parentContext, style.opacity);
     List.iter(c => c#draw(pass, localContext), _children^);
   };
+  pub getInternalId = () => _internalId;
   pub measurements = () => _layoutNode^.layout;
   pub setStyle = style => _style := style;
   pub getStyle = () => _style^;
@@ -108,7 +120,21 @@ class node ('a) (()) = {
     node;
   };
   /* TODO: This should really be private - it should never be explicitly set */
-  pub _setParent = (n: option(node('a))) => _parent := n;
+  pub _setParent = (n: option(node('a))) => {
+    _parent := n;
+
+    /* Dispatch ref event if we just got attached */
+    switch (n) {
+    | Some(_) =>
+      let ret = (_this :> node('a));
+      let maybeRef = _this#getEvents().ref;
+      switch (maybeRef) {
+      | Some(ref) => ref(ret)
+      | None => ()
+      };
+    | _ => ()
+    };
+  };
 };
 
 let iter = (f, node: node('a)) => {
@@ -120,4 +146,4 @@ let iter = (f, node: node('a)) => {
   };
 
   apply(node);
-};
+};

src/UI/NodeEvents.re

@@ -20,18 +20,18 @@ type mouseEvent =
   | MouseMove(mouseMoveEventParams)
   | MouseUp(mouseButtonEventParams);
 
+type refCallback('a) = 'a => unit;
 type mouseButtonHandler = mouseButtonEventParams => unit;
 type mouseMoveHandler = mouseMoveEventParams => unit;
 
-type t = {
+type t('a) = {
+  ref: option(refCallback('a)),
   onMouseDown: option(mouseButtonHandler),
   onMouseMove: option(mouseMoveHandler),
   onMouseUp: option(mouseButtonHandler),
 };
 
-let make = (~onMouseDown=?, ~onMouseMove=?, ~onMouseUp=?, _unit: unit) => {
-  let ret: t = {onMouseDown, onMouseMove, onMouseUp};
+let make = (~ref=?, ~onMouseDown=?, ~onMouseMove=?, ~onMouseUp=?, _unit: unit) => {
+  let ret: t('a) = {ref, onMouseDown, onMouseMove, onMouseUp};
   ret;
 };
-
-let default = make();

src/UI/Primitives.re

@@ -14,13 +14,14 @@ let view =
       ~onMouseMove=?,
       ~onMouseUp=?,
       ~children,
+      ~ref=?,
       ~style=Style.defaultStyle,
       (),
     ) =>
   UiReact.primitiveComponent(
     View(
       style,
-      NodeEvents.make(~onMouseDown?, ~onMouseMove?, ~onMouseUp?, ()),
+      NodeEvents.make(~ref?, ~onMouseDown?, ~onMouseMove?, ~onMouseUp?, ()),
     ),
     ~children,
   );
@@ -31,6 +32,7 @@ let image =
       ~onMouseMove=?,
       ~onMouseUp=?,
       ~children,
+      ~ref=?,
       ~style=Style.defaultStyle,
       ~src="",
       (),
@@ -39,7 +41,7 @@ let image =
     Image(
       style,
       src,
-      NodeEvents.make(~onMouseDown?, ~onMouseMove?, ~onMouseUp?, ()),
+      NodeEvents.make(~ref?, ~onMouseDown?, ~onMouseMove?, ~onMouseUp?, ()),
     ),
     ~children,
   );
@@ -50,14 +52,15 @@ let text =
       ~onMouseMove=?,
       ~onMouseUp=?,
       ~children: list(string),
+      ~ref=?,
       ~style=Style.defaultStyle,
       (),
     ) =>
   UiReact.primitiveComponent(
     Text(
       style,
       List.hd(children),
-      NodeEvents.make(~onMouseDown?, ~onMouseMove?, ~onMouseUp?, ()),
+      NodeEvents.make(~ref?, ~onMouseDown?, ~onMouseMove?, ~onMouseUp?, ()),
     ),
     ~children=[],
-  );
+  );

src/UI/Revery_UI.re

@@ -81,9 +81,10 @@ let start =
       },
     );
 
-  let _ = Reactify.Event.subscribe(FontCache.onFontLoaded, () => {
-    Window.render(window);
-  });
+  let _ =
+    Reactify.Event.subscribe(FontCache.onFontLoaded, () =>
+      Window.render(window)
+    );
 
   Window.setShouldRenderCallback(window, () => Animated.anyActiveAnimations());
   Window.setRenderCallback(
@@ -93,4 +94,4 @@ let start =
       UiRender.render(ui, component);
     },
   );
-};
+};

src/UI/UiReconciler.re

@@ -5,13 +5,13 @@
 
 open RenderPass;
 
-type primitives =
-  | View(Style.t, NodeEvents.t)
-  | Text(Style.t, string, NodeEvents.t)
-  | Image(Style.t, string, NodeEvents.t);
-
 type node = Node.node(renderPass);
 
+type primitives =
+  | View(Style.t, NodeEvents.t(node))
+  | Text(Style.t, string, NodeEvents.t(node))
+  | Image(Style.t, string, NodeEvents.t(node));
+
 let createInstance = prim => {
   let node =
     switch (prim) {
@@ -62,4 +62,4 @@ let replaceChild = (parent: node, newChild: node, oldChild: node) => {
   removeChild(parent, oldChild);
   appendChild(parent, newChild);
   ();
-};
+};

src/UI/ViewNode.re

@@ -305,13 +305,8 @@ class viewNode (()) = {
         );
 
       switch (style.boxShadow) {
-      | {
-          xOffset: 0.,
-          yOffset: 0.,
-          blurRadius: 0.,
-          spreadRadius: 0.,
-          color: _,
-        } => ()
+      | {xOffset: 0., yOffset: 0., blurRadius: 0., spreadRadius: 0., color: _} =>
+        ()
       | boxShadow => renderShadow(~boxShadow, ~width, ~height, ~world, ~m)
       };