I would like to know the exact nature of the event.

[james-ep01]

Introduction

I don't know the exact difference between the events below, and when they occur.
Could you please explain?

I don't know the exact difference between the events below, and the time of occurrence. I'm trying to figure out the time and create a code, but it happens repeatedly, and there are times when there is no object, and there is a lot of confusion.
Please explain.

Events and event parameters that occur when dragging from the initial port and connecting to a port. The status of the events and parameters that occur when dragging from a connected port and disconnecting until connecting to another port. Information about the presence or absence of objects in the current link and previous link.

I don't know much about the events that occur for these because there is no information or order. change:source and change:target can also bring in previous objects, and they are not organized.

• Please explain the events that occur from the start of dragging from the port to connecting to the port, whether the source and target of the link are present, whether the previous source and target are present, and the events that occur according to changes in the source and target of the connected link, and whether or not the previous source and target are present.

1. graph.on('change:source'

2. graph.on('change:target'

3. graph.on('remove'

4. paper.on('link:connect'

5. paper.on('link:disconnect'

6. validateConnection

7. validateMagnet

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS, JointJS+

[zbynekstara]

Hello james-ep01,

This is quite difficult to write out in an organized way, but I will try. The order of execution of these callbacks and events during link dragging is the following:

1. (only when creating a new link) validateMagnet(sourceCellView, sourceMagnetHTMLElement, evt) - check if the magnet can be a source of the link

...while link source/target is dragged:

2. (while link targets a magnet = cell or cell port, on each mousemove event) validateConnection(sourceCellView, sourceMagnetHTMLElement, targetCellView, targetMagnetHTMLElement, end, linkView) - check if the magnet can be a target of the link
3. (whenever the link source/target changes) graph.on('change:source', function(source, opt) {...}) / graph.on('change:target', function(target, opt) {...}) - keep in mind that the source/target can identify a magnet (object with id if a cell and optionally magnet and port) or a point (object with x and y)

...after link is dropped:

...option 1: if target is valid:

4. (only when reconnecting a link) paper.on('link:disconnect', function(linkView, evt, prevEndCellView, prevEndMagnet, arrowhead) {...})
5. paper.on('link:connect', function(linkView, evt, newEndCellView, newEndMagnet, arrowhead) {...})

...option 2: if target is invalid when creating a new link:

4. graph.on('remove', function(cell, graphCellsCollection, opt) {...})

...option 3: if target is invalid when reconnecting a link:

4. graph.on('change:source', function(source, opt) {...}) / graph.on('change:target', function(target, opt) {...}) - reverting back to initial state

[kumilingus]

@james-ep01, what exactly are you trying to achieve?

It’s possible that a relevant UI event hasn’t been implemented yet—but if it proves useful, we could consider adding it. Alternatively, you might be approaching the problem from the wrong angle.