diff --git a/example/example.js b/example/example.js
index 96f8500f..e5d2efc5 100644
--- a/example/example.js
+++ b/example/example.js
@@ -120,6 +120,17 @@ class App extends React.Component {
+
+
+
+
+ My position can be changed programmatically.
+ My parent has a transform scaled to 2.
+
+
+
+
I can only be moved within the confines of the body element.
@@ -164,7 +175,6 @@ class App extends React.Component {
-
);
}
diff --git a/lib/Draggable.js b/lib/Draggable.js
index 7e53ecfe..1c33fa57 100644
--- a/lib/Draggable.js
+++ b/lib/Draggable.js
@@ -170,7 +170,6 @@ class Draggable extends React.Component {
defaultClassNameDragged: 'react-draggable-dragged',
defaultPosition: {x: 0, y: 0},
position: null,
- scale: 1
};
// React 16.3+
@@ -329,7 +328,6 @@ class Draggable extends React.Component {
defaultClassNameDragged,
position,
positionOffset,
- scale,
...draggableCoreProps
} = this.props;
diff --git a/lib/DraggableCore.js b/lib/DraggableCore.js
index 4fbabfd2..72abce6a 100644
--- a/lib/DraggableCore.js
+++ b/lib/DraggableCore.js
@@ -67,6 +67,7 @@ export type DraggableCoreProps = {
onDrag: DraggableEventHandler,
onStop: DraggableEventHandler,
onMouseDown: (e: MouseEvent) => void,
+ scale: number;
};
//
@@ -185,6 +186,12 @@ export default class DraggableCore extends React.Component's events
@@ -81,7 +81,6 @@ export function createCoreData(draggable: DraggableCore, x: number, y: number):
const state = draggable.state;
const isStart = !isNum(state.lastX);
const node = findDOMNode(draggable);
-
if (isStart) {
// If this is our first move, use the x and y as last coords.
return {
@@ -94,8 +93,10 @@ export function createCoreData(draggable: DraggableCore, x: number, y: number):
// Otherwise calculate proper values.
return {
node,
- deltaX: x - state.lastX, deltaY: y - state.lastY,
- lastX: state.lastX, lastY: state.lastY,
+ deltaX: x - state.lastX,
+ deltaY: y - state.lastY,
+ lastX: state.lastX,
+ lastY: state.lastY,
x, y,
};
}
@@ -103,13 +104,12 @@ export function createCoreData(draggable: DraggableCore, x: number, y: number):
// Create an data exposed by '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 / scale),
- y: draggable.state.y + (coreData.deltaY / scale),
- deltaX: (coreData.deltaX / scale),
- deltaY: (coreData.deltaY / scale),
+ x: draggable.state.x + coreData.deltaX,
+ y: draggable.state.y + coreData.deltaY,
+ deltaX: coreData.deltaX,
+ deltaY: coreData.deltaY,
lastX: draggable.state.x,
lastY: draggable.state.y
};
diff --git a/specs/draggable.spec.jsx b/specs/draggable.spec.jsx
index f0b0734a..36d075c3 100644
--- a/specs/draggable.spec.jsx
+++ b/specs/draggable.spec.jsx
@@ -134,10 +134,32 @@ describe('react-draggable', function () {
assert(drag.props.onStop === handleStop);
});
+ it('should adjust draggablecore data output when `scale` prop supplied', function () {
+ function onDrag(event, data) {
+ assert(data.x === 50);
+ assert(data.y === 50);
+ assert(data.lastX === 0);
+ assert(data.lastY === 0);
+ assert(data.deltaX === 50);
+ assert(data.deltaY === 50);
+ }
+ drag = TestUtils.renderIntoDocument(
+
+
+
+ );
+
+ simulateMovementFromTo(drag, 0, 0, 100, 100);
+ });
+
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.lastX === 0);
+ assert(data.lastY === 0);
assert(data.deltaX === 200);
assert(data.deltaY === 200);
}