Adding a close button top right of ER diagram

GoJS
1

I’m rather new to gojs but I’m using the ER diagram sample with some tweaks. I want to add a close button to the top right of the panel. I saw a sample somewhere but I can’t find it anymore.

This is the code I’m using:

$(go.Node, "Auto",  // the whole node panel
	{
		selectionAdorned: false,
		resizable: false,
		layoutConditions: go.Part.LayoutStandard & ~go.Part.LayoutNodeSized,
		fromSpot: go.Spot.AllSides,
		toSpot: go.Spot.AllSides,
		isShadowed: true,
		shadowOffset: new go.Point(3, 3),
		shadowColor: "#C5C1AA"
	},
	new go.Binding("location", "location").makeTwoWay(),
	// whenever the PanelExpanderButton changes the visible property of the "LIST" panel,
	// clear out any desiredSize set by the ResizingTool.
	new go.Binding("desiredSize", "visible", function(v) { return new go.Size(NaN, NaN); }).ofObject("LIST"),
	// define the node's outer shape, which will surround the Table
	$(go.Shape, "RoundedRectangle",
	{ fill: 'white', stroke: "#eeeeee", strokeWidth: 3 }),
	$(go.Panel, "Table",
	{ margin: 8, stretch: go.GraphObject.Fill },
	$(go.RowColumnDefinition, { row: 0, sizing: go.RowColumnDefinition.None }),
	// the table header
	$(go.TextBlock,
		{
		row: 0, alignment: go.Spot.Center,
		margin: new go.Margin(0, 24, 0, 2),  // leave room for Button
		font: "bold 16px sans-serif"
		},
		new go.Binding("text", "key")),
	// the collapse/expand button
	$("PanelExpanderButton", "LIST",  // the name of the element whose visibility this button toggles
		{ row: 0, alignment: go.Spot.TopRight }),
	// the list of Panels, each showing an attribute
	$(go.Panel, "Vertical",
		{
		name: "LIST",
		row: 1,
		padding: 3,
		alignment: go.Spot.TopLeft,
		defaultAlignment: go.Spot.Left,
		stretch: go.GraphObject.Horizontal,
		itemTemplate: itemTempl,
		},
		new go.Binding("itemArray", "items")),
	)  // end Table Panel
);  // end Node
2

Are you referring to the PanelExpanderButton you’ve included, or do you want a separate button that hides/deletes the node?

3

A hide and delete button

4

Do you want that button that deletes the node to always be visible (so it should be in the node template) or only visible when the node is selected (so it should be in the node’s selectionAdornmentTemplate)?

For the latter case examine:

5

Yeah, I saw that example. I want it always visible though.

6

You could add a button to your node template like this:

...
// the collapse/expand button
$("PanelExpanderButton", "LIST",  // the name of the element whose visibility this button toggles
  { row: 0, alignment: new go.Spot(1, 0, -16, 0) }),
$("Button",
  {
    "ButtonBorder.strokeWidth": 0,
    row: 0, alignment: go.Spot.TopRight,
    click: (e, btn) => {
      e.diagram.commit((d) => {
        d.remove(btn.part);
      }, "deleted node");
    }
  },
  $(go.Shape, "XLine", { strokeWidth: 2, stroke: "red", width: 8, height: 8 })
),
...

Demo: https://codepen.io/jhardy/pen/VwMMvKJ?editors=1010

7

Ah, great. Just what I was looking for. Thanks