React-diagrams: Link has been linked event | Auto remove unlinked wires bahavior

[gen4sp]

Hey!
Two things I want to implement:
1) It would be great to have an event right after connection wire or disconnection (on mouse up). Could you point me, where is the best place to place it?

2) It would be great if unlinked wires will be automatically removed right after mouse up. Do you want this behavoir in the lib? Or i can implement it optionaly

[gen4sp]

Also, I've done typed ports (like number, boolean, string etc)
Do you want it into default configuration?
And question: what is the best way to highlight same type ports right after link started ?

[dylanvorster]

Hey man

It would be great to have an event right after connection wire or disconnection (on mouse up). Could you point me, where is the best place to place it?

https://github.com/projectstorm/react-diagrams/blob/master/src/widgets/DiagramWidget.ts#L78

would be the correct place as a prop that we pass into the diagram widget, because that is actually a UI method you want to intercept. To fire the method, you would do so here:

https://github.com/projectstorm/react-diagrams/blob/master/src/widgets/DiagramWidget.ts#L331

It would be great if unlinked wires will be automatically removed right after mouse up. Do you want this behavoir in the lib? Or i can implement it optionaly

This can be a property of the DiagramWidget, and the place to add the logic to remove the link would be AFTER this line if there were no target ports found:

https://github.com/projectstorm/react-diagrams/blob/master/src/widgets/DiagramWidget.ts#L333

[dylanvorster]

Do you want it into default configuration?

Im not entirely sure, I implemented that in my own library as well, but the reason we want a typed port is so that we can allow or deny it being connected with a link. And for that, I would like be able to register a lambda/callback that fires on the diagram model that passes in an event that contains both the source and target port being linked, and if you return true, allows the link to be connected, and if you return false, does not allow it.

The problem with this, is that it is an architectural design decision and I'm not 100% sure which way i want to go with this, I welcome some feedback on what the community wants.

A) Either we register an interceptor in the diagram model
B) we register the interceptor in the WidgetFactory for that particular node
C) we register a callback with each model.

I think A is the simplest to implement

[gen4sp]

Yes, with callback is nice aproach. Don't you think it should be a property of port and by default it returns true.
Like that

onLinkInceptor(link){
// if(this.type !== link.startPort.type){
//   return false;
// }
return true;
}

[dylanvorster]

yeah thats not bad, i just think we need to call it canLinkConnect() or isLinkAllowed() or something similar

[gen4sp]

@dylanvorster Could you give advice - what is the best way to access node-widget this.state?
For instance, I have a node with some content inside and I want to change it from my app.

[dylanvorster]

The correct way to do this, is to put the data into your NodeModel (maybe on the 'extras' field) when your data changes in the NodeWidget. You can then use the listener system to fire an event that data changed. I'll add a demo for this shortly.

[dylanvorster]

It would be great to have an event right after connection wire or disconnection (on mouse up). Could you point me, where is the best place to place it?

I rather implemented this as an event on the LinkModel

It would be great if unlinked wires will be automatically removed right after mouse up. Do you want this behavoir in the lib? Or i can implement it optionaly

I implemented this as a property on the DiagramWidget

[gen4sp]

Should node.deSerialize(obj) instant refresh widget instantly or I should call any another function too? Or it is only possible remove node and add new one?

[gen4sp]

Yes, it seems like changing some NodeModel params doesn't fire NodeWidget render function.
=/

[dylanvorster]

I've provided a repaint method to the diagramEngine in the latest push, you will see me using it here:

https://github.com/projectstorm/react-diagrams/blob/master/src/defaults/DefaultNodeWidget.ts#L34

Im still looking into the best way to do this, but for now thats how we are going to do it xD

[gen4sp]

Great)

[gen4sp]

There is no any way to listen node movement now?

[gen4sp]

If no, could you give me a hint what the best way to implement it, and I will.

[dylanvorster]

ill add all the canvas actions as events shortly

[dylanvorster]

https://github.com/projectstorm/react-diagrams/blob/master/src/widgets/DiagramWidget.ts#L90