Scale parameter (#352)

* allowing the ability to pass a scale parameter so it drags correctly at any zoom level

* Adding `scale` to `DraggableProps`

* Removing `package-lock.js` that was added in last commit

* Adding test for `scale` prop

README.md

@@ -97,6 +97,7 @@ class App extends React.Component {
         defaultPosition={{x: 0, y: 0}}
         position={null}
         grid={[25, 25]}
+        scale={1}
         onStart={this.handleStart}
         onDrag={this.handleDrag}
         onStop={this.handleStop}>
@@ -217,6 +218,11 @@ onStop: DraggableEventHandler,
 // becomes 'controlled' and is not responsive to user input. Use `position`
 // if you need to have direct control of the element.
 position: {x: number, y: number}
+
+// Specifies the scale of the canvas your are dragging this element on. This allows
+// you to, for example, get the correct drag deltas while you are zoomed in or out via
+// a transform or matrix in the parent of this element.
+scale: number
 }
 ```
 
@@ -272,7 +278,8 @@ on itself and thus must have callbacks attached to be useful.
   onStart: DraggableEventHandler,
   onDrag: DraggableEventHandler,
   onStop: DraggableEventHandler,
-  onMouseDown: (e: MouseEvent) => void
+  onMouseDown: (e: MouseEvent) => void,
+  scale: number
 }
 ```
 

lib/Draggable.js

@@ -29,6 +29,7 @@ export type DraggableProps = {
   defaultClassNameDragged: string,
   defaultPosition: ControlPosition,
   position: ControlPosition,
+  scale: number
 };
 
 //
@@ -162,7 +163,8 @@ export default class Draggable extends React.Component<DraggableProps, Draggable
     defaultClassNameDragging: 'react-draggable-dragging',
     defaultClassNameDragged: 'react-draggable-dragged',
     defaultPosition: {x: 0, y: 0},
-    position: null
+    position: null,
+    scale: 1
   };
 
   constructor(props: DraggableProps) {

lib/DraggableCore.js

@@ -115,6 +115,12 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
      * `grid` specifies the x and y that dragging should snap to.
      */
     grid: PropTypes.arrayOf(PropTypes.number),
+
+    /**
+     * `scale` specifies the scale of the area you are dragging inside of. It allows
+     * the drag deltas to scale correctly with how far zoomed in/out you are.
+     */
+    scale: PropTypes.number,
 
     /**
      * `handle` specifies a selector to be used as the handle that initiates drag.

lib/utils/positionFns.js

@@ -103,12 +103,13 @@ export function createCoreData(draggable: DraggableCore, x: number, y: number):
 
 // Create an data exposed by <Draggable>'s events
 export function createDraggableData(draggable: Draggable, coreData: DraggableData): DraggableData {
+  const scale = draggable.props.scale;
   return {
     node: coreData.node,
-    x: draggable.state.x + coreData.deltaX,
-    y: draggable.state.y + coreData.deltaY,
-    deltaX: coreData.deltaX,
-    deltaY: coreData.deltaY,
+    x: draggable.state.x + (coreData.deltaX / scale),
+    y: draggable.state.y + (coreData.deltaY / scale),
+    deltaX: (coreData.deltaX / scale),
+    deltaY: (coreData.deltaY / scale),
     lastX: draggable.state.x,
     lastY: draggable.state.y
   };

specs/draggable.spec.jsx

@@ -134,6 +134,24 @@ describe('react-draggable', function () {
       assert(drag.props.onStop === handleStop);
     });
 
+    it('should adjust draggable data output when `scale` prop supplied', function () {
+      function onDrag(event, data) {
+        assert(data.x === 200);
+        assert(data.y === 200);
+        assert(data.deltaX === 200);
+        assert(data.deltaY === 200);
+      }
+      drag = TestUtils.renderIntoDocument(
+        <Draggable 
+          scale={0.5}
+          onDrag={onDrag}>
+          <div />
+        </Draggable>
+      );
+
+      simulateMovementFromTo(drag, 0, 0, 100, 100);
+    });
+
     it('should throw when setting className', function () {
       drag = (<Draggable className="foo"><span /></Draggable>);