Link - fromArrow propperty combined with geometry

GoJS
1

Hello,

I’m stuck on some design task. I tried to implement a fromArrow shape. The result is as shown below:

image
image530×584 12 KB

As you can see, the design is not quite perfect. The problem is I need the square to be a circle.

Here is my definition of that link:

this.diagram.linkTemplateMap.add('Standard',
      $(go.Link,
        {
          routing: go.Link.Normal,
          curve: go.Link.Bezier,
          reshapable: true,
          resegmentable: true,
          selectionAdorned: false,
          selectable: true,
          isLayoutPositioned: false,
          isTreeLink: false,
          curviness: -35,
          cursor: 'pointer',
          adjusting: go.Link.Scale,
        },
        new go.Binding('points', 'points', (data) => {
          return setPoints(data)
        }).makeTwoWay(),
        $(go.Shape,
          {
            stroke: 'grey',
            strokeWidth: 3,
            strokeDashArray: [5, 5],
          },
        ),
        $(go.Shape,
          {
            fromArrow: 'circle',
            geometry: go.Geometry.parse('M29.181 19.070c-1.679-2.908-0.669-6.634 2.255-8.328l-3.145-5.447c-0.898 0.527-1.943 0.829-3.058 0.829-3.361 0-6.085-2.742-6.085-6.125h-6.289c0.008 1.044-0.252 2.103-0.811 3.070-1.679 2.908-5.411 3.897-8.339 2.211l-3.144 5.447c0.905 0.515 1.689 1.268 2.246 2.234 1.676 2.903 0.672 6.623-2.241 8.319l3.145 5.447c0.895-0.522 1.935-0.82 3.044-0.82 3.35 0 6.067 2.725 6.084 6.092h6.289c-0.003-1.034 0.259-2.080 0.811-3.038 1.676-2.903 5.399-3.894 8.325-2.219l3.145-5.447c-0.899-0.515-1.678-1.266-2.232-2.226zM16 22.479c-3.578 0-6.479-2.901-6.479-6.479s2.901-6.479 6.479-6.479c3.578 0 6.479 2.901 6.479 6.479s-2.901 6.479-6.479 6.479z', true),
            strokeWidth: 0,
            width: 35,
            height: 35,
            cursor: 'pointer',
            fill: '#D0D6D8',
            background: '#74848B',
          },
        ),
        $(go.Shape,
          {
            toArrow: 'standard',
            strokeWidth: 2,
            stroke: 'gray',
            fill: 'gray',
          },
        ),
      ),
    );

I also tried to wrap two go.Shapes into go.Panel, but result of this try was as shown below:

$(go.Panel, 'Auto',
          $(go.Shape, 'Circle',
            {
              fill: 'red',
            },
          ),
          $(go.Shape,
            {
              geometry: go.Geometry.parse('M29.181 19.070c-1.679-2.908-0.669-6.634 2.255-8.328l-3.145-5.447c-0.898 0.527-1.943 0.829-3.058 0.829-3.361 0-6.085-2.742-6.085-6.125h-6.289c0.008 1.044-0.252 2.103-0.811 3.070-1.679 2.908-5.411 3.897-8.339 2.211l-3.144 5.447c0.905 0.515 1.689 1.268 2.246 2.234 1.676 2.903 0.672 6.623-2.241 8.319l3.145 5.447c0.895-0.522 1.935-0.82 3.044-0.82 3.35 0 6.067 2.725 6.084 6.092h6.289c-0.003-1.034 0.259-2.080 0.811-3.038 1.676-2.903 5.399-3.894 8.325-2.219l3.145-5.447c-0.899-0.515-1.678-1.266-2.232-2.226zM16 22.479c-3.578 0-6.479-2.901-6.479-6.479s2.901-6.479 6.479-6.479c3.578 0 6.479 2.901 6.479 6.479s-2.901 6.479-6.479 6.479z', true),
              strokeWidth: 0,
              width: 25,
              height: 25,
              cursor: 'pointer',
              fill: 'green',
            },
          ),
        ),

image

If you have any idea how to workaround this one, please, let me know.

Best regards!

2

I’m sorry, but I cannot tell what is what. What do you want?

3

Sorry, I need the link (1st picture), to look exactly the same, but only the sqaure to be a circle.

4

Desired design:

image

5

The GraphObject.background is always rectangular.
I suggest that you use a separate Shape with Shape.figure set to “Circle”.

Note also that your settings of fromArrow and geometry conflict with each other. Remove the setting of fromArrow and set the segmentIndex to 0.

1 Like