Bind toArrow with the arrowheads array

GoJS
1

Hi There,

I am new to GOJS. All i need tis to bind the arrowheads to the toArrow property inspector and change it from Text to Enum/dropdown. please see the code below.

Your help is highly appreciated.
Alpheus

var arrowheads = go.Shape.getArrowheadGeometries().toKeySet().toArray();
if (arrowheads.length % 2 === 1) arrowheads.push(""); // make sure there’s an even number

// create all of the link data, two arrowheads per link
var linkdata = [];
var i = 0;

for (var i = 0; i < arrowheads.length; i++) {
linkdata.push(arrowheads[i]);
}

//Change
go.Shape._inspectedProperties = {
“toArrow”: {
type: “String”,
defaultValue: “None”
}}

//To something like this
go.Shape._inspectedProperties = {
“toArrow”: {
type: “Enum”,
enumValues: [linkdata],
defaultValue: linkdata[0]
}}

2

It would be great if there was something like this
“toArrow”: {
type: “Enum”,
enumValues: [go.Link.Shape.Standard, go.Link.Shape.Triangle, go.Link.Shape.Boomerang, go.Link.Shape.Triangle],
defaultValue: go.Link.Shape.Standard
}

3

The data inspector, Data Inspector, includes support for letting the user select from an Array of choices.

4

Thanks Walter, I completely missed that one. Nice one :)

5

Hi Walter, one more question. Does the debug inspector not allow the adding of an array to a dropdown?

6

We stopped working on the DebugInspector.js code a long time ago. People were complaining that it was too complicated to understand and extend.

7

Thanks Walter, I got the drop downs working but the links are affected in that they have a square box when linking two nodes for the first time. they only disappear when I select the toArrow and fromArrow properties. I am not sure what is happening. please see code and picture below:

var sequenceLinkTemplate =
$(go.Link,
{
routing: go.Link.AvoidsNodes, curve: go.Link.JumpOver, corner: 10,
reshapable: true, relinkableFrom: true, relinkableTo: true, toEndSegmentLength: 20
},
new go.Binding(“points”).makeTwoWay(),

        $(go.Shape,  
            new go.Binding("fromArrow", "fromArrow")),
        $(go.Shape,  
            new go.Binding("toArrow", "toArrow")),
        $(go.Shape,
            { toArrow: "Standard", stroke: null },
            new go.Binding("fill", "color")),
        
        $(go.TextBlock,                       
            new go.Binding("text", "text"))
    );

8

You need to provide an initial value for Shape.fromArrow and Shape.toArrow.

Also, do you really want to have two “to” arrowhead shapes for each link?

9

That helped a lot thanks Walter

10

I"m new to GOJS I’m also facing Blakcsqare issue , where should i initialize initial value for Shape.fromArrow and Shape.toArrow . please post the sample code

11

https://gojs.net/latest/intro/linkLabels.html