place new node at desired position?

[John-Boik]

Thanks for the very useful component. I'm not an expert at Vue or Javascript and am trying to place a new node on a v-network-graph at a position defined by a drag-drop event. One of your examples has a button that creates a new node at the center of the graph. How would I instead place the new node at a desired position. In my case, the SVG element is of width and height 400, with the upper left corner (0,0) and the lower right corner (400,400). I can obtain a SVGPoint location in this reference frame from a drag-drop event.

I can almost create the desired behavior by setting layouts.nodes[new_nodeId] = {point.x-200, point.y-200}, but that doesn't work well, especially if there is pan/zoom/scale involved. And it doesn't take into account possibly overlapping nodes.

Is there some way to access setNewNodePositions() in src.layouts.simple.ts, or is there a better way to create a node at a desired SVGPoint location? A brief example would be very helpful.

If it helps, in my onDrop(evt) method, I obtain the drop point location as:

onDrop(evt) { 
    evt.preventDefault();
    var pt = this.svg.createSVGPoint();
    pt.x = evt.clientX
    pt.y = evt.clientY
    var svg_pt = pt.matrixTransform(this.svg.getScreenCTM().inverse())
}

this.svg is obtained from a ref="graphRef" on the v-network-graph: In mounted() I have: this.svg = this.$refs.graphRef.svg.

John

[dash14]

Hi @John-Boik, Thank you for using v-network-graph and asking the question. Until now, v-network-graph did not have an easy way to specify the position in SVG space by specifying a position in the DOM. Therefore, a new function to convert coordinates between the DOM and SVG has been added. (v0.3.8)

Also added a related example. This is an example that adds a node to the clicked position, but I think the usage is basically the same for using the position where the node is dropped.

Best Regards,

[John-Boik]

Wonderful @dash14. Works great.