Handle creating edges

actions/pulse.js

@@ -22,6 +22,7 @@ module.exports = createActionCreators({
 		KILL_SINK_INPUT_BY_INDEX: sinkInputIndex => ({ sinkInputIndex }),
 		KILL_SOURCE_OUTPUT_BY_INDEX: sourceOutputIndex => ({ sourceOutputIndex }),
 
+		LOAD_MODULE: (name, argument) => ({ name, argument }),
 		UNLOAD_MODULE_BY_INDEX: moduleIndex => ({ moduleIndex }),
 
 		SET_SINK_VOLUMES: (index, channelVolumes) => ({ index, channelVolumes }),

components/graph/base.js

@@ -21,12 +21,6 @@ const { size } = require('../../constants/view');
 
 class GraphView extends GraphViewBase {
 	constructor(props) {
-		if (!props.layoutEngine) {
-			props = merge(props, {
-				layoutEngineType: 'None',
-			});
-		}
-
 		super(props);
 
 		if (props.layoutEngine) {

components/graph/index.js

@@ -554,6 +554,7 @@ class Graph extends React.Component {
 			onNodeMouseDown: this.onNodeMouseDown.bind(this),
 
 			onSelectEdge: this.onSelectEdge.bind(this),
+			canCreateEdge: this.canCreateEdge.bind(this),
 			onCreateEdge: this.onCreateEdge.bind(this),
 			onSwapEdge: this.onSwapEdge.bind(this),
 			onDeleteEdge: this.onDeleteEdge.bind(this),
@@ -747,7 +748,28 @@ class Graph extends React.Component {
 		this.setState({ selected });
 	}
 
-	onCreateEdge() {
+	canCreateEdge(source, target) {
+		if (!target) {
+			return true;
+		}
+
+		if (source.type === 'source' && target.type === 'sink') {
+			return true;
+		}
+
+		return false;
+	}
+
+	onCreateEdge(source, target) {
+		const sourcePai = dgoToPai.get(source);
+		const targetPai = dgoToPai.get(target);
+		if (sourcePai && targetPai &&
+			source.type === 'source' && target.type === 'sink'
+		) {
+			this.props.loadModule('module-loopback', `source=${sourcePai.name} sink=${targetPai.name}`);
+		} else {
+			this.forceUpdate();
+		}
 	}
 
 	onSwapEdge(sourceNode, targetNode, edge) {
@@ -1129,6 +1151,7 @@ class Graph extends React.Component {
 				onNodeMouseDown: this.onNodeMouseDown,
 
 				onSelectEdge: this.onSelectEdge,
+				canCreateEdge: this.canCreateEdge,
 				onCreateEdge: this.onCreateEdge,
 				onSwapEdge: this.onSwapEdge,
 				onDeleteEdge: this.onDeleteEdge,

components/graph/satellites-graph.js

@@ -78,6 +78,7 @@ class GraphView extends React.Component {
 
 			onSelectEdge: this.onSelectEdge.bind(this),
 			onEdgeMouseDown: this.onEdgeMouseDown.bind(this),
+			onCreateEdge: this.onCreateEdge.bind(this),
 
 			renderNode: this.renderNode.bind(this),
 			renderNodeText: this.renderNodeText.bind(this),
@@ -153,6 +154,12 @@ class GraphView extends React.Component {
 		this.graphViewRef.current.forceUpdate();
 	}
 
+	onCreateEdge(source, target) {
+		const { nodeKey, onCreateEdge } = this.props;
+		onCreateEdge(source, target);
+		this.graphViewRef.current.removeEdgeElement(source[nodeKey], target[nodeKey]);
+	}
+
 	onNodeMove(position, nodeId, shiftKey) {
 		const { nodeKey } = this.props;
 		const satelliteNodes = this.state.satelliteNodesByTargetNodeKey[nodeId];
@@ -239,6 +246,8 @@ class GraphView extends React.Component {
 
 			onSelectEdge: this.onSelectEdge,
 
+			onCreateEdge: this.onCreateEdge,
+
 			onEdgeMouseDown: this.onEdgeMouseDown,
 
 			renderNode: this.renderNode,

store/pulse-middleware.js

@@ -168,6 +168,10 @@ module.exports = store => {
 			return state;
 		},
 
+		[pulseActions.loadModule]: (state, { payload: { name, argument } }) => {
+			pa.loadModule(name, argument, handleError);
+			return state;
+		},
 		[pulseActions.unloadModuleByIndex]: (state, { payload: { moduleIndex } }) => {
 			pa.unloadModuleByIndex(moduleIndex, handleError);
 			return state;