From 916f73927d054fcc8b22a7d3bef4122f72860ce0 Mon Sep 17 00:00:00 2001
From: Arne Keller <arne.keller@student.kit.edu>
Date: Mon, 21 Jun 2021 10:53:03 +0200
Subject: [PATCH] Highlighting of types on hover

See issue #5
---
 frontend/src/mathjax-setup.js                 | 52 ++++++++++++++++---
 .../latexcreator/LatexCreatorType.java        |  5 +-
 2 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/frontend/src/mathjax-setup.js b/frontend/src/mathjax-setup.js
index 63547ed..eb4a60c 100644
--- a/frontend/src/mathjax-setup.js
+++ b/frontend/src/mathjax-setup.js
@@ -101,13 +101,20 @@ window.MathJax = {
                 html.render();
                 const hostTag = root.host.tagName.toLowerCase();
                 if (hostTag !== "tc-proof-tree") {
-                    if (callback != null) {
+                    if (callback) {
                         callback(html);
                     }
                     return html;
                 }
+                // setup style container for styles applied on hover
+                let hoverStyles = root.querySelector("#typicalc-hover-styles");
+                if (!hoverStyles) {
+                    hoverStyles = document.createElement('style');
+                    hoverStyles.id = "typicalc-hover-styles";
+                    root.querySelector("mjx-head").appendChild(hoverStyles);
+                }
                 // set the size of the rendered SVG to the size of the container element
-                if (root.querySelector("#style-fixes") === null) {
+                if (!root.querySelector("#style-fixes")) {
                     const style = document.createElement('style');
                     style.innerHTML = "\
                         mjx-doc, mjx-body, mjx-container, #tc-content, svg {\
@@ -115,16 +122,49 @@ window.MathJax = {
                         }\
                         mjx-container {\
                             margin: 0 !important;\
+                        }\
+                        .typicalc-type {\
+                            stroke: transparent; stroke-width: 600px; pointer-events: all;\
                         }";
-                    if (hostTag === "tc-proof-tree") {
-                        style.innerHTML += "svg { width: 100%; }";
-                    }
+                    style.innerHTML += "svg { width: 100%; }";
                     style.id = "style-fixes";
                     root.querySelector("mjx-head").appendChild(style);
                 }
-                if (callback != null) {
+                if (callback) {
                     callback(html);
                 }
+                // listen for hover events on types
+                // the class "typicalc-type" is set in LatexCreatorType
+                root.querySelector("#step0").addEventListener("mouseover", e => {
+                    let typeTarget = e.target;
+                    let counter = 0;
+                    while (!typeTarget.classList.contains("typicalc-type")) {
+                        typeTarget = typeTarget.parentElement;
+                        counter++;
+                        if (counter > 3) {
+                            return;
+                        }
+                    }
+                    const typeClass = typeTarget.classList[1];
+                    hoverStyles.innerHTML = "." + typeClass + " { color: red; }";
+                });
+                root.querySelector("#step0").addEventListener("mouseout", e => {
+                    let typeTarget = e.target;
+                    let counter = 0;
+                    while (!typeTarget.classList.contains("typicalc-type")) {
+                        typeTarget = typeTarget.parentElement;
+                        counter++;
+                        if (counter > 3) {
+                            return;
+                        }
+                    }
+                    if (!typeTarget.classList.contains("typicalc-type")) {
+                        console.log(typeTarget);
+                        return;
+                    }
+                    console.log(typeTarget.classList[1]);
+                    hoverStyles.innerHTML = "";
+                });
                 return html;
             }
 
diff --git a/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/latexcreator/LatexCreatorType.java b/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/latexcreator/LatexCreatorType.java
index 2dd0bd3..1b2ab27 100644
--- a/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/latexcreator/LatexCreatorType.java
+++ b/src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/latexcreator/LatexCreatorType.java
@@ -15,6 +15,7 @@ import static edu.kit.typicalc.view.content.typeinferencecontent.latexcreator.La
  * @see Type
  */
 public class LatexCreatorType implements TypeVisitor {
+    private final Type type;
     private static final int MAX_LENGTH = 100000; // 100 KB
 
     private final StringBuilder latex = new StringBuilder();
@@ -26,6 +27,7 @@ public class LatexCreatorType implements TypeVisitor {
      * @param type the type
      */
     protected LatexCreatorType(Type type) {
+        this.type = type;
         type.accept(this);
     }
 
@@ -33,7 +35,8 @@ public class LatexCreatorType implements TypeVisitor {
      * @return the generated LaTeX code
      */
     protected String getLatex() {
-        return latex.toString();
+        // this class is used in frontend/src/mathjax-setup.js
+        return "\\class{typicalc-type typicalc-type-" + type.hashCode() + "}{" + latex + "}";
     }
 
     @Override