Port connection

Hello,

We are developing a BPMN process designer. So we added ports to nodes and tried to connect node with together. After the connection done, the link was dislocation from ports.

We want to link port to port connection.

Our source code is below. Thanks for your help.

function nodePosition() {
return new go.Binding(“location”, “position”, function (position) { return new go.Point(ko.unwrap(position.left), ko.unwrap(position.top)); }).makeTwoWay(function (val, data) { data.position.left(val.x); data.position.top(val.y); return data.position; });
}

function nodeLabel(alignment) {
alignment = alignment || go.Spot.Center;
return $$(go.TextBlock,
{ alignment: alignment, textAlign: “center”, margin: 5, editable: true },
new go.Binding(“text”, “html”, function (html) { return ko.unwrap(html.label); }).makeTwoWay(function (val, data) { data.html.label(val); return data.html; })
);
}

//#region makePort
function portEvents() {
return [
{
// the Node.location is at the center of each node
//locationSpot: go.Spot.Center,
//isShadowed: true,
//shadowColor: “#888”,
// handle mouse enter/leave events to show/hide the ports
mouseEnter: function (e, obj) { showPorts(obj.part, true); },
mouseLeave: function (e, obj) { showPorts(obj.part, false); }
}
];
}

// Make all ports on a node visible when the mouse is over the node
function showPorts(node, show) {
var diagram = node.diagram;
if (!diagram || diagram.isReadOnly || !diagram.allowLink) return;
node.ports.each(function (port) {
port.stroke = (show ? “red” : null);
});
}

// Define a function for creating a “port” that is normally transparent.
// The “name” is used as the GraphObject.portId, the “spot” is used to control how links connect
// and where the port is positioned on the node, and the boolean “output” and “input” arguments
// control whether the user can draw links from or to the port.
function makePort(name, spot, output, input) {
// the port is basically just a small circle that has a white stroke when it is made visible
return $$(go.Shape, “Circle”,
{
fill: “transparent”,
stroke: null, // this is changed to “white” in the showPorts function
width: 8, height: 8,
alignment: spot,
//alignmentFocus: spot, // align the port on the main Shape
portId: name, // declare this object to be a “port”
fromSpot: spot,
toSpot: spot, // declare where links may connect at this port
fromLinkable: output, toLinkable: input, // declare whether the user may draw links to/from here
cursor: “pointer” // show a different cursor to indicate potential link point
});
}
//#endregion makePort

// create the nodeTemplateMap, holding main view node templates:
var nodeTemplateMap = new go.Map(“string”, go.Node);

//#region Event > NoneEndEvent
nodeTemplateMap.add(“NoneEndEvent”,
$$(go.Node, “Vertical”,
{
locationObjectName: “SHAPE”,
locationSpot: go.Spot.Center,
},
nodePosition(),
{ resizable: false, resizeObjectName: “SHAPE” },
$$(go.Panel, “Spot”, portEvents(),
$$(go.Shape, “Circle”, // Outer circle
{
strokeWidth: 2,
fill: ‘#ffffff’,
name: “SHAPE”,
stroke: ‘#000000’,
width: 50, height: 50,
}
),
// four named ports, one on each side:
makePort(“T”, go.Spot.Top, false, true),
makePort(“L”, go.Spot.Left, false, true),
makePort(“R”, go.Spot.Right, false, true),
makePort(“B”, go.Spot.Bottom, false, true)
),
nodeLabel()
)
);
//#endregion Event > NoneEndEvent

//#region Event > NoneStartEvent
nodeTemplateMap.add(“NoneStartEvent”,
$$(go.Node, “Vertical”,
{
locationObjectName: “SHAPE”,
locationSpot: go.Spot.Center,
//selectionAdorned: false, // use a Binding on the Shape.stroke to show selection
},
nodePosition(),
{ resizable: false, resizeObjectName: “SHAPE” },
$$(go.Panel, “Spot”, portEvents(),
$$(go.Shape, “Circle”, // Outer circle
{
strokeWidth: 1,
fill: ‘#ffffff’,
name: “SHAPE”,
stroke: ‘#000000’,
width: 50, height: 50,
}
),
// four named ports, one on each side:
makePort(“T”, go.Spot.Top, true, false),
makePort(“L”, go.Spot.Left, true, false),
makePort(“R”, go.Spot.Right, true, false),
makePort(“B”, go.Spot.Bottom, true, false)
),
nodeLabel()
)
);
//#endregion Event > NoneStartEvent

First, if you haven’t read this page yet, please do: http://gojs.net/latest/intro/ports.html

It appears that the link is connecting with the whole node, not with an individual port element. So you need to make sure that the GraphObject that you want to act as a “port” has its GraphObject.portId set to non-null. Your call(s) to your makePort function do that.

But also you have to make sure that you are using a GraphLinksModel whose fromPortIdProperty and toPortIdProperty have been set to the names of the properties on the link data objects that name the “from” port and the “to” port.

And you need to make sure that each link data object in the GraphLinksMode.linkDataArray has those two properties set to the port names that you want.

All of the samples that use multiple ports do meet all of the above requirements.

We have just solved.

Thank you…