feat: add transformScale to fix resizable under parent css-style transform: scale(0.x) (#115)

Author: xcqwan

lib/Resizable.js

@@ -36,7 +36,8 @@ export type Props = {
   onResizeStart?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
   onResize?: ?(e: SyntheticEvent<>, data: ResizeCallbackData) => any,
   draggableOpts?: ?Object,
-  resizeHandles: ResizeHandle[]
+  resizeHandles: ResizeHandle[],
+  transformScale: number,
 };
 
 export default class Resizable extends React.Component<Props, State> {
@@ -73,6 +74,7 @@ export default class Resizable extends React.Component<Props, State> {
     // 'se' - Southeast handle (bottom-right)
     // 'ne' - Northeast handle (top-center)
     resizeHandles: PropTypes.arrayOf(PropTypes.oneOf(['s', 'w', 'e', 'n', 'sw', 'nw', 'se', 'ne'])),
+    transformScale: PropTypes.number,
 
     // If true, will only allow width/height to move in lockstep
     lockAspectRatio: PropTypes.bool,
@@ -103,7 +105,8 @@ export default class Resizable extends React.Component<Props, State> {
     axis: 'both',
     minConstraints: [20, 20],
     maxConstraints: [Infinity, Infinity],
-    resizeHandles: ['se']
+    resizeHandles: ['se'],
+    transformScale: 1
   };
 
   state: State = {
@@ -172,6 +175,8 @@ export default class Resizable extends React.Component<Props, State> {
    */
   resizeHandler(handlerName: string, axis: ResizeHandle): Function {
     return (e: SyntheticEvent<> | MouseEvent, {node, deltaX, deltaY}: DragCallbackData) => {
+      deltaX /= this.props.transformScale
+      deltaY /= this.props.transformScale
 
       // Axis restrictions
       const canDragX = (this.props.axis === 'both' || this.props.axis === 'x') && ['n', 's'].indexOf(axis) === -1;
@@ -232,7 +237,7 @@ export default class Resizable extends React.Component<Props, State> {
     // eslint-disable-next-line no-unused-vars
     const {children, draggableOpts, width, height, handleSize,
         lockAspectRatio, axis, minConstraints, maxConstraints, onResize,
-        onResizeStop, onResizeStart, resizeHandles, ...p} = this.props;
+        onResizeStop, onResizeStart, resizeHandles, transformScale, ...p} = this.props;
 
     const className = p.className ?
       `${p.className} react-resizable`: