360 lines
16 KiB
HTML
360 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>GoJS User Permissions -- Northwoods Software</title>
|
|
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
|
|
<script src="../release/go.js"></script>
|
|
<script src="goIntro.js"></script>
|
|
</head>
|
|
<body onload="goIntro()">
|
|
<div id="container" class="container-fluid">
|
|
<div id="content">
|
|
|
|
<h1>User Permissions</h1>
|
|
<p>
|
|
Programmatically there are no restrictions on what you can do.
|
|
However you may want to restrict the actions that your users may perform.
|
|
</p>
|
|
<p>
|
|
The simplest restriction is to set <a>Diagram.isEnabled</a> 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.
|
|
</p>
|
|
<pre data-language="javascript" id="isEnabled">
|
|
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!
|
|
</pre>
|
|
<script>goCode("isEnabled", 600, 150)</script>
|
|
|
|
<p>
|
|
More common is to set <a>Diagram.isReadOnly</a> 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.)
|
|
</p>
|
|
<pre data-language="javascript" id="isReadOnly">
|
|
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;
|
|
</pre>
|
|
<script>goCode("isReadOnly", 600, 150)</script>
|
|
|
|
<p>
|
|
Another possibility is to set <a>Model.isReadOnly</a> 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.
|
|
</p>
|
|
<p>
|
|
The <a>Diagram.isModelReadOnly</a> property just gets and sets the <a>Model.isReadOnly</a> property.
|
|
If you are loading new Models, you will need to set this Diagram property after setting <a>Diagram.model</a>.
|
|
</p>
|
|
<pre data-language="javascript" id="isModelReadOnly">
|
|
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
|
|
</pre>
|
|
<script>goCode("isModelReadOnly", 600, 150)</script>
|
|
|
|
<h2 id="SpecificPermissions">Specific permissions</h2>
|
|
<p>
|
|
More precise restrictions on the user can be imposed by setting properties of the <a>Diagram</a> or of a particular <a>Layer</a>
|
|
or of a particular <a>Part</a> or <a>GraphObject</a>.
|
|
</p>
|
|
<p>
|
|
Some restrictions, such as <a>Diagram.allowZoom</a>, only make sense when applying to the whole diagram.
|
|
Others may also apply to individual parts, such as <a>Part.copyable</a> and <a>Layer.allowCopy</a> corresponding to <a>Diagram.allowCopy</a>.
|
|
Finally some may apply to any <a>GraphObject</a>, for example properties for ports such as <a>GraphObject.toLinkable</a>,
|
|
or to text objects such as <a>TextBlock.editable</a>.
|
|
</p>
|
|
<p>
|
|
Any <a>Tool</a> can be disabled by setting <a>Tool.isEnabled</a> to false.
|
|
By default all Tools are enabled, but many cannot run because the conditions are not right for <a>Tool.canStart</a> to return true.
|
|
</p>
|
|
<p>
|
|
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.
|
|
</p>
|
|
|
|
<h3 id="CutCommand">Cut command (<a>CommandHandler</a>)</h3>
|
|
<ul>
|
|
<li><a>Diagram.allowCopy</a>, <a>Diagram.allowDelete</a>, <a>Diagram.allowClipboard</a></li>
|
|
<li><a>Diagram.isReadOnly</a> and <a>Model.isReadOnly</a> (default values are false)</li>
|
|
</ul>
|
|
|
|
<h3 id="CopyCommand">Copy command (<a>CommandHandler</a>)</h3>
|
|
<ul>
|
|
<li><a>Diagram.allowCopy</a>, <a>Diagram.allowClipboard</a></li>
|
|
<li><a>Layer.allowCopy</a></li>
|
|
<li><a>Part.copyable</a></li>
|
|
</ul>
|
|
|
|
<h3 id="PasteCommand">Paste command (<a>CommandHandler</a>)</h3>
|
|
<ul>
|
|
<li><a>Diagram.allowInsert</a>, <a>Diagram.allowClipboard</a></li>
|
|
<li><a>Diagram.isReadOnly</a> and <a>Model.isReadOnly</a> (default values are false)</li>
|
|
<li>The clipboard's data format must be the same as the <a>Model.dataFormat</a></li>
|
|
</ul>
|
|
|
|
<h3 id="DeleteCommand">Delete command (<a>CommandHandler</a>)</h3>
|
|
<ul>
|
|
<li><a>Diagram.allowDelete</a></li>
|
|
<li><a>Layer.allowDelete</a></li>
|
|
<li><a>Part.deletable</a></li>
|
|
<li><a>Diagram.isReadOnly</a> and <a>Model.isReadOnly</a> (default values are false)</li>
|
|
</ul>
|
|
|
|
<h3 id="DragAndDropWithinDiagram">Drag-and-drop within diagram (<a>DraggingTool</a>)</h3>
|
|
<ul>
|
|
<li><a>Diagram.allowMove</a>, <a>Diagram.allowCopy</a>, <a>Diagram.allowInsert</a></li>
|
|
<li><a>Layer.allowMove</a>, <a>Layer.allowCopy</a></li>
|
|
<li><a>Part.movable</a>, <a>Part.copyable</a></li>
|
|
<li><a>DraggingTool.isCopyEnabled</a></li>
|
|
<li><a>Diagram.isReadOnly</a> for moving (default value is false)</li>
|
|
<li><a>Diagram.isReadOnly</a> and <a>Model.isReadOnly</a> for copying (default values are false)</li>
|
|
<li>Many properties affect dragging, including: <a>Part.maxLocation</a>, <a>Part.minLocation</a>, <a>Part.dragComputation</a>, and <a>DraggingTool.isGridSnapEnabled</a>.
|
|
Read about limiting user drags to be only horizontal or only vertical or only within the containing <a>Group</a> in the documentation for <a>DraggingTool</a>.</li>
|
|
<li><a>DraggingTool.isEnabled</a></li>
|
|
</ul>
|
|
|
|
<h3 id="DragAndDropOutOfDiagram">Drag-and-drop out of diagram (<a>DraggingTool</a>)</h3>
|
|
<ul>
|
|
<li><a>Diagram.allowDragOut</a> (default value is false except for <a>Palette</a> where it is true)</li>
|
|
<li><a>DraggingTool.isEnabled</a></li>
|
|
</ul>
|
|
|
|
<h3 id="DragAndDropIntoDiagram">Drag-and-drop into diagram (<a>DraggingTool</a>)</h3>
|
|
<ul>
|
|
<li><a>Diagram.allowDrop</a> (default value is false)</li>
|
|
<li><a>Diagram.allowInsert</a></li>
|
|
<li><a>Diagram.isReadOnly</a> and <a>Model.isReadOnly</a> (default values are false)</li>
|
|
<li><a>DraggingTool.isEnabled</a></li>
|
|
</ul>
|
|
|
|
<h3 id="InPlaceTextEditing">In-place text editing (<a>TextEditingTool</a>)</h3>
|
|
<ul>
|
|
<li><a>Diagram.allowTextEdit</a></li>
|
|
<li><a>Layer.allowTextEdit</a></li>
|
|
<li><a>Part.textEditable</a></li>
|
|
<li><a>TextBlock.editable</a>, <a>TextBlock.textValidation</a>, and <a>TextEditingTool.textValidation</a>
|
|
affect text editing (these are discussed in the section about <a href="validation.html">Validation</a>)</li>
|
|
<li><a>Diagram.isReadOnly</a> (default value is false)</li>
|
|
</ul>
|
|
|
|
<h3 id="GroupCommand">Group command (<a>CommandHandler</a>)</h3>
|
|
<ul>
|
|
<li><a>Diagram.allowGroup</a>, <a>Diagram.allowInsert</a></li>
|
|
<li><a>Layer.allowGroup</a></li>
|
|
<li><a>Part.groupable</a></li>
|
|
<li>The <a>CommandHandler.groupSelection</a> command requires that <a>CommandHandler.archetypeGroupData</a>
|
|
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.</li>
|
|
<li><a>Group.memberValidation</a> and <a>CommandHandler.memberValidation</a> also control which Parts may become members of a Group</li>
|
|
<li><a>Diagram.isReadOnly</a> and <a>Model.isReadOnly</a> (default values are false)</li>
|
|
</ul>
|
|
|
|
<h3 id="UngroupCommand">Ungroup command (<a>CommandHandler</a>)</h3>
|
|
<ul>
|
|
<li><a>Diagram.allowUngroup</a>, <a>Diagram.allowDelete</a></li>
|
|
<li><a>Layer.allowUngroup</a></li>
|
|
<li><a>Group.ungroupable</a> (default value is false)</li>
|
|
<li><a>Diagram.isReadOnly</a> and <a>Model.isReadOnly</a> (default values are false)</li>
|
|
</ul>
|
|
|
|
<h3 id="ClickCreating">Click-creating (<a>ClickCreatingTool</a>)</h3>
|
|
<ul>
|
|
<li><a>Diagram.allowInsert</a></li>
|
|
<li>The <a>ClickCreatingTool</a> requires that <a>ClickCreatingTool.archetypeNodeData</a>
|
|
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.</li>
|
|
<li><a>Diagram.isReadOnly</a> and <a>Model.isReadOnly</a> (default values are false)</li>
|
|
<li><a>ClickCreatingTool.isEnabled</a></li>
|
|
</ul>
|
|
|
|
<h3 id="DrawingNewLink">Drawing a new link (<a>LinkingTool</a>)</h3>
|
|
<ul>
|
|
<li><a>Diagram.allowLink</a></li>
|
|
<li><a>Layer.allowLink</a></li>
|
|
<li>
|
|
<a>GraphObject.fromLinkable</a>, <a>GraphObject.fromLinkableDuplicates</a>,
|
|
<a>GraphObject.fromLinkableSelfNode</a>, <a>GraphObject.fromMaxLinks</a>,
|
|
<a>GraphObject.toLinkable</a>, <a>GraphObject.toLinkableDuplicates</a>,
|
|
<a>GraphObject.toLinkableSelfNode</a>, <a>GraphObject.toMaxLinks</a>
|
|
(these are discussed in the section about <a href="validation.html">Validation</a>)
|
|
</li>
|
|
<li>The <a>LinkingTool</a> requires that <a>LinkingTool.archetypeLinkData</a>
|
|
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.</li>
|
|
<li><a>Diagram.isReadOnly</a> and <a>Model.isReadOnly</a> (default values are false)</li>
|
|
<li><a>LinkingTool.isEnabled</a></li>
|
|
</ul>
|
|
|
|
<h3 id="RelinkingExistingLink">Relinking an existing link (<a>RelinkingTool</a>)</h3>
|
|
<ul>
|
|
<li><a>Diagram.allowRelink</a></li>
|
|
<li><a>Layer.allowRelink</a></li>
|
|
<li><a>Link.relinkableFrom</a>, <a>Link.relinkableTo</a> (default values are false)</li>
|
|
<li>
|
|
<a>GraphObject.fromLinkable</a>, <a>GraphObject.fromLinkableDuplicates</a>,
|
|
<a>GraphObject.fromLinkableSelfNode</a>, <a>GraphObject.fromMaxLinks</a>,
|
|
<a>GraphObject.toLinkable</a>, <a>GraphObject.toLinkableDuplicates</a>,
|
|
<a>GraphObject.toLinkableSelfNode</a>, <a>GraphObject.toMaxLinks</a>
|
|
(these are discussed in the section about <a href="validation.html">Validation</a>)
|
|
</li>
|
|
<li><a>Diagram.isReadOnly</a> and <a>Model.isReadOnly</a> (default values are false)</li>
|
|
<li><a>RelinkingTool.isEnabled</a></li>
|
|
</ul>
|
|
|
|
<h3 id="ReshapingLink">Reshaping a link (<a>LinkReshapingTool</a>)</h3>
|
|
<ul>
|
|
<li><a>Diagram.allowReshape</a></li>
|
|
<li><a>Layer.allowReshape</a></li>
|
|
<li><a>Part.reshapable</a> (default value is false)</li>
|
|
<li><a>Link.resegmentable</a> also affects whether segments can be added or removed (default value is false)</li>
|
|
<li><a>Diagram.isReadOnly</a> (default value is false)</li>
|
|
<li><a>LinkReshapingTool.isEnabled</a></li>
|
|
</ul>
|
|
|
|
<h3 id="ResizingObject">Resizing an object (<a>ResizingTool</a>)</h3>
|
|
<ul>
|
|
<li><a>Diagram.allowResize</a></li>
|
|
<li><a>Layer.allowResize</a></li>
|
|
<li><a>Part.resizable</a> (default value is false)</li>
|
|
<li><a>Part.resizeCellSize</a>, <a>GraphObject.maxSize</a>, and <a>GraphObject.minSize</a> limit the size to which the user may resize the <a>Part.resizeObject</a></li>
|
|
<li><a>ResizingTool.maxSize</a>, <a>RotatingTool.minSize</a>, and <a>RotatingTool.cellSize</a> limit the size to which the user may resize the <a>Part.resizeObject</a></li>
|
|
<li><a>Diagram.isReadOnly</a> (default value is false)</li>
|
|
<li><a>ResizingTool.isEnabled</a></li>
|
|
</ul>
|
|
|
|
<h3 id="RotatingObject">Rotating an object (<a>RotatingTool</a>)</h3>
|
|
<ul>
|
|
<li><a>Diagram.allowRotate</a></li>
|
|
<li><a>Layer.allowRotate</a></li>
|
|
<li><a>Part.rotatable</a> (default value is false)</li>
|
|
<li><a>RotatingTool.snapAngleMultiple</a> and <a>RotatingTool.snapAngleEpsilon</a> limit the angles to which the user may rotate the <a>Part.rotateObject</a></li>
|
|
<li><a>Diagram.isReadOnly</a> (default value is false)</li>
|
|
<li><a>RotatingTool.isEnabled</a></li>
|
|
</ul>
|
|
|
|
<h3 id="ArrowAndPageCommands">Arrow and Page commands (<a>CommandHandler</a>), panning/scrolling the diagram (<a>PanningTool</a> and scrollbars)</h3>
|
|
<ul>
|
|
<li><a>Diagram.allowHorizontalScroll</a>, <a>Diagram.allowVerticalScroll</a></li>
|
|
<li><a>Diagram.hasHorizontalScrollbar</a>, <a>Diagram.hasVerticalScrollbar</a></li>
|
|
<li><a>ToolManager.mouseWheelBehavior</a> controls whether mouse wheel events scroll or zoom</li>
|
|
<li>See the DrawCommandHandler in the <a href="../extensions">Extensions</a> directory for
|
|
a <a>CommandHandler</a> that customizes the behavior of the arrow keys</li>
|
|
<li><a>PanningTool.isEnabled</a></li>
|
|
</ul>
|
|
|
|
<h3 id="SelectAllCommand">SelectAll command (<a>CommandHandler</a>), click selecting (<a>ClickSelectingTool</a>), drag selecting (<a>DragSelectingTool</a>)</h3>
|
|
<ul>
|
|
<li><a>Diagram.allowSelect</a></li>
|
|
<li><a>Layer.allowSelect</a></li>
|
|
<li><a>Part.selectable</a></li>
|
|
<li><a>Diagram.maxSelectionCount</a> limits how many selectable <a>Part</a>s the user may select</li>
|
|
<li><a>DragSelectingTool.isEnabled</a></li>
|
|
</ul>
|
|
|
|
<h3 id="UndoRedoCommands">Undo/Redo commands (<a>CommandHandler</a>)</h3>
|
|
<ul>
|
|
<li><a>Diagram.allowUndo</a></li>
|
|
<li><a>UndoManager.isEnabled</a> (default value is false)</li>
|
|
<li><a>Diagram.isReadOnly</a> and <a>Model.isReadOnly</a> (default values are false)</li>
|
|
</ul>
|
|
|
|
<h3 id="ZoomCommands">Zoom commands (<a>CommandHandler</a>), zooming/rescaling the diagram (<a>ToolManager</a>)</h3>
|
|
<ul>
|
|
<li><a>Diagram.allowZoom</a></li>
|
|
<li><a>ToolManager.mouseWheelBehavior</a> controls whether mouse wheel events scroll or zoom</li>
|
|
</ul>
|
|
|
|
<h3 id="ContextMenus">Context Menus (<a>ContextMenuTool</a>)</h3>
|
|
<ul>
|
|
<li><a>GraphObject.contextMenu</a></li>
|
|
<li><a>Diagram.contextMenu</a></li>
|
|
<li><a>ContextMenuTool.isEnabled</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|