UNPKG

mermaid

Version:

Markdownish syntax for generating flowcharts, sequence diagrams and gantt charts.

github.com/knsv/mermaid

knsv/mermaid

845 lines • 82.7 kB
<!DOCTYPE html>
<html>
<head>
  <title>sequenceRenderer.js</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" media="all" href="../../../doc-style.css" />
  <script src="../../../doc-filelist.js"></script>
  <script>
    var relativeDir = "../../../", thisFile = "Users/knut/Documents/source/mermaid/src/diagrams/sequenceDiagram/sequenceRenderer.js", defaultSidebar = true;
  </script>
  <script src="../../../doc-script.js"></script>
  <script src="../../../mermaid.js"></script>
  <link rel="stylesheet" href="../../../mermaid.css" />
</head>
<body>
  <div id="sidebar_wrapper">
    <div id="sidebar_switch">
      <span class="tree">Files</span>
      <span class="headings">Headings</span>
    </div>
    <div id="tree"></div>
    <div id="headings">
      <div class="heading h1">
        <a href="#sequenceRenderer.js">sequenceRenderer.js</a>
      </div>
    </div>
  </div>
  <div id="sidebar-toggle"></div>
  <div id="container"><div class="background highlight"></div>
<table cellpadding="0" cellspacing="0">
  <tbody>
      <tr>
        <td class="docs">
        <div class="pilwrap" id="sequenceRenderer.js">
          <h1>
              <a href="#sequenceRenderer.js" name="sequenceRenderer.js" class="pilcrow">&#182;</a>sequenceRenderer.js
          </h1>
        </div>
        </td>
        <td class="code highlight"></td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-1" id="section-1">&#182;</a>
</div>
<div class="dox">
  <div class="summary"><p>Created by knut on 14-11-23.</p>

  </div>
  <div class="body">
  </div>
</div>

        </td>
        <td class="code highlight"><div class="highlight"><pre><span class="kd">var</span> <span class="nx">sq</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;./parser/sequenceDiagram&#39;</span><span class="p">).</span><span class="nx">parser</span><span class="p">;</span>
<span class="nx">sq</span><span class="p">.</span><span class="nx">yy</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;./sequenceDb&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">svgDraw</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;./svgDraw&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">d3</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../../d3&#39;</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">log</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../../logger&#39;</span><span class="p">).</span><span class="nx">create</span><span class="p">();</span>

