fixed bounded case for resize symmetry

Author: boev

src/index.tsx

@@ -447,28 +447,56 @@ export class Rnd extends React.PureComponent<Props, State> {
         const hasTop = dir.startsWith("top");
         const hasBottom = dir.startsWith("bottom");
 
-        if ((hasLeft || hasTop) && this.resizable) {
-          const max = (selfLeft - boundaryLeft) / scale + this.resizable.size.width;
-          this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
-        }
-        // INFO: To set bounds in `lock aspect ratio with bounds` case. See also that story.
-        if (hasRight || (this.props.lockAspectRatio && !hasLeft && !hasTop)) {
-          const max = offsetWidth + (boundaryLeft - selfLeft) / scale;
-          this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
-        }
-        if ((hasTop || hasLeft) && this.resizable) {
-          const max = (selfTop - boundaryTop) / scale + this.resizable.size.height;
-          this.setState({
-            maxHeight: max > Number(maxHeight) ? maxHeight : max,
-          });
-        }
-        // INFO: To set bounds in `lock aspect ratio with bounds` case. See also that story.
-        if (hasBottom || (this.props.lockAspectRatio && !hasTop && !hasLeft)) {
-          const max = offsetHeight + (boundaryTop - selfTop) / scale;
-          this.setState({
-            maxHeight: max > Number(maxHeight) ? maxHeight : max,
-          });
+        if (!this.props.resizeSymmetry || this.props.resizeSymmetry == "none")
+        {
+          if ((hasLeft || hasTop) && this.resizable) {
+            const max = (selfLeft - boundaryLeft) / scale + this.resizable.size.width;
+            this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
+          }
+          // INFO: To set bounds in `lock aspect ratio with bounds` case. See also that story.
+          if (hasRight || (this.props.lockAspectRatio && !hasLeft && !hasTop)) {
+            const max = offsetWidth  + (boundaryLeft - selfLeft) / scale;
+            this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
+          }
+          if ((hasTop || hasLeft) && this.resizable) {
+            const max = (selfTop - boundaryTop) / scale + this.resizable.size.height;
+            this.setState({
+              maxHeight: max > Number(maxHeight) ? maxHeight : max,
+            });
+          }
+          // INFO: To set bounds in `lock aspect ratio with bounds` case. See also that story.
+          if (hasBottom || (this.props.lockAspectRatio && !hasTop && !hasLeft)) {
+            const max = offsetHeight + (boundaryTop - selfTop) / scale;
+            this.setState({
+              maxHeight: max > Number(maxHeight) ? maxHeight : max,
+            });
+          }
         }
+        else
+        {
+          if ((hasLeft || hasTop || hasRight || (this.props.lockAspectRatio && !hasLeft && !hasTop)) && this.resizable) {
+            if (this.props.resizeSymmetry == "vertical" || this.props.resizeSymmetry == "central")
+            {
+              const spaceLeft = (selfLeft - boundaryLeft) / scale;
+              const spaceRight = offsetWidth - spaceLeft - this.resizable.size.width;
+              const max = spaceRight > spaceLeft ? (this.resizable.size.width + 2 * spaceLeft) : (this.resizable.size.width + 2 * spaceRight);
+              this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
+            }                          
+          }
+
+          if ((hasTop || hasLeft || hasBottom || (this.props.lockAspectRatio && !hasTop && !hasLeft)) && this.resizable) {            
+            if (this.props.resizeSymmetry == "horizontal" || this.props.resizeSymmetry == "central")
+            {
+              const spaceTop = (selfTop - boundaryTop) / scale;
+              const spaceBottom = offsetHeight - spaceTop - this.resizable.size.height;
+              const max = spaceBottom > spaceTop ? (this.resizable.size.height + 2 * spaceTop) : (this.resizable.size.height + 2 * spaceBottom);
+
+              this.setState({
+                maxHeight: max > Number(maxHeight) ? maxHeight : max,
+              });
+            }
+          }
+        }        
       }
     } else {
       this.setState({
@@ -505,7 +533,7 @@ export class Rnd extends React.PureComponent<Props, State> {
         }
       }
     }
-    else if (!this.props.resizeSymmetry || this.props.resizeSymmetry == "vertical")
+    else if (this.props.resizeSymmetry == "vertical")
     {
       const left = -delta.width / 2;
       const top = -delta.height;
@@ -522,7 +550,7 @@ export class Rnd extends React.PureComponent<Props, State> {
         }
       }
     }
-    else if (!this.props.resizeSymmetry || this.props.resizeSymmetry == "horizontal")
+    else if (this.props.resizeSymmetry == "horizontal")
     {
       const left = -delta.width;
       const top = -delta.height / 2;
@@ -536,7 +564,7 @@ export class Rnd extends React.PureComponent<Props, State> {
         }
       }
     }
-    else if (!this.props.resizeSymmetry || this.props.resizeSymmetry == "central")
+    else if (this.props.resizeSymmetry == "central")
     {
       const left = -delta.width / 2;
       const top = -delta.height / 2;

stories/index.tsx

@@ -54,6 +54,7 @@ import Issue622 from "./sandbox/issue-#622";
 import ResizeSymmetryVertical from "./resizeSymmetry/vertical"
 import ResizeSymmetryHorizontal from "./resizeSymmetry/horizontal"
 import ResizeSymmetryCentral from "./resizeSymmetry/central"
+import ResizeSymmetryBounds from "./resizeSymmetry/bounds"
 
 storiesOf("bare", module).add("bare", () => <Bare />);
 
@@ -114,4 +115,5 @@ storiesOf("min", module).add("min uncontrolled", () => <MinUncontrolled />);
 storiesOf("resize symmetry", module).add("vertical", () => <ResizeSymmetryVertical />);
 storiesOf("resize symmetry", module).add("horizontal", () => <ResizeSymmetryHorizontal />);
 storiesOf("resize symmetry", module).add("central", () => <ResizeSymmetryCentral />);
+storiesOf("resize symmetry", module).add("bounds", () => <ResizeSymmetryBounds />);
 

stories/resizeSymmetry/bounds.tsx

@@ -0,0 +1,39 @@
+import React, {CSSProperties} from "react";
+import { Rnd } from "../../src";
+import { style, parentBoundary } from "../styles";
+
+const innerDiv: CSSProperties = {
+  display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    border: "dashed 1px #9C27B0",
+    height: "120%",
+};
+const lineStyle: CSSProperties = {
+  width: "120%",
+  top: "50%",
+  border: "dashed 1px #9C27B0",
+  position: 'absolute'
+}
+
+
+export default () => (
+  <div style={parentBoundary}>
+  <Rnd
+    style={style}
+    bounds="parent"
+    default={{
+      width: 200,
+      height: 200,
+      x: 0,
+      y: 0,
+    }}
+    resizeSymmetry="central"
+  >
+    <div style={lineStyle} />
+    <div style={innerDiv}>
+    
+    </div>
+  </Rnd>
+  </div>
+);