Entering text into port

Hello.

My ports from the DataFlow diagram can be seen in the image
2

I’m trying to view the names of my ports into that port, like the Tournament Tree sample here
3

I need to put port names inside ports instead of outside. Is it doable with the DataFlow example? Or can I add a TextBlock into a Shape

Thanks.

Replace the Shape with an “Auto” Panel containing a Shape and a TextBlock. GoJS Panels -- Northwoods Software

Hi Walter. thank you for your help, it works just fine.

But I’m wondering if the ports can fit in the node itself. As you can see below it doesn’t fit right in the node, the port gushes from the node.
image

Is there a way that I can fix that?
Thanks again.

Did you start from the Data Flow sample, Data Flow Diagram ? Presumably you only changed what the makePort function does.

The node template there intentionally has the port crossing over the edge of the body of the node, so that the small square sticks out but the text is inside. Apparently you have kept that feature but don’t want it. Just change the alignmentFocus value for the “Vertical” Panels. The one on the left should be alignmentFocus: go.Spot.Left, and the one on the right should be go.Spot.Right.

Hey Walter,

Yes, I’m working with the sample you referred.

Apparently you understood what my issue was despite of my poor description. Both solutions you just provided works perfectly. Thank you so much for quick answer.

Stay safe.

Hi, @walter

I figured that when I do this modification, I lose the relinkableTo and relinkableFrom properties.

My port variable now is;
var port = $(go.Panel,"Auto",
$(go.Shape, "Rectangle",
{fill: "darkorange", stroke: "white",
desiredSize: new go.Size(9 + portSize * (7), 18),
portId: name,
toMaxLinks: 1,
cursor: "pointer"
},
),
$(go.TextBlock, name, // portname inside the node
{
stroke: "white",
font: "8pt sans-serif"
}
));

When I define “port” as a shape, I can use those properties just fine but I can’t display TextBlock in the shape. When define “port” as a Panel containing a Shape and a TextBlock like you suggested, I can display names, but can’t drag link and connect nodes with relinkableTo and relinkableFrom properties.

Can you help me about this? Thank you so much.

I don’t understand the question. You are talking about the design of the ports in a node, yet relinkableFrom and relinkableTo are properties of Links: Link | GoJS API

I mean when I define my port variable like below I can create new links by mouse-drag, but I can’t display $(go.TextBlock, name, on the screen.

var port = $(go.Panel,"Auto",
$(go.Shape, "Rectangle",
{fill: "darkorange", stroke: "white",
desiredSize: new go.Size(9 + portSize * (7), 18),
portId: name,
toMaxLinks: 1,
cursor: "pointer"
},
),
$(go.TextBlock, name, // portname inside the node
{
stroke: "white",
font: "8pt sans-serif"
}
));


As you can see I can create new nodes by dragging existing links. But I can’t see port names in those orange boxes.

When I modify it to this:
var port = $(go.Shape, "Rectangle",
{fill: "darkorange", stroke: "white",
desiredSize: new go.Size(9 + portSize * (7), 18),
portId: name,
toMaxLinks: 1,
cursor: "pointer"
},
)
$(go.TextBlock, name, // portname inside the node
{
stroke: "white",
font: "8pt sans-serif"
}
);


I can see the port names but dragged link doesn’t connect to the node 6.
Is there a way to create new links by mouse-drag without losing the TextBlock?

Your help will be very much appreciated.
Thanks.

Your code is incomplete. Are you using Panel.itemTemplate? If so, what is your template?

I’m sorry I’m not using one. Here is my whole makePort function

function makePort(name, leftside, portSize) {
    var port = $(go.Panel,"Auto",
      $(go.Shape, "Rectangle",
        {
          fill: "darkorange", stroke: "white",
          desiredSize: new go.Size(9 + portSize * (7), 18),
          portId: name,
          toMaxLinks: 1,
          cursor: "pointer"
        },
      ),
      $(go.TextBlock, name, // portname inside the node
        {
          stroke: "white",
          font: "8pt sans-serif"
        }
      ))
    var panel = $(go.Panel, "Auto",
      { margin: new go.Margin(0, 0) });
    // which side the port will be on
    if (leftside) {
      port.toSpot = go.Spot.Left;
      port.toLinkable = true;
      // lab.margin = new go.Margin(1, 0, 0, 1);
      panel.alignment = go.Spot.TopLeft;
      panel.add(port);
      // panel.add(lab);
    } else {
      port.fromSpot = go.Spot.Right;
      port.fromLinkable = true;
      //  lab.margin = new go.Margin(1, 1, 0, 0);
      panel.alignment = go.Spot.TopRight;
      //  panel.add(lab);
      panel.add(port);
    }
    return panel;
  }

How can I achieve that?

      function makePort(name, leftside) {
        var panel =
          $(go.Panel, "Auto",
            {
              portId: name,  // declare this object to be a "port"
              toMaxLinks: 1,  // don't allow more than one link into a port
              cursor: "pointer",  // show a different cursor to indicate potential link point
              margin: new go.Margin(2, 0)
            },
            $(go.Shape, "Rectangle",
              { fill: "orange", stroke: null }),
            $(go.TextBlock, name,  // the name of the port
              { font: "7pt sans-serif", stroke: "white", margin: new go.Margin(2, 2, 0, 2) })
          );

        // set up the port/panel based on which side of the node it will be on
        if (leftside) {
          panel.toSpot = go.Spot.Left;
          panel.toLinkable = true;
          panel.alignment = go.Spot.TopLeft;
        } else {
          panel.fromSpot = go.Spot.Right;
          panel.fromLinkable = true;
          panel.alignment = go.Spot.TopRight;
        }
        return panel;
      }

This produces:

You. Are. The. Best. @walter
Thank you so much.