Added lockAspectRatio option, fixes #3

Author: STRML

README.md

@@ -34,8 +34,7 @@ render: function() {
 
 
 ### Options
-
-```javascript
+{
 // Functions
 onResizeStop: React.PropTypes.func,
 onResizeStart: React.PropTypes.func,
@@ -47,4 +46,5 @@ height: React.PropTypes.number.isRequired,
 handleSize: React.PropTypes.array,
 // These will be passed wholesale to react-draggable
 draggableOpts: React.PropTypes.object
+}
 ```

lib/Resizable.jsx

@@ -32,11 +32,11 @@ var Resizable = module.exports = React.createClass({
   },
 
   minConstraints() {
-    return parseConstraints(this.props.minConstraints, this.props.handleSize[0]) || this.props.handleSize;
+    return parseConstraints(this.props.minConstraints, this.props.handleSize) || this.props.handleSize;
   },
 
   maxConstraints() {
-    return parseConstraints(this.props.maxConstraints, this.props.handleSize[1]);
+    return parseConstraints(this.props.maxConstraints, this.props.handleSize);
   },
 
 
@@ -101,7 +101,7 @@ function calcWH({left, top}, handleSize) {
  */
 function parseConstraints(constraints, handleSize) {
   if (!constraints) return;
-  return constraints.map(function(c) {
-    return c - handleSize;
+  return constraints.map(function(c, i) {
+    return c - handleSize[i];
   });
 }

lib/ResizableBox.jsx

@@ -9,22 +9,56 @@ var ResizableBox = module.exports = React.createClass({
   mixins: [PureRenderMixin],
 
   propTypes: {
+    lockAspectRatio: React.PropTypes.bool
+  },
+
+  getDefaultProps() {
+    return {
+      lockAspectRatio: false,
+      handleSize: [20,20],
+      minConstraints: [20,20]
+    };
   },
 
   getInitialState() {
     return {
       width: this.props.width,
-      height: this.props.height
+      height: this.props.height,
+      aspectRatio: this.props.width / this.props.height
     };
   },
 
   onResize(event, {element, size}) {
-    if (size.width !== this.state.width || size.height !== this.state.height) {
-      this.setState({
-        width: size.width,
-        height: size.height
-      });
+    var {width, height} = size;
+    var widthChanged = width !== this.state.width, heightChanged = height !== this.state.height;
+    if (!widthChanged && !heightChanged) return;
+
+    if (this.props.lockAspectRatio) {
+      [width, height] = this.preserveAspectRatio(width, height);
+    }
+
+    this.setState({
+      width: width,
+      height: height
+    });
+  },
+
+  // If you do this, be careful of constraints
+  preserveAspectRatio(width, height) {
+    var [min, max] = [this.props.minConstraints, this.props.maxConstraints];
+
+    height = width / this.state.aspectRatio;
+    width = height * this.state.aspectRatio;
+
+    if (min) {
+      width = Math.max(min[0], width);
+      height = Math.max(min[1], height);
+    }
+    if (max) {
+      width = Math.min(max[0], width);
+      height = Math.min(max[1], height);
     }
+    return [width, height];
   },
 
   render() {

test/TestLayout.jsx

@@ -24,6 +24,12 @@ var TestLayout = module.exports = React.createClass({
         <ResizableBox className="box box3" width={200} height={200} minConstraints={[150, 150]} maxConstraints={[500, 300]}>
           <span className="text">Resizable box with a handle that only appears on hover.</span>
         </ResizableBox>
+        <ResizableBox className="box" width={200} height={200} lockAspectRatio={true}>
+          <span className="text">Resizable square with a locked aspect ratio.</span>
+        </ResizableBox>
+        <ResizableBox className="box" width={200} height={120} lockAspectRatio={true}>
+          <span className="text">Resizable rectangle with a locked aspect ratio.</span>
+        </ResizableBox>
       </div>
     );
   }