shaejah6

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);
  57.                     const children = this.graph.adjacent(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