Marvin JS Examples - Edit images

There is a DIV where generated images will appear.

<div id="imageContainer" class="image-container">
<p>Preparation of the page is in progress ...</p>
</div>

We need a hidden DIV with the highest z-index. It is the popup window with a close button and with the editor iframe. This popup window appears when a picture is edited.

<div id="popup" class="popup-window" style="position: fixed; left:0px; top:0px; z-index:100; visibility: hidden; opacity: 0;">
	<div class="wrapper">
		<div id="title-bar"><input id="close" type="button" class="close-button" value="Done ×"></div>
		<div id="sketchContainer">
			<iframe id="sketchImg" src="../editor.html" ></iframe>
		</div>
	</div>
</div>

You will need the following JS libraries for this example. They are bundled to the header of the example page. The first one is a promise implementation, the second loads MarvinJSUtil.

  <script src="../gui/lib/promise-1.0.0.min.js"></script>
  <script src="../js/marvinjslauncher.js"></script>

These global variables are also defined in this example:

• marvin - reference to the Marvin JS API
• marvinSketcherInstance - reference to the editor in the iframe
• editorControl - controller to open / close the editor and modify images
• molecules - molecule sources

Below you can see the code that is embedded into the $(document).ready(function handleDocumentReady (e) { ... }); block.

To hide the editor when the close button is submit, bind an event handler to the close button.

		$("#close").bind("click", function() {
			editorControl.close();
		});

For the image export, marvin object is required that encapsulates the whole Marvin JS API into a common namespace.
Since you have an editor in an iframe where marvin is already available, you can use this instance.
The MarvinJSUtil.getPackage(String) helps to receive its reference. When marvin is ready, the exportImages() function creates initial molecule images.

		MarvinJSUtil.getPackage("sketchImg").then(function (marvinNameSpace) {
			marvinNameSpace.onReady(function () {
				marvin = marvinNameSpace;
				exportImages();
			});
		}, function () {
			alert("Cannot retrieve marvin instance from iframe");
		});

Meanwhile, you can get the reference to the editor with the help of MarvinJSUtil.getEditor(String). When you received it, save it for later usage and attempt to open the editor with the selected image.

		MarvinJSUtil.getEditor("sketchImg").then(function (sketcherInstance) {
			marvinSketcherInstance = sketcherInstance;
			// open editor if any image is selected
			editorControl.open();
	  	}, function () {
			alert("Cannot retrieve sketcher instance from iframe");
		});

Thus, that has happened in the document.ready block.

As above mentioned, exportImages() function creates inital molecule images and insert them into the proper DIV element on the page. This function creates a new image tag for each molecule. The marvin.ImageExporter.mrvToDataUrl(String) function creates a image data URI from an MRV source. The MRV source is also inserted into the new image tag as the alt attribute.

	function exportImages() {
		var docFrag = document.createDocumentFragment();
		for(i=0; i<molecules.length;i++) {
		  var imgData = marvin.ImageExporter.mrvToDataUrl(molecules[i],"images/png",{});
		  if(imgData != null) {
			var dv = $('<div>', { class: "mol-cell" });
			$('<span>', { text: ("Compound #" + (i+1))}).appendTo(dv);
			$('<img>', { name: "pict", src: imgData, alt: escape(molecules[i]), onclick:"clickOnImage(this)"}).appendTo(dv);
			dv.appendTo(docFrag);
		  }
	  	}
		$('<div>', { class: "table-bottom" }).appendTo(docFrag);
	  	$("#imageContainer").append(docFrag);
	}

The editorControl is responsible to show the editor with the proper structure or hide it and refresh its image. The currentPict is a reference to the <img> from the DOM that you would like to edit.
If it is null, it means that no image has been selected yet to edit. The molecule source for an image is stored in its alt attribute.

	var editorControl = (function() {

		var currentPict = null;

		var controlObject = {
			"picture" : function picture(pict) {
				currentPict = pict;
			}
			,"open" : function openEditor() {
				if(currentPict != null) {
					marvinSketcherInstance.importStructure("mrv", unescape(currentPict.alt));
					$("#popup").css("visibility", "visible");
					$("#popup").css("opacity", 1);
				}
			}
			,"close" : function closeEditor() {
				if(marvinSketcherInstance != null) {
					var cp = currentPict;
					marvinSketcherInstance.exportStructure("mrv").then(function(s) {
						cp.alt = escape(s);
						cp.src = marvin.ImageExporter.mrvToDataUrl(s,"images/png",{});
					}, function(error) {
						alert(error);
					});
				}
				$("#popup").css("visibility", "hidden");
				$("#popup").css("opacity", 0);
			}
		};
		return controlObject;
	}());
	

When a click event is invoked on an <img> tag, the clickOnImage function is performed. It passes the reference of the current image to the editorControl and ask it to open the editor.

	function clickOnImage(pict) {
		editorControl.picture(pict);
		editorControl.open();
	}