svgedit
Version:
Powerful SVG-Editor for your browser
3,875 lines (996 loc) • 426 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Class: SvgCanvas</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: SvgCanvas</h1>
<section>
<header>
<h2><span class="attribs"><span class="type-signature"></span></span>
<span class="ancestors"><a href="module-svgcanvas.html">svgcanvas</a>.</span>SvgCanvas<span class="signature">(container, config)</span><span class="type-signature"></span></h2>
<div class="class-description"><p>The main SvgCanvas class that manages all SVG-related functions.</p></div>
</header>
<article>
<div class="container-overview">
<h2>Constructor</h2>
<h4 class="name" id="SvgCanvas"><span class="type-signature"></span>new SvgCanvas<span class="signature">(container, config)</span><span class="type-signature"></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>container</code></td>
<td class="type">
<span class="param-type">HTMLElement</span>
</td>
<td class="description last"><p>The container HTML element that should hold the SVG root element</p></td>
</tr>
<tr>
<td class="name"><code>config</code></td>
<td class="type">
<span class="param-type">module:SVGeditor.configObj.curConfig</span>
</td>
<td class="description last"><p>An object that contains configuration data</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_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line158">line 158</a>
</li></ul></dd>
</dl>
</div>
<h3 class="subsection-title">Namespaces</h3>
<dl>
<dt><a href="module-svgcanvas.SvgCanvas_pathActions.html">pathActions</a></dt>
<dd></dd>
<dt><a href="module-svgcanvas.SvgCanvas_textActions.html">textActions</a></dt>
<dd></dd>
</dl>
<h3 class="subsection-title">Members</h3>
<h4 class="name" id="addedNew"><span class="type-signature"></span>addedNew<span class="type-signature"> :boolean</span></h4>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">boolean</span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_event.js.html">svgcanvas/event.js</a>, <a href="svgcanvas_event.js.html#line842">line 842</a>
</li></ul></dd>
</dl>
<h4 class="name" id="addSVGElementFromJson"><span class="type-signature"></span>addSVGElementFromJson<span class="type-signature"> :<a href="module-utilities.EditorContext.html#addSVGElementFromJson">module:utilities.EditorContext#addSVGElementFromJson</a>|<a href="module-path.EditorContext.html#addSVGElementFromJson">module:path.EditorContext#addSVGElementFromJson</a></span></h4>
<div class="description">
<p>This should really be an intersection implementing all rather than a union.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="module-utilities.EditorContext.html#addSVGElementFromJson">module:utilities.EditorContext#addSVGElementFromJson</a></span>
|
<span class="param-type"><a href="module-path.EditorContext.html#addSVGElementFromJson">module:path.EditorContext#addSVGElementFromJson</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line364">line 364</a>
</li></ul></dd>
</dl>
<h4 class="name" id="addToSelection"><span class="type-signature"></span>addToSelection<span class="type-signature"> :<a href="module-path.EditorContext.html#addToSelection">module:path.EditorContext#addToSelection</a></span></h4>
<div class="description">
<p>Adds a list of elements to the selection. The 'selected' handler is then called.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="module-path.EditorContext.html#addToSelection">module:path.EditorContext#addToSelection</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line644">line 644</a>
</li></ul></dd>
</dl>
<h5>Fires:</h5>
<ul>
<li><a href="module-svgcanvas.SvgCanvas.html#event:event:selected">module:svgcanvas.SvgCanvas#event:selected</a></li>
</ul>
<h4 class="name" id="call"><span class="type-signature"></span>call<span class="type-signature"> :<a href="module-draw.DrawCanvasInit.html#call">module:draw.DrawCanvasInit#call</a>|<a href="module-path.EditorContext.html#call">module:path.EditorContext#call</a></span></h4>
<div class="description">
<p>The "implements" should really be an intersection applying to all types rather than a union.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="module-draw.DrawCanvasInit.html#call">module:draw.DrawCanvasInit#call</a></span>
|
<span class="param-type"><a href="module-path.EditorContext.html#call">module:path.EditorContext#call</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line542">line 542</a>
</li></ul></dd>
</dl>
<h4 class="name" id="clearSelection"><span class="type-signature"></span>clearSelection<span class="type-signature"> :<a href="module-draw.DrawCanvasInit.html#clearSelection">module:draw.DrawCanvasInit#clearSelection</a>|<a href="module-path.EditorContext.html#clearSelection">module:path.EditorContext#clearSelection</a></span></h4>
<div class="description">
<p>Clears the selection. The 'selected' handler is then optionally called.
This should really be an intersection applying to all types rather than a union.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="module-draw.DrawCanvasInit.html#clearSelection">module:draw.DrawCanvasInit#clearSelection</a></span>
|
<span class="param-type"><a href="module-path.EditorContext.html#clearSelection">module:path.EditorContext#clearSelection</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line635">line 635</a>
</li></ul></dd>
</dl>
<h5>Fires:</h5>
<ul>
<li><a href="module-svgcanvas.SvgCanvas.html#event:event:selected">module:svgcanvas.SvgCanvas#event:selected</a></li>
</ul>
<h4 class="name" id="contentH"><span class="type-signature"></span>contentH<span class="type-signature"> :<a href="global.html#Float">Float</a></span></h4>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="global.html#Float">Float</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line2633">line 2633</a>
</li></ul></dd>
</dl>
<h4 class="name" id="contentW"><span class="type-signature"></span>contentW<span class="type-signature"> :<a href="global.html#Float">Float</a></span></h4>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="global.html#Float">Float</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line2628">line 2628</a>
</li></ul></dd>
</dl>
<h4 class="name" id="current_drawing_"><span class="type-signature"></span>current_drawing_<span class="type-signature"> :<a href="module-draw.Drawing.html">module:draw.Drawing</a></span></h4>
<div class="description">
<p>Current <code>draw.Drawing</code> object.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="module-draw.Drawing.html">module:draw.Drawing</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line282">line 282</a>
</li></ul></dd>
</dl>
<h4 class="name" id="dataStorage"><span class="type-signature"></span>dataStorage<span class="type-signature"></span></h4>
<div class="description">
<p>A storage solution aimed at replacing jQuerys data function.
Implementation Note: Elements are stored in a (WeakMap)[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap].
This makes sure the data is garbage collected when the node is removed.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line197">line 197</a>
</li></ul></dd>
</dl>
<h4 class="name" id="getCurrentDrawing"><span class="type-signature"></span>getCurrentDrawing<span class="type-signature"> :<a href="module-draw.DrawCanvasInit.html#getCurrentDrawing">module:draw.DrawCanvasInit#getCurrentDrawing</a></span></h4>
<div class="description">
<p>Returns the current Drawing.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="module-draw.DrawCanvasInit.html#getCurrentDrawing">module:draw.DrawCanvasInit#getCurrentDrawing</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line289">line 289</a>
</li></ul></dd>
</dl>
<h4 class="name" id="getId"><span class="type-signature"></span>getId<span class="type-signature"> :<a href="module-path.EditorContext.html#getId">module:path.EditorContext#getId</a></span></h4>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="module-path.EditorContext.html#getId">module:path.EditorContext#getId</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line534">line 534</a>
</li></ul></dd>
</dl>
<h4 class="name" id="getMouseTarget"><span class="type-signature"></span>getMouseTarget<span class="type-signature"> :<a href="module-path.EditorContext.html#getMouseTarget">module:path.EditorContext#getMouseTarget</a></span></h4>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="module-path.EditorContext.html#getMouseTarget">module:path.EditorContext#getMouseTarget</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_selection.js.html">svgcanvas/selection.js</a>, <a href="svgcanvas_selection.js.html#line123">line 123</a>
</li></ul></dd>
</dl>
<h4 class="name" id="getMouseTarget"><span class="type-signature"></span>getMouseTarget<span class="type-signature"> :<a href="module-path.EditorContext.html#getMouseTarget">module:path.EditorContext#getMouseTarget</a></span></h4>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="module-path.EditorContext.html#getMouseTarget">module:path.EditorContext#getMouseTarget</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line659">line 659</a>
</li></ul></dd>
</dl>
<h4 class="name" id="getNextId"><span class="type-signature"></span>getNextId<span class="type-signature"> :<a href="module-path.EditorContext.html#getNextId">module:path.EditorContext#getNextId</a></span></h4>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="module-path.EditorContext.html#getNextId">module:path.EditorContext#getNextId</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line526">line 526</a>
</li></ul></dd>
</dl>
<h4 class="name" id="getSelectedElements"><span class="type-signature"></span>getSelectedElements<span class="type-signature"> :<a href="module-utilities.EditorContext.html#getSelectedElements">module:utilities.EditorContext#getSelectedElements</a>|<a href="module-draw.DrawCanvasInit.html#getSelectedElements">module:draw.DrawCanvasInit#getSelectedElements</a>|<a href="module-path.EditorContext.html#getSelectedElements">module:path.EditorContext#getSelectedElements</a></span></h4>
<div class="description">
<p>Should really be an intersection with all needing to apply rather than a union.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="module-utilities.EditorContext.html#getSelectedElements">module:utilities.EditorContext#getSelectedElements</a></span>
|
<span class="param-type"><a href="module-draw.DrawCanvasInit.html#getSelectedElements">module:draw.DrawCanvasInit#getSelectedElements</a></span>
|
<span class="param-type"><a href="module-path.EditorContext.html#getSelectedElements">module:path.EditorContext#getSelectedElements</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line399">line 399</a>
</li></ul></dd>
</dl>
<h4 class="name" id="getZoom"><span class="type-signature"></span>getZoom<span class="type-signature"> :<a href="module-path.EditorContext.html#getCurrentZoom">module:path.EditorContext#getCurrentZoom</a>|<a href="module-select.SVGFactory.html#getCurrentZoom">module:select.SVGFactory#getCurrentZoom</a></span></h4>
<div class="description">
<p>This should really be an intersection applying to all types rather than a union.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="module-path.EditorContext.html#getCurrentZoom">module:path.EditorContext#getCurrentZoom</a></span>
|
<span class="param-type"><a href="module-select.SVGFactory.html#getCurrentZoom">module:select.SVGFactory#getCurrentZoom</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line489">line 489</a>
</li></ul></dd>
</dl>
<h4 class="name" id="remapElement"><span class="type-signature"></span>remapElement<span class="type-signature"> :<a href="module-path.EditorContext.html#remapElement">module:path.EditorContext#remapElement</a></span></h4>
<div class="description">
<p>Applies coordinate changes to an element based on the given matrix.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="module-path.EditorContext.html#remapElement">module:path.EditorContext#remapElement</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_coords.js.html">svgcanvas/coords.js</a>, <a href="svgcanvas_coords.js.html#line47">line 47</a>
</li></ul></dd>
</dl>
<h4 class="name" id="remapElement"><span class="type-signature"></span>remapElement<span class="type-signature"> :<a href="module-path.EditorContext.html#remapElement">module:path.EditorContext#remapElement</a></span></h4>
<div class="description">
<p>Applies coordinate changes to an element based on the given matrix.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="module-path.EditorContext.html#remapElement">module:path.EditorContext#remapElement</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_coords.js.html">svgcanvas/coords.js</a>, <a href="svgcanvas_coords.js.html#line47">line 47</a>
</li></ul></dd>
</dl>
<h4 class="name" id="round"><span class="type-signature"></span>round<span class="type-signature"> :<a href="module-path.EditorContext.html#round">module:path.EditorContext#round</a></span></h4>
<div class="description">
<p>This method rounds the incoming value to the nearest value based on the <code>currentZoom</code></p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="module-path.EditorContext.html#round">module:path.EditorContext#round</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line496">line 496</a>
</li></ul></dd>
</dl>
<h4 class="name" id="selectorManager"><span class="type-signature"></span>selectorManager<span class="type-signature"> :<a href="module-select.SelectorManager.html">module:select.SelectorManager</a></span></h4>
<div class="description">
<p>This object manages selectors for us.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="module-select.SelectorManager.html">module:select.SelectorManager</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line519">line 519</a>
</li></ul></dd>
</dl>
<h4 class="name" id="undoMgr"><span class="type-signature"></span>undoMgr<span class="type-signature"> :<a href="module-history.HistoryEventHandler.html">module:history.HistoryEventHandler</a></span></h4>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="module-history.HistoryEventHandler.html">module:history.HistoryEventHandler</a></span>
</li>
</ul>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="svgcanvas_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line596">line 596</a>
</li></ul></dd>
</dl>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="addExtension"><span class="type-signature"></span>addExtension<span class="signature">(name, extInitFunc<span class="signature-attributes">opt</span>, initArgs)</span><span class="type-signature"> → {Promise.<void>}</span></h4>
<div class="description">
<p>Add an extension to the editor.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</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="attributes">
</td>
<td class="description last"><p>String with the ID of the extension. Used internally; no need for i18n.</p></td>
</tr>
<tr>
<td class="name"><code>extInitFunc</code></td>
<td class="type">
<span class="param-type">module:svgcanvas.ExtensionInitCallback</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last"><p>Function supplied by the extension with its data</p></td>
</tr>
<tr>
<td class="name"><code>initArgs</code></td>
<td class="type">
<span class="param-type">module:svgcanvas.ExtensionInitArgs</span>
</td>
<td class="attributes">
</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_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line833">line 833</a>
</li></ul></dd>
</dl>
<h5>Fires:</h5>
<ul>
<li><a href="module-svgcanvas.SvgCanvas.html#event:event:extension_added">module:svgcanvas.SvgCanvas#event:extension_added</a></li>
</ul>
<h5>Throws:</h5>
<dl>
<dt>
<div class="param-desc">
<p><code>TypeError</code> if <code>extInitFunc</code> is not a function, <code>Error</code>
if extension of supplied name already exists</p>
</div>
</dt>
<dd></dd>
<dt>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">TypeError</span>
|
<span class="param-type">Error</span>
</dd>
</dl>
</dt>
<dd></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Resolves to <code>undefined</code></p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Promise.<void></span>
</dd>
</dl>
<h4 class="name" id="alignSelectedElements"><span class="type-signature"></span>alignSelectedElements<span class="signature">(type, relativeTo)</span><span class="type-signature"> → {void}</span></h4>
<div class="description">
<p>Aligns selected elements.</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>type</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>String with single character indicating the alignment type</p></td>
</tr>
<tr>
<td class="name"><code>relativeTo</code></td>
<td class="type">
<span class="param-type">"selected"</span>
|
<span class="param-type">"largest"</span>
|
<span class="param-type">"smallest"</span>
|
<span class="param-type">"page"</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_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line2615">line 2615</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="assignAttributes"><span class="type-signature"></span>assignAttributes<span class="signature">(elem, attrs, suspendLength<span class="signature-attributes">opt</span>, unitCheck<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {void}</span></h4>
<div class="description">
<p>Assigns multiple attributes to an element.</p>
</div>
<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>elem</code></td>
<td class="type">
<span class="param-type">Element</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>DOM element to apply new attribute values to</p></td>
</tr>
<tr>
<td class="name"><code>attrs</code></td>
<td class="type">
<span class="param-type"><a href="global.html#PlainObject">PlainObject</a>.<string, string></span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>Object with attribute keys/values</p></td>
</tr>
<tr>
<td class="name"><code>suspendLength</code></td>
<td class="type">
<span class="param-type"><a href="global.html#Integer">Integer</a></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>Milliseconds to suspend redraw</p></td>
</tr>
<tr>
<td class="name"><code>unitCheck</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last"><p>Boolean to indicate the need to use units.setUnitAttr</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_utilities.js.html">svgcanvas/utilities.js</a>, <a href="svgcanvas_utilities.js.html#line1130">line 1130</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="assignAttributes"><span class="type-signature"></span>assignAttributes<span class="signature">(elem, attrs, suspendLength<span class="signature-attributes">opt</span>, unitCheck<span class="signature-attributes">opt</span>)</span><span class="type-signature"> → {void}</span></h4>
<div class="description">
<p>Assigns multiple attributes to an element.</p>
</div>
<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>elem</code></td>
<td class="type">
<span class="param-type">Element</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>DOM element to apply new attribute values to</p></td>
</tr>
<tr>
<td class="name"><code>attrs</code></td>
<td class="type">
<span class="param-type"><a href="global.html#PlainObject">PlainObject</a>.<string, string></span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>Object with attribute keys/values</p></td>
</tr>
<tr>
<td class="name"><code>suspendLength</code></td>
<td class="type">
<span class="param-type"><a href="global.html#Integer">Integer</a></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>Milliseconds to suspend redraw</p></td>
</tr>
<tr>
<td class="name"><code>unitCheck</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
false
</td>
<td class="description last"><p>Boolean to indicate the need to use units.setUnitAttr</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_utilities.js.html">svgcanvas/utilities.js</a>, <a href="svgcanvas_utilities.js.html#line1130">line 1130</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="bind"><span class="type-signature"></span>bind<span class="signature">(ev, f)</span><span class="type-signature"> → {<a href="module-svgcanvas.html#.EventHandler">module:svgcanvas.EventHandler</a>}</span></h4>
<div class="description">
<p>Attaches a callback function to an event.</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>ev</code></td>
<td class="type">
<span class="param-type">"changed"</span>
|
<span class="param-type">"contextset"</span>
|
<span class="param-type">"selected"</span>
|
<span class="param-type">"pointsAdded"</span>
|
<span class="param-type">"extension_added"</span>
|
<span class="param-type">"extensions_added"</span>
|
<span class="param-type">"message"</span>
|
<span class="param-type">"transition"</span>
|
<span class="param-type">"zoomed"</span>
|
<span class="param-type">"updateCanvas"</span>
|
<span class="param-type">"zoomDone"</span>
|
<span class="param-type">"saved"</span>
|
<span class="param-type">"exported"</span>
|
<span class="param-type">"exportedPDF"</span>
|
<span class="param-type">"setnonce"</span>
|
<span class="param-type">"unsetnonce"</span>
|
<span class="param-type">"cleared"</span>
</td>
<td class="description last"><p>String indicating the name of the event</p></td>
</tr>
<tr>
<td class="name"><code>f</code></td>
<td class="type">
<span class="param-type"><a href="module-svgcanvas.html#.EventHandler">module:svgcanvas.EventHandler</a></span>
</td>
<td class="description last"><p>The callback function to bind to the event</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_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line1033">line 1033</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The previous event</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="module-svgcanvas.html#.EventHandler">module:svgcanvas.EventHandler</a></span>
</dd>
</dl>
<h4 class="name" id="changeSelectedAttribute"><span class="type-signature"></span>changeSelectedAttribute<span class="signature">(attr, val, elems)</span><span class="type-signature"> → {void}</span></h4>
<div class="description">
<p>Change the given/selected element and add the original value to the history stack.
If you want to change all <code>selectedElements</code>, ignore the <code>elems</code> argument.
If you want to change only a subset of <code>selectedElements</code>, then send the
subset to this function in the <code>elems</code> argument.</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>attr</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>String with the attribute name</p></td>
</tr>
<tr>
<td class="name"><code>val</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type"><a href="global.html#Float">Float</a></span>
</td>
<td class="description last"><p>String or number with the new attribute value</p></td>
</tr>
<tr>
<td class="name"><code>elems</code></td>
<td class="type">
<span class="param-type">Array.<Element></span>
</td>
<td class="description last"><p>The DOM elements to apply the change 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_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line2394">line 2394</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="changeSelectedAttribute"><span class="type-signature"></span>changeSelectedAttribute<span class="signature">(attr, val, elems)</span><span class="type-signature"> → {void}</span></h4>
<div class="description">
<p>Change the given/selected element and add the original value to the history stack.
If you want to change all <code>selectedElements</code>, ignore the <code>elems</code> argument.
If you want to change only a subset of <code>selectedElements</code>, then send the
subset to this function in the <code>elems</code> argument.</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>attr</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>String with the attribute name</p></td>
</tr>
<tr>
<td class="name"><code>val</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type"><a href="global.html#Float">Float</a></span>
</td>
<td class="description last"><p>String or number with the new attribute value</p></td>
</tr>
<tr>
<td class="name"><code>elems</code></td>
<td class="type">
<span class="param-type">Array.<Element></span>
</td>
<td class="description last"><p>The DOM elements to apply the change 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_undo.js.html">svgcanvas/undo.js</a>, <a href="svgcanvas_undo.js.html#line262">line 262</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="cleanupElement"><span class="type-signature"></span>cleanupElement<span class="signature">(element)</span><span class="type-signature"> → {void}</span></h4>
<div class="description">
<p>Remove unneeded (default) attributes, making resulting SVG smaller.</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>element</code></td>
<td class="type">
<span class="param-type">Element</span>
</td>
<td class="description last"><p>DOM element to clean up</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_utilities.js.html">svgcanvas/utilities.js</a>, <a href="svgcanvas_utilities.js.html#line1162">line 1162</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="cleanupElement"><span class="type-signature"></span>cleanupElement<span class="signature">(element)</span><span class="type-signature"> → {void}</span></h4>
<div class="description">
<p>Remove unneeded (default) attributes, making resulting SVG smaller.</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>element</code></td>
<td class="type">
<span class="param-type">Element</span>
</td>
<td class="description last"><p>DOM element to clean up</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_utilities.js.html">svgcanvas/utilities.js</a>, <a href="svgcanvas_utilities.js.html#line1162">line 1162</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="clear"><span class="type-signature"></span>clear<span class="signature">()</span><span class="type-signature"> → {void}</span></h4>
<div class="description">
<p>Clears the current document. This is not 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_svgcanvas.js.html">svgcanvas/svgcanvas.js</a>, <a href="svgcanvas_svgcanvas.js.html#line1639">line 1639</a>
</li></ul></dd>
</dl>
<h5>Fires:</h5>
<ul>
<li><a href="module-svgcanvas.SvgCanvas.html#event:event:cleared">module:svgcanvas.SvgCanvas#event:cleared</a></li>
</ul>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">void</span>
</dd>
</dl>
<h4 class="name" id="clearSvgContentElement"><span class="type-signature"></span>clearSvgContentElement<span class="signature">()</span><span class="type-signature"> → {void}</span></h4>
<div class="description">
<p>This function resets the svgcontent element while keeping it in the DOM.</p>
</div>
<dl class="details">