markgojs

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>GoJS® Diagram Class</title> <script src="../../assets/js/jquery.min.js"></script> <script src="../../assets/js/bootstrap.min.js"></script> <script src="../../assets/js/highlight.js"></script> <script src="../../assets/js/api.js"></script> <script src="../../assets/js/fuse.min.js"></script> <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >  <link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/> <link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>  <link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" /> </head> <body>  <nav id="non-fixed-nav" class="navbar navbar-inverse navbar-top"> <div class="container-fluid"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#navbar"> <a id="toplogo" class="navbar-brand" href="../../index.html">GoJS</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="../../index.html">Home</a></li> <li><a href="../../learn/index.html">Learn</a></li> <li><a href="../../samples/index.html">Samples</a></li> <li><a href="../../intro/index.html">Intro</a></li> <li><a href="../../api/index.html">API</a></li> <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li> <li><a href="../../download.html">Download</a></li> <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li> <li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li> <li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li> <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li> </ul> </div> </div> </nav> <div class="container-fluid">  <div id="navindex" class="col-md-2">   <div class="sidebar-nav"> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#DiagramNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Diagram Classes</span> </div> </div> <div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li> <li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li> <li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li> <li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li> <li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li> <li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li> <li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li> <li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li> <li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li> <li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li> <li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li> <li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li> <li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li> <li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li> <li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li> <li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li> <li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li> <li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li> <li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li> <li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#GeometryNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Geometry Classes</span> </div> </div> <div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li> <li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li> <li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li> <li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li> <li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li> <li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li> <li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li> <li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li> <li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#ModelNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Model Classes</span> </div> </div> <div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li> <li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li> <li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li> <li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li> <li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li> <li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li> <li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#LayoutNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Layout Classes</span> </div> </div> <div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li> <li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li> <li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li> <li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li> <li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li> <li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li> <li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#ToolNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Tool Classes</span> </div> </div> <div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li> <li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li> <li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li> <li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li> <li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li> <li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li> <li><a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a></li> <li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li> <li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li> <li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li> <li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li> <li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li> <li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li> <li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li> <li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li> <li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li> <li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#CollectionNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Collection Classes</span> </div> </div> <div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li> <li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li> <li><a href="../symbols/List.html" class="linkConstructor">List</a></li> <li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li> <li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li> </ul> </div> </div> </div>   </div> <div id="contentBody" class="col-md-10"> <div class="searchsumm"> <div class="table-wrap"> <div class="table-cell" id="apisearch" data-base="../"> <div class="title">Search API</div> <div class="field"> <label for="search-field" class="search-icon"></label> <input id="search-field" type="text" /> </div> <ul class="results"> <li class="state loading">Preparing search index...</li> <li class="state failure">The search index is not available</li> </ul> </div> <div class="table-cell" id="apisumm"> <input type="checkbox" id="showsumms" /> <label class="apisumms" for="showsumms">Show Summaries</label> </div> </div> </div>  <div id="header" class="fineprint"> <b>GoJS</b>® Diagramming Components<br/>version 1.8.36 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a> </div>  <h2 class="classTitle"> Class Diagram </h2>  <p class="classsummary"> A Diagram is associated with an HTML DIV element. Constructing a Diagram creates an HTML Canvas element which it places inside of the given DIV element, in addition to several helper DIVs. <b>GoJS</b> will manage the contents of this DIV -- you should not modify the contents of the DIV, although you may style the given DIV (background, border, etc) and position and size it as needed. <p> Minimal Diagram construction looks like this. HTML: <pre class="html"><div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"></div></pre> <p> JavaScript: <pre class="javascript">var $ = go.GraphObject.make; // for conciseness myDiagram = $(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element { initialContentAlignment: go.Spot.Center, // center the content "undoManager.isEnabled": true // enable undo & redo });</pre> <p> The diagram will draw onto an HTML Canvas element, created inside the Diagram DIV. <p> Each Diagram holds a set of <a href="../symbols/Layer.html" class="linkConstructor">Layer</a>s each of which holds some number of <a href="../symbols/Part.html" class="linkConstructor">Part</a>s such as <a href="../symbols/Node.html" class="linkConstructor">Node</a>s and <a href="../symbols/Link.html" class="linkConstructor">Link</a>s. Each <a href="../symbols/Part.html" class="linkConstructor">Part</a> consists of <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s such as <a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a>s and <a href="../symbols/Shape.html" class="linkConstructor">Shape</a>s and <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>s holding yet more GraphObjects. <p> A Diagram and its Parts provide the visual representation of a <a href="../symbols/Model.html" class="linkConstructor">Model</a> that holds JavaScript data objects for the nodes and the links. The model provides the way to recognize the relationships between the data. <p class="boxrun"> Two Diagrams can display and manipulate the same Model. (<a href="../../samples/updateDemo.html">Example</a>) <p> A diagram will automatically create <a href="../symbols/Node.html" class="linkConstructor">Node</a>s and <a href="../symbols/Link.html" class="linkConstructor">Link</a>s corresponding to the model data. The diagram has a number of named templates it uses to create the actual parts: <a href="../symbols/Diagram.html#nodeTemplateMap" class="linkProperty">nodeTemplateMap</a>, <a href="../symbols/Diagram.html#groupTemplateMap" class="linkProperty">groupTemplateMap</a>, and <a href="../symbols/Diagram.html#linkTemplateMap" class="linkProperty">linkTemplateMap</a>. Each template may have some data <a href="../symbols/Binding.html" class="linkConstructor">Binding</a>s that set the part's <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s' properties based on the value of properties of the data. <p> A simple Node template and Model data (both nodes and links) may look like this: <pre class="javascript">var $ = go.GraphObject.make; // for conciseness // define a simple Node template myDiagram.nodeTemplate = $(go.Node, "Auto", // the Shape will go around the TextBlock $(go.Shape, "RoundedRectangle", // Shape.fill is bound to Node.data.color new go.Binding("fill", "color")), $(go.TextBlock, { margin: 3 }, // some room around the text // TextBlock.text is bound to Node.data.key new go.Binding("text", "key")) ); // create the model data that will be represented by Nodes and Links myDiagram.model = new go.GraphLinksModel( [ { key: "Alpha", color: "lightblue" }, { key: "Beta", color: "orange" }, { key: "Gamma", color: "lightgreen" }, { key: "Delta", color: "pink" } ], [ { from: "Alpha", to: "Beta" }, { from: "Alpha", to: "Gamma" }, { from: "Beta", to: "Beta" }, { from: "Gamma", to: "Delta" }, { from: "Delta", to: "Alpha" } ]);</pre> <p class="boxrun"> The above code is used to make the <a href="../../samples/minimal.html">Minimal sample</a>, a simple example of creating a Diagram and setting its model. <p class="boxread"> Read about models on the <a href="../../intro/usingModels.html">Using Models</a> page in the introduction. A diagram is responsible for scrolling (<a href="../symbols/Diagram.html#position" class="linkProperty">position</a>) and zooming (<a href="../symbols/Diagram.html#scale" class="linkProperty">scale</a>) all of the parts that it shows. Each <a href="../symbols/Part.html" class="linkConstructor">Part</a> occupies some area given by its <a href="../symbols/GraphObject.html#actualBounds" class="linkProperty">GraphObject.actualBounds</a>. <p> The union of all of the parts' bounds constitutes the <a href="../symbols/Diagram.html#documentBounds" class="linkProperty">documentBounds</a>. The document bounds determines the area that the diagram can be scrolled to. There are several properties that you can set, such as <a href="../symbols/Diagram.html#initialContentAlignment" class="linkProperty">initialContentAlignment</a>, that control the initial size and position of the diagram contents. <p> At any later time you can also explicitly set the <a href="../symbols/Diagram.html#position" class="linkProperty">position</a> and/or <a href="../symbols/Diagram.html#scale" class="linkProperty">scale</a> to get the appearance that you want. But you may find it easier to call methods to get the desired effect. For example, if you want to make a particular Node be centered in the viewport, call either <a href="../symbols/Diagram.html#centerRect" class="linkMethod">centerRect</a> or <a href="../symbols/Diagram.html#scrollToRect" class="linkMethod">scrollToRect</a> with the Node's <a href="../symbols/GraphObject.html#actualBounds" class="linkProperty">GraphObject.actualBounds</a>, depending on whether or not you want the view to be scrolled if the node is already in view. <p class="boxread"> Read in the Introduction about <a href="../../intro/viewport.html">Viewports</a> and the <a href="../../intro/initialView.html">Initial Viewport</a>. You can have the diagram perform automatic layouts of its nodes and links by setting <a href="../symbols/Diagram.html#layout" class="linkProperty">layout</a> to an instance of the <a href="../symbols/Layout.html" class="linkConstructor">Layout</a> subclass of your choice. The default <a href="../symbols/Diagram.html#layout" class="linkProperty">layout</a> is an instance of the <a href="../symbols/Layout.html" class="linkConstructor">Layout</a> base class that ignores links and only positions <a href="../symbols/Node.html" class="linkConstructor">Node</a>s that do not have a location. This default layout will allow you to programmatically position nodes (including by loading from a database) and will also allow the user to manually position nodes using the <a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a>. <p> If you do supply a particular layout as the <a href="../symbols/Diagram.html#layout" class="linkProperty">layout</a>, you can control which <a href="../symbols/Part.html" class="linkConstructor">Part</a>s it operates on by setting <a href="../symbols/Part.html#isLayoutPositioned" class="linkProperty">Part.isLayoutPositioned</a>. Normally, of course, it works on all top-level nodes and links. The layout is performed both after the model is first loaded as well as after any part is added or removed or changes visibility or size. You can disable the initial layout by setting <a href="../symbols/Layout.html#isInitial" class="linkProperty">Layout.isInitial</a> to false. You can disable later automatic layouts by setting <a href="../symbols/Layout.html#isOngoing" class="linkProperty">Layout.isOngoing</a> to false. <p class="boxread"> See the <a href="../../intro/layouts.html">Layouts</a> page in the Introduction for a summary of layout behavior. <p> A diagram maintains a collection of selected parts, the <a href="../symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a>. To select a Part you set its <a href="../symbols/Part.html#isSelected" class="linkProperty">Part.isSelected</a> property to true. <p> There are many properties, named "allow...", that control what operations the user may perform on the parts in the diagram. These correspond to the same named properties on <a href="../symbols/Layer.html" class="linkConstructor">Layer</a> that govern the behavior for those parts in a particular layer. Furthermore for some of these properties there are corresponding properties on <a href="../symbols/Part.html" class="linkConstructor">Part</a>, named "...able", that govern the behavior for that individual part. For example, the <a href="../symbols/Diagram.html#allowCopy" class="linkProperty">allowCopy</a> property corresponds to <a href="../symbols/Layer.html#allowCopy" class="linkProperty">Layer.allowCopy</a> and to the property <a href="../symbols/Part.html#copyable" class="linkProperty">Part.copyable</a>. The <a href="../symbols/Part.html#canCopy" class="linkMethod">Part.canCopy</a> predicate is false if any of these properties is false. <p class="boxread"> See the <a href="../../intro/permissions.html">Permissions</a> page for a more thorough discussion. <p> The <a href="../symbols/Diagram.html#commandHandler" class="linkProperty">commandHandler</a> implements various standard commands, such as the <a href="../symbols/CommandHandler.html#deleteSelection" class="linkMethod">CommandHandler.deleteSelection</a> method and the <a href="../symbols/CommandHandler.html#canDeleteSelection" class="linkMethod">CommandHandler.canDeleteSelection</a> predicate. <p class="boxread"> See the <a href="../../intro/commands.html">Commands</a> page for a listing of keyboard commands and the use of commands in general. <p> The diagram supports modular behavior for mouse events by implementing "tools". All mouse and keyboard events are represented by <a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a>s and redirected to the <a href="../symbols/Diagram.html#currentTool" class="linkProperty">currentTool</a>. The default tool is an instance of <a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a> which keeps three lists of mode-less tools: <a href="../symbols/ToolManager.html#mouseDownTools" class="linkProperty">ToolManager.mouseDownTools</a>, <a href="../symbols/ToolManager.html#mouseMoveTools" class="linkProperty">ToolManager.mouseMoveTools</a>, and <a href="../symbols/ToolManager.html#mouseUpTools" class="linkProperty">ToolManager.mouseUpTools</a>. The ToolManager searches these lists when a mouse event happens to find the first tool that can run. It then makes that tool the new <a href="../symbols/Diagram.html#currentTool" class="linkProperty">currentTool</a>, where it can continue to process input events. When the tool is done, it stops itself, causing the <a href="../symbols/Diagram.html#defaultTool" class="linkProperty">defaultTool</a> to be the new <a href="../symbols/Diagram.html#currentTool" class="linkProperty">currentTool</a>. <p> Mouse-down tools include: <ul> <li><a href="../symbols/ToolManager.html#actionTool" class="linkProperty">ToolManager.actionTool</a>, to support objects like "buttons"</li> <li><a href="../symbols/ToolManager.html#relinkingTool" class="linkProperty">ToolManager.relinkingTool</a>, to reconnect an existing link</li> <li><a href="../symbols/ToolManager.html#linkReshapingTool" class="linkProperty">ToolManager.linkReshapingTool</a>, to modify the route of an existing link</li> <li><a href="../symbols/ToolManager.html#resizingTool" class="linkProperty">ToolManager.resizingTool</a>, to change the size of an object</li> <li><a href="../symbols/ToolManager.html#rotatingTool" class="linkProperty">ToolManager.rotatingTool</a>, to change the angle of an object</li> </ul> Mouse-move tools include: <ul> <li><a href="../symbols/ToolManager.html#linkingTool" class="linkProperty">ToolManager.linkingTool</a>, to draw a new link</li> <li><a href="../symbols/ToolManager.html#draggingTool" class="linkProperty">ToolManager.draggingTool</a>, to move or copy the selection</li> <li><a href="../symbols/ToolManager.html#dragSelectingTool" class="linkProperty">ToolManager.dragSelectingTool</a>, to select parts within a rectangular area</li> <li><a href="../symbols/ToolManager.html#panningTool" class="linkProperty">ToolManager.panningTool</a>, to pan the diagram</li> </ul> Mouse-up tools include: <ul> <li><a href="../symbols/ToolManager.html#contextMenuTool" class="linkProperty">ToolManager.contextMenuTool</a>, to manage context menus</li> <li><a href="../symbols/ToolManager.html#textEditingTool" class="linkProperty">ToolManager.textEditingTool</a>, to support in-place text editing</li> <li><a href="../symbols/ToolManager.html#clickCreatingTool" class="linkProperty">ToolManager.clickCreatingTool</a>, to create new parts where the user clicks</li> <li><a href="../symbols/ToolManager.html#clickSelectingTool" class="linkProperty">ToolManager.clickSelectingTool</a>, to select parts</li> <p> </ul> <p> You can also run a tool in a modal fashion by explicitly setting <a href="../symbols/Diagram.html#currentTool" class="linkProperty">currentTool</a>. That tool will keep running until some code replaces the <a href="../symbols/Diagram.html#currentTool" class="linkProperty">currentTool</a>/ This normally happens when the current tool calls <a href="../symbols/Tool.html#stopTool" class="linkMethod">Tool.stopTool</a>, such as on a mouse-up event. <p class="boxread"> See the <a href="../../intro/tools.html">Tools</a> page for a listing of predefined tools and how they operate. <p> A diagram raises various <a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a>s when interesting things happen that may have affected the whole diagram. See the documentation for <a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a> for a complete listing. </p>  <h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2> <div class="table-responsive"> <table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class Diagram."> <thead> <tr> <th scope="col" class="name">Name</th> <th scope="col" class="description">Description</th> </tr> </thead> <tbody> <tr> <td class="name" > <div class="name"> Diagram(div) </div> </td> <td class="description"> <div class="description"> <p><p>Construct an empty Diagram for a particular DIV HTML element.<span class="nodetails" id="xconDiagram"><a class="morelink" onclick="hst('conDiagram')">More...</a></span> <span class="details" id="conDiagram"> </span><div class="details" id="dconDiagram"><p> You will normally initialize properties of the Diagram that control its appearance and behavior. These properties include: <ul> <li>templates (such as <a href="../symbols/Diagram.html#nodeTemplate" class="linkProperty">nodeTemplate</a> or <a href="../symbols/Diagram.html#linkSelectionAdornmentTemplate" class="linkProperty">linkSelectionAdornmentTemplate</a>),</li> <li>an automatic layout (if desired, <a href="../symbols/Diagram.html#layout" class="linkProperty">layout</a>),</li> <li>positioning or scaling (such as <a href="../symbols/Diagram.html#initialContentAlignment" class="linkProperty">initialContentAlignment</a> or <a href="../symbols/Diagram.html#initialAutoScale" class="linkProperty">initialAutoScale</a>),</li> <li>permissions (such as <a href="../symbols/Diagram.html#isReadOnly" class="linkProperty">isReadOnly</a> or <a href="../symbols/Diagram.html#allowDelete" class="linkProperty">allowDelete</a>), or</li> <li>Tool or CommandHandler customization (such as <a href="../symbols/CommandHandler.html#archetypeGroupData" class="linkProperty">CommandHandler.archetypeGroupData</a> or <a href="../symbols/Tool.html#isEnabled" class="linkProperty">Tool.isEnabled</a>): <code>diagram.toolManager.dragSelectingTool.isEnabled = false;</code>.</li> </ul> Then you will need to construct a Model (usually a <a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>) for the Diagram, initialize its data by setting its <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">Model.nodeDataArray</a> and other properties, and then set the diagram's <a href="../symbols/Diagram.html#model" class="linkProperty">model</a>. <p> Finally, if you want to disassociate the Diagram from the HTML Div element, set <a href="../symbols/Diagram.html#div" class="linkProperty">Diagram.div</a> to null. If you remove a part of the HTML DOM containing a Div with a Diagram, you will need to set <a href="../symbols/Diagram.html#div" class="linkProperty">div</a> to null in order for the page to recover the memory. <p> It is commonplace to use the static function <a href="../symbols/GraphObject.html#.make" class="linkStatic">GraphObject.make</a> to build a Diagram: <pre> var $ = go.GraphObject.make; var diagram = $(go.Diagram, "myDiagramDiv", { initialContentAlignment: go.Spot.Center, allowZoom: false, "animationManager.isEnabled": false, // turn off automatic animations "grid.visible": true, // display a background grid for the whole diagram "grid.gridCellSize": new go.Size(20, 20), // allow double-click in background to create a new node "clickCreatingTool.archetypeNodeData": { text: "Node" }, // allow Ctrl-G to call the groupSelection command "commandHandler.archetypeGroupData": { text: "Group", isGroup: true, color: "blue" }, "commandHandler.copiesTree": true, // for the copy command "commandHandler.deletesTree": true, // for the delete command "toolManager.hoverDelay": 100, // how quickly tooltips are shown // mouse wheel zooms instead of scrolls "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, "draggingTool.dragsTree": true, // dragging for both move and copy "draggingTool.isGridSnapEnabled": true, layout: $(go.TreeLayout, { angle: 90, sorting: go.TreeLayout.SortingAscending }), "undoManager.isEnabled": true, // enable undo & redo // a Changed listener on the Diagram.model "ModelChanged": function(e) { if (e.isTransactionFinished) saveModel(); } }); </pre></div> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{Element|string=}</span> <b>div</b> </dt> <dd>A reference to a DIV HTML element or its ID as a string. If no DIV is supplied one will be created in memory. The Diagram's <a href="../symbols/Diagram.html#div" class="linkProperty">Diagram.div</a> property can then be set later on.</dd> </dl> </div> </td> </tr> </tbody> </table> </div>  <h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2> <div class="table-responsive"> <table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class Diagram."> <thead> <tr> <th scope="col" class="name">Name, Value Type</th> <th scope="col" class="description">Description</th> </tr> </thead> <tbody> <tr id="allowClipboard" > <td class="name"> <div class="name"> allowClipboard </div> <div class="attributes"> <span class="light">{boolean}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets whether the user may copy to or paste parts from the internal clipboard.<span class="nodetails" id="xpropallowClipboard"><a class="morelink" onclick="hst('propallowClipboard')">More...</a></span> <span class="details" id="propallowClipboard"> This allows use of <a href="../symbols/CommandHandler.html#cutSelection" class="linkMethod">CommandHandler.cutSelection</a>, <a href="../symbols/CommandHandler.html#copySelection" class="linkMethod">CommandHandler.copySelection</a> and <a href="../symbols/CommandHandler.html#pasteSelection" class="linkMethod">CommandHandler.pasteSelection</a>. The initial value is true.</span> </div> </td> </tr> <tr id="allowCopy" > <td class="name"> <div class="name"> allowCopy </div> <div class="attributes"> <span class="light">{boolean}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets whether the user may copy objects.<span class="nodetails" id="xpropallowCopy"><a class="morelink" onclick="hst('propallowCopy')">More...</a></span> <span class="details" id="propallowCopy"> The initial value is true.</span> </div> </td> </tr> <tr id="allowDelete" > <td class="name"> <div class="name"> allowDelete </div> <div class="attributes"> <span class="light">{boolean}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets whether the user may delete objects from the Diagram.<span class="nodetails" id="xpropallowDelete"><a class="morelink" onclick="hst('propallowDelete')">More...</a></span> <span class="details" id="propallowDelete"> The initial value is true.</span> </div> </td> </tr> <tr id="allowDragOut" > <td class="name"> <div class="name"> allowDragOut </div> <div class="attributes"> <span class="light">{boolean}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets whether the user may start a drag-and-drop in this Diagram, possibly dropping in a different element.<span class="nodetails" id="xpropallowDragOut"><a class="morelink" onclick="hst('propallowDragOut')">More...</a></span> <span class="details" id="propallowDragOut"> The initial value is false.</span> </div> </td> </tr> <tr id="allowDrop" > <td class="name"> <div class="name"> allowDrop </div> <div class="attributes"> <span class="light">{boolean}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets whether the user may end a drag-and-drop operation in this Diagram.<span class="nodetails" id="xpropallowDrop"><a class="morelink" onclick="hst('propallowDrop')">More...</a></span> <span class="details" id="propallowDrop"> This is typically set to true when a Diagram is used with a <a href="../symbols/Palette.html" class="linkConstructor">Palette</a>. </span><div class="details" id="dpropallowDrop"><p> The initial value is false.</div> </div> </td> </tr> <tr id="allowGroup" > <td class="name"> <div class="name"> allowGroup </div> <div class="attributes"> <span class="light">{boolean}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets whether the user may group parts together.<span class="nodetails" id="xpropallowGroup"><a class="morelink" onclick="hst('propallowGroup')">More...</a></span> <span class="details" id="propallowGroup"> The initial value is true.</span> </div> </td> </tr> <tr id="allowHorizontalScroll" > <td class="name"> <div class="name"> allowHorizontalScroll </div> <div class="attributes"> <span class="light">{boolean}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets whether the user is allowed to use the horizontal scrollbar.<span class="nodetails" id="xpropallowHorizontalScroll"><a class="morelink"