Link node with itself

GoJS
1

Hi,

I would like to know how I can create a link from a node to itself? Here an example of what I want reproduce with GoJS:

Thank you and have a nice day!

Steeve

2

I forgot to mention that I use LayeredDigraphLayout.

Thank you

Steeve

3

You just need to add a link from and to the same key, like this:

myDiagram.model.addLinkData({from: "keyA", to: "keyA"})

the result is this, which is I think what you’re looking for:

4

Hi,

Thanks for the answer.

When the data is imported, it works well (like the example of my first post). But when I want to draw new link on itself, I do not know how I can setup my templates.

Here is my node template and my link template (typescript):

    this._nodeTemplates.add('assetTypeElement',
        $(go.Node, 'Auto',
            $(go.Shape, 'None',
                {
                    figure: 'rectangle',
                    fill: 'transparent',
                    portId: 'nodePortId',
                    margin: 0,
                    fromLinkable: true,
                    toLinkable: true,
                    minSize: new go.Size(160, NaN),
                    maxSize: new go.Size(160, NaN),
                    name: 'FILL',
                    strokeWidth: 5
                }
            ),
            $(go.Panel, 'Table',
                $(go.Picture,
                    {
                        row: 0,
                        column: 0,
                        width: 80,
                        height: 80,
                        margin: 5,
                        imageStretch: go.GraphObject.Uniform
                    },
                    new go.Binding('source', '', this.nodeImageConverter.bind(this))),
                $(go.TextBlock, 'UniformToFill',
                    {
                        row: 1,
                        column: 0,
                        font: 'bold 11pt Helvetica, Arial, sans-serif',
                        margin: 8,
                        minSize: new go.Size(160, NaN),
                        maxSize: new go.Size(160, NaN),
                        wrap: go.TextBlock.WrapFit,
                        textAlign: 'center'
                    },
                    new go.Binding('text', '', this.nodeTextConverter.bind(this))
                )
            )
        ));



    this._linkTemplates.add('',
        $(go.Link,
            {
                routing: go.Link.Normal,
                fromSpot: go.Spot.AllSides,
                toSpot: go.Spot.AllSides,
                cursor: 'pointer',
                corner: 5
            },
            $(go.Shape,
                {
                    isPanelMain: true,
                    strokeWidth: 4,
                    name: 'BORDER'
                },
                new go.Binding('stroke', '', this.linkColorConverter.bind(this))
            ),
            $(go.Shape,
                {
                    toArrow: 'Standard',
                    strokeWidth: 6
                })
        )
    );

Thanks for help!

5

Take a look at the Basic sample, Basic GoJS Sample, that demonstrates the ability of the user to draw a new reflexive link.

Basically, you need to set GraphObject.fromLinkableSelfNode and .toLinkableSelfNode to true.

More information at GoJS Validation -- Northwoods Software

6

It works well.
Thank you and have a nice day!!!