Fix dragging and resizing on mobile (#727)

* Fix dragging and resizing on mobile

* Use indexOf for checking resize direction

Author: chrisstiles

src/index.tsx

@@ -160,7 +160,6 @@ export interface Props {
   cancel?: string;
   enableUserSelectHack?: boolean;
   allowAnyClick?: boolean;
-  nodeRef?: React.Ref<typeof React.Component>;
   scale?: number;
   [key: string]: any;
 }
@@ -214,6 +213,7 @@ export class Rnd extends React.PureComponent<Props, State> {
   resizing = false;
   resizingPosition = { x: 0, y: 0 };
   offsetFromParent = { left: 0, top: 0 };
+  resizableElement: { current: HTMLDivElement | null } = { current: null };
 
   constructor(props: Props) {
     super(props);
@@ -476,15 +476,25 @@ export class Rnd extends React.PureComponent<Props, State> {
     elementRef: HTMLDivElement,
     delta: { height: number; width: number },
   ) {
-    if (/left/i.test(direction)) {
-      const x = this.state.original.x - delta.width;
-      // INFO: Apply x position by resize to draggable.
-      this.draggable.setState({ x });
+    // INFO: Apply x and y position adjustments caused by resizing to draggable
+    const newPos = { x: this.state.original.x, y: this.state.original.y };
+    const left = -delta.width;
+    const top = -delta.height;
+    const directions = ["top", "left", "topLeft", "bottomLeft", "topRight"];
+
+    if (directions.indexOf(direction) !== -1) {
+      if (direction === "bottomLeft") {
+        newPos.x += left;
+      } else if (direction === "topRight") {
+        newPos.y += top;
+      } else {
+        newPos.x += left;
+        newPos.y += top;
+      }
     }
-    if (/top/i.test(direction)) {
-      const y = this.state.original.y - delta.height;
-      // INFO: Apply x position by resize to draggable.
-      this.draggable.setState({ y });
+
+    if (newPos.x !== this.draggable.state.x || newPos.y !== this.draggable.state.y) {
+      this.draggable.setState(newPos);
     }
 
     this.updateOffsetFromParent();
@@ -552,6 +562,7 @@ export class Rnd extends React.PureComponent<Props, State> {
   refResizable = (c: Resizable | null) => {
     if (!c) return;
     this.resizable = c;
+    this.resizableElement.current = c.resizable;
   };
 
   render() {
@@ -583,7 +594,6 @@ export class Rnd extends React.PureComponent<Props, State> {
       resizeHandleWrapperStyle,
       scale,
       allowAnyClick,
-      nodeRef,
       ...resizableProps
     } = this.props;
     const defaultValue = this.props.default ? { ...this.props.default } : undefined;
@@ -626,7 +636,7 @@ export class Rnd extends React.PureComponent<Props, State> {
         cancel={cancel}
         scale={scale}
         allowAnyClick={allowAnyClick}
-        nodeRef={{ current: this.getSelfElement() }}
+        nodeRef={this.resizableElement}
       >
         <Resizable
           {...resizableProps}