I want to connect shape end point

GoJS
1

Hello,
i not want this state
image:

notShapeConnect.png807×628 18.6 KB

i want this state

i want link from point of any shape point

my code:

this.diagram.nodeTemplate = goMake(go.Node, “Spot”,
{
locationObjectName: “ICON”,
locationSpot: go.Spot.Center,
selectable: true,
selectionAdornmentTemplate: nodeSelectionAdornmentTemplate,
selectionObjectName: “ICON”,
resizeObjectName: “ICON”,
resizeAdornmentTemplate: nodeResizeAdornmentTemplate,
resizable: this.props.config.nodeConfig.resizable
},

        new go.Binding("location", "", this.bindShapeLocation).makeTwoWay(this.converterShapeLocation),
        goMake(go.Shape,
            {
                name: "ICON",
                fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides,
                portId: "",
                fromLinkable: true,
                fromLinkableSelfNode: true,
                fromLinkableDuplicates: true,
                toLinkable: true,
                toLinkableSelfNode: true,
                toLinkableDuplicates: true,
                cursor: "pointer",
                mouseEnter: function (e: any, obj: go.Node) {   },
                mouseLeave: function (e: any, obj: go.Node) {  },
                strokeWidth: 1,

            },
            // bind the Shape.figure to the figure name, which automatically gives the Shape a Geometry
            new go.Binding("figure", "shapeCategory").makeTwoWay(),
            new go.Binding("stroke", "", this.bindShapeBorderColor).makeTwoWay(),
            new go.Binding("fill", "", this.bindShapeColor).makeTwoWay(),
            new go.Binding("desiredSize", "", this.bindShapeSize).makeTwoWay(this.converterShapeSize),
        ),


        goMake(go.Shape,  // provide interior area where the user can grab the node
            {
                fill: "blue",
                stroke: null,

            },
            new go.Binding("desiredSize", "", this.bindShapeCenterSize).makeTwoWay(),
            new go.Binding("figure", "shapeCategory").makeTwoWay(),
        ),
        goMake(go.TextBlock,
            {
                name: "textBlock",
                editable: true,  // editing the text automatically updates the model data
                _isNodeLabel: true,
                cursor: "move",  // visual hint that the user can do something with this node label
                textAlign: "center"
            },
            new go.Binding("text", "", this.bindShapeText).makeTwoWay(this.converterShapeText),
            new go.Binding("stroke", "", this.bindShapeTextColor).makeTwoWay(),
            new go.Binding("font", "", this.bindShapeTextFont).makeTwoWay(),
            new go.Binding("background", "", this.bindShapeTextBackgroundColor).makeTwoWay(),
            new go.Binding("alignment", "", this.bindShapeTextLocation).makeTwoWay(this.converterShapeTextLocation),
            new go.Binding("width", "", this.bindShapeTextWidth).makeTwoWay(),
        )
    );
2

You are doing the correct thing in making the Shape as the default port by setting GraphObject.portId to an empty string. GoJS Ports in Nodes-- Northwoods Software

But your setting of fromSpot and toSpot to be AllSides means that the routing of links will treat the port as a rectangle. Try removing those two settings. Spot | GoJS API

3

I tried what they said,
but i not want this.Because i used LinkShifting. I not want
find the shortest way.
I want any spot go to any spot and not use port.
User must be able to drag port points anytime from anywhere.
For example:

I want my own shapes instead of buttons

i am used tool list:

4

If you want to change the behavior of the LinkShiftingTool, I suggest that you modify the behavior of the LinkShiftingTool.doReshape method. I’m not sure what you want, but I suspect that you might need to redefine/override that method to do exactly what you want.

5

fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides,
I tried to delete this code. I can connect to shapes endpoints.But I can not use linkshifting tool .
I not want to change LinkShiftingTool.
i only want connect to shapes endpoints.

look at the picture of the situation I do not want.
i try change shape connect point.
The Link Shifting tool does what you want and shapes the end point of the link.
example image:

and i use linkshiftingtool and change connection end points.

i want this state but is not connect shape point of created link for first time
.

6

So are you saying that the LinkShiftingTool is working the way that you want, but the initial routing of the link is not what you want because the link spots are AllSides?

I have not had the chance to try this, but you could modify the LinkShiftingTool.updateAdornments method not to check that the computed spots are either a “Side” Spot or a specific Spot. That would allow the fromSpot and toSpot on your port objects to remain at the default value of go.Spot.None, so that the link would get the normal routing directly to the closest intersection point with the shape’s geometry.

There might be other code in the LinkShiftingTool that depends on the spots not being None, so you might need to make additional changes.

7

I developed a method in link drawn event and this solved my problem.
Thank you for your interest

my solved method,

   linkDrawnEvent(e: go.DiagramEvent) {
        let link: go.Link = e.subject;
        var port: go.GraphObject = link.fromPort;
        var resPort = null;
        var portb = new go.Rect(port.getDocumentPoint(go.Spot.TopLeft),
            port.getDocumentPoint(go.Spot.BottomRight));

        var lp = link.getLinkPointFromPoint(port.part, port, port.getDocumentPoint(go.Spot.Center), link.fromPort.position, resPort);
        var spot = new go.Spot((lp.x - portb.x) / (portb.width || 1), (lp.y - portb.y) / (portb.height || 1));
        link.fromSpot = spot;
        this.instanceLinkShiftingTool.updateAdornments(link);
    }
8

I would think you would want to do the same for the “to” end of the newly drawn link?

9

Yes i write :) this test code