markgojs

<!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>  <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>