Problem with port in node when using data binding


#1

Hi, I’ve problem with this piece of code (started from the example htmlinteraction):

      myDiagram.nodeTemplateMap.add("", // default category
        GO(go.Node, "Table", nodeStyle(), {
            locationSpot: go.Spot.Center,
          },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          GO(go.Panel, "Auto",
            GO(go.Shape, "Ellipse", {
                strokeWidth: 2,
                fill: fill1,
                name: "SHAPE"
              },
              new go.Binding("figure", "figure"),
              new go.Binding("fill", "fill"),
              new go.Binding("stroke", "stroke")
            ),
            GO(go.TextBlock, {
                margin: 5,
                maxSize: new go.Size(200, NaN),
                wrap: go.TextBlock.WrapFit,
                textAlign: "center",
                editable: true,
                font: "bold 9pt Helvetica, Arial, sans-serif",
                name: "TEXT"
              },
              new go.Binding("text", "text").makeTwoWay())),
          self.makePort("T", go.Spot.Top, go.Spot.Top, "toLinkableTop", "fromLinkableTop"),
          self.makePort("L", go.Spot.Left, go.Spot.Left, "toLinkableLeft", "fromLinkableLeft"),
          self.makePort("R", go.Spot.Right, go.Spot.Right, "toLinkableRight", "fromLinkableRight"),
          self.makePort("B", go.Spot.Bottom, go.Spot.Bottom, "toLinkableBottom", "fromLinkableBottom")
        ));

The problem is in the function makeport:

    makePort: function (name, align, spot, output, input) {
      var self = this;
      var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
      name = name + count.toString();
      return GO(go.Shape, {
          fill: "transparent", // changed to a color in the mouseEnter event handler
          strokeWidth: 0, // no stroke
          alignmentFocus: spot,
          width: horizontal ? NaN : 8, // if not stretching horizontally, just 8 wide
          height: !horizontal ? NaN : 8, // if not stretching vertically, just 8 tall
          alignment: align, // align the port on the main Shape
          stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),
          portId: name, // declare this object to be a "port"
          fromSpot: spot, // declare where links may connect at this port
          //  fromLinkable: true, // declare whether the user may draw links from here
          toSpot: spot, // declare where links may connect at this port
          //  toLinkable: true, // declare whether the user may draw links to here
          cursor: "pointer", // show a different cursor to indicate potential link point
          mouseEnter: function (e, port) { // the PORT argument will be this Shape
            if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
          },
          mouseLeave: function (e, port) {
            port.fill = "transparent";
          }
        }, new go.Binding("toLinkable", input),
        new go.Binding("fromLinkable", output)
      );
    },

I called the ports T,L,R,B, but this node that create 4 figures by a model template gives to each figure a different id(-1,-2,-3,-4),
but to the port the same id (more precisely gojs assign null value to the ports id in this case)

This is a problem because it causes a bug in the properties:
toSpot
fromSpot
that need the id of the port to work correctly(without the id the link dragged to a port to another is assigned to a casual port).

I tried to bind the portId value like the toLinkable and fromLinkable properties without success.

Can you help me? There’s a solution?

In others framework I see that the id of internal object as the (main object ID)/(internal object ID decided by the developer).
Like :
-1/T
-1/L

to make sure they are unique.

this is the json model that I’ve used:

     [{
        text: "Lake",
        fill: fill1,
        stroke: brush1,
        figure: "Diamond",
        toLinkableTop: false,
        fromLinkableTop: true,
        toLinkableLeft: true,
        fromLinkableLeft: false,
        toLinkableRight: true,
        fromLinkableRight: false,
        toLinkableBottom: false,
        fromLinkableBottom: false
      }, {
        text: "Ocean",
        fill: fill2,
        stroke: brush2,
        figure: "Rectangle",
        toLinkableTop: true,
        fromLinkableTop: true,
        toLinkableLeft: true,
        fromLinkableLeft: true,
        toLinkableRight: true,
        fromLinkableRight: true,
        toLinkableBottom: true,
        fromLinkableBottom: true
      }, {
        text: "Sand",
        fill: fill3,
        stroke: brush3,
        figure: "Diamond",
        toLinkableTop: false,
        fromLinkableTop: true,
        toLinkableLeft: true,
        fromLinkableLeft: false,
        toLinkableRight: true,
        fromLinkableRight: false,
        toLinkableBottom: false,
        fromLinkableBottom: false
      }, {
        text: "Goldfish",
        fill: fill4,
        stroke: brush4,
        figure: "Rectangle",
        toLinkableTop: true,
        fromLinkableTop: true,
        toLinkableLeft: true,
        fromLinkableLeft: true,
        toLinkableRight: true,
        fromLinkableRight: false,
        toLinkableBottom: true,
        fromLinkableBottom: true
      }]

Can you help me please?


#2

By the way, please format your code nicely. Just surround your code with triple backquotes. Code Formatting

Why are you modifying the port identifier in your makePort function?

Port identifiers need to be unique within a Node, but different Nodes can use the same portIds. That was the case with the original code, where the template assigned a different letter to each port element.


#3

Hi walter,Sorry, it’s only an attempt that i forgot to comment.
I’ve the problem also without it.

I tried however to comment the line and refresh but I’ve the same problem.


#4

I do not understand what the problem is.

fromSpot and toSpot and spot computations do not depend on the port identifier.

Have you set GraphLinksModel.linkFromPortIdProperty and linkToPortIdProperty? https://gojs.net/latest/api/symbols/GraphLinksModel.html#linkFromPortIdProperty


#5

Yeeeee thank youuu,
I added this to the example:
var myJson_Start = ‘{ “class”: “go.GraphLinksModel”,“linkFromPortIdProperty”: “fromPort”,“linkToPortIdProperty”: “toPort”, “nodeDataArray”: [{“key”:-1, “category”:“Start”, “loc”:“175 660”, “text”:“Start”} ], “linkDataArray”: [ ]}’;
var myJson = ‘{ “class”: “go.GraphLinksModel”,“linkFromPortIdProperty”: “fromPort”,“linkToPortIdProperty”: “toPort”, “nodeDataArray”: [], “linkDataArray”: [ ]}’;
myDiagram.model = go.Model.fromJson(myJson);

Now it works fine and in the events the portid isn’t null now!!

Thank you very much