Problem with port in node when using data binding

@Mik wrote:

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?

Posts: 4

Participants: 2

Read full topic