<span class="kd">var</span> <span class="nx">conf</span> <span class="o">=</span> <span class="p">{</span>

    <span class="nx">diagramMarginX</span><span class="o">:</span><span class="mi">50</span><span class="p">,</span>
    <span class="nx">diagramMarginY</span><span class="o">:</span><span class="mi">10</span><span class="p">,</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-2" id="section-2">&#182;</a>
</div>
<p>Margin between actors</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">actorMargin</span><span class="o">:</span><span class="mi">50</span><span class="p">,</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-3" id="section-3">&#182;</a>
</div>
<p>Width of actor moxes</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">width</span><span class="o">:</span><span class="mi">150</span><span class="p">,</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-4" id="section-4">&#182;</a>
</div>
<p>Height of actor boxes</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">height</span><span class="o">:</span><span class="mi">65</span><span class="p">,</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-5" id="section-5">&#182;</a>
</div>
<p>Margin around loop boxes</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">boxMargin</span><span class="o">:</span><span class="mi">10</span><span class="p">,</span>
    <span class="nx">boxTextMargin</span><span class="o">:</span><span class="mi">5</span><span class="p">,</span>
    <span class="nx">noteMargin</span><span class="o">:</span><span class="mi">10</span><span class="p">,</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-6" id="section-6">&#182;</a>
</div>
<p>Space between messages</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">messageMargin</span><span class="o">:</span><span class="mi">35</span><span class="p">,</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-7" id="section-7">&#182;</a>
</div>
<p>mirror actors under diagram</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">mirrorActors</span><span class="o">:</span><span class="kc">false</span><span class="p">,</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-8" id="section-8">&#182;</a>
</div>
<p>Depending on css styling this might need adjustment
Prolongs the edge of the diagram downwards</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">bottomMarginAdj</span><span class="o">:</span><span class="mi">1</span>
<span class="p">};</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-9" id="section-9">&#182;</a>
</div>
<p>var bb = getBBox(&quot;path&quot;);</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
<span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span> <span class="o">=</span> <span class="p">{</span>
    <span class="nx">data</span><span class="o">:</span><span class="p">{</span>
        <span class="nx">startx</span><span class="o">:</span><span class="kc">undefined</span><span class="p">,</span>
        <span class="nx">stopx</span> <span class="o">:</span><span class="kc">undefined</span><span class="p">,</span>
        <span class="nx">starty</span><span class="o">:</span><span class="kc">undefined</span><span class="p">,</span>
        <span class="nx">stopy</span> <span class="o">:</span><span class="kc">undefined</span><span class="p">,</span>
    <span class="p">},</span>
    <span class="nx">verticalPos</span><span class="o">:</span><span class="mi">0</span><span class="p">,</span>

    <span class="nx">list</span><span class="o">:</span> <span class="p">[],</span>
    <span class="nx">init</span>    <span class="o">:</span> <span class="kd">function</span><span class="p">(){</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">list</span> <span class="o">=</span> <span class="p">[];</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">data</span> <span class="o">=</span> <span class="p">{</span>
            <span class="nx">startx</span><span class="o">:</span><span class="kc">undefined</span><span class="p">,</span>
                <span class="nx">stopx</span> <span class="o">:</span><span class="kc">undefined</span><span class="p">,</span>
                <span class="nx">starty</span><span class="o">:</span><span class="kc">undefined</span><span class="p">,</span>
                <span class="nx">stopy</span> <span class="o">:</span><span class="kc">undefined</span><span class="p">,</span>
        <span class="p">};</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">verticalPos</span> <span class="o">=</span><span class="mi">0</span><span class="p">;</span>
    <span class="p">},</span>
    <span class="nx">updateVal</span> <span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">obj</span><span class="p">,</span><span class="nx">key</span><span class="p">,</span><span class="nx">val</span><span class="p">,</span><span class="nx">fun</span><span class="p">){</span>
        <span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">obj</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">===</span> <span class="s1">&#39;undefined&#39;</span><span class="p">){</span>
            <span class="nx">obj</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="nx">val</span><span class="p">;</span>
        <span class="p">}</span><span class="k">else</span><span class="p">{</span>
            <span class="nx">obj</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="nx">fun</span><span class="p">(</span><span class="nx">val</span><span class="p">,</span><span class="nx">obj</span><span class="p">[</span><span class="nx">key</span><span class="p">]);</span>
        <span class="p">}</span>
    <span class="p">},</span>
    <span class="nx">updateLoops</span><span class="o">:</span><span class="kd">function</span><span class="p">(</span><span class="nx">startx</span><span class="p">,</span><span class="nx">starty</span><span class="p">,</span><span class="nx">stopx</span><span class="p">,</span><span class="nx">stopy</span><span class="p">){</span>
        <span class="kd">var</span> <span class="nx">_self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
        <span class="kd">var</span> <span class="nx">cnt</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">loop</span><span class="p">){</span>
            <span class="nx">cnt</span><span class="o">++</span><span class="p">;</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-10" id="section-10">&#182;</a>
</div>
<p>The loop list is a stack so the biggest margins in the beginning of the list</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
            <span class="kd">var</span> <span class="nx">n</span> <span class="o">=</span> <span class="nx">_self</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">length</span><span class="o">-</span><span class="nx">cnt</span><span class="o">+</span><span class="mi">1</span><span class="p">;</span>

            <span class="nx">_self</span><span class="p">.</span><span class="nx">updateVal</span><span class="p">(</span><span class="nx">loop</span><span class="p">,</span> <span class="s1">&#39;startx&#39;</span><span class="p">,</span><span class="nx">startx</span> <span class="o">-</span> <span class="nx">n</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span><span class="p">,</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">);</span>
            <span class="nx">_self</span><span class="p">.</span><span class="nx">updateVal</span><span class="p">(</span><span class="nx">loop</span><span class="p">,</span> <span class="s1">&#39;starty&#39;</span><span class="p">,</span><span class="nx">starty</span> <span class="o">-</span> <span class="nx">n</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span><span class="p">,</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">);</span>
            <span class="nx">_self</span><span class="p">.</span><span class="nx">updateVal</span><span class="p">(</span><span class="nx">loop</span><span class="p">,</span> <span class="s1">&#39;stopx&#39;</span> <span class="p">,</span><span class="nx">stopx</span>  <span class="o">+</span> <span class="nx">n</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span><span class="p">,</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">);</span>
            <span class="nx">_self</span><span class="p">.</span><span class="nx">updateVal</span><span class="p">(</span><span class="nx">loop</span><span class="p">,</span> <span class="s1">&#39;stopy&#39;</span> <span class="p">,</span><span class="nx">stopy</span>  <span class="o">+</span> <span class="nx">n</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span><span class="p">,</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">);</span>

            <span class="nx">_self</span><span class="p">.</span><span class="nx">updateVal</span><span class="p">(</span><span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">data</span><span class="p">,</span><span class="s1">&#39;startx&#39;</span><span class="p">,</span><span class="nx">startx</span> <span class="o">-</span> <span class="nx">n</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span> <span class="p">,</span><span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">);</span>
            <span class="nx">_self</span><span class="p">.</span><span class="nx">updateVal</span><span class="p">(</span><span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">data</span><span class="p">,</span><span class="s1">&#39;starty&#39;</span><span class="p">,</span><span class="nx">starty</span> <span class="o">-</span> <span class="nx">n</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span> <span class="p">,</span><span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">);</span>
            <span class="nx">_self</span><span class="p">.</span><span class="nx">updateVal</span><span class="p">(</span><span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">data</span><span class="p">,</span><span class="s1">&#39;stopx&#39;</span> <span class="p">,</span><span class="nx">stopx</span>  <span class="o">+</span> <span class="nx">n</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span> <span class="p">,</span><span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">);</span>
            <span class="nx">_self</span><span class="p">.</span><span class="nx">updateVal</span><span class="p">(</span><span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">data</span><span class="p">,</span><span class="s1">&#39;stopy&#39;</span> <span class="p">,</span><span class="nx">stopy</span>  <span class="o">+</span> <span class="nx">n</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span> <span class="p">,</span><span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">);</span>
        <span class="p">});</span>
    <span class="p">},</span>
    <span class="nx">insert</span><span class="o">:</span><span class="kd">function</span><span class="p">(</span><span class="nx">startx</span><span class="p">,</span><span class="nx">starty</span><span class="p">,</span><span class="nx">stopx</span><span class="p">,</span><span class="nx">stopy</span><span class="p">){</span>

        <span class="kd">var</span> <span class="nx">_startx</span><span class="p">,</span> <span class="nx">_starty</span><span class="p">,</span> <span class="nx">_stopx</span><span class="p">,</span> <span class="nx">_stopy</span><span class="p">;</span>

        <span class="nx">_startx</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">startx</span><span class="p">,</span><span class="nx">stopx</span><span class="p">);</span>
        <span class="nx">_stopx</span>  <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">startx</span><span class="p">,</span><span class="nx">stopx</span><span class="p">);</span>
        <span class="nx">_starty</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">starty</span><span class="p">,</span><span class="nx">stopy</span><span class="p">);</span>
        <span class="nx">_stopy</span>  <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">starty</span><span class="p">,</span><span class="nx">stopy</span><span class="p">);</span>

        <span class="k">this</span><span class="p">.</span><span class="nx">updateVal</span><span class="p">(</span><span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">data</span><span class="p">,</span><span class="s1">&#39;startx&#39;</span><span class="p">,</span><span class="nx">_startx</span><span class="p">,</span><span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">);</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">updateVal</span><span class="p">(</span><span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">data</span><span class="p">,</span><span class="s1">&#39;starty&#39;</span><span class="p">,</span><span class="nx">_starty</span><span class="p">,</span><span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">);</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">updateVal</span><span class="p">(</span><span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">data</span><span class="p">,</span><span class="s1">&#39;stopx&#39;</span> <span class="p">,</span><span class="nx">_stopx</span> <span class="p">,</span><span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">);</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">updateVal</span><span class="p">(</span><span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">data</span><span class="p">,</span><span class="s1">&#39;stopy&#39;</span> <span class="p">,</span><span class="nx">_stopy</span> <span class="p">,</span><span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">);</span>

        <span class="k">this</span><span class="p">.</span><span class="nx">updateLoops</span><span class="p">(</span><span class="nx">_startx</span><span class="p">,</span><span class="nx">_starty</span><span class="p">,</span><span class="nx">_stopx</span><span class="p">,</span><span class="nx">_stopy</span><span class="p">);</span>

    <span class="p">},</span>
    <span class="nx">newLoop</span><span class="o">:</span><span class="kd">function</span><span class="p">(</span><span class="nx">title</span><span class="p">){</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span><span class="nx">startx</span><span class="o">:</span><span class="kc">undefined</span><span class="p">,</span><span class="nx">starty</span><span class="o">:</span><span class="k">this</span><span class="p">.</span><span class="nx">verticalPos</span><span class="p">,</span><span class="nx">stopx</span><span class="o">:</span><span class="kc">undefined</span><span class="p">,</span><span class="nx">stopy</span><span class="o">:</span><span class="kc">undefined</span><span class="p">,</span> <span class="nx">title</span><span class="o">:</span><span class="nx">title</span><span class="p">});</span>
    <span class="p">},</span>
    <span class="nx">endLoop</span><span class="o">:</span><span class="kd">function</span><span class="p">(){</span>
        <span class="kd">var</span> <span class="nx">loop</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">pop</span><span class="p">();</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-11" id="section-11">&#182;</a>
</div>
<p>loop.stopy =  exports.bounds.getVerticalPos();</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="k">return</span> <span class="nx">loop</span><span class="p">;</span>
    <span class="p">},</span>
    <span class="nx">addElseToLoop</span><span class="o">:</span><span class="kd">function</span><span class="p">(</span><span class="nx">message</span><span class="p">){</span>
        <span class="kd">var</span> <span class="nx">loop</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">pop</span><span class="p">();</span>
        <span class="nx">loop</span><span class="p">.</span><span class="nx">elsey</span> <span class="o">=</span>  <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">getVerticalPos</span><span class="p">();</span>
        <span class="nx">loop</span><span class="p">.</span><span class="nx">elseText</span> <span class="o">=</span> <span class="nx">message</span><span class="p">;</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">list</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">loop</span><span class="p">);</span>
    <span class="p">},</span>
    <span class="nx">bumpVerticalPos</span><span class="o">:</span><span class="kd">function</span><span class="p">(</span><span class="nx">bump</span><span class="p">){</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">verticalPos</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">verticalPos</span> <span class="o">+</span> <span class="nx">bump</span><span class="p">;</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">stopy</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">verticalPos</span><span class="p">;</span>
    <span class="p">},</span>
    <span class="nx">getVerticalPos</span><span class="o">:</span><span class="kd">function</span><span class="p">(){</span>
        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">verticalPos</span><span class="p">;</span>
    <span class="p">},</span>
    <span class="nx">getBounds</span><span class="o">:</span><span class="kd">function</span><span class="p">(){</span>
        <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">};</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-12" id="section-12">&#182;</a>
</div>
<div class="dox">
  <div class="summary"><p>Draws an actor in the diagram with the attaced line</p>

  </div>
  <div class="body">
  </div>
  <div class="details">
    <div class="dox_tag_title">Params</div>
    <div class="dox_tag_detail">
      <span class="dox_tag_name">center</span>
      <span><ul>
<li>The center of the the actor</li>
</ul>
</span>
    </div>
    <div class="dox_tag_detail">
      <span class="dox_tag_name">pos</span>
      <span>The position if the actor in the liost of actors
</span>
    </div>
    <div class="dox_tag_detail">
      <span class="dox_tag_name">description</span>
      <span>The text in the box
</span>
    </div>
  </div>
</div>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
<span class="kd">var</span> <span class="nx">drawNote</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">elem</span><span class="p">,</span> <span class="nx">startx</span><span class="p">,</span> <span class="nx">verticalPos</span><span class="p">,</span> <span class="nx">msg</span><span class="p">){</span>
    <span class="kd">var</span> <span class="nx">rect</span> <span class="o">=</span> <span class="nx">svgDraw</span><span class="p">.</span><span class="nx">getNoteRect</span><span class="p">();</span>
    <span class="nx">rect</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nx">startx</span><span class="p">;</span>
    <span class="nx">rect</span><span class="p">.</span><span class="nx">y</span> <span class="o">=</span> <span class="nx">verticalPos</span><span class="p">;</span>
    <span class="nx">rect</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">width</span><span class="p">;</span>
    <span class="nx">rect</span><span class="p">.</span><span class="kr">class</span> <span class="o">=</span> <span class="s1">&#39;note&#39;</span><span class="p">;</span>

    <span class="kd">var</span> <span class="nx">g</span> <span class="o">=</span> <span class="nx">elem</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s1">&#39;g&#39;</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">rectElem</span> <span class="o">=</span> <span class="nx">svgDraw</span><span class="p">.</span><span class="nx">drawRect</span><span class="p">(</span><span class="nx">g</span><span class="p">,</span> <span class="nx">rect</span><span class="p">);</span>

    <span class="kd">var</span> <span class="nx">textObj</span> <span class="o">=</span> <span class="nx">svgDraw</span><span class="p">.</span><span class="nx">getTextObj</span><span class="p">();</span>
    <span class="nx">textObj</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nx">startx</span><span class="p">;</span>
    <span class="nx">textObj</span><span class="p">.</span><span class="nx">y</span> <span class="o">=</span> <span class="nx">verticalPos</span><span class="o">-</span><span class="mi">13</span><span class="p">;</span>
    <span class="nx">textObj</span><span class="p">.</span><span class="nx">textMargin</span> <span class="o">=</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">noteMargin</span><span class="p">;</span>
    <span class="nx">textObj</span><span class="p">.</span><span class="nx">dy</span> <span class="o">=</span> <span class="s1">&#39;1em&#39;</span><span class="p">;</span>
    <span class="nx">textObj</span><span class="p">.</span><span class="nx">text</span> <span class="o">=</span> <span class="nx">msg</span><span class="p">.</span><span class="nx">message</span><span class="p">;</span>
    <span class="nx">textObj</span><span class="p">.</span><span class="kr">class</span> <span class="o">=</span> <span class="s1">&#39;noteText&#39;</span><span class="p">;</span>

    <span class="kd">var</span> <span class="nx">textElem</span> <span class="o">=</span> <span class="nx">svgDraw</span><span class="p">.</span><span class="nx">drawText</span><span class="p">(</span><span class="nx">g</span><span class="p">,</span><span class="nx">textObj</span><span class="p">,</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">width</span><span class="o">-</span><span class="nx">conf</span><span class="p">.</span><span class="nx">noteMargin</span><span class="p">);</span>

    <span class="kd">var</span> <span class="nx">textHeight</span> <span class="o">=</span> <span class="nx">textElem</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="mi">0</span><span class="p">].</span><span class="nx">getBBox</span><span class="p">().</span><span class="nx">height</span><span class="p">;</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">textHeight</span> <span class="o">&gt;</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">width</span><span class="p">){</span>
        <span class="nx">textElem</span><span class="p">.</span><span class="nx">remove</span><span class="p">();</span>
        <span class="nx">g</span> <span class="o">=</span> <span class="nx">elem</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">&quot;g&quot;</span><span class="p">);</span>
        
        <span class="nx">textElem</span> <span class="o">=</span> <span class="nx">svgDraw</span><span class="p">.</span><span class="nx">drawText</span><span class="p">(</span><span class="nx">g</span><span class="p">,</span><span class="nx">textObj</span><span class="p">,</span> <span class="mi">2</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">width</span><span class="p">);</span>
        <span class="nx">textHeight</span> <span class="o">=</span> <span class="nx">textElem</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="mi">0</span><span class="p">].</span><span class="nx">getBBox</span><span class="p">().</span><span class="nx">height</span><span class="p">;</span>
        <span class="nx">rectElem</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;width&#39;</span><span class="p">,</span><span class="mi">2</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">width</span><span class="p">);</span>
        <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">insert</span><span class="p">(</span><span class="nx">startx</span><span class="p">,</span> <span class="nx">verticalPos</span><span class="p">,</span> <span class="nx">startx</span> <span class="o">+</span> <span class="mi">2</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span>  <span class="nx">verticalPos</span> <span class="o">+</span> <span class="mi">2</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">noteMargin</span> <span class="o">+</span> <span class="nx">textHeight</span><span class="p">);</span>
    <span class="p">}</span><span class="k">else</span><span class="p">{</span>
        <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">insert</span><span class="p">(</span><span class="nx">startx</span><span class="p">,</span> <span class="nx">verticalPos</span><span class="p">,</span> <span class="nx">startx</span> <span class="o">+</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span>  <span class="nx">verticalPos</span> <span class="o">+</span> <span class="mi">2</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">noteMargin</span> <span class="o">+</span> <span class="nx">textHeight</span><span class="p">);</span>
    <span class="p">}</span>

    <span class="nx">rectElem</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;height&#39;</span><span class="p">,</span><span class="nx">textHeight</span><span class="o">+</span> <span class="mi">2</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">noteMargin</span><span class="p">);</span>
    <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">bumpVerticalPos</span><span class="p">(</span><span class="nx">textHeight</span><span class="o">+</span> <span class="mi">2</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">noteMargin</span><span class="p">);</span>
