diff --git a/src/lib/component/content/Graph.svelte b/src/lib/component/content/Graph.svelte index bc5d8af..0a404f8 100644 --- a/src/lib/component/content/Graph.svelte +++ b/src/lib/component/content/Graph.svelte @@ -58,11 +58,11 @@ } get _height() { - return Number(this.getAttribute("height")); + return +this.getAttribute("height"); } get _width() { - return Math.min(Number(this.getAttribute("width")), this.clientWidth); + return Math.min(+this.getAttribute("width"), this.clientWidth); } recompile() { @@ -82,7 +82,9 @@ this.prevWidth = this._width; this.prevHeight = this._height; this.prevDirected = this._directed; - let graph = this._directed ? new Graph() : new UndirectedGraph(); + let graph = this._directed + ? new Graph() + : new UndirectedGraph(); let [vertices, edges] = evaluate( this.prevCode, this.prevWidth, @@ -120,7 +122,9 @@ displayEdgesWeight: false, displayEdgesLabel: true, drawEdgesAsArcs: true, - }) + GRAPH_COMMON + KATEX_COMMON; + }) + + GRAPH_COMMON + + KATEX_COMMON; // Post-process // Double line let doubleCircle = this.root.querySelectorAll(".double circle"); @@ -133,6 +137,12 @@ c.parentNode.insertBefore(newCircle, c); } let text = this.root.querySelectorAll("text"); + let textGroup = document.createElementNS( + "http://www.w3.org/2000/svg", + "g", + ); + textGroup.setAttribute("class", "text"); + this.root.querySelector("svg").appendChild(textGroup); for (let t of [...text]) { const size = (content) => { let div = document.createElement("div"); @@ -148,10 +158,23 @@ "http://www.w3.org/2000/svg", "foreignObject", ); - let content = katex.renderToString(t.textContent.replaceAll("'", "\\").replaceAll("$", "")); + let content = katex.renderToString( + t.textContent.replaceAll("'", "\\").replaceAll("$", ""), + ); let { width, height } = size(content); - dom.setAttribute("x", t.getAttribute("x") - width / 2); - dom.setAttribute("y", t.getAttribute("y") - height / 2); + let x = +t.getAttribute("x") - width / 2; + let y = +t.getAttribute("y") - height / 2; + let p = t.parentNode; + while (p.tagName !== "svg") { + let transform = /translate\(([^,]+),([^,]+)\)/.exec(p.getAttribute("transform")); + if (transform) { + x += +transform[1]; + y += +transform[2]; + } + p = p.parentNode; + } + dom.setAttribute("x", x); + dom.setAttribute("y", y); dom.setAttribute("width", width); dom.setAttribute("height", height); dom.setAttribute( @@ -162,8 +185,11 @@ "dominant-baseline", t.getAttribute("dominant-baseline"), ); - dom.innerHTML = `${content}`; - t.parentNode.replaceChild(dom, t); + let span = document.createElement("span"); + span.innerHTML = content; + dom.appendChild(span); + t.parentNode.removeChild(t); + textGroup.appendChild(dom); } this.pending = false; } @@ -191,4 +217,4 @@ - \ No newline at end of file +