toolbar and button options

Hi, I'm unable to load a different toolbars style into Marvin4JS. Here is our code for loading Marvin4JS, which works fine:

var bld = new String.builder(). // Javascript analog of a StringBuilder

        append('<iframe id="').append(appletName).

        append('" class="sketcher-frame" ' +

                'src="\/nosession\/marvin4JS\/editorws.html" ' +

                'style="min-width:').

        append(panelWidth).append('px; min-height:').append(panelHeight).

        append('px; overflow:hidden; border:1px solid darkgray;" \/><\/iframe>');

var iframe = bld.toString();

setInnerHTML(appletName + 'Cell', iframe);



$(document).ready(function handleDocumentReady(e) {

    getMarvinPromise('#' + appletName).done(function (sketcherInstance) {

        marvinSketcherInstance = sketcherInstance;

        marvinSketcherInstance.setDisplaySettings({

                'carbonLabelVisible': getCVisibilityM4JS(qFlags),

                'implicitHydrogen': getHVisibilityM4JS(qFlags),

                'valenceErrorVisible': getValenceErrorVisibleM4JS(qFlags),

                'atomIndicesVisible': false,

                'lonePairsVisible': getLonePairsVisibleM4JS(qFlags),

                /* 'chiralitySupport': getRSLabelsVisibleM4JS(qFlags), */

                'atomMapsVisible': getAtomMappingM4JS(qFlags),

                'chiralFlagVisible': true,

                'cpkColoring': true

                });

        marvinSketcherInstance.importStructure(null, mol);

    }).fail(function () {

        alert('Cannot retrieve sketcher instance from iframe.');

    });

});

        append('" class="sketcher-frame" ' +

                'src="\/nosession\/marvin4JS\/editorws.html" ' +

                'data-toolbars="reporting" ' +

                'style="min-width:').

I then tried adding the following two lines before the importStructure() line, in the function (sketcherInstance)  bloc:

        marvinSketcherInstance.attr('data-toolbars', 'reporting');

        marvinSketcherInstance[0].contentWindow.location.reload(true);

But I got a Javascript error, "undefined is not a function", referring to the first new line above. I then tried changing marvinSketcherInstance to $('#' + appletName) in these two lines, and the sketcher then reloaded repeatedly, but always with the standard toolbars. Any advice?

Also, you have an example of how to add a custom button to a toolbar, but you don't show how to add one of your preexisting buttons to a toolbar. I would like to add the rectangle/ellipse button in the reporting toolbar to the education toolbar. (Actually, I would prefer to have just the rectangle.) Any advice on this task as well?

Hi Bob,

As it is described in our online examples there are two ways to setup the toolbar layout:

#1: define data-toolbars attribute in the iframe of the sketcher: evaluated in construction of the sketcher

#2: set it via setDisplaySettings(settings): accessible after sketcher is constructed.

If you prefer #1, set the data-toolbars attribute on iframe before insert it into the page.

If you would like to update toolbar layout after sketcher is ready, use

 marvinSketcherInstance.setDisplaySettings( { 'toolbars': 'reporting') });

Please, see the linking examples:

https://marvinjs-demo.chemaxon.com/latest/examples/example-toolbars.html

https://marvinjs-demo.chemaxon.com/latest/examples/example-toolbars_with_displaysettings.html

In current Marvin JS API, there is no option to add preexisting button to the toolbar. Only you can choose among preexisting toolbar presets.

We are planning extended customization of toolbars but it is not implemented yet.

I tried this, as I noted above. It did not work for me; the default toolbar was loaded. Maybe it was because I was using innerHTML to insert the iframe?

 marvinSketcherInstance.setDisplaySettings( { 'toolbars': 'reporting') });

Ah, this works well. I can incorporate it into my existing setDisplaySettings() command.

I was trying to follow the example of the code on the bottom of https://marvinjs-demo.chemaxon.com/latest/examples/example-toolbars.html, which didn't work, but I didn't see that https://marvinjs-demo.chemaxon.com/latest/examples/example-toolbars_with_displaysettings.html had an alternative.

If I can't add preexisting buttons, can I hide them? If not, I'd like to request that feature, as well.

Hi Bob,

There is a known issue with Sketch.setDisplaySettings(settings). When you update settings via this method, it resets previously set toolbars settings. Unless you give the toolbars property at each setDisplaySettings request, the standard will be restored.

marvinsketcherInstance.setDisplaySettings({ 'toolbars': 'reporting', 'carbonLabelVisible': true });

We will fix this bug very soon.

In your original code, I found this:

marvinSketcherInstance[0].contentWindow.location.reload(true);

In our example, you can find this:

$("#sketch")[0].contentWindow.location.reload(true);

The marvinSketcherInstance object is not a JQuery object. It is just a JS object that has methods to control the editor. In our example, we refer to the iframe of the editor with a JQuery selector: $("#sketch")[0]

We plan to improve the customization of the toolbar. You are not the only one who miss this feature.

Hi Tamas,

I wonder if you have made any progress towards options to customize toolbars in Marvin JS for the past year.

I am particularly interested in the option to selectively enable/hide preexisting buttons. For example, I would like to be able to display "Any atom" button on Atom toolbar while keeping "Reaxys Group Generics" button hidden. With the available toolbar presets it seems to be impossible - please let me know if workaround already exists.

This request is entirely in line with your earlier discussion with Bob.

Hi,

Good timing!  We are working on the toolbar customization, currently.

After the release, you will be able to select the tools (their type, their position and also whether you would like to organize these into a combo-box, or not) in the editor. 

Would you like us to send you a reminder when the release containing this feature is out?

Best regards,
Eszter

Hi Eszter,

yes, please send me a reminder when you will have this feature released. Your description looks promising and I hope that it will work nicely.
Thank you!

Regards,
Edgars

Of course we will inform you when the feature is released.