Context Menu Button Color changing to node?

GoJS
1

I may only be coding it incorrectly, but there is an unexpected interaction between the color of the node I’m clicking on for the context menu to show up and the color of the context menu buttons. The buttons are are currently go.Shapes that are supposed to be their own color with an internal table and text block. Instead, they end up being the same color as the node I clicked on, rather than their intended colors.

 $('ContextMenuButton',
        // Second option.
        $(go.Shape,
          'Rectangle',
          { stroke: null, strokeWidth: 0, fill: 'green' },
          new go.Binding('fill', 'color'),
          { click: function(e, obj) { console.log('Clicked the button.'); }}
        ),
        $(
          go.Panel,
          'Table',
          { margin: 6, maxSize: new go.Size(150, NaN) },
          $(go.RowColumnDefinition, {
            column: 0,
            alignment: go.Spot.Center
          }),
          // the text
          $(
            go.TextBlock,
            {
              row: 0,
              column: 0,
              maxSize: new go.Size(250, NaN),
              margin: 1,
              font: '500 15px Roboto, sans-serif',
              alignment: go.Spot.Center
            },
            'Do Nothing'
          )
        )
      )
2

Do you have a mockup of what you’d like your context menu to look like? I’m not sure it needs to be as complicated as you’ve defined it.

It may be as simple as this:

$("ContextMenuButton",
  { click: function(e, obj) { console.log('Clicked the button.'); } },
  new go.Binding("ButtonBorder.fill", "ctxcolor"),  // assumes the node data has a property ctxcolor
  $(go.TextBlock, { font: "500 15px Roboto, sans-serif" }, "Do Nothing")
)

Notice it is bound to a separate property, as I assume your “color” property is what controls the color of the node itself.

3

I’m trying to make a button that is a green shape, rather than a text block. I’m wondering why the node I click on to make the context menu appear is passing it’s color to the shape in the context menu button.

4

Okay, it was the

}, new go.Binding('fill','color'),

since ‘color’ was defined in the node I click on. All I had to do was remove that, and it worked as intended. Specifically, I deleted the entire binding call, since it seems to override any other properties I set.