I am trying to link port to port when the node is selected, but it seems that the selected line of the node is on top of the port and that is why the courser cant link port to port.
Also, I want the port to appear on top of the node.
Any help? thanks!
It’s hard for me to understand what your node looks like when you neither give a precise description nor a screenshot. And of course that makes it hard for me to advise you.
My guess is that you have specified a Part.selectionObjectName of some GraphObject that is just inside where your port is, and your Part.selectionAdorned is true so that the Adornment shown when the node is selected fits just around the Part.selectionObject.
If that is the case for you, then you can either customize the selection adornment (see GoJS Selection -- Northwoods Software) or not use a selection adornment at all when showing selection.
All of the elements in a Panel have a z-ordering that is determined by their order in the panel: Panel.elements.
Hello Walter,
As you said, I have selectionAdornmentTemplate and “go.Shape” for the ports for links.
When selected selectionAdornmentTemplate is above the “go.Shape” and I cant link.
What can I use to solve this issue? I didn’t understand how to use the z-order in this case.
Thanks!
Well, I gave you two possibilities.
One is to change your selection Adornment so that it doesn’t occlude your node’s ports.
The other is not to use a selection Adornment at all (Part.selectionAdorned = false), but to change the appearance of the Node when it is selected.
How can I do that?
How can I occlude the node ports?
As I said 12 days ago, how can I possibly give you suggestions when I have no idea of what your nodes look like nor how you have defined your selection Adornment?
So, I’m sorry, but I cannot help you.
This is my node + selection Adornment :
return g(go.Node, 'Auto', {
alignmentFocus: go.Spot.Center,
selectionAdornmentTemplate: g(go.Adornment, 'Spot',
createEventOptions(),
g(go.Shape, 'RoundedRectangle',
{
width: shapeWidth || 110,
height: shapeHeight || 90,
stroke: '#16c4d9',
strokeWidth: 4,
margin: new go.Margin(13,0,0,0),
fill: 'transparent'
}))
},
createEventOptions(),
g(go.Shape, 'RoundedRectangle', {
name: 'MainShape',
width: shapeWidth || 110,
height: shapeHeight || 90,
fill: fill || '#f2f2f2',
margin: new go.Margin(15, 25, 0, 0),
spot1: go.Spot.TopLeft,
spot2: go.Spot.BottomRight,
stroke: '#cdcdcd',
strokeWidth:2
}
// ,
// new go.Binding('stroke', 'isSelected', (b) => b ? '#16c4d9' : '#cdcdcd').ofObject()
),
createBindedTextBlock(shapeWidth),
g(go.Picture, {
maxSize: new go.Size(NaN, imageHeight),
desiredSize: new go.Size(imageWidth, NaN),
alignment: new go.Spot(0.5, 0.3),
imageStretch: go.GraphObject.Uniform,
sourceCrossOrigin: () => 'anonymous'
},
new go.Binding('source', '', function (data) {
return data.ImageUrl ? data.ImageUrl : data.NodeImageUrl;
}),
new go.Binding('visible', 'showMockup', (v) => !v)),
g(go.Picture, {
width: shapeWidth - 6 || 104,
height: shapeHeight - 8 || 82,
alignment: new go.Spot(0.5, 0),
alignmentFocus: go.Spot.TopCenter,
margin:new go.Margin(5,0,0,0),
imageStretch: go.GraphObject.Horizontal,
cursor: diagramMode.isPreview ? 'pointer' : '',
sourceCrossOrigin: () => 'anonymous',
click: (e, obj) => {
if (diagramMode.isPreview) {
if (obj.part.data.showMockup) {
$window.open(obj.part.data.fullSizeMockUrl, "_blank", "width=800, height=600")
}
}
}
},
new go.Binding('source', 'mockupUrl'),
new go.Binding('visible', 'showMockup')),
createLocationBinding(),
createNodePorts(0.015, 0.015, 0.015, 0.015)
);
}
This is the function that creates the ports :
return [({
alignment: new go.Spot(0.5, 0 + top),
portId: '1',
fromSpot: go.Spot.Top,
toSpot: go.Spot.Top,
name: 'PortT',
toLinkable: arePortsEditable(),
fromLinkable: arePortsEditable()
}),
({
alignment: new go.Spot(0 + left, 0.5),
portId: '2',
fromSpot: go.Spot.Left,
toSpot: go.Spot.Left,
name: 'PortR',
toLinkable: arePortsEditable(),
fromLinkable: arePortsEditable()
}),
({
alignment: new go.Spot(0.5, 1 - bottom),
portId: '0',
fromSpot: go.Spot.Bottom,
toSpot: go.Spot.Bottom,
name: 'PortB',
toLinkable: arePortsEditable(),
fromLinkable: arePortsEditable()
}),
({
alignment: new go.Spot(1 - right, 0.5),
portId: '3',
fromSpot: go.Spot.Right,
toSpot: go.Spot.Right,
name: 'PortL',
toLinkable: arePortsEditable(),
fromLinkable: arePortsEditable()
})
];
}I still cannot visualize the problem that you have.
Walter,
As you see, this is the problem. when the node is selected I cant use the port (I have 4 ports) to link to another node.
The selection is preventing me from clicking in the port. When I try clicking on any of the ports, its like I am clicking on the node and not on the port.
Have you tried setting the fill: null on the RoundedRectangle Shape of the selection Adornment?
Rather than “transparent”, which would intercept mouse/touch picks inside the shape.
Thanks Walter, I fixed the issue.