Link the port end

[ITfanheng]

Hi!

Can i connect two port end?

Here are the electronic components.

Thanks in advance!

[kumilingus]

Yes. https://jsfiddle.net/kumilingus/0m2zfthw/

[ITfanheng]

Thanks for your reply!

This demo meets most of my needs！！

But if i can link the port end, the app will looks more professional.(Linked as red line)

[kumilingus]

You can use an anchor.

https://jsfiddle.net/kumilingus/0m2zfthw/15/

[ITfanheng]

Thank you.

This demo is very nice!!

[ITfanheng]

Hi,

One more question.

How to link like that manually?

I have try to set the anchor in validateConnection

validateConnection: (cellViewS, magnetS, cellViewT, magnetT, end, linkView) => {
  if (end === 'target') {
      if (!magnetT) {
          return false;
      }
      if (cellViewS === cellViewT) {
          return false;
      }
  } else {
      if (!magnetS) {
          return false;
      }
  }
  linkView.model.prop('source/anchor', { name: 'left' });
  linkView.model.prop('target/anchor', { name: 'right' });
  return true;
}

but only the source have succeeded.

And when i move the source to other port. It goes wrong, And the widget was stuck too.

Any help will appreciate!

[ITfanheng]

The device maybe have 4 directions port. So link anchor need flexible.

[kumilingus]

Don't add side effects to the validateConnection callback. It's better to use connectionStrategy to modify the source/target on connect (https://resources.jointjs.com/docs/jointjs/v3.5/joint.html#connectionStrategies.custom).

[ITfanheng]

Thank you very much!