UNPKG

gojs/intro/permissions.html

Version:
1<!DOCTYPE html>
2<html lang="en">
<head>
4<meta charset="utf-8"/>
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>

7<link rel="stylesheet" href="../assets/css/style.css"/> 
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->    <title> GoJS User Permissions -- Northwoods Software </title>
  <link rel="stylesheet" href="../assets/css/prism.css"  />
</head>
<script>
  
  window.diagrams = [];
  window.goCode = function(pre, w, h, parentid, animation) {
    window.diagrams.push([pre, w, h, parentid, animation]);
  }
</script>
<body>
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
  <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
    <div class="md:pl-4">
      <a class="text-white hover:text-white no-underline hover:no-underline
      font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
        <h1 class="mb-0 p-1 ">GoJS</h1>
      </a>
    </div>
    <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
      <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
        <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
        <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </button>
    <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
      <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
      </ul>
    </div>
  </div>
  <hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
  
  <div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
    
  <div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">
    <div class="flex-shrink-0 px-8 py-4">
      <button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">
        <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
          <path id="navOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
          <path id="navClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
    <nav id="navList" class="min-h-screen hidden md:block sidebar-nav flex-grow px-1 lg:px-4 pb-4 md:pb-0 md:overflow-y-auto break-words">
<a href="index.html">Basics</a>
<a href="buildingObjects.html">Building Parts</a>
<a href="usingModels.html">Using Models</a>
<a href="dataBinding.html">Data Binding</a>
<a href="react.html">GoJS with React</a>
<a href="angular.html">GoJS with Angular</a>
<a href="textBlocks.html">TextBlocks</a>
<a href="shapes.html">Shapes</a>
<a href="pictures.html">Pictures</a>
<a href="panels.html">Panels</a>
<a href="tablePanels.html">Table Panels</a>
<a href="brush.html">Brushes</a>
<a href="sizing.html">Sizing Objects</a>
<a href="itemArrays.html">Item Arrays</a>
<a href="changedEvents.html">Changed Events</a>
<a href="transactions.html">Transactions</a>
<a href="viewport.html">Coordinates</a>
<a href="initialView.html">Initial View</a>
<a href="collections.html">Collections</a>
<a href="links.html">Links</a>
<a href="linkLabels.html">Link Labels</a>
<a href="connectionPoints.html">Link Points</a>
<a href="ports.html">Ports</a>
<a href="nodes.html">Nodes</a>
<a href="debugging.html">Debugging</a>
<a href="layouts.html">Layouts</a>
<a href="trees.html">Trees</a>
<a href="subtrees.html">SubTrees</a>
<a href="groups.html">Groups</a>
<a href="subgraphs.html">SubGraphs</a>
<a href="sizedGroups.html">Sized Groups</a>
<a href="selection.html">Selection</a>
<a href="highlighting.html">Highlighting</a>
<a href="animation.html">Animation</a>
<a href="toolTips.html">ToolTips</a>
<a href="contextmenus.html">Context Menus</a>
<a href="events.html">Diagram Events</a>
<a href="tools.html">Tools</a>
<a href="commands.html">Commands</a>
<a href="permissions.html">Permissions</a>
<a href="validation.html">Validation</a>
<a href="HTMLInteraction.html">HTML Interaction</a>
<a href="layers.html">Layers &amp; Z-ordering</a>
<a href="palette.html">Palette</a>
<a href="overview.html">Overview</a>
<a href="resizing.html">Resizing Diagrams</a>
<a href="replacingDeleting.html">Replacing and Deleting</a>
<a href="buttons.html">Buttons</a>
<a href="templateMaps.html">Template Maps</a>
<a href="legends.html">Legends and Titles</a>
<a href="extensions.html">Extensions</a>
<a href="geometry.html">Geometry Strings</a>
<a href="grids.html">Grid Patterns</a>
<a href="graduatedPanels.html">Graduated Panels</a>
<a href="makingImages.html">Diagram Images</a>
<a href="makingSVG.html">Diagram SVG</a>
<a href="printing.html">Printing</a>
<a href="serverSideImages.html">Server-side Images</a>
<a href="nodeScript.html">GoJS in Node.js</a>
<a href="testing.html">Testing</a>
<a href="storage.html">Storage</a>
<a href="performance.html">Performance</a>
<a href="source.html">Building from Source</a>
<a href="platforms.html">Platforms</a>
<a href="deployment.html">Deployment</a>
    </nav>
  </div>      
    <div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">
