Gojs_context menu on mouse hover need to change the color of text

GoJS
1

Hello Guys,

Am using context menu which on initial load is on black text color and on mouse hover backgroung shou should be red color with color of the text should be white color

  contextMenu: $(
          'ContextMenu',
          { width: 160 },
            $(
            'ContextMenuButton',
            $(go.TextBlock, 'Delete element', {
              font: '18px ',
              stroke: 'black',
              alignment: go.Spot.Left,
              margin: new go.Margin(7, 16, 7, 16),
            }),
            {
              _buttonFillOver: 'red',
            },

            {
              click: (e, node) => removeData(e, node.part),
            },
          )
        ),

With the above code am seeing context menu initially with text in black color and when we mouse hover am seeing the background in red color , but how to change the stroke to white.
So i can see context menu on mouse hover → white text in red background color

Thanks in Advance
J

2

First I should point out that that is not a valid CSS font specifier. Even without the trailing space. You need to include a font family.

Second, I suppose you could do this:

        $('ContextMenu',
          { width: 160 },
          $('ContextMenuButton',
            $(go.TextBlock, 'Delete element',
              {
                font: '18px sans-serif',
                stroke: 'black',
                alignment: go.Spot.Left,
                margin: new go.Margin(7, 16, 7, 16),
                mouseEnter: (e, tb) => tb.stroke = "white",
                mouseLeave: (e, tb) => tb.stroke = "black"
              }),
            {
              _buttonFillOver: 'red',
              click: (e, button) => alert(button.part.data.text)
            }
          )
        )

But that might not result in the behavior that you want.

Third, you could implement mouseEnter and mouseLeave events yourself:

      contextMenu:
        $('ContextMenu',
          { width: 160 },
          $('ContextMenuButton',
            $(go.TextBlock, 'Delete element',
              {
                font: '18px sans-serif',
                stroke: 'black',
                alignment: go.Spot.Left,
                margin: new go.Margin(7, 16, 7, 16),
              }),
            {
              _buttonFillOver: 'red',
              click: (e, button) => alert(button.part.data.text),
              mouseEnter: (e, button) => { button.elt(0).fill = button._buttonFillOver; button.elt(1).stroke = "white"; },
              mouseLeave: (e, button) => { button.elt(0).fill = button._buttonFillNormal; button.elt(1).stroke = "black"; }
            }
          )
        )
    }