This example demonstrates how to control selection via JavaScript API and how to monitor the changing of the structure.
When selection information is retrieved from the sketcher, lists of selected atoms and bonds appear in the following textboxes: Atoms and Bonds.
If the checkbox titled as Get selection automatically is checked in, lists of selected atoms and bonds are retrieved automatically as the selected context is changed on the canvas. When this functionality is disabled, you can retrieve the selection by submitting the Get selection button.
You can edit both the atom list and bond list in the form. Atoms can be referred to by their atom index. A bond can be described with the atom index of its nodes.
With the Set selection button, you can update selection in the editor. Those atoms and bonds will be selected that are enumerated on the selection form.
To get the molecule source each time when the drawn structure is changed in the sketcher, check in the Retrieve mol source at mol change checkbox. The retrieved data appears in the textbox beside the sketcher. You can find a counter next to the checkbox, that indicates how many times the mol change event is invoked. You can reset this counter by submitting the Reset counter button.
You can see the code comment below.
var marvinSketcherInstance;
var molChangeCounter;
$(document).ready(function handleDocumentReady (e) {
MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {
// initalize sketcher
marvinSketcherInstance = sketcherInstance;
marvinSketcherInstance.importStructure("mol",caffeineSource).catch(function(error) {
alert("Import failed:"+error);
});
marvinSketcherInstance.setDisplaySettings({
'carbonLabelVisible' : true,
'atomIndicesVisible' : true
});
getSelection = function () {
$("#atoms").val("");
$("#bonds").val("");
var selection = marvinSketcherInstance.getSelection();
$("#atoms").val(selection['atoms']);
$("#bonds").val(selection['bonds']);
};
setSelection = function () {
marvinSketcherInstance.setSelection({
'atoms' : $('#atoms').val(),
'bonds' : $('#bonds').val()
});
};
$("#getSelectionButton").on("click", getSelection);
$("#setSelectionButton").on("click", setSelection);
// true to switch on auto retrieve of selection, false to switch it off
setSelectionChangeListener = function(b) {
if(b) {
// add selection change event listener
marvinSketcherInstance.on("selectionchange", getSelection);
// disable manual retrieve when selection change event listener is active
$("#getSelectionButton").attr("disabled", "disabled");
} else {
// remove selection change event listener
marvinSketcherInstance.off("selectionchange", getSelection);
// enable Get Selection button when selection change event listener is inactive
$("#getSelectionButton").removeAttr("disabled");
}
};
// when the checkbox is checked in/out by the user
$("#selectionChangeCheckbox").change(function () {
setSelectionChangeListener(this.checked);
});
// activate the listener at startup if its checkbox is selected
if($("#selectionChangeCheckbox").prop('checked')) {
setSelectionChangeListener(true);
}
molChangeCounter = 0;
// update counter and display retrieved molecule source
handleMolChangeEvent = function () {
molChangeCounter = molChangeCounter+1;
$("#molChangeCounterDisplay").text(molChangeCounter);
marvinSketcherInstance.exportStructure("mrv").then(function(molsource) {
$("#molsource").val(molsource);
}, function () {});
};
// true to switch on auto retrieve of the molecule, false to switch it off
setMolChangeListener = function(b) {
if(b) {
// add mol change event listener
marvinSketcherInstance.on("molchange", handleMolChangeEvent);
} else {
// remove mol change event listener
marvinSketcherInstance.off("molchange", handleMolChangeEvent);
}
};
// when the checkbox is checked in/out by the user
$("#molChangeCheckbox").change(function () {
setMolChangeListener(this.checked);
});
// activate the listener at startup if its checkbox is selected
if($("#molChangeCheckbox").prop('checked')) {
setMolChangeListener(true);
}
// when reset button is submitted by the user
$("#resetMolChangeCounterButton").on("click", function() {
molChangeCounter = 0;
$("#molChangeCounterDisplay").text(molChangeCounter);
});
}, function () {
alert("Cannot retrieve sketcher instance from iframe");
});
});