Skip to content

Commit

Permalink
4.0.5
Browse files Browse the repository at this point in the history
  • Loading branch information
@sverweij
sverweij committed Aug 21, 2022
1 parent 53945c3 commit 7e319ec
Show file tree
Hide file tree
Showing 3 changed files with 178 additions and 19 deletions.
195 changes: 177 additions & 18 deletions docs/dependencygraph.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@
.node.current path,
.node:active polygon,
.node:hover polygon,
.node.current polygon
{
.node.current polygon {
stroke: fuchsia;
stroke-width: 2;
}
Expand Down Expand Up @@ -44,13 +43,73 @@
.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>Left-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 2.47.2 (20210527.0053)
<!-- Generated by graphviz version 5.0.0 (20220707.1540)
-->
<!-- Title: dependency&#45;cruiser output Pages: 1 -->
<svg width="389pt" height="470pt"
Expand Down Expand Up @@ -113,7 +172,7 @@
<title>node_modules/mscgenjs/dist/cjs/parse/msgennyparser.js</title>
<g id="a_node1"><a xlink:href="https://github.com/mscgenjs/mscgenjs-inpage/blob/develop/node_modules/mscgenjs/dist/cjs/parse/msgennyparser.js" xlink:title="msgennyparser.js">
<polygon fill="#c40b0a" fill-opacity="0.101961" stroke="black" points="242,-190 240.5,-192 230,-192 228.5,-190 153,-190 153,-172 242,-172 242,-190"/>
<text text-anchor="middle" x="197.5" y="-178.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#c40b0a">msgennyparser.js</text>
<text text-anchor="start" x="161" y="-178.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#c40b0a">msgennyparser.js</text>
</a>
</g>
</g>
Expand All @@ -122,7 +181,7 @@
<title>node_modules/mscgenjs/dist/cjs/parse/xuparser.js</title>
<g id="a_node2"><a xlink:href="https://github.com/mscgenjs/mscgenjs-inpage/blob/develop/node_modules/mscgenjs/dist/cjs/parse/xuparser.js" xlink:title="xuparser.js">
<polygon fill="#c40b0a" fill-opacity="0.101961" stroke="black" points="228.5,-160 227,-162 216.5,-162 215,-160 166.5,-160 166.5,-142 228.5,-142 228.5,-160"/>
<text text-anchor="middle" x="197.5" y="-148.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#c40b0a">xuparser.js</text>
<text text-anchor="start" x="174.5" y="-148.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#c40b0a">xuparser.js</text>
</a>
</g>
</g>
Expand All @@ -131,7 +190,7 @@
<title>node_modules/mscgenjs/dist/cjs/render/graphics/renderast.js</title>
<g id="a_node3"><a xlink:href="https://github.com/mscgenjs/mscgenjs-inpage/blob/develop/node_modules/mscgenjs/dist/cjs/render/graphics/renderast.js" xlink:title="renderast.js">
<polygon fill="#c40b0a" fill-opacity="0.101961" stroke="black" points="230,-74 228.5,-76 218,-76 216.5,-74 165,-74 165,-56 230,-56 230,-74"/>
<text text-anchor="middle" x="197.5" y="-62.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#c40b0a">renderast.js</text>
<text text-anchor="start" x="173" y="-62.8" font-family="Helvetica,sans-Serif" font-size="9.00" fill="#c40b0a">renderast.js</text>
</a>
</g>
</g>
Expand All @@ -140,7 +199,7 @@
<title>src/embedding/config.js</title>
<g id="a_node4"><a xlink:href="https://github.com/mscgenjs/mscgenjs-inpage/blob/develop/src/embedding/config.js" xlink:title="config.js">
<path fill="#ffffcc" stroke="black" d="M218.5,-392C218.5,-392 176.5,-392 176.5,-392 173.5,-392 170.5,-389 170.5,-386 170.5,-386 170.5,-380 170.5,-380 170.5,-377 173.5,-374 176.5,-374 176.5,-374 218.5,-374 218.5,-374 221.5,-374 224.5,-377 224.5,-380 224.5,-380 224.5,-386 224.5,-386 224.5,-389 221.5,-392 218.5,-392"/>
<text text-anchor="middle" x="197.5" y="-380.8" font-family="Helvetica,sans-Serif" font-size="9.00">config.js</text>
<text text-anchor="start" x="180.5" y="-380.8" font-family="Helvetica,sans-Serif" font-size="9.00">config.js</text>
</a>
</g>
</g>
Expand All @@ -149,7 +208,7 @@
<title>src/embedding/error&#45;rendering.js</title>
<g id="a_node5"><a xlink:href="https://github.com/mscgenjs/mscgenjs-inpage/blob/develop/src/embedding/error-rendering.js" xlink:title="error&#45;rendering.js">
<path fill="#ffffcc" stroke="black" d="M235.5,-362C235.5,-362 159.5,-362 159.5,-362 156.5,-362 153.5,-359 153.5,-356 153.5,-356 153.5,-350 153.5,-350 153.5,-347 156.5,-344 159.5,-344 159.5,-344 235.5,-344 235.5,-344 238.5,-344 241.5,-347 241.5,-350 241.5,-350 241.5,-356 241.5,-356 241.5,-359 238.5,-362 235.5,-362"/>
<text text-anchor="middle" x="197.5" y="-350.8" font-family="Helvetica,sans-Serif" font-size="9.00">error&#45;rendering.js</text>
<text text-anchor="start" x="161.5" y="-350.8" font-family="Helvetica,sans-Serif" font-size="9.00">error&#45;rendering.js</text>
</a>
</g>
</g>
Expand All @@ -158,7 +217,7 @@
<title>src/utl/tpl.js</title>
<g id="a_node6"><a xlink:href="https://github.com/mscgenjs/mscgenjs-inpage/blob/develop/src/utl/tpl.js" xlink:title="tpl.js">
<path fill="#ffffcc" stroke="black" d="M348.5,-367C348.5,-367 306.5,-367 306.5,-367 303.5,-367 300.5,-364 300.5,-361 300.5,-361 300.5,-355 300.5,-355 300.5,-352 303.5,-349 306.5,-349 306.5,-349 348.5,-349 348.5,-349 351.5,-349 354.5,-352 354.5,-355 354.5,-355 354.5,-361 354.5,-361 354.5,-364 351.5,-367 348.5,-367"/>
<text text-anchor="middle" x="327.5" y="-355.8" font-family="Helvetica,sans-Serif" font-size="9.00">tpl.js</text>
<text text-anchor="start" x="318" y="-355.8" font-family="Helvetica,sans-Serif" font-size="9.00">tpl.js</text>
</a>
</g>
</g>
Expand All @@ -173,7 +232,7 @@
<title>src/mscgen&#45;inpage.js</title>
<g id="a_node7"><a xlink:href="https://github.com/mscgenjs/mscgenjs-inpage/blob/develop/src/mscgen-inpage.js" xlink:title="mscgen&#45;inpage.js">
<path fill="#ffffcc" stroke="black" d="M99,-358C99,-358 22,-358 22,-358 19,-358 16,-355 16,-352 16,-352 16,-346 16,-346 16,-343 19,-340 22,-340 22,-340 99,-340 99,-340 102,-340 105,-343 105,-346 105,-346 105,-352 105,-352 105,-355 102,-358 99,-358"/>
<text text-anchor="middle" x="60.5" y="-346.8" font-family="Helvetica,sans-Serif" font-size="9.00">mscgen&#45;inpage.js</text>
<text text-anchor="start" x="24" y="-346.8" font-family="Helvetica,sans-Serif" font-size="9.00">mscgen&#45;inpage.js</text>
</a>
</g>
</g>
Expand Down Expand Up @@ -212,7 +271,7 @@
<title>src/utl/exporter.js</title>
<g id="a_node8"><a xlink:href="https://github.com/mscgenjs/mscgenjs-inpage/blob/develop/src/utl/exporter.js" xlink:title="exporter.js">
<path fill="#ffffcc" stroke="black" d="M351,-397C351,-397 304,-397 304,-397 301,-397 298,-394 298,-391 298,-391 298,-385 298,-385 298,-382 301,-379 304,-379 304,-379 351,-379 351,-379 354,-379 357,-382 357,-385 357,-385 357,-391 357,-391 357,-394 354,-397 351,-397"/>
<text text-anchor="middle" x="327.5" y="-385.8" font-family="Helvetica,sans-Serif" font-size="9.00">exporter.js</text>
<text text-anchor="start" x="306" y="-385.8" font-family="Helvetica,sans-Serif" font-size="9.00">exporter.js</text>
</a>
</g>
</g>
Expand All @@ -224,30 +283,88 @@
</g>
</g>
</svg>
<script>document.body.onmouseover = getHighlightHandler();
<script>document.addEventListener("contextmenu", getSelectHandler(title2ElementMap));
document.addEventListener("mouseover", getHoverHandler(title2ElementMap));
document.addEventListener("keydown", keyboardEventHandler);

function getHighlightHandler() {
/** @type {string} */
var currentHighlightedTitle;
var gMode = new Mode();

var title2ElementMap = (function makeElementMap() {
/** @type {NodeListOf<SVGGElement>} */
var nodes = document.querySelectorAll(".node");
/** @type {NodeListOf<SVGGElement>} */
var edges = document.querySelectorAll(".edge");
var title2ElementMap = new Title2ElementMap(edges, nodes);
return new Title2ElementMap(edges, nodes);
})();

function getHoverHandler() {
/** @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);
title2ElementMap.get(closestTitleText).forEach(addHighlight);
currentHighlightedTitle = closestTitleText;
}
};
}

function getSelectHandler() {
/** @type {string} */
var currentHighlightedTitle;

/** @param {MouseEvent} pMouseEvent */
return function highlightHandler(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)) {
title2ElementMap.get(currentHighlightedTitle).forEach(removeHighlight);
resetNodesAndEdges();
addHighlight(closestNodeOrEdge);
title2ElementMap.get(closestTitleText).forEach(addHighlight);
currentHighlightedTitle = closestTitleText;
}
};
}
function Mode() {
var HOVER = 1;
var SELECT = 2;

function setToHover() {
this._mode = HOVER;
}
function setToSelect() {
this._mode = SELECT;
}

function get() {
return this._mode || HOVER;
}

return {
HOVER: HOVER,
SELECT: SELECT,
setToHover: setToHover,
setToSelect: setToSelect,
get: get,
};
}

