Link connected to unknown port by Ring shaped

hallo i only changed the shape forum from Circle to Ring and now I have an extra port on the right side of shape, how can I get rid of it

Screenshot 2020-10-21 110754

That depends on your node template. Perhaps you have set the portId of some other object in the template? Perhaps the whole node itself?

If you haven’t done that, are you sure that that link is connecting with one of your specific ports of the node? Maybe that link does not specify a port identifier, so it is defaulting to connect with the default port (Node.port), which might be the whole node. Do other links connect correctly with the individual ports of your nodes?

yes the connection with the other sides haven is correct
only on the right side I have two ports one is right on the node and the other port is next to it with small space
InkedScreenshot 2020-10-21 110754_LI

So when there is no link connected with the node, you still see that pink diamond? If you don’t want it in your node template, remove it.

No when there is no link connected with the node,i don’t see that pink diamond
when i delete the connection, it also disappears but i don’t know where that comes from

So is the pink diamond associated with the link, and not with the node? If so, then it sounds as if it isn’t a port at all.

Does the pink diamond disappear if the link is not selected? If so, then it’s probably a relinking handle, created by the RelinkingTool, that you have customized to be larger than normal and pink.

yes it disappear when the link ist not selected,
but why by Circle fourm it works only by Ring although both shape are the same size

That depends on your node template.

Did you set your Node.background to “red” in this last screenshot?

yes i did that (Node.background to “red” in this last screenshot)

what i have to do or to change in the node template ?

Have you set portId on anything in your template?

Or maybe you have set or bound Link.fromShortLength?

do you mean link template? i don’t use PortId on anything in link template . the link template looks like that

