4.0.2

sverweij · Aug 21, 2022 · b804838 · b804838
1 parent fdfe1aa
commit b804838
Show file tree

Hide file tree

Showing 2 changed files with 170 additions and 11 deletions.
diff --git a/docs/dependencygraph.html b/docs/dependencygraph.html
@@ -9,8 +9,7 @@
       .node.current path,
       .node:active polygon,
       .node:hover polygon,
-      .node.current polygon
-       {
+      .node.current polygon {
         stroke: fuchsia;
         stroke-width: 2;
       }
@@ -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.50.0 (20211204.2007)
+<!-- Generated by graphviz version 5.0.0 (20220707.1540)
  -->
 <!-- Title: dependency&#45;cruiser output Pages: 1 -->
 <svg width="700pt" height="480pt"
@@ -592,30 +651,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,
+  };
+}
 
 /**
  *
@@ -726,6 +843,12 @@
   return lReturnValue;
 }
 
+function resetNodesAndEdges() {
+  nodeListToArray(document.querySelectorAll(".current")).forEach(
+    removeHighlight
+  );
+}
+
 /**
  * @param {SVGGElement} pGElement
  */
@@ -743,5 +866,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>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mscgen_js",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "Turns text into sequence charts. A faithfull implementation of the mscgen sequence chart language in javascript.",
   "author": "Sander Verweij",
   "license": "GPL-3.0",