markgojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
1,686 lines (653 loc) • 67.3 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GoJS® Layer 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 Layer
</h2>
<!-- ============================== class summary ========================== -->
<p class="classsummary">
Layers are how named collections of <a href="../symbols/Part.html" class="linkConstructor">Part</a>s are drawn in front or behind other collections of Parts in a <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>.
Layers can only contain <a href="../symbols/Part.html" class="linkConstructor">Part</a>s, such as <a href="../symbols/Node.html" class="linkConstructor">Node</a>s and <a href="../symbols/Link.html" class="linkConstructor">Link</a>s. They cannot hold <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s directly.
<p>
You put a Part into a Layer by assigning <a href="../symbols/Part.html#layerName" class="linkProperty">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="../symbols/Part.html#layerName" class="linkProperty">Part.layerName</a>, which changes its <a href="../symbols/Part.html#layer" class="linkProperty">Part.layer</a>.
<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="../symbols/Layer.html#isTemporary" class="linkProperty">isTemporary</a>.
Changes to objects in temporary layers are not recorded by the <a href="../symbols/UndoManager.html" class="linkConstructor">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="../symbols/GraphObject.html#isActionable" class="linkProperty">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="../symbols/Layer.html#pickable" class="linkProperty">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>
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="../symbols/Diagram.html" class="linkConstructor">Diagram</a>.
<h3>Z-ordering</h3>
<p>
Layers are drawn and presented in order.
You can add your own layers by calling <a href="../symbols/Diagram.html#addLayerBefore" class="linkMethod">Diagram.addLayerBefore</a> or <a href="../symbols/Diagram.html#addLayerAfter" class="linkMethod">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="../symbols/Diagram.html#findLayer" class="linkMethod">Diagram.findLayer</a> to get the Layer with a particular name.
<a href="../symbols/Part.html" class="linkConstructor">Part</a>s can be individually z-ordered within a layer by setting <a href="../symbols/Part.html#zOrder" class="linkProperty">Part.zOrder</a>.
</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 Layer.">
<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">
Layer()
</div>
</td>
<td class="description">
<div class="description">
<!--newp--><p><p>This constructs an empty Layer; you should set the <a href="../symbols/Layer.html#name" class="linkProperty">name</a> before adding the Layer to a Diagram.
</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 Layer.">
<thead>
<tr>
<th scope="col" class="name">Name, Value Type</th>
<th scope="col" class="description">Description</th>
</tr>
</thead>
<tbody>
<tr id="allowCopy" >
<td class="name">
<div class="name">
allowCopy
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether the user may copy objects in this layer.<span class="nodetails" id="xpropallowCopy"><a class="morelink" onclick="hst('propallowCopy')">More...</a></span> <span class="details" id="propallowCopy">
The initial value is true.</span>
</div>
</td>
</tr>
<tr id="allowDelete" >
<td class="name">
<div class="name">
allowDelete
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether the user may delete objects in this layer.<span class="nodetails" id="xpropallowDelete"><a class="morelink" onclick="hst('propallowDelete')">More...</a></span> <span class="details" id="propallowDelete">
The initial value is true.</span>
</div>
</td>
</tr>
<tr id="allowGroup" >
<td class="name">
<div class="name">
allowGroup
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether the user may group parts together in this layer.<span class="nodetails" id="xpropallowGroup"><a class="morelink" onclick="hst('propallowGroup')">More...</a></span> <span class="details" id="propallowGroup">
The initial value is true.</span>
</div>
</td>
</tr>
<tr id="allowLink" >
<td class="name">
<div class="name">
allowLink
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether the user may draw new links in this layer.<span class="nodetails" id="xpropallowLink"><a class="morelink" onclick="hst('propallowLink')">More...</a></span> <span class="details" id="propallowLink">
The initial value is true.</span>
</div>
</td>
</tr>
<tr id="allowMove" >
<td class="name">
<div class="name">
allowMove
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether the user may move objects in this layer.<span class="nodetails" id="xpropallowMove"><a class="morelink" onclick="hst('propallowMove')">More...</a></span> <span class="details" id="propallowMove">
The initial value is true.</span>
</div>
</td>
</tr>
<tr id="allowRelink" >
<td class="name">
<div class="name">
allowRelink
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether the user may reconnect existing links in this layer.<span class="nodetails" id="xpropallowRelink"><a class="morelink" onclick="hst('propallowRelink')">More...</a></span> <span class="details" id="propallowRelink">
The initial value is true.</span>
</div>
</td>
</tr>
<tr id="allowReshape" >
<td class="name">
<div class="name">
allowReshape
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether the user may reshape parts in this layer.<span class="nodetails" id="xpropallowReshape"><a class="morelink" onclick="hst('propallowReshape')">More...</a></span> <span class="details" id="propallowReshape">
The initial value is true.</span>
</div>
</td>
</tr>
<tr id="allowResize" >
<td class="name">
<div class="name">
allowResize
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether the user may resize parts in this layer.<span class="nodetails" id="xpropallowResize"><a class="morelink" onclick="hst('propallowResize')">More...</a></span> <span class="details" id="propallowResize">
The initial value is true.</span>
</div>
</td>
</tr>
<tr id="allowRotate" >
<td class="name">
<div class="name">
allowRotate
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether the user may rotate parts in this layer.<span class="nodetails" id="xpropallowRotate"><a class="morelink" onclick="hst('propallowRotate')">More...</a></span> <span class="details" id="propallowRotate">
The initial value is true.</span>
</div>
</td>
</tr>
<tr id="allowSelect" >
<td class="name">
<div class="name">
allowSelect
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether the user may select objects in this layer.<span class="nodetails" id="xpropallowSelect"><a class="morelink" onclick="hst('propallowSelect')">More...</a></span> <span class="details" id="propallowSelect">
The initial value is true.</span>
</div>
</td>
</tr>
<tr id="allowTextEdit" >
<td class="name">
<div class="name">
allowTextEdit
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether the user may do in-place text editing in this layer.<span class="nodetails" id="xpropallowTextEdit"><a class="morelink" onclick="hst('propallowTextEdit')">More...</a></span> <span class="details" id="propallowTextEdit">
The initial value is true.</span>
</div>
</td>
</tr>
<tr id="allowUngroup" >
<td class="name">
<div class="name">
allowUngroup
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether the user may ungroup existing groups in this layer.<span class="nodetails" id="xpropallowUngroup"><a class="morelink" onclick="hst('propallowUngroup')">More...</a></span> <span class="details" id="propallowUngroup">
The initial value is true.</span>
</div>
</td>
</tr>
<tr id="diagram" >
<td class="name">
<div class="name">
diagram
</div>
<div class="attributes">
<span class="light">{<a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>This read-only property returns the <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> that is using this Layer.
</div>
</td>
</tr>
<tr id="isTemporary" >
<td class="name">
<div class="name">
isTemporary
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether the objects in this layer are considered temporary.<span class="nodetails" id="xpropisTemporary"><a class="morelink" onclick="hst('propisTemporary')">More...</a></span> <span class="details" id="propisTemporary">
</span><div class="details" id="dpropisTemporary"><p>
Parts in temporary layers are not selectable,
and changes to Parts in temporary layers are not recorded in the <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a>.
Objects in temporary layers do not receive click events unless you set their <a href="../symbols/GraphObject.html#isActionable" class="linkProperty">GraphObject.isActionable</a> to true.
<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>
Default value is false.</div>
</div>
</td>
</tr>
<tr id="name" >
<td class="name">
<div class="name">
name
</div>
<div class="attributes">
<span class="light">{string}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the name for this layer.<span class="nodetails" id="xpropname"><a class="morelink" onclick="hst('propname')">More...</a></span> <span class="details" id="propname">
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="../symbols/Diagram.html#layers" class="linkProperty">Diagram.layers</a>.</span>
</div>
</td>
</tr>
<tr id="opacity" >
<td class="name">
<div class="name">
opacity
</div>
<div class="attributes">
<span class="light">{number}</span>
<span class="since" title="since">1.1</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets the opacity for all parts in this layer.<span class="nodetails" id="xpropopacity"><a class="morelink" onclick="hst('propopacity')">More...</a></span> <span class="details" id="propopacity">
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="../symbols/Brush.html" class="linkConstructor">Brush</a> or image transparency.
The default value is 1.
</span><div class="details" id="dpropopacity"><p>
This property, unlike <a href="../symbols/Layer.html#visible" class="linkProperty">visible</a>, does not change whether any objects are found by the "find..." methods.</div>
</div>
</td>
</tr>
<tr id="parts" >
<td class="name">
<div class="name">
parts
</div>
<div class="attributes">
<span class="light">{Iterator.<Part>}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>This read-only property returns an iterator for this Layer's <a href="../symbols/Part.html" class="linkConstructor">Part</a>s.<span class="nodetails" id="xpropparts"><a class="morelink" onclick="hst('propparts')">More...</a></span> <span class="details" id="propparts">
The Parts can be <a href="../symbols/Node.html" class="linkConstructor">Node</a>s, <a href="../symbols/Link.html" class="linkConstructor">Link</a>s, <a href="../symbols/Group.html" class="linkConstructor">Group</a>s, <a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a>s, or simple <a href="../symbols/Part.html" class="linkConstructor">Part</a>s.</span>
</div>
</td>
</tr>
<tr id="partsBackwards" >
<td class="name">
<div class="name">
partsBackwards
</div>
<div class="attributes">
<span class="light">{Iterator.<Part>}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>This read-only property returns a backwards iterator for this Layer's <a href="../symbols/Part.html" class="linkConstructor">Part</a>s,
for iterating over the parts in reverse order.<span class="nodetails" id="xproppartsBackwards"><a class="morelink" onclick="hst('proppartsBackwards')">More...</a></span> <span class="details" id="proppartsBackwards">
The Parts can be <a href="../symbols/Node.html" class="linkConstructor">Node</a>s, <a href="../symbols/Link.html" class="linkConstructor">Link</a>s, <a href="../symbols/Group.html" class="linkConstructor">Group</a>s, <a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a>s, or simple <a href="../symbols/Part.html" class="linkConstructor">Part</a>s.</span>
</div>
</td>
</tr>
<tr id="pickable" >
<td class="name">
<div class="name">
pickable
</div>
<div class="attributes">
<span class="light">{boolean}</span>
<span class="since" title="since">1.2</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether methods such as <a href="../symbols/Layer.html#findObjectAt" class="linkMethod">findObjectAt</a> find any of the objects in this layer.<span class="nodetails" id="xproppickable"><a class="morelink" onclick="hst('proppickable')">More...</a></span> <span class="details" id="proppickable">
</span><div class="details" id="dproppickable"><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>
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="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a> or
<a href="../symbols/CommandHandler.html#selectAll" class="linkMethod">CommandHandler.selectAll</a> or calls to <a href="../symbols/Diagram.html#select" class="linkMethod">Diagram.select</a>.
<p>
You can control whether individual GraphObjects are "hittable" by setting <a href="../symbols/GraphObject.html#pickable" class="linkProperty">GraphObject.pickable</a>.</div>
</div>
</td>
</tr>
<tr id="visible" >
<td class="name">
<div class="name">
visible
</div>
<div class="attributes">
<span class="light">{boolean}</span>
</div>
</td>
<td class="description">
<div class="description">
<!--newp <p> -->
<p>Gets or sets whether the user may view any of the objects in this layer.<span class="nodetails" id="xpropvisible"><a class="morelink" onclick="hst('propvisible')">More...</a></span> <span class="details" id="propvisible">
</span><div class="details" id="dpropvisible"><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.</div>
</div>
</td>
</tr>
</tbody>
</table>
</div><!-- class="table-responsive">-->
<!-- ============================== methods summary ======================== -->
<h2 class="summaryCaption">Method <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 methods documented in the class Layer.">
<thead>
<tr>
<th scope="col" class="name">Name, Return Type</th>
<th scope="col" class="description">Description</th>
</tr>
</thead>
<tbody>
<tr id="findObjectAt">
<td class="name">
<div class="name">
findObjectAt(p, navig, pred)
</div>
<div class="attributes">
<span class="light">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span>
</d