gojs

<!doctype html> <html class="default no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Part | GoJS API</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../../assets/css/bootstrap.min.css"> <link rel="stylesheet" href="../assets/css/main.css"> </head> <body> <header>  <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" target="api">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="tsd-page-header"> <div class="tsd-page-toolbar"> <div class="container-fluid plr15"> <div class="table-wrap"> <div class="table-cell" id="tsd-search" data-index="../assets/js/search.js" data-base=".."> <div class="field"> <label for="tsd-search-field" class="tsd-widget search no-caption">Search</label> <input id="tsd-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> <a href="../index.html" class="title">GoJS API</a> </div> <div class="table-cell" id="tsd-widgets"> <div id="tsd-filter"> <a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a> <div class="tsd-filter-group"> <div class="tsd-select" id="tsd-filter-visibility"> <span class="tsd-select-label">All</span> <ul class="tsd-select-list"> <li data-value="public">Public</li> <li data-value="protected">Public/Protected</li> <li data-value="private" class="selected">All</li> </ul> </div> </div> </div> <a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a> </div> </div> </div> </div> <div class="tsd-page-title"> <div class="container-fluid plr15"> <div class="top-copyright">  <b>GoJS</b>® Diagramming Components<br/>version 2.1.18<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a> </div> <div> <h1>Class Part</h1> </div> </div> </div> </div> </header> <div class="container-fluid container-main plr15"> <div class="row"> <div class="col-8 col-content"> <section class="tsd-panel tsd-hierarchy"> <h3>Hierarchy</h3> <ul class="tsd-hierarchy"> <li> <a href="GraphObject.html" class="tsd-signature-type">GraphObject</a> <ul class="tsd-hierarchy"> <li> <a href="Panel.html" class="tsd-signature-type">Panel</a> <ul class="tsd-hierarchy"> <li> <span class="target">Part</span> <ul class="tsd-hierarchy"> <li> <a href="Adornment.html" class="tsd-signature-type">Adornment</a> </li> <li> <a href="Node.html" class="tsd-signature-type">Node</a> </li> <li> <a href="Link.html" class="tsd-signature-type">Link</a> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </section> <section class="tsd-panel tsd-comment"> <div class="tsd-comment tsd-typography"> <p>This is the base class for all user-manipulated top-level objects. Because it inherits from <a href="Panel.html">Panel</a>, it is automatically a visual container of other <a href="GraphObject.html">GraphObject</a>s. Because it thus also inherits from <a href="GraphObject.html">GraphObject</a>, it also has properties such as <a href="GraphObject.html#actualBounds">GraphObject.actualBounds</a>, <a href="GraphObject.html#contextMenu">GraphObject.contextMenu</a>, and <a href="GraphObject.html#visible">GraphObject.visible</a>.</p> <p>If you just want an object that users can select and manipulate, you can create an instance of this class.</p> <p>If you want an object that also supports being connected by links to other objects, use the <a href="Node.html">Node</a> class, which inherits from Part. Create those connections by using instances of the <a href="Link.html">Link</a> class.</p> <p>If you want a node that logically contains a subgraph of nodes and links, use the <a href="Group.html">Group</a> class, which inherits from <a href="Node.html">Node</a>.</p> <p>If you want an object that decorates another Part, without having to modify that Part, use the <a href="Adornment.html">Adornment</a> class. Adornments do not support linking or grouping or being selected.</p> <p>You can construct a Part, add <a href="GraphObject.html">GraphObject</a>s to it programmatically, and then add the part to a diagram by calling <a href="Diagram.html#add">Diagram.add</a>. However it is commonplace to add data to a model by setting its <a href="Model.html#nodeDataArray">Model.nodeDataArray</a> or calling <a href="Model.html#addNodeData">Model.addNodeData</a>, or for <a href="Link.html">Link</a>s, setting the <a href="GraphLinksModel.html#linkDataArray">GraphLinksModel.linkDataArray</a> or calling <a href="GraphLinksModel.html#addLinkData">GraphLinksModel.addLinkData</a>. Such actions will cause a diagram that is displaying the model to copy a template, which is a Part that may have data <a href="Binding.html">Binding</a>s, and add the new part to the diagram. The <a href="Panel.html#data">Panel.data</a> property will refer to that data object in the model.</p> <p>Some examples of adding Parts to a Diagram:</p> <pre><code class="hljs js"><span class="hljs-comment">// A simple Part template</span> myDiagram.nodeTemplate = $(go.Part, <span class="hljs-string">"Horizontal"</span>, $(go.Shape, <span class="hljs-string">"Circle"</span>, { <span class="hljs-attr">width</span>: <span class="hljs-number">20</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">20</span> }), $(go.TextBlock, <span class="hljs-string">"Hello World"</span>) ); <span class="hljs-comment">// Node templates can be either Nodes, or simple Parts</span> <span class="hljs-comment">// (But not Groups, Adornments, or Links)</span> <span class="hljs-comment">// Adds copies of the nodeTemplate bound to the specified node data:</span> myDiagram.model.nodeDataArray = [ { <span class="hljs-attr">key</span>: <span class="hljs-string">"Alpha"</span> }, { <span class="hljs-attr">key</span>: <span class="hljs-string">"Beta"</span> } ]; <span class="hljs-comment">// Adds one copy of the nodeTemplate bound to the given node data:</span> myDiagram.model.addNodeData( { <span class="hljs-attr">key</span>: <span class="hljs-string">"Gamma"</span> } );</code></pre> <p class="boxread"> See the <a href="../../intro/usingModels.html">Introduction on using Models</a> for examples and more information. <h3>Layers and Z-ordering</h3> <p>Parts added to a Diagram exist in one of the Diagram's <a href="Layer.html">Layer</a>s. You can specify which layer the part should be in by setting <a href="Part.html#layerName">layerName</a>. Parts cannot be nested in the visual tree -- they cannot be added to other Parts of Panels.</p> <p>Parts can be individually z-ordered within a layer by setting <a href="Part.html#zOrder">zOrder</a>. Parts within the same layer that have a higher zOrder number will be drawn above parts with a lower number.</p> <h3>Size and Position</h3> <p>The size and position of a part are given by its <a href="GraphObject.html#actualBounds">GraphObject.actualBounds</a>. The size is determined by the <a href="GraphObject.html">GraphObject</a>s that are elements inside this part. You can change the position by setting <a href="GraphObject.html#position">GraphObject.position</a> or <a href="Part.html#location">Part.location</a>.</p> <p>The "location" of a part is commonly the same as its "position". The "position" is always the point that is at the top-left corner of the area occupied by the part. But the "location" may be different from the "position" if you want to think of the part as being "at" a different spot in the part. For example, you might want the "location" to be at the center of a <a href="Picture.html">Picture</a> that has a <a href="TextBlock.html">TextBlock</a> title of arbitrary size. In this case you would set the <a href="Part.html#locationSpot">locationSpot</a> to be <a href="Spot.html#static-Center">Spot.Center</a> and the <a href="Part.html#locationObjectName">locationObjectName</a> to be the name of the Picture element in your Part.</p> <p>A part may be selected or de-selected by setting its <a href="Part.html#isSelected">isSelected</a> property. This may also happen due to a call to <a href="Diagram.html#select">Diagram.select</a> or other operations that change the selection. The user may change this property as part of the operation of the <a href="ClickSelectingTool.html">ClickSelectingTool</a>, due to the user's mouse click, if the part is <a href="Part.html#selectable">selectable</a>.</p> <h3>Ability Properties (Permissions)</h3> <p>There are many properties named "...able", that control what operations the user may perform on this part. These properties correspond to the similarly named properties on <a href="Diagram.html">Diagram</a> and <a href="Layer.html">Layer</a> that govern the behavior for all parts in all layers or for all parts in the given layer. For example, the <a href="Part.html#copyable">Part.copyable</a> property corresponds to the properties <a href="Diagram.html#allowCopy">Diagram.allowCopy</a> and <a href="Layer.html#allowCopy">Layer.allowCopy</a>.</p> <p>For each of these "ability" properties there is a corresponding "can..." predicate. For example, the <a href="Part.html#canCopy">Part.canCopy</a> predicate is false if any of the three previously named properties is false. Commands and tools will normally call these predicates rather than just looking at Part properties.</p> <p class="boxread"> For more discussion about permissions, please read: <a href="../../intro/permissions.html">Permissions</a>. <p>As previously mentioned, each <a href="Diagram.html">Diagram</a> supports the notion of selected parts. One way of displaying that a part is selected is by modifying the part. You can set the <a href="Part.html#selectionChanged">selectionChanged</a> property to be a function that is called when the value of <a href="Part.html#isSelected">isSelected</a> has changed; it is passed the Part as the first argument. The function can modify the color of one or more <a href="GraphObject.html">GraphObject</a>s in the visual tree of that Part. Or perhaps it could toggle the <a href="GraphObject.html#visible">GraphObject.visible</a> property of an object that is normally hidden when the part is not selected.</p> <p>The Part class also supports showing separate visual objects for a part when it gets selected. These visuals are typically used to show that the part is selected ("selection handles") or are used to allow the user to manipulate or modify the part with a tool ("tool handles"). These handles are instances of <a href="Adornment.html">Adornment</a>s. The <a href="Part.html#updateAdornments">updateAdornments</a> method is responsible for showing or hiding adornments, normally depending on whether the part is selected.</p> <p>When the <a href="Part.html#selectionAdorned">selectionAdorned</a> property is true, a selected part automatically gets an <a href="Adornment.html">Adornment</a> created for it. By default the selection adornment is just a simple blue box around the Part, and a blue shape following the route of a selected Link. However you can set the <a href="Part.html#selectionAdornmentTemplate">selectionAdornmentTemplate</a> to an arbitrarily complex Adornment. This way it can show more information or buttons for executing various commands when the user selects a Part.</p> <p>Tool handles are shown for those mode-less mouse-down tools that need it. The process of updating adornments for a part will call <a href="Tool.html#updateAdornments">Tool.updateAdornments</a> on each tool in <a href="ToolManager.html#mouseDownTools">ToolManager.mouseDownTools</a>. Most tools might not need special tool handles. But, for example, <a href="ResizingTool.html">ResizingTool</a> naturally will want to create an adornment with eight resize handles positioned at the corners and at the middles of the sides of the selected node's visual element, if the node has its <a href="Part.html#canResize">canResize</a> function returning true.</p> <p>One may not always want the whole Part to get the selection handle or all tool handles. Sometimes one wants to emphasize selection by highlighting a particular element within the part's visual tree. This can be achieved by setting the <a href="Part.html#selectionObjectName">selectionObjectName</a> property, and making sure the desired element has the same <a href="GraphObject.html#name">GraphObject.name</a> property value.</p> <p class="boxread"> For more discussion about selection, see <a href="../../intro/selection.html">Selection</a>. <p>Similarly the <a href="Part.html#resizeObjectName">resizeObjectName</a> and <a href="Part.html#rotateObjectName">rotateObjectName</a> properties direct the corresponding <a href="ResizingTool.html">ResizingTool</a> and <a href="RotatingTool.html">RotatingTool</a> to operate on the particular <a href="GraphObject.html">GraphObject</a> in the Part's visual tree with the given name. That includes both providing tool handles and actually modifying properties on that object.</p> <p>Parts are not resizable or rotatable by default: you need to set <a href="Part.html#resizable">resizable</a> and/or <a href="Part.html#rotatable">rotatable</a> to true.</p> <p class="boxread"> For more discussion about tools, see <a href="../../intro/tools.html">Tools</a>. <p>A Part may be positioned (or a <a href="Link.html">Link</a> may be routed) by a <a href="Layout.html">Layout</a>. This will happen automatically if <a href="Diagram.html#layout">Diagram.layout</a> or <a href="Group.html#layout">Group.layout</a> are set. The default <a href="Diagram.html#layout">Diagram.layout</a> will position any nodes that were not given explicit positions or location.</p> <p>If you set <a href="Part.html#isLayoutPositioned">isLayoutPositioned</a> to false, this part will not participate in any of the standard layouts, so it will not be moved by a layout or affect other parts in a layout. In order for the part to get a <a href="Part.html#location">location</a> or position you will need to supply it explicitly.</p> <p>As parts are added to or removed from a diagram, the <a href="Layout.html">Layout</a> responsible for positioning the part is invalidated. This will cause the layout to be performed again in the near future, at the end of the transaction. This automatic layout invalidation also occurs as parts change their visibility (<a href="GraphObject.html#visible">GraphObject.visible</a>) or their size (<a href="GraphObject.html#actualBounds">GraphObject.actualBounds</a>). If you do want there to be a <a href="Diagram.html#layout">Diagram.layout</a> but you do not want an automatic layout to happen after removing parts (for example), you can set <a href="Part.html#layoutConditions">layoutConditions</a> not to include the <a href="Part.html#static-LayoutRemoved">Part.LayoutRemoved</a> flag. In this particular case, you could set <a href="Part.html#layoutConditions">layoutConditions</a> to: <code>go.Part.LayoutStandard & ~go.Part.LayoutRemoved</code>. It may also reasonable for your application to set it to <a href="Part.html#static-LayoutNone">Part.LayoutNone</a>. Do not forget to consider applying the same conditions to links as well as to nodes and groups.</p> <p>If you want to save the locations/positions of the parts in a diagram, it is commonplace to data bind the <a href="Part.html#location">location</a> to a property on your node data with a TwoWay <a href="Binding.html">Binding</a> (call <a href="Binding.html#makeTwoWay">Binding.makeTwoWay</a>). For example:</p> <pre><code class="hljs js">$(go.Part, <span class="hljs-string">"Horizontal"</span>, <span class="hljs-keyword">new</span> go.Binding(<span class="hljs-string">"location"</span>, <span class="hljs-string">"loc"</span>, go.Point.parse).makeTwoWay(go.Point.stringify), ...</code></pre> <p>Then as the nodes are moved, whether manually by the user or automatically by a <a href="Layout.html">Layout</a>, the model data is automatically updated with the location.</p> <p class="boxread"> For more discussion about related topics, see <a href="../../intro/selection.html">Selection</a>, <a href="../../intro/tools.html">Tools</a>, and <a href="../../intro/permissions.html">Permissions</a>. <p>Parts that are templates should have no relationships with other Parts. Only real Parts that are in a Diagram can belong to Groups or have any Adornments. Only real Nodes in a Diagram can be connected with Links.</p> </div> </section> <section class="tsd-panel-group tsd-index-group"> <h2>Index</h2> <section class="tsd-panel tsd-index-panel"> <div class="tsd-index-content"> <section class="tsd-index-section "> <h3>Constructors</h3> <ul class="tsd-index-list"> <li class="tsd-kind-constructor tsd-parent-kind-class"><a href="Part.html#constructor" class="tsd-kind-icon">constructor</a></li> </ul> </section> <section class="tsd-index-section "> <h3>Properties</h3> <ul class="tsd-index-list"> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Part.html#adornments" class="tsd-kind-icon">adornments</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#category" class="tsd-kind-icon">category</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#containingGroup" class="tsd-kind-icon">containing<wbr>Group</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#containingGroupChanged" class="tsd-kind-icon">containing<wbr>Group<wbr>Changed</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#copyable" class="tsd-kind-icon">copyable</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#deletable" class="tsd-kind-icon">deletable</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Part.html#diagram" class="tsd-kind-icon">diagram</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#dragComputation" class="tsd-kind-icon">drag<wbr>Computation</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#groupable" class="tsd-kind-icon">groupable</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#highlightedChanged" class="tsd-kind-icon">highlighted<wbr>Changed</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#isAnimated" class="tsd-kind-icon">is<wbr>Animated</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#isHighlighted" class="tsd-kind-icon">is<wbr>Highlighted</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#isInDocumentBounds" class="tsd-kind-icon">is<wbr>InDocument<wbr>Bounds</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#isLayoutPositioned" class="tsd-kind-icon">is<wbr>Layout<wbr>Positioned</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#isSelected" class="tsd-kind-icon">is<wbr>Selected</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#isShadowed" class="tsd-kind-icon">is<wbr>Shadowed</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Part.html#isTopLevel" class="tsd-kind-icon">is<wbr>Top<wbr>Level</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Part.html#key" class="tsd-kind-icon">key</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Part.html#layer" class="tsd-kind-icon">layer</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#layerChanged" class="tsd-kind-icon">layer<wbr>Changed</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#layerName" class="tsd-kind-icon">layer<wbr>Name</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#layoutConditions" class="tsd-kind-icon">layout<wbr>Conditions</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#location" class="tsd-kind-icon">location</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Part.html#locationObject" class="tsd-kind-icon">location<wbr>Object</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#locationObjectName" class="tsd-kind-icon">location<wbr>Object<wbr>Name</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#locationSpot" class="tsd-kind-icon">location<wbr>Spot</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#maxLocation" class="tsd-kind-icon">max<wbr>Location</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#minLocation" class="tsd-kind-icon">min<wbr>Location</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#movable" class="tsd-kind-icon">movable</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#reshapable" class="tsd-kind-icon">reshapable</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#resizable" class="tsd-kind-icon">resizable</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#resizeAdornmentTemplate" class="tsd-kind-icon">resize<wbr>Adornment<wbr>Template</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#resizeCellSize" class="tsd-kind-icon">resize<wbr>Cell<wbr>Size</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Part.html#resizeObject" class="tsd-kind-icon">resize<wbr>Object</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#resizeObjectName" class="tsd-kind-icon">resize<wbr>Object<wbr>Name</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#rotatable" class="tsd-kind-icon">rotatable</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#rotateAdornmentTemplate" class="tsd-kind-icon">rotate<wbr>Adornment<wbr>Template</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Part.html#rotateObject" class="tsd-kind-icon">rotate<wbr>Object</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#rotateObjectName" class="tsd-kind-icon">rotate<wbr>Object<wbr>Name</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#rotationSpot" class="tsd-kind-icon">rotation<wbr>Spot</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#selectable" class="tsd-kind-icon">selectable</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#selectionAdorned" class="tsd-kind-icon">selection<wbr>Adorned</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#selectionAdornmentTemplate" class="tsd-kind-icon">selection<wbr>Adornment<wbr>Template</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#selectionChanged" class="tsd-kind-icon">selection<wbr>Changed</a></li> <li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Part.html#selectionObject" class="tsd-kind-icon">selection<wbr>Object</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#selectionObjectName" class="tsd-kind-icon">selection<wbr>Object<wbr>Name</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#shadowBlur" class="tsd-kind-icon">shadow<wbr>Blur</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#shadowColor" class="tsd-kind-icon">shadow<wbr>Color</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#shadowOffset" class="tsd-kind-icon">shadow<wbr>Offset</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#text" class="tsd-kind-icon">text</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#textEditable" class="tsd-kind-icon">text<wbr>Editable</a></li> <li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Part.html#zOrder" class="tsd-kind-icon">z<wbr>Order</a></li> </ul> </section> <section class="tsd-index-section "> <h3>Methods</h3> <ul class="tsd-index-list"> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#addAdornment" class="tsd-kind-icon">add<wbr>Adornment</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#canCopy" class="tsd-kind-icon">can<wbr>Copy</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#canDelete" class="tsd-kind-icon">can<wbr>Delete</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#canEdit" class="tsd-kind-icon">can<wbr>Edit</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#canGroup" class="tsd-kind-icon">can<wbr>Group</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#canLayout" class="tsd-kind-icon">can<wbr>Layout</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#canMove" class="tsd-kind-icon">can<wbr>Move</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#canReshape" class="tsd-kind-icon">can<wbr>Reshape</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#canResize" class="tsd-kind-icon">can<wbr>Resize</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#canRotate" class="tsd-kind-icon">can<wbr>Rotate</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#canSelect" class="tsd-kind-icon">can<wbr>Select</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#clearAdornments" class="tsd-kind-icon">clear<wbr>Adornments</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#ensureBounds" class="tsd-kind-icon">ensure<wbr>Bounds</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#findAdornment" class="tsd-kind-icon">find<wbr>Adornment</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#findCommonContainingGroup" class="tsd-kind-icon">find<wbr>Common<wbr>Containing<wbr>Group</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#findSubGraphLevel" class="tsd-kind-icon">find<wbr>Sub<wbr>Graph<wbr>Level</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#findTopLevelPart" class="tsd-kind-icon">find<wbr>Top<wbr>Level<wbr>Part</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#getDocumentBounds" class="tsd-kind-icon">get<wbr>Document<wbr>Bounds</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#invalidateLayout" class="tsd-kind-icon">invalidate<wbr>Layout</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#isMemberOf" class="tsd-kind-icon">is<wbr>Member<wbr>Of</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#isVisible" class="tsd-kind-icon">is<wbr>Visible</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#move" class="tsd-kind-icon">move</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#moveTo" class="tsd-kind-icon">move<wbr>To</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#removeAdornment" class="tsd-kind-icon">remove<wbr>Adornment</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#updateAdornments" class="tsd-kind-icon">update<wbr>Adornments</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#updateRelationshipsFromData" class="tsd-kind-icon">update<wbr>Relationships<wbr>From<wbr>Data</a></li> <li class="tsd-kind-method tsd-parent-kind-class"><a href="Part.html#updateTargetBindings" class="tsd-kind-icon">update<wbr>Target<wbr>Bindings</a></li> </ul> </section> <section class="tsd-index-section "> <h3>Constants</h3> <ul class="tsd-index-list"> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Part.html#static-LayoutAdded" class="tsd-kind-icon">Layout<wbr>Added</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Part.html#static-LayoutGroupLayout" class="tsd-kind-icon">Layout<wbr>Group<wbr>Layout</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Part.html#static-LayoutHidden" class="tsd-kind-icon">Layout<wbr>Hidden</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Part.html#static-LayoutNodeReplaced" class="tsd-kind-icon">Layout<wbr>Node<wbr>Replaced</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Part.html#static-LayoutNodeSized" class="tsd-kind-icon">Layout<wbr>Node<wbr>Sized</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Part.html#static-LayoutNone" class="tsd-kind-icon">Layout<wbr>None</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Part.html#static-LayoutRemoved" class="tsd-kind-icon">Layout<wbr>Removed</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Part.html#static-LayoutShown" class="tsd-kind-icon">Layout<wbr>Shown</a></li> <li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Part.html#static-LayoutStandard" class="tsd-kind-icon">Layout<wbr>Standard</a></li> </ul> </section> </div> </section> </section> <section class="tsd-panel-group tsd-member-group "> <h2>Constructors</h2> <section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class"> <a name="constructor" class="tsd-anchor"></a> <h3> constructor </h3> <ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class"> <li class="tsd-signature tsd-kind-icon">new <wbr>Part<span class="tsd-signature-symbol">(</span>type<span class="tsd-signature-symbol">?: </span><a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type">Part</a></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>The constructor builds an empty Part.</p> </div> <h4 class="tsd-parameters-title">Parameters</h4> <ul class="tsd-parameters"> <li> <h5><span class="tsd-flag ts-flagOptional">Optional</span> type: <a href="PanelLayout.html" class="tsd-signature-type">PanelLayout</a></h5> <div class="tsd-comment tsd-typography"> <p>if not supplied, the default Panel type is <a href="Panel.html#static-Position">Panel.Position</a>.</p> </div> </li> </ul> <h4 class="tsd-returns-title">Returns <a href="Part.html" class="tsd-signature-type">Part</a></h4> </li> </ul> </section> </section> <section class="tsd-panel-group tsd-member-group "> <h2>Properties</h2> <section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class"> <a name="adornments" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagReadOnly">Read-only</span> adornments <span class="tsd-signature-symbol">: </span><a href="Iterator.html" class="tsd-signature-type">Iterator</a><span class="tsd-signature-symbol"><</span><a href="Adornment.html" class="tsd-signature-type">Adornment</a><span class="tsd-signature-symbol">></span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>This read-only property returns an iterator over all of the <a href="Adornment.html">Adornment</a>s associated with this part. After each call to the iterator's next() method that returns true, the iterator's key will be the category and the iterator's value will be an <a href="Adornment.html">Adornment</a>.</p> <p>Templates should not have any adornments.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="category" class="tsd-anchor"></a> <h3> category <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets the category of this part, typically used to distinguish different kinds of nodes or links.</p> <p>The initial value is an empty string, which is the default category. Any new value must be a string. This should not be set in templates.</p> <p>When building Parts for node data or link data in a model, the <a href="Diagram.html">Diagram</a> will call <a href="Model.html#getCategoryForNodeData">Model.getCategoryForNodeData</a> or <a href="GraphLinksModel.html#getCategoryForLinkData">GraphLinksModel.getCategoryForLinkData</a> to get the category string for the data object. The diagram uses this value to look up a template in <a href="Diagram.html#nodeTemplateMap">Diagram.nodeTemplateMap</a>, <a href="Diagram.html#linkTemplateMap">Diagram.linkTemplateMap</a> or <a href="Diagram.html#groupTemplateMap">Diagram.groupTemplateMap</a>. That template is copied to create the actual Part that is added to the diagram. The diagram will set this property to remember the category it used.</p> <p>Note that the class of the new Part must be the same as the class of the original Part. For example, a Node cannot be replaced by a simple Part or vice-versa. Nor can a Link be replaced by a subclass of Link or vice-versa.</p> <p>To change the category for a Part created for model data, call <a href="Model.html#setCategoryForNodeData">Model.setCategoryForNodeData</a> or <a href="GraphLinksModel.html#setCategoryForLinkData">GraphLinksModel.setCategoryForLinkData</a>.</p> <p>This property is also used to distinguish <a href="Adornment.html">Adornment</a>s on a Part. In this scenario you create the Adornment, often indirectly by specifying a template, and set this property explicitly. For example, <a href="ResizingTool.html#updateAdornments">ResizingTool.updateAdornments</a> creates a resizing Adornment from the <a href="Part.html#resizeAdornmentTemplate">Part.resizeAdornmentTemplate</a> and sets its category to be "Resizing". Changing the category of an existing Adornment will update any adorned part's association.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="containingGroup" class="tsd-anchor"></a> <h3> containing<wbr>Group <span class="tsd-signature-symbol">: </span><a href="Group.html" class="tsd-signature-type">Group</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets the <a href="Group.html">Group</a> of which this <a href="Part.html">Part</a> or <a href="Node.html">Node</a> is a member. This will be null if this is a top-level part.</p> <p>You cannot set this property on a <a href="Link.html">Link</a>; it is set for you automatically based on the group memberships of the connected nodes. You cannot set this property on an <a href="Adornment.html">Adornment</a> at all.</p> <p>A template should not be a member of any group.</p> <dl class="tsd-comment-tags"> <dt>see</dt> <dd><p><a href="Group.html#memberParts">Group.memberParts</a>, <a href="Part.html#findTopLevelPart">findTopLevelPart</a>, <a href="Part.html#isTopLevel">isTopLevel</a></p> </dd> </dl> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="containingGroupChanged" class="tsd-anchor"></a> <h3> containing<wbr>Group<wbr>Changed <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">thisPart</span><span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">oldGroup</span><span class="tsd-signature-symbol">: </span><a href="Group.html" class="tsd-signature-type">Group</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">newGroup</span><span class="tsd-signature-symbol">: </span><a href="Group.html" class="tsd-signature-type">Group</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets the function that is called after this Part has changed which <a href="Group.html">Group</a> it belongs to, if any. It is typically used to modify the appearance of the part. The first argument will be this Part. The second argument will be the old Group, or null if it had been a top-level part. The third argument will be the new Group, or null if it is now a top-level part.</p> <p>If the value is a function, that function must not modify the part's containing <a href="Group.html">Group</a>. The containing Group has already been changed -- trying to change it again may produce undefined behavior.</p> <p>The initial value is null -- no function is called.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="copyable" class="tsd-anchor"></a> <h3> copyable <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets whether the user may copy this part. The initial value is true.</p> <dl class="tsd-comment-tags"> <dt>see</dt> <dd><p><a href="Part.html#canCopy">canCopy</a></p> </dd> </dl> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="deletable" class="tsd-anchor"></a> <h3> deletable <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets whether the user may delete this part. The initial value is true.</p> <dl class="tsd-comment-tags"> <dt>see</dt> <dd><p><a href="Part.html#canDelete">canDelete</a></p> </dd> </dl> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class"> <a name="diagram" class="tsd-anchor"></a> <h3> <span class="tsd-flag ts-flagOverride">Override</span> <span class="tsd-flag ts-flagReadOnly">Read-only</span> diagram <span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type">Diagram</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>This read-only property returns the <a href="Diagram.html">Diagram</a> that this Part is in.</p> <p>This will be null if it is not in a <a href="Layer.html">Layer</a>.</p> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="dragComputation" class="tsd-anchor"></a> <h3> drag<wbr>Computation <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">thisPart</span><span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type">Part</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">newLoc</span><span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">snappedLoc</span><span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets the function used to determine the location that this Part can be dragged to. The first argument is a reference to the Part being dragged, the second argument is a Point describing the proposed location, and the third argument is a snapped location, if one was determined during dragging. It should return a Point that is the proposed new location.</p> <p>By default this function is null and the <a href="DraggingTool.html">DraggingTool</a> uses the snapped location, if one was determined and if <a href="DraggingTool.html#isGridSnapEnabled">DraggingTool.isGridSnapEnabled</a> is true, or the proposed location (the second argument) if not snapping to a grid.</p> <p>In either case the <a href="DraggingTool.html">DraggingTool</a> will limit the proposed new location by <a href="Part.html#minLocation">minLocation</a> and <a href="Part.html#maxLocation">maxLocation</a>.</p> <p>The function, if supplied, must not have any side-effects.</p> <p>An example that limits moving a Node to the current viewport:</p> <pre><code class="hljs js"> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">stayInViewport</span>(<span class="hljs-params">part, pt, gridpt</span>) </span>{ <span class="hljs-keyword">var</span> diagram = part.diagram; <span class="hljs-keyword">if</span> (diagram === <span class="hljs-literal">null</span>) <span class="hljs-keyword">return</span> pt; <span class="hljs-comment">// compute the area inside the viewport</span> <span class="hljs-keyword">var</span> v = diagram.viewportBounds.copy(); v.subtractMargin(diagram.padding); <span class="hljs-comment">// get the bounds of the part being dragged</span> <span class="hljs-keyword">var</span> b = part.actualBounds; <span class="hljs-keyword">var</span> loc = part.location; <span class="hljs-comment">// now limit the location appropriately</span> <span class="hljs-keyword">var</span> x = <span class="hljs-built_in">Math</span>.max(v.x+<span class="hljs-number">1</span>, <span class="hljs-built_in">Math</span>.min(pt.x, v.right-b.width<span class="hljs-number">-2</span>)) + (loc.x-b.x); <span class="hljs-keyword">var</span> y = <span class="hljs-built_in">Math</span>.max(v.y+<span class="hljs-number">1</span>, <span class="hljs-built_in">Math</span>.min(pt.y, v.bottom-b.height<span class="hljs-number">-2</span>)) + (loc.y-b.y); <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> go.Point(x, y); }</code></pre> <p>Note that for this functionality you will also probably want to set <a href="Diagram.html#autoScrollRegion">Diagram.autoScrollRegion</a> to be a zero margin.</p> <pre><code class="hljs js"> myDiagram.nodeTemplate = $(go.Node, . . ., { <span class="hljs-attr">dragComputation</span>: stayInViewport }, . . . );</code></pre> <dl class="tsd-comment-tags"> <dt>see</dt> <dd><p><a href="Part.html#maxLocation">maxLocation</a>, <a href="Part.html#minLocation">minLocation</a></p> </dd> </dl> </div> </li> </ul> </section> <section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"> <a name="groupable" class="tsd-anchor"></a> <h3> groupable <span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3> <ul class="tsd-descriptions"> <li class="tsd-description"> <div class="tsd-comment tsd-typography"> <p>Gets or sets whether the user may group this part to be a member of a new <a href="Group.html">Group</a>. The initial value is true.</p> <p>The grouping command is implemented by <a href="CommandHandler.html#groupSelection">CommandHandler.groupSelection</a> and depends on <a href="CommandHandler.html#archetypeGroupData">CommandHandler.archetypeGroupData</a> having been set to a node data object. A Group can be ungrouped by the user if you set <a href="Group.html#ungroupable">Group.ung