svgedit
Version:
Powerful SVG-Editor for your browser
4,733 lines (1,159 loc) • 65.3 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Class: Drawing</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Class: Drawing</h1>
<section>
<header>
<h2><span class="attribs"><span class="type-signature"></span></span>
<span class="ancestors"><a href="module-draw.html">draw</a>.</span>Drawing<span class="signature">(svgElem, optIdPrefix<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h2>
<div class="class-description"><p>This class encapsulates the concept of a SVG-edit drawing.</p></div>
</header>
<article>
<div class="container-overview">
<h2>Constructor</h2>
<h4 class="name" id="Drawing"><span class="type-signature"></span>new Drawing<span class="signature">(svgElem, optIdPrefix<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>svgElem</code></td>
<td class="type">
<span class="param-type">SVGSVGElement</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>The SVG DOM Element that this JS object
encapsulates. If the svgElem has a se:nonce attribute on it, then
IDs will use the nonce as they are generated.</p></td>
</tr>
<tr>
<td class="name"><code>optIdPrefix</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
svg_
</td>
<td class="description last"><p>The ID prefix to use.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line68">line 68</a>
</li></ul></dd>
</dl>
<h5>Throws:</h5>
<dl>
<dt>
<div class="param-desc">
<p>If not initialized with an SVG element</p>
</div>
</dt>
<dd></dd>
<dt>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Error</span>
</dd>
</dl>
</dt>
<dd></dd>
</dl>
</div>
<h3 class="subsection-title">Members</h3>
<h4 class="name" id="all_layers"><span class="type-signature"></span>all_layers<span class="type-signature"> :Array.<Layer></span></h4>
<div class="description">
<p>The z-ordered array of Layer objects. Each layer has a name
and group element.
The first layer is the one at the bottom of the rendering.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Array.<Layer></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line112">line 112</a>
</li></ul></dd>
</dl>
<h4 class="name" id="current_layer"><span class="type-signature"></span>current_layer<span class="type-signature"> :Layer</span></h4>
<div class="description">
<p>The current layer being used.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Layer</span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line128">line 128</a>
</li></ul></dd>
</dl>
<h4 class="name" id="idPrefix"><span class="type-signature"></span>idPrefix<span class="type-signature"> :string</span></h4>
<div class="description">
<p>The prefix to prepend to each element id in the drawing.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">string</span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line98">line 98</a>
</li></ul></dd>
</dl>
<h4 class="name" id="layer_map"><span class="type-signature"></span>layer_map<span class="type-signature"> :<a href="global.html#PlainObject">PlainObject</a>.<string, Layer></span></h4>
<div class="description">
<p>Map of all_layers by name.</p>
<p>Note: Layers are ordered, but referenced externally by name; so, we need both container
types depending on which function is called (i.e. all_layers and layer_map).</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="global.html#PlainObject">PlainObject</a>.<string, Layer></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line122">line 122</a>
</li></ul></dd>
</dl>
<h4 class="name" id="nonce_"><span class="type-signature">(non-null) </span>nonce_<span class="type-signature"> :string</span></h4>
<div class="description">
<p>The nonce to use to uniquely identify elements across drawings.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">string</span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line134">line 134</a>
</li></ul></dd>
</dl>
<h4 class="name" id="obj_num"><span class="type-signature"></span>obj_num<span class="type-signature"> :<a href="global.html#Integer">Integer</a></span></h4>
<div class="description">
<p>The latest object number used in this drawing.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="global.html#Integer">Integer</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line92">line 92</a>
</li></ul></dd>
</dl>
<h4 class="name" id="releasedNums"><span class="type-signature"></span>releasedNums<span class="type-signature"> :Array.<<a href="global.html#Integer">Integer</a>></span></h4>
<div class="description">
<p>An array of released element ids to immediately reuse.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Array.<<a href="global.html#Integer">Integer</a>></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line104">line 104</a>
</li></ul></dd>
</dl>
<h4 class="name" id="svgElem_"><span class="type-signature"></span>svgElem_<span class="type-signature"> :SVGSVGElement</span></h4>
<div class="description">
<p>The SVG DOM Element that represents this drawing.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">SVGSVGElement</span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line86">line 86</a>
</li></ul></dd>
</dl>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="clearNonce"><span class="type-signature"></span>clearNonce<span class="signature">()</span><span class="type-signature"> → {void}</span></h4>
<div class="description">
<p>Clears any previously set nonce.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line186">line 186</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">void</span>
</dd>
</dl>
<h4 class="name" id="cloneLayer"><span class="type-signature"></span>cloneLayer<span class="signature">(name, hrService)</span><span class="type-signature"> → {SVGGElement}</span></h4>
<div class="description">
<p>Creates a copy of the current layer with the given name and makes it the current layer.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>The given name. If the layer name exists, a new name will be generated.</p></td>
</tr>
<tr>
<td class="name"><code>hrService</code></td>
<td class="type">
<span class="param-type"><a href="module-history.HistoryRecordingService.html">module:history.HistoryRecordingService</a></span>
</td>
<td class="description last"><p>History recording service</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line559">line 559</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The SVGGElement of the new layer, which is
also the current layer of this drawing.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">SVGGElement</span>
</dd>
</dl>
<h4 class="name" id="copyElem"><span class="type-signature"></span>copyElem<span class="signature">(el)</span><span class="type-signature"> → {Element}</span></h4>
<div class="description">
<p>Create a clone of an element, updating its ID and its children's IDs when needed.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>el</code></td>
<td class="type">
<span class="param-type">Element</span>
</td>
<td class="description last"><p>DOM element to clone</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line666">line 666</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Element</span>
</dd>
</dl>
<h4 class="name" id="createLayer"><span class="type-signature"></span>createLayer<span class="signature">(name, hrService)</span><span class="type-signature"> → {SVGGElement}</span></h4>
<div class="description">
<p>Creates a new top-level layer in the drawing with the given name and
makes it the current layer.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>The given name. If the layer name exists, a new name will be generated.</p></td>
</tr>
<tr>
<td class="name"><code>hrService</code></td>
<td class="type">
<span class="param-type"><a href="module-history.HistoryRecordingService.html">module:history.HistoryRecordingService</a></span>
</td>
<td class="description last"><p>History recording service</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line528">line 528</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The SVGGElement of the new layer, which is
also the current layer of this drawing.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">SVGGElement</span>
</dd>
</dl>
<h4 class="name" id="deleteCurrentLayer"><span class="type-signature"></span>deleteCurrentLayer<span class="signature">()</span><span class="type-signature"> → {SVGGElement}</span></h4>
<div class="description">
<p>Deletes the current layer from the drawing and then clears the selection.
This function then calls the 'changed' handler. This is an undoable action.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line463">line 463</a>
</li></ul></dd>
<dt class="tag-todo">To Do:</dt>
<dd class="tag-todo">
<ul>
<li>Does this actually call the 'changed' handler?</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The SVGGElement of the layer removed or null.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">SVGGElement</span>
</dd>
</dl>
<h4 class="name" id="getCurrentLayer"><span class="type-signature"></span>getCurrentLayer<span class="signature">()</span><span class="type-signature"> → {SVGGElement|null}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line295">line 295</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The SVGGElement representing the current layer.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">SVGGElement</span>
|
<span class="param-type">null</span>
</dd>
</dl>
<h4 class="name" id="getCurrentLayerName"><span class="type-signature"></span>getCurrentLayerName<span class="signature">()</span><span class="type-signature"> → {string}</span></h4>
<div class="description">
<p>Returns the name of the currently selected layer. If an error occurs, an empty string
is returned.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line314">line 314</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The name of the currently active layer (or the empty string if none found).</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">string</span>
</dd>
</dl>
<h4 class="name" id="getElem_"><span class="type-signature"></span>getElem_<span class="signature">(id)</span><span class="type-signature"> → {Element}</span></h4>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>id</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>Element ID to retrieve</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line149">line 149</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>SVG element within the root SVGSVGElement</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Element</span>
</dd>
</dl>
<h4 class="name" id="getId"><span class="type-signature"></span>getId<span class="signature">()</span><span class="type-signature"> → {string}</span></h4>
<div class="description">
<p>Returns the latest object id as a string.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line196">line 196</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The latest object Id.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">string</span>
</dd>
</dl>
<h4 class="name" id="getLayerByName"><span class="type-signature"></span>getLayerByName<span class="signature">(name)</span><span class="type-signature"> → {SVGGElement}</span></h4>
<div class="description">
<p>Get a layer by name.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line304">line 304</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The SVGGElement representing the named layer or null.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">SVGGElement</span>
</dd>
</dl>
<h4 class="name" id="getLayerName"><span class="type-signature"></span>getLayerName<span class="signature">(i)</span><span class="type-signature"> → {string}</span></h4>
<div class="description">
<p>Returns the name of the ith layer. If the index is out of range, an empty string is returned.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>i</code></td>
<td class="type">
<span class="param-type"><a href="global.html#Integer">Integer</a></span>
</td>
<td class="description last"><p>The zero-based index of the layer you are querying.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line288">line 288</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The name of the ith layer (or the empty string if none found)</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">string</span>
</dd>
</dl>
<h4 class="name" id="getLayerOpacity"><span class="type-signature"></span>getLayerOpacity<span class="signature">(layerName)</span><span class="type-signature"> → (nullable) {<a href="global.html#Float">Float</a>}</span></h4>
<div class="description">
<p>Returns the opacity of the given layer. If the input name is not a layer, <code>null</code> is returned.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>layerName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>name of the layer on which to get the opacity</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line633">line 633</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The opacity value of the given layer. This will be a value between 0.0 and 1.0, or <code>null</code>
if <code>layerName</code> is not a valid layer</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="global.html#Float">Float</a></span>
</dd>
</dl>
<h4 class="name" id="getLayerVisibility"><span class="type-signature"></span>getLayerVisibility<span class="signature">(layerName)</span><span class="type-signature"> → {boolean}</span></h4>
<div class="description">
<p>Returns whether the layer is visible. If the layer name is not valid,
then this function returns <code>false</code>.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>layerName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>The name of the layer which you want to query.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line603">line 603</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The visibility state of the layer, or <code>false</code> if the layer name was invalid.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h4 class="name" id="getNextId"><span class="type-signature"></span>getNextId<span class="signature">()</span><span class="type-signature"> → {string}</span></h4>
<div class="description">
<p>Returns the next object Id as a string.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line206">line 206</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The next object Id to use.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">string</span>
</dd>
</dl>
<h4 class="name" id="getNonce"><span class="type-signature"></span>getNonce<span class="signature">()</span><span class="type-signature"> → (non-null) {string|<a href="global.html#Integer">Integer</a>}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line168">line 168</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The previously set nonce</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">string</span>
|
<span class="param-type"><a href="global.html#Integer">Integer</a></span>
</dd>
</dl>
<h4 class="name" id="getNumLayers"><span class="type-signature"></span>getNumLayers<span class="signature">()</span><span class="type-signature"> → {<a href="global.html#Integer">Integer</a>}</span></h4>
<div class="description">
<p>Returns the number of layers in the current drawing.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line270">line 270</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The number of layers in the current drawing.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="global.html#Integer">Integer</a></span>
</dd>
</dl>
<h4 class="name" id="getSvgElem"><span class="type-signature"></span>getSvgElem<span class="signature">()</span><span class="type-signature"> → {SVGSVGElement}</span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line161">line 161</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">SVGSVGElement</span>
</dd>
</dl>
<h4 class="name" id="hasLayer"><span class="type-signature"></span>hasLayer<span class="signature">(name)</span><span class="type-signature"> → {boolean}</span></h4>
<div class="description">
<p>Check if layer with given name already exists.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>The layer name to check</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line279">line 279</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h4 class="name" id="identifyLayers"><span class="type-signature"></span>identifyLayers<span class="signature">()</span><span class="type-signature"> → {void}</span></h4>
<div class="description">
<p>Updates layer system and sets the current layer to the
top-most layer (last <code><g></code> child of this drawing).</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line477">line 477</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">void</span>
</dd>
</dl>
<h4 class="name" id="mergeAllLayers"><span class="type-signature"></span>mergeAllLayers<span class="signature">(hrService)</span><span class="type-signature"> → {void}</span></h4>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>hrService</code></td>
<td class="type">
<span class="param-type"><a href="module-history.HistoryRecordingService.html">module:history.HistoryRecordingService</a></span>
</td>
<td class="description last"></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line426">line 426</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">void</span>
</dd>
</dl>
<h4 class="name" id="mergeLayer"><span class="type-signature"></span>mergeLayer<span class="signature">(hrService)</span><span class="type-signature"> → {void}</span></h4>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>hrService</code></td>
<td class="type">
<span class="param-type"><a href="module-history.HistoryRecordingService.html">module:history.HistoryRecordingService</a></span>
</td>
<td class="description last"></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line386">line 386</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">void</span>
</dd>
</dl>
<h4 class="name" id="releaseId"><span class="type-signature"></span>releaseId<span class="signature">(id)</span><span class="type-signature"> → {boolean}</span></h4>
<div class="description">
<p>Releases the object Id, letting it be used as the next id in getNextId().
This method DOES NOT remove any elements from the DOM, it is expected
that client code will do this.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>id</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>The id to release.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line245">line 245</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>True if the id was valid to be released, false otherwise.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h4 class="name" id="setCurrentLayer"><span class="type-signature"></span>setCurrentLayer<span class="signature">(name)</span><span class="type-signature"> → {boolean}</span></h4>
<div class="description">
<p>Sets the current layer. If the name is not a valid layer name, then this
function returns <code>false</code>. Otherwise it returns <code>true</code>. This is not an
undo-able action.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>The name of the layer you want to switch to.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line444">line 444</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p><code>true</code> if the current layer was switched, otherwise <code>false</code></p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h4 class="name" id="setCurrentLayerName"><span class="type-signature"></span>setCurrentLayerName<span class="signature">(name, hrService)</span><span class="type-signature"> → {string|null}</span></h4>
<div class="description">
<p>Set the current layer's name.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>The new name.</p></td>
</tr>
<tr>
<td class="name"><code>hrService</code></td>
<td class="type">
<span class="param-type"><a href="module-history.HistoryRecordingService.html">module:history.HistoryRecordingService</a></span>
</td>
<td class="description last"><p>History recording service</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line324">line 324</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The new name if changed; otherwise, null.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">string</span>
|
<span class="param-type">null</span>
</dd>
</dl>
<h4 class="name" id="setCurrentLayerPosition"><span class="type-signature"></span>setCurrentLayerPosition<span class="signature">(newpos)</span><span class="type-signature"> → {Object|null}</span></h4>
<div class="description">
<p>Set the current layer's position.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>newpos</code></td>
<td class="type">
<span class="param-type"><a href="global.html#Integer">Integer</a></span>
</td>
<td class="description last"><p>The zero-based index of the new position of the layer. Range should be 0 to layers-1</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line342">line 342</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>If the name was changed, returns {title:SVGGElement, previousName:string}; otherwise null.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object</span>
|
<span class="param-type">null</span>
</dd>
</dl>
<h4 class="name" id="setLayerOpacity"><span class="type-signature"></span>setLayerOpacity<span class="signature">(layerName, opacity)</span><span class="type-signature"> → {void}</span></h4>
<div class="description">
<p>Sets the opacity of the given layer. If the input name is not a layer,
nothing happens. If opacity is not a value between 0.0 and 1.0, then
nothing happens.
NOTE: this function exists solely to apply a highlighting/de-emphasis
effect to a layer. When it is possible for a user to affect the opacity
of a layer, we will need to allow this function to produce an undo-able
action.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>layerName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>Name of the layer on which to set the opacity</p></td>
</tr>
<tr>
<td class="name"><code>opacity</code></td>
<td class="type">
<span class="param-type"><a href="global.html#Float">Float</a></span>
</td>
<td class="description last"><p>A float value in the range 0.0-1.0</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line651">line 651</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">void</span>
</dd>
</dl>
<h4 class="name" id="setLayerVisibility"><span class="type-signature"></span>setLayerVisibility<span class="signature">(layerName, bVisible)</span><span class="type-signature"> → (nullable) {SVGGElement}</span></h4>
<div class="description">
<p>Sets the visibility of the layer. If the layer name is not valid, this
function returns <code>null</code>, otherwise it returns the <code>SVGElement</code> representing
the layer. This is an undo-able action.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>layerName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>The name of the layer to change the visibility</p></td>
</tr>
<tr>
<td class="name"><code>bVisible</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="description last"><p>Whether the layer should be visible</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_draw.js.html">svgcanvas/draw.js</a>, <a href="svgcanvas_draw.js.html#line617">line 617</a>
</li></ul></dd>
</dl>