feat(DraggableCore): apply scale property while dragging an element

react-grid-layout · Oct 15, 2019 · 1ca0129 · 1ca0129
1 parent f024205
commit 1ca0129
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git 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,11 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
      */
     onMouseDown: PropTypes.func,
 
+    /**
+     * `scale`, if set, applies scaling while dragging an element
+     */
+    scale: PropTypes.number,
+
     /**
      * These properties should be defined on the child, not here.
      */
@@ -206,6 +212,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
     onDrag: function(){},
     onStop: function(){},
     onMouseDown: function(){},
+    scale: 1,
   };
 
   state = {

diff --git a/lib/utils/domFns.js b/lib/utils/domFns.js
@@ -99,12 +99,12 @@ 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): 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 x = (evt.clientX + offsetParent.scrollLeft - offsetParentRect.left) / scale;
+  const y = (evt.clientY + offsetParent.scrollTop - offsetParentRect.top) / scale;
 
   return {x, y};
 }

diff --git 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 <DraggableCore>'s events