Legit grid coordinate translation

javascripts/geometry/coordinates.js

@@ -4,6 +4,7 @@ TODO: A type checker would be pretty sweet here.
 */
 export function fromScreenToGarden(mouseX, mouseY, boxX, boxY) {
   var rawX = mouseX - boxX;
-  var rawY = mouseY - boxY;
+  var rawY = boxY - mouseY;
+
   return {x: rawX, y: rawY};
 };

javascripts/menus/garden_map.js

@@ -1,34 +1,35 @@
-export class MapPointView extends React.Component {
+export class MapPoint extends React.Component {
   select() {
     this.props.dispatch({type: "CROP_SELECT", payload: this.props.plant});
   }
 
+  selected() {
+    return (!!this.props.selected);
+  }
+
   render() {
-    var style = {
-      position: 'absolute',
-      left: (this.props.plant.x - 20),
-      top: (this.props.plant.y - 40)
-    };
-    if (!!this.props.selected) { style.border = "1px solid green"; };
-    return <div onClick={ this.select.bind(this) }>
-             <img style={style} src="/designer_icons/pin.png"></img>
-           </div>
+    var { length } = this.props.planting_area;
+    var fill = this.selected() ? "red" : "black";
+    return <circle cx={ this.props.plant.x }
+                   cy={ (-1 * this.props.plant.y) + length  }
+                   onClick={ this.select.bind(this) }
+                   fill={ fill }
+                   r="5" />;
   }
 };
 
 export class GardenMap extends React.Component {
   plants() {
     return this.props.plants.map(
-      (p, k) => <MapPointView plant={ p }
+      (p, k) => <MapPoint plant={ p }
                               key={ k }
+                              planting_area={ this.props.planting_area }
                               selected={ (this.props.selectedPlant._id === p._id) }
                               dispatch={ this.props.dispatch }/>
     );
   }
 
   render() {
-    var SVG_PADDING = 20;
-    var SVG_MARGIN = SVG_PADDING / 2;
     var style = {
       fill:        'rgb(136, 119, 102)',
       strokeWidth: 1,
@@ -37,16 +38,14 @@ export class GardenMap extends React.Component {
     var {width, length} = this.props.planting_area;
 
     return <div>
-             <div id="drop-area">
-              <svg width={ width + SVG_PADDING }
-                   height={ length + SVG_PADDING } >
-                <rect x={ SVG_MARGIN }
-                      y={ SVG_MARGIN }
-                      width={ width }
+             <div id="drop-area" style={ {marginLeft: '10px', marginTop: '10px'} }>
+              <svg width={ width }
+                   height={ length } >
+                <rect width={ width }
                       height={ length }
                       style={ style } />
+                { this.plants() }
               </svg>
-              { this.plants() }
              </div>
            </div>;
   }

javascripts/redux/store.js

@@ -5,6 +5,4 @@ import thunk from 'redux-thunk';
 var wrappedCreatedStore = applyMiddleware(thunk)(createStore);
 var store = wrappedCreatedStore(reducer, window.initialState);
 
-console.log('hi.');
-
 export { store };