Hi I want to paint node in this way this is possible?
if yes what should i need to do?
I want to paint the node like the right node ,
the left node is what i get .
Use a linear gradient Brush to fill your "RoundedRectangle"Shape.
It should have two color stops next to each other near 0.3, one to stop the darker color, and one to start the lighter color.
If you have other content in the node, you may want to use a clipping Spot panel. GoJS Panels -- Northwoods Software
go.Shape.defineFigureGenerator("RoundedLeftRectangle", function (shape, w, h) {
// this figure takes one parameter, the size of the corner
var p1 = 5; // default corner size
if (shape !== null) {
var 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?
var geo = new go.Geometry();
// a single figure consisting of straight lines and quarter-circle arcs
geo.add(new go.PathFigure(0, p1)
.add(new go.PathSegment(go.PathSegment.Arc, 180, 90, p1, p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, w, 0))
.add(new go.PathSegment(go.PathSegment.Line, w, h))
.add(new go.PathSegment(go.PathSegment.Line, p1, h))
.add(new go.PathSegment(go.PathSegment.Arc, 90, 90, p1, h - p1, p1, p1).close()));
// don't intersect with two top corners when used in an "Auto" Panel
geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0.3 * p1);
geo.spot2 = new go.Spot(1, 1, -0.3 * p1, 0);
return geo;
});
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
"undoManager.isEnabled": true
}
);
myDiagram.nodeTemplate =
$(go.Node, 'Auto',
$(go.Shape, 'RoundedRectangle',
{ fill: 'purple', strokeWidth: 0, spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight }),
$(go.Panel, "Horizontal",
$(go.Panel, "Spot",
{ isClipping: true },
$(go.Shape, "RoundedLeftRectangle",
{ width: 50, height: 50, strokeWidth: 0 }),
$(go.Shape,
{ width: 50, height: 50, strokeWidth: 0, fill: 'indigo' }),
),
$(go.TextBlock,
{ stroke: "white", margin: 5, font: '13px sans-serif' },
new go.Binding('text')
)
)
);
myDiagram.model = new go.GraphLinksModel(
[ { key: 1, text: "Alpha Node" } ]
);
}
So the node has a minimum width of 160, but can grow bigger if the text is longer?
I added company name to my profile , (actually I’m a student)
So the node has a minimum width of 160, but can grow bigger if the text is longer? Yes!
Set a minWidth on the TextBlock, or whatever the content portion of the node is: