How to add event listeners on endpoint

Question

Earlier we could add event listener to endpoints using -

this.instance = newInstance({
      container: this.wrapper.nativeElement,
});

_addEndpoints(
    id: string,
    sourceAnchors: Array<AnchorSpec>,
    targetAnchors: Array<AnchorSpec>
  ) {
    const endpointDOMEl = document.getElementById(`endpoint_${id}`);
    for (let i = 0; i < sourceAnchors.length; i++) {
      const sourceUUID = id + sourceAnchors[i];
      const endpoint = this.instance.addEndpoint(
        endpointDOMEl,
        this.sourceEndpoint,
        {
          anchor: sourceAnchors[i],
          uuid: sourceUUID,
        }
      );

      this.addListenersForEndpoint(endpoint, endpointDOMEl, null);
    }
}
addListenersForEndpoint() {
 endpoint.canvas.removeEventListener('mouseover', addHoverListener);
 endpoint.canvas.removeEventListener('mouseout', removeHoverListener);
 endpoint.canvas.addEventListener('mouseover', addHoverListener.bind(null, endpoint, domCircleEl, labelId));
 endpoint.canvas.addEventListener('mouseout', removeHoverListener.bind(null, endpoint, domCircleEl, labelId));
}

But, in 5.x i can't see the canvas property anymore. What alternative can i use to achieve the same?

Answer 1

You should bind to the endpoint mouseover and mouseout events:

https://docs.jsplumbtoolkit.com/community/lib/events

instance.bind(EVENT_ENDPOINT_MOUSEOVER, (e:Endpoint) => {

..

})