visgraph: add basic graph event mechanism when clicking on nodes

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue

@@ -111,7 +111,7 @@ import { mapState, mapGetters } from "vuex"
 import Modal from 'ChillMainAssets/vuejs/_components/Modal'
 import VueMultiselect from 'vue-multiselect'
 import { getRelationsList, postRelationship } from "./api";
-import { adapt2vis } from "./vis-network";
+import { adapt2vis, splitId } from "./vis-network";
 
 export default {
    name: "App",
@@ -217,13 +217,31 @@ export default {
    mounted() {
       console.log('=== mounted: init graph')
       this.initGraph()
+      this.listenOnGraph()
       this.getRelationsList()
    },
    methods: {
       initGraph() {
          this.container = document.getElementById('visgraph')
          // Instanciate vis objects in separate window variables, see vis-network.js
-         window.network = new vis.Network(this.container, this.visgraph_data, window.options )
+         window.network = new vis.Network(this.container, this.visgraph_data, window.options)
+      },
+      listenOnGraph() {
+         window.network.on('selectNode', (data) => {
+
+            if (data.nodes.length > 1) {
+               throw 'Multi selection is not allowed. Disable it in options.interaction !'
+            }
+            let nodeType = splitId(data.nodes[0], 'type')
+            switch (nodeType) {
+               case 'person':
+                  let person = this.nodes.filter(n => n.id === data.nodes[0])[0]
+                  console.log('@@@@@@@@ event on selected Person Node @@@@@@@@', person.id, person)
+                  break
+               default:
+                  throw 'this node type is undefined'
+            }
+         })
       },
       forceUpdateComponent() {
          console.log('forceUpdateComponent')

src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js

@@ -80,8 +80,8 @@ window.options = {
             speed: {x: 3, y: 3, zoom: 0.02},
             bindToWindow: false
         },
-        multiselect: true,
         navigationButtons: false
+        multiselect: false,
     },
     manipulation: {
         enabled: true,