JavaScript API

ChemWriter components are manipulated using JavaScript function calls exposed through their public APIs.

chemwriter.System.ready

Adds a function to a queue to be run when all components have been loaded. If ready is called after components have loaded, the passed function will be executed immediately.

chemwriter.System.ready(function () {
  console.log('ChemWriter is now ready.');
});

chemwriter.components

Dynamically loaded Editor and Image components may be referenced through the chemwriter.components object.

For example, an Editor deployed with the following HTML:

<div id="my-editor"
     data-chemwriter-ui="editor">
</div>

would be accessible later using this JavaScript:

let myEditor = chemwriter.components['my-editor'];

Objects accessed in this way can be manipulated with APIs provided by Editor and Image, respectively.

chemwriter.refresh

Re-renders all ChemWriter components. Execute this function after adding Editors or Images dynamically via DOM manipulation.

Editor#getMolfile and Image#getMolfile

Returns a V2000 molfile representation of the current document as a string.

let editor = chemwriter.components['my-editor'];
let molfile = editor.getMolfile();

Editor#setMolfile, Image#setMolfile

Replaces the document representation with the V2000 molfile string.

let molfile = "\n  CWRITER307031309392D                              \nCreated with ChemWriter - http://chemwriter.com\n 16 16  0  0  1  0  0  0  0  0999 V2000\n   53.8419  -44.7648    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   62.5022  -49.7648    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   71.1624  -44.7648    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   71.1624  -34.7648    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   62.5022  -29.7648    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   53.8419  -34.7648    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   45.1817  -29.7648    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   45.1817  -49.7648    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n   36.5214  -24.7648    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n   79.8227  -29.7648    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   88.4829  -34.7648    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n   97.1432  -29.7648    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n   79.8227  -19.7648    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n  105.8034  -34.7648    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n  114.4637  -29.7649    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n  105.8034  -44.7648    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n  1  2  2  0  0  0\n  2  3  1  0  0  0\n  3  4  2  0  0  0\n  4  5  1  0  0  0\n  5  6  2  0  0  0\n  6  1  1  0  0  0\n  6  7  1  0  0  0\n  1  8  1  0  0  0\n  7  9  3  0  0  0\n  4 10  1  0  0  0\n 10 11  1  0  0  0\n 11 12  1  0  0  0\n 10 13  1  6  0  0  0\n 12 14  1  0  0  0\n 14 15  1  0  0  0\n 14 16  1  0  0  0\nM  END";
let editor = chemwriter.components.editor;

editor.setMolfile(molfile);

Editor#addEventListener

Adds an event listener to the Editor. The first argument is the name of the event to monitor. Currently, one event type is supported, "document-edited."

chemwriter.System.ready(function () {
  let editor = chemwriter.components.editor;

  editor.addEventListener('document-edited', function () {
    console.log('Document edited.');
  });
});

Event listeners should be added only after all components have been loaded. This can be accomplished by registering a callback through the chemwriter.System.ready function.

Editor#isEmpty

Returns true if no structure has been drawn, or false otherwise.

let editor = chemwriter.components.editor;
let empty = editor.isEmpty();

Editor#addToolForElementSymbol

Adds a new button to the bottom toolbar using a valid element symbol.

let editor = chemwriter.components.editor;

editor.addToolForElementSymbol('Sb');