$$(go.Link, // the whole link panel
// background: “rgba(255, 255, 0, 0.4)”, //Testweise transparenter Hintergrund color:yellow
contextMenu: buildLineContextMenu()
}, {
selectable: true,
selectionAdornmentTemplate: TEMPLATES.linkSelectionAdornmentTemplate
}, {
relinkableFrom: true,
relinkableTo: true,
reshapable: true,
fromEndSegmentLength: gridSize,
toEndSegmentLength: gridSize
}, {
isTreeLink: true,
routing: routingMode,
curve: link_curve,
corner: link_corner
new go.Binding(“points”, “”, toPoints).makeTwoWay(fromPoints),
new go.Binding(“fromEndSegmentLength”, “fromNode”, setLinkSegmentLength).ofObject(),
new go.Binding(“toEndSegmentLength”, “toNode”, setLinkSegmentLength).ofObject(),
new go.Binding(“layerName”, “isSelected”, function(sel) {
return sel ? “Foreground” : “”;
new go.Binding(“isTreeLink”, “”, function(v, source) {
// writeToLog(“TEMPLATES.generateLinkTemplate: Binding source (” + source.type + “)\r”);
var rc = true;
if(v.toNode && v.fromNode && v.fromNode.isInTreeOf(v.toNode)){
// SHAPES.logObjectBlock(;
// writeToLog(“TEMPLATES.generateLinkTemplate: node is child of target node\r”);
rc = false;
return rc;

	$$(go.Shape, // the link path shape
			isPanelMain: true,
			strokeWidth: 1.5,
			stroke: linkColor,
			// background:"red"
		new go.Binding("strokeDashArray", "dashedLine", function(v) {
			//writeToLog("generateLinkTemplate dashedLine v:" + v + "\r");
			return (graphMode == 2) && v == "1" ? [5, 3] : null; // dashed line for 'staffUnit' relation in org charts
		new go.Binding("strokeWidth", "", function(v) {
			return graphMode === 2 ? strokeWidthBig : 1.5;
		new go.Binding("stroke", "", getLinkColor).ofObject()

	$$(go.Shape, // the arrowhead
			toArrow: "Standard",
			stroke: linkColor,
			fill: linkColor
		new go.Binding("visible", "", function(v) {
			return graphMode == 2 ? false : true;
		new go.Binding("stroke", "", getLinkColor).ofObject(),
		new go.Binding("fill", "", getLinkColor).ofObject()

	// TextBlock to save the pos of the actual text
	$$(go.TextBlock, {
			textAlign: "center",
			// font: null // commented out for compatibility issues with GoJS >= 1.8
			stroke: null,
			name: 'textPosition',
			text: '1', // int values only
			margin: 2,
			minSize: new go.Size(0, 0),
			editable: false,
			visible: false
		new go.Binding("text", "textPosition").makeTwoWay()),

	$$(go.TextBlock, {
			textAlign: "center",
			// font: null // commented out for compatibility issues with GoJS >= 1.8
			stroke: null,
			name: 'dashedLine',
			text: '0', // int values only // 0 - false, 1 - true
			margin: 2,
			minSize: new go.Size(0, 0),
			editable: false,
			visible: false
		new go.Binding("text", "dashedLine").makeTwoWay()),

	// Text block on beginning of path
	$$(go.TextBlock, {
			name: 'text',
			alignmentFocus: go.Spot.BottomLeft,
			minSize: new go.Size(10, 5),
			//segmentIndex: 1,
			segmentFraction: 0.5,
			//segmentOffset: new go.Point(0, -10), // on the "left" side of the line, +10 would be "right" side
			font: fontStyleSmall,
			stroke: fontColorTitle,
			editable: true,
			// background: "rgba(0, 255, 255, 0.5)", //Testweise transparenter Hintergrund color:cyan
			visible: true
		new go.Binding("text", "text").makeTwoWay(),
		new go.Binding("segmentIndex", "", function(v) {
			var newSegmentIndex = 1;
			try {
				newSegmentIndex = parseInt(v.findObject("textPosition").text);
			} catch (ex) {
				writeToLog(ex, 0, 1);
			return newSegmentIndex;
		new go.Binding("segmentOffset", "", function(v) {
			var point = new go.Point(10, -10);

			if (v.fromPortId == "L") {
				point = new go.Point(10, 10);

			if (v.fromPortId == "") {
				//point = new go.Point(10, 10);

			return point;
		new go.Binding("visible", "", function(v) {
			return v.findObject("text").text !== "" && v.findObject("text").text !== "undefined" ? true : false;



And in this case where do the Link.points end at?

the Event Shape looks like this

function createEventShape(diagramData) {
// writeToLog("(SHAPES)createEventShape start\r", 0, LOGLEVEL.DEBUG);
return $$(go.Node, “Spot”, nodeStyle(diagramData), {
resizable: false,

	$$(go.Panel, "Spot", {
			fromLinkable: true,
			toLinkable: true,
			// background: "rgba(255, 0, 255, 0.1)", //Testweise transparenter Hintergrund color:fuchsia
			// padding: new go.Margin(0, 0, 3, 0) 
		$$(go.Shape, "Ring", {
				portId: "",
				fromLinkable: true,
				toLinkable: true,
				cursor: "crosshair",
				margin: new go.Margin(0, 2, 4, 0),
				minSize: new go.Size(gridSize * 2, gridSize * 2),
				maxSize: new go.Size(gridSize * 21, gridSize * 21),
				desiredSize: new go.Size(gridSize * 2, gridSize * 2),
				fill: shapeBackgroundColor,
				strokeWidth: strokeWidth +2 ,
				stroke: shapeBorderColor,
				name: "MARK",
				mouseOver: function(e, node) {
					if (isViewMode())
						showTooltip(e.viewPoint, node.part.findObject("text_inside").text, "showEventData", node.part.findObject("activityId").text, node.part.findObject("shortDescription").text, node.part.findObject("inputText").text, node.part.findObject("outputText").text);
			new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify), // save sizing data in model
			new go.Binding("fill", "", function(v) {
				return shapeBackgroundColor;
			new go.Binding("stroke", "", function(v) {
				return SHAPES.getDarkerBorder()(shapeBackgroundColor);

and end of links.Point i think is be defined in this function

var toPoints = function(data, lnk) {
	try {
		// writeToLog("toPoints: start("+linkData.points+")\r", 0, LOGLEVEL.DEBUG);
		var dataPoints = [];
		var pts = new go.List();
		var x = 0,
			y = 0;
			dataPoints = data.pointsSWL;
		} else {
			dataPoints = data.points;
		if (data && dataPoints && HELPERS.is_array(dataPoints)) {
			// writeToLog("toPoints: "+linkData.points+"==(" + dataPoints + ")\r");
			dataPoints.forEach(function(pnt, index) {
				if (index % 2) {
					// writeToLog("toPoints: py[" + index + "]==" + pnt + ")\r", 0, LOGLEVEL.DEBUG);
					y = pnt;
					pts.add(new go.Point(x, y));
				} else {
					// writeToLog("toPoints: px[" + index + "]==" + pnt + ")\r", 0, LOGLEVEL.DEBUG);
					x = pnt;
		} else if (data && dataPoints && (dataPoints instanceof go.List)) {
			// writeToLog("toPoints: nothing to do List(Point) exists already\r", 0, LOGLEVEL.DEBUG);
			return dataPoints;
		return pts;
	} catch (ex) {
		var place = "TEMPLATES: toPoints()-> "; = place +;
		writeToLog(ex, 0, LOGLEVEL.ERROR);

OK, but I was asking whether for that particular link the “points” of that link’s route end at a point that is some distance away from the edge of that node.

i don’t know whether its end at a point that is some distance away from the edge of that node. and i don’t how i can find that, i will try to find it

with these numbers it is not working correctly

“linkDataArray”: [ {“fromPort”:"", “toPort”:"", “from”:-1, “to”:-2, “text”:null, “points”:[-2793.2249999046326,-1557.826666522026,-2756.7249999046326,-1557.826666522026,-2740.1124999523163,-1557.826666522026,-2740.1124999523163,-1562.5,-2723.5,-1562.5,-2700.5,-1562.5]} ]}

but with these numbers it is working correctly

“linkDataArray”: [ {“fromPort”:“R”, “toPort”:"", “from”:-1, “to”:-2, “text”:null, “points”:[ -2807.2249999046326,-1557.826666522026,-2770.7249999046326,-1557.826666522026,-2747.1124999523163,-1557.826666522026,-2747.1124999523163,-1562.5,-2723.5,-1562.5,-2700.5,-1562.5 ]} ]}

Yes, note the only difference is the X position of the first point.

So the problem is that your data for the link points is wrong. Perhaps it was correct at one time, but you have modified the template for the node, causing it to have a smaller size.

in template for the node (shape) i have only changed from Circle fourm to Ring and they have the same size.

What happens if you click and drag the “Ring” node? It’s possible this isn’t a link routing issue at all, but one of saved routes in the JSON you are loading being incorrect.

jason will be saved later after editing (dragging …) , the jason data are entered incorrectly