How to bind a property of a link with a TreeModel

GoJS
1

Hello! Using a TreeModel, how can I create a binding on a link property? It’s not clear to me how to do this since the link itself does not have any model data, only the parent/child nodes.

What I’m trying to do:

I’m using the ReactDiagram component to render a TreeModel. I want some links to be dashed lines but not others (like the screenshot below). I also want it to be responsive to the state in my parent React component to control whether a link is dashed or not.

image

What I’ve tried:
I have it working on the initial load (but not responsive) by setting “parentLinkCategory” to be a LinkTemplate that is dashed. However, I want the dashed property to change based on the react state. I understand that the category/template of a node/link is only used for the initial render and that changing the category/template later will not update the properties.

So, seems like a binding could work instead but I can’t figure out how to do a binding for a link in a TreeModel.

2

Each Link in a Diagram using a TreeModel is data bound to the child node’s data object. So for example a boolean “dashed” property on your node data objects could be used to control whether the link from a parent node to that child node is dashed or not. So you don’t have to use two separate link templates, which means for simple cases you don’t need to use multiple templates. That will reduce the code that you have. But if the Links need to be really different from each other, it’s easier and simpler to use different templates.

myDiagram.linkTemplate =
  new go.Link({ routing: go.Link.Orthogonal, corner: 10 })
    .add(
      new go.Shape({ stroke: "blue", strokeWidth: 2 })
        .bind("strokeDashArray", "dashed", dashed => dashed ? [6, 10] : null)
    );

Then for example for some selected nodes you could toggle the appearance of links coming into those nodes by doing something like:

  myDiagram.commit(diag => {
    diag.selection.each(sel => {
      if (sel instanceof go.Node) diag.model.set(sel.data, "dashed", !sel.data.dashed);
    });
  })