Marvin JS Examples - Highlight By Index

This example demonstrates how to paint a custom patch for atom and bonds.

How to try it:

Draw a structure and select those atoms and bonds that you would like to highlight with colored patch.

After that, specify the style: select color, setup opacity value between 0.0 and 1.0 (0 is full transparent, 1 is total opaque). Then, set the relative size of the patch (relative to the selection feedback). Finally, apply settings. If you push the Overwrite highlight button, the previously set patches will be deleted. If you choose Append highlight, the current patches are preserved and new settings are appended to them.

Notes:

• If several styles are applied to the editor, the patches may overlaps each other.
• Reaction converter is switched off to avoid atom index collision (among reaction compounds).

You can see the code comment below.

First of all, we request a reference to the loaded editor. Then, we bind click handler for the submit buttons. We will need an array (highlights)where we cache applied styles.

	var marvinSketcherInstance;
	var highlights = [];

	$(document).ready(function handleDocumentReady (e) {
		MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {
			// initalize sketcher
			marvinSketcherInstance = sketcherInstance;
			$('#overwriteButton').click(onButtonClick);
			$('#appendButton').click(onButtonClick);
		});
	});

The onButtonClick function, determines the current behaviour: append or overwrite the current style with the new one. After that, we retrieve the selection from the editor to apply the new style to the desired atoms/bonds. In the selection, the atoms and bonds are referred by atom indexes.

If we choose overwrite option, we reset the previously stored highlight history (highlights).

The createHighlight function is responsible to create the new highlight style from the given data. The new highlight object is added to the highlights array. This array is applied to the setHighlight function of the editor.

	function onButtonClick(e) {
		var b = (e.target.id =='overwriteButton');
		var selection = marvinSketcherInstance.getSelection();
		if(b) {
			highlights = [];
		}
		highlights.push(createHighlight(selection));
		marvinSketcherInstance.setHighlight(highlights);
	}

The createHighlight function expects the selection object. The highlight object has an indexes property. It is an object with an atom and a bond list. The atom index list of selection object is a string that represents a comma separated list of indexes. Convert it to string array before assign it to the highlight.indexes. Do the same with the bond index list.

After that, you can create highlight.style object. Retrieve the value of the color input field. Convert value of the opacity field into the 0 - 1 range. Do the same with the size value.

The created highlight objects defines atoms and bonds by UID and specify style with color, opacity and size properties.

	function createHighlight(selection) {
		var highlight = {};
		highlight.indexes = {}
		highlight.indexes.atoms = (selection.atoms.length == 0)? [] : selection.atoms.split(',');
		highlight.indexes.bonds = (selection.bonds.length == 0)? [] : selection.bonds.split(','); 
		highlight.style = {}
		highlight.style.color = $('#colorValue').val();
		var opacity = $('#opacityValue').val()/100;
		highlight.style.opacity = opacity;
		var size = $('#sizeValue').val()/100;
		highlight.style.size = size;
		return highlight;
	}