Arrowheads not following hidden nodes

I am very new to GoJS so please forgive me, but I inherited a project using the library and need to quickly fix some bugs.
I am noticing that when a node is hidden, then another node attached to it is moved, then the node is unhidden, the arrowhead is pointing to the location where the node was before it was hidden.

For example, I have this graph:

If I hide the node that says “writing”, then move “Writer” around…

When I show “writing” again, the arrow (faint, at the top) is pointing off to where “Writer” used to be.

Any Ideas?

This is very surprising.

First, which version of GoJS are you using, and have you tried it on different browsers?

Second, how are you “hiding” the node? Are you using go-debug.js and looking at the console output for any errors or warnings?

Are there any Groups involved? Have you set Diagram.layout?

Hi Walter,

Thank you so much for the reply. I am using version 5.6.0. Just tested it in Chrome, IE, and Firefox and all seem to be having the same behavior.

I’m still familiarizing myself with the project, but I think I narrowed it down to this chunk of code that is hiding the nodes:

return $(go.Link, { curve: go.Link.Bezier, adjusting: go.Link.None, reshapable: true, relinkableFrom: false, relinkableTo: false, toShortLength: 3, textEditable: false, }, new go.Binding("opacity", "", (data, node) => { const { hidden, showHidden } = data; return showHidden && hidden ? 0.5 : 1; }), new go.Binding("visible", "", (data, node) => { const { hidden, showHidden } = data; return !(!showHidden && hidden); }),

I believe that go-debug.js is enabled because I did see errors for a separate issue, but I don’t see any errors for this.

We aren’t using groups, but I believe diagram.layout has been set. I think this is what sets it (sorry, very new to this)?
`
generateDiagram() {
let diagram = generateDiagramTemplate({ goJSElement: this._goJS });
this.diagram = diagram;
this.diagram.animationManager.isInitial = false;

const nodeTemplateOptions = { 
  onCollapse: this.onCollapse, 
  onExpandOrCollapseAllOfType: this.onExpandOrCollapseAllOfType, 
  findIfAllAreCollapsedOrExpanded: this.findIfAllAreCollapsedOrExpanded,
  onHide: this.onHide, 
  onShiftClick: this.onShiftClick 
};

diagram.nodeTemplateMap.add("ROOT", nodeRootTemplate(nodeTemplateOptions));
diagram.nodeTemplateMap.add("COMPOSITE", nodeCompositeTemplate(nodeTemplateOptions));
diagram.nodeTemplateMap.add("ATOM", nodeAtomTemplate(nodeTemplateOptions));
diagram.nodeTemplateMap.add("SAY", nodeSayTemplate(nodeTemplateOptions));

diagram.linkTemplateMap.add("IN", linkInTemplate);
diagram.linkTemplateMap.add("FOLLOWS", linkFollowsTemplate);
diagram.linkTemplateMap.add("NAMED", linkNamedTemplate);

diagram.linkTemplateMap.add("IN_TEXT", linkInTextTemplate);
diagram.linkTemplateMap.add("FOLLOWS_TEXT", linkFollowsTextTemplate);
diagram.linkTemplateMap.add("NAMED_TEXT", linkNamedTextTemplate);

let { normalizedTrace }: { normalizedTrace: NormalizedTrace } = this.props;
diagram.layout = generateLayoutTemplate({ traceLayout: normalizedTrace.layout });

this.postGenerateDiagram();

if (!this.state.diagramInitialized) { this.setState({ diagramInitialized: true }); }

}`

I just tried this link template, which I believe is exactly like yours, but a bit simpler:

    myDiagram.linkTemplate =
      $(go.Link,
        {
          curve: go.Link.Bezier,
          reshapable: true,
          toShortLength: 3,
        },
        new go.Binding("visible", "", (data, link) => {
          return !data.hidden;
        }),
        $(go.Shape)
      );

I was unable to reproduce any error.

It’s getting harder to guess at what the problem might be.

Are you sure that whenever you make changes to the diagram that you always do so within a transaction?

Ok, that narrows it down. I"m starting to think it has something to do with the Redux state that the node locations are being stored in. The project is really big and complicated, so it’s been hard trying to figure out where this is stemming from.

I’m going to try working around this another way, probably using Redux, since now I know it probably has nothing to do with this library.

Thank you so much for testing this out and narrowing the issue down for me!