Revert use of <Draggable> over <DraggableCore> and implement own constraints.

Author: STRML

lib/Resizable.jsx

@@ -1,28 +1,20 @@
 // @flow
 import {default as React, PropTypes} from 'react';
-import Draggable from 'react-draggable';
+import {DraggableCore} 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 = {
   resizing: boolean,
   width: number, height: number,
-  initialWidth: number, initialHeight: number
+  slackW: number, slackH: number
 };
 type DragCallbackData = {
   node: HTMLElement,
-  deltaX: number,
-  deltaY: number,
-  position: {left: number, top: number}
+  position: Position
 };
 
 export default class Resizable extends React.Component {
@@ -71,10 +63,8 @@ export default class Resizable extends React.Component {
 
   state: State = {
     resizing: false,
-    initialHeight: this.props.height,
-    initialWidth: this.props.width,
-    height: this.props.height,
-    width: this.props.width,
+    width: this.props.width, height: this.props.height,
+    slackW: 0, slackH: 0
   };
 
   componentWillReceiveProps(nextProps: Object) {
@@ -83,50 +73,75 @@ export default class Resizable extends React.Component {
         (nextProps.width !== this.props.width || nextProps.height !== this.props.height)) {
       this.setState({
         width: nextProps.width,
-        height: nextProps.height,
-        initialWidth: nextProps.width,
-        initialHeight: nextProps.height
+        height: nextProps.height
       });
     }
   }
 
-  /**
-   * Convert our constraints into bounds for the <Draggable>.
-   * We have to use initialHeight/Width here because that's where the <Draggable>'s `0` is.
-   */
-  constraintsToBounds(): Bounds {
-    const {minConstraints, maxConstraints} = this.props;
-    const {initialHeight, initialWidth} = this.state;
-    return {
-      left: minConstraints[0] - initialWidth,
-      top: minConstraints[1] - initialHeight,
-      right: maxConstraints[0] - initialWidth,
-      bottom: maxConstraints[1] - initialHeight
-    };
-  }
-
   lockAspectRatio(width: number, height: number, aspectRatio: number): [number, number] {
     height = width / aspectRatio;
     width = height * aspectRatio;
     return [width, height];
   }
 
+  // If you do this, be careful of constraints
+  runConstraints(width: number, height: number): [number, number] {
+    let [min, max] = [this.props.minConstraints, this.props.maxConstraints];
+
+    if (this.props.lockAspectRatio) {
+      const ratio = this.state.width / this.state.height;
+      height = width / ratio;
+      width = height * ratio;
+    }
+
+    if (!min && !max) return [width, height];
+
+    let [oldW, oldH] = [width, height];
+
+    // Add slack to the values used to calculate bound position. This will ensure that if
+    // we start removing slack, the element won't react to it right away until it's been
+    // completely removed.
+    let {slackW, slackH} = this.state;
+    width += slackW;
+    height += slackH;
+
+    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);
+    }
+
+    // If the numbers changed, we must have introduced some slack. Record it for the next iteration.
+    slackW += (oldW - width);
+    slackH += (oldH - height);
+    if (slackW !== this.state.slackW || slackH !== this.state.slackH) {
+      this.setState({slackW, slackH});
+    }
+
+    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, deltaX, deltaY}: DragCallbackData) => {
+    return (e, {node, position}: DragCallbackData) => {
+      const {deltaX, deltaY} = position;
       let width = this.state.width + deltaX, height = this.state.height + deltaY;
 
+      // Early return if no change
       let widthChanged = width !== this.state.width, heightChanged = height !== this.state.height;
       if (handlerName === 'onResize' && !widthChanged && !heightChanged) return;
 
-      if (this.props.lockAspectRatio) {
-        [width, height] = this.lockAspectRatio(width, height, this.state.width / this.state.height);
-      }
+      console.log({width, height, slackW: this.state.slackW, slackH: this.state.slackH});
+      [width, height] = this.runConstraints(width, height);
+      console.log({width, height, slackW: this.state.slackW, slackH: this.state.slackH});
 
       // Set the appropriate state for this handler.
       let newState = {};
@@ -135,6 +150,8 @@ export default class Resizable extends React.Component {
       } else if (handlerName === 'onResizeStop') {
         newState.resizing = false;
       } else {
+        // Early return if no change after constraints
+        if (width === this.state.width && height === this.state.height) return;
         newState.width = width;
         newState.height = height;
       }
@@ -161,17 +178,15 @@ export default class Resizable extends React.Component {
       className,
       children: [
         p.children.props.children,
-        <Draggable
+        <DraggableCore
           {...p.draggableOpts}
           ref="draggable"
-          axis="none"
           onStop={this.resizeHandler('onResizeStop')}
           onStart={this.resizeHandler('onResizeStart')}
           onDrag={this.resizeHandler('onResize')}
-          bounds={this.constraintsToBounds()}
           >
           <span className="react-resizable-handle" />
-        </Draggable>
+        </DraggableCore>
       ]
     });
   }