safari support

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 @@
 	<graph-inner {directed} {height} {width}>
 		<slot></slot>
 	</graph-inner>
-</div>
+</div>