Implementation suggestions for complex swimlane diagram

Hello Walter,

#1 solved, thank you.

#2 your suggestion worked, but I realised that i need to create my own link class, in order to be able to define the link point.

Based on this example I have created my own link class which extends go.Link and I have overwritten the getLinkPoint function. It works with a simple node. I use the port parameter to determine the rectangle and calculate the link points.

I have added a table, bound an itemArray and created a TableColumn template. I have set the link-properties on the TableColumn. When I create a link to or from a column the column is highlighted.


codepen link

The problem now is that no matter to or from which column I drag the link, rectangle defined by the parameter port in the function getLinkPoint is always the most right column. The result is that the links are always “connected” to the most right column.

How can I get the correct column in the getLinkPoint (the column where I have dragged the link with the mouse)?

It sounds as if the link really is connecting with the port on the right. That’s odd. Can you confirm that (for that node) there are three ports? If you select that Node:

myDiagram.selection.first().ports.count

If that indeed evaluates to 3, have you set GraphLinksModel.linkFromPortIdProperty and GraphLinksModel.linkToPortIdProperty?

no there is only one port. That´s strange.

Here is the table definition part from the above codepen link:

$(go.Panel, "Table", {
        stretch: go.GraphObject.Fill,
        name: "table"
    },
    new go.Binding("itemArray"), {
        itemTemplate: $(go.Panel, "TableColumn", {
            name: "column",
            portId: "",
            fromLinkableDuplicates: true,
            toLinkableDuplicates: true,
            fromLinkable: true,
            toLinkable: true
        })
// further parts here ...
    });

I have expected that if I have 3 columns I would get 3 ports, because the port is activated for the panel within the itemTemplate. Is this wrong?

Three elements have GraphObject.portId set to a string, but because you set them all to the same string, the ports do not have unique identifiers, so it’s ambiguous. I guess Node.port happens to get what you think of as the last one.

I have added a binding to portId, to make it unique within a node.

But now the parameter port in the overridden function getLinkPoint is always the node itself.

How do I know on which part (which column in my case) the link was dragged?

Have you set GraphLinksModel.linkFromPortIdProperty and GraphLinksModel.linkToPortIdProperty ?

Great, that was the reason. I thought it is only required when I want to write the data back into my model.

That´s what I wanted:
image

Thank you

A post was split to a new topic: Changing behavior of temporary link when drawing a new link