Linking fromSpot and toSpot

GoJS
1

HI,
when i link my node from node top to node right side then the link will automatically get connected to the top of the node.

asd.gif722×320 1.7 MB

for node template is am using this code

myDiagram.nodeTemplate =
$(go.Node, “Auto”,

             { layoutConditions: go.Part.LayoutAdded | go.Part.LayoutRemoved },
            //{ locationSpot: go.Spot.Center, resizable: false, fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides, minSize: new go.Size(108, 67) },
             new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
             { resizable: false, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate, desiredSize: new go.Size(108, 67), minSize: new go.Size(108, 67), maxSize: new go.Size(220, 120) },
             new go.Binding("angle").makeTwoWay(),
             new go.Binding("position", "position", go.Point.parse).makeTwoWay(go.Point.stringify),
             new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
            $(go.Shape, "RoundedRectangle",
              {
                  parameter1: 2,
                  fill: fill, stroke: "orange", strokeWidth: 2,
                  spot1: new go.Spot(0, 0, 1, 1),
                  spot2: new go.Spot(1, 1, -1, 0),
                  minSize: new go.Size(95, 59),
                  maxSize: new go.Size(220, 120),
                  portId: "",
                  fromLinkable: true,
                  fromSpot: go.Spot.AllSides,
                  toLinkable: true,
                  toSpot: go.Spot.AllSides,
                  cursor: "pointer", fromLinkableSelfNode: true, fromLinkableDuplicates: true, toLinkableSelfNode: true, toLinkableDuplicates: true,
                  alignment: go.Spot.Center,
                
              },
                new go.Binding("figure", "figure").makeTwoWay(),
                new go.Binding("fill", "fill").makeTwoWay(),
                new go.Binding("stroke", "stroke").makeTwoWay()
              ),

            $(go.Panel, "Vertical",
              { alignment: go.Spot.Top, stretch: go.GraphObject.Horizontal, minSize: new go.Size(108, 67) },
              $(go.Panel, "Table",
                { background: "lightblue", stretch: go.GraphObject.Horizontal, width: 15.5, height: 13 },
                //$("TreeExpanderButton", { alignment: go.Spot.Left }),
                //$("Button", { alignment: go.Spot.Right, width: 13.5, height: 13.5, visible: false })

                    $(go.Shape, "StopSign", {
                        alignment: go.Spot.TopLeft, margin: 2,
                        fill: "red", width: 8, height: 8, stroke: null,
                        visible: visible
                    }, new go.Binding("visible", "visible").makeTwoWay())),

              $(go.TextBlock,
              {
                  font: "12px Arial, sans-serif", //stroke: lightText,
                  margin: 4,
                  stretch: go.GraphObject.Horizontal, textAlign: "center",
                  height: 38,
                  maxLines: 3,
                  // cursor: "move",
                  verticalAlignment: go.Spot.Center,
                  editable: true, isMultiline: true, //textValidation: validateText,
                  textEdited: function (textBlock, previousText, currentText) {
                      if (previousText != currentText) {
                          $scope.MBTOperationScope.renameNode(currentText.trim());
                      }
                  },
              },
             //n    ew go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
             new go.Binding("text", "text").makeTwoWay()),
             {
                 toolTip:
                   $("ToolTip",
                     new go.Binding("visible", "text", function (t) { return !!t; }).ofObject("TB"),
                     $(go.TextBlock,
                       { name: "TB", margin: 4, font: "bold 12px Verdana,serif", stroke: "black" },
                       new go.Binding("text", "", diagramNodeInfo))
                   )
             }),
                 //$(go.Shape, {
                 //    width: 20, height: 10, fill: "transparent", stroke: "gray",
                 //    alignment: go.Spot.Top, alignmentFocus: go.Spot.Top,
                 //    portId: "T", toSpot: go.Spot.Top,
                 //    toLinkable: true, toLinkableSelfNode: true,toLinkableDuplicates: true,
                 //}),
                //$(go.Shape, {
                //    width: 20, height: 10, fill: "transparent", stroke: "gray",
                //    alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Bottom,
                //    portId: "B", fromSpot: go.Spot.Bottom,
                //    fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
                //}),
              { contextMenu: $(go.Adornment) },
             
          { // handle mouse enter/leave events to show/hide the ports
              mouseEnter: function (e, node) { showSmallPorts(node, true); },
              mouseLeave: function (e, node) { showSmallPorts(node, false); },
              //mouseDrop: dropOntoNode
          }
          );

and for linking i am using

