arnekeller/Typicalc
1
0
Fork 0
mirror of https://gitlab.kit.edu/uskyk/typicalc.git synced 2024-11-13 20:53:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Highlight types in unification too

Browse Source 
see #5
This commit is contained in:
Arne Keller 2021-06-30 19:18:03 +02:00
parent 72c1823763
commit 1a988e1b7a
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -91,6 +91,7 @@ window.MathJax = {
if (root.getElementById("tc-content") === null) { if (root.getElementById("tc-content") === null) {
return; return;
} }
const unificationEl = root.host.parentElement.parentElement.querySelector("tc-unification");
const mjxContainer = root.querySelector<HTMLElement>("mjx-container"); const mjxContainer = root.querySelector<HTMLElement>("mjx-container");
if (mjxContainer) { if (mjxContainer) {
mjxContainer.innerHTML = ""; mjxContainer.innerHTML = "";
@ -113,8 +114,15 @@ window.MathJax = {
hoverStyles.id = "typicalc-hover-styles"; hoverStyles.id = "typicalc-hover-styles";
root.querySelector("mjx-head").appendChild(hoverStyles); root.querySelector("mjx-head").appendChild(hoverStyles);
} }
let hoverStylesUnification = unificationEl.shadowRoot.querySelector("#typicalc-hover-styles");
if (!hoverStylesUnification) {
hoverStylesUnification = document.createElement('style');
hoverStylesUnification.id = "typicalc-hover-styles";
unificationEl.shadowRoot.querySelector("mjx-head").appendChild(hoverStylesUnification);
}
// set the size of the rendered SVG to the size of the container element // set the size of the rendered SVG to the size of the container element
// enlarge hover area of certain elements // enlarge hover area of certain elements
//console.log(unificationEl);
if (!root.querySelector("#style-fixes")) { if (!root.querySelector("#style-fixes")) {
const style = document.createElement('style'); const style = document.createElement('style');
style.innerHTML = "\ style.innerHTML = "\
@ -155,7 +163,9 @@ window.MathJax = {
if (mouseIn) { if (mouseIn) {
if (isType) { if (isType) {
const typeClass = typeTarget.classList[1]; const typeClass = typeTarget.classList[1];
hoverStyles.innerHTML = "." + typeClass + " { color: red; }"; const css = "." + typeClass + " { color: red; }";
hoverStyles.innerHTML = css;
hoverStylesUnification.innerHTML = css;
} else if (isLabel) { } else if (isLabel) {
const defId = typeTarget.classList[1].replace("-label-", "-definition-"); const defId = typeTarget.classList[1].replace("-label-", "-definition-");
const defEl = root.getElementById(defId); const defEl = root.getElementById(defId);
@ -176,7 +186,6 @@ window.MathJax = {
defElBackground.setAttribute("height", svgRect.height + 1000); defElBackground.setAttribute("height", svgRect.height + 1000);
defEl.parentElement.insertBefore(defElBackground, defEl); defEl.parentElement.insertBefore(defElBackground, defEl);
} }
console.log(transform);
defElBackground.setAttribute("x", -transform.e - svgRect.width + offsetX); defElBackground.setAttribute("x", -transform.e - svgRect.width + offsetX);
defElBackground.setAttribute("y", -transform.f - 7000 + offsetY); defElBackground.setAttribute("y", -transform.f - 7000 + offsetY);
defElBackground.setAttribute("fill", "yellow"); defElBackground.setAttribute("fill", "yellow");
@ -184,10 +193,10 @@ window.MathJax = {
} else { } else {
if (isType) { if (isType) {
hoverStyles.innerHTML = ""; hoverStyles.innerHTML = "";
hoverStylesUnification.innerHTML = "";
} else if (isLabel) { } else if (isLabel) {
const defId = typeTarget.classList[1].replace("-label-", "-definition-"); const defId = typeTarget.classList[1].replace("-label-", "-definition-");
root.getElementById(defId).style.display = "none"; root.getElementById(defId).style.display = "none";
console.log(defId + "-background");
let defElBackground = root.getElementById(defId + "-background"); let defElBackground = root.getElementById(defId + "-background");
defElBackground.setAttribute("y", 10000); defElBackground.setAttribute("y", 10000);
defElBackground.setAttribute("fill", "transparent"); defElBackground.setAttribute("fill", "transparent");