How to create a custom ContextMenu

@Giosk wrote:

I created a custom adornment menu using the the defineBuilder with the objective to have buttons with the highlight disabled as you can see here:

 go.GraphObject.defineBuilder("ButtonWithoutHighlight", function(args) {
          const { name } = args[1]

          let button = $("Button", makeGObject(name))

          let border = button.findObject("ButtonBorder")
          if (border instanceof go.Shape) {
            border.stroke = null
            border.fill = "transparent"
          }

          button.mouseEnter = function(e, button, prev) {
            let shape = button.findObject("ButtonBorder")
            if (shape instanceof go.Shape) {
              border.stroke = null
              border.fill = "transparent"
            }
          }

          button.mouseLeave = function(e, button, prev) {
            let shape = button.findObject("ButtonBorder")
            if (shape instanceof go.Shape) {
              border.stroke = null
              border.fill = "transparent"
            }
          }

          return button
        })

        const makeGObject = function(name) {
          let SvgIcon

          switch (name) {
            case "map":
              SvgIcon = go.Geometry.parse(mapPath, true)
              break

            default:
              return $(go.TextBlock, name, {
                font: "bold 14pt sans-serif",
                stroke: "#fff",
                desiredSize: new go.Size(16, 16),
                textAlign: "center",
              })
          }

          const gObject = $(go.Shape, {
            column: 0,
            width: 16,
            height: 16,
            margin: 2,
            fill: "#fff",
            strokeWidth: 0,
            geometry: SvgIcon,
          })

          return gObject
        }

let $upperContextMenu = $(
      go.Panel,
      "Horizontal",

      $("ButtonWithoutHighlight", {
        name: "map",
        click: (e, obj) => {
          const contextmenu = obj.part
          const node = contextmenu.data
          console.log("aaaa", node)
        },
      }),

      $("ButtonWithoutHighlight", {
        name: "map",
        contextMenu: $(
          go.Adornment,
          "Vertical",
          new go.Binding("itemArray", "NavigationMaps"),
          {
            itemTemplate: $(
              "ContextMenuButton",
              $(
                go.TextBlock,
                {
                  stroke: "#fff",
                  background: IrionBlue,
                  textAlign: "center",
                  margin: 2,
                },
                new go.Binding("text", "NavigationMapName")
              ),
              {
                alignment: go.Spot.Right,
              }
            ),
          }
        ),

        click: (e, node) => e.diagram.commandHandler.showContextMenu(node),
      })
    )

    const adornmentMenu = $(
      go.Adornment,
      "Vertical",
      $(
        go.Panel,
        "Auto",
        { height: 18, alignment: new go.Spot(1, 0, -10, 0) },

        $(go.Shape, "RoundedTopRectangle", {
          fill: IrionBlue,
          stroke: IrionBlue,
        }),
        $upperContextMenu
      ),
      $(
        go.Panel,
        "Auto",
        $(go.Shape, "RoundedRectangle", {
          spot1: go.Spot.TopLeft,
          spot2: go.Spot.BottomRight,
          stroke: IrionBlue,
          strokeWidth: 2,
          fill: null,
        }),
        $(go.Placeholder, { margin: 1 })
      )
    )

Now I’d like to apply the same style at the buttons in the ContextMenu but this is the result.

Is it possible to apply the same style as I implemented in the “ButtonWithoutHighlight” for the ContextMenu buttons? I tried this way:

go.GraphObject.defineBuilder("ButtonNoHighlight", function(args) {
          const { name } = args[1]

          let button = $(
            "Button",
            $(go.TextBlock, name, {
              font: "bold 14pt sans-serif",
              stroke: "#fff",
              textAlign: "center",
            })
          )

          let border = button.findObject("ButtonBorder")
          if (border instanceof go.Shape) {
            border.stroke = null
            border.fill = "transparent"
          }

          button.mouseEnter = function(e, button, prev) {
            let shape = button.findObject("ButtonBorder")
            if (shape instanceof go.Shape) {
              border.stroke = null
              border.fill = "transparent"
            }
          }

          button.mouseLeave = function(e, button, prev) {
            let shape = button.findObject("ButtonBorder")
            if (shape instanceof go.Shape) {
              border.stroke = null
              border.fill = "transparent"
            }
          }

          return button
        })

and then I used

$("ButtonWithoutHighlight", {
            name: "map",
            contextMenu: $(
              go.Adornment,
              "Vertical",
              new go.Binding("itemArray", "NavigationMaps"),
              {
                itemTemplate: $(
                  "ContextMenuButton",
                  $("ButtonNoHighlight", {
                    name: "mymapelement",
                    click: (e, obj) => {},
                  })
                ),
              }
            ),

            click: (e, node) => e.diagram.commandHandler.showContextMenu(node),
          })

but the result doesn’t take the binding new go.Binding("text", "NavigationMapName")

What do I have to do?

Posts: 6

Participants: 2

Read full topic