visgraph: open vue modal when adding/editing edge

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

@@ -4,7 +4,6 @@
    <teleport to="#visgraph-legend">
       <div class="my-4 post-menu legend">
          <h3>{{ $t('visgraph.Legend')}}</h3>
-
          <div class="list-group">
             <label class="list-group-item" v-for="layer in legendLayers">
                <input
@@ -20,18 +19,44 @@
       </div>
       <button class="btn btn-sm btn-outline-secondary" @click="refreshNetwork">{{ $t('action.refresh') }}</button>
    </teleport>
+
+   <teleport to="body">
+      <modal v-if="modal.showModal" :modalDialogClass="modal.modalDialogClass" @close="modal.showModal = false">
+         <template v-slot:header>
+            <h2 class="modal-title">Créer un lien de filiation</h2>
+         </template>
+         <template v-slot:body>
+
+
+
+         </template>
+         <template v-slot:footer>
+            <button class="btn btn-create" @click="modal.showModal = false">
+               {{ $t('action.save')}}</button>
+         </template>
+      </modal>
+   </teleport>
+
 </template>
 
 <script>
 import vis from 'vis-network/dist/vis-network'
 import { mapState, mapGetters } from "vuex"
+import Modal from 'ChillMainAssets/vuejs/_components/Modal'
 
 export default {
    name: "App",
+   components: {
+      Modal,
+   },
    data() {
       return {
          container: '',
          checkedLayers: [],
+         modal: {
+            showModal: false,
+            modalDialogClass: "modal-dialog-scrollable modal-md"
+         },
       }
    },
    computed: {
@@ -81,9 +106,13 @@ export default {
    },
    created() {
       eventHub.on('add-relationship-link', this.addRelationshipLink)
+      eventHub.on('edit-relationship-link', this.editRelationshipLink)
+      eventHub.on('delete-relationship-link', this.deleteRelationshipLink)
    },
    unmounted() {
       eventHub.off('add-relationship-link', this.addRelationshipLink)
+      eventHub.off('edit-relationship-link', this.editRelationshipLink)
+      eventHub.off('delete-relationship-link', this.deleteRelationshipLink)
    },
    mounted() {
       console.log('=== mounted: init graph')
@@ -120,12 +149,18 @@ export default {
          this.checkedLayers = this.checkedLayers.filter(i => i !== id)
          this.$store.commit('addExcludedNode', id)
       },
-      clickOnNode(callback) {
-         console.log('** click on node **')
-         window.network.on('click', callback)
-      },
+
       addRelationshipLink(edgeData) {
          console.log('==> addRelationshipLink <=======================', edgeData)
+         this.modal.showModal = true
+      },
+      editRelationshipLink(edgeData) {
+         console.log('==> editRelationshipLink <=======================', edgeData)
+         this.modal.showModal = true
+      },
+      deleteRelationshipLink(edgeData) {
+         console.log('==> deleteRelationshipLink <=======================', edgeData)
+         this.modal.showModal = true
       },
    }
 /*

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

@@ -88,16 +88,15 @@ window.options = {
         initiallyActive: true,
         addNode: function(nodeData, callback) {
             console.log('addNode', nodeData)
-            nodeData.label = 'hello world'
-            callback(nodeData)
+            //callback(nodeData) disabled
         },
         editNode: function(nodeData, callback) {
             console.log('editNode', nodeData)
-            callback(nodeData)
+            //callback(nodeData) disabled
         },
         deleteNode: function(nodeData, callback) {
             console.log('deleteNode', nodeData)
-            callback(nodeData)
+            //callback(nodeData) disabled
         },
         addEdge: function(edgeData, callback) {
             if (
@@ -110,11 +109,18 @@ window.options = {
             }
         },
         editEdge: function(edgeData, callback) {
-            console.log('editNode', edgeData)
-            callback(edgeData)
+            if (
+                splitId(edgeData.from,'type') === 'person'
+                && splitId(edgeData.to,'type') === 'person'
+            ) {
+                console.log('editEdge', edgeData)
+                eventHub.emit('edit-relationship-link', edgeData)
+                callback(edgeData)
+            }
         },
         deleteEdge: function(edgeData, callback) {
-            console.log('deleteNode', edgeData)
+            console.log('deleteEdge', edgeData) // array with edges id
+            eventHub.emit('delete-relationship-link', edgeData)
             callback(edgeData)
         },
         controlNodeStyle: {