132
133<h1>User Permissions</h1>
134<p>
135Programmatically there are no restrictions on what you can do.
136However you may want to restrict the actions that your users may perform.
137</p>
138
139<h3 id="DiagramIsEnabled">Diagram.isEnabled</h3>
140<p>
141The simplest restriction is to set <a>Diagram.isEnabled</a> to false.
142Users will not be able to do much of anything.
143In this example, even though the grouping, undo, and redo commands are enabled,
144the commands cannot execute because the diagram is disabled.
145</p>
146<pre class="lang-js" id="isEnabled"><code>
diagram.commandHandler.archetypeGroupData =
  { key: "Group", isGroup: true, color: "blue" };
149
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;
165
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" })
            ));
171
// Disable the diagram!
diagram.isEnabled = false;
174</code></pre>
175<script>goCode("isEnabled", 600, 150)</script>
176
177<h3 id="DiagramIsReadOnly">Diagram.isReadOnly</h3>
178<p>
179More common is to set <a>Diagram.isReadOnly</a> to true.
180This allows users to scroll and zoom and to select parts, but not to insert or delete or drag or modify parts.
181(If you want to allow scroll and zoom but not selection, you can disable selection, as discussed below.)
182</p>
183<pre class="lang-js" id="isReadOnly"><code>
diagram.commandHandler.archetypeGroupData =
  { key: "Group", isGroup: true, color: "blue" };
186
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;
202
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" })
            ));
208
// Disable diagram modifications, but allow navigation and selection
diagram.isReadOnly = true;
211</code></pre>
212<script>goCode("isReadOnly", 600, 150)</script>
213
214<h3 id="DiagramIsModelReadOnly">Diagram.isModelReadOnly</h3>
215<p>
216Another possibility is to set <a>Model.isReadOnly</a> to true.
217This allows users to scroll, zoom, select, and move parts, but not to insert or delete parts,
218including not adding or removing links nor adding or removing group members.
219</p>
220<p>
221The <a>Diagram.isModelReadOnly</a> property just gets and sets the <a>Model.isReadOnly</a> property.
222If you are loading new Models, you will need to set this Diagram property after setting <a>Diagram.model</a>.
223</p>
224<pre class="lang-js" id="isModelReadOnly"><code>
diagram.commandHandler.archetypeGroupData =
  { key: "Group", isGroup: true, color: "blue" };
227
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;
243
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" })
            ));
