BlackSquare is showing when drag the link in diagram

#1

i have seen solution is to initialize toArrow default value, how can i do that in angular?

this.dia.linkTemplate =
        $(go.Link,  // the whole link panel
         { selectable: true, selectionAdornmentTemplate: linkSelectionAdornmentTemplate },
          { relinkableFrom: true, relinkableTo: true, reshapable: true },
          {
            routing: go.Link.AvoidsNodes,
            curve: go.Link.JumpOver,
            corner: 5,
            toShortLength: 4
          },
          new go.Binding("points").makeTwoWay(),
          $(go.Shape,  // the link path shape
            { isPanelMain: true, strokeWidth: 2 }),
          $(go.Shape, new go.Binding("toArrow", "toArrow")),
            $(go.Shape,  new go.Binding("fromArrow", "fromArrow")),// the arrowhead
          $(go.Panel, "Auto",
            new go.Binding("visible", "isSelected").ofObject(),
            $(go.Shape, "RoundedRectangle",  // the link shape
              { fill: "#F8F8F8", stroke: null }),
            $(go.TextBlock,
              {
                textAlign: "center",
                font: "10pt helvetica, arial, sans-serif",
                stroke: "#919191",
                margin: 2,
                minSize: new go.Size(10, NaN),
                editable: true
              },
              new go.Binding("text").makeTwoWay())
          )
        );

Screen Shot 2020-05-22 at 12.50.57 PM
Screen Shot 2020-05-22 at 12.50.57 PM714×428 22.4 KB

#2

You need to specify the default value for Shape.toArrow (or Shape.fromArrow) if you want that shape to be considered an arrowhead. Values such as “Standard” or “OpenTriangle” are commonplace. See https://gojs.net/latest/samples/arrowheads.html.

Due to your data Binding, if you do not provide a value on the link data object, data.toArrow, or if the value is not a proper arrowhead name, then the Shape.toArrow property won’t get set, so it won’t be an arrowhead, and it will appear with its default values. That includes getting a 100x100 size, which we do intentionally so that developers can see that they didn’t initialize something about the Shape.