Marvin JS Examples - Demo

In this example, you can import a molecule from MDL molfile or MRV format into the editor with the help of the Import and Paste buttons. While the Import button overwrites the canvas content, submitting of the Paste button preserves the current structure and appends the new one.

With the Molfile Export and MRV Export buttons, you can retrieve canvas content in the desired format.

In this example, you can also control display settings of the editor with the proper checkboxes.

You can find the commented code below:

The InputControllerClass is responsible for the input form that involves the Import, Paste, Reset, Mol Export, MRV Export buttons, the format selector combo box and the text area for molecule source. It manages the click events of the buttons and provides functions to get/set text from/to the text box.

		
		var InputControllerClass = (function () {

			var delay = 5;

			function InputControllerClass (importButton, pasteButton, formatDropdown, resetButton,	molExportButton, mrvExportButton, srcTextBox) {

				this.importButton		= importButton;
				this.pasteButton		= pasteButton;
				this.formatDropdown		= formatDropdown;
				this.resetButton		= resetButton;
				this.molExportButton	= molExportButton;
				this.mrvExportButton 	= mrvExportButton;
				this.srcTextBox 		= srcTextBox;
				this.init();
			}

			InputControllerClass.prototype.init = function init () {
				this.importButton.on("click", $.proxy(this.handleImportBtnClick, this));
				this.pasteButton.on("click", $.proxy(this.handlePasteBtnClick, this));
				this.resetButton.on("click", $.proxy(this.clearTxt, this));
				this.molExportButton.on("click", $.proxy(this.handleMolExportBtnClick, this));
				this.mrvExportButton.on("click", $.proxy(this.handleMrvExportBtnClick, this));
			};

			InputControllerClass.prototype.handleImportBtnClick = function handleImportBtnClick (e) {
				this.delayCall(importMolAction, [this.getTxt(), this.getFormat()]);
			};

			InputControllerClass.prototype.handlePasteBtnClick = function handleImportBtnClick (e) {
				this.delayCall(pasteMolAction, [this.getTxt(), this.getFormat()]);
			};

			InputControllerClass.prototype.handleMolExportBtnClick = function handleMolExportBtnClick (e) {
				this.delayCall(exportMolAction, ["mol"]);
			};

			InputControllerClass.prototype.handleMrvExportBtnClick = function handleMolExportBtnClick (e) {
				this.delayCall(exportMolAction, ["mrv"]);
			};

			InputControllerClass.prototype.delayCall = function delayCall (method, args) {
				setTimeout(function () {
					method.apply(null, args);
				}, delay);
			};

			InputControllerClass.prototype.getTxt = function getTxt () {
				return this.srcTextBox.val();
			};

			InputControllerClass.prototype.setTxt = function setTxt (txt) {
				this.srcTextBox.val(txt);
			};

			InputControllerClass.prototype.clearTxt = function clearTxt () {
				this.setTxt("");
			};

			InputControllerClass.prototype.getFormat = function getFormat (e) {
				return this.formatDropdown.val();
			};

			return InputControllerClass;

		}());

The MarvinControllerClass is responsible for updating display settings if the state of the CPK coloring or Carbon label visibility checkboxes are modified on the current page.

The MarvinControllerClass also provides a reference to the sketcher instance. It is necessary to be able to call the molecule import / export function of the sketcher.

		var MarvinControllerClass = (function () {

			function MarvinControllerClass ( sketcherInstance, cpkCheckbox, mapCheckbox, carbonCheckbox) {
				this.sketcherInstance 	= sketcherInstance;
				this.cpkCheckbox 		= cpkCheckbox;
				this.mapCheckbox 		= mapCheckbox;
				this.carbonCheckbox 	= carbonCheckbox;
				this.init();
			}

			MarvinControllerClass.prototype.init = function init () {
				this.carbonCheckbox.on("change", $.proxy(this.handleCarbonCheckBoxChange, this));
				this.mapCheckbox.on("change", $.proxy(this.handleMapCheckBoxChange, this));
				this.cpkCheckbox.on("change", $.proxy(this.handleCpkCheckBoxChange, this));
			};

			MarvinControllerClass.prototype.handleCarbonCheckBoxChange = function handleCarbonCheckBoxChange (e) {
				this.sketcherInstance.setDisplaySettings({
					"carbonLabelVisible" : this.carbonCheckbox.is(':checked')
				});
			};
			
			MarvinControllerClass.prototype.handleMapCheckBoxChange = function handleMapCheckBoxChange (e) {
				this.sketcherInstance.setDisplaySettings({
					"atomMapsVisible" : this.mapCheckbox.is(':checked')
				});
			};

			MarvinControllerClass.prototype.handleCpkCheckBoxChange = function handleCpkCheckBoxChange (e) {
				this.sketcherInstance.setDisplaySettings({
					"cpkColoring" : this.cpkCheckbox.is(':checked')
				});
			};

			return MarvinControllerClass;

		}());

Both InputControllerClass and MarvinControllerClass are instantiated when the page is loaded and the sketcher is loaded: getMarvinSketchIntstance("#sketch").done(...). The initial value of the text box is set after page loading is finised.

		$(document).ready(function handleDocumentReady (e) {
			MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {

				marvinController = new MarvinControllerClass(
					sketcherInstance,
					$("#chbx-coloring"),
					$("#chbx-map"),
					$("#chbx-carbonVis")
				);

				inputController = new InputControllerClass(
					$("#btn-setMdlmolfile"),
					$("#btn-paste"),
					$("#list-inputformat"),
					$("#btn-clearTxt"),
					$("#btn-molExport"),
					$("#btn-mrvExport"),
					$("#molsource-box")
				);

			}, function () {
				alert("Cannot retrieve sketcher instance from iframe");
			});

			$("#molsource-box").val(caffeineSource);
		});
		

InputControllerClass calls one of these functions with some delay when Import, Export as Mol or Export As Mrv button is pressed.

		
		function pasteMolAction (txt, format) {
			var pastePromise = marvinController.sketcherInstance.pasteStructure(format, txt);
			pastePromise.then(function() {}, function(error) {
				alert(error);
			});
		}

		function importMolAction (txt, format) {
			var importPromise = marvinController.sketcherInstance.importStructure(format, txt);
			importPromise.then(function() {}, function(error) {
				alert(error);
			});
		}

		function exportMolAction (format) {
			var ic = inputController;
			
			var exportPromise = marvinController.sketcherInstance.exportStructure(format, null);
			exportPromise.then(function(source) {
				ic.setTxt(source);
			}, function(error) {
				ic.setTxt(error);
			});
		}