Zoom pan support (#22)

* tab to spaces * Add zoom and pan on svg render
dreampuf · Jun 17, 2021 · 94a1953 · 94a1953
1 parent 15d82b6
commit 94a1953
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 53 deletions.
diff --git 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;
+        }
+
     </style>
 </head>
 <body>
@@ -170,6 +182,10 @@
         <input type="checkbox" disabled=""> Show raw output
     </label>
 
+    <label>
+      <a href="#" target="_blank" id="download">Download</a>
+    </label>
+
     <label>
         <input type="button" value="Share" id="share">
     </label>
@@ -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,24 +406,29 @@
         // 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) {
           if (err) {
             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);
 </script>
 <script src="viz.js" type="text/javascript" charset="utf-8"></script>
+<script src="svg-pan-zoom.min.js" type="text/javascript" charset="utf-8"></script>
 </body>
 </html>