From f57430c1284551691e22fcb7f0f50c4d8d999ec2 Mon Sep 17 00:00:00 2001 From: farrenhuang Date: Thu, 31 Oct 2019 13:06:47 +0800 Subject: [PATCH 1/2] fix: scale property should be applied on the deltas of DraggableCore data --- example/example.js | 12 +++++++++++- lib/Draggable.js | 2 -- lib/DraggableCore.js | 8 ++++++++ lib/utils/positionFns.js | 17 +++++++++-------- specs/draggable.spec.jsx | 22 ++++++++++++++++++++++ 5 files changed, 50 insertions(+), 11 deletions(-) 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 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..6be72cc9 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 === 100); + assert(data.y === 100); + 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); } From 90f6dc9d2cca467beee459906c10493ed8080905 Mon Sep 17 00:00:00 2001 From: farrenfang Date: Thu, 31 Oct 2019 23:08:19 +0800 Subject: [PATCH 2/2] apply scale on x,y of coredata --- lib/utils/domFns.js | 9 +++++---- lib/utils/positionFns.js | 7 +++---- specs/draggable.spec.jsx | 4 ++-- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lib/utils/domFns.js b/lib/utils/domFns.js index 3c9ab03c..bc107486 100644 --- a/lib/utils/domFns.js +++ b/lib/utils/domFns.js @@ -99,14 +99,15 @@ export function innerWidth(node: HTMLElement): number { } // Get from offsetParent -export function offsetXYFromParent(evt: {clientX: number, clientY: number}, offsetParent: HTMLElement): ControlPosition { +export function offsetXYFromParent(evt: {clientX: number, clientY: number}, offsetParent: HTMLElement, scale: number = 1): ControlPosition { const isBody = offsetParent === offsetParent.ownerDocument.body; const offsetParentRect = isBody ? {left: 0, top: 0} : offsetParent.getBoundingClientRect(); - const x = evt.clientX + offsetParent.scrollLeft - offsetParentRect.left; - const y = evt.clientY + offsetParent.scrollTop - offsetParentRect.top; + const validScale = scale || 1; + const x = (evt.clientX + offsetParent.scrollLeft - offsetParentRect.left) / validScale; + const y = (evt.clientY + offsetParent.scrollTop - offsetParentRect.top) / validScale; - return {x, y}; + return {x , y}; } export function createCSSTransform(controlPos: ControlPosition, positionOffset: PositionOffsetControlPosition): Object { diff --git a/lib/utils/positionFns.js b/lib/utils/positionFns.js index 94a6dfe9..3a13ffde 100644 --- a/lib/utils/positionFns.js +++ b/lib/utils/positionFns.js @@ -73,7 +73,7 @@ export function getControlPosition(e: MouseTouchEvent, touchIdentifier: ?number, const node = findDOMNode(draggableCore); // User can provide an offsetParent if desired. const offsetParent = draggableCore.props.offsetParent || node.offsetParent || node.ownerDocument.body; - return offsetXYFromParent(touchObj || e, offsetParent); + return offsetXYFromParent(touchObj || e, offsetParent, draggableCore.props.scale); } // Create an data object exposed by '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); - const scale = draggable.props.scale || 1; if (isStart) { // If this is our first move, use the x and y as last coords. return { @@ -94,8 +93,8 @@ export function createCoreData(draggable: DraggableCore, x: number, y: number): // Otherwise calculate proper values. return { node, - deltaX: (x - state.lastX) / scale, - deltaY: (y - state.lastY) / scale, + deltaX: x - state.lastX, + deltaY: y - state.lastY, lastX: state.lastX, lastY: state.lastY, x, y, diff --git a/specs/draggable.spec.jsx b/specs/draggable.spec.jsx index 6be72cc9..36d075c3 100644 --- a/specs/draggable.spec.jsx +++ b/specs/draggable.spec.jsx @@ -136,8 +136,8 @@ describe('react-draggable', function () { it('should adjust draggablecore data output when `scale` prop supplied', function () { function onDrag(event, data) { - assert(data.x === 100); - assert(data.y === 100); + assert(data.x === 50); + assert(data.y === 50); assert(data.lastX === 0); assert(data.lastY === 0); assert(data.deltaX === 50);