This commit is contained in:
Tim Lorsbach
2026-04-17 19:39:54 +02:00
parent ca0508d96a
commit d1a00f71b4
19 changed files with 412 additions and 115 deletions

View File

@ -637,44 +637,54 @@ function draw(pathway, elem) {
node.filter(d => !d.pseudo).each(function (d, i) {
const g = d3.select(this);
// Parse the SVG string
const parser = new DOMParser();
const svgDoc = parser.parseFromString(d.image_svg, "image/svg+xml");
const svgElem = svgDoc.documentElement;
if (d.is_pes) {
g.append("svg:image")
.attr("xlink:href", d.image)
.attr("width", 40)
.attr("height", 40)
.attr("x", -20)
.attr("y", -20);
} else {
// Parse the SVG string
const parser = new DOMParser();
const svgDoc = parser.parseFromString(d.image_svg, "image/svg+xml");
const svgElem = svgDoc.documentElement;
// Create a unique prefix per node
const prefix = `node-${i}-`;
// Create a unique prefix per node
const prefix = `node-${i}-`;
// Rename all IDs and fix <use> references
svgElem.querySelectorAll('[id]').forEach(el => {
const oldId = el.id;
const newId = prefix + oldId;
el.id = newId;
// Rename all IDs and fix <use> references
svgElem.querySelectorAll("[id]").forEach(el => {
const oldId = el.id;
const newId = prefix + oldId;
el.id = newId;
const XLINK_NS = "http://www.w3.org/1999/xlink";
// Update <use> elements that reference this old ID
const uses = Array.from(svgElem.querySelectorAll('use')).filter(
u => u.getAttributeNS(XLINK_NS, 'href') === `#${oldId}`
);
const XLINK_NS = "http://www.w3.org/1999/xlink";
// Update <use> elements that reference this old ID
const uses = Array.from(svgElem.querySelectorAll("use")).filter(
u => u.getAttributeNS(XLINK_NS, "href") === `#${oldId}`
);
uses.forEach(u => {
u.setAttributeNS(XLINK_NS, 'href', `#${newId}`);
uses.forEach(u => {
u.setAttributeNS(XLINK_NS, "href", `#${newId}`);
});
});
});
g.node().appendChild(svgElem);
g.node().appendChild(svgElem);
const vb = svgElem.viewBox.baseVal;
const svgWidth = vb.width || 40;
const svgHeight = vb.height || 40;
const vb = svgElem.viewBox.baseVal;
const svgWidth = vb.width || 40;
const svgHeight = vb.height || 40;
const scale = (nodeRadius * 2) / Math.max(svgWidth, svgHeight);
const scale = (nodeRadius * 2) / Math.max(svgWidth, svgHeight);
g.select("svg")
.attr("width", svgWidth * scale)
.attr("height", svgHeight * scale)
.attr("x", -svgWidth * scale / 2)
.attr("y", -svgHeight * scale / 2);
}
g.select("svg")
.attr("width", svgWidth * scale)
.attr("height", svgHeight * scale)
.attr("x", -svgWidth * scale / 2)
.attr("y", -svgHeight * scale / 2);
});
// add element to nodes array