Getting rectangle image

GoJS
1

image
image1529×617 44.9 KB

I am getting the gray rectangle once I select the category and its gets invisible once I select to and from arrow.
image

We have link template defined as below

myDiagram.linkTemplateMap.add("Dotted", 
        $(go.Link,
            {
                layerName: "Background",                
                corner: 15,
                reshapable: true,
                resegmentable: true,
                fromSpot: go.Spot.RightSide,
                toSpot: go.Spot.LeftSide
            },
            new go.Binding("routing", "connector", connectorFunc),            
            new go.Binding("fromSpot", "fromSpot", go.Spot.parse),
            new go.Binding("toSpot", "toSpot", go.Spot.parse),
            new go.Binding("points").makeTwoWay(),            
            $(go.Shape, { strokeDashArray: [4, 2] }, new go.Binding("stroke", "color", colorFunc)),
            $(go.Shape, { fill: 'gray', stroke: null },
                new go.Binding("fromArrow", "fromarrowOption", fromarrowFunc)
            ),
            $(go.Shape, { fill: 'gray', stroke: null },
                new go.Binding("toArrow", "toarrowOption", toarrowFunc),
            )                
        ));

We does not like to have this rectangle box.

2

You didn’t include the JSON data for the link. My guess is that you didn’t specify a data.fromarrowOption or data.toarrowOption in the link data object in the model, so those two Shapes were treated as normal labels on the link.

Since you hadn’t defined the template something like:

. . .,
$(go.Shape, { fromArrow: "", fill: "gray", stroke: null },
    . . .),
$(go.Shape, { toArrow: "", fill: "gray", stroke: null },
    . . .)

the Shapes are regular labels instead of arrowheads. See the documentation: Shape | GoJS API

The default is “None”, which means that this Shape is not an arrowhead, causing it to be the default Shape, a large filled Rectangle. If you want to have an arrowhead Shape but sometimes not show an arrowhead, you can set or bind the GraphObject.visible property, or you can set or bind this “toArrow” property to be the empty string. The arrowhead named “”, an empty string, will display as nothing.

3

Thanks walter.

I got it.
I had one more query standard option for arrow is working fine but some options are not working as expected like OpenTriangle(does not render corresponding image arrow) . Also circlelineFork, StrechedDiamond is to small.
Am I missing something?

{ “class”: “GraphLinksModel”,
“nodeDataArray”: [
{“icon”:“Transformer”,“text”:“Transformer”,“key”:-4,“pos”:“-30 -192”,“color”:“green”,“caption”:“”,“imgsrc”:“”},
{“icon”:“Inverter”,“text”:“Invertor 1”,“key”:-1,“pos”:“-140 -67”,“caption”:“”,“imgsrc”:“”},
{“icon”:“Inverter”,“text”:“Invertor 2”,“key”:-3,“pos”:“-140 22”,“caption”:“”,“imgsrc”:“”},
{“icon”:“Inverter”,“text”:“Invertor 3”,“key”:-5,“pos”:“90 -67”,“caption”:“”,“imgsrc”:“”},
{“icon”:“Inverter”,“text”:“Invertor 4”,“key”:-6,“pos”:“70 18”,“caption”:“”,“imgsrc”:“”},
{“text”:“Intermediates”,“key”:-7,“pos”:“-30 98”},
{“icon”:“Battery”,“text”:“Battery 1”,“key”:-2,“pos”:“260 -69”,“caption”:“”,“imgsrc”:“”}
],
“linkDataArray”: [
{“from”:-4,“to”:-7,“points”:[-30,-178,-30,-168,-30,-40,-30,-40,-30,88,-30,98],“fromSpot”:“Bottom”,“toSpot”:“Top”,“color”:“lightblue”,“category”:“Solid”,“toarrowOption”:“”,“fromarrowOption”:“”},
{“from”:-3,“to”:-6,“points”:[-120,29,-110,29,-35,29,-35,25,40,25,50,25],“category”:“Solid”,“toarrowOption”:“”,“fromarrowOption”:“”},
{“from”:-1,“to”:-5,“points”:[-120,-60,-110,-60,-25,-60,-25,-60,60,-60,70,-60],“category”:“Solid”,“toarrowOption”:“OpenTriangle”,“fromarrowOption”:“OpenTriangle”},
{“from”:-5,“to”:-2,“points”:[110,-60,120,-60,175,-60,175,-62,230,-62,240,-62],“category”:“Solid”,“toarrowOption”:“”,“fromarrowOption”:“”}
]}

4

What do the binding conversion functions fromarrowFunc and toarrowFunc do?

5

Hi Walter,

I had removed the stroke: null and everything works fine…

Thanks
Pankaj