I need assistance with designing a custom layout where nodes are arranged horizontally. Each node should have a unique link validation to prevent repetition. Furthermore, the nodes should be placed parallel to each other to facilitate parallel linking between them. I have experimented with various layouts, but encountered difficulties when it comes to arranging parallel links between nodes. Could you provide me with some guidance for designing this custom layout effectively?
Do you have some sketches or screenshots showing the layout that you want? What should happen if the nodes change size or the link connections change?
- In my custom layout I want initially the nodes should present according to their location property which is
set in the nodeTemplate - There should be a minimum gap between each unlinked nodes
- And there should be minimum gap between each linked nodes.
What do you mean by these gaps? What happens if a gap rule conflicts with the data?
It sounds like you don’t want a layout at all - but to have nodes positioned by their data. This is common. But then for 2 and 3 it sounds like maybe you want something else, like to stop the user from overlapping nodes.
Here Gap means certain space between nodes. And the 2 and 3 points are to stop the nodes from overlapping with each other. Here initially I can place the nodes by using their location property and with that I want the gap rule should maintained and after I connect 2 nodes with a link their should be a minimum space between the linked node also.
Do you merely want to prevent the user from moving a node onto another node? This can be implemented using a Part.dragComputation function. Example: Drag Unoccupied
No Diagram.layout is needed. But if you want to put such behavior in a layout, you could.
I would like to implement a layout where nodes are positioned based on the location property, I want to incorporate a side palette that allows users to drag elements onto the “myDiagramDiv” container and drop them anywhere they desire. If a user joins a link between “node1” and “node2” and then drags a node from the side palette, the node should hover over the link and be placed(added) between the two nodes. The links should be represented as one-directional stroke arrows, connected parallel to the nodes and node drag from side palette placed on the node hover link.
Here are some samples that might be useful to you: