# Draw graph nodes

Sep 24th, 2020
865
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
1. //--------------------
2. // node-group.vue
3. //--------------------
4. <template>
5.     <div v-for="(group, index) in nodeGroups" :key="index">
6.         <!-- Draw current node here -->
7.         <SingleNode :node="group.node" />
8.
9.         <!-- If current node is a conditional node, draw its own branches -->
10.         <div v-if="group.node.type === 'conditional'">
11.             <div v-for="(childId, subIndex) in graph.adjacent(group.id)" :key="subIndex">
12.                 <!-- Draw each branch of the conditional node recursively, each branch will be stopped at the lowest common ancestor node -->
13.                 <NodeGroup :graph="graph" :rootNodeId="childId" :breakAtNodeId="nodeGroups[index+1].id" />
14.             </div>
15.         </div>
16.     </div>
17. </template>
18.
19.
20. <script type="text/javascript">
21.     Vue.extend({
22.         props: {
23.             graph: {
24.                 type: Object,
25.                 default: null
26.             },
27.             rootNodeId: {
28.                 type: String,
29.                 default: 'root-id'
30.             },
31.             breakAtNodeId: {
32.                 type: String,
33.                 default: null
34.             }
35.         },
36.
37.         data() {
38.             allNodes: {
39.                 nodeId1: { ... },
40.                 nodeId2: { ... },
41.                 ...
42.             }
43.         },
44.
45.         computed: {
46.             nodeGroups: function() {
47.                 const nodes = [];
48.
49.                 let currentNode = this.rootNodeId;
50.                 let tmpNodes = [];
51.
52.                 // Using breath-search-first algorithm to traverse through the graph
53.                 while (true) {
54.                     nodes.push({ id: currentNode, node: allNodes[currentNode] });
55.
56.                     const outdegree = this.graph.outdegree(currentNode);
58.
59.                     // If node doesn't have any outdegree, it must be exit node, break
60.                     if (outdegree === 0) {
61.                         break;
62.                     }
63.
64.                     // If node has only one child (not a conditional node), move to next node
65.                     else if (outdegree === 1) {
66.                         currentNode = children[0];
67.                     }
68.
69.                     // If node has more than one children, it is a conditional node
70.                     // We have to move to the lowest common ancestor
71.                     else {
72.                         currentNode = this.graph.lowestCommonAncestors(children[0], children[1]);
73.                     }
74.
75.                     // If currentNode is null or empty array, that means each branch of conditional exit its own path
76.                     // There is no common ancestor for them, then we don't go further
77.                     if (!currentNode || currentNode.length === 0) {
78.                         break;
79.                     }
80.
81.                     // Also if currentNode is equal to breakAtNodeId, we don't go further too
82.                     // This keeps the conditional branch stopped at the lowest common ancestor node so we don't draw duplicated
83.                     if (currentNode === this.breakAtNodeId) {
84.                         break;
85.                     }
86.                 }
87.
88.                 return nodes;
89.             }
90.         },
91.
92.         methods: {
93.
94.         }
95.     });
96. </script>
97.
98.
99.
RAW Paste Data