Hi, thank you for your hard work, please help me with my problems.
I want to make a ContextMenu with tabs on the left, and change the class of the shapes on the right side, like this:
but now it look like this:
I make an icon on the top-right of the node to open a ContextMenu. The question is :
1、How can I change the shapes on the right side when I click the buttons ?
2、On the right side , I want three shapes in a row and wrap to the next row automatically, but now it align in the middle and don’t wrap at all. How can I make it align to the top and wrap automatically?
3、How can I change the selected node‘s shape when I click one shape on the right side?
The code is bellow
`
initNodeContextMenu() {
var $ = go.GraphObject.make; // for conciseness in defining templates
this.contextPanel = $(
go.Panel,
“Horizontal”,
{
width: 180,
height: 170,
background: "#1D1F25",
itemArray: shapesArray,
// defaultAlignment: go.Spot.Top, // thus no need to specify alignment on each element
},
new go.Binding("itemArray", "someProperty"),
{
itemTemplate: $(
go.Panel,
{
mouseEnter: function (e, shape) {
shape.background = "black";
console.log("mouseEnter", e, shape);
},
mouseLeave: function (e, shape) {
console.log("mouseLeave", e, shape);
shape.background = "transparent";
},
},
// set Panel.background to a color based on the Panel.itemIndex
// new go.Binding("background", "itemIndex",
// // using this conversion function
// function(i) { return (i%2 === 0) ? "lightgreen" : "lightyellow"; })
// // bound to this Panel itself, not to the Panel.data item
// .ofObject(),
$(go.Shape, "RoundedRectangle", {
width: 60,
height: 60,
fill: "transparent",
}),
$(
go.Picture,
{
margin: 12,
width: 38,
height: 38,
click: (e, shape) => {
console.log("click", e, e.part.data);
this.myDiagram.selection.each((node) => {
if (node instanceof go.Node) {
// ignore any selected Links and simple Parts
// Examine and modify the data, not the Node directly.
var data = node.data;
console.log(333, data);
// Call setDataProperty to support undo/redo as well as
// automatically evaluating any relevant bindings.
this.myDiagram.model.setDataProperty(
data,
"source",
shape.part.data.source
);
}
});
},
},
new go.Binding("source")
)
),
}
);
this.nodeContextMenu = $(
go.Adornment,
"Spot",
$(go.Placeholder),
$(
go.Panel,
"Horizontal",
{ alignment: go.Spot.Right, alignmentFocus: go.Spot.Left },
$(
go.Panel,
"Vertical",
$("Button", $(go.TextBlock, this.contextMenuStyle(), "图形"), {
click: function (e, obj) {
var node = obj.part.adornedPart;
alert("Command 1 on " + node.data.text);
node.removeAdornment("ContextMenuOver");
},
mouseEnter: function (e) {
console.log(e);
},
}),
$("Button", $(go.TextBlock, this.contextMenuStyle(), "办公"), {
click: function (e, obj) {
var node = obj.part.adornedPart;
alert("Command 2 on " + node.data.text);
node.removeAdornment("ContextMenuOver");
},
}),
$("Button", $(go.TextBlock, this.contextMenuStyle(), "健康"), {
click: function (e, obj) {
var node = obj.part.adornedPart;
alert("Command 1 on " + node.data.text);
node.removeAdornment("ContextMenuOver");
},
}),
$("Button", $(go.TextBlock, this.contextMenuStyle(), "金融"), {
click: function (e, obj) {
var node = obj.part.adornedPart;
alert("Command 2 on " + node.data.text);
node.removeAdornment("ContextMenuOver");
},
}),
$("Button", $(go.TextBlock, this.contextMenuStyle(), "环保"), {
click: function (e, obj) {
var node = obj.part.adornedPart;
alert("Command 1 on " + node.data.text);
node.removeAdornment("ContextMenuOver");
},
}),
$("Button", $(go.TextBlock, this.contextMenuStyle(), "3D"), {
click: function (e, obj) {
var node = obj.part.adornedPart;
alert("Command 2 on " + node.data.text);
node.removeAdornment("ContextMenuOver");
},
})
),
this.contextPanel
)
);
},
`
initNodeTemplate() {
var $ = go.GraphObject.make;
this.myDiagram.nodeTemplate = $(
go.Node,
"Table",
{ contextMenu: this.nodeContextMenu },
this.nodeStyle(),
$(
go.Panel,
"Vertical",
$(
go.Picture,
{ margin: 5, width: 55, height: 55 },
new go.Binding("source")
),
$(
go.TextBlock,
this.textStyle(),
{
margin: 8,
maxSize: new go.Size(160, NaN),
wrap: go.TextBlock.WrapFit,
editable: true,
},
new go.Binding("text").makeTwoWay()
)
),
this.makePort("T", go.Spot.Top, go.Spot.TopSide, false, true),
this.makePort("L", go.Spot.Left, go.Spot.LeftSide, true, true),
this.makePort("R", go.Spot.Right, go.Spot.RightSide, true, true),
this.makePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, false)
);
},
