Adornment menu positioning

GoJS
1

Hello,
I created an adornment menu like this one:

Adornment1

but I would like to obtain something like this:

Adornment2

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

2

The primary problem is that you set margin: 3 on the Shape that is the border around the Placeholder. That causes the panel layout to assume the Shape needs that margin of 3 units all around, resulting in that gap.

        $(go.Panel, "Auto",
          $(go.Shape, "RoundedRectangle", {
            //margin: 3,  // this used to force a margin around the Shape
            spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight,
            stroke: "lightgreen",
            strokeWidth: 2,
            fill: null,
          }),
          $(go.Placeholder, { margin: 1 })
        )

I’m suggesting a margin on the Placeholder of half the strokeWidth of the Shape so that the Shape’s stroke does not overlap with the adorned Node.

Also, the alignmentFocus has no effect in a “Vertical” Panel. I suggest that you do something like:

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

The -10 there leaves some space on the right side. Alternatively you could assign a Margin that had 10 on the right and zero on the other three sides.

3

Hi Walter as always you solved my problem!

Thanks