Switch Resizable back to <Draggable> so it can handle bounds itself

Author: STRML

lib/Resizable.jsx

@@ -1,17 +1,31 @@
+// @flow
 import {default as React, PropTypes} from 'react';
-import {DraggableCore} from 'react-draggable';
+import Draggable from 'react-draggable';
 import cloneElement from './cloneElement';
 
+type Bounds = {
+  top: number,
+  right: number,
+  bottom: number,
+  left: number
+};
 type Position = {
   deltaX: number,
   deltaY: number
 };
 type State = {
   aspectRatio: number,
+  bounds: Bounds,
   resizing: boolean,
   height: number,
   width: number,
 };
+type DragCallbackData = {
+  node: HTMLElement,
+  deltaX: number,
+  deltaY: number,
+  position: {left: number, top: number}
+};
 
 export default class Resizable extends React.Component {
 
@@ -34,6 +48,9 @@ export default class Resizable extends React.Component {
     // If you change this, be sure to update your css
     handleSize: PropTypes.array,
 
+    // If true, will only allow width/height to move in lockstep
+    lockAspectRatio: PropTypes.bool,
+
     // Min/max size
     minConstraints: PropTypes.arrayOf(PropTypes.number),
     maxConstraints: PropTypes.arrayOf(PropTypes.number),
@@ -48,55 +65,78 @@ export default class Resizable extends React.Component {
   };
 
   static defaultProps =  {
-    handleSize: [20, 20]
+    handleSize: [20, 20],
+    lockAspectRatio: false,
+    minConstraints: [20, 20],
+    maxConstraints: [Infinity, Infinity]
   };
 
-    bounds: this.constraintsToBounds(),
   state: State = {
+    aspectRatio: this.props.width / this.props.height,
+    bounds: this.constraintsToBounds(),
+    resizing: false,
+    height: this.props.height,
     width: this.props.width,
-    height: this.props.height
   };
 
-  componentWillReceiveProps(props: Object) {
-    if (!this.state.resizing) {
+  componentWillReceiveProps(nextProps: Object) {
+    if (!this.state.resizing &&
+        (nextProps.width !== this.props.width || nextProps.height !== this.props.height)) {
       this.setState({
-        width: props.width,
-        height: props.height,
-        bounds: this.constraintsToBounds()
+        width: nextProps.width,
+        height: nextProps.height
       });
     }
   }
 
-  constraintsToBounds() {
-    let p = this.props;
-    let mins = p.minConstraints || p.handleSize;
-    let maxes = p.maxConstraints || [Infinity, Infinity];
+  constraintsToBounds(): Bounds {
+    const {minConstraints, maxConstraints, height, width} = this.props;
     return {
-      left: mins[0] - p.width,
-      top: mins[1] - p.height,
-      right: maxes[0] - p.width,
-      bottom: maxes[1] - p.height
+      left: minConstraints[0] - width,
+      top: minConstraints[1] - height,
+      right: maxConstraints[0] - width,
+      bottom: maxConstraints[1] - height
     };
   }
 
+  lockAspectRatio(width: number, height: number, aspectRatio: number): [number, number] {
+    height = width / this.state.aspectRatio;
+    width = height * this.state.aspectRatio;
+    return [width, height];
+  }
+
   /**
    * Wrapper around drag events to provide more useful data.
    *
    * @param  {String} handlerName Handler name to wrap.
    * @return {Function}           Handler function.
    */
   resizeHandler(handlerName: string): Function {
-    return (e, {node, position}: {node: HTMLElement, position: Position}) => {
-      let width = this.state.width + position.deltaX, height = this.state.height + position.deltaY;
-      this.props[handlerName] && this.props[handlerName](e, {node, size: {width, height}});
+    return (e, {node, deltaX, deltaY}: DragCallbackData) => {
+      let width = this.state.width + deltaX, height = this.state.height + deltaY;
+
+      let widthChanged = width !== this.state.width, heightChanged = height !== this.state.height;
+      if (!widthChanged && !heightChanged) return;
+
+      if (this.props.lockAspectRatio) {
+        [width, height] = this.lockAspectRatio(width, height, this.state.aspectRatio);
+      }
 
+      // Set the appropriate state for this handler.
+      let newState = {};
       if (handlerName === 'onResizeStart') {
-        this.setState({resizing: true});
+        newState.resizing = true;
       } else if (handlerName === 'onResizeStop') {
-        this.setState({resizing: false});
+        newState.resizing = false;
       } else {
-        this.setState({width, height});
+        newState.width = width;
+        newState.height = height;
       }
+
+      this.setState(newState, () => {
+        this.props[handlerName] && this.props[handlerName](e, {node, size: {width, height}});
+      });
+
     };
   }
 
@@ -115,16 +155,17 @@ export default class Resizable extends React.Component {
       className,
       children: [
         p.children.props.children,
-        <DraggableCore
+        <Draggable
           {...p.draggableOpts}
           ref="draggable"
+          axis="none"
           onStop={this.resizeHandler('onResizeStop')}
           onStart={this.resizeHandler('onResizeStart')}
           onDrag={this.resizeHandler('onResize')}
           bounds={this.state.bounds}
           >
           <span className="react-resizable-handle" />
-        </DraggableCore>
+        </Draggable>
       ]
     });
   }

lib/ResizableBox.jsx

@@ -1,3 +1,4 @@
+// @flow
 import {default as React, PropTypes} from 'react';
 import Resizable from './Resizable';
 
@@ -8,79 +9,48 @@ type ResizeData = {element: Element, size: Size};
 // An example use of Resizable.
 export default class ResizableBox extends React.Component {
   static propTypes = {
-    lockAspectRatio: PropTypes.bool,
-    minConstraints: PropTypes.arrayOf(PropTypes.number),
-    maxConstraints: PropTypes.arrayOf(PropTypes.number),
     height: PropTypes.number,
     width: PropTypes.number
   };
 
   static defaultProps = {
-    lockAspectRatio: false,
     handleSize: [20,20]
   };
 
   state: State = {
     width: this.props.width,
     height: this.props.height,
-    aspectRatio: this.props.width / this.props.height
   };
 
   onResize = (event, {element, size}) => {
     let {width, height} = size;
-    let widthChanged = width !== this.state.width, heightChanged = height !== this.state.height;
-    if (!widthChanged && !heightChanged) return;
 
-    [width, height] = this.runConstraints(width, height);
-
-    this.setState({width, height}, () => {
-      if (this.props.onResize) {
-        this.props.onResize(event, {element, size: {width, height}});
-      }
+    this.setState(size, () => {
+      this.props.onResize && this.props.onResize(event, {element, size});
     });
-  }
-
-  // If you do this, be careful of constraints
-  runConstraints(width: number, height: number) {
-    let [min, max] = [this.props.minConstraints, this.props.maxConstraints];
-
-    if (this.props.lockAspectRatio) {
-      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];
   };
   onResize: (event: Event, data: ResizeData) => void;
 
   render(): ReactElement {
     // Basic wrapper around a Resizable instance.
-    // If you use Resizable directly, you are responsible for updating the component
+    // If you use Resizable directly, you are responsible for updating the child component
     // with a new width and height.
-    let {handleSize, minConstraints, maxConstraints, ...props} = this.props;
+    let {handleSize, onResizeStart, onResizeStop, draggableOpts,
+         minConstraints, maxConstraints, lockAspectRatio, ...props} = this.props;
     return (
       <Resizable
-        minConstraints={minConstraints}
-        maxConstraints={maxConstraints}
         handleSize={handleSize}
         width={this.state.width}
         height={this.state.height}
-        onResizeStart={this.props.onResizeStart}
+        onResizeStart={onResizeStart}
         onResize={this.onResize}
-        onResizeStop={this.props.onResizeStop}
-        draggableOpts={this.props.draggableOpts}
+        onResizeStop={onResizeStop}
+        draggableOpts={draggableOpts}
+        minConstraints={minConstraints}
+        maxConstraints={maxConstraints}
+        lockAspectRatio={lockAspectRatio}
         >
-        <div style={{width: this.state.width + 'px', height: this.state.height + 'px'}} {...props}>
-          {this.props.children}
-        </div>
+        <div style={{width: this.state.width + 'px', height: this.state.height + 'px'}} {...props} />
       </Resizable>
     );
   }

package.json

@@ -48,7 +48,7 @@
     "webpack-dev-server": "^1.14.1"
   },
   "dependencies": {
-    "react-draggable": "^1.2.0"
+    "react-draggable": "^1.3.1"
   },
   "peerDependencies": {
     "react": "^0.14.7",