When a node is selected I want to be able to highlight all nodes connected to outgoing links or all nodes connected to incoming links. I’m going to try Node.linksConnected and see if that works. From there I don’t know what the best way to highlight the outgoing/incoming nodes. I don’t want to select them because that will cause unwanted events. Is there an easy way to take an existing node and add a yellow stroke around it? Or do I have to do something like an parent shape and change the background from transparent to yellow? I’m looking for the easiest way to pull this off.
You’ll want to call Node.findNodesOutOf() or .findNodesInto().
I think you are right that you do not want to use the existing selection mechanisms.
There are a few samples that demonstrate highlighting, including http://www.gojs.net/latest/samples/navigation.html and http://www.gojs.net/latest/samples/friendWheel.html , but the latter depends on selection.
I think you’ll want to put an extra Shape that is transparent and is around and behind what you are currently defining as the node template, and then you can change either its background or its fill. If your node is acting as a single port, you will also want to set portId: “” on what is your current node template, so that links will continue to connect with your “real” node and not with that background shape.
We’ll work on a sample for you.
Walter - last night I found those 2 calls you mentioned and all my code is working and now I’m ready to highlight. My templates are complicated because of rounded corners and different colors for the header and body. My outer already has portId: ‘’ so that helps. Here is the code for my nodes - I added the padding and background to the Table. I tried margin and that didn’t show the red.
buildBaseNodeTemplate: function() {
var me = this,
make = go.GraphObject.make,
template;
template = make(‘Node’, ‘Table’,
{
minSize: new go.Size(120, 60),
resizable: true,
cursor: ‘pointer’,
fromLinkable: true,
toLinkable: true,
fromLinkableSelfNode: true,
toLinkableSelfNode: true,
portId: ‘’,
padding: 5,
background: ‘red’
},
new go.Binding(‘location’, ‘location’),
new go.Binding(‘width’, ‘width’),
new go.Binding(‘height’, ‘height’),
make(‘RowColumnDefinition’,
{
row: 0,
height: 30,
sizing: go.RowColumnDefinition.None
}
),
make(‘RowColumnDefinition’,
{
row: 1,
sizing: go.RowColumnDefinition.ProportionalExtra
}
),
// Header
make(‘Panel’, ‘Table’,
{
stretch: go.GraphObject.Horizontal,
row: 0,
column: 0,
fromLinkable: false,
toLinkable: false,
cursor: ‘default’
},
make(‘Shape’,
{
figure: ‘RoundedRectangle’,
stroke: null,
strokeWidth: 0,
height: 30,
columnSpan: 2,
stretch: go.GraphObject.Horizontal
},
new go.Binding(‘fill’, ‘headerColor’)
),
// The only purpose of this shape is to stop rounded corners on the bottom of the blue space
make(‘Shape’,
{
figure: ‘Rectangle’,
stroke: null,
columnSpan: 2,
stretch: go.GraphObject.Horizontal,
strokeWidth: 0,
height: 10,
alignment: go.Spot.Bottom
},
new go.Binding(‘fill’, ‘headerColor’)
),
make(‘TextBlock’,
{
name: ‘icon’,
row: 0,
column: 0,
margin: new go.Margin(1, 0, 0, 5),
font: ‘16px workpoint’,
stroke: ‘#fff’
},
new go.Binding(‘text’, ‘iconText’),
new go.Binding(‘visible’, ‘iconVisible’)
),
make(‘Picture’,
{
name: ‘templateIcon’,
row: 0,
column: 0,
width: 16,
height: 16,
margin: new go.Margin(1, 0, 0, 5),
visible: false
},
new go.Binding(‘source’, ‘templateSource’),
new go.Binding(‘visible’, ‘templateVisible’)
),
make(‘TextBlock’,
{
name: ‘type’,
row: 0,
column: 1,
font: ‘14px open sans’,
margin: new go.Margin(1, 5, 0, 5),
stroke: ‘#fff’,
stretch: go.GraphObject.Horizontal
},
new go.Binding(‘text’, ‘headerTitle’)
)
),
// Body
make(‘Panel’, ‘Table’,
{
stretch: go.GraphObject.Fill,
row: 1,
column: 0
},
make(‘Shape’,
{
figure: ‘RoundedRectangle’,
stroke: null,
strokeWidth: 0,
stretch: go.GraphObject.Fill
},
new go.Binding(‘fill’, ‘bodyColor’)
),
// The only purpose of this shape is to stop rounded corners on the bottom of the blue space
make(‘Shape’,
{
figure: ‘Rectangle’,
stroke: null,
columnSpan: 2,
stretch: go.GraphObject.Horizontal,
strokeWidth: 0,
height: 10,
alignment: go.Spot.Top
},
new go.Binding(‘fill’, ‘bodyColor’)
),
make(‘TextBlock’,
{
name: ‘name’,
row: 0,
column: 0,
alignment: go.Spot.TopLeft,
editable: false,
font: ‘13px open sans’,
margin: new go.Margin(5, 5, 5, 5),
stroke: ‘#fff’,
stretch: go.GraphObject.Fill
},
new go.Binding(‘text’, ‘text’)
)
)
);
return template;
}
I attached screenshots of how the above displays with and w/o the padding. 
You didn’t say what the problem is, but I’ll assume that you don’t like the content of the table being clipped on the right and bottom sides.
The reason is that you are setting the width and height of the whole Table Panel. When you increase the padding you are decreasing the area available for the content. I suggest that either you not have any Binding on “width” or “height” (you could probably use minSize on the bottom half), or that you apply that Binding to the object whose size you want to control (probably the gray bottom half, and you’ll want to use different height values).
Yes I don’t want the bottom and right clipped. We use the height and width because the user can resize the node and it is persisted in the database. I’ll play around and see what I can come up with.
I do need to simplify my nodes and I think saw an example of how to make my own rounded rectangle objects.