Editing Port Names

GoJS
1

Hi,

I’m trying to edit port names by using TextBlock.editable property. It’s set true but I can’t edit port names properly. As you can see in the images, when I edit just one port name, all port names change.

image image

I want to edit only one port name but all of them are being edited. How can I prevent that? Thanks.

2

It looks like you have a TwoWay Binding on the TextBlock.text property that has the source property shared by all ports. How have you defined the port?

3

Hi Walter,
Yes I’m using a TwoWay Binding like this:

function makePort(name, leftside, portSize) {
    if (leftside) {
      var panel =
        $(go.Panel, "Auto", {
        },
          $(go.Shape, "Rectangle", {
            margin: new go.Margin(-0.5, 0),
            fill: "orange",
            stroke: "white",
            desiredSize: new go.Size(0, 0),
            portId: name,
            toMaxLinks: 20,
            cursor: "pointer",
            toLinkable: true,
          }),
          $(go.TextBlock, name, // The name of the port
            {
              font: "8pt sans-serif",
              stroke: "white",
              margin: new go.Margin(2, 2, 0, 2)
            },
            new go.Binding("text", "name").makeTwoWay()
          )
        )
      panel.fromSpot = go.Spot.Left;
      panel.fromLinkable = true;
      panel.alignment = go.Spot.TopLeft;
    } else {
      var panel =
        $(go.Panel, "Auto", {
        },
          $(go.Shape, "Rectangle", {
            margin: new go.Margin(-0.5, 0),
            fill: "orange",
            stroke: "white",
            desiredSize: new go.Size(9 + portSize * (7), 18),
            portId: name, // Declare this object to be a "port"
            toMaxLinks: 20, // Don't allow more than one link into a port
            cursor: "pointer", // Show a different cursor to indicate potential link point
            fromLinkable: true,
          }),
          $(go.TextBlock, name, // The name of the port
            {
              font: "8pt sans-serif",
              editable: true,
              stroke: "white",
              margin: new go.Margin(2, 2, 0, 2),
              editable:true,
            },
            new go.Binding("text", "name").makeTwoWay()
          )
        )
      panel.fromSpot = go.Spot.Right;
      panel.fromLinkable = true;
      panel.alignment = go.Spot.TopRight;
    }
    return panel;
  }

All ports are being created by this function one by one. It’s actually the DataFlow sample.

4

So every port is getting the text string from the node’s data.name property. This explains why the same string is shown in all ports, and why when you edit one of them they all get the new value.

You need to specify a different property name as the source for each port. Or else have both binding conversion functions get and set them differently.