Closed John-Boik closed 2 years ago
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,
Wonderful @dash14. Works great.
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:
this.svg
is obtained from a ref="graphRef" on the v-network-graph: In mounted() I have:this.svg = this.$refs.graphRef.svg
.John