/**
*
Expand Down Expand Up @@ -358,6 +475,12 @@
return lReturnValue;
}

function resetNodesAndEdges() {
nodeListToArray(document.querySelectorAll(".current")).forEach(
removeHighlight
);
}

/**
* @param {SVGGElement} pGElement
*/
Expand All @@ -375,5 +498,41 @@
pGroup.classList.add("current");
}
}

var hints = {
HIDDEN: 1,
SHOWN: 2,
state: this.HIDDEN,
show: function () {
document.getElementById("hints").removeAttribute("style");
hints.state = hints.SHOWN;
},
hide: function () {
document.getElementById("hints").style = "display:none";
hints.state = hints.HIDDEN;
},
toggle: function () {
if ((hints.state || hints.HIDDEN) === hints.HIDDEN) {
hints.show();
} else {
hints.hide();
}
},
};

/** @param {KeyboardEvent} pKeyboardEvent */
function keyboardEventHandler(pKeyboardEvent) {
if (pKeyboardEvent.key === "Escape") {
resetNodesAndEdges();
gMode.setToHover();
hints.hide();
}
if (pKeyboardEvent.key === "F1") {
pKeyboardEvent.preventDefault();
hints.toggle();
}
}
document.getElementById("close-hints").addEventListener("click", hints.hide);
document.getElementById("button_help").addEventListener("click", hints.toggle);
</script> </body>
</html>
Binary file modified docs/dependencygraph.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mscgenjs-inpage",
"version": "4.0.4",
"version": "4.0.5",
"description": "Embed and render sequence charts in HTML",
"main": "dist/mscgen-inpage.js",
"repository": {
Expand Down

0 comments on commit 7e319ec

Please sign in to comment.