fix: Refactor the JS part and fix issue when selecting/unselecting nodes

ansibleplaybookgrapher/data/graph.css

@@ -1,10 +1,16 @@
+/**
+ Hover on nodes, edges, path and polygon
+ */
 .node:hover, .edge:hover, path:hover, path + polygon:hover {
     cursor: pointer;
     stroke-width: 3;
     font-weight: bolder;
 }
 
-.my_hover {
+/**
+ Manually added class by the script highlight-hover.js when hovering on plays and roles
+ */
+.highlight {
     cursor: pointer;
     stroke-width: 3;
     font-weight: bolder;

ansibleplaybookgrapher/data/highlight-hover.js

@@ -1,58 +1,108 @@
-const HOVER_CLASS = "my_hover";
+/**
+ * This file contains the functions responsible to highlight the plays, roles and tasks when rendering the SVG file in a browser
+ * or any SVG reader that support Javascript.
+ */
 
-var selectedElement = null;
+/**
+ * The name of the CSS class for highlighted elements
+ * @type {string}
+ */
+const HIGHLIGHT_CLASS = "highlight";
 
-function addClass(rootElement) {
+/**
+ * The current selected element on the graph
+ * @type {null}
+ */
+let currentSelectedElement = null;
+
+/**
+ * Highlight the linked nodes of the given root element
+ * @param rootElement
+ */
+function highlightLinkedNodes(rootElement) {
     $(rootElement).find('link').each(function (index, element) {
-        var target = $(element).attr('target');
-        var currentElement = $('#' + target);
-        currentElement.addClass(HOVER_CLASS);
+        let target = $(element).attr('target');
+        let currentElement = $('#' + target);
+        currentElement.addClass(HIGHLIGHT_CLASS);
 
-        addClass(currentElement);
+        // Recursively highlight
+        highlightLinkedNodes(currentElement);
     })
 }
 
-function removeClass(rootElement, hover) {
-    $(rootElement).find('link').each(function (index, element) {
-        if ($(rootElement).attr('id') !== $(selectedElement).attr('id') || !hover) {
-            var target = $(element).attr('target');
-            var currentElement = $('#' + target);
-            currentElement.removeClass(HOVER_CLASS);
 
-            removeClass(currentElement);
-        }
+/**
+ * Unhighlight the linked nodes of the given root element
+ * @param {Element} rootElement
+ * @param {boolean} isHover True when we are coming from a mouseleave event. In that case, we should not unhighlight if
+ * the rootElement is the current selected element
+ */
+function unHighlightLinkedNodes(rootElement, isHover) {
 
-    })
-}
+    // Do not unhighlight the current current selected element
+    if ($(rootElement).attr('id') !== $(currentSelectedElement).attr('id') || !isHover) {
 
-function hoverIn(event) {
-    addClass(event.currentTarget);
-}
+        $(rootElement).find('link').each(function (index, element) {
+            let target = $(element).attr('target');
+            let currentElement = $('#' + target);
+            currentElement.removeClass(HIGHLIGHT_CLASS);
 
-function hoverOut(event) {
-    removeClass(event.currentTarget, true);
-}
-
-function clickOnElement(event) {
-    var newElement = event.currentTarget;
-
-    if ($(newElement).attr('id') === $(selectedElement).attr('id')) {
-        removeClass(selectedElement, false);
-    } else {
-        removeClass(selectedElement);
-        addClass(newElement)
+            // Recursively unhighlight
+            unHighlightLinkedNodes(currentElement, isHover);
+        })
     }
 
-    selectedElement = newElement;
+}
+
+/**
+ * Hover handler for mouseenter event
+ * @param event
+ */
+function hoverMouseEnter(event) {
+    highlightLinkedNodes(event.currentTarget);
+}
+
+/**
+ * Hover handler for mouseleave event
+ * @param event
+ */
+function hoverMouseLeave(event) {
+    unHighlightLinkedNodes(event.currentTarget, true);
+}
+
+/**
+ * Handler when clicking on some elements
+ * @param event
+ */
+function clickOnElement(event) {
+    let newClickedElement = $(event.currentTarget);
+
+    if (newClickedElement.attr('id') === $(currentSelectedElement).attr('id')) { // clicking again on the same element
+        newClickedElement.removeClass(HIGHLIGHT_CLASS);
+        unHighlightLinkedNodes(currentSelectedElement, false);
+        currentSelectedElement = null;
+    } else { // clicking on a different node
+
+        // Remove highlight from all the nodes linked the current selected node
+        unHighlightLinkedNodes(currentSelectedElement, false);
+
+        newClickedElement.addClass(HIGHLIGHT_CLASS);
+        highlightLinkedNodes(newClickedElement);
+        currentSelectedElement = newClickedElement;
+    }
 }
 
 
 $("#svg").ready(function () {
+    let plays = $("g[id^=play_]");
+    let roles = $("g[id^=role_]");
 
-    $("g[id^=play_]").hover(hoverIn, hoverOut);
-    $("g[id^=role_]").hover(hoverIn, hoverOut);
+    // Set hover and click events on the plays
+    plays.hover(hoverMouseEnter, hoverMouseLeave);
+    plays.click(clickOnElement);
 
-    $("g[id^=play_]").click(clickOnElement);
-    $("g[id^=role_]").click(clickOnElement);
+    // Set hover and click events on the roles
+    roles.hover(hoverMouseEnter, hoverMouseLeave);
+    roles.click(clickOnElement);
 
 });