arnekeller/Typicalc
1
0
Fork 0
mirror of https://gitlab.kit.edu/uskyk/typicalc.git synced 2024-09-18 17:55:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Highlighting of types on hover

Browse Source 
See issue #5
This commit is contained in:
Arne Keller 2021-06-21 10:53:03 +02:00
parent 5cabe75933
commit 916f73927d
2 changed files with 50 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/mathjax-setup.js
View File

@ -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;
}

5
src/main/java/edu/kit/typicalc/view/content/typeinferencecontent/latexcreator/LatexCreatorType.java
View File

@ -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