myDiagram.linkTemplate =
$(MultiArrowLink,
{

                curve: go.Link.JumpOver,
                toShortLength: 3,
                corner: 5,
                routing: go.Link.AvoidsNodes,
                adjusting: go.Link.Scale,
                relinkableFrom: true,
                relinkableTo: true,
                reshapable: true,
                resegmentable: true,
                fromLinkable: true,
                fromLinkableSelfNode: true,
                fromLinkableDuplicates: true,
                toLinkable: true,
                toLinkableSelfNode: true,
                toLinkableDuplicates: true,
                selectionAdorned: false,
                mouseEnter: function (e, link) {
                    console.log('link focus in');
                    dataFactory.customNodeObject['e'] = e;
                    dataFactory.customNodeObject['link'] = link;
                    link.findObject("HIGHLIGHT").stroke = "rgba(24,87,255,2.0)";
                    link.isHighlighted = true;

                },
                mouseLeave: function (e, link) {

                    console.log('link focus out');
                    dataFactory.customNodeObject = new Object();
                    link.findObject("HIGHLIGHT").stroke = "gray"; link.isHighlighted = false;
                },
                mouseDrop: dropOntoLink,
                toShortLength: 2,

            },
            new go.Binding("fromSpot", "fromSpot", go.Spot.parse),
            new go.Binding("toSpot", "toSpot", go.Spot.parse),
            new go.Binding("points").makeTwoWay(),
            new go.Binding("routing", "routing"),
            new go.Binding("curviness"),
            $(go.Shape, { isPanelMain: true, stroke: "gray", strokeWidth: 1.5, name: "HIGHLIGHT" }),

            $(go.Shape, { fromArrow: "Circle", fill: "gray", strokeWidth: 2, stroke: "gray" }),
            $(go.Shape, { toArrow: 'Triangle', fill: "gray", strokeWidth: 2, stroke: "gray" }),

                $(go.Panel, "Auto",
             { _isLinkLabel: true, cursor: "move" },  // marks this Panel as being a draggable label

           $(go.Shape, { isPanelMain: true, fill: "white", stroke: "orange", strokeWidth: 2 },
                 new go.Binding("stroke", "stroke").makeTwoWay()
            ),
          $(go.Shape, "StopSign",
          {
              alignment: go.Spot.TopLeft, margin: 3,
              width: 8, height: 8, fill: "red", visible: visible, stroke: null
          },
         new go.Binding("visible", "visible").makeTwoWay()),
         new go.Binding('visible', 'text', function (t) { return t.trim() !== '' }),

        

        $(go.TextBlock, "Label", {
            margin: 3, editable: true,
            isMultiline: true,  // don't allow embedded newlines
            textValidation: validateText,
            segmentIndex: 0, segmentFraction: 0.5,
            textEdited: function (textBlock, previousText, currentText) {
                if (previousText != currentText) {
                    var selectedData = myDiagram.selection.first().data;
                    if (selectedData.hasOwnProperty('EdgeID')) {
                        var edgeName = currentText.split('\u00AD');
                        if (edgeName.length > 1) {
                            edgeName = currentText.split('\u00AD')[1].trim();
                        } else {
                            edgeName = currentText.trim();
                        }
                        $scope.MBTOperationScope.renameEdge(edgeName);
                    }
                }
            }
        },
            new go.Binding('visible', 'text', function (t) {
                return t.trim() !== ''
            }),
                new go.Binding("text", "text", function (e) {
                    if (e != "") {
                        return "\u00AD   " + e;
                    }
                }).makeTwoWay(),
         {
             toolTip:
                    $("ToolTip",
                      new go.Binding("visible", "text", function (t) { return !!t; }).ofObject("TB"),
                      $(go.TextBlock,
                        { name: "TB", margin: 4, font: "bold 12px Verdana,serif", stroke: "black" },
                        new go.Binding("text", "", diagramNodeInfo))
                    )
         }
               ),
                { contextMenu: $(go.Adornment) },
             new go.Binding("segmentIndex").makeTwoWay(),
             new go.Binding("segmentFraction").makeTwoWay()
           )
         );
2

A …Spot of go.Spot.AllSides means the link routing tries to place the end point on the side that is closest to the other node.

You might want to customize the LinkingTool to explicitly set the Link.fromSpot and Link.toSpot to be Spots that exactly match where you want the link connection points to be. You can do that in an override of the LinkingTool.insertLink method. Maybe something like:

  function SpotLinkingTool() {
    go.LinkingTool.call(this);
  }
  go.Diagram.inherit(SpotLinkingTool, go.LinkingTool);

  SpotLinkingTool.prototype.insertLink = function(fromnode, fromport, tonode, toport) {
    var link = go.LinkingTool.prototype.insertLink.call(this, fromnode, fromport, tonode, toport);
    if (link !== null) {
      var port;
      if (this.isForwards) {
        port = toport;
      } else {
        port = fromport;
      }
      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),
                                          this.diagram.lastInput.documentPoint, !this.isForwards);
      var spot = new go.Spot((lp.x - portb.x) / (portb.width || 1), (lp.y - portb.y) / (portb.height || 1));
      if (this.isForwards) {
        link.toSpot = spot;
      } else {
        link.fromSpot = spot;
      }
    }
    return link;
  }
3

hey walter,
It works but i am not be able to achieve what i want. I just want to link my node from any side to any side in this i am not be able to link node from node A bottom to node B bottom is automatically get connected to Node A right to Node B Bottom is it possible that i can be able to connect from any side of node to any side of other node.

4

As is obvious when you read the code above, the insertLink override is only setting one Spot on the Link. Perhaps you want to calculate and set it for both spots.