image download button

css/pedigreejs.css

@@ -8,6 +8,5 @@
 .addsibling, .addchild {
 	cursor: default;
 }
-.pull-right { float: right; margin-left:.3em; line-height: 1; }
-.pull-left { float: left; margin-right:.3em; line-height: 1;  }
+.pe-2 { padding-right: 0.75em; }
 svg {overflow:hidden}

es/io.js

@@ -29,22 +29,9 @@ export function addIO(opts) {
 		svg_download(get_printable_svg(opts));
 	});
 
-	$('#png_download').click(function(_e) {
-		let deferred = svg2img($('svg'), "pedigree");
-		$.when.apply($,[deferred]).done(function() {
-			let obj = getByName(arguments, "pedigree");
-			if(utils.isEdge() || utils.isIE()) {
-				let html="<img src='"+obj.img+"' alt='canvas image'/>";
-				let newTab = window.open();		// pop-ups need to be enabled
-				newTab.document.write(html);
-			} else {
-				let a	  = document.createElement('a');
-				a.href	 = obj.img;
-				a.download = 'plot.png';
-				a.target   = '_blank';
-				document.body.appendChild(a); a.click(); document.body.removeChild(a);
-			}
-		});
+	$('#png_download, .fa-file-image').click(function(_e) {
+		let resolution = 1;
+		img_download(opts, resolution, "image/png");
 	});
 }
 
@@ -77,6 +64,27 @@ function copyStylesInline(destinationNode, sourceNode) {
    }
 }
 
+/**
+ * Export pedigree as image, e.g. PNG
+ */
+export function img_download(opts, resolution, img_type) {
+	let deferred = svg2img($('#'+opts.targetDiv).find('svg'), "pedigree", {resolution: resolution, img_type: img_type});
+	$.when.apply($,[deferred]).done(function() {
+		let obj = getByName(arguments, "pedigree");
+		if(utils.isEdge() || utils.isIE()) {
+			let html="<img src='"+obj.img+"' alt='canvas image'/>";
+			let newTab = window.open();		// pop-ups need to be enabled
+			newTab.document.write(html);
+		} else {
+			let a	  = document.createElement('a');
+			a.href	 = obj.img;
+			a.download = 'plot.png';
+			a.target   = '_blank';
+			document.body.appendChild(a); a.click(); document.body.removeChild(a);
+		}
+	});
+}
+
 /**
  * Given a SVG document element convert to image (e.g. jpeg, png - default png).
  */

es/pbuttons.js

@@ -16,25 +16,27 @@ export function addButtons(options) {
 		btn_target: 'pedigree_history'
     }, options );
 
-	let btns = [{"fa": "fa-undo pull-left", "title": "undo"},
-				{"fa": "fa-redo pull-left", "title": "redo"},
-				{"fa": "fa-refresh pull-left", "title": "reset"}];
+	let btns = [{"fa": "fa-file-image", "title": "download PNG image"},
+				{"fa": "fa-undo", "title": "undo"},
+				{"fa": "fa-redo", "title": "redo"},
+				{"fa": "fa-refresh", "title": "reset"}];
 
-	btns.push({"fa": "fa-crosshairs pull-right", "title": "scale-to-fit"});
+	btns.push({"fa": "fa-crosshairs", "title": "scale-to-fit"});
 	if(opts.zoomSrc && (opts.zoomSrc.indexOf('button') > -1)) {
 		if(opts.zoomOut !== 1)
-			btns.push({"fa": "fa-minus-circle pull-right", "title": "zoom-out"});
+			btns.push({"fa": "fa-minus-circle", "title": "zoom-out"});
 		if(opts.zoomIn !== 1)
-			btns.push({"fa": "fa-plus-circle pull-right", "title": "zoom-in"});
+			btns.push({"fa": "fa-plus-circle", "title": "zoom-in"});
 	}
-	btns.push({"fa": "fa-arrows-alt pull-right", "title": "fullscreen"});
+	btns.push({"fa": "fa-arrows-alt", "title": "fullscreen"});
 
 	let lis = "";
 	for(let i=0; i<btns.length; i++) {
 		lis += '<span>';
-		lis += '&nbsp;<i class="fa fa-lg ' + btns[i].fa + '" ' +
-		               (btns[i].fa === "fa-arrows-alt pull-right" ? 'id="fullscreen" ' : '') +
-		               ' aria-hidden="true" title="'+ btns[i].title +'"></i>';
+		lis += '<i class="fa fa-lg ' + btns[i].fa + ' pe-2" aria-hidden="true" title="'+ btns[i].title + '"' +
+		(btns[i].fa === "fa-arrows-alt" ? 'id="fullscreen" ' : '') +
+		'></i>';
+
 		lis += '</span>';
 	}
 	$( "#"+opts.btn_target ).append(lis);
@@ -108,7 +110,10 @@ function addPbuttonEvents(opts) {
 			         reset, opts);
 		} else if ($(e.target).hasClass('fa-crosshairs')) {
 			scale_to_fit(opts);
+		} else if ($(e.target).hasClass('fa-file-image')) {
+			return;
 		} 
+
 		// trigger fhChange event
 		$(document).trigger('fhChange', [opts]);
 	});