Marvin JS Example - How to change the editor settings for adding lone pairs manually feature

EDUCATION MODE

This example demonstrates all of the preparations which should be made before applying the manual lone pair usage. When EDUCATION MODE is activated via its checkbox, the following settings will be applied:

• automatic lone pair calculation is disabled, every atom gets 0 lone pairs immediately
• 'Increase lone pairs' button is enabled on the toolbar, and becomes ready to use
• on copy, any structure is placed in MRV format to the clipboard
• implicit hydrogens are hidden
• valence errors are hidden.
• circled plus / minus sign at charge.

When the checkbox is inactivated, the DEFAULT settings will be applied:

• automatic lone pair calculation is enabled, the lone pairs are recalculatedon every atom
• 'Increase lone pairs' button is disabled on the toolbar
• on copy, any structure is placed as MDL MOL file to the clipboard
• implicit hydrogens are visible on terminal and hetero atoms
• valence errors are visible.
• normal plus / minus sign at charge.

To see the differences between the two settings, some structures are set to the editor. (This example will return to this initial state on page refresh.) In this example, the reporting preset has been set, and the display of lone pairs has been turned on. Please, note that lone pairs are not visible by default in Marvin JS and 'Increase lone pairs' button is only available in the education and the reporting preset.

At startup, EDUCATION MODE is not set in Marvin JS.

<iframe src="../editorws.html" id="sketch" class="sketcher-frame" data-toolbars="reporting" ></iframe>

First of all, a reference is needed for the editor. MarvinJSUtil.getEditor(String) provides a Promise object to get it when the editor is ready.

After the editor is loaded and an initial molecule is set, initcontrol() function binds actions to the EDUCATION MODE checkbox. Invoking initcontrol() function ensures that the initial state of the checkbox is consistent with the initial settings of the editor in this example.

		
		var marvinSketcherInstance;

		var molecule = "\n\n\n"+
		"  6  3  0  0  0  0  0  0  0  0999 V2000\n"+
		"    0.0000   -0.0418    0.0000 Cl  0  0  0  0  0  0  0  0  0  0  0  0\n"+
		"    2.4274    0.0000    0.0000 Ne  0  0  0  0  0  0  0  0  0  0  0  0\n"+
		"    3.1419    0.4125    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n"+
		"    1.7129    0.4125    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n"+
		"    2.4274   -0.8250    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n"+
		"   -1.7299   -0.0558    0.0000 Kr  0  0  0  0  0  0  0  0  0  0  0  0\n"+
		"  2  3  1  0  0  0  0\n"+
		"  2  4  1  0  0  0  0\n"+
		"  2  5  1  0  0  0  0\n"+
		"M  END\n";
		
		$(document).ready(function handleDocumentReady (e) {
			MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {
				marvinSketcherInstance = sketcherInstance;
				marvinSketcherInstance.importStructure("mol",molecule);
				initControl();
				update($("#chbx-educationmode"));
			},function (error) {
				alert("Cannot retrieve sketcher instance from iframe:"+error);
			});
		});

Changing the checkbox value triggers the update of the editor settings. In the change event handler, the target of the change event is the checkbox. If the checkbox is checked, the new settings are applied to the editor. Settings of the editor can be updated with its setDisplaySettings(settings) function.

		
		function initControl () {
			$("#chbx-educationmode").on("change", function (e) {
				update(e.target);
			});
		}
		
		function update(checkBox){
			var settings = {};
			settings.lonePairsVisible= true;
			settings.lonepaircalculationenabled = !(checkBox.checked);
			settings.copyasmrv = checkBox.checked;
			settings.implicitHydrogen = (checkBox.checked) ? "OFF" : "TERMINAL_AND_HETERO";
			settings.valenceErrorVisible = !(checkBox.checked);
			settings.circledsign = checkBox.checked;
			marvinSketcherInstance.setDisplaySettings(settings);
		}