Create vertices "on the fly"

[alexandernst]

I was playing around with a tool for circuit design and the way links are created in that tool is (imho) very helpful. When links are being created, vertices can be dynamically added by making a right click while still dragging the link.

Visual example: https://www.youtube.com/watch?v=zb5OJxtPjvw&t=355s

Would this be possible with JointJS?

[kumilingus]

This seems to be a useful feature.
For example, the Connect tool can be modified to behave as described above.

Here's an example.

[alexandernst]

It also doesn't honor validateConnection, but I think this is expected since the link is manually created. Is there some sort of link_model.isValid() I can call in order to check if the link is "valid" (according to validateConnection)?

[kumilingus]

The code I shared only keep the position of the arrowhead under the pointer. It does not run any validation nor snapping logic.

1. Solving the validation is easy, as you can have a separate validation function that is executed from the paper validateConnection() callback and from the code I shared with you.
2. To enable snapLinks you'd have to call linkView.dragLinkStart, linkView.dragLink() and linkView.dragLinkEnd() as shown in the other example (this would call the validateConnection() logic as well). Unfortunately, there is no official API at this moment to control the link dragging programmatically.

[alexandernst]

I finally managed to allocate some time and dig into this (sigh... more than 6 months...).

As per my previous example, I'm using document.addEventListener to subscribe to the mouse down/move/up events, which are required to implement the behaviour I want. Your suggestion (call dragLinkStart(), dragLink() and dragLinkEnd()) made me wonder how would I actually do it. The problem is that these 3 methods expect to receive a jj event (let's call it that way 😂), but the only thing I can provide them with is a native mouse event, because that's what I'm getting from document.addEventListener.

I can't can swap the document.addEventListener with paper.on because there is no pointermove event in the paper (blank:pointermove will trigger only while the left button is pressed), so I'm not really sure how can I provide these methods with a jj event.

Is there a way I can get a blank:pointermove events from the paper without pressing the left button? Alternatively, is there a way I can "create" a jj event? Or maybe you can give me some other ideas how to tackle this problem?

[kumilingus]

I see. JointJS event is just a wrapper for native events. This should work:

const jjEvent = new joint.mvc.$.Event(nativeEvent);

[alexandernst]

I think I managed to handle it! Thank you 🙏