Preliminary work on showing full spaces.

src/components/farm/SpaceNode.jsx

@@ -25,7 +25,28 @@ import { faCreditCard, faQuestionCircle } from '@fortawesome/free-solid-svg-icon
 
 import { setMessagePanelSpace, mpMouse } from './actions.js'
 
+
+              //    onMouseOver={evt => {
+              //        const clientRects = evt.target.getClientRects()[0];
+              //        this.props.setMessagePanelSpace(space);
+              //        this.props.mpMouse(clientRects.left, clientRects.top);
+              // return false; } }
+
 class SpaceNode extends React.Component {
+    myRef = React.createRef();
+    mouseOver = (e) => {
+        e.preventDefault();
+        const clientRects = this.myRef.current.getClientRects()[0];
+        this.props.setMessagePanelSpace(this.props.space);
+        this.props.mpMouse(clientRects.left, clientRects.top);
+    }
+
+    mouseOut = (e) => {
+        e.preventDefault();
+        this.props.setMessagePanelSpace(null);
+    }
+    /* onMouseOver={this.mouseOver}
+     * onMouseOut={this.mouseOut} */
     render() {
         const space = this.props.space;
         let title = '';
@@ -42,12 +63,9 @@ class SpaceNode extends React.Component {
         }
         return (
             <div className={'space space-type-' + this.props.space.type +
-                                ' space-orientation-' + this.props.orientation}
+                 ' space-orientation-' + this.props.orientation}
-                 onMouseOver={evt => {
+                 ref={this.myRef}
-                     const clientRects = evt.target.getClientRects()[0];
+              >
-                     this.props.setMessagePanelSpace(space);
-                     this.props.mpMouse(clientRects.left, clientRects.top);
-                     return false; } }>
                 <div style={this.props.height ? {height: this.props.height} : {}}>
                 <center>{this.props.space.month}</center>
                 { this.props.showtitle ? (