JointJS - List of items in Node with ports

[Michał Brzozowski]

Hello, I'm struggling with an issue and I don't know if it's possible to achieve. I'm trying to make a Node with HeaderedRectangle, which in body will contain a list of items with ports, to which we can connect. I don't know how to add a list of items with ports, I can only add a text there, so I decided to choose HeaderedRecord and that's what I achieve:

The problem here is, these ports, are for whole Node, and not for the specific item. Do you know maybe how and if it is possible to achieve with HeaderedRectangle or HeadererRecord? Thank you

[Roman Bruckner]

Hi,

one would have to override some of the Record methods.

The similar shape can be defined as shown on the link below. Each item in the demo is a port (you can even use `magnet`, `magnetSelector`, `highlighterSelector` properties to tell where the links should connect).

https://github.com/clientIO/joint/pull/1531

Best,

Roman

--

---
You received this message because you are subscribed to the Google Groups "JointJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jointjs+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jointjs/093f054f-d5a2-4990-8eb4-6b196fa7f7a6n%40googlegroups.com.

--

Roman Bruckner, CTO

client IO

http://client.io

http://jointjs.com

+420 776 504 406

[larenius gecko]

Hello Roman,

I stumbled across this thread in the search of a solution to a similar problem. I want to display a list of items underneath an element, and link specific items to a whole other list. 
The demo you provided already helped me, however I still struggle to link an element with a port.
This is the error i receive in the console:

Uncaught Error: LinkView: invalid source cell


Are you keen to elaborate more detailed how exactly I can select a port as a target/source for a link?

Hope you can help me if you see this soon enough.

Tanks in advance,
Laris

[Roman Bruckner]

Hi Laris,

I am not sure whether I understand correctly. Do you mean how to programmatically connect a link to a port?

link.set('target', { id: 'element_id', port: 'port_id' });

The error you see happens when the `id` provided does not exist in the graph. e.g.

link.set('target', { id: 'non_existing_element_id' });

Best,

Roman

To view this discussion on the web visit https://groups.google.com/d/msgid/jointjs/b954c357-6dc0-414c-a914-0d87fb9f966fn%40googlegroups.com.

[larenius gecko]

Hey Roman, 

Thanks a lot for the quick answer, this turned out to be my problem. I m pretty new to jointjs so I was not aware that you can set a target with an id like you described there.
Previously I was using links like this

link.source(element1)
link.target(element2)

to connect two elements and it worked up to this point. When i looked up links for the first time I was thinking the link source/target always requires the element and not just the id, so I had problems with the ports.

Anyways you guided me into the right direction, now it is more clear to me. Thank you :)


Best Regards
Laris