Problems using ContextMenu

[xinnai]

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, but now it looks 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?

The code 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: function (e, shape) { console.log("click", e, shape); }, }, 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(), "Class1"), {
          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(), "Class2"), {
          click: function (e, obj) {
            var node = obj.part.adornedPart;
            alert("Command 2 on " + node.data.text);
            node.removeAdornment("ContextMenuOver");
          },
        }),
        $("Button", $(go.TextBlock, this.contextMenuStyle(), "Class3"), {
          click: function (e, obj) {
            var node = obj.part.adornedPart;
            alert("Command 1 on " + node.data.text);
            node.removeAdornment("ContextMenuOver");
          },
        }),
        $("Button", $(go.TextBlock, this.contextMenuStyle(), "Class4"), {
          click: function (e, obj) {
            var node = obj.part.adornedPart;
            alert("Command 2 on " + node.data.text);
            node.removeAdornment("ContextMenuOver");
          },
        }),
        $("Button", $(go.TextBlock, this.contextMenuStyle(), "Class5"), {
          click: function (e, obj) {
            var node = obj.part.adornedPart;
            alert("Command 1 on " + node.data.text);
            node.removeAdornment("ContextMenuOver");
          },
        }),
        $("Button", $(go.TextBlock, this.contextMenuStyle(), "Class6"), {
          click: function (e, obj) {
            var node = obj.part.adornedPart;
            alert("Command 2 on " + node.data.text);
            node.removeAdornment("ContextMenuOver");
          },
        })
      ),
      this.contextPanel
    )
  );
},

`

[simonsarris]

Please use the support forum for support questions, not the issue tracker.