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