GroupTemplate fromSpot, toSpot are not updated

GoJS
1

Hi,

I have created a diagram and define a groupTemplate and have a function to update the graph Direction and the fromSpot toSpot of upcoming/incoming link:

changeLayoutDirection(event) {
        this.goDiagram.startTransaction('change Layout');
        const orientation = this.selectedDirection.orientation;
        this.goDiagram.layout.direction = this.selectedDirection.layoutDirection;
   
        if (orientation === GraphDataConstants.SOURCE_ON_LEFT) {
            this.goDiagram.groupTemplate.fromSpot = go.Spot.Right;
            this.goDiagram.groupTemplate.toSpot = go.Spot.Left;
        } else if (orientation === GraphDataConstants.SOURCE_ON_RIGHT) {
            this.goDiagram.groupTemplate.fromSpot = go.Spot.Left;
            this.goDiagram.groupTemplate.toSpot = go.Spot.Right;
        } else if (orientation === GraphDataConstants.SOURCE_ON_TOP) {
            this.goDiagram.groupTemplate.fromSpot = go.Spot.Bottom;
            this.goDiagram.groupTemplate.toSpot = go.Spot.Top;
        } else {
            this.goDiagram.groupTemplate.fromSpot = go.Spot.Top;
            this.goDiagram.groupTemplate.toSpot = go.Spot.Bottom;
        }
        this.goDiagram.groupTemplate = this.graphDataGoService.groupTemplate;
             this.goDiagram.commitTransaction('change Layout');
    }

The problem here is that: the direction is updated, but fromSpot/toSpot still keeps the predefined value: From right side to left side of each node:

Before:
before

After calling changeLayout function:

picture

Is there anything wrong with my function?

2

Changing a template does not change any existing Parts.

TreeLayout and LayeredDigraphLayout are directional, so they automatically set the Link.fromSpot and Link.toSpot unless you explicitly disable that behavior. Which Layout are you using?

3

I’m using LayeredDigraphLayout , i already setsPortSpots: false.

4

OK, and does your node template set or bind fromSpot or toSpot? It shouldn’t.

5

No, i didn’t do that.

6

If you are not setting or binding fromSpot and toSpot, then your Orthogonal links should route as you would expect. For example, see Layered Digraph Layout, which allows the user to change the direction of the layout dynamically by clicking on the radio buttons.

But perhaps I misunderstood: you should be setting LayeredDigraphLayout.setsPortSpots to true, if that is what you want.

And I just thought of another possibility: you have set or bound Link.adjusting to some value. Try it without setting that property.

7

Hi walter, i just change LayeredDigraphLayout.setsPortSpots to true and it works well as below image:
Top%20to%20bottom

But with the case i change the orientation from Right to Left: the graph links become messy:

right%20to%20left
right to left.png1091×608 15.1 KB

8

Did you set LayeredDigraphLayout.direction to 180?

9

yes, i already did it, the orientation value is 0, 180, 90, 270 for each case.

10

What is your link template?
Precisely which version of the go.js or go-debug.js library are you using?
Are those nodes actually instances of Groups? Are they all collapsed? I do not see how groups are involved.

11

No group is not collapsed, even though they defined it as a group there’s not function “collapse or expand in here”

const groupTemplate = GraphDataConstants.$(go.Group, 'Vertical');
        groupTemplate.layout = this.defineLayoutGroup();
        groupTemplate.computesBoundsIncludingLinks = false;
        groupTemplate.add(this.definePanelGroup());

const linkTemplate = GraphDataConstants.$(go.Link);
        linkTemplate.selectionAdorned = false;
        linkTemplate.fromPortId = 'from';
        linkTemplate.toPortId = 'to';
linkTemplate.bind(new go.Binding('fromSpot', 'isRecursive', (isRecursive) => isRecursive ? new go.Spot(0, 0.7) : go.Spot.Default));
        linkTemplate.bind(new go.Binding('toSpot', 'isRecursive', (isRecursive) => isRecursive ? new go.Spot(0.3, 1) : go.Spot.Default));

I am using go-debug.js v1.7.25

12

Setting Link.fromPortId and Link.toPortId is suspicious but not necessarily wrong. It depends on what your group template is, what your node template is, and whether the links are connecting with the member nodes of the groups or with the groups directly. It’s hard to tell with incomplete information.

13

In this case above it’s connected to group directly, below is the code defining groupShape.

protected definePanelGroupShape(): any {
        const panelGroupShape = GraphDataConstants.$(go.Shape, 'RoundedRectangle');
        panelGroupShape.p1 = 1;
        panelGroupShape.name = GraphDataConstants.PANEL_GROUP_SHAPE_NAME;
        panelGroupShape.minSize = new go.Size(240, 40);
        panelGroupShape.bind(new go.Binding('stroke', 'borderColor'));
        panelGroupShape.bind(new go.Binding('fill', 'background'));
        return panelGroupShape;
    }

If you want any further information just mention it.

14

p1 is not part of the GoJS API, so you should not be setting that on any GraphObject.

That Shape is not a port because you haven’t set GraphObject.portId to a string, so I don’t know how that piece of your group template helps us understand what is going on. It would be much clearer if you defined your templates using a single expression of nested calls to go.GraphObject.make, because then it is easier to understand the visual structure of your group or node or link.