3.1.18

Author: sverweij

docs/dependencygraph.html

@@ -592,69 +592,156 @@
 </g>
 </g>
 </svg>
-<script>
-/** @type {SVGGElement} */
-var edges = document.querySelectorAll('.edge');
-/** @type {SVGGElement} */
-var nodes = document.querySelectorAll('.node');
-/** @type {{[key: string]: SVGGElement}} */
-var nodeMap = {};
-nodes.forEach(function (n) {
-  /** @type {SVGTitleElement} */
-  var title = n.querySelector('title');
-  var titleText = title && title.textContent;
-  if (titleText) {
-    nodeMap[titleText.trim()] = n;
+<script>document.body.onmouseover = getHighlightHandler();
+
+function getHighlightHandler() {
+  /** @type {string} */
+  var currentHighlightedTitle;
+
+  /** @type {NodeListOf<SVGGElement>} */
+  var nodes = document.querySelectorAll(".node");
+  /** @type {NodeListOf<SVGGElement>} */
+  var edges = document.querySelectorAll(".edge");
+  var title2ElementMap = new Title2ElementMap(edges, nodes);
+
+  /** @param {MouseEvent} pMouseEvent */
+  return function highlightHandler(pMouseEvent) {
+    var closestNodeOrEdge = pMouseEvent.target.closest(".edge, .node");
+    var closestTitleText = getTitleText(closestNodeOrEdge);
+
+    if (!(currentHighlightedTitle === closestTitleText)) {
+      title2ElementMap.get(currentHighlightedTitle).forEach(removeHighlight);
+      title2ElementMap.get(closestTitleText).forEach(addHighlight);
+      currentHighlightedTitle = closestTitleText;
+    }
+  };
+}
+
+/**
+ *
+ * @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), {});
   }
-});
-/** @type {{[key: string]: SVGGElement[]}} */
-var edgeMap = {};
-edges.forEach(function (e) {
-  /** @type {SVGTitleElement} */
-  var title = e.querySelector('title');
-  var titleText = title && title.textContent;
-  if (titleText) {
-    titleText = titleText.trim();
-    var nodeNames = titleText.split(/\s*->\s*/);
-    edgeMap[titleText] = [nodeMap[nodeNames[0]], nodeMap[nodeNames[1]]];
-    (edgeMap[nodeNames[0]] || (edgeMap[nodeNames[0]] = [])).push(e);
-    (edgeMap[nodeNames[1]] || (edgeMap[nodeNames[1]] = [])).push(e);
+  /**
+   * @param {NodeListOf<SVGGElement>} pNodes
+   * @return {{[key: string]: SVGGElement}}
+   */
+  function buildTitle2NodeMap(pNodes) {
+    return nodeListToArray(pNodes).reduce(addNodeToMap, {});
   }
-});
 
-document.body.onmouseover = onmouseover;
+  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);
 
-/** @type {string} */
-var current;
-/** @param ev {MouseEvent} */
-function onmouseover(ev) {
-  /** @type {Element} */
-  var target = ev.target;
-  /** @type {SVGGElement} */
-  var nodeOrEdge = target.closest('.edge, .node');
+        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 = nodeOrEdge && nodeOrEdge.querySelector('title');
+  var title = pGElement && pGElement.querySelector("title");
+  /** @type {string} */
   var titleText = title && title.textContent;
+
   if (titleText) {
     titleText = titleText.trim();
   }
-  if (current === titleText) {
-    return;
-  }
-  var old = current && edgeMap[current];
-  if (old) {
-    old.forEach(function (g) {
-      g.classList.remove('current');
-    });
+  return titleText;
+}
+
+/**
+ * @param {NodeListOf<Element>} pNodeList
+ * @return {Element[]}
+ */
+function nodeListToArray(pNodeList) {
+  var lReturnValue = [];
+
+  pNodeList.forEach(function (pElement) {
+    lReturnValue.push(pElement);
+  });
+
+  return lReturnValue;
+}
+
+/**
+ * @param {SVGGElement} pGElement
+ */
+function removeHighlight(pGElement) {
+  if (pGElement && pGElement.classList) {
+    pGElement.classList.remove("current");
   }
-  current = titleText;
-  var currentItems = edgeMap[current];
-  if (currentItems) {
-    currentItems.forEach(function (g) {
-      g.classList.add('current');
-    });
+}
+
+/**
+ * @param {SVGGElement} pGroup
+ */
+function addHighlight(pGroup) {
+  if (pGroup && pGroup.classList) {
+    pGroup.classList.add("current");
   }
 }
-</script>
-  </body>
+</script>  </body>
 </html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mscgen_js",
-  "version": "3.1.17",
+  "version": "3.1.18",
   "description": "Turns text into sequence charts. A faithfull implementation of the mscgen sequence chart language in javascript.",
   "author": "Sander Verweij",
   "license": "GPL-3.0",
@@ -83,7 +83,7 @@
   "eslintConfig": {
     "extends": "standard",
     "rules": {
-      "no-var":"off"
+      "no-var": "off"
     },
     "env": {
       "browser": true