1Edges
2============================
3
4Creating Edges
5------------------
6
7Edges are managed from `Qan.Graph` (QML) or `qan::Graph` (C++) interface, usually in graph `Component.onCompleted()` handler:
8
9- `#!js Qan.Edge Qan.Graph.insertEdge(Qan.Node src, Qan.Node dst)`: Insert a directed edge from source node to destination node.
10- `#!js Qan.Edge Qan.Graph.removeEdge(Qan.Edge)`:
11
12Connections between nodes could be added from QML using Qan.Graph.insertEdge() function, or from c++ with qan::Graph::insertEdge() method. Edges graphics appearance is configured trought their `style` property, more information on available edge style option is available in [Styles section ](styles.md)
13
14``` cpp hl_lines="7"
15Component.onCompleted: {	// Qan.Graph.Component.onCompleted()
16    var n1 = graph.insertNode()
17    n1.label = "Hello World"; n1.item.x=50; n1.item.y= 50
18    var n2 = graph.insertNode()
19    n2.label = "Node 2"; n2.item.x=200; n2.item.y= 125
20
21    var e = graph.insertEdge(n1, n2);
22    defaultEdgeStyle.lineType = Qan.EdgeStyle.Curved
23}
24```
25
26![Default Edge](edges/edges-edge.png)
27
28Edges appearance could be tuned by changing default styles properties directly from QML with global variables `defaultEdgeStyle`, see the [Style Management](styles.md) section for more options.
29
30
31Visual creation of edges
32------------------
33
34### Visual Connectors
35
36QuickQanava allow visual connection of node with the `Qan.VisualConnector` component. Default visual connector is configured in `Qan.Graph` component using the following properties:
37
38- `Qan.Graph.connectorEnabled` (bool): Set to true to enable visual connection of nodes (default to false).
39
40- `Qan.Graph.connectorEdgeColor` (color): Set the visual connector preview edge color (useful to have Light/Dark theme support, default to black).
41
42- `Qan.Graph.connectorCreateDefaultEdge` (bool, default to true): When set to false, default visual connector does not use Qan.Graph.insertEdge() to create edge, but instead emit `connectorRequestEdgeCreation()` signal to allow user to create custom edge be calling a user defined method on graph (`connectorEdgeInserted()` is not emitted).
43
44- `Qan.Graph.setConnectorSource` (node): Select the node that should host the current visual connector.
45
46``` cpp hl_lines="5"
47Qan.GraphView {
48  id: graphView
49  anchors.fill: parent
50  graph : Qan.Graph {
51    connectorEnabled: true
52	connectorEdgeInserted: console.debug( "Edge inserted between " + src.label + " and  " + dst.label)
53	connectorEdgeColor: "violet"
54	connectorColor: "lightblue"
55  } // Qan.Graph
56} // Qan.GraphView
57```
58
59![Visual connector configuration](edges/edges-visual-connector-configuration.png)
60
61The following notifications callbacks are available:
62
63- Signal `Qan.Graph.connectorEdgeInserted(edge)`: Emitted when the visual connector has been dragged on a destination node or edge to allow specific user configuration on created edge.
64
65- Signal `Qan.Graph.connectorRequestEdgeCreation(src, dst)`: Emitted when the visual connector is dragged on a target with `createDefaultEdge` set to false: allow creation of custom edge (or any other action) by the user. Example:
66
67``` cpp hl_lines="8"
68Qan.GraphView {
69  id: graphView
70  anchors.fill: parent
71  graph : Qan.Graph {
72    id: graph
73    connectorEnabled: true
74	connectorCreateDefaultEdge: false
75	onConnectorRequestEdgeCreation: {
76	  // Do whatever you want here, for example: graph.insertEdge(src, dst)
77	}
78  } // Qan.Graph
79} // Qan.GraphView
80```
81
82Preventing the visual connector to be shown for specific nodes (for example to force user to use out port to create topology) is possible by setting the node item `Qan.NodeItem.connectable' property to false (See `qan::NodeItem::connectable` header documentation).
83
84Reference documentation: [qan::Connector interface](https://github.com/cneben/QuickQanava/blob/master/src/qanConnector.h)
85
86### Custom Connectors
87
88Default connector component `Qan.Graph.connector` could be replaced by a user defined `Qan.VisualConnector` to customize connector behavior in more depth. It is possible to add multiple visuals connectors on the same node, using a connector to generate specific topologies (create edges with different concrete types) or select targets visually. Such an advanced use of custom connectors is demonstrated in 'connector' sample: [https://github.com/cneben/QuickQanava/tree/master/samples/connector](https://github.com/cneben/QuickQanava/tree/master/samples/connector)
89
90
91
92