GoJS implements a number of common editing operations, such as manipulating parts (moving, adding, copying, cutting, and deleting). These editing abilities are accessible via mouse (or touch) and keyboard by default, and can also be invoked programmatically in JavaScript.
The following Diagram defines a node template and has four nodes in its model:
const myDiagram =
new go.Diagram("myDiagramDiv",
{ "undoManager.isEnabled": true });
// define a simple Node template
myDiagram.nodeTemplate =
new go.Node("Auto")
.add(
new go.Shape("Rectangle", { stroke: null }) // don't draw any outline
// the Shape.fill comes from the Node.data.color property
.bind("fill", "color"),
new go.TextBlock(
// leave some space around larger-than-normal text
{ margin: 6, font: "18px sans-serif" })
// the TextBlock.text comes from the Node.data.text property
.bind("text")
);
myDiagram.model = new go.GraphLinksModel(
[ // there will be a Node for each data object in this nodeDataArray
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "pink" }
]);
Out of the box, several interactions are available:
Ctrl-C, Ctrl-V, Ctrl-X
will copy, paste, and cut diagram parts, respectively.
(Use the Command modifier on a Mac.)
Note that copies will copy the location of the Node as well, unless a layout or the paste command moves the new
node.
Ctrl-Z and Ctrl-Y will undo and redo
operations.
Panning (scrolling) and selection are not considered undoable operations.
By setting a few properties you can expose more interaction to a user, including manipulating groups:
const myDiagram =
new go.Diagram("myDiagramDiv",
{
// allow double-click in background to create a new node
"clickCreatingTool.archetypeNodeData": { text: "Node", color: "lightgray" },
// allow Ctrl-G to group selected nodes
"commandHandler.archetypeGroupData": { text: "Group", isGroup: true },
// have mouse wheel events zoom in and out instead of scroll up and down
"toolManager.mouseWheelBehavior": go.WheelMode.Zoom,
"undoManager.isEnabled": true // enable undo & redo
});
myDiagram.nodeTemplate =
new go.Node("Auto")
.add(
new go.Shape("Rectangle", { stroke: null })
.bind("fill", "color"),
new go.TextBlock(
{ margin: 6, font: "18px sans-serif", editable: true })
.bindTwoWay("text")
);
myDiagram.groupTemplate =
new go.Group("Vertical",
// allow Ctrl-Shift-G to ungroup a selected Group.
{ ungroupable: true })
.add(
new go.TextBlock({ font: "bold 12pt sans-serif", editable: true })
.bindTwoWay("text"),
new go.Panel("Auto")
.add(
new go.Shape({ fill: "transparent" }),
new go.Placeholder({ padding: 10 })
)
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen", group: 5 },
{ key: 4, text: "Delta", color: "pink", group: 5 },
{ key: 5, text: "Group1", isGroup: true }
]);
ClickCreatingTool.archetypeNodeData allows a double-click in the background to create
a new node with the specified data.
CommandHandler.archetypeGroupData allows Ctrl-G to group a selection of nodes.
Group.ungroupable allows Ctrl-Shift-G to ungroup a selected group.
ToolManager.mouseWheelBehavior allows the mouse wheel to zoom instead of scroll by default.
You can toggle this property by clicking on the mouse-wheel.
On touch devices, pinch-zooming is enabled by default.
TextBlock.editable in the TextBlock definition allows the text to be edited in place.
Select a node and then click on the text, or press F2, to begin text editing.
Click anywhere else on the diagram or press Tab to finish editing text.
These interactions (and more!) are all present in the basic.html sample. Be sure to also see the Intro page on GoJS commands.
You can disable portions of Diagram interactivity with several properties, depending on what you want to allow users to do. See the Intro page on GoJS permissions for more explanation.
GoJS provides a mechanism for you to define context menus for any object or for the Diagram itself. In the example below, two context menus are defined, one on the Node template (with one button) and one on the Diagram (with two buttons).
const myDiagram =
new go.Diagram("myDiagramDiv",
{ "undoManager.isEnabled": true });
// this function is called when the context menu button is clicked
function nodeClicked(e, obj) {
alert('node ' + obj.part.data.key + ', "' + obj.part.data.text + '" was clicked');
}
// defines a context menu to be referenced in the node template
const nodeContextMenu =
go.GraphObject.build("ContextMenu")
.add(
go.GraphObject.build("ContextMenuButton", { click: nodeClicked })
.add(new go.TextBlock("Click me!")),
// more ContextMenuButtons would go here
);
myDiagram.nodeTemplate =
new go.Node("Auto", { contextMenu: nodeContextMenu })
.add(
new go.Shape("Rectangle", { stroke: null })
.bind("fill", "color"),
new go.TextBlock({ margin: 6, font: "18px sans-serif" })
.bind("text")
);
// this function alerts the current number of nodes in the Diagram
function countNodes(e, obj) {
alert('there are ' + e.diagram.nodes.count + ' nodes');
}
// this function creates a new node and inserts it at the last event's point
function addNode(e, obj) {
const data = { text: "Node", color: "white" };
// do not need to set "key" property -- addNodeData will assign it automatically
e.diagram.model.addNodeData(data);
const node = e.diagram.findPartForData(data);
node.location = e.diagram.lastInput.documentPoint;
}
myDiagram.contextMenu =
go.GraphObject.build("ContextMenu")
.add(
go.GraphObject.build("ContextMenuButton", { click: countNodes })
.add(new go.TextBlock("Count Nodes")),
go.GraphObject.build("ContextMenuButton", { click: addNode })
.add(new go.TextBlock("Add Node")),
// more ContextMenuButtons would go here
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" }
]);
If you right-click (or long-tap on a touch device) on a Node or the Diagram, you will see the GoJS context menu appear with the defined options.
The basic.html sample contains more complex context menu examples. See the Intro page on GoJS context menus for more discussion.
GoJS lets users draw new links by dragging out from a port. Users can reconnect existing links by selecting one and dragging one of its handles. To enable these tools, some properties need to be set:
const myDiagram =
new go.Diagram("myDiagramDiv",
{ "undoManager.isEnabled": true });
myDiagram.nodeTemplate =
new go.Node("Auto")
.add(
new go.Shape("Rectangle", {
stroke: null,
portId: "", // declare this Shape to be the port element for the Node
cursor: "pointer",
// set various port-related properties here on this port element
fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,
toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
})
.bind("fill", "color"),
new go.TextBlock({ margin: 6, font: "18px sans-serif" })
.bind("text")
);
myDiagram.linkTemplate =
new go.Link({
// allow the user to reconnnect existing links:
relinkableFrom: true, relinkableTo: true,
// draw the link path shorter than normal,
// so that it does not interfere with the appearance of the arrowhead
toShortLength: 2
})
.add(
new go.Shape({ strokeWidth: 2 }),
new go.Shape({ toArrow: "Standard", stroke: null })
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "pink" }
],
[
{ from: 1, to: 2 },
{ from: 1, to: 4 }
]);
In the above example:
Shape has its portId set to make it the port instead of the entire Node.
Then several ...Linkable properties are set, allowing each node to link to itself and to others.
Depending on the functionality you want to provide to your users,
you may not want to set all of those properties on your ports in your node templates.
relinkable... properties are set, so that when the link is selected,
it shows handles that can be dragged in order to reconnect the link with a different node.
GoJS allows linking and re-linking to abide by custom criteria in which source and destination nodes are valid. You can read about this in the Intro page on Validation.
GoJS links have many interesting properties that are covered in depth in the Intro page on Links and on the following pages.
You may want to read more tutorials, such as the Learn GoJS tutorial and the GraphObject Manipulation tutorial You can also watch tutorials on YouTube.