Drawing Links while setsPortSpots to false

GoJS
1

I need to create a layout & functionality similar to orgChartEditor sample.
But instead of tree I had to choose LayeredDigraphLayout as one node can have multiple “to links” & “from links”.

I’ve used go.Link.AvoidsNodes as routing, go.Link.JumpOver as curve, put Standard arrowhead while defining link template & node is defined in similar to orgChartEditor sample.

Initial problem was - all links end are meeting at same point of a node. To overcome that I used “setsPortSpots: false”.

Now I’m not able to draw the links between nodes.

2

If you are setting LayeredDigraphLayout.setsPortSpots to false, you will probably want to set fromSpot and toSpot appropriately on the Node, depending on the angle of the layout.

You might want to use values such as go.Spot.BottomSide and go.Spot.TopSide, respectively.

3

I’ve already done that but not working.
Here is my node & link template:

 myDiagram.nodeTemplate =
                $(go.Node, "Auto",
                    {
                        fromSpot: go.Spot.BottomSides,
                        toSpot: go.Spot.TopSides,
                    },
                    { selectionAdorned: false },
                    { // show the Adornment when a mouseHover event occurs
                        mouseHover: function (e, obj) {
                            var node = obj.part;
                            nodeHoverAdornment.adornedObject = node;
                            node.addAdornment("mouseHover", nodeHoverAdornment);
        					}
                    },
                    new go.Binding("text", "question"),
                    new go.Binding("layerName", "isSelected", function (sel) { return sel ? "Foreground" : ""; }).ofObject(),
                    $(go.Shape, "Rectangle",
                        {
                            name: "SHAPE", fill: "white", stroke: null,
                            // set the port properties:
                             fromLinkable: true, toLinkable: true, cursor: "pointer"
                        },
                        new go.Binding("fill", "isSelected", function (sel) {
                            if (sel) return "#007bff"; else return "#669cf2";
                        }).ofObject("")),
                    $(go.Panel, "Horizontal",
                        $(go.Panel, "Table",
                            {
                                maxSize: new go.Size(250, 999),
                                margin: new go.Margin(6, 10, 0, 3),
                                defaultAlignment: go.Spot.Left
                            },
                            $(go.RowColumnDefinition, { column: 1, width: 4 }),
                            $(go.TextBlock, textStyle(),  // the name
                                {
                                    row: 0, column: 0, columnSpan: 4,
                                    font: "bold 12pt Segoe UI,sans-serif",
                                    editable: true, isMultiline: true,
                                    minSize: new go.Size(10, 16)
                                },
                                new go.Binding("text", "question").makeTwoWay()),
                            $(go.TextBlock, textStyle(),
                                {
                                    row: 1, column: 0, columnSpan: 4,
                                    editable: true, isMultiline: true,
                                    minSize: new go.Size(10, 14),
                                    margin: new go.Margin(0, 0, 0, 3)
                                },
                                new go.Binding("text", "answer").makeTwoWay()),
                            $(go.TextBlock, textStyle(),
                                { row: 2, column: 0 },
                                new go.Binding("text", "alternateQuestions", function (v) { return []; })),
                            $(go.TextBlock, textStyle(),
                                { row: 2, column: 0 },
                                new go.Binding("text", "key", function (v) { return "" }))//,
        				)  // end Table Panel
                    ) // end Horizontal Panel
                );  // end Node
    // replace the default Link template in the linkTemplateMap
    myDiagram.linkTemplate =
        $(go.Link,  
            {
                routing: go.Link.AvoidsNodes,
                corner: 5, relinkableFrom: true, relinkableTo: true 
            },
            new go.Binding("points").makeTwoWay(),
            $(go.Shape,  // the link shape
			{ strokeWidth: 2, stroke: "#00a4a4" }),
            $(go.Shape,  // the arrowhead
                { toArrow: "Standard", fill: "#00a4a4", stroke: null, scale: 2 })
        );
4

I cannot tell what’s wrong.

The basic idea is denonstrated at GoJS Link Connection Points on Nodes -- Northwoods Software. Note how LayeredDigraphLayout.setsPortSpots is set to false, and how the second example in that section also sets fromSpot and toSpot to “…Side” Spots.

Or is the problem that your nodes don’t want to treat the whole Node as the port? Your template doesn’t set GraphObject.portId to a string, so it isn’t clear to me that you would need to set fromSpot and toSpot on a different object.