User Permissions
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" }; var nodeDataArray = [ { key: "Alpha" }, { key: "Beta" }, { key: "Delta", group: "Epsilon" }, { key: "Gamma", group: "Epsilon" }, { key: "Epsilon", isGroup: true } ]; var 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($(go.Part, // this is just a visual comment { location: new go.Point(200, 50) }, $(go.TextBlock, "Diagram.isEnabled == false", { font: "16pt bold", stroke: "red" }) )); diagram.isEnabled = false; // Disable the diagram!
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" }; var nodeDataArray = [ { key: "Alpha" }, { key: "Beta" }, { key: "Delta", group: "Epsilon" }, { key: "Gamma", group: "Epsilon" }, { key: "Epsilon", isGroup: true } ]; var 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($(go.Part, // this is just a visual comment { location: new go.Point(200, 50) }, $(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" }; var nodeDataArray = [ { key: "Alpha" }, { key: "Beta" }, { key: "Delta", group: "Epsilon" }, { key: "Gamma", group: "Epsilon" }, { key: "Epsilon", isGroup: true } ]; var 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($(go.Part, // this is just a visual comment { location: new go.Point(200, 50) }, $(go.TextBlock, "Diagram.model.isReadOnly == true", { font: "16pt bold", stroke: "red" }) )); diagram.model.isReadOnly = true; // Disable adding or removing parts
Specific permissions
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.
Cut command (CommandHandler)
- Diagram.allowCopy, Diagram.allowDelete, Diagram.allowClipboard
- Diagram.isReadOnly and Model.isReadOnly (default values are false)
Copy command (CommandHandler)
Paste command (CommandHandler)
- Diagram.allowInsert, Diagram.allowClipboard
- Diagram.isReadOnly and Model.isReadOnly (default values are false)
- The clipboard's data format must be the same as the Model.dataFormat
Delete command (CommandHandler)
- Diagram.allowDelete
- Layer.allowDelete
- Part.deletable
- Diagram.isReadOnly and Model.isReadOnly (default values are false)
Drag-and-drop within diagram (DraggingTool)
- Diagram.allowMove, Diagram.allowCopy, Diagram.allowInsert
- Layer.allowMove, Layer.allowCopy
- Part.movable, Part.copyable
- DraggingTool.isCopyEnabled
- Diagram.isReadOnly for moving (default value is false)
- Diagram.isReadOnly and Model.isReadOnly for copying (default values are false)
- Many properties affect dragging, including: Part.maxLocation, Part.minLocation, Part.dragComputation, and DraggingTool.isGridSnapEnabled. Read about limiting user drags to be only horizontal or only vertical or only within the containing Group in the documentation for DraggingTool.
- DraggingTool.isEnabled
Drag-and-drop out of diagram (DraggingTool)
- Diagram.allowDragOut (default value is false except for Palette where it is true)
- DraggingTool.isEnabled
Drag-and-drop into diagram (DraggingTool)
- Diagram.allowDrop (default value is false)
- Diagram.allowInsert
- Diagram.isReadOnly and Model.isReadOnly (default values are false)
- DraggingTool.isEnabled
In-place text editing (TextEditingTool)
- Diagram.allowTextEdit
- Layer.allowTextEdit
- Part.textEditable
- TextBlock.editable, TextBlock.textValidation, and TextEditingTool.textValidation affect text editing (these are discussed in the section about Validation)
- Diagram.isReadOnly (default value is false)
Group command (CommandHandler)
- Diagram.allowGroup, Diagram.allowInsert
- Layer.allowGroup
- Part.groupable
- The CommandHandler.groupSelection command requires that CommandHandler.archetypeGroupData has been set to a data object to be copied into the model to be represented by a new group in the diagram; this property is null by default, causing the command to be disabled. You will need to set the property to an object so that newly created groups have the desired property values for any data binding by the group template.
- Group.memberValidation and CommandHandler.memberValidation also control which Parts may become members of a Group
- Diagram.isReadOnly and Model.isReadOnly (default values are false)
Ungroup command (CommandHandler)
- Diagram.allowUngroup, Diagram.allowDelete
- Layer.allowUngroup
- Group.ungroupable (default value is false)
- Diagram.isReadOnly and Model.isReadOnly (default values are false)
Click-creating (ClickCreatingTool)
- Diagram.allowInsert
- The ClickCreatingTool requires that ClickCreatingTool.archetypeNodeData has been set to a data object to be copied into the model to be represented by a new part in the diagram; this property is null by default, causing the tool to be disabled. You will need to set the property to an object so that newly created nodes have the desired property values for any data binding by the node template.
- Diagram.isReadOnly and Model.isReadOnly (default values are false)
- ClickCreatingTool.isEnabled
Drawing a new link (LinkingTool)
- Diagram.allowLink
- Layer.allowLink
- GraphObject.fromLinkable, GraphObject.fromLinkableDuplicates, GraphObject.fromLinkableSelfNode, GraphObject.fromMaxLinks, GraphObject.toLinkable, GraphObject.toLinkableDuplicates, GraphObject.toLinkableSelfNode, GraphObject.toMaxLinks (these are discussed in the section about Validation)
- The LinkingTool requires that LinkingTool.archetypeLinkData has been set to a data object to be copied into the model to be represented by a new link in the diagram; this property is by default set to an empty JavaScript object. You may need to want to set properties on this object so that newly created links have the desired property values for any data binding by the link template.
- Diagram.isReadOnly and Model.isReadOnly (default values are false)
- LinkingTool.isEnabled
Relinking an existing link (RelinkingTool)
- Diagram.allowRelink
- Layer.allowRelink
- Link.relinkableFrom, Link.relinkableTo (default values are false)
- GraphObject.fromLinkable, GraphObject.fromLinkableDuplicates, GraphObject.fromLinkableSelfNode, GraphObject.fromMaxLinks, GraphObject.toLinkable, GraphObject.toLinkableDuplicates, GraphObject.toLinkableSelfNode, GraphObject.toMaxLinks (these are discussed in the section about Validation)
- Diagram.isReadOnly and Model.isReadOnly (default values are false)
- RelinkingTool.isEnabled
Reshaping a link (LinkReshapingTool)
- Diagram.allowReshape
- Layer.allowReshape
- Part.reshapable (default value is false)
- Link.resegmentable also affects whether segments can be added or removed (default value is false)
- Diagram.isReadOnly (default value is false)
- LinkReshapingTool.isEnabled
Resizing an object (ResizingTool)
- Diagram.allowResize
- Layer.allowResize
- Part.resizable (default value is false)
- Part.resizeCellSize, GraphObject.maxSize, and GraphObject.minSize limit the size to which the user may resize the Part.resizeObject
- ResizingTool.maxSize, RotatingTool.minSize, and RotatingTool.cellSize limit the size to which the user may resize the Part.resizeObject
- Diagram.isReadOnly (default value is false)
- ResizingTool.isEnabled
Rotating an object (RotatingTool)
- Diagram.allowRotate
- Layer.allowRotate
- Part.rotatable (default value is false)
- RotatingTool.snapAngleMultiple and RotatingTool.snapAngleEpsilon limit the angles to which the user may rotate the Part.rotateObject
- Diagram.isReadOnly (default value is false)
- RotatingTool.isEnabled
Arrow and Page commands (CommandHandler), panning/scrolling the diagram (PanningTool and scrollbars)
- Diagram.allowHorizontalScroll, Diagram.allowVerticalScroll
- Diagram.hasHorizontalScrollbar, Diagram.hasVerticalScrollbar
- ToolManager.mouseWheelBehavior controls whether mouse wheel events scroll or zoom
- See the DrawCommandHandler in the Extensions directory for a CommandHandler that customizes the behavior of the arrow keys
- PanningTool.isEnabled
SelectAll command (CommandHandler), click selecting (ClickSelectingTool), drag selecting (DragSelectingTool)
- Diagram.allowSelect
- Layer.allowSelect
- Part.selectable
- Diagram.maxSelectionCount limits how many selectable Parts the user may select
- DragSelectingTool.isEnabled
Undo/Redo commands (CommandHandler)
- Diagram.allowUndo
- UndoManager.isEnabled (default value is false)
- Diagram.isReadOnly and Model.isReadOnly (default values are false)
Zoom commands (CommandHandler), zooming/rescaling the diagram (ToolManager)
- Diagram.allowZoom
- ToolManager.mouseWheelBehavior controls whether mouse wheel events scroll or zoom