Sophisticated adornment

GoJS
1

Hello,

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?

Thanks!
Marc.

2

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
$(go.Panel,
{ alignment: go.Spot.TopRight, alignmentFocus: go.Spot.Left, name: “BUTTONPANEL” },
$(“Button”,
{ 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");
  panel.add($(go.Shape,
              { geometry: go.Geometry.parse("M6 29 L23 9") }));
  panel.add($(go.Shape,
              { geometry: go.Geometry.parse("M6 29 L23 43") }));
  panel.add($("Button",
              { position: new go.Point(20, 0) },
              { click: function(e, obj) { alert("button 1 on " + adorn.adornedPart); } },
              $(go.TextBlock, "1")
            ));
  panel.add($("Button",
              { 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");
}[/code]

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.

3

Perfect.

Thanks Walter!