chat bot chart with fixed out ports

[ArjohnKampman]

Hi all,

We are planning to create a charting application not unlike the chat bot demo. One of the main difference is that we have a set of predefined blocks with a fixed set of out ports, where the chat bot demo allows one to add and remove free form out ports as you wish. We have so far managed to implement this by making some modifications to the chat bot demo, mainly removing the '+' and 'X' buttons from the block.

Now one of our predefined blocks, the Menu block, has a considerable number of out ports: one port for each button on a phone (0-9, *, #) and a required 'fallback' port. The phone button ports are all optional though, and we are looking for a way to hide the ports that the user doesn't need. The idea that we have is to show a list of all out ports in the block's side bar, each with its own check box to enable/disable:

The block should only show the enabled out ports + the required 'fallback' port, while preserving the logical (numerical) order of the ports. We are struggling to implement this idea though. Does anyone have a suggestion on how to accomplish this?

Cheers,
Arjohn Kampman

[kumilingus]

Hi,

you can reset all ports at once using the prop() method of the element.

element.prop(['ports','items'], ports, { rewrite: true });

Here's a demo:
https://codepen.io/jointjs/pen/mdpZLxM/490ce0751adcfc180ad9ab0323f6c323

[ArjohnKampman]

Hi @kumilingus. Your reply was excellent and the demo was very helpful. One thing that we're still struggling to accomplish is to preserve existing links when replacing all the ports. When ports 1, 2 and 3 are connected to subsequent blocks and we're adding another port using the suggested method, then all existing links are lost. Any suggestions on how to resolve this are very welcome.

[kumilingus]

Hi, the port ids must stay the same otherwise the links get lost. I have updated the example to show this.

[ArjohnKampman]

Wow, that simple? Should have thought about that myself... Thanks for the prompt reply!

[harrizsb]

Hi @kumilingus, I tried defining the ID to preserve a connection between blocks but when I tried loading the JSON, the paper seems to be empty and no error whatsoever. But when I delete the predefined ID from the shape definition and let jointjs generates one, it render the expected blocks. So the question is:

1. Does the "silent" error appears due to predefined ID?
2. How can I keep the block connection without defining an out port ID?

Here I attached the example of shape definition

..., items: [ { id: 'in', group: 'in', }, { id: 'out1', group: 'out', attrs: { portLabel: { text: '1' } }, }, { id: 'out2', group: 'out', attrs: { portLabel: { text: '2' } }, }, { id: 'out3', group: 'out', attrs: { portLabel: { text: '3' } }, } ], ...

note: sorry for bumping this thread, this question is related to the previous one

thanks in advance

[kumilingus]

Please create a new discussion and share the steps to reproduce the problem (provide a JSON, JSFiddle, or refer to an existing application). Thank you.