callback function binding in options.manipulation

[uwmyuan]

Hi,
The network example shows the usage of the network module. However, if dragging one node (say node data n) to another location, the attributes n.x and n.y won't change accordingly. One may simply replicate this by adding one duplicate instance of network component and binding the same data (nodes and edges) with networks. If one node (node 1) in one network is moved, the corresponding node (node 1') won't move in the other network. It looks the data are not binded in the other direction.
I try to have a workaround by binding a method to handle the dragging event. However, I cannot since I'm not using webpack and in-DOM template would induce an error.
Could you share any clue? Thanks.

[alexcode]

I'm currently looking at it right now. I will improve the binding in the next version of vue2vis.
I should have a dev version for you to test by next week.

[uwmyuan]

Thanks for your kindly reply. I'm looking forward to your dev version.

[alexcode]

Hi @uwmyuan,

Looking at the visjs doc a bit deeper, I don't think x and y are mutate by Visjs. My understanding is that you can set the initial position of a node by setting his x and y properties but then you should call the getPositions to retrieve the current position.

However, the event dragEnd will return the last position of the node but it will be before it is stabilized. It might be needed to call getPositions right after the stabilized event.

Last but not least, from your issue description, you could achieve your requirements by calling storePositions .
With my last changes, the event nodes-update will be fired with all the positions or you could pass your own DataSet in nodes.

[uwmyuan]

Hi @alexcode ,
Thanks a lot. I understand.
I may (1) call the method getPositions after the event afterDrawing to update the x and y properties, or (2) call storePositions to get the Dataset of current positions.
I have one more question. Do you recommend using the on method of JQuery to bind event if it's not able to use vue @ binder in in-DOM template?

[alexcode]

I don't recommand to use JQuery at all with vue but you can use vm.$on on your Vue instance. https://vuejs.org/v2/api/#vm-on

[uwmyuan]

Very helpful, thanks. I got it.

[uwmyuan]

Hi @alexcode,

I have one more question about the binding event to function. In the vanilla vis.js, the example shows binding the click event of buttons in a popup form to a method for options.manipulation.
Could provide an example of vue2vis for this job?

I tried v.$refs['foo'].$on('click', v.bar(data, callback)); in manipulation.addNode, where foo is the id of the button, bar is a method defined in the vue object. It shows the node can be sucessfully added but the manipulation toolbar would change to a blank bar (no buttons in the manipulation toolbar anymore).

Thanks.

[alexcode]

Could you send me a jsfiddle of what you intend to do, it will be helpful?

[uwmyuan]

Thanks. Yes, of course. Please see this example for more information.

[tea3]

@alexcode Hi, I do not know how to get the selected-node in the click event. Please tell me how to solve.

I'm thinking about solving in the following way, is This code correct?

methods: {
  setClickEvent: function ( ){
    this.$refs.network.$on('click' , (e) => {
      console.log('Selected Node ID : ' + e.nodes.toString())
      console.log(this.getSelectedNodeObject( e.nodes.toString() ))
    })
  },
  getSelectedNodeObject: function ( inNodeID ){
     for(let i=0; i<Object.keys(this.network.nodes).length; i++){
      if(this.network.nodes[i].id == inNodeID){
        return this.network.nodes[i]
      }
    }
    return null
  },
},

[CJLees01]

Hi @alexcode,

I'm struggling with a similar problem, where I'm trying to get the current positions of nodes. I understand that I need storePositions for this, but my question is what object I'm calling this method on?

Like your example, I have a network object defined in my Vue component which contains nodes, edges and options. But this is just a plain JSON, and not an object to call storePositions on.

        data() {
            return {
                network: {
                    nodes: new DataSet([]),
                    edges: new DataSet([]),
                    options: {...}
                }
            }
       }

Could you point me in the right direction please?

Thanks

[Menighin]

@CJLees01 you should call storePositions on the network object.
For this, put a ref on the network and access it like this.$refs.network.storePositions().

Here is a fiddle working. I'm printing the JSON of the nodes at the bottom of the page. The @click event is calling storePositions. So when you click the network you can see the JSON changing with the x and y coordinates

[CJLees01]

Great - thank you very much.

Just in case it helps anyone else reading this thread, I was expecting this.$refs.network.storePositions() to return an object of nodes and x/y co-ordinates. That's not how it behaves though... storePositions() adjusts the this.network.nodes JSON and returns nothing. So be sure to call the method and then look there for the values.