I have nodes with multiple ports and each node has some rules applied. There will be few ports of node which I don’t want to have outgoing links depending on node type and same way I don’t want to have incoming links to the port which are not allowed to accept incoming links.
Node with ports
Node has link going from below even though there are rules saying no link should go from below of this type of node, links can go out from only right side of the node.
as you can see when I am trying to create link manually it don’t let me select any other port except the ports on right which I want are only allowed.
On diagram initial layout gojs don’t respect applied rules and draw link from any port but I want gojs to draw link from only ports which are only allow each node as each node may have different rules depending on its type.
When I draw links manually rules work fine but for initial gojs layout it don’t work as I don’t want to set by myself but I want gojs to find best node out of the available (allowed ports, not restricted) ports and draw link from those.
/ ports
for (let i = 1; i <= 12; i++) {
const { fromLinkable, toLinkable } = this.getFromToEnabledPorts(comp.getAttribute("type"));
data["canLinkFromPort" + i] = (fromLinkable as any).flat().includes(i.toString())
data["canLinkToPort" + i] = (toLinkable as any).flat().includes(i.toString())
data["port" + i + "Alignment"] = this.getPortSpot(i, goShapeType);
}
private makePort(portId: number): go.Shape {
const fromSpot: go.Spot = this.getPortSpot(portId, null);
return go.GraphObject.make(go.Shape, {
cursor: "crosshair",
fill: null,
// fromLinkable: true,
fromSpot,
mouseEnter: () => {
this.oldAnimation = this.animation;
this.animation = false;
this.goDiagram.allowLink = true;
},
mouseLeave: () => {
this.goDiagram.allowLink = false;
this.animation = this.oldAnimation;
},
portId: portId.toString(),
stroke: null,
// toLinkable: true,
toSpot: fromSpot,
},
new go.Binding("fromLinkable", "canLinkFromPort" + portId),
new go.Binding("toLinkable", "canLinkToPort" + portId),
);
}
private getFromToEnabledPorts(nodeType) {
const top = ["T1", "T2", "T3"]
const right = ["R1", "R2", "R3"]
const bottom = ["B1", "B2", "B3"]
const left = ["L1", "L2", "L3"]
let fromLinkable: Array<string[]>;
let toLinkable: Array<string[]>;
// Apply custom rules for enabling/disabling ports based on node type
if (nodeType === "A") {
// For "A" type: only enable bottom and right ports for outgoing
fromLinkable = [right, bottom];
// Enable top and left ports for incoming
toLinkable = [left, top];
} else if (nodeType === "B") {
// For "B" type: only enable right ports for outgoing, left for incoming
fromLinkable = [right];
toLinkable = [left];
} else if (nodeType === "C") {
// For "C" type: only enable top and right ports for outgoing, bottom and left for incoming
fromLinkable = [top, right, bottom];
toLinkable = [left, top];
}
return { fromLinkable, toLinkable }
}
really appreciate any help/suggestions @walter
