Merge pull request #119 from KaplanTestPrep/prevent-edge-handle-rotation

Possibility to not rotate edge handle

README.md

@@ -234,6 +234,7 @@ All props are detailed below.
 | zoomDur             | number                  | false     | Duration of zoom transition.                              |
 | showGraphControls   | boolean                 | false     | Whether to show zoom controls.                            |
 | layoutEngineType    | typeof LayoutEngineType | false     | Uses a pre-programmed layout engine, such as 'SnapToGrid' |
+| rotateEdgeHandle    | boolean                 | false     | Whether to rotate edge handle with edge when a node is moved |
 | centerNodeOnMove    | boolean                 | false     | Weather the node should be centered on cursor when moving a node    |
 | initialBBox         | typeof IBBox            | false     | If specified, initial render graph using the given bounding box|
 
@@ -298,6 +299,7 @@ Prop Types:
   ) => any;
   renderNodeText?: (data: any, id: string | number, isSelected: boolean) => any;
   layoutEngineType?: LayoutEngineType;
+  rotateEdgeHandle?: boolean;
   centerNodeOnMove?: boolean;
   initialBBox?: IBBox;
 ```

src/components/edge.js

@@ -49,12 +49,14 @@ type IEdgeProps = {
   isSelected: boolean;
   nodeKey: string;
   viewWrapperElem: HTMLDivElement;
+  rotateEdgeHandle: true;
 };
 
 class Edge extends React.Component<IEdgeProps> {
   static defaultProps = {
     edgeHandleSize: 50,
-    isSelected: false
+    isSelected: false,
+    rotateEdgeHandle: true,
   };
 
   static getTheta(pt1: any, pt2: any) {
@@ -466,7 +468,7 @@ class Edge extends React.Component<IEdgeProps> {
   }
 
   getEdgeHandleRotation = (negate: any = false) => {
-    let rotated = false
+    let rotated = false;
     const src = this.props.sourceNode;
     const trg = this.props.targetNode;
     let theta = Edge.getTheta(src, trg) * 180 / Math.PI;
@@ -482,7 +484,7 @@ class Edge extends React.Component<IEdgeProps> {
 
   getEdgeHandleTransformation = () => {
     const translation = this.getEdgeHandleTranslation();
-    const [ rotation, ]= this.getEdgeHandleRotation();
+    const rotation = this.props.rotateEdgeHandle ? this.getEdgeHandleRotation()[0] : '';
     const offset = this.getEdgeHandleOffsetTranslation();
     return `${translation} ${rotation} ${offset}`;
   }
@@ -546,7 +548,7 @@ class Edge extends React.Component<IEdgeProps> {
   }
 
   render() {
-    const { data, edgeTypes, edgeHandleSize, viewWrapperElem } = this.props;
+    const { data, edgeTypes, edgeHandleSize, viewWrapperElem, rotateEdgeHandle } = this.props;
     if (!viewWrapperElem) {
       return null;
     }

src/components/graph-view-props.js

@@ -78,6 +78,7 @@ export type IGraphViewProps = {
   ) => any;
   afterRenderEdge?: (id: string, element: any, edge: IEdge, edgeContainer: any, isEdgeSelected: boolean) => void;
   renderNodeText?: (data: any, id: string | number, isSelected: boolean) => any;
+  rotateEdgeHandle?: boolean;
   centerNodeOnMove?: boolean;
   initialBBox: IBBox;
 };

src/components/graph-view.js

@@ -80,7 +80,8 @@ class GraphView extends React.Component<IGraphViewProps, IGraphViewState> {
     showGraphControls: true,
     zoomDelay: 1000,
     zoomDur: 750,
-    centerNodeOnMove: true
+    rotateEdgeHandle: true,
+    centerNodeOnMove: true,
 };
 
   static getDerivedStateFromProps(nextProps: IGraphViewProps, prevState: IGraphViewState) {
@@ -1146,6 +1147,7 @@ class GraphView extends React.Component<IGraphViewProps, IGraphViewState> {
         nodeKey={nodeKey}
         viewWrapperElem={this.viewWrapper.current}
         isSelected={this.isEdgeSelected(edge)}
+        rotateEdgeHandle={this.props.rotateEdgeHandle}
       />
     );
   }