portId binding not working

GoJS
#1

I’m having trouble with getting bindings to work for portId.

I have 2 circles let’s call nodeA and nodeB with a link between the two as follows:

image
image1120×766 28.5 KB

In my application I have the ability to wrap a circle with a larger circle. If a user does this then I need the arrow to point to the larger circle. What’s actually happening though is that the arrow looks like it’s not going to the actual circular shape. In this picture the top is the desired result but the bottom is whats’ actually happening

image
image872×1282 91.3 KB

Here’s the code for the smaller circle and larger circle. As you can see they both have a portId binding and do the opposite. So if large circle exists then the portId for small circle is null and portId for large circle is ‘’, and vice versa

image
image1360×1356 135 KB

I’ve also already tested out the binding and I can see it is being triggered at the correct time and going down the correct path so I’m not sure why it doesn’t work as expected

#2

I wouldn’t fiddle with portId if I were you. Doesn’t something like this do what you want?

      $(go.Node, "Auto",
        {
          locationSpot: go.Spot.Center,
          click: function(e, node) {
            e.diagram.commit(function(diag) {
              node.elt(0).visible = !node.elt(0).visible;
              node.findLinksConnected().each(function(l) { l.invalidateRoute(); });
            });
          }
        },
        $(go.Shape, "Circle",
          { fill: "lightblue", spot1: new go.Spot(0, 0, 6, 6), spot2: new go.Spot(1, 1, -6, -6) }),
        $(go.Panel, "Auto",
          $(go.Shape, "Circle",
            { fill: "lightblue" }),
          $(go.TextBlock,
            { margin: 8, editable: true },
            new go.Binding("text").makeTwoWay())
        )
      )

Of course you probably don’t want to use a click on a node to change the appearance…

#3

thanks for the reply! Out of curiosity why do you suggest not to fiddle with portId? Don’t I still need to use portId so that it goes to the actual circular shape and not the panel?

#4

That depends on what you want. As you can see in the node template I gave you, I didn’t need to set portId on any GraphObject.

But mostly I was encouraging you to find a solution so that you wouldn’t need to set portId dynamically in each node on different GraphObjects.

#5

So I was still getting the same issue even with your solution which eventually led me to another piece of code that was the culprit. I was setting a background colour to transparent on the panel which was drawing a transparent background. Removing that makes the arrows work properly.

The problem I’m facing now though is that when I transition from the small circle to the small circle covered by the large circle, the arrow does not automatically update to reference the large circle. It only updates when I move any of the nodes at which point it recomputes the links and adjusts the arrow.

Do you have any suggestions for updating links? I tried calling invalidateRoute but that wasn’t working. My hypothesis for why it’s not working is because when i call invalidateRoute the larger circle still hasn’t been drawn/rendered yet.

#6

Are you making all of the changes within a single transaction?

#7

Yeah - I think the problem actually is that i’m not setting visible to the right graphObject.

I’m doing obj.findObject(‘pie’) to get the panel obj but how do i get the circle graphobject within this panel?
image

#8

I figured it out! The problem was that I wasn’t making the correct graphObject visible. Thanks for all your help and prompt replies!