docs/dependencygraph.html
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>dependency graph</title>
<style>
.node:active path,
.node:hover path,
.node.current path,
.node:active polygon,
.node:hover polygon,
.node.current polygon {
stroke: fuchsia;
stroke-width: 2;
}
.edge:active path,
.edge:hover path,
.edge.current path,
.edge:active ellipse,
.edge:hover ellipse,
.edge.current ellipse {
stroke: url(#edgeGradient);
stroke-width: 3;
stroke-opacity: 1;
}
.edge:active polygon,
.edge:hover polygon,
.edge.current polygon {
stroke: fuchsia;
stroke-width: 3;
fill: fuchsia;
stroke-opacity: 1;
fill-opacity: 1;
}
.edge:active text,
.edge:hover text {
fill: fuchsia;
}
.cluster path {
stroke-width: 3;
}
.cluster:active path,
.cluster:hover path {
fill: #ffff0011;
}
div.hint {
background-color: #000000aa;
color: white;
font-family: Arial, Helvetica, sans-serif;
border-radius: 1rem;
position: fixed;
top: calc(50% - 4em);
right: calc(50% - 10em);
border: none;
padding: 1em 3em 1em 1em;
}
.hint button {
position: absolute;
font-weight: bolder;
right: 0.6em;
top: 0.6em;
color: inherit;
background-color: inherit;
border: 1px solid currentColor;
border-radius: 1em;
margin-left: 0.6em;
}
.hint a {
color: inherit;
}
#button_help {
color: white;
background-color: #00000011;
border-radius: 1em;
position: fixed;
top: 1em;
right: 1em;
font-size: 24pt;
font-weight: bolder;
width: 2em;
height: 2em;
border: none;
}
#button_help:hover {
cursor: pointer;
background-color: #00000077;
}
@media print {
#button_help {
display: none;
}
div.hint {
display: none;
}
}
</style>
</head>
<body>
<button id="button_help">?</button>
<div id="hints" class="hint" style="display: none">
<button id="close-hints">x</button>
<span id="hint-text"></span>
<ul>
<li><b>Hover</b> - highlight</li>
<li><b>Right-click</b> - pin highlight</li>
<li><b>ESC</b> - clear</li>
</ul>
</div>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 10.0.1 (20240210.2158)
-->
<!-- Title: dependency-cruiser output Pages: 1 -->
<svg width="697pt" height="496pt"
viewBox="0.00 0.00 697.25 496.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 492)">
<title>dependency-cruiser output</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-492 693.25,-492 693.25,4 -4,4"/>
<g id="clust1" class="cluster">
<title>cluster_node_modules</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M612.5,-8C612.5,-8 669.25,-8 669.25,-8 675.25,-8 681.25,-14 681.25,-20 681.25,-20 681.25,-108 681.25,-108 681.25,-114 675.25,-120 669.25,-120 669.25,-120 612.5,-120 612.5,-120 606.5,-120 600.5,-114 600.5,-108 600.5,-108 600.5,-20 600.5,-20 600.5,-14 606.5,-8 612.5,-8"/>
<text text-anchor="middle" x="640.88" y="-107.45" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">node_modules</text>
</g>
<g id="clust2" class="cluster">
<title>cluster_src</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M20,-24C20,-24 580.5,-24 580.5,-24 586.5,-24 592.5,-30 592.5,-36 592.5,-36 592.5,-468 592.5,-468 592.5,-474 586.5,-480 580.5,-480 580.5,-480 20,-480 20,-480 14,-480 8,-474 8,-468 8,-468 8,-36 8,-36 8,-30 14,-24 20,-24"/>
<text text-anchor="middle" x="300.25" y="-467.45" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">src</text>
</g>
<g id="clust3" class="cluster">
<title>cluster_src/script</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M28,-32C28,-32 572.5,-32 572.5,-32 578.5,-32 584.5,-38 584.5,-44 584.5,-44 584.5,-442 584.5,-442 584.5,-448 578.5,-454 572.5,-454 572.5,-454 28,-454 28,-454 22,-454 16,-448 16,-442 16,-442 16,-44 16,-44 16,-38 22,-32 28,-32"/>
<text text-anchor="middle" x="300.25" y="-441.45" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">script</text>
</g>
<g id="clust4" class="cluster">
<title>cluster_src/script/interpreter</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M146.25,-46C146.25,-46 564.5,-46 564.5,-46 570.5,-46 576.5,-52 576.5,-58 576.5,-58 576.5,-236 576.5,-236 576.5,-242 570.5,-248 564.5,-248 564.5,-248 146.25,-248 146.25,-248 140.25,-248 134.25,-242 134.25,-236 134.25,-236 134.25,-58 134.25,-58 134.25,-52 140.25,-46 146.25,-46"/>
<text text-anchor="middle" x="355.38" y="-235.45" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">interpreter</text>
</g>
<g id="clust5" class="cluster">
<title>cluster_src/script/utl</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M493.12,-256C493.12,-256 543.88,-256 543.88,-256 549.88,-256 555.88,-262 555.88,-268 555.88,-268 555.88,-416 555.88,-416 555.88,-422 549.88,-428 543.88,-428 543.88,-428 493.12,-428 493.12,-428 487.12,-428 481.12,-422 481.12,-416 481.12,-416 481.12,-268 481.12,-268 481.12,-262 487.12,-256 493.12,-256"/>
<text text-anchor="middle" x="518.5" y="-415.45" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">utl</text>
</g>
<!-- node_modules/codemirror -->
<g id="node1" class="node">
<title>node_modules/codemirror</title>
<g id="a_node1"><a xlink:href="https://www.npmjs.com/package/codemirror" xlink:title="codemirror">
<polygon fill="#c40b0a" fill-opacity="0.101961" stroke="black" points="671,-33.88 612.72,-33.88 610.75,-31.9 610.75,-16.12 669.03,-16.12 671,-18.1 671,-33.88"/>
<polyline fill="none" stroke="black" points="669.03,-31.9 610.75,-31.9"/>
<polyline fill="none" stroke="black" points="669.03,-31.9 669.03,-16.12"/>
<polyline fill="none" stroke="black" points="669.03,-31.9 671,-33.88"/>
<text text-anchor="start" x="618.75" y="-21.32" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#c40b0a">codemirror</text>
</a>
</g>
</g>
<!-- node_modules/mscgenjs -->
<g id="node2" class="node">
<title>node_modules/mscgenjs</title>
<g id="a_node2"><a xlink:href="https://www.npmjs.com/package/mscgenjs" xlink:title="mscgenjs">
<polygon fill="#c40b0a" fill-opacity="0.101961" stroke="black" points="668.38,-93.88 615.35,-93.88 613.38,-91.9 613.38,-76.12 666.4,-76.12 668.38,-78.1 668.38,-93.88"/>
<polyline fill="none" stroke="black" points="666.4,-91.9 613.38,-91.9"/>
<polyline fill="none" stroke="black" points="666.4,-91.9 666.4,-76.12"/>
<polyline fill="none" stroke="black" points="666.4,-91.9 668.38,-93.88"/>
<text text-anchor="start" x="621.38" y="-81.33" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#c40b0a">mscgenjs</text>
</a>
</g>
</g>
<!-- node_modules/query-string -->
<g id="node3" class="node">
<title>node_modules/query-string</title>
<g id="a_node3"><a xlink:href="https://www.npmjs.com/package/query-string" xlink:title="query-string">
<polygon fill="#c40b0a" fill-opacity="0.101961" stroke="black" points="673.25,-63.88 610.47,-63.88 608.5,-61.9 608.5,-46.12 671.28,-46.12 673.25,-48.1 673.25,-63.88"/>
<polyline fill="none" stroke="black" points="671.28,-61.9 608.5,-61.9"/>
<polyline fill="none" stroke="black" points="671.28,-61.9 671.28,-46.12"/>
<polyline fill="none" stroke="black" points="671.28,-61.9 673.25,-63.88"/>
<text text-anchor="start" x="616.5" y="-51.33" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#c40b0a">query-string</text>
</a>
</g>
</g>
<!-- src/script/interpreter/animator.js -->
<g id="node4" class="node">
<title>src/script/interpreter/animator.js</title>
<g id="a_node4"><a xlink:href="https://github.com/sverweij/mscgen_js/tree/develop/src/script/interpreter/animator.js" xlink:title="animator.js">
<path fill="#ffffcc" stroke="black" d="M440.21,-147.88C440.21,-147.88 391.04,-147.88 391.04,-147.88 388.08,-147.88 385.12,-144.92 385.12,-141.96 385.12,-141.96 385.12,-136.04 385.12,-136.04 385.12,-133.08 388.08,-130.12 391.04,-130.12 391.04,-130.12 440.21,-130.12 440.21,-130.12 443.17,-130.12 446.12,-133.08 446.12,-136.04 446.12,-136.04 446.12,-141.96 446.12,-141.96 446.12,-144.92 443.17,-147.88 440.21,-147.88"/>
<text text-anchor="start" x="393.12" y="-135.32" font-family="Helvetica,sans-Serif" font-size="9.00">animator.js</text>
</a>
</g>
</g>
<!-- src/script/interpreter/animator.js->node_modules/mscgenjs -->
<g id="edge3" class="edge">
<title>src/script/interpreter/animator.js->node_modules/mscgenjs</title>
<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M446.52,-134.56C508.32,-134.56 641.25,-134.56 641.25,-134.56 641.25,-134.56 641.25,-101.6 641.25,-101.6"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="643.35,-101.6 641.25,-95.6 639.15,-101.6 643.35,-101.6"/>
</g>
<!-- src/script/utl/domutl.js -->
<g id="node5" class="node">
<title>src/script/utl/domutl.js</title>
<g id="a_node5"><a xlink:href="https://github.com/sverweij/mscgen_js/tree/develop/src/script/utl/domutl.js" xlink:title="domutl.js">
<path fill="#ffffcc" stroke="black" d="M539.58,-281.88C539.58,-281.88 497.42,-281.88 497.42,-281.88 494.46,-281.88 491.5,-278.92 491.5,-275.96 491.5,-275.96 491.5,-270.04 491.5,-270.04 491.5,-267.08 494.46,-264.12 497.42,-264.12 497.42,-264.12 539.58,-264.12 539.58,-264.12 542.54,-264.12 545.5,-267.08 545.5,-270.04 545.5,-270.04 545.5,-275.96 545.5,-275.96 545.5,-278.92 542.54,-281.88 539.58,-281.88"/>
<text text-anchor="start" x="500.12" y="-269.32" font-family="Helvetica,sans-Serif" font-size="9.00">domutl.js</text>
</a>
</g>
</g>
<!-- src/script/interpreter/animator.js->src/script/utl/domutl.js -->
<g id="edge1" class="edge">
<title>src/script/interpreter/animator.js->src/script/utl/domutl.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M446.61,-143.44C448.26,-143.44 449.25,-143.44 449.25,-143.44 449.25,-143.44 449.25,-271.23 449.25,-271.23 449.25,-271.23 482.1,-271.23 482.1,-271.23"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="482.1,-273.33 488.1,-271.23 482.1,-269.13 482.1,-273.33"/>
</g>
<!-- src/script/utl/gaga.js -->
<g id="node6" class="node">
<title>src/script/utl/gaga.js</title>
<g id="a_node6"><a xlink:href="https://github.com/sverweij/mscgen_js/tree/develop/src/script/utl/gaga.js" xlink:title="gaga.js">
<path fill="#ffffcc" stroke="black" d="M539.58,-371.88C539.58,-371.88 497.42,-371.88 497.42,-371.88 494.46,-371.88 491.5,-368.92 491.5,-365.96 491.5,-365.96 491.5,-360.04 491.5,-360.04 491.5,-357.08 494.46,-354.12 497.42,-354.12 497.42,-354.12 539.58,-354.12 539.58,-354.12 542.54,-354.12 545.5,-357.08 545.5,-360.04 545.5,-360.04 545.5,-365.96 545.5,-365.96 545.5,-368.92 542.54,-371.88 539.58,-371.88"/>
<text text-anchor="start" x="503.5" y="-359.32" font-family="Helvetica,sans-Serif" font-size="9.00">gaga.js</text>
</a>
</g>
</g>
<!-- src/script/interpreter/animator.js->src/script/utl/gaga.js -->
<g id="edge2" class="edge">
<title>src/script/interpreter/animator.js->src/script/utl/gaga.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M446.46,-139C455.14,-139 462.25,-139 462.25,-139 462.25,-139 462.25,-356.66 462.25,-356.66 462.25,-356.66 482.01,-356.66 482.01,-356.66"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="482.01,-358.76 488.01,-356.66 482.01,-354.56 482.01,-358.76"/>
</g>
<!-- src/script/interpreter/editor-events.js -->
<g id="node7" class="node">
<title>src/script/interpreter/editor-events.js</title>
<g id="a_node7"><a xlink:href="https://github.com/sverweij/mscgen_js/tree/develop/src/script/interpreter/editor-events.js" xlink:title="editor-events.js">
<path fill="#ffffcc" stroke="black" d="M234.83,-191.88C234.83,-191.88 168.42,-191.88 168.42,-191.88 165.46,-191.88 162.5,-188.92 162.5,-185.96 162.5,-185.96 162.5,-180.04 162.5,-180.04 162.5,-177.08 165.46,-174.12 168.42,-174.12 168.42,-174.12 234.83,-174.12 234.83,-174.12 237.79,-174.12 240.75,-177.08 240.75,-180.04 240.75,-180.04 240.75,-185.96 240.75,-185.96 240.75,-188.92 237.79,-191.88 234.83,-191.88"/>
<text text-anchor="start" x="170.5" y="-179.32" font-family="Helvetica,sans-Serif" font-size="9.00">editor-events.js</text>
</a>
</g>
</g>
<!-- src/script/interpreter/editor-events.js->node_modules/codemirror -->
<g id="edge7" class="edge">
<title>src/script/interpreter/editor-events.js->node_modules/codemirror</title>
<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M241.13,-180.68C244.26,-180.68 246.25,-180.68 246.25,-180.68 246.25,-180.68 246.25,-25 246.25,-25 246.25,-25 603.05,-25 603.05,-25"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="603.05,-27.1 609.05,-25 603.05,-22.9 603.05,-27.1"/>
</g>
<!-- src/script/interpreter/editor-events.js->src/script/utl/gaga.js -->
<g id="edge4" class="edge">
<title>src/script/interpreter/editor-events.js->src/script/utl/gaga.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M240.93,-186.28C253.51,-186.28 264.25,-186.28 264.25,-186.28 264.25,-186.28 264.25,-369.34 264.25,-369.34 264.25,-369.34 482.26,-369.34 482.26,-369.34"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="482.26,-371.44 488.26,-369.34 482.26,-367.24 482.26,-371.44"/>
</g>
<!-- src/script/utl/maps.js -->
<g id="node8" class="node">
<title>src/script/utl/maps.js</title>
<g id="a_node8"><a xlink:href="https://github.com/sverweij/mscgen_js/tree/develop/src/script/utl/maps.js" xlink:title="maps.js">
<path fill="#ffffcc" stroke="black" d="M539.58,-401.88C539.58,-401.88 497.42,-401.88 497.42,-401.88 494.46,-401.88 491.5,-398.92 491.5,-395.96 491.5,-395.96 491.5,-390.04 491.5,-390.04 491.5,-387.08 494.46,-384.12 497.42,-384.12 497.42,-384.12 539.58,-384.12 539.58,-384.12 542.54,-384.12 545.5,-387.08 545.5,-390.04 545.5,-390.04 545.5,-395.96 545.5,-395.96 545.5,-398.92 542.54,-401.88 539.58,-401.88"/>
<text text-anchor="start" x="502.75" y="-389.32" font-family="Helvetica,sans-Serif" font-size="9.00">maps.js</text>
</a>
</g>
</g>
<!-- src/script/interpreter/editor-events.js->src/script/utl/maps.js -->
<g id="edge5" class="edge">
<title>src/script/interpreter/editor-events.js->src/script/utl/maps.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M241,-189.07C253.08,-189.07 263.25,-189.07 263.25,-189.07 263.25,-189.07 263.25,-397.44 263.25,-397.44 263.25,-397.44 482.16,-397.44 482.16,-397.44"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="482.16,-399.54 488.16,-397.44 482.16,-395.34 482.16,-399.54"/>
</g>
<!-- src/script/interpreter/uistate.js -->
<g id="node9" class="node">
<title>src/script/interpreter/uistate.js</title>
<g id="a_node9"><a xlink:href="https://github.com/sverweij/mscgen_js/tree/develop/src/script/interpreter/uistate.js" xlink:title="uistate.js">
<path fill="#ffffcc" stroke="black" d="M339.46,-161.88C339.46,-161.88 297.29,-161.88 297.29,-161.88 294.33,-161.88 291.38,-158.92 291.38,-155.96 291.38,-155.96 291.38,-150.04 291.38,-150.04 291.38,-147.08 294.33,-144.12 297.29,-144.12 297.29,-144.12 339.46,-144.12 339.46,-144.12 342.42,-144.12 345.38,-147.08 345.38,-150.04 345.38,-150.04 345.38,-155.96 345.38,-155.96 345.38,-158.92 342.42,-161.88 339.46,-161.88"/>
<text text-anchor="start" x="300.38" y="-149.32" font-family="Helvetica,sans-Serif" font-size="9.00">uistate.js</text>
</a>
</g>
</g>
<!-- src/script/interpreter/editor-events.js->src/script/interpreter/uistate.js -->
<g id="edge6" class="edge">
<title>src/script/interpreter/editor-events.js->src/script/interpreter/uistate.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M241.11,-183.47C269.3,-183.47 302.25,-183.47 302.25,-183.47 302.25,-183.47 302.25,-171.34 302.25,-171.34"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="304.35,-171.34 302.25,-165.34 300.15,-171.34 304.35,-171.34"/>
</g>
<!-- src/script/interpreter/uistate.js->node_modules/mscgenjs -->
<g id="edge41" class="edge">
<title>src/script/interpreter/uistate.js->node_modules/mscgenjs</title>
<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M345.81,-153.72C359.53,-153.72 373.25,-153.72 373.25,-153.72 373.25,-153.72 373.25,-90.62 373.25,-90.62 373.25,-90.62 605.48,-90.62 605.48,-90.62"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="605.48,-92.73 611.48,-90.63 605.48,-88.53 605.48,-92.73"/>
</g>
<!-- src/script/interpreter/uistate.js->src/script/utl/domutl.js -->
<g id="edge36" class="edge">
<title>src/script/interpreter/uistate.js->src/script/utl/domutl.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M335.25,-162.15C335.25,-190.47 335.25,-274.77 335.25,-274.77 335.25,-274.77 482.04,-274.77 482.04,-274.77"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="482.04,-276.88 488.04,-274.78 482.04,-272.68 482.04,-276.88"/>
</g>
<!-- src/script/interpreter/uistate.js->src/script/utl/maps.js -->
<g id="edge38" class="edge">
<title>src/script/interpreter/uistate.js->src/script/utl/maps.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M313.25,-162.23C313.25,-205.79 313.25,-388.56 313.25,-388.56 313.25,-388.56 482.22,-388.56 482.22,-388.56"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="482.22,-390.66 488.22,-388.56 482.22,-386.46 482.22,-390.66"/>
</g>
<!-- src/script/utl/exporter.js -->
<g id="node14" class="node">
<title>src/script/utl/exporter.js</title>
<g id="a_node14"><a xlink:href="https://github.com/sverweij/mscgen_js/tree/develop/src/script/utl/exporter.js" xlink:title="exporter.js">
<path fill="#ffffcc" stroke="black" d="M541.96,-311.88C541.96,-311.88 495.04,-311.88 495.04,-311.88 492.08,-311.88 489.12,-308.92 489.12,-305.96 489.12,-305.96 489.12,-300.04 489.12,-300.04 489.12,-297.08 492.08,-294.12 495.04,-294.12 495.04,-294.12 541.96,-294.12 541.96,-294.12 544.92,-294.12 547.88,-297.08 547.88,-300.04 547.88,-300.04 547.88,-305.96 547.88,-305.96 547.88,-308.92 544.92,-311.88 541.96,-311.88"/>
<text text-anchor="start" x="497.12" y="-299.32" font-family="Helvetica,sans-Serif" font-size="9.00">exporter.js</text>
</a>
</g>
</g>
<!-- src/script/interpreter/uistate.js->src/script/utl/exporter.js -->
<g id="edge37" class="edge">
<title>src/script/interpreter/uistate.js->src/script/utl/exporter.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M324.25,-161.93C324.25,-194.23 324.25,-303 324.25,-303 324.25,-303 479.97,-303 479.97,-303"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="479.97,-305.1 485.97,-303 479.97,-300.9 479.97,-305.1"/>
</g>
<!-- src/script/interpreter/populate-lists.js -->
<g id="node18" class="node">
<title>src/script/interpreter/populate-lists.js</title>
<g id="a_node18"><a xlink:href="https://github.com/sverweij/mscgen_js/tree/develop/src/script/interpreter/populate-lists.js" xlink:title="populate-lists.js">
<path fill="#ffffcc" stroke="black" d="M449.58,-117.88C449.58,-117.88 381.67,-117.88 381.67,-117.88 378.71,-117.88 375.75,-114.92 375.75,-111.96 375.75,-111.96 375.75,-106.04 375.75,-106.04 375.75,-103.08 378.71,-100.12 381.67,-100.12 381.67,-100.12 449.58,-100.12 449.58,-100.12 452.54,-100.12 455.5,-103.08 455.5,-106.04 455.5,-106.04 455.5,-111.96 455.5,-111.96 455.5,-114.92 452.54,-117.88 449.58,-117.88"/>
<text text-anchor="start" x="383.75" y="-105.33" font-family="Helvetica,sans-Serif" font-size="9.00">populate-lists.js</text>
</a>
</g>
</g>
<!-- src/script/interpreter/uistate.js->src/script/interpreter/populate-lists.js -->
<g id="edge39" class="edge">
<title>src/script/interpreter/uistate.js->src/script/interpreter/populate-lists.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M345.77,-156.93C362.71,-156.93 381.25,-156.93 381.25,-156.93 381.25,-156.93 381.25,-127.27 381.25,-127.27"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="383.35,-127.27 381.25,-121.27 379.15,-127.27 383.35,-127.27"/>
</g>
<!-- src/script/interpreter/state.js -->
<g id="node21" class="node">
<title>src/script/interpreter/state.js</title>
<g id="a_node21"><a xlink:href="https://github.com/sverweij/mscgen_js/tree/develop/src/script/interpreter/state.js" xlink:title="state.js">
<path fill="#ffffcc" stroke="black" d="M436.71,-177.88C436.71,-177.88 394.54,-177.88 394.54,-177.88 391.58,-177.88 388.62,-174.92 388.62,-171.96 388.62,-171.96 388.62,-166.04 388.62,-166.04 388.62,-163.08 391.58,-160.12 394.54,-160.12 394.54,-160.12 436.71,-160.12 436.71,-160.12 439.67,-160.12 442.62,-163.08 442.62,-166.04 442.62,-166.04 442.62,-171.96 442.62,-171.96 442.62,-174.92 439.67,-177.88 436.71,-177.88"/>
<text text-anchor="start" x="401.38" y="-165.32" font-family="Helvetica,sans-Serif" font-size="9.00">state.js</text>
</a>
</g>
</g>
<!-- src/script/interpreter/uistate.js->src/script/interpreter/state.js -->
<g id="edge40" class="edge">
<title>src/script/interpreter/uistate.js->src/script/interpreter/state.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M345.64,-158.53C374.6,-158.53 416.25,-158.53 416.25,-158.53 416.25,-158.53 416.25,-158.65 416.25,-158.65"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="414.15,-150.78 416.25,-156.78 418.35,-150.78 414.15,-150.78"/>
</g>
<!-- src/script/interpreter/general-actions.js -->
<g id="node10" class="node">
<title>src/script/interpreter/general-actions.js</title>
<g id="a_node10"><a xlink:href="https://github.com/sverweij/mscgen_js/tree/develop/src/script/interpreter/general-actions.js" xlink:title="general-actions.js">
<path fill="#ffffcc" stroke="black" d="M356.83,-115.88C356.83,-115.88 279.92,-115.88 279.92,-115.88 276.96,-115.88 274,-112.92 274,-109.96 274,-109.96 274,-104.04 274,-104.04 274,-101.08 276.96,-98.12 279.92,-98.12 279.92,-98.12 356.83,-98.12 356.83,-98.12 359.79,-98.12 362.75,-101.08 362.75,-104.04 362.75,-104.04 362.75,-109.96 362.75,-109.96 362.75,-112.92 359.79,-115.88 356.83,-115.88"/>
<text text-anchor="start" x="282" y="-103.33" font-family="Helvetica,sans-Serif" font-size="9.00">general-actions.js</text>
</a>
</g>
</g>
<!-- src/script/interpreter/general-actions.js->src/script/interpreter/animator.js -->
<g id="edge8" class="edge">
<title>src/script/interpreter/general-actions.js->src/script/interpreter/animator.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M359.25,-116.16C359.25,-124.65 359.25,-135.96 359.25,-135.96 359.25,-135.96 375.77,-135.96 375.77,-135.96"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="375.77,-138.06 381.77,-135.96 375.77,-133.86 375.77,-138.06"/>
</g>
<!-- src/script/interpreter/input-actions.js -->
<g id="node11" class="node">
<title>src/script/interpreter/input-actions.js</title>
<g id="a_node11"><a xlink:href="https://github.com/sverweij/mscgen_js/tree/develop/src/script/interpreter/input-actions.js" xlink:title="input-actions.js">
<path fill="#ffffcc" stroke="black" d="M234.46,-101.88C234.46,-101.88 168.79,-101.88 168.79,-101.88 165.83,-101.88 162.88,-98.92 162.88,-95.96 162.88,-95.96 162.88,-90.04 162.88,-90.04 162.88,-87.08 165.83,-84.12 168.79,-84.12 168.79,-84.12 234.46,-84.12 234.46,-84.12 237.42,-84.12 240.38,-87.08 240.38,-90.04 240.38,-90.04 240.38,-95.96 240.38,-95.96 240.38,-98.92 237.42,-101.88 234.46,-101.88"/>
<text text-anchor="start" x="170.88" y="-89.33" font-family="Helvetica,sans-Serif" font-size="9.00">input-actions.js</text>
</a>
</g>
</g>
<!-- src/script/interpreter/input-actions.js->node_modules/mscgenjs -->
<g id="edge13" class="edge">
<title>src/script/interpreter/input-actions.js->node_modules/mscgenjs</title>
<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M240.61,-85.75C240.61,-85.75 605.36,-85.75 605.36,-85.75"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="605.36,-87.85 611.36,-85.75 605.36,-83.65 605.36,-87.85"/>
</g>
<!-- src/script/interpreter/input-actions.js->src/script/utl/gaga.js -->
<g id="edge9" class="edge">
<title>src/script/interpreter/input-actions.js->src/script/utl/gaga.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M240.64,-89C289.32,-89 366.25,-89 366.25,-89 366.25,-89 366.25,-359.2 366.25,-359.2 366.25,-359.2 482.25,-359.2 482.25,-359.2"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="482.25,-361.3 488.25,-359.2 482.25,-357.1 482.25,-361.3"/>
</g>
<!-- src/script/interpreter/input-actions.js->src/script/interpreter/uistate.js -->
<g id="edge12" class="edge">
<title>src/script/interpreter/input-actions.js->src/script/interpreter/uistate.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M240.73,-92.25C246.88,-92.25 251.25,-92.25 251.25,-92.25 251.25,-92.25 251.25,-150.04 251.25,-150.04 251.25,-150.04 282.05,-150.04 282.05,-150.04"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="282.05,-152.14 288.05,-150.04 282.05,-147.94 282.05,-152.14"/>
</g>
<!-- src/script/interpreter/input-actions.js->src/script/interpreter/general-actions.js -->
<g id="edge11" class="edge">
<title>src/script/interpreter/input-actions.js->src/script/interpreter/general-actions.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M202.25,-102.24C202.25,-105.33 202.25,-108 202.25,-108 202.25,-108 264.78,-108 264.78,-108"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="264.78,-110.1 270.78,-108 264.78,-105.9 264.78,-110.1"/>
</g>
<!-- src/script/utl/store.js -->
<g id="node12" class="node">
<title>src/script/utl/store.js</title>
<g id="a_node12"><a xlink:href="https://github.com/sverweij/mscgen_js/tree/develop/src/script/utl/store.js" xlink:title="store.js">
<path fill="#ffffcc" stroke="black" d="M539.58,-341.88C539.58,-341.88 497.42,-341.88 497.42,-341.88 494.46,-341.88 491.5,-338.92 491.5,-335.96 491.5,-335.96 491.5,-330.04 491.5,-330.04 491.5,-327.08 494.46,-324.12 497.42,-324.12 497.42,-324.12 539.58,-324.12 539.58,-324.12 542.54,-324.12 545.5,-327.08 545.5,-330.04 545.5,-330.04 545.5,-335.96 545.5,-335.96 545.5,-338.92 542.54,-341.88 539.58,-341.88"/>
<text text-anchor="start" x="503.88" y="-329.32" font-family="Helvetica,sans-Serif" font-size="9.00">store.js</text>
</a>
</g>
</g>
<!-- src/script/interpreter/input-actions.js->src/script/utl/store.js -->
<g id="edge10" class="edge">
<title>src/script/interpreter/input-actions.js->src/script/utl/store.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M240.5,-87.38C290.02,-87.38 369.25,-87.38 369.25,-87.38 369.25,-87.38 369.25,-328.56 369.25,-328.56 369.25,-328.56 482.1,-328.56 482.1,-328.56"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="482.1,-330.66 488.1,-328.56 482.1,-326.46 482.1,-330.66"/>
</g>
<!-- src/script/interpreter/nav-actions.js -->
<g id="node13" class="node">
<title>src/script/interpreter/nav-actions.js</title>
<g id="a_node13"><a xlink:href="https://github.com/sverweij/mscgen_js/tree/develop/src/script/interpreter/nav-actions.js" xlink:title="nav-actions.js">
<path fill="#ffffcc" stroke="black" d="M231.83,-131.88C231.83,-131.88 171.42,-131.88 171.42,-131.88 168.46,-131.88 165.5,-128.92 165.5,-125.96 165.5,-125.96 165.5,-120.04 165.5,-120.04 165.5,-117.08 168.46,-114.12 171.42,-114.12 171.42,-114.12 231.83,-114.12 231.83,-114.12 234.79,-114.12 237.75,-117.08 237.75,-120.04 237.75,-120.04 237.75,-125.96 237.75,-125.96 237.75,-128.92 234.79,-131.88 231.83,-131.88"/>
<text text-anchor="start" x="173.5" y="-119.33" font-family="Helvetica,sans-Serif" font-size="9.00">nav-actions.js</text>
</a>
</g>
</g>
<!-- src/script/interpreter/nav-actions.js->src/script/utl/gaga.js -->
<g id="edge15" class="edge">
<title>src/script/interpreter/nav-actions.js->src/script/utl/gaga.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M237.98,-125.22C281.98,-125.22 350.25,-125.22 350.25,-125.22 350.25,-125.22 350.25,-361.73 350.25,-361.73 350.25,-361.73 482.07,-361.73 482.07,-361.73"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="482.07,-363.83 488.07,-361.73 482.07,-359.63 482.07,-363.83"/>
</g>
<!-- src/script/interpreter/nav-actions.js->src/script/interpreter/uistate.js -->
<g id="edge17" class="edge">
<title>src/script/interpreter/nav-actions.js->src/script/interpreter/uistate.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M238.2,-127.68C272.73,-127.68 319.25,-127.68 319.25,-127.68 319.25,-127.68 319.25,-134.83 319.25,-134.83"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="317.15,-134.83 319.25,-140.83 321.35,-134.83 317.15,-134.83"/>
</g>
<!-- src/script/interpreter/nav-actions.js->src/script/interpreter/general-actions.js -->
<g id="edge16" class="edge">
<title>src/script/interpreter/nav-actions.js->src/script/interpreter/general-actions.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M238,-120.32C260.94,-120.32 286.25,-120.32 286.25,-120.32 286.25,-120.32 286.25,-119.9 286.25,-119.9"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="288.35,-125.14 286.25,-119.14 284.15,-125.14 288.35,-125.14"/>
</g>
<!-- src/script/interpreter/nav-actions.js->src/script/utl/exporter.js -->
<g id="edge14" class="edge">
<title>src/script/interpreter/nav-actions.js->src/script/utl/exporter.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M238.18,-122.78C283.34,-122.78 354.25,-122.78 354.25,-122.78 354.25,-122.78 354.25,-298.56 354.25,-298.56 354.25,-298.56 479.73,-298.56 479.73,-298.56"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="479.73,-300.66 485.73,-298.56 479.73,-296.46 479.73,-300.66"/>
</g>
<!-- src/script/utl/exporter.js->node_modules/mscgenjs -->
<g id="edge49" class="edge">
<title>src/script/utl/exporter.js->node_modules/mscgenjs</title>
<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M548.17,-305.96C588.39,-305.96 655.25,-305.96 655.25,-305.96 655.25,-305.96 655.25,-101.73 655.25,-101.73"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="657.35,-101.73 655.25,-95.73 653.15,-101.73 657.35,-101.73"/>
</g>
<!-- src/script/utl/exporter.js->node_modules/query-string -->
<g id="edge50" class="edge">
<title>src/script/utl/exporter.js->node_modules/query-string</title>
<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M548.09,-300.04C567.48,-300.04 589.25,-300.04 589.25,-300.04 589.25,-300.04 589.25,-59 589.25,-59 589.25,-59 600.67,-59 600.67,-59"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="600.67,-61.1 606.67,-59 600.67,-56.9 600.67,-61.1"/>
</g>
<!-- src/script/interpreter/output-actions.js -->
<g id="node15" class="node">
<title>src/script/interpreter/output-actions.js</title>
<g id="a_node15"><a xlink:href="https://github.com/sverweij/mscgen_js/tree/develop/src/script/interpreter/output-actions.js" xlink:title="output-actions.js">
<path fill="#ffffcc" stroke="black" d="M237.08,-71.88C237.08,-71.88 166.17,-71.88 166.17,-71.88 163.21,-71.88 160.25,-68.92 160.25,-65.96 160.25,-65.96 160.25,-60.04 160.25,-60.04 160.25,-57.08 163.21,-54.12 166.17,-54.12 166.17,-54.12 237.08,-54.12 237.08,-54.12 240.04,-54.12 243,-57.08 243,-60.04 243,-60.04 243,-65.96 243,-65.96 243,-68.92 240.04,-71.88 237.08,-71.88"/>
<text text-anchor="start" x="168.25" y="-59.33" font-family="Helvetica,sans-Serif" font-size="9.00">output-actions.js</text>
</a>
</g>
</g>
<!-- src/script/interpreter/output-actions.js->node_modules/mscgenjs -->
<g id="edge25" class="edge">
<title>src/script/interpreter/output-actions.js->node_modules/mscgenjs</title>
<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M202.25,-72.36C202.25,-76.36 202.25,-80.12 202.25,-80.12 202.25,-80.12 605.59,-80.12 605.59,-80.12"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="605.59,-82.23 611.59,-80.13 605.59,-78.03 605.59,-82.23"/>
</g>
<!-- src/script/interpreter/output-actions.js->src/script/interpreter/animator.js -->
<g id="edge21" class="edge">
<title>src/script/interpreter/output-actions.js->src/script/interpreter/animator.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M243.3,-67.44C250.78,-67.44 256.25,-67.44 256.25,-67.44 256.25,-67.44 256.25,-140.04 256.25,-140.04 256.25,-140.04 375.87,-140.04 375.87,-140.04"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="375.87,-142.14 381.87,-140.04 375.87,-137.94 375.87,-142.14"/>
</g>
<!-- src/script/interpreter/output-actions.js->src/script/utl/gaga.js -->
<g id="edge19" class="edge">
<title>src/script/interpreter/output-actions.js->src/script/utl/gaga.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M243.19,-63C256.21,-63 267.25,-63 267.25,-63 267.25,-63 267.25,-364.27 267.25,-364.27 267.25,-364.27 482.11,-364.27 482.11,-364.27"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="482.11,-366.37 488.11,-364.27 482.11,-362.17 482.11,-366.37"/>
</g>
<!-- src/script/interpreter/output-actions.js->src/script/interpreter/uistate.js -->
<g id="edge24" class="edge">
<title>src/script/interpreter/output-actions.js->src/script/interpreter/uistate.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M243.35,-69.66C249.73,-69.66 254.25,-69.66 254.25,-69.66 254.25,-69.66 254.25,-148.07 254.25,-148.07 254.25,-148.07 282.15,-148.07 282.15,-148.07"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="282.15,-150.17 288.15,-148.07 282.15,-145.97 282.15,-150.17"/>
</g>
<!-- src/script/interpreter/output-actions.js->src/script/interpreter/general-actions.js -->
<g id="edge22" class="edge">
<title>src/script/interpreter/output-actions.js->src/script/interpreter/general-actions.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M243.2,-65.22C252.29,-65.22 259.25,-65.22 259.25,-65.22 259.25,-65.22 259.25,-104.94 259.25,-104.94 259.25,-104.94 264.54,-104.94 264.54,-104.94"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="264.54,-107.04 270.54,-104.94 264.54,-102.84 264.54,-107.04"/>
</g>
<!-- src/script/interpreter/output-actions.js->src/script/utl/store.js -->
<g id="edge20" class="edge">
<title>src/script/interpreter/output-actions.js->src/script/utl/store.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M243.13,-60.78C257.58,-60.78 270.25,-60.78 270.25,-60.78 270.25,-60.78 270.25,-333 270.25,-333 270.25,-333 482.43,-333 482.43,-333"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="482.43,-335.1 488.43,-333 482.43,-330.9 482.43,-335.1"/>
</g>
<!-- src/script/interpreter/output-actions.js->src/script/utl/exporter.js -->
<g id="edge18" class="edge">
<title>src/script/interpreter/output-actions.js->src/script/utl/exporter.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M243.33,-58.56C258.16,-58.56 271.25,-58.56 271.25,-58.56 271.25,-58.56 271.25,-307.44 271.25,-307.44 271.25,-307.44 479.65,-307.44 479.65,-307.44"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="479.65,-309.54 485.65,-307.44 479.65,-305.34 479.65,-309.54"/>
</g>
<!-- src/script/interpreter/raster-exporter.js -->
<g id="node16" class="node">
<title>src/script/interpreter/raster-exporter.js</title>
<g id="a_node16"><a xlink:href="https://github.com/sverweij/mscgen_js/tree/develop/src/script/interpreter/raster-exporter.js" xlink:title="raster-exporter.js">
<path fill="#ffffcc" stroke="black" d="M354.96,-71.88C354.96,-71.88 281.79,-71.88 281.79,-71.88 278.83,-71.88 275.88,-68.92 275.88,-65.96 275.88,-65.96 275.88,-60.04 275.88,-60.04 275.88,-57.08 278.83,-54.12 281.79,-54.12 281.79,-54.12 354.96,-54.12 354.96,-54.12 357.92,-54.12 360.88,-57.08 360.88,-60.04 360.88,-60.04 360.88,-65.96 360.88,-65.96 360.88,-68.92 357.92,-71.88 354.96,-71.88"/>
<text text-anchor="start" x="283.88" y="-59.33" font-family="Helvetica,sans-Serif" font-size="9.00">raster-exporter.js</text>
</a>
</g>
</g>
<!-- src/script/interpreter/output-actions.js->src/script/interpreter/raster-exporter.js -->
<g id="edge23" class="edge">
<title>src/script/interpreter/output-actions.js->src/script/interpreter/raster-exporter.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M243.44,-56.34C243.44,-56.34 266.64,-56.34 266.64,-56.34"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="266.64,-58.44 272.64,-56.34 266.64,-54.24 266.64,-58.44"/>
</g>
<!-- src/script/interpreter/raster-exporter.js->node_modules/mscgenjs -->
<g id="edge35" class="edge">
<title>src/script/interpreter/raster-exporter.js->node_modules/mscgenjs</title>
<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M361.25,-67.88C449.08,-67.88 641.25,-67.88 641.25,-67.88 641.25,-67.88 641.25,-68.65 641.25,-68.65"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="639.15,-68.12 641.25,-74.12 643.35,-68.12 639.15,-68.12"/>
</g>
<!-- src/script/interpreter/param-actions.js -->
<g id="node17" class="node">
<title>src/script/interpreter/param-actions.js</title>
<g id="a_node17"><a xlink:href="https://github.com/sverweij/mscgen_js/tree/develop/src/script/interpreter/param-actions.js" xlink:title="param-actions.js">
<path fill="#ffffcc" stroke="black" d="M237.46,-161.88C237.46,-161.88 165.79,-161.88 165.79,-161.88 162.83,-161.88 159.88,-158.92 159.88,-155.96 159.88,-155.96 159.88,-150.04 159.88,-150.04 159.88,-147.08 162.83,-144.12 165.79,-144.12 165.79,-144.12 237.46,-144.12 237.46,-144.12 240.42,-144.12 243.38,-147.08 243.38,-150.04 243.38,-150.04 243.38,-155.96 243.38,-155.96 243.38,-158.92 240.42,-161.88 237.46,-161.88"/>
<text text-anchor="start" x="167.88" y="-149.32" font-family="Helvetica,sans-Serif" font-size="9.00">param-actions.js</text>
</a>
</g>
</g>
<!-- src/script/interpreter/param-actions.js->node_modules/query-string -->
<g id="edge31" class="edge">
<title>src/script/interpreter/param-actions.js->node_modules/query-string</title>
<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M243.79,-146.1C247.13,-146.1 249.25,-146.1 249.25,-146.1 249.25,-146.1 249.25,-50.12 249.25,-50.12 249.25,-50.12 600.65,-50.12 600.65,-50.12"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="600.65,-52.23 606.65,-50.13 600.65,-48.03 600.65,-52.23"/>
</g>
<!-- src/script/interpreter/param-actions.js->src/script/utl/domutl.js -->
<g id="edge26" class="edge">
<title>src/script/interpreter/param-actions.js->src/script/utl/domutl.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M243.7,-155.96C259.29,-155.96 273.25,-155.96 273.25,-155.96 273.25,-155.96 273.25,-278.32 273.25,-278.32 273.25,-278.32 482.29,-278.32 482.29,-278.32"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="482.29,-280.43 488.29,-278.33 482.29,-276.23 482.29,-280.43"/>
</g>
<!-- src/script/interpreter/param-actions.js->src/script/utl/gaga.js -->
<g id="edge27" class="edge">
<title>src/script/interpreter/param-actions.js->src/script/utl/gaga.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M243.65,-159.9C255.99,-159.9 266.25,-159.9 266.25,-159.9 266.25,-159.9 266.25,-366.8 266.25,-366.8 266.25,-366.8 482,-366.8 482,-366.8"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="482,-368.9 488,-366.8 482,-364.7 482,-368.9"/>
</g>
<!-- src/script/interpreter/param-actions.js->src/script/utl/maps.js -->
<g id="edge28" class="edge">
<title>src/script/interpreter/param-actions.js->src/script/utl/maps.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M243.7,-153.99C262.39,-153.99 280.25,-153.99 280.25,-153.99 280.25,-153.99 280.25,-393 280.25,-393 280.25,-393 482.14,-393 482.14,-393"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="482.14,-395.1 488.14,-393 482.14,-390.9 482.14,-395.1"/>
</g>
<!-- src/script/interpreter/param-actions.js->src/script/interpreter/uistate.js -->
<g id="edge30" class="edge">
<title>src/script/interpreter/param-actions.js->src/script/interpreter/uistate.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M243.77,-152.01C243.77,-152.01 282.18,-152.01 282.18,-152.01"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="282.18,-154.11 288.18,-152.01 282.18,-149.91 282.18,-154.11"/>
</g>
<!-- src/script/interpreter/param-actions.js->src/script/utl/store.js -->
<g id="edge29" class="edge">
<title>src/script/interpreter/param-actions.js->src/script/utl/store.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M243.82,-157.93C257.04,-157.93 268.25,-157.93 268.25,-157.93 268.25,-157.93 268.25,-337.44 268.25,-337.44 268.25,-337.44 482.22,-337.44 482.22,-337.44"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="482.22,-339.54 488.22,-337.44 482.22,-335.34 482.22,-339.54"/>
</g>
<!-- src/script/interpreter/populate-lists.js->node_modules/mscgenjs -->
<g id="edge34" class="edge">
<title>src/script/interpreter/populate-lists.js->node_modules/mscgenjs</title>
<path fill="none" stroke="#000000" stroke-opacity="0.200000" d="M455.93,-109C517.33,-109 627.25,-109 627.25,-109 627.25,-109 627.25,-101.72 627.25,-101.72"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-opacity="0.200000" points="629.35,-101.72 627.25,-95.72 625.15,-101.72 629.35,-101.72"/>
</g>
<!-- src/script/interpreter/populate-lists.js->src/script/utl/domutl.js -->
<g id="edge32" class="edge">
<title>src/script/interpreter/populate-lists.js->src/script/utl/domutl.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M451.25,-117.99C451.25,-151.55 451.25,-267.68 451.25,-267.68 451.25,-267.68 482.12,-267.68 482.12,-267.68"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="482.12,-269.78 488.12,-267.68 482.12,-265.58 482.12,-269.78"/>
</g>
<!-- src/script/interpreter/sampleListReader.js -->
<g id="node19" class="node">
<title>src/script/interpreter/sampleListReader.js</title>
<g id="a_node19"><a xlink:href="https://github.com/sverweij/mscgen_js/tree/develop/src/script/interpreter/sampleListReader.js" xlink:title="sampleListReader.js">
<path fill="#ffffcc" stroke="black" d="M562.58,-169.88C562.58,-169.88 474.42,-169.88 474.42,-169.88 471.46,-169.88 468.5,-166.92 468.5,-163.96 468.5,-163.96 468.5,-158.04 468.5,-158.04 468.5,-155.08 471.46,-152.12 474.42,-152.12 474.42,-152.12 562.58,-152.12 562.58,-152.12 565.54,-152.12 568.5,-155.08 568.5,-158.04 568.5,-158.04 568.5,-163.96 568.5,-163.96 568.5,-166.92 565.54,-169.88 562.58,-169.88"/>
<text text-anchor="start" x="476.5" y="-157.32" font-family="Helvetica,sans-Serif" font-size="9.00">sampleListReader.js</text>
</a>
</g>
</g>
<!-- src/script/interpreter/populate-lists.js->src/script/interpreter/sampleListReader.js -->
<g id="edge33" class="edge">
<title>src/script/interpreter/populate-lists.js->src/script/interpreter/sampleListReader.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M453.25,-118.37C453.25,-131.91 453.25,-155.32 453.25,-155.32 453.25,-155.32 459.03,-155.32 459.03,-155.32"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="459.03,-157.43 465.03,-155.33 459.03,-153.23 459.03,-157.43"/>
</g>
<!-- src/script/interpreter/register-service-worker.js -->
<g id="node20" class="node">
<title>src/script/interpreter/register-service-worker.js</title>
<g id="a_node20"><a xlink:href="https://github.com/sverweij/mscgen_js/tree/develop/src/script/interpreter/register-service-worker.js" xlink:title="register-service-worker.js">
<path fill="#ffffcc" stroke="black" d="M255.08,-221.88C255.08,-221.88 148.17,-221.88 148.17,-221.88 145.21,-221.88 142.25,-218.92 142.25,-215.96 142.25,-215.96 142.25,-210.04 142.25,-210.04 142.25,-207.08 145.21,-204.12 148.17,-204.12 148.17,-204.12 255.08,-204.12 255.08,-204.12 258.04,-204.12 261,-207.08 261,-210.04 261,-210.04 261,-215.96 261,-215.96 261,-218.92 258.04,-221.88 255.08,-221.88"/>
<text text-anchor="start" x="150.25" y="-209.32" font-family="Helvetica,sans-Serif" font-size="9.00">register-service-worker.js</text>
</a>
</g>
</g>
<!-- src/script/mscgen-interpreter.js -->
<g id="node22" class="node">
<title>src/script/mscgen-interpreter.js</title>
<g id="a_node22"><a xlink:href="https://github.com/sverweij/mscgen_js/tree/develop/src/script/mscgen-interpreter.js" xlink:title="mscgen-interpreter.js">
<path fill="#ffffcc" stroke="black" d="M120.33,-131.88C120.33,-131.88 29.92,-131.88 29.92,-131.88 26.96,-131.88 24,-128.92 24,-125.96 24,-125.96 24,-120.04 24,-120.04 24,-117.08 26.96,-114.12 29.92,-114.12 29.92,-114.12 120.33,-114.12 120.33,-114.12 123.29,-114.12 126.25,-117.08 126.25,-120.04 126.25,-120.04 126.25,-125.96 126.25,-125.96 126.25,-128.92 123.29,-131.88 120.33,-131.88"/>
<text text-anchor="start" x="32" y="-119.33" font-family="Helvetica,sans-Serif" font-size="9.00">mscgen-interpreter.js</text>
</a>
</g>
</g>
<!-- src/script/mscgen-interpreter.js->src/script/interpreter/editor-events.js -->
<g id="edge42" class="edge">
<title>src/script/mscgen-interpreter.js->src/script/interpreter/editor-events.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M58.25,-132.38C58.25,-149.25 58.25,-183 58.25,-183 58.25,-183 153.04,-183 153.04,-183"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="153.04,-185.1 159.04,-183 153.04,-180.9 153.04,-185.1"/>
</g>
<!-- src/script/mscgen-interpreter.js->src/script/interpreter/general-actions.js -->
<g id="edge43" class="edge">
<title>src/script/mscgen-interpreter.js->src/script/interpreter/general-actions.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M50.25,-113.83C50.25,-112.23 50.25,-111.06 50.25,-111.06 50.25,-111.06 264.77,-111.06 264.77,-111.06"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="264.77,-113.16 270.77,-111.06 264.77,-108.96 264.77,-113.16"/>
</g>
<!-- src/script/mscgen-interpreter.js->src/script/interpreter/input-actions.js -->
<g id="edge44" class="edge">
<title>src/script/mscgen-interpreter.js->src/script/interpreter/input-actions.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M101.25,-113.84C101.25,-105.01 101.25,-93 101.25,-93 101.25,-93 153.5,-93 153.5,-93"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="153.5,-95.1 159.5,-93 153.5,-90.9 153.5,-95.1"/>
</g>
<!-- src/script/mscgen-interpreter.js->src/script/interpreter/nav-actions.js -->
<g id="edge45" class="edge">
<title>src/script/mscgen-interpreter.js->src/script/interpreter/nav-actions.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M126.58,-120.04C126.58,-120.04 156.31,-120.04 156.31,-120.04"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="156.31,-122.14 162.31,-120.04 156.31,-117.94 156.31,-122.14"/>
</g>
<!-- src/script/mscgen-interpreter.js->src/script/interpreter/output-actions.js -->
<g id="edge46" class="edge">
<title>src/script/mscgen-interpreter.js->src/script/interpreter/output-actions.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M75.25,-113.62C75.25,-96.75 75.25,-63 75.25,-63 75.25,-63 150.87,-63 150.87,-63"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="150.87,-65.1 156.87,-63 150.87,-60.9 150.87,-65.1"/>
</g>
<!-- src/script/mscgen-interpreter.js->src/script/interpreter/param-actions.js -->
<g id="edge47" class="edge">
<title>src/script/mscgen-interpreter.js->src/script/interpreter/param-actions.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M92.25,-132.16C92.25,-140.99 92.25,-153 92.25,-153 92.25,-153 150.62,-153 150.62,-153"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="150.62,-155.1 156.62,-153 150.62,-150.9 150.62,-155.1"/>
</g>
<!-- src/script/mscgen-interpreter.js->src/script/interpreter/register-service-worker.js -->
<g id="edge48" class="edge">
<title>src/script/mscgen-interpreter.js->src/script/interpreter/register-service-worker.js</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M126.74,-125.96C140.32,-125.96 151.25,-125.96 151.25,-125.96 151.25,-125.96 151.25,-194.66 151.25,-194.66"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="149.15,-194.66 151.25,-200.66 153.35,-194.66 149.15,-194.66"/>
</g>
</g>
</svg>
<script>
var gMode = new Mode();
var title2ElementMap = (function makeElementMap() {
/** @type {NodeListOf<SVGGElement>} */
var nodes = document.querySelectorAll(".node");
/** @type {NodeListOf<SVGGElement>} */
var edges = document.querySelectorAll(".edge");
return new Title2ElementMap(edges, nodes);
})();
function getHoverHandler(pTitle2ElementMap) {
/** @type {string} */
var currentHighlightedTitle = "";
/** @param {MouseEvent} pMouseEvent */
return function hoverHighlightHandler(pMouseEvent) {
var closestNodeOrEdge = pMouseEvent.target.closest(".edge, .node");
var closestTitleText = getTitleText(closestNodeOrEdge);
if (
!(currentHighlightedTitle === closestTitleText) &&
gMode.get() === gMode.HOVER
) {
resetNodesAndEdges();
addHighlight(closestNodeOrEdge);
pTitle2ElementMap.get(closestTitleText).forEach(addHighlight);
currentHighlightedTitle = closestTitleText;
}
};
}
function getSelectHandler(pTitle2ElementMap) {
/** @type {string} */
var currentHighlightedTitle = "";
/** @param {MouseEvent} pMouseEvent */
return function selectHighlightHandler(pMouseEvent) {
pMouseEvent.preventDefault();
var closestNodeOrEdge = pMouseEvent.target.closest(".edge, .node");
var closestTitleText = getTitleText(closestNodeOrEdge);
if (!!closestNodeOrEdge) {
gMode.setToSelect();
} else {
gMode.setToHover();
}
if (!(currentHighlightedTitle === closestTitleText)) {
resetNodesAndEdges();
addHighlight(closestNodeOrEdge);
pTitle2ElementMap.get(closestTitleText).forEach(addHighlight);
currentHighlightedTitle = closestTitleText;
}
};
}
function Mode() {
var HOVER = 1;
var SELECT = 2;
function setToHover() {
this._mode = HOVER;
}
function setToSelect() {
this._mode = SELECT;
}
/**
* @returns {number}
*/
function get() {
return this._mode || HOVER;
}
return {
HOVER: HOVER,
SELECT: SELECT,
setToHover: setToHover,
setToSelect: setToSelect,
get: get,
};
}
/**
*
* @param {SVGGelement[]} pEdges
* @param {SVGGElement[]} pNodes
* @return {{get: (pTitleText:string) => SVGGElement[]}}
*/
function Title2ElementMap(pEdges, pNodes) {
/* {{[key: string]: SVGGElement[]}} */
var elementMap = buildMap(pEdges, pNodes);
/**
* @param {NodeListOf<SVGGElement>} pEdges
* @param {NodeListOf<SVGGElement>} pNodes
* @return {{[key: string]: SVGGElement[]}}
*/
function buildMap(pEdges, pNodes) {
var title2NodeMap = buildTitle2NodeMap(pNodes);
return nodeListToArray(pEdges).reduce(addEdgeToMap(title2NodeMap), {});
}
/**
* @param {NodeListOf<SVGGElement>} pNodes
* @return {{[key: string]: SVGGElement}}
*/
function buildTitle2NodeMap(pNodes) {
return nodeListToArray(pNodes).reduce(addNodeToMap, {});
}
function addNodeToMap(pMap, pNode) {
var titleText = getTitleText(pNode);
if (titleText) {
pMap[titleText] = pNode;
}
return pMap;
}
function addEdgeToMap(pNodeMap) {
return function (pEdgeMap, pEdge) {
/** @type {string} */
var titleText = getTitleText(pEdge);
if (titleText) {
var edge = pryEdgeFromTitle(titleText);
pEdgeMap[titleText] = [pNodeMap[edge.from], pNodeMap[edge.to]];
(pEdgeMap[edge.from] || (pEdgeMap[edge.from] = [])).push(pEdge);
(pEdgeMap[edge.to] || (pEdgeMap[edge.to] = [])).push(pEdge);
}
return pEdgeMap;
};
}
/**
*
* @param {string} pString
* @return {{from?: string; to?:string;}}
*/
function pryEdgeFromTitle(pString) {
var nodeNames = pString.split(/\s*->\s*/);
return {
from: nodeNames.shift(),
to: nodeNames.shift(),
};
}
/**
*
* @param {string} pTitleText
* @return {SVGGElement[]}
*/
function get(pTitleText) {
return (pTitleText && elementMap[pTitleText]) || [];
}
return {
get: get,
};
}
/**
* @param {SVGGElement} pGElement
* @return {string?}
*/
function getTitleText(pGElement) {
/** @type {SVGTitleElement} */
var title = pGElement && pGElement.querySelector("title");
/** @type {string} */
var titleText = title && title.textContent;
if (titleText) {
titleText = titleText.trim();
}
return titleText;
}
/**
* @param {NodeListOf<Element>} pNodeList
* @return {Element[]}
*/
function nodeListToArray(pNodeList) {
var lReturnValue = [];
pNodeList.forEach(function (pElement) {
lReturnValue.push(pElement);
});
return lReturnValue;
}
function resetNodesAndEdges() {
nodeListToArray(document.querySelectorAll(".current")).forEach(
removeHighlight,
);
}
/**
* @param {SVGGElement} pGElement
*/
function removeHighlight(pGElement) {
if (pGElement && pGElement.classList) {
pGElement.classList.remove("current");
}
}
/**
* @param {SVGGElement} pGroup
*/
function addHighlight(pGroup) {
if (pGroup && pGroup.classList) {
pGroup.classList.add("current");
}
}
var gHints = {
HIDDEN: 1,
SHOWN: 2,
state: this.HIDDEN,
show: function () {
document.getElementById("hints").removeAttribute("style");
gHints.state = gHints.SHOWN;
},
hide: function () {
document.getElementById("hints").style = "display:none";
gHints.state = gHints.HIDDEN;
},
toggle: function () {
if ((gHints.state || gHints.HIDDEN) === gHints.HIDDEN) {
gHints.show();
} else {
gHints.hide();
}
},
};
/** @param {KeyboardEvent} pKeyboardEvent */
function keyboardEventHandler(pKeyboardEvent) {
if (pKeyboardEvent.key === "Escape") {
resetNodesAndEdges();
gMode.setToHover();
gHints.hide();
}
if (pKeyboardEvent.key === "F1") {
pKeyboardEvent.preventDefault();
gHints.toggle();
}
}
document.addEventListener("contextmenu", getSelectHandler(title2ElementMap));
document.addEventListener("mouseover", getHoverHandler(title2ElementMap));
document.addEventListener("keydown", keyboardEventHandler);
document.getElementById("close-hints").addEventListener("click", gHints.hide);
document.getElementById("button_help").addEventListener("click", gHints.toggle);
document.querySelector("svg").insertAdjacentHTML(
"afterbegin",
`<linearGradient id="edgeGradient">
<stop offset="0%" stop-color="fuchsia"/>
<stop offset="100%" stop-color="purple"/>
</linearGradient>
`,
);
// Add a small increment to the last value of the path to make gradients on
// horizontal paths work. Without them all browsers I tested with (firefox,
// chrome) do not render the gradient, but instead make the line transparent
// (or the color of the background, I haven't looked into it that deeply,
// but for the hack it doesn't matter which).
function skewLineABit(lDrawingInstructions) {
var lLastValue = lDrawingInstructions.match(/(\d+\.?\d*)$/)[0];
// Smaller values than .001 _should_ work as well, but don't in all
// cases. Even this value is so small that it is not visible to the
// human eye (tested with the two I have at my disposal).
var lIncrement = 0.001;
var lNewLastValue = parseFloat(lLastValue) + lIncrement;
return lDrawingInstructions.replace(lLastValue, lNewLastValue);
}
nodeListToArray(document.querySelectorAll("path"))
.filter(function (pElement) {
return pElement.parentElement.classList.contains("edge");
})
.forEach(function (pElement) {
pElement.attributes.d.value = skewLineABit(pElement.attributes.d.value);
});
</script>
</body>
</html>