Questions about styling tree expander buttons

GoJS
1

Caveat: I am not a developer. I am a visual designer trying to style a sample flow chart diagram.

  1. Can I change the font color of the default tree expander button? I’d like to have a white plus/minus sign on a dark blue button. Is this possible?

  2. Can I change the rollover color of the default tree expander button?
    ButtonBorder.stroke and ButtonBorder.fill work perfectly for the default state. I can’t figure out how to set the rollover equivalents.

Thanks for any tips you might have for this newbie.

Martha

2

Yes, you can customize the appearance of a “TreeExpanderButton”, or in fact of pretty much everything that is drawn in a diagram.

First, to understand "Button"s and "TreeExpanderButton"s in particular, you need to see how they are defined. This is documented at http://gojs.net/latest/intro/buttons.html, in the latter half of the page. That will tell you what GraphObjects there are, what they are named, and what properties you could fiddle with.

Second, the Tree View sample, http://gojs.net/latest/samples/treeView.html, demonstrates how you can do that customization. As a further customization, consider this modification of TreeView’s node template:

  myDiagram.nodeTemplate =
    $(go.Node,
      // no Adornment: instead change panel background color by binding to Node.isSelected
      { selectionAdorned: false },
      $("TreeExpanderButton",
        { width: 14,
          "ButtonIcon.stroke": "white",
          "ButtonBorder.fill": "darkblue",
          "ButtonBorder.stroke": "transparent",
          "_buttonFillOver": "darkred",
          "_buttonStrokeOver": "red"
        }),
      . . .

Note how you can set properties on GraphObjects inside the button by prefixing the property name with the name of the GraphObject. If there is no “name:” on a GraphObject, one cannot refer to it by name.

This example also sets two internal properties on the button itself that are used by the mouseEnter and mouseLeave event handler functions.

Finally, if this does not provide the kind of customization that you want to do, you can implement your own buttons. Just adapt the code from that http://gojs.net/latest/intro/buttons.html page.

3

Walter, this helps A LOT. Thanks for your speedy reply.