devtools: dots-viewer: Add a button to download the SVG file

Part-of: <https://gitlab.freedesktop.org/gstreamer/gstreamer/-/merge_requests/8696>
This commit is contained in:
Thibault Saunier 2025-03-21 09:00:04 -03:00 committed by GStreamer Marge Bot
parent a1876eee74
commit fdcd0ddca0

View File

@ -48,6 +48,10 @@ furnished to do so, subject to the following conditions:
Click node to highlight<br/>Shift-Ctrl-scroll or w/s to zoom<br/>Esc to unhighlight
</div>
<div class="floating-rectangle" id="actions" style="top: auto; bottom: 100px; left: 10px;">
<button id="save-svg" class="btn btn-primary btn-sm" style="margin-right: 5px;">Save SVG</button>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
@ -82,11 +86,25 @@ furnished to do so, subject to the following conditions:
} else if (evt.key == "s") {
gv.scaleInView((gv.zoom.percentage - 100) || 100);
}
})
});
$("#save-svg").click(function() {
const svgElement = $("#graph svg")[0];
const svgData = new XMLSerializer().serializeToString(svgElement);
const blob = new Blob([svgData], {type: "image/svg+xml;charset=utf-8"});
const url = URL.createObjectURL(blob);
const title = document.getElementById("title").textContent.trim();
const downloadLink = document.createElement("a");
downloadLink.href = url;
downloadLink.download = title + ".svg";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
URL.revokeObjectURL(url);
});
}
});
});
</script>
</body>
</html>