Restrict linking to a part of an element/its subelement.

[frnora]

Introduction

Hi,

Let's assume I have a custom element containing two svg rect shapes which are positioned one below the other (let's call the top one header and the bottom one body). I would like to restrict the linking to the header, so every outbound and inbound link should interact only with the header.

This looks pretty straightforward by setting

this.attr('root/magnetSelector', 'header');
this.attr('root/highlighterSelector', 'header');

but I can't figure out how to "exclude" the body's hitarea when dragging a link's end over this element as releasing over the body should be an invalid link and not connect. validateConnection doesn't pass get passed the e.target, only the whole cellView so I can't figure out which element is currently hovered/dragged over.

I assume I could override the _connectArrowhead method and just pass it but before I do that, as I don't want to reinvent the wheel, is there something I am missing or an easier way to do this?

Thank you!

Steps to reproduce

No response

Restrictions & Constraints

No response

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

JointJS, JointJS+

[kumilingus]

You can make the header the actual magnet and prevent anything from connecting the element as a whole.

this.attr({
   root: { magnet: false },
   header: { magnet: true } // or `passive`
});

[frnora]

Gosh, thanks so much!

I totally tried to try that one but I didn't set the root tomagnet: false. Giant facepalm!

Works great now!