gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
793 lines • 55.2 kB
HTML
<!doctype html>
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Layer | 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>
<!-- 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" 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><!--/.nav-collapse -->
</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 <br/>version 2.1.18 for TypeScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>-->
<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 Layer</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>
<span class="target">Layer</span>
</li>
</ul>
</section>
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography">
<p>Layers are how named collections of <a href="Part.html">Part</a>s are drawn in front or behind other collections of Parts in a <a href="Diagram.html">Diagram</a>.
Layers can only contain <a href="Part.html">Part</a>s, such as <a href="Node.html">Node</a>s and <a href="Link.html">Link</a>s. They cannot hold <a href="GraphObject.html">GraphObject</a>s directly.</p>
<p>You put a Part into a Layer by assigning <a href="Part.html#layerName">Part.layerName</a> with the name of the Layer.
You can use data binding to initialize and remember a Part's layer's name.
You can change a Part's layer by modifying its <a href="Part.html#layerName">Part.layerName</a>, which changes its <a href="Part.html#layer">Part.layer</a>.</p>
<p>Each Diagram starts off with the following list of Layers:
"Grid", "Background", "" (the default layer), "Foreground", "Adornment", "Tool".
Parts are normally put in the default layer.
The "Grid", "Adornment", and "Tool" layers are considered <a href="Layer.html#isTemporary">isTemporary</a>.
Changes to objects in temporary layers are not recorded by the <a href="UndoManager.html">UndoManager</a>.
Parts in temporary layers are not selected and are not considered to be part of the document.
Objects in temporary layers do not receive click events unless you set their <a href="GraphObject.html#isActionable">GraphObject.isActionable</a> to true.
The "Grid" layer is the furthest back; it also contains "temporary" parts that cannot be selected.
Furthermore the "Grid" layer has <a href="Layer.html#pickable">pickable</a> set to false so that mouse or touch events
and calls to the "find..." methods do not even consider any parts in that layer.</p>
<p>Layers have many properties that control what actions users are permitted to perform involving the parts in the layer.
These properties are very much like the similarly named properties on <a href="Diagram.html">Diagram</a>.</p>
<h3>Z-ordering</h3>
<p>Layers are drawn and presented in order.
You can add your own layers by calling <a href="Diagram.html#addLayerBefore">Diagram.addLayerBefore</a> or <a href="Diagram.html#addLayerAfter">Diagram.addLayerAfter</a>
to insert a new layer at a particular place in the Z-order, or to re-order existing layers.
Use <a href="Diagram.html#findLayer">Diagram.findLayer</a> to get the Layer with a particular name.
<a href="Part.html">Part</a>s can be individually z-ordered within a layer by setting <a href="Part.html#zOrder">Part.zOrder</a>.</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="Layer.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-accessor tsd-parent-kind-class"><a href="Layer.html#allowCopy" class="tsd-kind-icon">allow<wbr>Copy</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layer.html#allowDelete" class="tsd-kind-icon">allow<wbr>Delete</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layer.html#allowGroup" class="tsd-kind-icon">allow<wbr>Group</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layer.html#allowLink" class="tsd-kind-icon">allow<wbr>Link</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layer.html#allowMove" class="tsd-kind-icon">allow<wbr>Move</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layer.html#allowRelink" class="tsd-kind-icon">allow<wbr>Relink</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layer.html#allowReshape" class="tsd-kind-icon">allow<wbr>Reshape</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layer.html#allowResize" class="tsd-kind-icon">allow<wbr>Resize</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layer.html#allowRotate" class="tsd-kind-icon">allow<wbr>Rotate</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layer.html#allowSelect" class="tsd-kind-icon">allow<wbr>Select</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layer.html#allowTextEdit" class="tsd-kind-icon">allow<wbr>Text<wbr>Edit</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layer.html#allowUngroup" class="tsd-kind-icon">allow<wbr>Ungroup</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Layer.html#diagram" class="tsd-kind-icon">diagram</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layer.html#isTemporary" class="tsd-kind-icon">is<wbr>Temporary</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layer.html#name" class="tsd-kind-icon">name</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layer.html#opacity" class="tsd-kind-icon">opacity</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Layer.html#parts" class="tsd-kind-icon">parts</a></li>
<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="Layer.html#partsBackwards" class="tsd-kind-icon">parts<wbr>Backwards</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layer.html#pickable" class="tsd-kind-icon">pickable</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Layer.html#visible" class="tsd-kind-icon">visible</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 tsd-has-type-parameter"><a href="Layer.html#findObjectAt" class="tsd-kind-icon">find<wbr>Object<wbr>At</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="Layer.html#findObjectsAt" class="tsd-kind-icon">find<wbr>Objects<wbr>At</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="Layer.html#findObjectsIn" class="tsd-kind-icon">find<wbr>Objects<wbr>In</a></li>
<li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="Layer.html#findObjectsNear" class="tsd-kind-icon">find<wbr>Objects<wbr>Near</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>Layer<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Layer.html" class="tsd-signature-type">Layer</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This constructs an empty Layer; you should set the <a href="Layer.html#name">name</a> before adding the Layer to a Diagram.</p>
</div>
<h4 class="tsd-returns-title">Returns <a href="Layer.html" class="tsd-signature-type">Layer</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-accessor tsd-parent-kind-class">
<a name="allowCopy" class="tsd-anchor"></a>
<h3>
allow<wbr>Copy
<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 objects in this layer.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowDelete" class="tsd-anchor"></a>
<h3>
allow<wbr>Delete
<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 objects in this layer.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowGroup" class="tsd-anchor"></a>
<h3>
allow<wbr>Group
<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 parts together in this layer.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowLink" class="tsd-anchor"></a>
<h3>
allow<wbr>Link
<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 draw new links in this layer.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowMove" class="tsd-anchor"></a>
<h3>
allow<wbr>Move
<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 move objects in this layer.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowRelink" class="tsd-anchor"></a>
<h3>
allow<wbr>Relink
<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 reconnect existing links in this layer.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowReshape" class="tsd-anchor"></a>
<h3>
allow<wbr>Reshape
<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 reshape parts in this layer.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowResize" class="tsd-anchor"></a>
<h3>
allow<wbr>Resize
<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 resize parts in this layer.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowRotate" class="tsd-anchor"></a>
<h3>
allow<wbr>Rotate
<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 rotate parts in this layer.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowSelect" class="tsd-anchor"></a>
<h3>
allow<wbr>Select
<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 select objects in this layer.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowTextEdit" class="tsd-anchor"></a>
<h3>
allow<wbr>Text<wbr>Edit
<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 do in-place text editing in this layer.
The initial value is true.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="allowUngroup" class="tsd-anchor"></a>
<h3>
allow<wbr>Ungroup
<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 ungroup existing groups in this layer.
The initial value is true.</p>
</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-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 is using this Layer.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="isTemporary" class="tsd-anchor"></a>
<h3>
is<wbr>Temporary
<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 objects in this layer are considered temporary.</p>
<p>Parts in temporary layers are not selectable,
and changes to Parts in temporary layers are not recorded in the <a href="UndoManager.html">UndoManager</a>.
Objects in temporary layers do not receive click events unless you set their <a href="GraphObject.html#isActionable">GraphObject.isActionable</a> to true.</p>
<p>Temporary layers are excluded from bounds calculations, with the exception of the "Tool" layer,
so that temporary objects created while dragging are included in the bounds.</p>
<p>Default value is false.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="name" class="tsd-anchor"></a>
<h3>
name
<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 name for this layer.
The initial value is an empty string, which is also the name of the default layer.
The name should be unique among the diagram's <a href="Diagram.html#layers">Diagram.layers</a>.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="opacity" class="tsd-anchor"></a>
<h3>
opacity
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the opacity for all parts in this layer.
The value must be between 0.0 (fully transparent) and 1.0 (no additional transparency).
This value is multiplicative with any existing transparency,
for instance from a <a href="Brush.html">Brush</a> or image transparency.
The default value is 1.</p>
<p>This property, unlike <a href="Layer.html#visible">visible</a>, does not change whether any objects are found by the "find..." methods.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.1</p>
</dd>
<dt>see</dt>
<dd><p><a href="GraphObject.html#opacity">GraphObject.opacity</a>, <a href="Diagram.html#opacity">Diagram.opacity</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="parts" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
parts
<span class="tsd-signature-symbol">: </span><a href="Iterator.html" class="tsd-signature-type">Iterator</a><span class="tsd-signature-symbol"><</span><a href="Part.html" class="tsd-signature-type">Part</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 for this Layer's <a href="Part.html">Part</a>s.
The Parts can be <a href="Node.html">Node</a>s, <a href="Link.html">Link</a>s, <a href="Group.html">Group</a>s, <a href="Adornment.html">Adornment</a>s, or simple <a href="Part.html">Part</a>s.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
<a name="partsBackwards" class="tsd-anchor"></a>
<h3>
<span class="tsd-flag ts-flagReadOnly">Read-only</span>
parts<wbr>Backwards
<span class="tsd-signature-symbol">: </span><a href="Iterator.html" class="tsd-signature-type">Iterator</a><span class="tsd-signature-symbol"><</span><a href="Part.html" class="tsd-signature-type">Part</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 a backwards iterator for this Layer's <a href="Part.html">Part</a>s,
for iterating over the parts in reverse order.
The Parts can be <a href="Node.html">Node</a>s, <a href="Link.html">Link</a>s, <a href="Group.html">Group</a>s, <a href="Adornment.html">Adornment</a>s, or simple <a href="Part.html">Part</a>s.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="pickable" class="tsd-anchor"></a>
<h3>
pickable
<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 methods such as <a href="Layer.html#findObjectAt">findObjectAt</a> find any of the objects in this layer.</p>
<p>The default value is true.
When this property is false, all of the "find..." methods will fail to find parts that are in this layer.</p>
<p>Note that setting pickable to false does not prevent users from selecting nodes.
It does prevent them from selecting nodes by clicking on them,
but does not prevent selection through other mechanisms such as the <a href="DragSelectingTool.html">DragSelectingTool</a> or
<a href="CommandHandler.html#selectAll">CommandHandler.selectAll</a> or calls to <a href="Diagram.html#select">Diagram.select</a>.</p>
<p>You can control whether individual GraphObjects are "hittable" by setting <a href="GraphObject.html#pickable">GraphObject.pickable</a>.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.2</p>
</dd>
<dt>see</dt>
<dd><p><a href="GraphObject.html#pickable">GraphObject.pickable</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="visible" class="tsd-anchor"></a>
<h3>
visible
<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 view any of the objects in this layer.</p>
<p>The default value is true -- all visible Parts are drawn.
When this property is false, all of the "find..." methods will fail to find parts that are in this layer.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="GraphObject.html#visible">GraphObject.visible</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Methods</h2>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<a name="findObjectAt" class="tsd-anchor"></a>
<h3>
find<wbr>Object<wbr>At
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<li class="tsd-signature tsd-kind-icon">find<wbr>Object<wbr>At<T><span class="tsd-signature-symbol">(</span>p<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a>, navig<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span>, pred<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol">)</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Find the front-most <a href="GraphObject.html">GraphObject</a> in this layer
at the given point in document coordinates.</p>
<p>If <a href="Layer.html#visible">visible</a> is false, this method will not find any objects in this layer.
However, <a href="Layer.html#opacity">opacity</a> does not affect this method.</p>
</div>
<h4 class="tsd-type-parameters-title">Type parameters</h4>
<ul class="tsd-type-parameters">
<li>
<h4>T<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a></h4>
</li>
</ul>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>p: <a href="Point.html" class="tsd-signature-type">Point</a></h5>
<div class="tsd-comment tsd-typography">
<p>A Point in document coordinates.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> navig: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>A function taking a GraphObject and
returning a GraphObject, defaulting to the identity.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> pred: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>A function taking the GraphObject
returned by navig and returning true if that object should be returned,
defaulting to a predicate that always returns true.</p>
</div>
</li>
</ul>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<a name="findObjectsAt" class="tsd-anchor"></a>
<h3>
find<wbr>Objects<wbr>At
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<li class="tsd-signature tsd-kind-icon">find<wbr>Objects<wbr>At<T, S><span class="tsd-signature-symbol">(</span>p<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a>, navig<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span>, pred<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span>, coll<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">S</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">S</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Return a collection of the <a href="GraphObject.html">GraphObject</a>s of this layer
at the given point in document coordinates.</p>
<p>If <a href="Layer.html#visible">visible</a> is false, this method will not find any objects in this layer.
However, <a href="Layer.html#opacity">opacity</a> does not affect this method.</p>
</div>
<h4 class="tsd-type-parameters-title">Type parameters</h4>
<ul class="tsd-type-parameters">
<li>
<h4>T<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a></h4>
</li>
<li>
<h4>S<span class="tsd-signature-symbol">: </span><a href="List.html" class="tsd-signature-type">List</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol"> | </span><a href="Set.html" class="tsd-signature-type">Set</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">></span></h4>
</li>
</ul>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>p: <a href="Point.html" class="tsd-signature-type">Point</a></h5>
<div class="tsd-comment tsd-typography">
<p>A Point in document coordinates.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> navig: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>A function taking a GraphObject and
returning a GraphObject, defaulting to the identity.
If this function returns null, the given GraphObject will not be included in the results.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> pred: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>A function taking the GraphObject
returned by navig and returning true if that object should be returned,
defaulting to a predicate that always returns true.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> coll: <span class="tsd-signature-type">S</span></h5>
<div class="tsd-comment tsd-typography">
<p>An optional collection (List or Set) to add the results to.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">S</span></h4>
<p>a collection of GraphObjects that will contain all GraphObjects
located at Point p, or else an empty collection.
If a List or Set was passed in, it is returned.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<a name="findObjectsIn" class="tsd-anchor"></a>
<h3>
find<wbr>Objects<wbr>In
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<li class="tsd-signature tsd-kind-icon">find<wbr>Objects<wbr>In<T, S><span class="tsd-signature-symbol">(</span>r<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type">Rect</a>, navig<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span>, pred<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span>, partialInclusion<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span>, coll<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">S</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">S</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Returns a collection of all <a href="GraphObject.html">GraphObject</a>s that are inside or that intersect
a given <a href="Rect.html">Rect</a> in document coordinates.</p>
<p>If <a href="Layer.html#visible">visible</a> is false, this method will not find any objects in this layer.
However, <a href="Layer.html#opacity">opacity</a> does not affect this method.</p>
</div>
<h4 class="tsd-type-parameters-title">Type parameters</h4>
<ul class="tsd-type-parameters">
<li>
<h4>T<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a></h4>
</li>
<li>
<h4>S<span class="tsd-signature-symbol">: </span><a href="List.html" class="tsd-signature-type">List</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol"> | </span><a href="Set.html" class="tsd-signature-type">Set</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">></span></h4>
</li>
</ul>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>r: <a href="Rect.html" class="tsd-signature-type">Rect</a></h5>
<div class="tsd-comment tsd-typography">
<p>A Rect in document coordinates.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> navig: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>A function taking a GraphObject and
returning a GraphObject, defaulting to the identity.
If this function returns null, the given GraphObject will not be included in the results.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> pred: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>A function taking the GraphObject
returned by navig and returning true if that object should be returned,
defaulting to a predicate that always returns true.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> partialInclusion: <span class="tsd-signature-type">boolean</span></h5>
<div class="tsd-comment tsd-typography">
<p>Whether an object can match if it merely intersects the rectangular area (true) or
if it must be entirely inside the rectangular area (false). The default value is false.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> coll: <span class="tsd-signature-type">S</span></h5>
<div class="tsd-comment tsd-typography">
<p>An optional collection (List or Set) to add the results to.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">S</span></h4>
<p>a collection of GraphObjects that will contain all GraphObjects
located in or near Rect r, or else an empty collection.
If a List or Set was passed in, it is returned.</p>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<a name="findObjectsNear" class="tsd-anchor"></a>
<h3>
find<wbr>Objects<wbr>Near
</h3>
<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter">
<li class="tsd-signature tsd-kind-icon">find<wbr>Objects<wbr>Near<T, S><span class="tsd-signature-symbol">(</span>p<span class="tsd-signature-symbol">: </span><a href="Point.html" class="tsd-signature-type">Point</a>, dist<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, navig<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span>, pred<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span>, partialInclusion<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">S</span>, coll<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">S</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">S</span></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Returns a collection of all <a href="GraphObject.html">GraphObject</a>s that are within a certain distance
of a given point in document coordinates.</p>
<p>If <a href="Layer.html#visible">visible</a> is false, this method will not find any objects in this layer.
However, <a href="Layer.html#opacity">opacity</a> does not affect this method.</p>
</div>
<h4 class="tsd-type-parameters-title">Type parameters</h4>
<ul class="tsd-type-parameters">
<li>
<h4>T<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a></h4>
</li>
<li>
<h4>S<span class="tsd-signature-symbol">: </span><a href="List.html" class="tsd-signature-type">List</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol"> | </span><a href="Set.html" class="tsd-signature-type">Set</a><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">></span></h4>
</li>
</ul>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5>p: <a href="Point.html" class="tsd-signature-type">Point</a></h5>
<div class="tsd-comment tsd-typography">
<p>A Point in document coordinates.</p>
</div>
</li>
<li>
<h5>dist: <span class="tsd-signature-type">number</span></h5>
<div class="tsd-comment tsd-typography">
<p>The distance from the point.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> navig: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type">GraphObject</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>A function taking a GraphObject and
returning a GraphObject, defaulting to the identity.
If this function returns null, the given GraphObject will not be included in the results.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> pred: <span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">T</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
<div class="tsd-comment tsd-typography">
<p>A function taking the GraphObject
returned by navig and returning true if that object should be returned,
defaulting to a predicate that always returns true.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> partialInclusion: <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">S</span></h5>
<div class="tsd-comment tsd-typography">
<p>Whether an object can match if it merely intersects the circular area (true) or
if it must be entirely inside the circular area (false). The default value is true.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> coll: <span class="tsd-signature-type">S</span></h5>
<div class="tsd-comment tsd-typography">
<p>An optional collection (List or Set) to add the results to.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">S</span></h4>
<p>a collection of GraphObjects that will contain all GraphObjects
located at Point p, or else an empty collection.
If a List or Set was passed in, it is returned.</p>
</li>
</ul>
</section>
</section>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class="globals ">
<a href="../index.html"><em>GoJS <wbr>Class <wbr>Index</em></a>
</li>
</ul>
</nav>
<nav class="tsd-navi