When I try to bind the “OpenTriangle” arrow head, it does not render. I can see it in the list of shapes when dumping to the console:
console.log(go.Shape.getArrowheadGeometries());
Strangely, some shapes render like Chevron and BackwardTriangle just fine in the same code. Is there something special about ArrowheadGeometries that I am not aware of?
That should be OK. What is your binding?
new go.Binding("points"),
$(go.Shape, // the link path shape
{ isPanelMain: true, strokeWidth: 2 }, new go.Binding("strokeDashArray", "dash")), //CCB - added custom binding for line types based on the link model
$(go.Shape, // the arrowhead
{ stroke: null }, new go.Binding("toArrow", "endconnectshape")),
[
// the Palette also has a disconnected Link, which the user can drag-and-drop
// CCB - customized the model for connector end shapes and dashes
{ uuid: null, endconnectshape:"Triangle", dash:[], points: new go.List(/*go.Point*/).addAll([new go.Point(0, 0), new go.Point(40, 10)]) },
{ uuid: null, endconnectshape: "Circle", dash: [5,10], points: new go.List(/*go.Point*/).addAll([new go.Point(0, 0), new go.Point(40, 10)]) },
{ uuid: null, endconnectshape: "BackwardTriangle", dash: [5,10], points: new go.List(/*go.Point*/).addAll([new go.Point(0, 0), new go.Point(40, 10)]) },
{ uuid: null, endconnectshape: "", dash: [2,7], points: new go.List(/*go.Point*/).addAll([new go.Point(0, 0), new go.Point(40, 10)]) }
]
When I inspected the array, it looked like some ArrowheadGeometries had a key referring to itself and others had a key referring to another key. I suspect the problem is with geometries referring to other keys.
When I use this template:
myDiagram.linkTemplate =
$(go.Link,
$(go.Shape),
$(go.Shape, { toArrow: "Standard" },
new go.Binding("toArrow"))
);
and execute this transaction:
myDiagram.model.commit(m => {
m.linkDataArray.forEach(d => m.set(d, "toArrow", d.toArrow === "Circle" ? "OpenTriangle" : "Circle"));
});
everything works the way that I would expect.
I don’t know why you are looking at the results of Shape.getArrowheadGeometries, other than to check to make sure that “OpenTriangle” is a valid name for an arrowhead.
35 out of 80 of the arrowheads do not render. I looped all of them similar to the sample and load them into the linkDataArray. I am referencing the Arrowheads.js file in my project:
<script src="../js/Arrowheads.js"></script>
function testArrowHeads() {
var arrowheads = go.Shape.getArrowheadGeometries().toKeySet().toArray();
console.log(arrowheads);
var space = 0;
for (var i = 0; i < arrowheads.length; i++) {
myDiagram.model.linkDataArray.push({ uuid: null, endconnectshape: arrowheads[i], dash: [5,10], points: new go.List(/*go.Point*/).addAll([new go.Point(0, space), new go.Point(100, space)]), text: arrowheads[i] });
space = space + 20;
}
save();
}
You should not be loading that file – those arrowhead definitions are predefined.
Your code is modifying the GraphLinksModel.linkDataArray without calling model methods. That is probably wrong, though I do not know what save() does.
Watler, the behavior is the same regardless of whether or not I load Arrowheads.js. I have removed the dependency to simplify.
The testArrowHeads() function updates the model directly out of convenience. I am using the draggable link sample. Once I serialize the model to a div, then I use the load() function in the sample to load the model and test the rendering.
{ "class": "GraphLinksModel",
"linkFromPortIdProperty": "fromPort",
"linkToPortIdProperty": "toPort",
"modelData": {"position":"-5 -5"},
"nodeDataArray": [],
"linkDataArray": [
{"uuid":null, "endconnectshape":"Standard", "dash":[ 5,10 ], "points":[0,0,100,0], "text":"Standard"},
{"uuid":null, "endconnectshape":"Triangle", "dash":[ 5,10 ], "points":[0,20,100,20], "text":"Triangle"},
{"uuid":null, "endconnectshape":"Circle", "dash":[ 5,10 ], "points":[0,40,100,40], "text":"Circle"},
{"uuid":null, "endconnectshape":"Backward", "dash":[ 5,10 ], "points":[0,60,100,60], "text":"Backward"},
{"uuid":null, "endconnectshape":"BackwardTriangle", "dash":[ 5,10 ], "points":[0,80,100,80], "text":"BackwardTriangle"},
{"uuid":null, "endconnectshape":"Boomerang", "dash":[ 5,10 ], "points":[0,100,100,100], "text":"Boomerang"},
{"uuid":null, "endconnectshape":"BackwardBoomerang", "dash":[ 5,10 ], "points":[0,120,100,120], "text":"BackwardBoomerang"},
{"uuid":null, "endconnectshape":"SidewaysV", "dash":[ 5,10 ], "points":[0,140,100,140], "text":"SidewaysV"},
{"uuid":null, "endconnectshape":"BackwardV", "dash":[ 5,10 ], "points":[0,160,100,160], "text":"BackwardV"},
{"uuid":null, "endconnectshape":"OpenTriangle", "dash":[ 5,10 ], "points":[0,180,100,180], "text":"OpenTriangle"},
{"uuid":null, "endconnectshape":"BackwardOpenTriangle", "dash":[ 5,10 ], "points":[0,200,100,200], "text":"BackwardOpenTriangle"},
{"uuid":null, "endconnectshape":"OpenTriangleLine", "dash":[ 5,10 ], "points":[0,220,100,220], "text":"OpenTriangleLine"},
{"uuid":null, "endconnectshape":"BackwardOpenTriangleLine", "dash":[ 5,10 ], "points":[0,240,100,240], "text":"BackwardOpenTriangleLine"},
{"uuid":null, "endconnectshape":"OpenTriangleTop", "dash":[ 5,10 ], "points":[0,260,100,260], "text":"OpenTriangleTop"},
{"uuid":null, "endconnectshape":"BackwardOpenTriangleTop", "dash":[ 5,10 ], "points":[0,280,100,280], "text":"BackwardOpenTriangleTop"},
{"uuid":null, "endconnectshape":"OpenTriangleBottom", "dash":[ 5,10 ], "points":[0,300,100,300], "text":"OpenTriangleBottom"},
{"uuid":null, "endconnectshape":"BackwardOpenTriangleBottom", "dash":[ 5,10 ], "points":[0,320,100,320], "text":"BackwardOpenTriangleBottom"},
{"uuid":null, "endconnectshape":"HalfTriangleTop", "dash":[ 5,10 ], "points":[0,340,100,340], "text":"HalfTriangleTop"},
{"uuid":null, "endconnectshape":"BackwardHalfTriangleTop", "dash":[ 5,10 ], "points":[0,360,100,360], "text":"BackwardHalfTriangleTop"},
{"uuid":null, "endconnectshape":"HalfTriangleBottom", "dash":[ 5,10 ], "points":[0,380,100,380], "text":"HalfTriangleBottom"},
{"uuid":null, "endconnectshape":"BackwardHalfTriangleBottom", "dash":[ 5,10 ], "points":[0,400,100,400], "text":"BackwardHalfTriangleBottom"},
{"uuid":null, "endconnectshape":"ForwardSemiCircle", "dash":[ 5,10 ], "points":[0,420,100,420], "text":"ForwardSemiCircle"},
{"uuid":null, "endconnectshape":"BackwardSemiCircle", "dash":[ 5,10 ], "points":[0,440,100,440], "text":"BackwardSemiCircle"},
{"uuid":null, "endconnectshape":"Feather", "dash":[ 5,10 ], "points":[0,460,100,460], "text":"Feather"},
{"uuid":null, "endconnectshape":"BackwardFeather", "dash":[ 5,10 ], "points":[0,480,100,480], "text":"BackwardFeather"},
{"uuid":null, "endconnectshape":"DoubleFeathers", "dash":[ 5,10 ], "points":[0,500,100,500], "text":"DoubleFeathers"},
{"uuid":null, "endconnectshape":"BackwardDoubleFeathers", "dash":[ 5,10 ], "points":[0,520,100,520], "text":"BackwardDoubleFeathers"},
{"uuid":null, "endconnectshape":"TripleFeathers", "dash":[ 5,10 ], "points":[0,540,100,540], "text":"TripleFeathers"},
{"uuid":null, "endconnectshape":"BackwardTripleFeathers", "dash":[ 5,10 ], "points":[0,560,100,560], "text":"BackwardTripleFeathers"},
{"uuid":null, "endconnectshape":"ForwardSlash", "dash":[ 5,10 ], "points":[0,580,100,580], "text":"ForwardSlash"},
{"uuid":null, "endconnectshape":"BackSlash", "dash":[ 5,10 ], "points":[0,600,100,600], "text":"BackSlash"},
{"uuid":null, "endconnectshape":"DoubleForwardSlash", "dash":[ 5,10 ], "points":[0,620,100,620], "text":"DoubleForwardSlash"},
{"uuid":null, "endconnectshape":"DoubleBackSlash", "dash":[ 5,10 ], "points":[0,640,100,640], "text":"DoubleBackSlash"},
{"uuid":null, "endconnectshape":"TripleForwardSlash", "dash":[ 5,10 ], "points":[0,660,100,660], "text":"TripleForwardSlash"},
{"uuid":null, "endconnectshape":"TripleBackSlash", "dash":[ 5,10 ], "points":[0,680,100,680], "text":"TripleBackSlash"},
{"uuid":null, "endconnectshape":"Fork", "dash":[ 5,10 ], "points":[0,700,100,700], "text":"Fork"},
{"uuid":null, "endconnectshape":"BackwardFork", "dash":[ 5,10 ], "points":[0,720,100,720], "text":"BackwardFork"},
{"uuid":null, "endconnectshape":"LineFork", "dash":[ 5,10 ], "points":[0,740,100,740], "text":"LineFork"},
{"uuid":null, "endconnectshape":"BackwardLineFork", "dash":[ 5,10 ], "points":[0,760,100,760], "text":"BackwardLineFork"},
{"uuid":null, "endconnectshape":"CircleFork", "dash":[ 5,10 ], "points":[0,780,100,780], "text":"CircleFork"},
{"uuid":null, "endconnectshape":"BackwardCircleFork", "dash":[ 5,10 ], "points":[0,800,100,800], "text":"BackwardCircleFork"},
{"uuid":null, "endconnectshape":"CircleLineFork", "dash":[ 5,10 ], "points":[0,820,100,820], "text":"CircleLineFork"},
{"uuid":null, "endconnectshape":"BackwardCircleLineFork", "dash":[ 5,10 ], "points":[0,840,100,840], "text":"BackwardCircleLineFork"},
{"uuid":null, "endconnectshape":"Block", "dash":[ 5,10 ], "points":[0,860,100,860], "text":"Block"},
{"uuid":null, "endconnectshape":"StretchedDiamond", "dash":[ 5,10 ], "points":[0,880,100,880], "text":"StretchedDiamond"},
{"uuid":null, "endconnectshape":"Diamond", "dash":[ 5,10 ], "points":[0,900,100,900], "text":"Diamond"},
{"uuid":null, "endconnectshape":"Chevron", "dash":[ 5,10 ], "points":[0,920,100,920], "text":"Chevron"},
{"uuid":null, "endconnectshape":"StretchedChevron", "dash":[ 5,10 ], "points":[0,940,100,940], "text":"StretchedChevron"},
{"uuid":null, "endconnectshape":"NormalArrow", "dash":[ 5,10 ], "points":[0,960,100,960], "text":"NormalArrow"},
{"uuid":null, "endconnectshape":"X", "dash":[ 5,10 ], "points":[0,980,100,980], "text":"X"},
{"uuid":null, "endconnectshape":"TailedNormalArrow", "dash":[ 5,10 ], "points":[0,1000,100,1000], "text":"TailedNormalArrow"},
{"uuid":null, "endconnectshape":"DoubleTriangle", "dash":[ 5,10 ], "points":[0,1020,100,1020], "text":"DoubleTriangle"},
{"uuid":null, "endconnectshape":"BigEndArrow", "dash":[ 5,10 ], "points":[0,1040,100,1040], "text":"BigEndArrow"},
{"uuid":null, "endconnectshape":"ConcaveTailArrow", "dash":[ 5,10 ], "points":[0,1060,100,1060], "text":"ConcaveTailArrow"},
{"uuid":null, "endconnectshape":"RoundedTriangle", "dash":[ 5,10 ], "points":[0,1080,100,1080], "text":"RoundedTriangle"},
{"uuid":null, "endconnectshape":"SimpleArrow", "dash":[ 5,10 ], "points":[0,1100,100,1100], "text":"SimpleArrow"},
{"uuid":null, "endconnectshape":"AccelerationArrow", "dash":[ 5,10 ], "points":[0,1120,100,1120], "text":"AccelerationArrow"},
{"uuid":null, "endconnectshape":"BoxArrow", "dash":[ 5,10 ], "points":[0,1140,100,1140], "text":"BoxArrow"},
{"uuid":null, "endconnectshape":"TriangleLine", "dash":[ 5,10 ], "points":[0,1160,100,1160], "text":"TriangleLine"},
{"uuid":null, "endconnectshape":"CircleEndedArrow", "dash":[ 5,10 ], "points":[0,1180,100,1180], "text":"CircleEndedArrow"},
{"uuid":null, "endconnectshape":"DynamicWidthArrow", "dash":[ 5,10 ], "points":[0,1200,100,1200], "text":"DynamicWidthArrow"},
{"uuid":null, "endconnectshape":"EquilibriumArrow", "dash":[ 5,10 ], "points":[0,1220,100,1220], "text":"EquilibriumArrow"},
{"uuid":null, "endconnectshape":"FastForward", "dash":[ 5,10 ], "points":[0,1240,100,1240], "text":"FastForward"},
{"uuid":null, "endconnectshape":"Kite", "dash":[ 5,10 ], "points":[0,1260,100,1260], "text":"Kite"},
{"uuid":null, "endconnectshape":"HalfArrowTop", "dash":[ 5,10 ], "points":[0,1280,100,1280], "text":"HalfArrowTop"},
{"uuid":null, "endconnectshape":"HalfArrowBottom", "dash":[ 5,10 ], "points":[0,1300,100,1300], "text":"HalfArrowBottom"},
{"uuid":null, "endconnectshape":"OpposingDirectionDoubleArrow", "dash":[ 5,10 ], "points":[0,1320,100,1320], "text":"OpposingDirectionDoubleArrow"},
{"uuid":null, "endconnectshape":"PartialDoubleTriangle", "dash":[ 5,10 ], "points":[0,1340,100,1340], "text":"PartialDoubleTriangle"},
{"uuid":null, "endconnectshape":"LineCircle", "dash":[ 5,10 ], "points":[0,1360,100,1360], "text":"LineCircle"},
{"uuid":null, "endconnectshape":"DoubleLineCircle", "dash":[ 5,10 ], "points":[0,1380,100,1380], "text":"DoubleLineCircle"},
{"uuid":null, "endconnectshape":"TripleLineCircle", "dash":[ 5,10 ], "points":[0,1400,100,1400], "text":"TripleLineCircle"},
{"uuid":null, "endconnectshape":"CircleLine", "dash":[ 5,10 ], "points":[0,1420,100,1420], "text":"CircleLine"},
{"uuid":null, "endconnectshape":"DiamondCircle", "dash":[ 5,10 ], "points":[0,1440,100,1440], "text":"DiamondCircle"},
{"uuid":null, "endconnectshape":"PlusCircle", "dash":[ 5,10 ], "points":[0,1460,100,1460], "text":"PlusCircle"},
{"uuid":null, "endconnectshape":"OpenRightTriangleTop", "dash":[ 5,10 ], "points":[0,1480,100,1480], "text":"OpenRightTriangleTop"},
{"uuid":null, "endconnectshape":"OpenRightTriangleBottom", "dash":[ 5,10 ], "points":[0,1500,100,1500], "text":"OpenRightTriangleBottom"},
{"uuid":null, "endconnectshape":"Line", "dash":[ 5,10 ], "points":[0,1520,100,1520], "text":"Line"},
{"uuid":null, "endconnectshape":"DoubleLine", "dash":[ 5,10 ], "points":[0,1540,100,1540], "text":"DoubleLine"},
{"uuid":null, "endconnectshape":"TripleLine", "dash":[ 5,10 ], "points":[0,1560,100,1560], "text":"TripleLine"},
{"uuid":null, "endconnectshape":"PentagonArrow", "dash":[ 5,10 ], "points":[0,1580,100,1580], "text":"PentagonArrow"}
]}
There is clearly something unique about the arrowheads themselves otherwise I would expect consistent behavior. This feels like I may have stumbled into a bug. I am happy to send you my source so you can debug on your end. I am not comfortable posting here in public.
Oh, so you were saving then loading the modified model. OK.
I’ll experiment as soon as I get a chance.
OK, the problem is that you set the Shape.stroke of the arrowhead shape to null. That means if the Geometry doesn’t have any filled areas, you don’t see anything.
Remove { stroke: null } from your link template, and you see:
Brilliant. I knew if we got enough clues, we could find it. Love this forum!
