tiny-emitter package is used as "centralized event hub" between vis-network and vue3

This commit is contained in:
Mathieu Jaumotte 2021-11-01 11:46:30 +01:00
parent a0940a0c85
commit 41f815bbb9
2 changed files with 9 additions and 11 deletions

View File

@ -80,10 +80,10 @@ export default {
}, },
created() { created() {
eventHub.$on('add-switch', this.addSwitch) eventHub.on('add-relationship-link', this.addRelationshipLink)
}, },
unmounted() { unmounted() {
eventHub.$off('add-switch', this.addSwitch) eventHub.off('add-relationship-link', this.addRelationshipLink)
}, },
mounted() { mounted() {
console.log('=== mounted: init graph') console.log('=== mounted: init graph')
@ -124,8 +124,8 @@ export default {
console.log('** click on node **') console.log('** click on node **')
window.network.on('click', callback) window.network.on('click', callback)
}, },
addSwitch(edgeData) { addRelationshipLink(edgeData) {
console.log('==> addSwitch <=======================', edgeData) console.log('==> addRelationshipLink <=======================', edgeData)
}, },
} }
/* /*

View File

@ -1,5 +1,5 @@
import { visMessages } from './i18n' import { visMessages } from './i18n'
import {createApp} from "vue" import { TinyEmitter } from "tiny-emitter";
/** /**
* Vis-network initial data/configuration script * Vis-network initial data/configuration script
@ -8,10 +8,8 @@ import {createApp} from "vue"
* cfr. https://github.com/almende/vis/issues/2524#issuecomment-307108271 * cfr. https://github.com/almende/vis/issues/2524#issuecomment-307108271
*/ */
console.log('@@@@@@@ eventHub App @@@@@@@@@@') console.log('@@@ init eventHub App @@@')
window.eventHub = createApp() window.eventHub = new TinyEmitter()
console.log('@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@')
window.network = {} window.network = {}
@ -26,7 +24,7 @@ window.options = {
showButton: true showButton: true
}, },
*/ */
physics:{ physics: {
enabled: true, enabled: true,
barnesHut: { barnesHut: {
theta: 0.5, theta: 0.5,
@ -104,7 +102,7 @@ window.options = {
addEdge: function(edgeData, callback) { addEdge: function(edgeData, callback) {
console.log('addEdge', edgeData) console.log('addEdge', edgeData)
callback(edgeData) callback(edgeData)
eventHub.$emit('add-switch', edgeData) eventHub.emit('add-relationship-link', edgeData)
}, },
editEdge: function(edgeData, callback) { editEdge: function(edgeData, callback) {
console.log('editNode', edgeData) console.log('editNode', edgeData)