<span class="p">};</span>



</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-13" id="section-13">&#182;</a>
</div>
<div class="dox">
  <div class="summary"><p>Draws a message</p>

  </div>
  <div class="body">
  </div>
  <div class="details">
    <div class="dox_tag_title">Params</div>
    <div class="dox_tag_detail">
      <span class="dox_tag_name">elem</span>
    </div>
    <div class="dox_tag_detail">
      <span class="dox_tag_name">startx</span>
    </div>
    <div class="dox_tag_detail">
      <span class="dox_tag_name">stopx</span>
    </div>
    <div class="dox_tag_detail">
      <span class="dox_tag_name">verticalPos</span>
    </div>
    <div class="dox_tag_detail">
      <span class="dox_tag_name">txtCenter</span>
    </div>
    <div class="dox_tag_detail">
      <span class="dox_tag_name">msg
</span>
    </div>
  </div>
</div>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
<span class="kd">var</span> <span class="nx">drawMessage</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">elem</span><span class="p">,</span> <span class="nx">startx</span><span class="p">,</span> <span class="nx">stopx</span><span class="p">,</span> <span class="nx">verticalPos</span><span class="p">,</span> <span class="nx">msg</span><span class="p">){</span>
    <span class="kd">var</span> <span class="nx">g</span> <span class="o">=</span> <span class="nx">elem</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">&quot;g&quot;</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">txtCenter</span> <span class="o">=</span> <span class="nx">startx</span> <span class="o">+</span> <span class="p">(</span><span class="nx">stopx</span><span class="o">-</span><span class="nx">startx</span><span class="p">)</span><span class="o">/</span><span class="mi">2</span><span class="p">;</span>

    <span class="kd">var</span> <span class="nx">textElem</span> <span class="o">=</span> <span class="nx">g</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">&quot;text&quot;</span><span class="p">)</span>      <span class="c1">// text label for the x axis</span>
        <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;x&quot;</span><span class="p">,</span> <span class="nx">txtCenter</span><span class="p">)</span>
        <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;y&quot;</span><span class="p">,</span> <span class="nx">verticalPos</span> <span class="o">-</span> <span class="mi">7</span><span class="p">)</span>
        <span class="p">.</span><span class="nx">style</span><span class="p">(</span><span class="s2">&quot;text-anchor&quot;</span><span class="p">,</span> <span class="s2">&quot;middle&quot;</span><span class="p">)</span>
        <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;class&quot;</span><span class="p">,</span> <span class="s2">&quot;messageText&quot;</span><span class="p">)</span>
        <span class="p">.</span><span class="nx">text</span><span class="p">(</span><span class="nx">msg</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>

    <span class="kd">var</span> <span class="nx">textWidth</span><span class="p">;</span>

    <span class="k">if</span><span class="p">(</span><span class="k">typeof</span> <span class="nx">textElem</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="mi">0</span><span class="p">].</span><span class="nx">getBBox</span> <span class="o">!==</span> <span class="s1">&#39;undefined&#39;</span><span class="p">){</span>
        <span class="nx">textWidth</span> <span class="o">=</span> <span class="nx">textElem</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="mi">0</span><span class="p">].</span><span class="nx">getBBox</span><span class="p">().</span><span class="nx">width</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span><span class="p">{</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-14" id="section-14">&#182;</a>
</div>
<p>textWidth = getBBox(textElem).width; //.getComputedTextLength()</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="nx">textWidth</span> <span class="o">=</span> <span class="nx">textElem</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="mi">0</span><span class="p">].</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>  

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-15" id="section-15">&#182;</a>
</div>
<p>textWidth = textElem[0][0].getComputedTextLength();  </p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="p">}</span>

    <span class="kd">var</span> <span class="nx">line</span><span class="p">;</span>

    <span class="k">if</span><span class="p">(</span><span class="nx">startx</span><span class="o">===</span><span class="nx">stopx</span><span class="p">){</span>
        <span class="nx">line</span>  <span class="o">=</span> <span class="nx">g</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">&quot;path&quot;</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;d&#39;</span><span class="p">,</span> <span class="s1">&#39;M &#39;</span> <span class="o">+</span><span class="nx">startx</span><span class="o">+</span> <span class="s1">&#39;,&#39;</span><span class="o">+</span><span class="nx">verticalPos</span><span class="o">+</span><span class="s1">&#39; C &#39;</span> <span class="o">+</span><span class="p">(</span><span class="nx">startx</span><span class="o">+</span><span class="mi">60</span><span class="p">)</span><span class="o">+</span> <span class="s1">&#39;,&#39;</span><span class="o">+</span><span class="p">(</span><span class="nx">verticalPos</span><span class="o">-</span><span class="mi">10</span><span class="p">)</span><span class="o">+</span><span class="s1">&#39; &#39;</span> <span class="o">+</span><span class="p">(</span><span class="nx">startx</span><span class="o">+</span><span class="mi">60</span><span class="p">)</span><span class="o">+</span> <span class="s1">&#39;,&#39;</span> <span class="o">+</span>
            <span class="p">(</span><span class="nx">verticalPos</span><span class="o">+</span><span class="mi">30</span><span class="p">)</span><span class="o">+</span><span class="s1">&#39; &#39;</span> <span class="o">+</span><span class="nx">startx</span><span class="o">+</span> <span class="s1">&#39;,&#39;</span><span class="o">+</span><span class="p">(</span><span class="nx">verticalPos</span><span class="o">+</span><span class="mi">20</span><span class="p">));</span>

        <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">bumpVerticalPos</span><span class="p">(</span><span class="mi">30</span><span class="p">);</span>
        <span class="kd">var</span> <span class="nx">dx</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">max</span><span class="p">(</span><span class="nx">textWidth</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span><span class="mi">100</span><span class="p">);</span>
        <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">insert</span><span class="p">(</span><span class="nx">startx</span><span class="o">-</span><span class="nx">dx</span><span class="p">,</span> <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">getVerticalPos</span><span class="p">()</span> <span class="o">-</span><span class="mi">10</span><span class="p">,</span> <span class="nx">stopx</span><span class="o">+</span><span class="nx">dx</span><span class="p">,</span>  <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">getVerticalPos</span><span class="p">());</span>
    <span class="p">}</span><span class="k">else</span><span class="p">{</span>
        <span class="nx">line</span> <span class="o">=</span> <span class="nx">g</span><span class="p">.</span><span class="nx">append</span><span class="p">(</span><span class="s2">&quot;line&quot;</span><span class="p">);</span>
        <span class="nx">line</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;x1&quot;</span><span class="p">,</span> <span class="nx">startx</span><span class="p">);</span>
        <span class="nx">line</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;y1&quot;</span><span class="p">,</span> <span class="nx">verticalPos</span><span class="p">);</span>
        <span class="nx">line</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;x2&quot;</span><span class="p">,</span> <span class="nx">stopx</span><span class="p">);</span>
        <span class="nx">line</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;y2&quot;</span><span class="p">,</span> <span class="nx">verticalPos</span><span class="p">);</span>
        <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">insert</span><span class="p">(</span><span class="nx">startx</span><span class="p">,</span> <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">getVerticalPos</span><span class="p">()</span> <span class="o">-</span><span class="mi">10</span><span class="p">,</span> <span class="nx">stopx</span><span class="p">,</span>  <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">getVerticalPos</span><span class="p">());</span>
    <span class="p">}</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-16" id="section-16">&#182;</a>
