5 July 2017
5 July 2017, Comments Comments Off

Version 8 is the largest update to the ChemDoodle Web Components to date! Many new features are included for both the 2D and 3D engines for creating the best quality HTML5 products in the industry. See the full change log below the image.

New features in CWC8

Some of the new features in CWC8

Executive Summary

Version 8 is the largest update to the ChemDoodle Web Components library to date. The sketcher has seen significant work, with new drawing tools (rings, chains, templates, atom label tool, more). Condensed labels with abbreviations are now supported, for advanced chemistry. New 2D shapes include dynamic brackets, atom mappings and variable attachment points, while molecular surfaces (vdW, SAS, Connolly) can now be generated and rendered in 3D components. The shader system used by the 3D components has been dramatically improved for much faster performance (and new improvements added like gamma correction) and a deferred shader has been implemented to provide advanced graphics techniques like outlining, software antialiasing and screen space ambient occlusion. Shadows can now be rendered in 3D scenes. The entire website has also been improved, with new advanced tutorials for working with the sketcher to listen to user changes, or show off an advanced in browser sketcher interface that mimics the desktop software, for instance. SVG can now be exported from the ChemDoodle Web Components in addition to PNG. A new iChemLabs Cloud service allows developers to match entire mechanisms for educational eBooks and advanced reaction databases. There is a lot in this update, please see the links below for more information.


  1. The sketcher has been significantly developed. A new requireStartingAtom option allows you to disable to starting atom requirement while sketching. A new resizable option enables the user to resize the sketcher canvas. A new floatDrawTools option uses a floating toolbar for the drawing tools, just like the desktop software. Several new tools have been added, including an arbitrary ring size and arbitrary chain size tool. An atom label tool has been added with a text input field (like in the desktop software) to enter custom atom labels, including advanced condensed labels; space will open the text field by keyboard while the return or enter key will close it or repeat the last typed label for a hovered atom. Templates can now be added in the same manner as the desktop software using the new Templates widget; you can modify and add to the template library. The MolGrabber widget now allows the loading of any content (multiple molecules and shapes) and will insert the content in its entirety to the canvas. The MolGrabber widget will now also alert you if you press the Load button before the Show button. New buttons are available for centering the content in the sketcher as well as for horizontal and vertical flipping. The Open dialog now slides down from the toolbar as a Popover. The lasso tool and selections now use a dashed line just like in the desktop software. When using the labels tools in the sketcher, the periodic table canvas now selects oxygen by default and will revert back to label mode of the currently selected element if chosen from the toolbar. Silicon has been added to the default labels group. Placing unsaturated rings (like benzene) now better lay out double bonds to avoid overvalencing atoms. Hovering bonds are now more responsive, especially for elongated bonds. Pushers now can be set by clicking and then clicking again, no drag necessary.
  2. A new UIs component has been added, called Popover. A Popover is modal and can slide in from other components or appear in its own component for user input.
  3. Added mobile support for the UIs interface elements. For example, previously dialogs couldn’t be moved on mobile devices, now they can.
  4. Complex labels can now be handled, with the required additional tools for parsing, formatting and rendering. With this feature, your chemical structures can contain advanced chemical labels consisting of element symbols, abbreviations (a dictionary controlled by you) and numbers and parenthesis for multiplicities. The labels are automatically formatted chemically and oriented based on least interference with surrounding bonds. Some examples include COOH, CO2Me, N3, CH2(CH2)4OH, C3H7O, Tosyl, myAbbreviation, and more. Use this to create concise publication quality figures directly in your websites.
  5. Added a wavy bond type.
  6. New shapes have been included. New 2D shapes include dynamic brackets for repeating groups, atom mappings for reactions and variable attachment points (VAPs). New 3D shapes include molecular surfaces. The ChemDoodle JSON specification has been updated to support these shapes.
  7. Molecular surfaces can now be generated and rendered for sets of atoms in 3D. Supported types include van der Waals, solvent accessible and solvent excluded (also known as a Connolly surface). You can control resolutions for all and the probe radius for solvent based surfaces. Rendering styles include ‘Dots’, ‘Mesh’ and ‘Solid’ and all colors, transparency, etc. can be controlled through visual specifications.
  8. The shader system for the 3D components has been redone. Several improvements in the Phong shader allow us to render higher quality graphics with lower quality meshes, leading to significant performance improvements across the entire 3D ChemDoodle Web Components.
  9. A deferred shader system has been developed allowing the implementation of advanced shader procedures for generating graphics. Currently implemented are outlining, screen space ambient occlusion (SSAO) and software antialiasing (FXAA). SSAO in particular is very powerful as it allows us to simulate how much ambient light is accessible to objects in crowded spaces, allowing us to shade the scene in a more accurate manner. This works on all geometries, but the feature can really be shown off in space filling all-atom models of large macromolecules.
  10. Shadows can now be rendered in 3D scenes. You can control the intensity of the shadows with the shadow_intensity_3D visual specification.
  11. Gamma correction has been implemented for brighter, more color accurate rendering controlled by the gammaCorrection_3D visual specification.
  12. The VisualSpecifications class now provides a copy() function for creating style sheet copies.
  13. Added a new bond visual specification for absolute saturation widths: bonds_useAbsoluteSaturationWidths_2D.
  14. Bonds now split colors based on their substituent atom colors, with the bonds_splitColor visual specification. The bonds_useJMOLColors and bonds_usePYMOLColors specifications have been removed. Use the corresponding atom specifications instead.
  15. Made wedge width an absolute value in line with desktop software with a default value of 6.
  16. Components now center 2D content much more pleasantly by calculating bounds of atom labels in addition to coordinates and using a constant internal padding.
  17. The preview, hover, select and error colors are now controlled by visual specifications.
  18. A new iChemLabs Cloud call, mechanismMatch(), is now provided to match mechanisms. You can see it in action here.
  19. Updated van der Waals radii data.
  20. Added the rest of the new elements as defined by IUPAC.
  21. Updated the library to use some newer standardized HTML5 functions, removing the polyfills from the ChemDoodle.extensions package.
  22. The PNG package has been refactored to provide both an open() function for loading the PNG into a new window and a string() method for creating a string object of the PNG content.
  23. A new SVG package has been added to create Scalable Vector Graphics data from the ChemDoodle Web Components, similar to the PNG package for bitmap graphics.
  24. Minor graphical improvements for the UIs decorations.
  25. Updated jQuery to version 2.2.4. Updated jQuery mousewheel to version 3.1.13.
  26. Updated the entire website. Added more advanced tutorials: Image Export, Initializing Components after Closing the DOM, Sketcher: Application Window, Sketcher: Listening to User Changes.


  1. Corrected several places in the API where the VisualSpecifications object was not being correctly passed.
  2. Fixed bug where rendering atoms as circles in 2D components would not properly use defined colors.
  3. Fixed a bug in the calculation of bond retractions from atom labels.
  4. Fixed bug where lone carbon atoms would not show labels when attributed.
  5. All ambient colors for 3D scenes have been changed to black.
  6. Fixed protein render issue where end of the ribbon mesh doesn’t close.
  7. Fixed several minor issues in drawing molecules.
  8. Fixed a number of issues with the UIs where mobile gestures would also execute tap events.
  9. Standardized sketcher hover distance to 10.
  10. Fixed issue in sketcher where the shapes only lasso fails on the first drag if nothing is automatically selected.
  11. Fixed sketcher bug where shapes were still rendered as hovered after they were removed from the figure with a delete and undo.
  12. Resolved issue where atom and bond query dialogs were incorrectly checking their own ids, instead of the sketcher id when loading after the DOM is closed.
  13. Fixed bug where resending keydown/keyup last point calls to drag would change the state’s last point cache.
  14. Corrected the UIs help buttons to work on all mobile devices.
  15. Fixed UIs bug where clicking on option in button drop down should select the main button.
  16. Changing a state in the UIs and selecting a button from a drop down now absorbs the correct button.
  17. Corrected problem where the touchmove event was not being properly recognized on some Android devices.
  18. Fixed error in bond line output for MOL files in the MOLInterpreter class.
  19. Removed iChemLabs mods to the JCAMP format.
  20. Removed the iChemLabs.useHTTPS() function, as it is now HTTPS only.
  21. Fixed issue with the feature_detection.supportsTouch() function, where sometimes a non-boolean value could be returned.
  22. Centering in 2D canvases is now based on a constant internal padding, instead of a relative one.
  23. Source code modules now include an undefined declaration.
  24. Moved jsBezier library from math package to lib package.