refactor(drag-n-drop): remove unnecessary callbacks (onDragStart), move some maths inside if statement, write a correct style rules for UserSelect

app/components/Node.jsx

@@ -39,12 +39,10 @@ class Node extends React.Component {
     Stylizer.assignStyles(this, nodeStyles);
     Stylizer.hoverable(this, ['rect', 'text']);
 
-    this.handleDragStart = this.onDragStart.bind(this);
     this.handleDragMove = this.onDragMove.bind(this);
     this.handleDragEnd = this.onDragEnd.bind(this);
   }
 
-  onDragStart() {}
   onDragMove(event, position) {
     this.props.onDragMove(this.node.id, position);
   }
@@ -95,7 +93,6 @@ class Node extends React.Component {
       <SVGDraggable
         key={this.elementId}
         active={draggable}
-        onDragStart={this.handleDragStart}
         onDragMove={this.handleDragMove}
         onDragEnd={this.handleDragEnd}
       >

app/components/SVGDraggable.jsx

@@ -14,7 +14,6 @@ class SVGDraggable extends React.Component {
     const nullFunc = f => f;
 
     this.callbacks = {
-      onDragStart: this.props.onDragStart || nullFunc,
       onDragMove: this.props.onDragMove || nullFunc,
       onDragEnd: this.props.onDragEnd || nullFunc,
     };
@@ -23,13 +22,11 @@ class SVGDraggable extends React.Component {
   onMouseDown(event) {
     if (!this.props.active) return;
 
-    // @TODO: Move component above all other components into this layer!
     this.tempDragged = true;
     this.state.mousePrevPosition = {
       x: event.clientX,
       y: event.clientY,
     };
-    this.callbacks.onDragStart.call(this, event);
   }
   onMouseMove(event) {
     if (!this.props.active) return;
@@ -40,16 +37,18 @@ class SVGDraggable extends React.Component {
         y: event.clientY,
       };
 
-      const curPosition = this.getChildState(this.props.children).position;
-      const newPos = {
-        x: (mousePos.x - this.state.mousePrevPosition.x) + curPosition.x,
-        y: (mousePos.y - this.state.mousePrevPosition.y) + curPosition.y,
-      };
-
+      // Check for really dragging
       if (
         mousePos.x !== this.state.mousePrevPosition.x ||
         mousePos.y !== this.state.mousePrevPosition.y
       ) {
+        // @TODO: Move component above all other components into this layer!
+        const curPosition = this.getChildState(this.props.children).position;
+        const newPos = {
+          x: (mousePos.x - this.state.mousePrevPosition.x) + curPosition.x,
+          y: (mousePos.y - this.state.mousePrevPosition.y) + curPosition.y,
+        };
+
         this.state.dragged = true;
         this.callbacks.onDragMove(event, newPos);
         this.state.mousePrevPosition = {
@@ -146,7 +145,6 @@ class SVGDraggable extends React.Component {
 SVGDraggable.propTypes = {
   children: React.PropTypes.any,
   active: React.PropTypes.bool,
-  onDragStart: React.PropTypes.func,
   onDragMove: React.PropTypes.func,
   onDragEnd: React.PropTypes.func,
 };

app/containers/Patch.jsx

@@ -10,9 +10,9 @@ const backgroundStyle = {
   fill: '#eee',
 };
 const preventSelectStyle = {
-  '-webkit-user-select': 'none',
-  '-moz-user-select': 'none',
-  'user-select': 'none',
+  WebkitUserSelect: 'none',
+  MozUserSelect: 'none',
+  UserSelect: 'none',
 };
 
 class Patch extends React.Component {