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); }