Add documentation for events

This commit is contained in:
David Evans 2018-01-13 18:47:56 +00:00
parent f24933e5a1
commit a420402020
1 changed files with 64 additions and 14 deletions

View File

@ -370,7 +370,10 @@ newDiagram = diagram.clone();
<p> <p>
Creates a copy of the diagram. If options are given, they will override the Creates a copy of the diagram. If options are given, they will override the
current diagram&rsquo;s state (options is passed to the constructor of the new current diagram&rsquo;s state (options is passed to the constructor of the new
object, so all the same options are available). object, so all the same options are available). Note that by default, the
<code>namespace</code> will not be cloned (a new unique namespace will be
generated). Also the <code>container</code> will not be cloned; you will need
to specify one explicitly or manually attach the new diagram at a later point.
</p> </p>
<h3 id="API_set">.set</h3> <h3 id="API_set">.set</h3>
@ -409,19 +412,6 @@ Optionally, the result of an earlier call to
<a href="#API_process"><code>process</code></a> can be provided. <a href="#API_process"><code>process</code></a> can be provided.
</p> </p>
<h3 id="API_setHighlight">.setHighlight</h3>
<pre data-lang="javascript">
diagram.setHighlight(line);
diagram.setHighlight();
</pre>
<p>
Marks elements generated by the specified line with a "focus" CSS class, which
can be used to style them. Only one line can be highlighted at a time. Calling
with no parameter (or <code>null</code>) will remove the highlighting.
</p>
<h3 id="API_addTheme">.addTheme</h3> <h3 id="API_addTheme">.addTheme</h3>
<pre data-lang="javascript"> <pre data-lang="javascript">
@ -537,6 +527,66 @@ node = diagram.dom();
Returns the base SVG element which the diagram has been rendered into. Returns the base SVG element which the diagram has been rendered into.
</p> </p>
<h3 id="API_setHighlight">.setHighlight</h3>
<pre data-lang="javascript">
diagram.setHighlight(line);
diagram.setHighlight();
</pre>
<p>
Marks elements generated by the specified line with a "focus" CSS class, which
can be used to style them. Only one line can be highlighted at a time. Calling
with no parameter (or <code>null</code>) will remove the highlighting.
</p>
<h3 id="API_addEventListener">.addEventListener</h3>
<pre data-lang="javascript">
diagram.addEventListener(type, callback);
</pre>
<p>
Registers an event listener. The available events are:</p>
<ul>
<li><code>mouseover</code>: called when the mouse enters a region of the diagram
(e.g. a note).</li>
<li><code>mouseout</code>: called when the mouse leaves a region of the
diagram.</li>
<li><code>click</code>: called when the user clicks on a region of the
diagram.</li>
</ul>
<p><code>mouseover</code> and <code>click</code> are invoked with a single
parameter: the element. This object contains:</p>
<ul>
<li><code>ln</code>: the line number of the source code which defined the
element.</li>
<li><code>type</code>: a string representing the type of the element.</li>
<li>Other fields which define the element (exact fields vary by type).</li>
</ul>
<h3 id="API_removeEventListener">.removeEventListener</h3>
<pre data-lang="javascript">
diagram.removeEventListener(type, callback);
</pre>
<p>
Removes a previously registered event listener.
</p>
<h3 id="API_removeAllEventListeners">.removeAllEventListeners</h3>
<pre data-lang="javascript">
diagram.removeAllEventListeners(type);
diagram.removeAllEventListeners();
</pre>
<p>
Removes all registered event listeners for a given type, or all event listeners
for all types.
</p>
<h2 id="Thanks">Thanks</h2> <h2 id="Thanks">Thanks</h2>
<p> <p>