Gap between link arrowhead and port


#1

Hi, walter

I too got same problem ,
I am using chevron as port and StretchedChevron as to port, but there is a gap between them

Capture6

please help me…

Thanks in advance!


Create GoLink with FromPort ToPort property
#2

The topic where you posted is about GoDiagram, but I assume you are asking about GoJS, so I have moved it to be a separate topic.

On the arrowhead Shape, set segmentOffset: new go.Point(10, 0) after setting toArrow. You may need to use a different X value for the offset to get the visual effect that you want – I don’t know how your arrowhead and port are defined, so I am just guessing about the distance.


#3

Code for link:

    const link: go.Link =
        $(go.Link,  // defined below
            {
                routing: go.Link.AvoidsNodes,
                corner: 4,
                curve: go.Link.Bezier,
                reshapable: true,
                resegmentable: true,
                relinkableFrom: true,
                relinkableTo: true
            },
            // new go.Binding('points').makeTwoWay(),
            $(go.Shape),
            $(go.Shape,
                {
                    toArrow: 'StretchedChevron',
                    segmentOffset: new go.Point(9, 0),
                    scale: 2,
                    stroke: null,
                    strokeWidth: 0,
                    // desiredSize: new go.Size(50, 50),
                    fill: '#8b8b8b'
                },
            ));

code for port:

 // the Panel holding the left port elements, which are themselves Panels,
    // created for each item in the itemArray, bound to data.leftArray
    $(go.Panel, 'Vertical',
      new go.Binding('itemArray', 'leftArray'),
      {
        row: 1, column: 0,
        itemTemplate:
          $(go.Panel,
            {

              _side: 'left',  // internal property to make it easier to tell which side it's on
              fromSpot: go.Spot.Left, toSpot: go.Spot.Left,
              fromLinkable: true, toLinkable: true, cursor: 'pointer',
              contextMenu: portMenu
            },
            new go.Binding('portId', 'portId'),
            $(go.Shape, 'Chevron',
              {
                // tslint:disable-next-line:max-line-length
                // geometryString: 'F M15.7965317,46.4822512 C20.9310466,42.4618681 24.2426737,36.1266639 24.2426737,29 C24.2426737,21.8733361 20.9310466,15.5381319 15.7965317,11.5177488 L15.7965317,5.5 L28.7965317,5.5 L28.7965317,52.5 L15.7965317,52.5 L15.7965317,46.4822512 Z',
                stroke: null, strokeWidth: 0,
                desiredSize: portSize,
                fill: '#8b8b8b',
                margin: new go.Margin(1, 0)
              },
              new go.Binding('fill'))
          )  // end itemTemplate
      }
    ),  // end Vertical Panel

and the image after setting the segmentOffset

Capture7