hover on nodes

Summary: Adds a hover background color to nodes.

Reviewed By: emilsjolander

Differential Revision: D7009467

fbshipit-source-id: 1e1fb4d00086a6664ad8a53a0e8dbec075987a19

website/src/components/Playground/YogaNode.css

@@ -13,20 +13,19 @@
   transform: scale(1);
   box-shadow: inset 0 0 0px 1px rgba(48, 56, 69, 0.2);
   transition: 0.2s all, 0s outline, 0s box-shadow;
+  cursor: pointer;
+}
+
+.YogaNode.hover {
+  background-color: #F0FFF9;
 }
 
 .YogaNode .YogaNode {
   background: rgba(255, 255, 255, 0.7);
 }
 
-.YogaNode > .info {
-  position: absolute;
-  opacity: 0;
-  font-family: monospace;
-}
-
-.YogaNode:hover > .info {
-  opacity: 1;
+.YogaNode .YogaNode.hover{
+  background: rgba(240, 255, 249, 0.7);
 }
 
 .YogaNode:focus {
@@ -34,7 +33,7 @@
 }
 
 .YogaNode.focused {
-  box-shadow: 0 0 0 2px #95ddcf, 0 0 15px rgba(0, 0, 0, 0.2),
+  box-shadow: 0 0 0 2px #68CFBB, 0 0 15px rgba(0, 0, 0, 0.2),
     inset 0 0 0px 1px rgba(255, 255, 255, 0.2);
   z-index: 2;
 }

website/src/components/Playground/YogaNode.js

@@ -44,6 +44,7 @@ type Props = {|
 
 type State = {
   visible?: boolean,
+  hovered: boolean,
 };
 
 export default class YogaNode extends Component<Props, State> {
@@ -55,7 +56,9 @@ export default class YogaNode extends Component<Props, State> {
     showGuides: true,
   };
 
-  state = {};
+  state = {
+    hovered: false,
+  };
   computedLayout: ?ComputedLayout;
   rootNode: ?Yoga$Node;
 
@@ -91,6 +94,10 @@ export default class YogaNode extends Component<Props, State> {
     }
   }
 
+  onMouseMove = e => {
+    this.setState({hovered: e.target === this._ref});
+  };
+
   calculateLayout(props: Props) {
     const root = this.createYogaNodes(props.layoutDefinition);
     root.calculateLayout(
@@ -180,6 +187,8 @@ export default class YogaNode extends Component<Props, State> {
     }
   };
 
+  onMouseLeave = (e: SyntheticMouseEvent<>) => this.setState({hovered: false});
+
   showPositionGuides({node}: ComputedLayout) {
     const padding = PositionRecord({
       top: node.getComputedPadding(yoga.EDGE_TOP),
@@ -256,9 +265,14 @@ export default class YogaNode extends Component<Props, State> {
       <div
         className={`YogaNode ${isFocused ? 'focused' : ''} ${className || ''} ${
           this.state.visible ? '' : 'invisible'
-        }`}
+        } ${this.state.hovered ? 'hover' : ''}`}
         style={path.length == 0 ? {width, height} : {left, top, width, height}}
         onDoubleClick={this.onDoubleClick}
+        onMouseMove={this.onMouseMove}
+        onMouseLeave={this.onMouseLeave}
+        ref={ref => {
+          this._ref = ref;
+        }}
         onClick={this.onClick}>
         {label && <div className="label">{label}</div>}
         {isFocused &&