This example demonstrates how to paint a custom patch for atoms 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 Overwrite highlight button, the previously set patches will be deleted. If you choose Append highlight, the current patches will be preserved and new settings will be appended to them.
Notes:
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)were we cache the applied styles and a DOM parser (parser) that helps us to seek data in MRV sources.
var marvinSketcherInstance;
var highlights = [];
var parser = new DOMParser();
$(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 behavior: 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.
To retrieve the unique ID (UID) of these atoms, we have to get the molecule source of the structure.
To do that, specify hasUID export option in exportStructure function.
When the molecule source arrived, we are ready to create the new highlight settings.
If we choose the 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();
marvinSketcherInstance.exportStructure('mrv', { hasUID: true}).then(function(source) {
if(b) {
highlights = [];
}
highlights.push(createHighlight(source, selection));
marvinSketcherInstance.setHighlight(highlights);
}, alert);
}The createHighlight function expects two parameters: the molecule source and the selection object.
First of all, an xml object is created from the MRV source to be able to seek the UID properties.
Atom UID is stored in a child (scalar) tag of the atom tag.
The atoms field of the selection object gives index of selected atoms.
The ID of the scalar tag that describes the UID property of the n-th atom can describe in the following format:
a<index>.prop1 where <index> is the index of the atom.
Get it with the help of the getElementById function, and appends its value to the highlight.uids.atoms array.
You can get bond UID in a similar way. In this case, the ID of the scalar tag is in the following format:
a<index of begin atom>;a<index of end atom>.prop1.
The bond UIDs are collected into highlight.uids.bond array.
After that, you can create the 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 define atoms and bonds by UID and specify style with color, opacity and size properties.
function createHighlight(source, selection) {
var xml = parser.parseFromString(source, "text/xml");
var highlight = {};
highlight.uids = {};
highlight.uids.atoms = [];
highlight.uids.bonds = [];
var atoms = (selection.atoms.length == 0)? [] : selection.atoms.split(',');
var bonds = (selection.bonds.length == 0)? [] : selection.bonds.split(',');
for(i = 0; i < atoms.length; i++) {
var atom = selectById(xml, 'a'+atoms[i]+'.prop1');
if(atom) {
var uid = atom.textContent;
highlight.uids.atoms.push(uid);
} else {
console.log('Cannot find property#a'+atoms[i]+'.prop1');
}
}
for(i = 0; i < bonds.length; i++) {
var edges = bonds[i].split('-');
var bond = selectById(xml, 'a'+edges[0]+'a'+edges[1]+'.prop1');
if(bond) {
var buid = bond.textContent;
highlight.uids.bonds.push(buid);
} else {
console.log('Cannot find property#a'+edges[0]+'a'+edges[1]+'.prop1');
}
}
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;
}