Link - fromArrow propperty combined with geometry

@Jednorozec wrote:

Hello,

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

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',
            },
          ),
        ),

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

Best regards!

Posts: 5

Participants: 2

Read full topic