From bae853ecddb2203648c563d14125ea0ec39aa809 Mon Sep 17 00:00:00 2001
From: ChengOuyang <ouyangc@agilean.cn>
Date: Thu, 10 Mar 2022 11:32:49 +0800
Subject: [PATCH] feat: scale support { w: number; h: number }

---
 lib/Draggable.js         |  2 +-
 lib/DraggableCore.js     | 10 ++++++++--
 lib/utils/domFns.js      |  8 +++++---
 lib/utils/positionFns.js | 10 ++++++----
 typings/index.d.ts       |  2 +-
 5 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/lib/Draggable.js b/lib/Draggable.js
index cd726128..493fb8cd 100644
--- a/lib/Draggable.js
+++ b/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 = {
diff --git a/lib/DraggableCore.js b/lib/DraggableCore.js
index a53b7de8..53654b20 100644
--- a/lib/DraggableCore.js
+++ b/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.
diff --git a/lib/utils/domFns.js b/lib/utils/domFns.js
index 65fe32fe..2c2b99a5 100644
--- a/lib/utils/domFns.js
+++ b/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};
 }
diff --git a/lib/utils/positionFns.js b/lib/utils/positionFns.js
index 31346524..45032977 100644
--- a/lib/utils/positionFns.js
+++ b/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
   };
diff --git a/typings/index.d.ts b/typings/index.d.ts
index ad7f22ba..d7fc2d3c 100644
--- a/typings/index.d.ts
+++ b/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>, {}> {