myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{ toShortLength: 4 },
{
curve: go.Link.Bezier,
adjusting: go.Link.Stretch,
reshapable: true, relinkableFrom: true, relinkableTo: true,
toShortLength: 3
},
{
doubleClick: function(e, obj) {
e.diagram.select(obj.part);
}
},
new go.Binding("points").makeTwoWay(),
new go.Binding("curviness"),
$(go.Shape, // the link shape
{ strokeWidth: 1.5 },
new go.Binding('stroke', 'progress', function(progress) {
return progress ? "red" /* arrow line color */ : "orange";
}),
new go.Binding('strokeWidth', 'yellow', function(yellow) {
return yellow ? 2.5 : 1.5;
}),
// the Shape.stroke color depends on whether Link.isHighlighted is true
new go.Binding("stroke", "isHighlighted", function(h) { return h ? "red" : "black"; })
.ofObject(),
// the Shape.strokeWidth depends on whether Link.isHighlighted is true
new go.Binding("strokeWidth", "isHighlighted", function(h) { return h ? 3 : 1; })
.ofObject()),
$(go.Shape,
{ toArrow: "Standard", strokeWidth: 0 },
// the Shape.fill color depends on whether Link.isHighlighted is true
new go.Binding("fill", "isHighlighted", function(h) { return h ? "red" : "black"; })
.ofObject())
),
$(go.Shape, // the arrowhead
{ toArrow: "standard", stroke: null },
new go.Binding('fill', 'progress', function(progress) {
return progress ? "red" /* arrow head color */ : 'grey';
})),
$(go.Panel, "Auto",
$(go.Shape, // the label background, which becomes transparent around the edges
{
fill: $(go.Brush, "Radial",
{ 0: "rgb(0, 245, 245)", 0.7: "rgb(0, 245, 245)", 1: "rgba(0, 245, 245, 0)" }), //hightlight backgroud 4 line
stroke: null
}),
$(go.TextBlock, "transition", // the label text
{
textAlign: "center",
font: "9pt helvetica, arial, sans-serif",
margin: 4,
editable: true // enable in-place editing
},
// editing the text automatically updates the model data
new go.Binding("text").makeTwoWay())
)
It would help if you formatted your code nicely. Surround your code with lines consisting of only triple backquotes. “```” Then indent and space well.
I’m sorry, but I do not understand what it is that you want. It’s good that you gave the relevant code, but you didn’t show a small screenshot with the current results and then another screenshot showing what you wanted instead. For behaviors, it’s best to have both before and after screenshots.
Clicking on a selectable link will automatically select it, so you don’t need to do that.
You have multiple Bindings targeting the same property, so they might be conflicting. Although that depends on your usage – they don’t have to conflict.
You have two “to” arrowhead Shapes of the same type. That’s unusual.
sorry about my bad question and snippet code. Forget about my snippet code, let me clarify my question…
Now i want to develop state chart. The things is i want to change link to 3 different color from node A to node B as example when i click on that link (not at the node). Based in the documentation, i found link color change to red after click at the node highlight nodes and link so is there possible to do so? if can please provide me any reference? if cant? please suggest another way to do so…Thank you for your response, really appreciate
I do not understand the 3 colors that you want. Did you want to show the link’s path in three colors simultaneously? If not, under what conditions should each color be shown?
the color change under conditions,
as example Node A have three link to Node B, so i can click link number 1 and it change blue color, double click link number 2 it change red and for link number 3 by default…is there possible? or have another way to do it?
$(go.Link,
{
click: function(e, link) {
e.diagram.commit(function(diag) { link.path.stroke = "royalblue"; });
},
doubleClick: function(e, link) {
e.diagram.commit(function(diag) { link.path.stroke = "red"; });
},
mouseHover: function(e, link) {
e.diagram.commit(function(diag) { link.path.stroke = "black"; });
}
},
. . .
thank you very much for the code reference, Just try to my code, its work… thank you for make my day
such a great go js forum
hai, i facing problem, which is after the link color changed, then i click save button and load, the color back to default
may you provide me reference or a way to do? thank for reading and response
Add a Binding for the Shape.stroke property.
Either make it a TwoWay Binding if you want to modify the Shape.stroke in your code, or leave it as a OneWay Binding and have the click event handlers modify the link.data property by calling Model.set.
based on the documentation, i try to make two-way data binding but its does not work, may u please check my code below…
https://gojs.net/latest/intro/dataBinding.html
myDiagram.linkTemplate = $(
go.Link, // the whole link panel
{
curve: go.Link.Bezier,
adjusting: go.Link.Stretch,
reshapable: true,
relinkableFrom: true,
relinkableTo: true,
toShortLength: 3,
},
{
click: function (e, link) {
e.diagram.commit(function (diag) {
link.path.stroke = "royalblue";
});
},
doubleClick: function (e, link) {
e.diagram.commit(function (diag) {
link.path.stroke = "red";
});
},
mouseHover: function (e, link) {
e.diagram.commit(function (diag) {
link.path.stroke = "green";
});
},
},
new go.Binding("points").makeTwoWay(),
new go.Binding("curviness"),
$(
go.Shape, // the link shape
{ strokeWidth: 1.5 },
new go.Binding("stroke", "progress", function (diag).makeTwoWay(), {
return diag ? "#52ce60" /* green */ : "black";
}),
new go.Binding("strokeWidth", "progress", function (diag).makeTwoWay(), {
return diag ? 2.5 : 1.5;
})
new go.Binding("strokeWidth", "progress", function (diag).makeTwoWay(), {
return diag ? 2.5 : 1.5;
})
),
$(
go.Shape, // the arrowhead
{ toArrow: "standard", stroke: null },
new go.Binding("fill", "progress", function (progress) {
return progress ? "#52ce60" /* green */ : "black";
})
),
$(
go.Panel,
"Auto",
$(
go.Shape, // the label background, which becomes transparent around the edges
{
fill: $(go.Brush, "Radial", {
0: "rgb(245, 245, 245)",
0.7: "rgb(245, 245, 245)",
1: "rgba(245, 245, 245, 0)",
}),
stroke: null,
}
),
sorry my mistake, `
.makeTwoWay()
should place at the end of a
go.Binding()
`
i have doubt in mycode, can u please check my code? thank you
If you do not understand TwoWay bindings, GoJS Data Binding -- Northwoods Software, I suggest that you not use them.
Instead, implement the regular (OneWay) binding from some data property value to GraphObject property value, and change your click event handlers to modify the link data object by calling Model | GoJS API in a transaction.
$(go.Link,
{
click: function(e, link) {
e.diagram.model.commit(function(m) {
m.set(link.data, "progress", true);
}, "clicked");
},
...
},
$(go.Shape,
new go.Binding("stroke", "progress",
function(p) { return p ? "green" : "black"; }),
...),
...
)
You might want data.progress not to be a boolean but have more than two possible values, corresponding to three colors in this case.
great! Thank you for you help…