Merge pull request #626 from bokuweb/fix-#622

Fix #622

Author: bokuweb

package.json

@@ -40,20 +40,20 @@
   },
   "homepage": "https://github.com/bokuweb/react-rnd",
   "devDependencies": {
-    "@babel/cli": "7.7.5",
-    "@babel/core": "7.7.5",
-    "@babel/plugin-proposal-class-properties": "7.7.4",
-    "@babel/plugin-transform-modules-commonjs": "7.7.5",
-    "@babel/preset-react": "7.7.4",
-    "@babel/preset-typescript": "7.7.4",
-    "@babel/traverse": "7.7.4",
-    "@babel/types": "7.7.4",
-    "@emotion/core": "10.0.14",
-    "@storybook/addon-actions": "5.1.3",
-    "@storybook/addon-info": "5.1.3",
-    "@storybook/addon-links": "5.1.3",
-    "@storybook/addon-options": "5.1.3",
-    "@storybook/react": "5.1.3",
+    "@babel/cli": "7.8.0",
+    "@babel/core": "7.8.0",
+    "@babel/plugin-proposal-class-properties": "7.8.0",
+    "@babel/plugin-transform-modules-commonjs": "7.8.0",
+    "@babel/preset-react": "7.8.0",
+    "@babel/preset-typescript": "7.8.0",
+    "@babel/traverse": "7.8.0",
+    "@babel/types": "7.8.0",
+    "@emotion/core": "10.0.27",
+    "@storybook/addon-actions": "5.3.1",
+    "@storybook/addon-info": "5.3.1",
+    "@storybook/addon-links": "5.3.1",
+    "@storybook/addon-options": "5.3.1",
+    "@storybook/react": "5.3.1",
     "@types/enzyme": "3.1.16",
     "@types/enzyme-adapter-react-16": "1.0.5",
     "@types/node": "^12.0.10",
@@ -67,7 +67,7 @@
     "babel-eslint": "10.0.3",
     "babel-loader": "8.0.6",
     "cpy-cli": "2.0.0",
-    "cross-env": "5.2.0",
+    "cross-env": "6.0.3",
     "enzyme": "3.8.0",
     "enzyme-adapter-react-16": "1.9.1",
     "gh-pages": "2.0.1",
@@ -86,10 +86,10 @@
     "rollup-plugin-typescript2": "0.22.0",
     "rollup-watch": "4.3.1",
     "sinon": "7.3.2",
-    "tslint": "5.18.0",
+    "tslint": "5.20.1",
     "tslint-eslint-rules": "5.4.0",
-    "tslint-plugin-prettier": "2.0.1",
-    "tslint-react": "4.0.0",
+    "tslint-plugin-prettier": "2.1.0",
+    "tslint-react": "4.1.0",
     "typescript": "3.7.4"
   },
   "files": [

src/index.test.tsx

@@ -146,8 +146,8 @@ test("should call onDrag when dragging", async t => {
     .simulate("mousedown", { clientX: 0, clientY: 0 });
   mouseMove(200, 220);
   t.is(onDrag.callCount, 1);
-  t.is(onDrag.firstCall.args[1].x, 600);
-  t.is(onDrag.firstCall.args[1].y, 620);
+  t.is(onDrag.firstCall.args[1].x, 500);
+  t.is(onDrag.firstCall.args[1].y, 520);
   t.not((rnd.getDOMNode().getAttribute("style") || "").indexOf("transform: translate(400px, 420px)"), -1);
 });
 
@@ -161,8 +161,8 @@ test("should call onDragStop when drag stop", async t => {
   mouseMove(200, 220);
   mouseUp(100, 120);
   t.is(onDragStop.callCount, 1);
-  t.is(onDragStop.firstCall.args[1].x, -100);
-  t.is(onDragStop.firstCall.args[1].y, -100);
+  t.is(onDragStop.firstCall.args[1].x, 200);
+  t.is(onDragStop.firstCall.args[1].y, 220);
 });
 
 test("should dragging disabled when axis equals none", async t => {

src/index.tsx

@@ -198,6 +198,7 @@ export class Rnd extends React.PureComponent<Props, State> {
   draggable!: $TODO; // Draggable;
   resizing = false;
   resizingPosition = { x: 0, y: 0 };
+  offsetFromParent = { left: 0, top: 0 };
 
   constructor(props: Props) {
     super(props);
@@ -226,7 +227,8 @@ export class Rnd extends React.PureComponent<Props, State> {
   }
 
   componentDidMount() {
-    const { left, top } = this.getOffsetFromParent();
+    this.updateOffsetFromParent();
+    const { left, top } = this.offsetFromParent;
     const { x, y } = this.getDraggablePosition();
     this.draggable.setState({
       x: x - left,
@@ -329,7 +331,8 @@ export class Rnd extends React.PureComponent<Props, State> {
     const left = (boundaryLeft - parentLeft) / scale;
     const top = boundaryTop - parentTop;
     if (!this.resizable) return;
-    const offset = this.getOffsetFromParent();
+    this.updateOffsetFromParent();
+    const offset = this.offsetFromParent;
     this.setState({
       bounds: {
         top: top - offset.top,
@@ -342,14 +345,14 @@ export class Rnd extends React.PureComponent<Props, State> {
 
   onDrag(e: RndDragEvent, data: DraggableData) {
     if (this.props.onDrag) {
-      const offset = this.getOffsetFromParent();
+      const offset = this.offsetFromParent;
       this.props.onDrag(e, { ...data, x: data.x - offset.left, y: data.y - offset.top });
     }
   }
 
   onDragStop(e: RndDragEvent, data: DraggableData) {
     if (this.props.onDragStop) {
-      const { left, top } = this.getOffsetFromParent();
+      const { left, top } = this.offsetFromParent;
       return this.props.onDragStop(e, { ...data, x: data.x + left, y: data.y + top });
     }
   }
@@ -363,7 +366,7 @@ export class Rnd extends React.PureComponent<Props, State> {
     this.resizing = true;
 
     const scale = this.props.scale as number;
-    const offset = this.getOffsetFromParent();
+    const offset = this.offsetFromParent;
     const pos = this.getDraggablePosition();
     this.resizingPosition = { x: pos.x + offset.left, y: pos.y + offset.top };
     this.setState({
@@ -458,27 +461,22 @@ export class Rnd extends React.PureComponent<Props, State> {
     elementRef: HTMLDivElement,
     delta: { height: number; width: number },
   ) {
-    let x;
-    let y;
-    const offset = this.getOffsetFromParent();
     if (/left/i.test(direction)) {
-      x = this.state.original.x - delta.width;
+      const x = this.state.original.x - delta.width;
       // INFO: Apply x position by resize to draggable.
       this.draggable.setState({ x });
-      x += offset.left;
     }
     if (/top/i.test(direction)) {
-      y = this.state.original.y - delta.height;
+      const y = this.state.original.y - delta.height;
       // INFO: Apply x position by resize to draggable.
       this.draggable.setState({ y });
-      y += offset.top;
-    }
-    if (typeof x === "undefined") {
-      x = this.getDraggablePosition().x + offset.left;
-    }
-    if (typeof y === "undefined") {
-      y = this.getDraggablePosition().y + offset.top;
     }
+
+    this.updateOffsetFromParent();
+    const offset = this.offsetFromParent;
+    const x = this.getDraggablePosition().x + offset.left;
+    const y = this.getDraggablePosition().y + offset.top;
+
     this.resizingPosition = { x, y };
     if (!this.props.onResize) return;
     this.props.onResize(e, direction, elementRef, delta, {
@@ -510,7 +508,7 @@ export class Rnd extends React.PureComponent<Props, State> {
     this.draggable.setState(position);
   }
 
-  getOffsetFromParent(): { top: number; left: number } {
+  updateOffsetFromParent() {
     const scale = this.props.scale as number;
     const parent = this.getParent();
     const self = this.getSelfElement();
@@ -525,7 +523,7 @@ export class Rnd extends React.PureComponent<Props, State> {
     const parentTop = parentRect.top;
     const selfRect = self.getBoundingClientRect();
     const position = this.getDraggablePosition();
-    return {
+    this.offsetFromParent = {
       left: selfRect.left - parentLeft - position.x * scale,
       top: selfRect.top - parentTop - position.y * scale,
     };
@@ -581,7 +579,7 @@ export class Rnd extends React.PureComponent<Props, State> {
       ...cursorStyle,
       ...style,
     };
-    const { left, top } = this.getOffsetFromParent();
+    const { left, top } = this.offsetFromParent;
     let draggablePosition;
     if (position) {
       draggablePosition = {

stories/index.tsx

@@ -41,6 +41,7 @@ import SandboxBodySizeToMaxWidth from "./sandbox/bodysize-to-maxwidth";
 import SandboxLockAspectRatioWithBounds from "./sandbox/lock-aspect-ratio-with-bounds";
 
 import LockAspectRatioBasic from "./lock-aspect-ratio/basic";
+import Issue622 from "./sandbox/issue-#622";
 
 storiesOf("bare", module).add("bare", () => <Bare />);
 
@@ -84,6 +85,7 @@ storiesOf("grid", module)
 
 storiesOf("sandbox", module)
   .add("body size apply to maxwidth", () => <SandboxBodySizeToMaxWidth />)
-  .add("lock aspect ratio with bounds", () => <SandboxLockAspectRatioWithBounds />);
+  .add("lock aspect ratio with bounds", () => <SandboxLockAspectRatioWithBounds />)
+  .add("issue622", () => <Issue622 />);
 
 storiesOf("ratio", module).add("lock aspect ratio", () => <LockAspectRatioBasic />);

stories/sandbox/issue-#622.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { Rnd } from "../../src";
+
+const style = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderLeft: "solid 5px #ddd",
+  borderRight: "solid 5px #ddd",
+  borderTop: "solid 1px #ddd",
+  borderBottom: "solid 1px #ddd",
+  background: "#f0f0f0",
+  height: "100%",
+};
+
+export default class App extends React.Component {
+  state = {
+    width: 200,
+    height: 52,
+    x: 100,
+    y: 0,
+  };
+
+  render() {
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "50px",
+          border: "1px solid pink",
+          position: "relative",
+        }}
+      >
+        <Rnd
+          style={style}
+          bounds="parent"
+          enableResizing={{
+            top: false,
+            right: true,
+            bottom: false,
+            left: true,
+            topRight: false,
+            bottomRight: false,
+            bottomLeft: false,
+            topLeft: false,
+          }}
+          size={{ width: this.state.width, height: this.state.height }}
+          position={{ x: this.state.x, y: this.state.y }}
+          onDragStop={(e, d) => {
+            this.setState({ x: d.x, y: d.y });
+          }}
+          onResizeStop={(e, direction, ref, delta, position) => {
+            this.setState({
+              width: ref.style.width,
+              height: ref.style.height,
+              ...position,
+            });
+          }}
+        >
+          Rnd
+        </Rnd>
+      </div>
+    );
+  }
+}