Emits from a CustomConnection

[henriklippke]

Hello I would like to be able to cut the connection from a CustomConnection Vue Component. If I understand correctly I have to trigger a "connectionremove" event but "emit" is not present in a CustomConnection component. Is there another way?

Thank you.

[Ni55aN]

I have to trigger a "connectionremove"

no, it's triggered by the NodeEditor's removeConnection method

Your connection class (classMyConnection extends ClassicPreset.Connection { .. ) should have a callback like onRemove and it should be called in the Vue component via a data property.

[henriklippke]

@Ni55aN Thanks for your answer, but I still don't quite understand it. The data property within the CustomConnection Component contains only these props: id,source,sourceOutput, target,targetInput

Could you please show me an example again?

Many thanks

[Ni55aN]

@henriklippke

// extend base class
class Connection<A extends Node, B extends Node> extends Classic.Connection<A, B> {
  selected?: boolean
  remove: (data: Connection<A, B>) => void

  constructor(events: { remove: (data: Connection<A, B>) => void }, source: A, target: B, public isLoop?: boolean) {
    super(source, 'default', target, 'default')
    this.remove = events.remove
  }
}

const events = { remove: (data: Schemes['Connection']) => console.log(data) }
// create connection instance and pass event handlers
const c1 = new Connection(events, ...

This way, you can forward an event handler through a connection instance

[henriklippke]

Hi @Ni55aN Ok, thanks that worked so far. But now I have the problem that when I don't create a connection manually but when the user pulls a connection between 2 sockets, that then my new connection class is not taken. Do you have an idea for this? Thanks a lot!

[Ni55aN]

@henriklippke https://github.com/retejs/rete/issues/633#issuecomment-1611264335

[rete-js[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 10 days.