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
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
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.
https://gojs.net/latest/intro/tools.html#RelinkingTool
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” : “”;
}).ofObject(),
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(v.toNode.data);
// writeToLog(“TEMPLATES.generateLinkTemplate: node is child of target node\r”);
rc = false;
}
return rc;
}).ofObject(),
$$(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;
}).ofObject(),
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;
}).ofObject(),
new go.Binding("visible", "", function(v) {
return v.findObject("text").text !== "" && v.findObject("text").text !== "undefined" ? true : false;
}).ofObject())
);
}
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,
background:"red",
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;
if(linkData.points==="pointsSWL"){
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()-> ";
ex.name = place + ex.name;
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