Marvin JS Example - Change default tool

Back to index
Rectangle Lasso

In this example, you can change the default tool of the editor. Select the default tool. Default tool is not the same as the actual tool of the editor. By contrast the actual tool, default tool has relevance in such situations when it is not clear which tool should be activated. In these cases you can denote a tool which should be selected as the default one. For example after pushing the Esc keyboard button.

	<div style="padding-bottom: 0.8em;">
		<input type="radio" name="defaulttool-group" value="rectangleSelection" checked>Rectangle</input>
		<input type="radio" name="defaulttool-group" value="lassoSelection">Lasso</input>

When you take a look at the source code, you can see that a listener function is bound to the change events of radio buttons. When a change event is invoked, the updateDefaultTool(value) function is performed. This function assembles a JavaScript object that describes display settings and call the setDisplaySettings(settings) function of the sketcher. Only give settings that you would like to overwrite. In this case, this is the defaultTool property.

		var marvinSketcherInstance;

		$(document).ready(function handleDocumentReady (e) {
			// after editor in the sketch iframe is ready store its reference 
			// and activate controls
			MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {
				marvinSketcherInstance = sketcherInstance;
			},function (error) {
				alert("Cannot retrieve sketcher instance from iframe:"+error);

		function initControls () {
			// change layout
			$("input[name='defaulttool-group']").change(function(e) {
				var s = $(this).val();

		function updateDefaultTool(tool) {
				"defaultTool": tool

Back to index