</div>
<p>Make an SVG Container
Draw the line</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="k">if</span> <span class="p">(</span><span class="nx">msg</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="nx">sq</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">LINETYPE</span><span class="p">.</span><span class="nx">DOTTED</span> <span class="o">||</span> <span class="nx">msg</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="nx">sq</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">LINETYPE</span><span class="p">.</span><span class="nx">DOTTED_CROSS</span> <span class="o">||</span> <span class="nx">msg</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="nx">sq</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">LINETYPE</span><span class="p">.</span><span class="nx">DOTTED_OPEN</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">line</span><span class="p">.</span><span class="nx">style</span><span class="p">(</span><span class="s2">&quot;stroke-dasharray&quot;</span><span class="p">,</span> <span class="p">(</span><span class="s2">&quot;3, 3&quot;</span><span class="p">));</span>
        <span class="nx">line</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;class&quot;</span><span class="p">,</span> <span class="s2">&quot;messageLine1&quot;</span><span class="p">);</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="p">{</span>
        <span class="nx">line</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;class&quot;</span><span class="p">,</span> <span class="s2">&quot;messageLine0&quot;</span><span class="p">);</span>
    <span class="p">}</span>

    <span class="nx">line</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;stroke-width&quot;</span><span class="p">,</span> <span class="mi">2</span><span class="p">);</span>
    <span class="nx">line</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;stroke&quot;</span><span class="p">,</span> <span class="s2">&quot;black&quot;</span><span class="p">);</span>
    <span class="nx">line</span><span class="p">.</span><span class="nx">style</span><span class="p">(</span><span class="s2">&quot;fill&quot;</span><span class="p">,</span> <span class="s2">&quot;none&quot;</span><span class="p">);</span>     <span class="c1">// remove any fill colour</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">msg</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="nx">sq</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">LINETYPE</span><span class="p">.</span><span class="nx">SOLID</span> <span class="o">||</span> <span class="nx">msg</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="nx">sq</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">LINETYPE</span><span class="p">.</span><span class="nx">DOTTED</span><span class="p">){</span>
        <span class="nx">line</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;marker-end&quot;</span><span class="p">,</span> <span class="s2">&quot;url(#arrowhead)&quot;</span><span class="p">);</span>
    <span class="p">}</span>

    <span class="k">if</span> <span class="p">(</span><span class="nx">msg</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="nx">sq</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">LINETYPE</span><span class="p">.</span><span class="nx">SOLID_CROSS</span> <span class="o">||</span> <span class="nx">msg</span><span class="p">.</span><span class="nx">type</span> <span class="o">===</span> <span class="nx">sq</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">LINETYPE</span><span class="p">.</span><span class="nx">DOTTED_CROSS</span><span class="p">){</span>
        <span class="nx">line</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;marker-end&quot;</span><span class="p">,</span> <span class="s2">&quot;url(#crosshead)&quot;</span><span class="p">);</span>
    <span class="p">}</span>

<span class="p">};</span>

