Programmatically there are no restrictions on what you can do. However you may want to restrict the actions that your users may perform.
The simplest restriction is to set Diagram.isEnabled to false. Users will not be able to do much of anything. In this example, even though the grouping, undo, and redo commands are enabled, the commands cannot execute because the diagram is disabled.
diagram.commandHandler.archetypeGroupData =
{ key: "Group", isGroup: true, color: "blue" };
const nodeDataArray = [
{ key: "Alpha" },
{ key: "Beta" },
{ key: "Delta", group: "Epsilon" },
{ key: "Gamma", group: "Epsilon" },
{ key: "Epsilon", isGroup: true }
];
const linkDataArray = [
{ from: "Alpha", to: "Beta" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
diagram.undoManager.isEnabled = true;
diagram.add( // this is just a visual comment
new go.Part({ location: new go.Point(200, 50) })
.add(
new go.TextBlock("Diagram.isEnabled == false", {
font: "16pt bold", stroke: "red"
})
));
// Disable the diagram!
diagram.isEnabled = false;
More common is to set Diagram.isReadOnly to true. This allows users to scroll and zoom and to select parts, but not to insert or delete or drag or modify parts. (If you want to allow scroll and zoom but not selection, you can disable selection, as discussed below.)
diagram.commandHandler.archetypeGroupData =
{ key: "Group", isGroup: true, color: "blue" };
const nodeDataArray = [
{ key: "Alpha" },
{ key: "Beta" },
{ key: "Delta", group: "Epsilon" },
{ key: "Gamma", group: "Epsilon" },
{ key: "Epsilon", isGroup: true }
];
const linkDataArray = [
{ from: "Alpha", to: "Beta" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
diagram.undoManager.isEnabled = true;
diagram.add( // this is just a visual comment
new go.Part({ location: new go.Point(200, 50) })
.add(
new go.TextBlock("Diagram.isReadOnly == true", {
font: "16pt bold", stroke: "red"
})
));
// Disable diagram modifications, but allow navigation and selection
diagram.isReadOnly = true;
Another possibility is to set Model.isReadOnly to true. This allows users to scroll, zoom, select, and move parts, but not to insert or delete parts, including not adding or removing links nor adding or removing group members.
The Diagram.isModelReadOnly property just gets and sets the Model.isReadOnly property. If you are loading new Models, you will need to set this Diagram property after setting Diagram.model.
diagram.commandHandler.archetypeGroupData =
{ key: "Group", isGroup: true, color: "blue" };
const nodeDataArray = [
{ key: "Alpha" },
{ key: "Beta" },
{ key: "Delta", group: "Epsilon" },
{ key: "Gamma", group: "Epsilon" },
{ key: "Epsilon", isGroup: true }
];
const linkDataArray = [
{ from: "Alpha", to: "Beta" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
];
diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
diagram.undoManager.isEnabled = true;
diagram.add( // this is just a visual comment
new go.Part({ location: new go.Point(200, 50) })
.add(
new go.TextBlock("Diagram.model.isReadOnly == true", {
font: "16pt bold", stroke: "red"
})
));
// Disable adding or removing parts
diagram.model.isReadOnly = true;
One common situation with diagrams that are Diagram.isReadOnly is that the user can not collapse or expand trees or subgraphs. Instead of setting Diagram.isReadOnly, you can set these properties:
new go.Palette("myPaletteDiv",
{
isReadOnly: false,
isModelReadOnly: true,
allowDelete: false,
allowInsert: false,
allowLink: false,
allowMove: false,
allowTextEdit: false,
// maybe other Diagram.allow... properties too, depending on your templates
// also consider disabling Tools
"contextMenuTool.isEnabled": false,
nodeTemplateMap: . . .
})
More precise restrictions on the user can be imposed by setting properties of the Diagram or of a particular Layer or of a particular Part or GraphObject.
Some restrictions, such as Diagram.allowZoom, only make sense when applying to the whole diagram. Others may also apply to individual parts, such as Part.copyable and Layer.allowCopy corresponding to Diagram.allowCopy. Finally some may apply to any GraphObject, for example properties for ports such as GraphObject.toLinkable, or to text objects such as TextBlock.editable.
Any Tool can be disabled by setting Tool.isEnabled to false. By default all Tools are enabled, but many cannot run because the conditions are not right for Tool.canStart to return true.
Here is a listing of what users can do and the properties that limit that functionality. Most of these properties have a default value of true.