Multiple parents node

[baltatescuvalentin]

Hi, I was using the package for an organizational chart and I've encountered the scenario when in my chart an element should be allowed to have multiple parents like a full-stack engineer works on both front-end and back-end so he should tied to both. I've seen the node accepts only one parent and would be nice to have the option to allow multiple parents. My workaround was to use slinks and it seems to do an OK job but the thing is that slink always leave from top of the element and I wanted to know if it's possible to change to leave from the bottom of the element or to make it customizable. Also because there is not "pid" used the initial structure is just a row so I have to save both movex and movey and pass them to the nodes array but I think being able to have multiple parents would make things easier.

[ZornitsaPesheva]

Now we are working on a new product, Flow Chart JS. With it, you will be able to have many to many relations. Now you can use Slinks, Clinks (they can be straight) or Dotted line to show multiple relations.

[ZornitsaPesheva]

You can see this example with Clinks: https://code.balkan.app/org-chart-js/multi-parents-with-straight-clinks#JS Please post a simple code example to show us what you have. Please aloe send a screenshot to show us how would you like to looks the slinks.

[baltatescuvalentin]

Something like this: I used the Clinks cause they always leave from the bottom of the node and it's an ok solution for now. I will just paste the Vue3 code to get an idea: https://code.balkan.app/vue3-clinks#JS And this is the result: I would like to simulate the behaviour with pids to add a node a put it under it and make the link and the restructure of the chart, but i think i have to take coordonates of parent node and calculate the position for the new node with either movex, movey on the node or with the g tag and transform on the matrix with coordinates , am i right? Like to click the triple dots, click Add and add the new node, but the restructuration of the chart will be the difficult part with new positions if there could be any hint how to do it.

[ZornitsaPesheva]

With Flow Chart JS you will be able to have nodes on exact positions. With Org Chart JS it you can move nodes, but it will be some custom solution, that may not work in other cases and other chart data. Here is an example:

OrgChart.events.on('prerender', function (sender, args) {
    args.res.nodes[2].x = 120;
    args.res.nodes[4].x = 120;
});

[baltatescuvalentin]

I will look into. By the way, is there a way to get the current coordinates of my mouse inside the chart? Cause let's say I have a list from where i can drag an element and when the mouse enters the chart to have a node at my current mouse position and when moving the mouse the node follows it till I drop on another node (drag and drop enabled). I thought of modifying x and y values on the node from chart.get and maybe use the mouse position and some offsets but I don't know if this translates correctly into the card coordinates.

[ZornitsaPesheva]

Please check if this is what you need to achieve: https://code.balkan.app/org-chart-js/draganddrop-from-another-element#JS

[baltatescuvalentin]

Thank you, this really helped me. About customization I'm a bit conflicted cause I try to change the slinks how they look to see if I have full control over customization but I can't change it and in API docs it's confusing cause it only show the linkTemplate interface that is not really well explained. I tried something like this just to check if the slink changes but it doesn't: OrgChart.templates.customTemplate.slink = '<path stroke="red" stroke-width="2px" stroke-dasharray="5, 5" fill="red" d="{d}" />'; And is there a way to search code examples likes the one you gave me cause if I am stuck somewhere I can look at some examples before asking you again?

[ZornitsaPesheva]

You can get the templates from here: https://balkan.app/OrgChartJS/Docs/Slink#templates Click on "Get the source code of slink templates" You should have something like this:

OrgChart.slinkTemplates.orange.ink = '<path stroke-dasharray="4, 2" marker-start="url(#dotSlinkOrange)" marker-end="url(#arrowSlinkOrange)"'stroke-linejoin="round" stroke="#F57C00" stroke-width="2" fill="none" d="{d}" />';

[baltatescuvalentin]

Thanks again! One last thing that unexpectedly happens is when I add a new node and I want it to have dynamic width for nodes with really long texts(I don't want ellipsis). I found something in a JS Fiddle/Balkan app but there is a weird behaviour: when a new node is added all nodes are resized to a default value but i did not define it anywhere and then go to the new width. This makes the interaction with the chart weird for a user. I also try to dynamically position the triple dots for the node menu button for the new width but for bigger widths the menu is not on the bottom right of the node and for big widths the nodes overlap. In the image you can see the overlap and the bottom right nodes dont have the dots menu button, when ispecting the dots are outside of the node to the right: And this is the code where i do the changes: https://pastebin.com/trvdBVCi

[ZornitsaPesheva]

Try using this for the dynamic width: https://code.balkan.app/org-chart-js/dynamic-width#JS