toMaxLinks and fromMaxLinks not working

GoJS
1

I am trying to set Max Links Count to 1 for ports but it is not working. The code is as below:

function makePort(name, spot, output, input) {
          var port = g$(go.Shape, "Circle",
                   {
                      fill: "transparent",
                      stroke: null,
                      desiredSize: new go.Size(8, 8),
                      alignment: spot, alignmentFocus: spot,
                      portId: name,
                      fromSpot: spot , toSpot: spot,
                      fromLinkable: !input, toLinkable: input,
                      fromMaxLinks: (!input)?1:0, toMaxLinks: (input)?1:0,
                      cursor: "pointer"
                   });
          return port;
        }

myDiagram.nodeTemplateMap.add("Input",
      g$(go.Node, "Spot", nodeStyle(),
        g$(go.Panel, "Auto",
          g$(go.Shape, "Rectangle",{ fill: "#00A9C9", stroke: null },new go.Binding("figure", "figure")),
          g$(go.TextBlock,{font: "bold 11pt Helvetica, Arial, sans-serif",stroke: lightText, margin: 8, maxSize: new go.Size(160, NaN),wrap: go.TextBlock.WrapFit },
            new go.Binding("text").makeTwoWay())
        ),
        { doubleClick: handleObjectDoubleClicked},
        makePort("Out", go.Spot.Right, false)
      ));

myDiagram.nodeTemplateMap.add("Output",
    	      g$(go.Node, "Spot", nodeStyle(),
    	        g$(go.Panel, "Auto",
    	          g$(go.Shape, "Rectangle",{ fill: "#00A9C9", stroke: null },new go.Binding("figure", "figure")),
    	          g$(go.TextBlock,{ font: "bold 11pt Helvetica, Arial, sans-serif",stroke: lightText,margin: 8,maxSize: new go.Size(160, NaN),wrap: go.TextBlock.WrapFit }, new go.Binding("text").makeTwoWay())),
    	        { doubleClick: handleObjectDoubleClicked },
    	        makePort("In", go.Spot.Left, true)
      ));
2

In what manner is it not working for your app?
I assume you have already read: GoJS Validation -- Northwoods Software

3

These properties for me are not restricting the links I can make from that particular port. For example If I set ‘toMaxLinks’ to 0 then it works fine and I am not able to draw links to the particular port. But If I set it to 1 then I can draw any number of links to that port and it is not restricted to only 1.

4

I tried running your code and encountered a number of errors, even after defining names that you didn’t include in your quoted code. Could you use the go-debug library and fix all of the errors that you see in the console log?

5

Actually I am already using the go-debug.js and I am not getting any error messages. The whole code is as below

