Sophisticated adornment


I currently have a selection adornment which shows a custom button.

What I would like to do is, when the button is clicked, show other buttons around that main button, with the new buttons linked to the main one by means of a straight line (all this within the adornment).

I have a number of issues and would like some advice:

(1) how do I position new parts that I add to an adornment, relative to that adornment? All I seem to be able to do is position the new parts relative to the adorned part.

(2) How can I draw a straight line between my additional parts and the original button?


First, one cannot add Parts to any Part, including Adornments. But you could add "Button"s or other Panels to your Adornment, dynamically.

Here is a change to the State Chart sample, replacing the behavior of the Button in the selection Adornment to just show two more buttons in the adornment along with two connector lines:

[code] // unlike the normal selection Adornment, this one includes a Button
myDiagram.nodeTemplate.selectionAdornmentTemplate =
$(go.Adornment, “Spot”,
$(go.Panel, “Auto”,
$(go.Shape, { fill: null, stroke: “blue”, strokeWidth: 2 }),
$(go.Placeholder) // this represents the selected Node
// the button to create a “next” node, at the top-right corner
{ alignment: go.Spot.TopRight, alignmentFocus: go.Spot.Left, name: “BUTTONPANEL” },
{ name: “BUTTON”, click: addButtons }, // this function is defined below
$(go.Shape, “SevenPointedStar”, { desiredSize: new go.Size(6, 6) })
) // end first button
) // end Panel
); // end Adornment

function addButtons(e, obj) {
  var adorn = obj.part;
  e.handled = true;
  var diagram = adorn.diagram;
  diagram.startTransaction("Add Buttons");

  var panel = adorn.findObject("BUTTONPANEL");
              { geometry: go.Geometry.parse("M6 29 L23 9") }));
              { geometry: go.Geometry.parse("M6 29 L23 43") }));
              { position: new go.Point(20, 0) },
              { click: function(e, obj) { alert("button 1 on " + adorn.adornedPart); } },
              $(go.TextBlock, "1")
              { position: new go.Point(20, 40) },
              { click: function(e, obj) { alert("button 2 on " + adorn.adornedPart); } },
              $(go.TextBlock, "2")
  var origbutton = panel.findObject("BUTTON");
  origbutton.position = new go.Point(0, 23);
  panel.add(origbutton);  // change z-order to be the last element in the panel

  diagram.commitTransaction("Add Buttons");

Note that the lines are just Shapes whose geometries are hard-coded along with the positioning of the buttons. You may need to adjust them depending on how you want to arrange the buttons and how big they are.


Thanks Walter!