// Disable adding or removing parts
diagram.model.isReadOnly = true;
251</code></pre>
252<script>goCode("isModelReadOnly", 600, 150)</script>
253
254<h3 id="AllowingCollapseExpand">Allowing Collapse and Expand</h3>
255<p>
256One common situation with diagrams that are <a>Diagram.isReadOnly</a> is that the user can not
257collapse or expand trees or subgraphs.  Instead of setting <a>Diagram.isReadOnly</a>, you can set
258these properties:
259</p>
260<pre class="lang-js" id="collapseExpand"><code>
261$(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: . . .
})
275</code></pre>
276
277<h2 id="SpecificPermissions">Specific permissions</h2>
278<p>
279More precise restrictions on the user can be imposed by setting properties of the <a>Diagram</a> or of a particular <a>Layer</a>
280or of a particular <a>Part</a> or <a>GraphObject</a>.
281</p>
282<p>
283Some restrictions, such as <a>Diagram.allowZoom</a>, only make sense when applying to the whole diagram.
284Others may also apply to individual parts, such as <a>Part.copyable</a> and <a>Layer.allowCopy</a> corresponding to <a>Diagram.allowCopy</a>.
285Finally some may apply to any <a>GraphObject</a>, for example properties for ports such as <a>GraphObject.toLinkable</a>,
286or to text objects such as <a>TextBlock.editable</a>.
287</p>
288<p>
289Any <a>Tool</a> can be disabled by setting <a>Tool.isEnabled</a> to false.
290By default all Tools are enabled, but many cannot run because the conditions are not right for <a>Tool.canStart</a> to return true.
291</p>
292<p>
293Here is a listing of what users can do and the properties that limit that functionality.
294Most of these properties have a default value of true.
295</p>
296
297<h3 id="CutCommand">Cut command (<a>CommandHandler</a>)</h3>
298<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>
301</ul>
302
303<h3 id="CopyCommand">Copy command (<a>CommandHandler</a>)</h3>
304<ul>
<li><a>Diagram.allowCopy</a>, <a>Diagram.allowClipboard</a></li>
<li><a>Layer.allowCopy</a></li>
<li><a>Part.copyable</a></li>
308</ul>
309
310<h3 id="PasteCommand">Paste command (<a>CommandHandler</a>)</h3>
311<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>
315</ul>
316
317<h3 id="DeleteCommand">Delete command (<a>CommandHandler</a>)</h3>
318<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>
323</ul>
324
325<h3 id="DragAndDropWithinDiagram">Drag-and-drop within diagram (<a>DraggingTool</a>)</h3>
326<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>
336</ul>
337
338<h3 id="DragAndDropOutOfDiagram">Drag-and-drop out of diagram (<a>DraggingTool</a>)</h3>
339<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>
342</ul>
343
344<h3 id="DragAndDropIntoDiagram">Drag-and-drop into diagram (<a>DraggingTool</a>)</h3>
345<ul>
<li><a>Diagram.allowDrop</a> (default value is true)</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>
350</ul>
351
352<h3 id="InPlaceTextEditing">In-place text editing (<a>TextEditingTool</a>)</h3>
353<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>
<li><a>TextEditingTool.isEnabled</a></li>
<li><a>TextEditingTool.starting</a> controls how the editing may be initiated.</li>
364</ul>
365
366<h3 id="GroupCommand">Group command (<a>CommandHandler</a>)</h3>
367<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>
378</ul>
379
380<h3 id="UngroupCommand">Ungroup command (<a>CommandHandler</a>)</h3>
381<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>
386</ul>
387
388<h3 id="ClickCreating">Click-creating (<a>ClickCreatingTool</a>)</h3>
389<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>
<li><a>ClickCreatingTool.isDoubleClick</a> whether to insert on single click or double click.</li>
401</ul>
402
403<h3 id="DrawingNewLink">Drawing a new link (<a>LinkingTool</a>)</h3>
404<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>
421</ul>
422
423<h3 id="RelinkingExistingLink">Relinking an existing link (<a>RelinkingTool</a>)</h3>
424<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>
437</ul>
438
439<h3 id="ReshapingLink">Reshaping a link (<a>LinkReshapingTool</a>)</h3>
440<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>
447</ul>
448
449<h3 id="ResizingObject">Resizing an object (<a>ResizingTool</a>)</h3>
450<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>
458</ul>
459
460<h3 id="RotatingObject">Rotating an object (<a>RotatingTool</a>)</h3>
461<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>
468</ul>
469
470<h3 id="ArrowAndPageCommands">Arrow and Page commands (<a>CommandHandler</a>), panning/scrolling the diagram (<a>PanningTool</a> and scrollbars)</h3>
471<ul>
<li><a>Diagram.allowHorizontalScroll</a>, <a>Diagram.allowVerticalScroll</a></li>
<li><a>Diagram.hasHorizontalScrollbar</a>, <a>Diagram.hasVerticalScrollbar</a></li>
<li><a>Diagram.scrollMargin</a> and <a>Diagram.padding</a></li>
<li><a>Diagram.scrollMode</a> and <a>Diagram.positionComputation</a> for controlling how far the user may scroll</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>
<li><a>PanningTool.bubbles</a> controls whether panning gestures scroll the page rather than the viewport.</li>
483</ul>
484
485<h3 id="SelectAllCommand">SelectAll command (<a>CommandHandler</a>), click selecting (<a>ClickSelectingTool</a>), drag selecting (<a>DragSelectingTool</a>)</h3>
486<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>
492</ul>
493
494<h3 id="UndoRedoCommands">Undo/Redo commands (<a>CommandHandler</a>)</h3>
495<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>
499</ul>
500
501<h3 id="ZoomCommands">Zoom commands (<a>CommandHandler</a>), zooming/rescaling the diagram (<a>ToolManager</a>)</h3>
502<ul>
<li><a>Diagram.allowZoom</a></li>
<li><a>ToolManager.mouseWheelBehavior</a> controls whether mouse wheel events scroll or zoom</li>
<li><a>Diagram.minScale</a>, <a>Diagram.maxScale</a>, and <a>Diagram.scaleComputation</a> for controlling how far the user may zoom.</li>
506</ul>
507
508<h3 id="ContextMenus">Context Menus (<a>ContextMenuTool</a>)</h3>
509<ul>
<li><a>GraphObject.contextMenu</a></li>
<li><a>Diagram.contextMenu</a></li>
<li><a>ContextMenuTool.isEnabled</a></li>
513</ul>
514
    </div>
  </div>

