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

Move tooltip when moving the tree

Browse Source
This commit is contained in:
Arne Keller 2021-07-27 12:38:36 +02:00
parent eff5e4340e
commit c9e8fc7568
1 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/mathjax-proof-tree.ts
View File

@ -276,6 +276,10 @@ class MathjaxProofTree extends MathjaxAdapter {
(svg.children[1] as SVGGraphicsElement).transform.baseVal[0].matrix.e += offset.e + svgWidth / 2 - conclusionWidth / 2; (svg.children[1] as SVGGraphicsElement).transform.baseVal[0].matrix.e += offset.e + svgWidth / 2 - conclusionWidth / 2;
console.timeEnd('stepCalculation'); console.timeEnd('stepCalculation');
const thisShadowRoot = this.shadowRoot;
const hoverTextElID = "typicalc-hover-explainer";
let defElBackground: SVGRectElement | null;
if (nodeIterator.length >= 3) { if (nodeIterator.length >= 3) {
// should not be used on empty SVGs // should not be used on empty SVGs
window.svgPanZoomFun(svg, { window.svgPanZoomFun(svg, {
@ -316,6 +320,20 @@ class MathjaxProofTree extends MathjaxAdapter {
instance.panBy({x: ev.deltaX - pannedX, y: ev.deltaY - pannedY}) instance.panBy({x: ev.deltaX - pannedX, y: ev.deltaY - pannedY})
pannedX = ev.deltaX pannedX = ev.deltaX
pannedY = ev.deltaY pannedY = ev.deltaY
// also move the tooltip
let explainer = thisShadowRoot.getElementById(hoverTextElID);
if (explainer) {
const ctm1 = svg.getBoundingClientRect();
const ctm2 = defElBackground!.getBoundingClientRect();
explainer.style.left = (ctm2.left - ctm1.left) + "px";
explainer.style.top = (ctm2.bottom - ctm1.top) + "px";
// TODO(performance): this should be more efficient, but somehow flickers
/*
const dx = (ctm2.left - ctm1.left) - explainer.offsetLeft;
const dy = (ctm2.bottom - ctm1.top) - explainer.offsetTop;
explainer.style.transform = "translate(" + dx + "px," + dy + "px)";
*/
}
}); });
let initialScale = 1; let initialScale = 1;
@ -361,7 +379,6 @@ class MathjaxProofTree extends MathjaxAdapter {
const viewport = svg.querySelector("#step0")!.parentNode as SVGGraphicsElement; const viewport = svg.querySelector("#step0")!.parentNode as SVGGraphicsElement;
const handleMouseEvent = (e: MouseEvent, mouseIn: boolean) => { const handleMouseEvent = (e: MouseEvent, mouseIn: boolean) => {
// remove previous tooltip, if possible // remove previous tooltip, if possible
const hoverTextElID = "typicalc-hover-explainer";
let explainer = this.shadowRoot!.getElementById(hoverTextElID); let explainer = this.shadowRoot!.getElementById(hoverTextElID);
if (explainer) { if (explainer) {
explainer.parentNode!.removeChild(explainer); explainer.parentNode!.removeChild(explainer);
@ -400,7 +417,7 @@ class MathjaxProofTree extends MathjaxAdapter {
const svgRect = defEl.getBBox(); const svgRect = defEl.getBBox();
defEl.transform.baseVal[0].matrix.e = -transform.e - svgRect.width + offsetX + 1000; defEl.transform.baseVal[0].matrix.e = -transform.e - svgRect.width + offsetX + 1000;
defEl.transform.baseVal[0].matrix.f = -transform.f - 5500 + offsetY; defEl.transform.baseVal[0].matrix.f = -transform.f - 5500 + offsetY;
let defElBackground = this.shadowRoot!.getElementById(defId + "-background") as SVGRectElement | null; defElBackground = this.shadowRoot!.getElementById(defId + "-background") as SVGRectElement | null;
if (!defElBackground) { if (!defElBackground) {
defElBackground = document.createElementNS("http://www.w3.org/2000/svg", "rect"); defElBackground = document.createElementNS("http://www.w3.org/2000/svg", "rect");
defElBackground.id = defId + "-background"; defElBackground.id = defId + "-background";