Dragging elements in a rotated coordinate system

README.md

@@ -111,6 +111,7 @@ class App extends React.Component {
         position={null}
         grid={[25, 25]}
         scale={1}
+        angle={0}
         onStart={this.handleStart}
         onDrag={this.handleDrag}
         onStop={this.handleStop}>
@@ -278,6 +279,11 @@ positionOffset: {x: number | string, y: number | string},
 // you to, for example, get the correct drag deltas while you are zoomed in or out via
 // a transform or matrix in the parent of this element.
 scale: number
+
+// Specifies the angle in degrees of the canvas your are dragging this element on. This allows
+// you to, for example, get the correct drag deltas while you are rotated via
+// a transform or matrix in the parent of this element.
+angle: number
 }
 ```
 
@@ -335,6 +341,7 @@ on itself and thus must have callbacks attached to be useful.
   onStop: DraggableEventHandler,
   onMouseDown: (e: MouseEvent) => void,
   scale: number
+  angle: number
 }
 ```
 

lib/Draggable.js

@@ -30,6 +30,7 @@ export type DraggableDefaultProps = {
   defaultClassNameDragged: string,
   defaultPosition: ControlPosition,
   scale: number,
+  angle: number,
 };
 
 export type DraggableProps = {
@@ -174,7 +175,8 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
     defaultClassNameDragging: 'react-draggable-dragging',
     defaultClassNameDragged: 'react-draggable-dragged',
     defaultPosition: {x: 0, y: 0},
-    scale: 1
+    scale: 1,
+    angle: 0
   };
 
   // React 16.3+
@@ -342,6 +344,7 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
       position,
       positionOffset,
       scale,
+      angle,
       ...draggableCoreProps
     } = this.props;
 

lib/DraggableCore.js

@@ -49,6 +49,7 @@ export type DraggableCoreDefaultProps = {
   onStop: DraggableEventHandler,
   onMouseDown: (e: MouseEvent) => void,
   scale: number,
+  angle: number,
 };
 
 export type DraggableCoreProps = {
@@ -203,6 +204,11 @@ export default class DraggableCore extends React.Component<DraggableCoreProps> {
      */
     scale: PropTypes.number,
 
+    /**
+     * `angle`, if set, the rotated coordinate system is taken into account when dragging an element
+     */
+    angle: PropTypes.number,
+
     /**
      * These properties should be defined on the child, not here.
      */
@@ -220,6 +226,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps> {
     onStop: function(){},
     onMouseDown: function(){},
     scale: 1,
+    angle: 0,
   };
 
   dragging: boolean = false;

lib/utils/positionFns.js

@@ -103,12 +103,13 @@ export function createCoreData(draggable: DraggableCore, x: number, y: number):
 // Create an data exposed by <Draggable>'s events
 export function createDraggableData(draggable: Draggable, coreData: DraggableData): DraggableData {
   const scale = draggable.props.scale;
+  const angleRadian = Math.PI * draggable.props.angle / 180.0;
   return {
     node: coreData.node,
-    x: draggable.state.x + (coreData.deltaX / scale),
-    y: draggable.state.y + (coreData.deltaY / scale),
-    deltaX: (coreData.deltaX / scale),
-    deltaY: (coreData.deltaY / scale),
+    x: draggable.state.x + coreData.deltaX * Math.cos(angleRadian) / scale + coreData.deltaY * Math.sin(angleRadian) / scale,
+    y: draggable.state.y - coreData.deltaX * Math.sin(angleRadian) / scale + coreData.deltaY * Math.cos(angleRadian) / scale,
+    deltaX: coreData.deltaX * Math.cos(angleRadian) / scale + coreData.deltaY * Math.sin(angleRadian) / scale,
+    deltaY: -coreData.deltaX * Math.sin(angleRadian) / scale + coreData.deltaY * Math.cos(angleRadian) / scale,
     lastX: draggable.state.x,
     lastY: draggable.state.y
   };

typings/index.d.ts

@@ -54,7 +54,8 @@ declare module 'react-draggable' {
     onDrag: DraggableEventHandler,
     onStop: DraggableEventHandler,
     onMouseDown: (e: MouseEvent) => void,
-    scale: number
+    scale: number,
+    angle: number
   }
 
   export default class Draggable extends React.Component<Partial<DraggableProps>, {}> {