<div class="bg-nwoods-primary">
  <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
    <p id="version" class="leading-none mb-2 my-4">GoJS</p>
  </section>
</div><footer class="bg-nwoods-primary text-white">
<div class="container max-w-screen-lg mx-auto  px-8">
  <div class="w-full py-6">
525
      <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
        <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="../samples/index.html">Samples</a>
              </li>
              <li>
                <a href="../learn/index.html">Learn</a>
              </li>
              <li>
                <a href="../intro/index.html">Intro</a>
              </li>
              <li>
                <a href="../api/index.html">API</a>
              </li>
              <li>
                <a href="../changelog.html">Changelog</a>
              </li>
              <li>
                <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Support</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com/contact.html"
                target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
              </li>
              <li>
                <a href="https://forum.nwoods.com/c/gojs">Forum</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/sales/index.html"
                target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
              </li>
              <li>
                <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Company</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com">Northwoods</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/about.html">About Us</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/contact.html">Contact Us</a>
              </li>
              <li>
                <a href="https://twitter.com/northwoodsgo">Twitter</a>
              </li>
588
            </ul>
          </li>
        </ul>
592
593
    <p class="text-sm text-gray-100 md:mb-6">
      Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
    </p>
  </div>
</div>
599</footer>  </body>
600
601<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script> 
602<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'UA-1506307-5');
var getOutboundLink = function(url, label) {
  gtag('event', 'click', {
    'event_category': 'outbound',
    'event_label': label,
    'transport_type': 'beacon'
  });
}
613
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
topButton.addEventListener("click", function() {
  this.classList.toggle("active");
  topnavList.classList.toggle("hidden");
  document.getElementById("topnavOpen").classList.toggle("hidden");
  document.getElementById("topnavClosed").classList.toggle("hidden");
});
623</script>
<script src="../assets/js/prism.js"></script>
<script src="../release/go.js"></script>
<script src="../assets/js/goDoc.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
    if (window.goDoc) window.goDoc();
    var d = window.diagrams;
    for (var i = 0; i < d.length; i++) {
      var dargs = d[i];
      goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
    }
    if (window.extra) window.extra();
  });
</script>
639</html>
1	`<!DOCTYPE html>`
2	`<html lang="en">`
3	`<head>`
4	`<meta charset="utf-8"/>`
5	`<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>`
6
7	`<link rel="stylesheet" href="../assets/css/style.css"/>`
8	`<!-- Copyright 1998-2021 by Northwoods Software Corporation. --> <title> GoJS User Permissions -- Northwoods Software </title>`
9	`<link rel="stylesheet" href="../assets/css/prism.css" />`
10	`</head>`
11	`<script>`
12
13	`window.diagrams = [];`
14	`window.goCode = function(pre, w, h, parentid, animation) {`
15	`window.diagrams.push([pre, w, h, parentid, animation]);`
16	`}`
17	`</script>`
18	`<body>`
19	`<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">`
20	`<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">`
21	`<div class="md:pl-4">`
22	`<a class="text-white hover:text-white no-underline hover:no-underline`
23	`font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">`
24	`<h1 class="mb-0 p-1 ">GoJS</h1>`
25	`</a>`
26	`</div>`
27	`<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">`
28	`<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">`
29	`<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>`
30	`<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>`
31	`</svg>`
32	`</button>`
33	`<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">`
34	`<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">`
35	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>`
36	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>`
37	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>`
38	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>`
39	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>`
40	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>`