From 8ab0fd59f8e0253f9063e9208031f3f3c7b1a4a1 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Wed, 3 Nov 2021 21:12:42 +0100
Subject: [PATCH] visgraph: add basic graph event mechanism when clicking on
 nodes

---
 .../Resources/public/vuejs/VisGraph/App.vue   | 22 +++++++++++++++++--
 .../public/vuejs/VisGraph/vis-network.js      |  2 +-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
index 929295ceb..13e72c6f5 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
+++ b/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')
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js
index 920a92ed1..907f64062 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/vis-network.js
+++ b/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,