markgojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
1,367 lines (400 loc) • 216 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GoJS® Part 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" >
<!-- custom CSS after bootstrap -->
<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/api.css" type="text/css" media="all" />-->
<link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" />
</head>
<body>
<!-- non-fixed navbar -->
<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><!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid">
<!-- ============================== classes index ============================ -->
<div id="navindex" class="col-md-2">
<!-- begin publish.classesIndex -->
<!-- <div><a href="../index.html">GoJS Class Index</a></div> -->
<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> <!-- /class="sidebar-nav -->
<!-- end publish.classesIndex -->
</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>
<!-- ============================== header ================================= -->
<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>
<!-- ============================== class title ============================ -->
<h2 class="classTitle">
Class Part
</h2>
<!-- ============================== class summary ========================== -->
<p class="classsummary">
<span class="extends"> Extends
<a href="../symbols/Panel.html" class="linkConstructor">Panel</a>.</span>
This is the base class for all user-manipulated top-level objects.
Because it inherits from <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>, it is automatically a visual container
of other <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s.
Because it thus also inherits from <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>, it also has properties such as
<a href="../symbols/GraphObject.html#actualBounds" class="linkProperty">GraphObject.actualBounds</a>, <a href="../symbols/GraphObject.html#contextMenu" class="linkProperty">GraphObject.contextMenu</a>, and <a href="../symbols/GraphObject.html#visible" class="linkProperty">GraphObject.visible</a>.
<p>
If you just want an object that users can select and manipulate,
you can create an instance of this class.
<p>
If you want an object that also supports being connected by links to other objects,
use the <a href="../symbols/Node.html" class="linkConstructor">Node</a> class, which inherits from Part.
Create those connections by using instances of the <a href="../symbols/Link.html" class="linkConstructor">Link</a> class.
<p>
If you want a node that logically contains a subgraph of nodes and links,
use the <a href="../symbols/Group.html" class="linkConstructor">Group</a> class, which inherits from <a href="../symbols/Node.html" class="linkConstructor">Node</a>.
<p>
If you want an object that decorates another Part, without having to modify that Part,
use the <a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a> class.
Adornments do not support linking or grouping or being selected.
<p>
You can construct a Part, add <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s to it programmatically,
and then add the part to a diagram by calling <a href="../symbols/Diagram.html#add" class="linkMethod">Diagram.add</a>.
However it is commonplace to add data to a model by setting its <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">Model.nodeDataArray</a> or calling <a href="../symbols/Model.html#addNodeData" class="linkMethod">Model.addNodeData</a>,
or for <a href="../symbols/Link.html" class="linkConstructor">Link</a>s, setting the <a href="../symbols/GraphLinksModel.html#linkDataArray" class="linkProperty">GraphLinksModel.linkDataArray</a> or calling <a href="../symbols/GraphLinksModel.html#addLinkData" class="linkMethod">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="../symbols/Binding.html" class="linkConstructor">Binding</a>s, and add the new part to the diagram.
The <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> property will refer to that data object in the model.
<p>
Some examples of adding Parts to a Diagram:
<pre>// A simple Part template
myDiagram.nodeTemplate =
$(go.Part, "Horizontal",
$(go.Shape, "Circle", { width: 20, height: 20 }),
$(go.TextBlock, "Hello World")
);
// Node templates can be either Nodes, or simple Parts
// (But not Groups, Adornments, or Links)
// Adds copies of the nodeTemplate bound to the specified node data:
myDiagram.model.nodeDataArray =
[
{ key: "Alpha" },
{ key: "Beta" }
];
// Adds one copy of the nodeTemplate bound to the given node data:
myDiagram.model.addNodeData( { key: "Gamma" } );</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="../symbols/Layer.html" class="linkConstructor">Layer</a>s.
You can specify which layer the part should be in by setting <a href="../symbols/Part.html#layerName" class="linkProperty">layerName</a>.
Parts cannot be nested in the visual tree -- they cannot be added to other Parts of Panels.
<p>
Parts can be individually z-ordered within a layer by setting <a href="../symbols/Part.html#zOrder" class="linkProperty">zOrder</a>.
Parts within the same layer that have a higher zOrder number will be drawn above parts with a lower number.
<h3>Size and Position</h3>
<p>
The size and position of a part are given by its <a href="../symbols/GraphObject.html#actualBounds" class="linkProperty">GraphObject.actualBounds</a>.
The size is determined by the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s that are elements inside this part.
You can change the position by setting <a href="../symbols/GraphObject.html#position" class="linkProperty">GraphObject.position</a> or <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a>.
<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="../symbols/Picture.html" class="linkConstructor">Picture</a> that has a <a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a> title of arbitrary size.
In this case you would set the <a href="../symbols/Part.html#locationSpot" class="linkProperty">locationSpot</a> to be <a href="../symbols/Spot.html#Center" class="linkConstant">Spot.Center</a> and the <a href="../symbols/Part.html#locationObjectName" class="linkProperty">locationObjectName</a>
to be the name of the Picture element in your Part.
<p>
A part may be selected or de-selected by setting its <a href="../symbols/Part.html#isSelected" class="linkProperty">isSelected</a> property.
This may also happen due to a call to <a href="../symbols/Diagram.html#select" class="linkMethod">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="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a>,
due to the user's mouse click, if the part is <a href="../symbols/Part.html#selectable" class="linkProperty">selectable</a>.
<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="../symbols/Diagram.html" class="linkConstructor">Diagram</a> and <a href="../symbols/Layer.html" class="linkConstructor">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="../symbols/Part.html#copyable" class="linkProperty">Part.copyable</a> property corresponds to the properties <a href="../symbols/Diagram.html#allowCopy" class="linkProperty">Diagram.allowCopy</a> and <a href="../symbols/Layer.html#allowCopy" class="linkProperty">Layer.allowCopy</a>.
<p>
For each of these "ability" properties there is a corresponding "can..." predicate.
For example, the <a href="../symbols/Part.html#canCopy" class="linkMethod">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 class="boxread">
For more discussion about permissions, please read: <a href="../../intro/permissions.html">Permissions</a>.
<p>
As previously mentioned, each <a href="../symbols/Diagram.html" class="linkConstructor">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="../symbols/Part.html#selectionChanged" class="linkProperty">selectionChanged</a> property to be a function that is called when the value of <a href="../symbols/Part.html#isSelected" class="linkProperty">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="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s in the visual tree of that Part.
Or perhaps it could toggle the <a href="../symbols/GraphObject.html#visible" class="linkProperty">GraphObject.visible</a> property of an object that is normally hidden when the part is not selected.
<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="../symbols/Adornment.html" class="linkConstructor">Adornment</a>s.
The <a href="../symbols/Part.html#updateAdornments" class="linkMethod">updateAdornments</a> method is responsible for showing or hiding adornments,
normally depending on whether the part is selected.
<p>
When the <a href="../symbols/Part.html#selectionAdorned" class="linkProperty">selectionAdorned</a> property is true, a selected part automatically gets an <a href="../symbols/Adornment.html" class="linkConstructor">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="../symbols/Part.html#selectionAdornmentTemplate" class="linkProperty">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>
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="../symbols/Tool.html#updateAdornments" class="linkMethod">Tool.updateAdornments</a> on each tool in <a href="../symbols/ToolManager.html#mouseDownTools" class="linkProperty">ToolManager.mouseDownTools</a>.
Most tools might not need special tool handles.
But, for example, <a href="../symbols/ResizingTool.html" class="linkConstructor">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="../symbols/Part.html#canResize" class="linkMethod">canResize</a> function returning true.
<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="../symbols/Part.html#selectionObjectName" class="linkProperty">selectionObjectName</a> property,
and making sure the desired element has the same <a href="../symbols/GraphObject.html#name" class="linkProperty">GraphObject.name</a> property value.
<p class="boxread">
For more discussion about selection, see <a href="../../intro/selection.html">Selection</a>.
<p>
Similarly the <a href="../symbols/Part.html#resizeObjectName" class="linkProperty">resizeObjectName</a> and <a href="../symbols/Part.html#rotateObjectName" class="linkProperty">rotateObjectName</a> properties direct the
corresponding <a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a> and <a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a> to operate on the particular <a href="../symbols/GraphObject.html" class="linkConstructor">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>
Parts are not resizable or rotatable by default: you need to set <a href="../symbols/Part.html#resizable" class="linkProperty">resizable</a> and/or <a href="../symbols/Part.html#rotatable" class="linkProperty">rotatable</a> to true.
<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="../symbols/Link.html" class="linkConstructor">Link</a> may be routed) by a <a href="../symbols/Layout.html" class="linkConstructor">Layout</a>.
This will happen automatically if <a href="../symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> or <a href="../symbols/Group.html#layout" class="linkProperty">Group.layout</a> are set.
The default <a href="../symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> will position any nodes that were not given explicit positions or location.
<p>
If you set <a href="../symbols/Part.html#isLayoutPositioned" class="linkProperty">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="../symbols/Part.html#location" class="linkProperty">location</a> or position you will need to supply it explicitly.
<p>
As parts are added to or removed from a diagram, the <a href="../symbols/Layout.html" class="linkConstructor">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="../symbols/GraphObject.html#visible" class="linkProperty">GraphObject.visible</a>)
or their size (<a href="../symbols/GraphObject.html#actualBounds" class="linkProperty">GraphObject.actualBounds</a>).
If you do want there to be a <a href="../symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> but you do not want an automatic layout to happen
after removing parts (for example), you can set <a href="../symbols/Part.html#layoutConditions" class="linkProperty">layoutConditions</a> not to include the <a href="../symbols/Part.html#LayoutRemoved" class="linkConstant">Part.LayoutRemoved</a> flag.
In this particular case, you could set <a href="../symbols/Part.html#layoutConditions" class="linkProperty">layoutConditions</a> to:
<code>go.Part.LayoutStandard & ~go.Part.LayoutRemoved</code>.
It may also reasonable for your application to set it to <a href="../symbols/Part.html#LayoutNone" class="linkConstant">Part.LayoutNone</a>.
Do not forget to consider applying the same conditions to links as well as to nodes and groups.
<p>
If you want to save the locations/positions of the parts in a diagram, it is commonplace to
data bind the <a href="../symbols/Part.html#location" class="linkProperty">location</a> to a property on your node data with a TwoWay <a href="../symbols/Binding.html" class="linkConstructor">Binding</a>
(call <a href="../symbols/Binding.html#makeTwoWay" class="linkMethod">Binding.makeTwoWay</a>). For example:
<pre>$(go.Part, "Horizontal",
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
...</pre>
<p>
Then as the nodes are moved, whether manually by the user or automatically by a <a href="../symbols/Layout.html" class="linkConstructor">Layout</a>,
the model data is automatically updated with the location.
<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>
<!-- ============================== constructor summary ==================== -->
<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 Part.">
<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">
Part(type)
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>The constructor builds an empty Part.<span class="nodetails" id="xconPart"><a class="morelink" onclick="hst('conPart')">More...</a></span> <span class="details" id="conPart"></span>
<dl class="detailList">
<dt class="heading">Parameters:</dt>
<dt>
<span class="light fixedFont">{EnumValue=}</span> <b>type</b>
</dt>
<dd>if not supplied, the default Panel type is <a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a>.</dd>
</dl>
</div>
</td>
</tr>
</tbody>
</table>
</div><!-- class="table-responsive">-->
<!-- ============================== properties summary ===================== -->
<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 Part.">
<thead>
<tr>
<th scope="col" class="name">Name, Value Type</th>
<th scope="col" class="description">Description</th>
</tr>
</thead>
<tbody>
<tr id="adornments" >
<td class="name">
<div class="name">
adornments
</div>
<div class="attributes">
<span class="light">{Iterator.<Adornment>}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>This read-only property returns an iterator over all of the <a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a>s associated with this part.<span class="nodetails" id="xpropadornments"><a class="morelink" onclick="hst('propadornments')">More...</a></span> <span class="details" id="propadornments">
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="../symbols/Adornment.html" class="linkConstructor">Adornment</a>.
</span><div class="details" id="dpropadornments"><p>
Templates should not have any adornments.</div>
</div>
</td>
</tr>
<tr id="category" >
<td class="name">
<div class="name">
category
</div>
<div class="attributes">
<span class="light">{string}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the category of this part,
typically used to distinguish different kinds of nodes or links.<span class="nodetails" id="xpropcategory"><a class="morelink" onclick="hst('propcategory')">More...</a></span> <span class="details" id="propcategory">
</span><div class="details" id="dpropcategory"><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>
When building Parts for node data or link data in a model,
the <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> will call <a href="../symbols/Model.html#getCategoryForNodeData" class="linkMethod">Model.getCategoryForNodeData</a> or
<a href="../symbols/GraphLinksModel.html#getCategoryForLinkData" class="linkMethod">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="../symbols/Diagram.html#nodeTemplateMap" class="linkProperty">Diagram.nodeTemplateMap</a>,
<a href="../symbols/Diagram.html#linkTemplateMap" class="linkProperty">Diagram.linkTemplateMap</a> or <a href="../symbols/Diagram.html#groupTemplateMap" class="linkProperty">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>
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>
To change the category for a Part created for model data, call <a href="../symbols/Model.html#setCategoryForNodeData" class="linkMethod">Model.setCategoryForNodeData</a> or
<a href="../symbols/GraphLinksModel.html#setCategoryForLinkData" class="linkMethod">GraphLinksModel.setCategoryForLinkData</a>.
<p>
This property is also used to distinguish <a href="../symbols/Adornment.html" class="linkConstructor">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="../symbols/ResizingTool.html#updateAdornments" class="linkMethod">ResizingTool.updateAdornments</a> creates a resizing Adornment from the
<a href="../symbols/Part.html#resizeAdornmentTemplate" class="linkProperty">Part.resizeAdornmentTemplate</a> and sets its category to be "Resizing".
Changing the category of an existing Adornment will update any adorned part's association.</div>
</div>
</td>
</tr>
<tr id="containingGroup" >
<td class="name">
<div class="name">
containingGroup
</div>
<div class="attributes">
<span class="light">{<a href="../symbols/Group.html" class="linkConstructor">Group</a>}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the <a href="../symbols/Group.html" class="linkConstructor">Group</a> of which this <a href="../symbols/Part.html" class="linkConstructor">Part</a> or <a href="../symbols/Node.html" class="linkConstructor">Node</a> is a member.<span class="nodetails" id="xpropcontainingGroup"><a class="morelink" onclick="hst('propcontainingGroup')">More...</a></span> <span class="details" id="propcontainingGroup">
This will be null if this is a top-level part.
</span><div class="details" id="dpropcontainingGroup"><p>
You cannot set this property on a <a href="../symbols/Link.html" class="linkConstructor">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="../symbols/Adornment.html" class="linkConstructor">Adornment</a> at all.
<p>
A template should not be a member of any group.</div>
<div class="seealso">See also:
<ul class="seealsolist">
<li><a href="../symbols/Group.html#memberParts" class="linkProperty">Group.memberParts</a></li>
<li><a href="../symbols/Part.html#findTopLevelPart" class="linkMethod">findTopLevelPart</a></li>
<li><a href="../symbols/Part.html#isTopLevel" class="linkProperty">isTopLevel</a></li>
</ul>
</div>
</div>
</td>
</tr>
<tr id="containingGroupChanged" >
<td class="name">
<div class="name">
containingGroupChanged
</div>
<div class="attributes">
<span class="light">{function(Part, Group, Group) | null}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the function that is called after this Part has changed which <a href="../symbols/Group.html" class="linkConstructor">Group</a> it belongs to, if any.<span class="nodetails" id="xpropcontainingGroupChanged"><a class="morelink" onclick="hst('propcontainingGroupChanged')">More...</a></span> <span class="details" id="propcontainingGroupChanged">
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.
</span><div class="details" id="dpropcontainingGroupChanged"><p>
If the value is a function, that function must not modify the part's containing <a href="../symbols/Group.html" class="linkConstructor">Group</a>.
The containing Group has already been changed -- trying to change it again may produce undefined behavior.
<p>
The initial value is null -- no function is called.</div>
</div>
</td>
</tr>
<tr id="copyable" >
<td class="name">
<div class="name">
copyable
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="desc