Kindly let me know on how to set or bind GradientLink.startColor and GradientLink.endColor?
Ah, so I assume you find GradientLink suitable?
What code are you using? How does it not behave as you would like?
Hello Walter,
Kindly find below the code.
myDiagram.model = new go.GraphLinksModel(
[ // a JavaScript Array of JavaScript objects, one per node;
// the "color" property is added specifically for this app
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" }
],
[ // a JavaScript Array of JavaScript objects, one per link
{ from: "Alpha", to: "Beta" ,linecolor: connectorbrush ,thick :"3",text:"P",tocolor:"lightblue", fromcolor :"orange"},
{ from: "Alpha", to: "Gamma",thick :"3",fromcolor :"yellow" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha",scolor : "yellow",ecolor : "blue" }
]);
myDiagram.linkTemplate =
$(go.Link,
$(go.Shape,new go.Binding("stroke", "linecolor"),new go.Binding("strokeWidth", "thick")),
$( go.Shape,new go.Binding("stroke", "fromcolor"),
new go.Binding("fill", "fromcolor"),
{ fromArrow: "Circle" , strokeWidth: 2 },
{ segmentIndex: 0, segmentFraction: 0.5 }
),
$( go.Shape,
new go.Binding("stroke", "tocolor"),
new go.Binding("fill", "tocolor"),
{ toArrow: "BackwardSemiCircle" ,strokeWidth: 2},
{ segmentIndex: 0, segmentFraction: 0.5 }
),
$( go.TextBlock, new go.Binding("text", "text"),
{ segmentOffset: new go.Point(0, 13) }
)
``` );
This is for a report that shows all the interfaces of an application. The gradient works fine but as another user specified earlier, the color switches when we replace a node.
I’m finding your code hard to read. Please format and indent it properly.
What do you mean by “the color switches when we replace a node”?
Hello Walter,
I am sorry. I think I lost the formatting while copying.
``` myDiagram.model = new go.GraphLinksModel(
``` [ // a JavaScript Array of JavaScript objects, one per node;
``` // the "color" property is added specifically for this app
``` { key: "Alpha", color: "lightblue" },
``` { key: "Beta", color: "orange" },
``` { key: "Gamma", color: "lightgreen" },
``` { key: "Delta", color: "pink" }
``` ],
``` [ // a JavaScript Array of JavaScript objects, one per link
``` { from: "Alpha", to: "Beta" ,linecolor: connectorbrush ,thick :"3",text:"P",tocolor:"lightblue", fromcolor :"orange"},
``` { from: "Alpha", to: "Gamma",thick :"3",fromcolor :"yellow" },
``` { from: "Gamma", to: "Delta" },
``` { from: "Delta", to: "Alpha",scolor : "yellow",ecolor : "blue" }
``` ]);
```myDiagram.linkTemplate =
``` $(go.Link,
``` $(go.Shape,new go.Binding("stroke", "linecolor"),new go.Binding("strokeWidth", "thick")),
``` $( go.Shape,new go.Binding("stroke", "fromcolor"),
``` new go.Binding("fill", "fromcolor"),
``` { fromArrow: "Circle" , strokeWidth: 2 },
``` { segmentIndex: 0, segmentFraction: 0.5 }
``` ),
```$( go.Shape,
``` new go.Binding("stroke", "tocolor"),
``` new go.Binding("fill", "tocolor"),
``` { toArrow: "BackwardSemiCircle" ,strokeWidth: 2},
``` { segmentIndex: 0, segmentFraction: 0.5 }
``` ),
```$( go.TextBlock, new go.Binding("text", "text"),
``` { segmentOffset: new go.Point(0, 13) }
``` )
``` );
Assume gradient between green and blue. Node A has green link which gradually changes to blue when reaching node B. If I move node B above node A, link color of node B becomes green and node A becomes blue.
The link color of node A and B are reversed if I move node B above node A . If I move again to its original place i.e) beneath the node A it's normal then.
To be brief, I am using
var connectorbrush = $(go.Brush, “Linear”, { 0.28: “lightblue”, 1.0: “orange” });
.
.
.
{ from: “Alpha”,
to: “Beta” ,
stroke: connectorbrush ,
thick :“3”,
text:“P”,
tocolor:“lightblue”,
fromcolor :“orange”
}
Use triple backquotes on separate lines to surround all of your formatted and indented code. You can edit your previous posts, if you like. For more information:
Scenario 1 :
Scenario 2:
Wait – you asked about the GradientLink class, and yet you are not using it?
http://gojs.net/extras/GradientLink.html
If you modify GradientLink.updateBrush by replacing two lines with these two:
br.addColorStop(0.4999, this.startColor); // had been 0.0
br.addColorStop(0.5000, this.endColor); // had been 1.0
and if you use a Link template like this:
myDiagram.linkTemplate =
$(GradientLink,
{ toShortLength: 1 },
new go.Binding("startColor"),
new go.Binding("endColor"),
$(go.Shape, { strokeWidth: 2 }),
$(go.Shape, { toArrow: "OpenTriangle" },
new go.Binding("stroke", "endColor"))
);
and use this model data:
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "pink" }
],
[
{ from: 1, to: 2 },
{ from: 1, to: 3, startColor: "red", endColor: "blue" },
{ from: 3, to: 4, startColor: "orange", endColor: "red" },
{ from: 4, to: 1, startColor: "green", endColor: "purple" }
]);
You get these results:
For completeness, here’s the GradientLink sample class, modified to render as a simpler two color link:
function GradientLink() {
go.Link.call(this);
this._startColor = "black";
this._endColor = "black";
}
go.Diagram.inherit(GradientLink, go.Link);
Object.defineProperty(GradientLink.prototype, "startColor", {
get: function() { return this._startColor; },
set: function(value) {
if (this._startColor !== value) {
this._startColor = value;
this.updateBrush();
}
}
});
Object.defineProperty(GradientLink.prototype, "endColor", {
get: function() { return this._endColor; },
set: function(value) {
if (this._endColor !== value) {
this._endColor = value;
this.updateBrush();
}
}
});
GradientLink.prototype.updateBrush = function() {
var path = this.path;
if (path !== null) {
if (this.startColor === this.endColor) {
path.stroke = this.startColor;
} else if (this.pointsCount >= 2) {
var br = new go.Brush(go.Brush.Linear);
var p0 = this.getPoint(0);
var pn = this.getPoint(this.pointsCount - 1);
var dx = pn.x - p0.x;
var dy = pn.y - p0.y;
var ex = (dx > 0) ? 1.0 : 0.0;
var ey = (dy > 0) ? 1.0 : 0.0;
br.end = new go.Spot(ex, ey);
br.start = br.end.opposite();
br.addColorStop(0.4999, this.startColor); // 0.0 for a normal gradient
br.addColorStop(0.5000, this.endColor); // 1.0 for a normal gradient
path.stroke = br;
}
}
};
GradientLink.prototype.computePoints = function() {
var result = go.Link.prototype.computePoints.call(this);
if (result) this.updateBrush();
return result;
};
// end GradientLink
Thanks a lot for your detailed description Walter. It’s really helpful.
The solution works fine but I have lost circle from the link. The arrowhead I used is like ForwardSemiCircle+Circle for from and to arrow. Can we specify our own arrow heads like I have shared in my screenshot or do we have to use the predefined ones?
You already did in your link template, didn’t you?
Yes, but basically what ever I have given in fromArrow is not taking effect… It’s just ignoring fromArrow part.
Did you have a question? If so, please explain thoroughly.
Yes Walter. Let me explain it. I have added from arrow head in my link template.
But after adding your code, fromArrow section of code has no effect.
I could not see the fromArrow circle in the graph.
myDiagram.linkTemplate =
$(GradientLink,
new go.Binding("startColor"),
new go.Binding("endColor"),
$(go.Shape, { strokeWidth: 2 }),
$(go.Shape, "Circle",
{ width: 6, height: 6, strokeWidth: 0 },
new go.Binding("fill", "arrowColor")),
$(go.Shape,
{
geometryString: "m 4,0 b 270 180 0 4 4", strokeWidth: 2,
segmentOrientation: go.Link.OrientAlong, segmentOffset: new go.Point(4, 0)
},
new go.Binding("stroke", "arrowColor")),
$(go.TextBlock,
{ segmentOffset: new go.Point(0, 11), segmentOrientation: go.Link.OrientUpright },
new go.Binding("text"))
);
and this model data:
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "pink" }
],
[
{ from: 1, to: 2, arrowColor: "orange" },
{ from: 1, to: 3, startColor: "red", endColor: "blue", text: "A-G" },
{ from: 2, to: 2 },
{ from: 3, to: 4 },
{ from: 4, to: 1, startColor: "green", endColor: "blue", text: "D-A" }
]);
produce this:
You may want to fiddle with the semi-circular shape, since I don’t know what you really want to show.
That will do Walter. Thanks a lot for your time and support.