<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="p">.</span><span class="nx">drawActors</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">diagram</span><span class="p">,</span> <span class="nx">actors</span><span class="p">,</span> <span class="nx">actorKeys</span><span class="p">,</span><span class="nx">verticalPos</span><span class="p">){</span>
    <span class="kd">var</span> <span class="nx">i</span><span class="p">;</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-17" id="section-17">&#182;</a>
</div>
<p>Draw the actors</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="k">for</span><span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o">&lt;</span><span class="nx">actorKeys</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
        <span class="kd">var</span> <span class="nx">key</span> <span class="o">=</span> <span class="nx">actorKeys</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-18" id="section-18">&#182;</a>
</div>
<p>Add some rendering data to the object</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="nx">actors</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">x</span> <span class="o">=</span> <span class="nx">i</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">actorMargin</span> <span class="o">+</span><span class="nx">i</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">width</span><span class="p">;</span>
        <span class="nx">actors</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">y</span> <span class="o">=</span> <span class="nx">verticalPos</span><span class="p">;</span>
        <span class="nx">actors</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">width</span> <span class="o">=</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">diagramMarginY</span><span class="p">;</span>
        <span class="nx">actors</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">height</span> <span class="o">=</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">diagramMarginY</span><span class="p">;</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-19" id="section-19">&#182;</a>
