diff --git a/README.md b/README.md index 04ac73cc..0fae193a 100644 --- a/README.md +++ b/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; ``` diff --git a/src/components/edge.js b/src/components/edge.js index 9dbe68c5..38f475c2 100644 --- a/src/components/edge.js +++ b/src/components/edge.js @@ -49,12 +49,14 @@ type IEdgeProps = { isSelected: boolean; nodeKey: string; viewWrapperElem: HTMLDivElement; + rotateEdgeHandle: true; }; class Edge extends React.Component { 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 { } 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 { 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 { } render() { - const { data, edgeTypes, edgeHandleSize, viewWrapperElem } = this.props; + const { data, edgeTypes, edgeHandleSize, viewWrapperElem, rotateEdgeHandle } = this.props; if (!viewWrapperElem) { return null; } diff --git a/src/components/graph-view-props.js b/src/components/graph-view-props.js index 73a9b9e7..1c345a4d 100644 --- a/src/components/graph-view-props.js +++ b/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; }; diff --git a/src/components/graph-view.js b/src/components/graph-view.js index 45bade5b..c3de2598 100644 --- a/src/components/graph-view.js +++ b/src/components/graph-view.js @@ -80,7 +80,8 @@ class GraphView extends React.Component { 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 { nodeKey={nodeKey} viewWrapperElem={this.viewWrapper.current} isSelected={this.isEdgeSelected(edge)} + rotateEdgeHandle={this.props.rotateEdgeHandle} /> ); }