ADD: resizer can be flipped

Author: WeiWang120

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-rotatable-draggable",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "A rectangle react component which can be resized and rotated",
   "author": "MockingBot",
   "license": "MIT",

src/components/Rect/index.js

@@ -27,7 +27,8 @@ export default class Rect extends PureComponent {
     onRotateEnd: PropTypes.func,
     onDragStart: PropTypes.func,
     onDrag: PropTypes.func,
-    onDragEnd: PropTypes.func
+    onDragEnd: PropTypes.func,
+    parentRotateAngle: PropTypes.number
   }
 
   setElementRef = ref => this.$element = ref
@@ -132,7 +133,7 @@ export default class Rect extends PureComponent {
 
   render () {
     const { styles: { position: { centerX, centerY }, size: { width, height }, transform: { rotateAngle } }, zoomable, rotatable, parentRotateAngle } = this.props
-    const style = { width, height, transform: `rotate(${rotateAngle}deg)`, left: centerX - width / 2, top: centerY - height / 2 }
+    const style = { width: Math.abs(width), height: Math.abs(height), transform: `rotate(${rotateAngle}deg)`, left: centerX - Math.abs(width) / 2, top: centerY - Math.abs(height) / 2 }
     const direction = zoomable.split(',').map(d => d.trim()).filter(d => d)
 
 

src/index.example.js

@@ -56,9 +56,9 @@ handleRotateStart = () => console.log("start")
         <ResizableRect
           {...{ left, top, width, height, rotateAngle }}
           // aspectRatio={false}
-          // minWidth={10}
-          // minHeight={10}
-          zoomable='n, w, s, e, nw, ne, se, sw'
+          // minWidth={-Infinity}
+          // minHeight={-Infinity}
+          zoomable="n, w, s, e, nw, ne, se, sw"
           // rotatable={true}
           onRotateStart={this.handleRotateStart}
           onRotate={this.handleRotate}