JointJS show message on validation Failed

Question

I'm trying to show a toaster when the user tries to connect two elements that cannot be linked. The problem is JointJS calls the function validateConnection for all elements on the Graph when I start dragging the arrow not only when the arrow reaches the target, so I cannot place the toaster code there. I'm looking a way to check if a invalid connection attempt was done.

I know that I can listen to

   paper.on('link:connect', function(linkView, evt, elementViewConnected, magnet, arrowhead) {console.log('Valid connection');});

But only to valid connections. Is there a way to get a invalid connection attempt?

My Paper:

   const paper = this.paper = new rappid.joint.dia.Paper({
          width: 1000,
          height: 1000,
          gridSize: 10,
          drawGrid: true,
          model: graph,
          multiLinks: false,
          linkPinning: false,
          markAvailable: true,
          perpendicularLinks: true,
          defaultLink: function (cellView, magnet, link) {
            return LinksService.getMyLink(cellView.model.attributes.link, data);
          },
          validateConnection: function (cellViewS, magnetS, cellViewT, magnetT, end) {


            const idS = cellViewS.model.id;
            const idT = cellViewT.model.id;
            const links = appInstance.graph.getLinks();

            if (flowContext.existsConnection(idS, idT, links)) {
              return false;
            }

            return true;
          },
        });

Answer 1

validateConnection is used to prevent the user from creating invalid connections at all while they are interacting with the link. If you want to react to invalid connections (with a toast/message) you can use allowLink instead. (doc: https://resources.jointjs.com/docs/jointjs/v2.1/joint.html#dia.Paper.prototype.options.allowLink)