</div>
<p>Draw the box with the attached line</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="nx">svgDraw</span><span class="p">.</span><span class="nx">drawActor</span><span class="p">(</span><span class="nx">diagram</span><span class="p">,</span> <span class="nx">actors</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">x</span><span class="p">,</span> <span class="nx">verticalPos</span><span class="p">,</span> <span class="nx">actors</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">description</span><span class="p">,</span> <span class="nx">conf</span><span class="p">);</span>
        <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">insert</span><span class="p">(</span><span class="nx">actors</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">x</span><span class="p">,</span> <span class="nx">verticalPos</span><span class="p">,</span> <span class="nx">actors</span><span class="p">[</span><span class="nx">key</span><span class="p">].</span><span class="nx">x</span> <span class="o">+</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">height</span><span class="p">);</span>

    <span class="p">}</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-20" id="section-20">&#182;</a>
</div>
<p>Add a margin between the actor boxes and the first arrow
exports.bounds.bumpVerticalPos(conf.height+conf.messageMargin);</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">bumpVerticalPos</span><span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">height</span><span class="p">);</span>
<span class="p">};</span>


<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="p">.</span><span class="nx">setConf</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">cnf</span><span class="p">){</span>
    <span class="kd">var</span> <span class="nx">keys</span> <span class="o">=</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="nx">cnf</span><span class="p">);</span>

    <span class="nx">keys</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">key</span><span class="p">){</span>
        <span class="nx">conf</span><span class="p">[</span><span class="nx">key</span><span class="p">]</span> <span class="o">=</span> <span class="nx">cnf</span><span class="p">[</span><span class="nx">key</span><span class="p">];</span>
    <span class="p">});</span>
<span class="p">};</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-21" id="section-21">&#182;</a>
</div>
<div class="dox">
  <div class="summary"><p>Draws a flowchart in the tag with id: id based on the graph definition in text.</p>

  </div>
  <div class="body">
  </div>
  <div class="details">
    <div class="dox_tag_title">Params</div>
    <div class="dox_tag_detail">
      <span class="dox_tag_name">text</span>
    </div>
    <div class="dox_tag_detail">
      <span class="dox_tag_name">id
</span>
    </div>
  </div>
</div>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
<span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="p">.</span><span class="nx">draw</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">text</span><span class="p">,</span> <span class="nx">id</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">sq</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">clear</span><span class="p">();</span>
    <span class="nx">sq</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">text</span><span class="o">+</span><span class="s1">&#39;\n&#39;</span><span class="p">);</span>

    <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">init</span><span class="p">();</span>
    <span class="kd">var</span> <span class="nx">diagram</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">select</span><span class="p">(</span><span class="s1">&#39;#&#39;</span><span class="o">+</span><span class="nx">id</span><span class="p">);</span>

    <span class="kd">var</span> <span class="nx">startx</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">stopx</span><span class="p">;</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-22" id="section-22">&#182;</a>
