Remove separator line in ContextMenuButton

GoJS
1

How do you remove the lines marked with blue arrow from ContextMenu and ContextMenuButton? They are most likely the border of the ButtonBorder but none of these worked for me:

go.GraphObject.make('ContextMenuButton', {
  'ButtonBorder.fill': 'white',
  'ButtonBorder.stroke': 'transparent',
  'ButtonBorder.strokeWidth': 0,
  _buttonStrokeNormal: 'transparent',
}

Screenshot 2024-01-08 at 2.03.28 PM
Screenshot 2024-01-08 at 2.03.28 PM699Ă—536 43.7 KB

2

That’s caused by anti-aliasing of the two adjacent rectangles.

You can avoid it by redefining the “ContextMenu” builder so that there’s a white background between the "ContextMenuButton"s. Or just insert a Panel to do that. For example:

        $("ContextMenu",
          $(go.Panel, "Vertical",
            { background: "white" },
            $("ContextMenuButton",
              $(go.TextBlock, "first"),
              { click: (e, button) => console.log("first") }),
            $("ContextMenuButton",
              $(go.TextBlock, "second"),
              { click: (e, button) => console.log("second") }),
          )
        ),
1 Like
3

Amazing, thanks.

4

Actually, could you just set the background of the “ContextMenu” panel?

    $("ContextMenu",
        { background: "white" },
        $("ContextMenuButton",
          $(go.TextBlock, "first"),
          { click: (e, button) => console.log("first") }),
        $("ContextMenuButton",
          $(go.TextBlock, "second"),
          { click: (e, button) => console.log("second") }),
    ),

That is, without an intermediate Panel?

5

That doesn’t work. In fact setting the background on ContextMenu doesn’t seem to have any effect.