Auto Arrange of diagram

Followed exactly what you told

$(go.Shape, “RoundedRectangle”,
{
parameter1: 2, portId: “”,
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), fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
},

But now my view is not precise as before , links are get overlapped with nodes.

You haven’t set fromSpot and toSpot to be go.Spot.AllSides.

I have set fromSpot and toSpot to be go.Spot.AllSides.

$(go.Node, “Auto”,
{
fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides
}, 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, portId: “”,
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), fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
},
new go.Binding(“figure”, “figure”).makeTwoWay(),
new go.Binding(“fill”, “fill”).makeTwoWay(),
new go.Binding(“stroke”, “stroke”).makeTwoWay()
),

But you had not set those properties on the port element.

All port properties need to go on the GraphObject that act as ports. That means when some object has GraphObject.portId set or bound to some string, that’s the object whose port properties need to be set.

If there is more than one port, one couldn’t set different port properties if they were all on the Node.

Walter , it will be very helpful if you give me an example.

$(go.Node, "Auto",
  {
    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("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
  new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
  $(go.Shape, "RoundedRectangle",
    {
      parameter1: 2, portId: "",
      fromSpot: go.Spot.AllSides, toSpot: go.Spot.AllSides, // <------spots should be here
      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),
      fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
      toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
    },
    new go.Binding("figure", "figure").makeTwoWay(),
    new go.Binding("fill", "fill").makeTwoWay(),
    new go.Binding("stroke", "stroke").makeTwoWay()
  ),
...

Your fromSpot/toSpot should be defined wherever you have your port specified. Also, you seem to have sizes defined in lots of places, which seems strange in the case of an auto panel. And it seems odd to bind both the location and position of the node. You should probably try cleaning up your template some and remove properties that you don’t really need.

That works, edges are not overlapping each other.

Issues

1.When user want to make a link from right side of node to right side another node that is not possible.vice versa.
2.Is this possible to give a port in center of node for user convenience.

So maybe you do want four ports, one on each side of the node. BUT each port would stretch the full width/height of the node.

Yes, you could put a port in the center of the node, but that would obscure any contents of the node that would be there. I’m assuming you haven’t bothered filling in the details of the node yet.

Yes Walter,
I want to provide four ports on node.
Each port decide side of node.

Means:
If user want to draw a link from right side of one node to another node right side he can.

OK, so make sure those four ports each stretch along a side of the node. You’ve set a desiredSize on the Node, so you can either use a “Table” Panel and set stretch on each port, or you can just set the width and height as needed.

Walter if you give me an example that will be more use full.

My code:

        function makePort(name, spot, output, input) {
            // the port is basically just a small circle that has a white stroke when it is made visible
            return $(go.Shape, "Circle",
                     {
                         fill: "gray",//transparent
                         stroke: "gray",  // this is changed to "white" in the showPorts function
                         desiredSize: new go.Size(8, 8),
                         alignment: spot, alignmentFocus: spot,  // align the port on the main Shape
                         portId: name,  // declare this object to be a "port"
                         fromSpot: spot, toSpot: spot,  // declare where links may connect at this port
                         fromLinkable: output, toLinkable: input,  // declare whether the user may draw links to/from here
                         cursor: "pointer",  // show a different cursor to indicate potential link point
                         fromLinkableSelfNode: true, fromLinkableDuplicates: true, toLinkableSelfNode: true, toLinkableDuplicates: true,

                     }),
            $(go.Panel, "Table",
            { stretch: go.GraphObject.Horizontal, width: 15.5, height: 13, background: "lightblue", });

        }
    function makePort(id, align, spot) {
      var port = $(go.Shape,
        {
          portId: id,
          alignment: align,
          cursor: "pointer",
          fromSpot: spot,
          fromLinkable: true,
          fromLinkableDuplicates: true,
          toSpot: spot,
          toLinkable: true,
          toLinkableDuplicates: true
        });
      if (align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom)) {
        port.height = 4;
        port.stretch = go.GraphObject.Horizontal;
      } else {
        port.width = 4;
        port.stretch = go.GraphObject.Vertical;
      }
      return port;
    }

    myDiagram.nodeTemplate =
      $(go.Node, "Table",
        $(go.Shape,
          { fill: "lightgray" },
          new go.Binding("fill", "color")),
        makePort("T", go.Spot.Top, go.Spot.TopSide),
        makePort("L", go.Spot.Left, go.Spot.LeftSide),
        makePort("R", go.Spot.Right, go.Spot.RightSide),
        makePort("B", go.Spot.Bottom, go.Spot.BottomSide)
      );

Hi,

How to highlight specific port of Node on mouse over.

Implement a mouseEnter and mouseLeave event handler on each port.

It works, but when user mouse over on right and left side port highlighted color is not complete till ends.
Where as you can see if i mouse over in bottom highlighted line looks better and complete till the ends.

I’m assuming that the ports do fully stretch along the sides, and that the bottom port is not normally “transparent” and thus is occluding the side ports.

It appears that when the mouse is over a port you are showing all four ports, because I can see the effect on the other three sides.

Don’t do that – have each port normally be “transparent” and only show the one port that the mouse is over by changing its fill to be that pink color.

I do the same,but still the highlighted line is not complete till the end.

And also other ports again get filled with white color.

Code

function makePort(id, align, spot) {
var port = $(go.Shape,
{
fill: “transparent”,
stroke: null,
portId: id,
alignment: align,
cursor: “pointer”,
fromSpot: spot,
fromLinkable: true,
fromLinkableDuplicates: true,
fromLinkableSelfNode: true,
toSpot: spot,
toLinkable: true,
toLinkableSelfNode: true,
toLinkableDuplicates: true,
mouseEnter: portMouseEnter,
mouseLeave: portMouseLeave,
toolTip: // define a tooltip for each node that displays the color as text
$(go.Adornment, “Auto”,
$(go.Shape, { fill: “#FFFFCC” }),
$(go.TextBlock, { margin: 4 },
new go.Binding(“text”, “”, diagramInfo))
) // end of Adornment
});
if (align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom)) {
port.height = 3;
port.stretch = go.GraphObject.Horizontal;
} else {
port.width = 3;
port.stretch = go.GraphObject.Vertical;
}
return port;
}

        function portMouseEnter(e, obj) {
            debugger;
            obj.stroke = "rgb(255,105,180)";
            obj.fill = "rgb(255,105,180)";
            obj.isHighlighted = true;
          
        }
        function portMouseLeave(e, obj) {
            debugger;
            obj.stroke = null;
            obj.fill = "transparent";
            obj.isHighlighted = false;
        }

Issue:10738 resolved(Port taking space by default.)

But highlighted color is not completed till the end on mouse over is still exist.

The example node template I give in Port taking space by default works well – please use it.