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