</div>
<p>Fetch data from the parsing</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="kd">var</span> <span class="nx">actors</span> <span class="o">=</span> <span class="nx">sq</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">getActors</span><span class="p">();</span>
    <span class="kd">var</span> <span class="nx">actorKeys</span> <span class="o">=</span> <span class="nx">sq</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">getActorKeys</span><span class="p">();</span>
    <span class="kd">var</span> <span class="nx">messages</span> <span class="o">=</span> <span class="nx">sq</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">getMessages</span><span class="p">();</span>
    <span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="p">.</span><span class="nx">drawActors</span><span class="p">(</span><span class="nx">diagram</span><span class="p">,</span> <span class="nx">actors</span><span class="p">,</span> <span class="nx">actorKeys</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-23" id="section-23">&#182;</a>
</div>
<p>The arrow head definition is attached to the svg once</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">svgDraw</span><span class="p">.</span><span class="nx">insertArrowHead</span><span class="p">(</span><span class="nx">diagram</span><span class="p">);</span>
    <span class="nx">svgDraw</span><span class="p">.</span><span class="nx">insertArrowCrossHead</span><span class="p">(</span><span class="nx">diagram</span><span class="p">);</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-24" id="section-24">&#182;</a>
</div>
<p>Draw the messages/signals</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">messages</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">msg</span><span class="p">){</span>
        <span class="kd">var</span> <span class="nx">loopData</span><span class="p">;</span>

        <span class="k">switch</span><span class="p">(</span><span class="nx">msg</span><span class="p">.</span><span class="nx">type</span><span class="p">){</span>
            <span class="k">case</span> <span class="nx">sq</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">LINETYPE</span><span class="p">.</span><span class="nx">NOTE</span><span class="o">:</span>
                <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">bumpVerticalPos</span><span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span><span class="p">);</span>

                <span class="nx">startx</span> <span class="o">=</span> <span class="nx">actors</span><span class="p">[</span><span class="nx">msg</span><span class="p">.</span><span class="nx">from</span><span class="p">].</span><span class="nx">x</span><span class="p">;</span>
                <span class="nx">stopx</span> <span class="o">=</span> <span class="nx">actors</span><span class="p">[</span><span class="nx">msg</span><span class="p">.</span><span class="nx">to</span><span class="p">].</span><span class="nx">x</span><span class="p">;</span>

                <span class="k">if</span><span class="p">(</span><span class="nx">msg</span><span class="p">.</span><span class="nx">placement</span> <span class="o">!==</span> <span class="mi">0</span><span class="p">){</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-25" id="section-25">&#182;</a>
</div>
<p>Right of</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                    <span class="nx">drawNote</span><span class="p">(</span><span class="nx">diagram</span><span class="p">,</span> <span class="nx">startx</span> <span class="o">+</span> <span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">width</span> <span class="o">+</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">actorMargin</span><span class="p">)</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span> <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">getVerticalPos</span><span class="p">(),</span> <span class="nx">msg</span><span class="p">);</span>

                <span class="p">}</span><span class="k">else</span><span class="p">{</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-26" id="section-26">&#182;</a>
</div>
<p>Left of</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                    <span class="nx">drawNote</span><span class="p">(</span><span class="nx">diagram</span><span class="p">,</span> <span class="nx">startx</span> <span class="o">-</span> <span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">width</span> <span class="o">+</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">actorMargin</span><span class="p">)</span><span class="o">/</span><span class="mi">2</span><span class="p">,</span> <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">getVerticalPos</span><span class="p">(),</span> <span class="nx">msg</span><span class="p">);</span>
                <span class="p">}</span>
                <span class="k">break</span><span class="p">;</span>
            <span class="k">case</span> <span class="nx">sq</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">LINETYPE</span><span class="p">.</span><span class="nx">LOOP_START</span><span class="o">:</span>
                <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">bumpVerticalPos</span><span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span><span class="p">);</span>
                <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">newLoop</span><span class="p">(</span><span class="nx">msg</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
                <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">bumpVerticalPos</span><span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span> <span class="o">+</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">boxTextMargin</span><span class="p">);</span>
                <span class="k">break</span><span class="p">;</span>
            <span class="k">case</span> <span class="nx">sq</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">LINETYPE</span><span class="p">.</span><span class="nx">LOOP_END</span><span class="o">:</span>
                <span class="nx">loopData</span> <span class="o">=</span> <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">endLoop</span><span class="p">();</span>

                <span class="nx">svgDraw</span><span class="p">.</span><span class="nx">drawLoop</span><span class="p">(</span><span class="nx">diagram</span><span class="p">,</span> <span class="nx">loopData</span><span class="p">,</span><span class="s1">&#39;loop&#39;</span><span class="p">,</span> <span class="nx">conf</span><span class="p">);</span>
                <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">bumpVerticalPos</span><span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span><span class="p">);</span>
                <span class="k">break</span><span class="p">;</span>
            <span class="k">case</span> <span class="nx">sq</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">LINETYPE</span><span class="p">.</span><span class="nx">OPT_START</span><span class="o">:</span>
                <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">bumpVerticalPos</span><span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span><span class="p">);</span>
                <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">newLoop</span><span class="p">(</span><span class="nx">msg</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
                <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">bumpVerticalPos</span><span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span> <span class="o">+</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">boxTextMargin</span><span class="p">);</span>
                <span class="k">break</span><span class="p">;</span>
            <span class="k">case</span> <span class="nx">sq</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">LINETYPE</span><span class="p">.</span><span class="nx">OPT_END</span><span class="o">:</span>
                <span class="nx">loopData</span> <span class="o">=</span> <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">endLoop</span><span class="p">();</span>

                <span class="nx">svgDraw</span><span class="p">.</span><span class="nx">drawLoop</span><span class="p">(</span><span class="nx">diagram</span><span class="p">,</span> <span class="nx">loopData</span><span class="p">,</span> <span class="s1">&#39;opt&#39;</span><span class="p">,</span> <span class="nx">conf</span><span class="p">);</span>
                <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">bumpVerticalPos</span><span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span><span class="p">);</span>
                <span class="k">break</span><span class="p">;</span>
            <span class="k">case</span> <span class="nx">sq</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">LINETYPE</span><span class="p">.</span><span class="nx">ALT_START</span><span class="o">:</span>
                <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">bumpVerticalPos</span><span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span><span class="p">);</span>
                <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">newLoop</span><span class="p">(</span><span class="nx">msg</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
                <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">bumpVerticalPos</span><span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span> <span class="o">+</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">boxTextMargin</span><span class="p">);</span>
                <span class="k">break</span><span class="p">;</span>
            <span class="k">case</span> <span class="nx">sq</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">LINETYPE</span><span class="p">.</span><span class="nx">ALT_ELSE</span><span class="o">:</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-27" id="section-27">&#182;</a>
</div>
<p>exports.drawLoop(diagram, loopData);</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
                <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">bumpVerticalPos</span><span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span><span class="p">);</span>
                <span class="nx">loopData</span> <span class="o">=</span> <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">addElseToLoop</span><span class="p">(</span><span class="nx">msg</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
                <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">bumpVerticalPos</span><span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span><span class="p">);</span>
                <span class="k">break</span><span class="p">;</span>
            <span class="k">case</span> <span class="nx">sq</span><span class="p">.</span><span class="nx">yy</span><span class="p">.</span><span class="nx">LINETYPE</span><span class="p">.</span><span class="nx">ALT_END</span><span class="o">:</span>
                <span class="nx">loopData</span> <span class="o">=</span> <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">endLoop</span><span class="p">();</span>

                <span class="nx">svgDraw</span><span class="p">.</span><span class="nx">drawLoop</span><span class="p">(</span><span class="nx">diagram</span><span class="p">,</span> <span class="nx">loopData</span><span class="p">,</span><span class="s1">&#39;alt&#39;</span><span class="p">,</span> <span class="nx">conf</span><span class="p">);</span>
                <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">bumpVerticalPos</span><span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span><span class="p">);</span>
                <span class="k">break</span><span class="p">;</span>
            <span class="k">default</span><span class="o">:</span>
                <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">bumpVerticalPos</span><span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">messageMargin</span><span class="p">);</span>
                <span class="nx">startx</span> <span class="o">=</span> <span class="nx">actors</span><span class="p">[</span><span class="nx">msg</span><span class="p">.</span><span class="nx">from</span><span class="p">].</span><span class="nx">x</span> <span class="o">+</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">width</span><span class="o">/</span><span class="mi">2</span><span class="p">;</span>
                <span class="nx">stopx</span> <span class="o">=</span> <span class="nx">actors</span><span class="p">[</span><span class="nx">msg</span><span class="p">.</span><span class="nx">to</span><span class="p">].</span><span class="nx">x</span> <span class="o">+</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">width</span><span class="o">/</span><span class="mi">2</span><span class="p">;</span>

                <span class="nx">drawMessage</span><span class="p">(</span><span class="nx">diagram</span><span class="p">,</span> <span class="nx">startx</span><span class="p">,</span> <span class="nx">stopx</span><span class="p">,</span> <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">getVerticalPos</span><span class="p">(),</span> <span class="nx">msg</span><span class="p">);</span>

        <span class="p">}</span>
    <span class="p">});</span>

    <span class="k">if</span><span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">mirrorActors</span><span class="p">){</span>