var g$ = go.GraphObject.make;

    myDiagram =
      g$(go.Diagram, "myDiagram",
        {
          initialContentAlignment: go.Spot.Center,
          allowDrop: true,
          "LinkDrawn": showLinkLabel,
          "LinkRelinked": showLinkLabel,
          "animationManager.duration": 800,
          "undoManager.isEnabled": true
        });
    
    function nodeStyle() {
      return [
        new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
        {
          locationSpot: go.Spot.Center,
          mouseEnter: function (e, obj) { showPorts(obj.part, true); },
          mouseLeave: function (e, obj) { showPorts(obj.part, false); }
        }
      ];
    }

    function makePort(name, spot, input) {
      var port = g$(go.Shape, "Circle",
               {
                  fill: "transparent",
                  stroke: null, 
                  desiredSize: new go.Size(8, 8),
                  alignment: spot, alignmentFocus: spot,
                  portId: name,
                  fromSpot: spot , toSpot: spot,
                  fromLinkable: !input, toLinkable: input,
                  fromMaxLinks: (!input)?1:0, toMaxLinks: (input)?1:0,
                  cursor: "pointer"
               });
      return port;
    }

    var lightText = 'whitesmoke';

    myDiagram.nodeTemplateMap.add("Input",
      g$(go.Node, "Spot", nodeStyle(),
        g$(go.Panel, "Auto",
          g$(go.Shape, "Rectangle",
            { fill: "#00A9C9", stroke: null },
            new go.Binding("figure", "figure")),
          g$(go.TextBlock,
            {
              font: "bold 11pt Helvetica, Arial, sans-serif",
              stroke: lightText,
              margin: 8,
              maxSize: new go.Size(160, NaN),
              wrap: go.TextBlock.WrapFit
            },
            new go.Binding("text").makeTwoWay())
        ),
        { doubleClick: handleObjectDoubleClicked},
        makePort("Out", go.Spot.Right,false)
      ));

    myDiagram.nodeTemplateMap.add("Insert",
      g$(go.Node, "Spot", nodeStyle(),
        g$(go.Panel, "Auto",
          g$(go.Shape, "Circle",
            { minSize: new go.Size(80, 80), fill: "#79C900", stroke: null }),
          g$(go.TextBlock, "Start",
            { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText },
            new go.Binding("text").makeTwoWay())
        ),
        { doubleClick: handleObjectDoubleClicked },
        makePort("In", go.Spot.Left,true),
        makePort("Out", go.Spot.Right,false)
      ));

    myDiagram.nodeTemplateMap.add("Join",
      g$(go.Node, "Spot", nodeStyle(),
        g$(go.Panel, "Auto",
          g$(go.Shape, "Circle",
            { minSize: new go.Size(60, 60), fill: "#DC3C00", stroke: null }),
          g$(go.TextBlock, "End",
            { font: "bold 11pt Helvetica, Arial, sans-serif", stroke: lightText },
            new go.Binding("text").makeTwoWay())
        ),
        { doubleClick: handleObjectDoubleClicked },
        makePort("In", go.Spot.Top,true),
        makePort("In", go.Spot.Left,true),
        makePort("Out", go.Spot.Right,false)
      ));

    myDiagram.nodeTemplateMap.add("Output",
    	      g$(go.Node, "Spot", nodeStyle(),
    	        g$(go.Panel, "Auto",
    	          g$(go.Shape, "Rectangle",
    	            { fill: "#00A9C9", stroke: null },
    	            new go.Binding("figure", "figure")),
    	          g$(go.TextBlock,
    	            {
    	              font: "bold 11pt Helvetica, Arial, sans-serif",
    	              stroke: lightText,
    	              margin: 8,
    	              maxSize: new go.Size(160, NaN),
    	              wrap: go.TextBlock.WrapFit
    	            },
    	            new go.Binding("text").makeTwoWay())
    	        ),
    	        { doubleClick: handleObjectDoubleClicked },
    	        makePort("In", go.Spot.Left,true)
      ));


    myDiagram.linkTemplate =
      g$(go.Link,
        {
          routing: go.Link.AvoidsNodes,
          curve: go.Link.JumpOver,
          corner: 5, toShortLength: 4,
          relinkableFrom: true,
          relinkableTo: true,
          reshapable: true,
          resegmentable: true,
          mouseEnter: function(e, link) { link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)"; },
          mouseLeave: function(e, link) { link.findObject("HIGHLIGHT").stroke = "transparent"; }
        },
        new go.Binding("points").makeTwoWay(),
        g$(go.Shape,
          { isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT" }),
        g$(go.Shape,
          { isPanelMain: true, stroke: "gray", strokeWidth: 2 }),
        g$(go.Shape,
          { toArrow: "standard", stroke: null, fill: "gray"}),
        g$(go.Panel, "Auto",
          { visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5},
          new go.Binding("visible", "visible").makeTwoWay(),
          g$(go.Shape, "RoundedRectangle",  // the label shape
            { fill: "#F8F8F8", stroke: null }),
          g$(go.TextBlock, "Yes",  // the label
            {
              textAlign: "center",
              font: "10pt helvetica, arial, sans-serif",
              stroke: "#333333",
              editable: true
            },
            new go.Binding("text", "text").makeTwoWay())
        )
      );

    function showLinkLabel(e) {
      var label = e.subject.findObject("LABEL");
      if (label !== null) label.visible = (e.subject.fromNode.data.figure === "Diamond");
    }
    
    myDiagram.toolManager.linkingTool.temporaryLink.routing = go.Link.Orthogonal;
    myDiagram.toolManager.relinkingTool.temporaryLink.routing = go.Link.Orthogonal;

    
    
    myPalette =
      g$(go.Palette, "myPalette", 
        {
          "animationManager.duration": 800, 
          nodeTemplateMap: myDiagram.nodeTemplateMap,
          model: g$(go.GraphLinksModel,
    	      { linkFromPortIdProperty: "fromPort",
    	        linkToPortIdProperty: "toPort",
    	        nodeDataArray: [
					{ category: "Input", text: "Input"},
					{ category: "Output", text: "Output" },
					{ category: "Insert", text: "Insert" },
					{ category: "Join", text: "Join" }
    	        ] })
        });
   
    function portMatching(fromnode, fromport, tonode, toport) {
        if (fromport.portId === "Out") return toport.portId === "In";
        if (fromport.portId === "In") return toport.portId === "Out";
      }

      myDiagram.toolManager.linkingTool.linkValidation = portMatching;
      myDiagram.toolManager.relinkingTool.linkValidation = portMatching;
    
    function showPorts(node, show) {
        var diagram = node.diagram;
        if (!diagram || diagram.isReadOnly || !diagram.allowLink) return;
        node.ports.each(function(port) {
            port.stroke = (show ? "white" : null);
          });
      }

function handleObjectDoubleClicked(ev, obj){};
6

I haven’t tried your code yet, but having duplicate port names may cause problems.

7

Ok, I figured it out, I had forgotten to add the following lines

 myDiagram.model =
        g$(go.GraphLinksModel,
          { linkFromPortIdProperty: "fromPort",
            linkToPortIdProperty: "toPort"
          });

I had set them in my Pallete model but forgot them in my Diagram model. Thanks for your help.