Adornment menu positioning

@Giosk wrote:

Hello,
I created an adornment menu like this one:

but I would like to obtain something like this:

is it possibile?

This is my code

const makeButton = (btnText, action, visiblePredicate) => {
  return $(
    "ContextMenuButton",
    $(go.TextBlock, btnText),
    { click: action },
    visiblePredicate
      ? new go.Binding("visible", "", function(o, e) {
          return o.diagram ? visiblePredicate(o, e) : false
        }).ofObject()
      : {}
  )
}

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

  var button = go.GraphObject.make(
    "Button",
    go.GraphObject.make(go.TextBlock, name, {
      font: "bold 8pt sans-serif",
      desiredSize: new go.Size(10, 10),
      textAlign: "center",
    })
  )

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

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

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

  return button
})

const getMenu = color => {
  const adornmentMenu = $(
    go.Adornment,
    "Vertical",
    $(
      go.Panel,
      "Auto",
      {
        height: 10,
        alignment: go.Spot.TopRight,
        alignmentFocus: go.Spot.Bottom,
      },

      $(go.Shape, "RoundedTopRectangle", {
        fill: "lightgreen",
        stroke: "lightgreen",
      }),

      $(
        go.Panel,
        "Horizontal",
        $("ButtonWithoutHighlight", {
          name: "+",
          click: (e, obj) => {
            const contextmenu = obj.part
            const nodedata = contextmenu.data
            console.log("node content: ", nodedata)
          },
        }),

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

        $("ButtonWithoutHighlight", {
          name: "b",
          click: (e, obj) => {
            const contextmenu = obj.part
            const nodedata = contextmenu.data
            console.log("node content: ", nodedata)
          },
        })
      )
    ),
    $(
      go.Panel,
      "Auto",
      $(go.Shape, "RoundedRectangle", {
        margin: 3,
        stroke: "lightgreen",
        strokeWidth: 2,
        fill: null,
      }),
      $(go.Placeholder)
    )
  )

  return adornmentMenu
}

Thanks

Posts: 1

Participants: 1

Read full topic