</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-28" id="section-28">&#182;</a>
</div>
<p>Draw actors below diagram</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
        <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">bumpVerticalPos</span><span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span><span class="o">*</span><span class="mi">2</span><span class="p">);</span>
        <span class="nx">module</span><span class="p">.</span><span class="nx">exports</span><span class="p">.</span><span class="nx">drawActors</span><span class="p">(</span><span class="nx">diagram</span><span class="p">,</span> <span class="nx">actors</span><span class="p">,</span> <span class="nx">actorKeys</span><span class="p">,</span> <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">getVerticalPos</span><span class="p">());</span>
    <span class="p">}</span>

    <span class="kd">var</span> <span class="nx">box</span> <span class="o">=</span> <span class="nx">exports</span><span class="p">.</span><span class="nx">bounds</span><span class="p">.</span><span class="nx">getBounds</span><span class="p">();</span>


</pre></div>
        </td>
      </tr>
      <tr>
        <td class="docs">
<div class="pilwrap">
  <a class="pilcrow" href="#section-29" id="section-29">&#182;</a>
</div>
<p>Adjust line height of actor lines now that the height of the diagram is known</p>

        </td>
        <td class="code highlight"><div class="highlight"><pre>
    <span class="nx">log</span><span class="p">.</span><span class="nx">debug</span><span class="p">(</span><span class="s1">&#39;For line height fix Querying: #&#39;</span> <span class="o">+</span> <span class="nx">id</span> <span class="o">+</span> <span class="s1">&#39; .actor-line&#39;</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">actorLines</span> <span class="o">=</span> <span class="nx">d3</span><span class="p">.</span><span class="nx">selectAll</span><span class="p">(</span><span class="s1">&#39;#&#39;</span> <span class="o">+</span> <span class="nx">id</span> <span class="o">+</span> <span class="s1">&#39; .actor-line&#39;</span><span class="p">);</span>
    <span class="nx">actorLines</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;y2&#39;</span><span class="p">,</span><span class="nx">box</span><span class="p">.</span><span class="nx">stopy</span><span class="p">);</span>


    <span class="kd">var</span> <span class="nx">height</span> <span class="o">=</span> <span class="nx">box</span><span class="p">.</span><span class="nx">stopy</span> <span class="o">-</span> <span class="nx">box</span><span class="p">.</span><span class="nx">starty</span> <span class="o">+</span> <span class="mi">2</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">diagramMarginY</span><span class="p">;</span>

    <span class="k">if</span><span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">mirrorActors</span><span class="p">){</span>
        <span class="nx">height</span> <span class="o">=</span> <span class="nx">height</span> <span class="o">-</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">boxMargin</span> <span class="o">+</span> <span class="nx">conf</span><span class="p">.</span><span class="nx">bottomMarginAdj</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="kd">var</span> <span class="nx">width</span>  <span class="o">=</span> <span class="nx">box</span><span class="p">.</span><span class="nx">stopx</span><span class="o">-</span><span class="nx">box</span><span class="p">.</span><span class="nx">startx</span><span class="o">+</span><span class="mi">2</span><span class="o">*</span><span class="nx">conf</span><span class="p">.</span><span class="nx">diagramMarginX</span><span class="p">;</span>
    <span class="k">if</span><span class="p">(</span><span class="nx">conf</span><span class="p">.</span><span class="nx">useMaxWidth</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;height&quot;</span><span class="p">,</span> <span class="s1">&#39;100%&#39;</span><span class="p">);</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;width&quot;</span><span class="p">,</span> <span class="s1">&#39;100%&#39;</span><span class="p">);</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">&#39;style&#39;</span><span class="p">,</span> <span class="s1">&#39;max-width:&#39;</span> <span class="o">+</span> <span class="p">(</span><span class="nx">width</span><span class="p">)</span> <span class="o">+</span> <span class="s1">&#39;px;&#39;</span><span class="p">);</span>
    <span class="p">}</span><span class="k">else</span><span class="p">{</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;height&quot;</span><span class="p">,</span><span class="nx">height</span><span class="p">);</span>
        <span class="nx">diagram</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;width&quot;</span><span class="p">,</span> <span class="nx">width</span> <span class="p">);</span>
    <span class="p">}</span>
    <span class="nx">diagram</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s2">&quot;viewBox&quot;</span><span class="p">,</span> <span class="p">(</span><span class="nx">box</span><span class="p">.</span><span class="nx">startx</span><span class="o">-</span><span class="nx">conf</span><span class="p">.</span><span class="nx">diagramMarginX</span><span class="p">)</span> <span class="o">+</span> <span class="s1">&#39; -&#39;</span> <span class="o">+</span><span class="nx">conf</span><span class="p">.</span><span class="nx">diagramMarginY</span> <span class="o">+</span> <span class="s1">&#39; &#39;</span> <span class="o">+</span> <span class="nx">width</span> <span class="o">+</span> <span class="s1">&#39; &#39;</span> <span class="o">+</span> <span class="nx">height</span><span class="p">);</span>
<span class="p">};</span>
</pre></div>
        </td>
      </tr>
  </tbody>
</table>
  </div>
</body>
</html>