feat: scale support { w: number; h: number }

lib/Draggable.js

@@ -29,7 +29,7 @@ export type DraggableDefaultProps = {
   defaultClassNameDragging: string,
   defaultClassNameDragged: string,
   defaultPosition: ControlPosition,
-  scale: number,
+  scale: number| { w: number; h: number },
 };
 
 export type DraggableProps = {

lib/DraggableCore.js

@@ -55,7 +55,7 @@ export type DraggableCoreDefaultProps = {
   onDrag: DraggableEventHandler,
   onStop: DraggableEventHandler,
   onMouseDown: (e: MouseEvent) => void,
-  scale: number,
+  scale: number| { w: number; h: number }
 };
 
 export type DraggableCoreProps = {
@@ -206,7 +206,13 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
     /**
      * `scale`, if set, applies scaling while dragging an element
      */
-    scale: PropTypes.number,
+    scale: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.shape({
+        w: PropTypes.number,
+        h: PropTypes.number
+      })
+    ]),
 
     /**
      * These properties should be defined on the child, not here.

lib/utils/domFns.js

@@ -107,12 +107,14 @@ interface EventWithOffset {
 }
 
 // Get from offsetParent
-export function offsetXYFromParent(evt: EventWithOffset, offsetParent: HTMLElement, scale: number): ControlPosition {
+export function offsetXYFromParent(evt: EventWithOffset, offsetParent: HTMLElement, scale: number | { w: number; h: 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) / scale;
-  const y = (evt.clientY + offsetParent.scrollTop - offsetParentRect.top) / scale;
+  const scaleW = typeof scale === 'number' ? scale : scale.w;
+  const scaleH = typeof scale === 'number' ? scale : scale.h;
+  const x = (evt.clientX + offsetParent.scrollLeft - offsetParentRect.left) / scaleW;
+  const y = (evt.clientY + offsetParent.scrollTop - offsetParentRect.top) / scaleH;
 
   return {x, y};
 }

lib/utils/positionFns.js

@@ -104,12 +104,14 @@ 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;
+  const scaleW = typeof scale === 'number' ? scale : scale.w;
+  const scaleH = typeof scale === 'number' ? scale : scale.h;
   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 / scaleW),
+    y: draggable.state.y + (coreData.deltaY / scaleH),
+    deltaX: (coreData.deltaX / scaleW),
+    deltaY: (coreData.deltaY / scaleH),
     lastX: draggable.state.x,
     lastY: draggable.state.y
   };

typings/index.d.ts

@@ -53,7 +53,7 @@ declare module 'react-draggable' {
     onDrag: DraggableEventHandler,
     onStop: DraggableEventHandler,
     onMouseDown: (e: MouseEvent) => void,
-    scale: number
+    scale: number | { w: number; h: number }
   }
 
   export default class Draggable extends React.Component<Partial<DraggableProps>, {}> {