Allow rotation to pass through

.size-snapshot.json

@@ -1,12 +1,12 @@
 {
   "dist/react-draggable.js": {
-    "bundled": 75658,
-    "minified": 22849,
-    "gzipped": 7695
+    "bundled": 88330,
+    "minified": 28079,
+    "gzipped": 8875
   },
   "dist/react-draggable.min.js": {
-    "bundled": 51843,
-    "minified": 15835,
-    "gzipped": 5627
+    "bundled": 56781,
+    "minified": 18383,
+    "gzipped": 6270
   }
 }

lib/Draggable.js

@@ -29,6 +29,7 @@ export type DraggableProps = {
   defaultClassNameDragged: string,
   defaultPosition: ControlPosition,
   position: ControlPosition,
+  rotate: number,
   scale: number
 };
 
@@ -321,7 +322,8 @@ export default class Draggable extends React.Component<DraggableProps, Draggable
       // Set top if vertical drag is enabled
       y: canDragY(this) && draggable ?
         this.state.y :
-        position.y
+        position.y,
+      r: this.props.rotate?this.props.rotate:0
     };
 
     // If this element was SVG, we use the `transform` attribute.

lib/utils/domFns.js

@@ -109,13 +109,13 @@ export function offsetXYFromParent(evt: {clientX: number, clientY: number}, offs
   return {x, y};
 }
 
-export function createCSSTransform({x, y}: {x: number, y: number}): Object {
+export function createCSSTransform({x, y, r}: {x: number, y: number, r: number}): Object {
   // Replace unitless items with px
-  return {[browserPrefixToKey('transform', browserPrefix)]: 'translate(' + x + 'px,' + y + 'px)'};
+  return {[browserPrefixToKey('transform', browserPrefix)]: `translate(${x}px, ${y}px) rotate(${r}deg)`};
 }
 
-export function createSVGTransform({x, y}: {x: number, y: number}): string {
-  return 'translate(' + x + ',' + y + ')';
+export function createSVGTransform({x, y, r}: {x: number, y: number, r:number}): string {
+  return `translate(${x}, ${y}) rotate(${r})`;
 }
 
 export function getTouch(e: MouseTouchEvent, identifier: number): ?{clientX: number, clientY: number} {

specs/draggable.spec.jsx

@@ -90,7 +90,7 @@ describe('react-draggable', function () {
           <div
             className="react-draggable"
             style={{
-              [transformKey]: 'translate(0px, 0px)'
+              [transformKey]: 'translate(0px, 0px) rotate(0deg)'
             }}
             transform={null} />
         </DraggableCore>
@@ -177,7 +177,7 @@ describe('react-draggable', function () {
     });
 
     it('should throw when setting transform', function () {
-      drag = (<Draggable transform="translate(100, 100)"><span /></Draggable>);
+      drag = (<Draggable transform="translate(100, 100) rotate(0deg)"><span /></Draggable>);
 
       TestUtils.renderIntoDocument(drag);
 
@@ -254,7 +254,7 @@ describe('react-draggable', function () {
 
       const style = node.getAttribute('style');
       assert(dragged === true);
-      assert(style.indexOf('transform: translate(100px, 100px);') >= 0);
+      assert(style.indexOf('transform: translate(100px, 100px) rotate(0deg);') >= 0);
     });
 
     it('should honor "x" axis', function () {
@@ -270,7 +270,7 @@ describe('react-draggable', function () {
 
       const style = node.getAttribute('style');
       assert(dragged === true);
-      assert(style.indexOf('transform: translate(100px, 0px);') >= 0);
+      assert(style.indexOf('transform: translate(100px, 0px) rotate(0deg);') >= 0);
     });
 
     it('should honor "y" axis', function () {
@@ -286,7 +286,7 @@ describe('react-draggable', function () {
 
       const style = node.getAttribute('style');
       assert(dragged === true);
-      assert(style.indexOf('transform: translate(0px, 100px);') >= 0);
+      assert(style.indexOf('transform: translate(0px, 100px) rotate(0deg);') >= 0);
     });
 
     it('should honor "none" axis', function () {
@@ -302,7 +302,7 @@ describe('react-draggable', function () {
 
       const style = node.getAttribute('style');
       assert(dragged === true);
-      assert(style.indexOf('transform: translate(0px, 0px);') >= 0);
+      assert(style.indexOf('transform: translate(0px, 0px) rotate(0deg);') >= 0);
     });
 
     it('should detect if an element is instanceof SVGElement and set state.isElementSVG to true', function() {
@@ -336,7 +336,8 @@ describe('react-draggable', function () {
       simulateMovementFromTo(drag, 0, 0, 100, 100);
 
       const transform = node.getAttribute('transform');
-      assert(transform.indexOf('translate(100,100)') >= 0);
+      assert(transform);
+      assert(transform.indexOf('translate(100, 100) rotate(0)') >= 0);
     });
 
       it('should add and remove transparent selection class', function () {
@@ -410,7 +411,7 @@ describe('react-draggable', function () {
 
         const style = node.getAttribute('style');
         assert(dragged === true);
-        assert(style.indexOf('transform: translate(100px, 100px);') >= 0);
+        assert(style.indexOf('transform: translate(100px, 100px) rotate(0deg);') >= 0);
 
         renderRoot.parentNode.removeChild(renderRoot);
         done();