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.
![navmap]()
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")
![navmap2]()
What do I have to do?
