diff --git a/index.html b/index.html
index 8fbeec4..0e47f4e 100644
--- a/index.html
+++ b/index.html
@@ -111,6 +111,18 @@
z-index: 1;
}
+ #download {
+ font: bold 12px Arial;
+ text-decoration: none;
+ background-color: #EEEEEE;
+ color: #333333;
+ padding: 2px 6px 2px 6px;
+ border-top: 1px solid #CCCCCC;
+ border-right: 1px solid #333333;
+ border-bottom: 1px solid #333333;
+ border-left: 1px solid #CCCCCC;
+ }
+
@@ -170,6 +182,10 @@
Show raw output
+
+
@@ -196,6 +212,7 @@
t_stetus = -1,
reviewer = document.getElementById("review"),
scale = window.devicePixelRatio || 1,
+ downloadBtn = document.getElementById("download"),
editor = ace.edit("editor"),
lastHD = -1,
worker = null,
@@ -389,12 +406,18 @@
// https://stackoverflow.com/questions/18925210/download-blob-content-using-specified-charset
//const blob = new Blob(["\ufeff", svg], {type: 'image/svg+xml;charset=utf-8'});
const url = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(source);
+ downloadBtn.href = url;
+ downloadBtn.download = "graphviz.svg";
var a = document.createElement("a");
- a.href = url;
- a.target = "_blank";
- a.download = "graphviz.svg";
- a.appendChild(svg.documentElement);
+ var svgEl = svg.documentElement;
+ a.appendChild(svgEl);
reviewer.appendChild(a);
+ svgPanZoom(svgEl, {
+ zoomEnabled: true,
+ controlIconsEnabled: true,
+ fit: true,
+ center: true,
+ });
} else if (formatEl.value == "png-image-element") {
var resultWithPNGHeader = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(result)));
svgXmlToImage(resultWithPNGHeader, function (err, image) {
@@ -402,11 +425,10 @@
show_error(err)
return
}
- image.setAttribute("title", "Click to save it");
+ image.setAttribute("title", "graphviz");
+ downloadBtn.href = image.src;
+ downloadBtn.download = "graphviz.png";
var a = document.createElement("a");
- a.href = image.src;
- a.target = "_blank";
- a.download = "graphviz.png";
a.appendChild(image);
reviewer.appendChild(a);
})
@@ -438,60 +460,61 @@
rawEl.addEventListener("change", renderGraph);
share.addEventListener("click", copyShareURL);
- // Since apparently HTMLCollection does not implement the oh so convenient array functions
- HTMLOptionsCollection.prototype.indexOf = function(name) {
- for (let i = 0; i < this.length; i++) {
- if (this[i].value == name) {
- return i;
- }
- }
-
- return -1;
- };
+ // Since apparently HTMLCollection does not implement the oh so convenient array functions
+ HTMLOptionsCollection.prototype.indexOf = function(name) {
+ for (let i = 0; i < this.length; i++) {
+ if (this[i].value == name) {
+ return i;
+ }
+ }
+
+ return -1;
+ };
/* come from sharing */
- const params = new URLSearchParams(location.search.substring(1));
- if (params.has('engine')) {
- const engine = params.get('engine');
- const index = engineEl.options.indexOf(engine);
- if (index > -1) { // if index exists
- engineEl.selectedIndex = index;
- } else {
- show_error({ message: `invalid engine ${engine} selected` });
- }
- }
-
- if (params.has('raw')) {
- editor.getSession().setValue(params.get('raw'));
+ const params = new URLSearchParams(location.search.substring(1));
+ if (params.has('engine')) {
+ const engine = params.get('engine');
+ const index = engineEl.options.indexOf(engine);
+ if (index > -1) { // if index exists
+ engineEl.selectedIndex = index;
+ } else {
+ show_error({ message: `invalid engine ${engine} selected` });
+ }
+ }
+
+ if (params.has('raw')) {
+ editor.getSession().setValue(params.get('raw'));
renderGraph();
- } else if (params.has('compressed')) {
- const compressed = params.get('compressed');
- } else if (params.has('url')) {
- const url = params.get('url');
- let ok = false;
- fetch(url)
- .then(res => {
- ok = res.ok;
- return res.text();
- })
- .then(res => {
- if (!ok) {
- throw { message: res };
- }
-
- editor.getSession().setValue(res);
- renderGraph();
- }).catch(e => {
- show_error(e);
- });
- } else if (location.hash.length > 1) {
+ } else if (params.has('compressed')) {
+ const compressed = params.get('compressed');
+ } else if (params.has('url')) {
+ const url = params.get('url');
+ let ok = false;
+ fetch(url)
+ .then(res => {
+ ok = res.ok;
+ return res.text();
+ })
+ .then(res => {
+ if (!ok) {
+ throw { message: res };
+ }
+
+ editor.getSession().setValue(res);
+ renderGraph();
+ }).catch(e => {
+ show_error(e);
+ });
+ } else if (location.hash.length > 1) {
editor.getSession().setValue(decodeURIComponent(location.hash.substring(1)));
- } else if (editor.getValue()) { // Init
+ } else if (editor.getValue()) { // Init
renderGraph();
}
})(document);
+