As shown, how can you change the thickness of the link？Similarly, can link’s strokeDashArray be changed?
Page Not Found -- Northwoods Software.
How is the Inspector in this example implemented?
If you are using the DataInspector, and if there is a Binding on Shape.strokeWidth to “thickness”, the user can just enter a new number there to change the selected link’s path.
The complete implementation of both kinds of inspectors is right there in the extensions folder, including examples of how to provide custom value editors so that it is convenient for users to choose one of several dash arrays/patterns.
Yes,I am using the DataInspector,there is a Binding on Shape.strokeDashArray to “strokeDashArray”,But Shape. StrokeDashArray seems to be ineffective.
Code：
myDiagram.linkTemplateMap.add(“broken”,
(go.Link, {
toShortLength: 0,
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 3,
reshapable: true,
resegmentable: true,
relinkableFrom: true,
relinkableTo: true
},
(go.Shape, {
stroke: “red”,
strokeWidth: 1,
strokeDashArray:null,
},
new go.Binding(“strokeWidth”,“thickness”),
new go.Binding(“strokeDashArray”,“strokeDashArray”),
new go.Binding(“stroke”,“link_color”)),
$(go.TextBlock, {
editable: true,
alignment: new go.Spot(0.5,1,5,10),
font: “bold 8pt helvetica, bold arial, sans-serif”,
cursor: “pointer”
},
new go.Binding(“font”,“font”),
new go.Binding(“stroke”,“text_color”),
new go.Binding(“text”,“text”).makeTwoWay())));
var inspector = new Inspector(‘myInspectorDiv’,myDiagram,{
properties: {
“strokeDashArray”: {
show: Inspector.showIfLink,
type: ‘Array’
},
}
});
Result：
The extensions/Inspector.js functionality would need to be extended in order to support reading an Array of numbers, or just a list of numbers. You can do that yourself, since the complete implementation of the Inspector is right there.
OK, I have improved the DataInspector to handle more data types, including Arrays of numbers. This will be in the next release, 1.7.16, which I hope will come out later this week.
So for example if you link template has:
myDiagram.linkTemplate =
$(go.Link, . . .
$(go.Shape,
new go.Binding("strokeDashArray", "dashes")),
. . .);
Then when initializing the DataInspector properties you could include this property descriptor:
"dashes": { show: Inspector.showIfLink, type: 'arrayofnumber' }
This is great!I’m looking forward to the next release, 1.7.16.
Q1：Why Node can modify the location of TextBlock, but not Link?And the TextBlock of link can’t move position.I want Link to have id, too.
//铁塔Line_tower
var line_towerTemplate = $(go.Node, "Viewbox",……
$(go.TextBlock, {
editable: true,
_isNodeLabel: true,
alignment: new go.Spot(0.5,0,0,22),
cursor: "pointer"
},
new go.Binding("alignment","alignment",go.Spot.parse).makeTwoWay(go.Spot.stringify));
myDiagram.linkTemplateMap.add("broken", $(go.Link, {
……),
$(go.TextBlock, {
editable: true,
_isNodeLabel: true,
alignment: new go.Spot(0.5,1,5,10),
……
},
new go.Binding("alignment","align",go.Spot.parse).makeTwoWay(go.Spot.stringify));
var inspector = new Inspector('myInspectorDiv',myDiagram,{
properties: {
……
"alignment": {
show: Inspector.showIfNode,
type: 'point'
},
"align": {
show: Inspector.showIfLink,
type: 'point'
},
……
}
});
Q2：How can I save Link’s turning point?
new go.Binding("points").makeTwoWay()
Question 1:
Adds a GraphObject to the Panel’s list of elements at the specified index,but how do I determine the value of the index?Arbitrary setting?Or based on what?
Case 1:
myDiagram.toolManager.mouseMoveTools.insertAt(0, new NodeLabelDraggingTool());
myDiagram.toolManager.mouseMoveTools.insertAt(0, new LinkLabelDraggingTool());
Case 2:
myDiagram.toolManager.mouseMoveTools.insertAt(0, new NodeLabelDraggingTool());
myDiagram.toolManager.mouseMoveTools.insertAt(1, new LinkLabelDraggingTool());
Case 1 and Case 2 are just index differences, which means there are lists of different elements?In my opinion, they seem to be no different in functional display.
Question2：
in the version 1.7.16，
myDiagram.linkTemplate =
$(go.Link, . . .
$(go.Shape,
new go.Binding("strokeDashArray", "dashes")),
. . .);
the DataInspector properties
"dashes": { show: Inspector.showIfLink, type: 'arrayofnumber' }
Result：
This setting is not working.
First of all, does interactively changing the numbers for the Inspector’s “dashes” property actually change the appearance of the selected link path? It does for me using the exact same Binding and Inspector property description that you have.
But when I call myDiagram.model.toJson(), I don’t get the same output. Instead of a string I get an actual Array of numbers:
{"from":2, "to":2, "color":"#5e35b1", "text":"", "LinkComments":"", "dashes":[ 6,7 ]},
That’s why loading the model won’t work for you to restore the Shape.strokeDashArray for that link path.
So what’s the difference between calling myDiagram.model.toJson()?
How do I use JSON in GOJS?Are there any introductions?
function save() {
document.getElementById("mySavedModel").value = myDiagram.model.toJson();
myDiagram.isModified = false;
}
function load() {
myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
}
I always thought it was “type” that determines the output type， when I call myDiagram.model.toJson(), I don’t get the same output. Instead of an actual Array of numbers I get a string：
"dashes": {
show: Inspector.showIfLink,
type: 'arrayofnumber'
},Are you sure that your “solid” template has that binding of Shape.strokeDashArray?
I can’t explain why we are getting different behaviors.
Yes,my “dotted” ,“solid” and “broken” template have that binding of Shape.strokeDashArray
Code:
myDiagram.linkTemplateMap.add("dotted",
$(go.Link, {
toShortLength: 0,
routing: go.Link.Normal,
reshapable: true,
resegmentable: true,
relinkableFrom: true,
relinkableTo: true
},
new go.Binding("points").makeTwoWay(),
$(go.Shape, {
stroke: "rgba(0,0,0,1)",
strokeWidth: 1,
strokeDashArray: [5, 5],
},
new go.Binding("strokeWidth","thickness"),
new go.Binding("strokeDashArray","dashes"),//!!!!!!!!!!!!!!!!!!!
new go.Binding("stroke","link_color")),
$(go.TextBlock, {
editable: true,
_isNodeLabel: true,
cursor: "pointer"
},
new go.Binding("segmentOffset", "segmentOffset", go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding("font","font"),
new go.Binding("stroke","text_color"),
new go.Binding("text","text").makeTwoWay())));
var inspector = new Inspector('myInspectorDiv',myDiagram,{
properties: {
......
"dashes": {
show: Inspector.showIfLink,
type: 'arrayofnumber'
},
......
}
});OK, there are two separate problems: saving and loading models containing “dashes” information, and editing the “dashes” property in the Inspector.
If you manually edit the text of the saved model to include:
"dashes":[5,5],
Does loading the model correctly cause the link to be dashed?
Can you edit the numbers shown in the Inspector for the “dashes” property? And when you change focus, does the selected link change its appearance? (You might need to deselect in order to see the link.)
The selected link has not change its appearance.
Code：
myDiagram.linkTemplateMap.add("dotted",
$(go.Link, {
toShortLength: 0,
routing: go.Link.Normal,
reshapable: true,
resegmentable: true,
relinkableFrom: true,
relinkableTo: true
},
new go.Binding("points").makeTwoWay(),
$(go.Shape, {
stroke: "rgba(0,0,0,1)",
strokeWidth: 1//Delete strokeDashArray: [5, 5],
},
new go.Binding("strokeWidth","thickness"),
new go.Binding("strokeDashArray","dashes"),//!!!!!!!!!!!!!!!!!!!
new go.Binding("stroke","link_color")),
$(go.TextBlock, {
editable: true,
_isNodeLabel: true,
cursor: "pointer"
},
new go.Binding("segmentOffset", "segmentOffset", go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding("font","font"),
new go.Binding("stroke","text_color"),
new go.Binding("text","text").makeTwoWay())));
var inspector = new Inspector('myInspectorDiv',myDiagram,{
properties: {
......
"dashes": {
show: Inspector.showIfLink,
type: 'arrayofnumber'
},
......
}
});
"linkDataArray": [ {"category":"dotted", "from":-1, "to":-2, "fromPort":"io", "toPort":"io", "id":"1", "points":[-117,-110.17142857142858,227,-129.82857142857142], "key":"test", "text":"test", "font":"bold", "text_color":"#ff0000", "link_color":"#ff0080", "thickness":5, "dashes":"5,5", "segmentOffset":"-8.936759777468833 46.66986639898323", "LinkComments":"test"} ]
I suddenly found that not all types can be implemented, just like Angle and alignment seem to be converted to String by default.
"nodeDataArray": [ {"category":"line_tower", "text":"铁塔", "font":"bold 8pt helvetica, bold arial, sans-serif", "color":"#000", "key":-6, "id":-1, "loc":"-209.81915993417817 -106.37336933336505", "alignment":"0.5 0.5 57.14285714285717 50.37414965986396", "angle":125.36843355003816}]
"angle": {
show: Inspector.showIfNode,
type: 'number',
defaultValue: 0
},
"alignment": {
show: Inspector.showIfNode,
type: 'Point'
},Try this sample:
http://gojs.net/temp/linkInspector.html
Select a link and see if changing the “dashes” property works for you. I just tested it in five different browsers on two different platforms and it worked on each one.
By the way, note that you should not use a comma, “,”, to separate the numbers in the Inspector for a sequence of numbers.
Nor between two numbers when Inspecting a property value that is of type go.Point or go.Size.