Hi,
I am trying to highlight the nodes on canvas with red color if its linksConnected === 0 ,
for this, I have a function where I am getting the nodes list which is not connected to anyother node. But can you help how can I add the stroke color to this nodes.
What is your node template?
You might want to define your node template so that it has a red border by default. Implement Node.linkConnected and Node.linkDisconnected event handlers to maybe change the border color based on node.linksConnected.count === 0.
$(go.Node, . . .,
{
linkConnected: function(node, link, port) {
....stroke = "transparent";
},
linkDisconnected: function(node, link, port) {
....stroke = (node.linksConnected.count === 0 ? "red" : "transparent");
}
},
. . .
Thank you for your quick reply.
I am binding the stroke colour with a variable stroke
It’s working actually, But my nodes defined stroke colour is changing unnecessarily
/**
* creates the template for node
*/
createNodeTemplate() {
// generates a figure that is right rounded rectangle in shape with only
go.Shape.defineFigureGenerator('RoundedRectangleRight', (shape, w, h) => {
// this figure takes one parameter, the size of the corner
let p1 = 7; // default corner size
if (shape !== null) {
const param1 = shape.parameter1;
if (!isNaN(param1) && param1 >= 0) {
p1 = param1;
} // can't be negative or NaN
}
p1 = Math.min(p1, w / 2);
p1 = Math.min(p1, h / 2); // limit by whole height or by half height?
const geo = new go.Geometry();
// a single figure consisting of straight lines and quarter-circle arcs
geo.add(new go.PathFigure(-3, 0)
.add(new go.PathSegment(go.PathSegment.Line, w - p1, 0))
.add(new go.PathSegment(go.PathSegment.Arc, 270, 90, w - p1, p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, w, h - p1))
.add(new go.PathSegment(go.PathSegment.Arc, 0, 90, w - p1 , h - p1 , p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, -3, h).close())
);
return geo;
});
// template for the icon on the node.
shapeIcon = GJS(go.Panel, 'Auto', { alignment: go.Spot.Left},
GJS(go.Picture , { width: 60 , height : 60} , new go.Binding('source', 'picture'))
);
// template for the text of the node
shapeText = GJS(go.Panel, 'Auto', GJS(go.Shape , 'RoundedRectangleRight', { strokeWidth: 1,
fill: '#fff',
width: 180,
height: 59
} , new go.Binding('stroke' , 'stroke')),
GJS(go.TextBlock, {
font: '12pt sans-serif',
textAlign: 'center',
overflow: go.TextBlock.OverflowClip,
maxLines: 3,
verticalAlignment: go.Spot.Center
}, new go.Binding('text', 'name').makeTwoWay())
);
// circle shape template on the node
shapeCircle = GJS(go.Panel, 'Auto', {alignment: go.Spot.Right},
GJS(go.Shape, 'Circle' , { width: 17 , height : 17 , fill : 'white'} , new go.Binding('stroke' , 'stroke')),
GJS(go.Shape , 'Circle' , {width : 12 , height: 12 , strokeWidth: 0 },
new go.Binding('fill', 'stroke'),
new go.Binding('stroke' , 'stroke'))
);
// node template for canvas
diagram.nodeTemplate = GJS(go.Node, 'Spot',
{
selectionAdorned: false,
shadowOffset: new go.Point(0, 3),
shadowBlur: 10,
shadowColor: '#e5e9f2',
isShadowed: false,
fromLinkable: true,
toLinkable: true,
cursor: 'pointer',
click: this.toggleSideDrawer.bind(this),
mouseEnter: mouseEnter,
mouseLeave: mouseLeave,
locationSpot: go.Spot.Center,
// show the Adornment when a mouseHover event occurs
linkConnected: function(node, link, port) {
node.data.stroke = 'stroke';
},
linkDisconnected: function(node, link, port) {
node.data.stroke = (node.linksConnected.count === 0 ? 'red' : 'transparent');
},
mouseHover: function(e, obj) {
const node = obj.part;
const templ = theHoverAdornment.findObject('ITEMS').itemTemplate;
templ.findObject('SHAPE').stroke = node.data.stroke;
theHoverAdornment.adornedObject = node;
node.addAdornment('MouseHover', theHoverAdornment);
showPoint(obj.part.location);
}
},
GJS(go.Panel, 'Horizontal', shapeIcon , shapeText), shapeCircle,
new go.Binding('category', 'linkType'),
new go.Binding('location', 'loc').makeTwoWay(function(loc) {
// console.log('loc', loc);
return go.Point.stringify(loc);
})
);
function mouseEnter(e , obj) {
obj.part.isShadowed = true; // shadow is applied
}
function mouseLeave (e , obj) {
obj.part.isShadowed = false; // shadow is removed
}
function showPoint(loc) {
const docloc = diagram.transformDocToView(loc);
const elt = document.getElementById('Message1');
elt.textContent = 'Selected node location,\ndocument coordinates: ' + loc.x.toFixed(2) + ' ' + loc.y.toFixed(2) +
'\nview coordinates: ' + docloc.x.toFixed(2) + ' ' + docloc.y.toFixed(2);
}
}```Depending on whether you want to show the unhighlighted color when the node is highlighted, you may need to use a separate Shape.