Hi,
I am creating a diagram where I have groups that are supposed to hold a panel inside with table layout. All the node children of that group are to be placed inside this table. I was previously using grid layout, but I want more control over where each node resides, for which I will give each node in my nodeDataArray a row and column property, which will indicate which cell that node would occupy in the table. All the table samples that I have found do not cater for dynamic number of nodes, so I want to know how that is possible?
As a sample, I am sharing the rough depiction of the end diagram that I wish to create:
If you have your own concept of rows and columns in the data, why not just data-bind those to the Node’s location? You may not even need a layout.
Here is a very basic example of positioning nodes based on data.row and data.col in their node data, without any layout at all: https://codepen.io/simonsarris/pen/jOewooe
Thanks for the response. The approach that you are suggesting is very valid and it had crossed my mind, but there is an issue with it. This approach would work perfectly if I only had nodes of fixed size (100 x 100 in your example) to be placed inside a container. If you look at the screenshot of the diagram that I shared earlier, you will see that I can also get a dynamically sized group, the one named Class Declaration in between the fixed sized nodes. The issue is that even though I can give this group full width of its parent container, its height is not pre-determined, and any subsequent nodes like *Interface Declaration or Enum Declaration will be placed on top of their sibling group (Class Declaration).
My intention with TableLayout was that if I could just have the group Class Declaration span all columns and just one row ( the size of that row being elastic and bigger than the rows above), then I could simply have subsequent nodes occupy the next row in sequence and not worry about the dynamic height of the group (Class Declaration). For example, in the diagram above, I can have the Class Declaration group start from row 3 and occupy all 5 columns, and the next node, the Interface Declaration, can then have row 4 column 1.
I see. It still seems like TableLayout may be just fine for you. You would probably want “Class Declaration” to be a Group, which itself does not participate in the layout, but is just sized and located via its Placeholder. Then that Group must have it’s own layout set to null so that all the group members are using the Diagram’s Table Layout. That might just work without any further effort.
Thanks for the response, Simon. What you just showed here looks great. However, there is a slight obstacle that I can’t get across. What you have done in your example is that you have laid out the entire diagram as a table, which is something that won’t be ideal in my case, as the diagrams can get very complicated. So my diagram would contain multiple containers, (let’s name these “files”) and the diagram as a whole would be arranged in a circular or some other layout. So I want my diagram to be made of many “files”, which could be “vertical groups” or “panels”, inside which I want to create tables, like the one in your example, and all my nodes will reside in those tables (see the screenshot below to get a sense of an example of a file. The diagram is supposed to lay out multiple such “files” in a circular or other format ) :
I have tweaked your example a little to work in the way that I hope for it to work, but it isn’t working correctly. Please see that example here https://codepen.io/AbdullahAtdevcodemaps/pen/VwEzWgy?editors=1010 , maybe it will give you a better idea of what I am trying to achieve.
