ChemDoodle Web Components version 3.1 has been released. This open source HTML5 graphics and cheminformatics library continues to grow in popularity.

Executive Summary

Major additions in this release are the rendering of implicit hydrogens in 2D components and an advanced framework for handling touch events and gestures from mobile devices. iPhone OS and Android are now fully supported!


  1. The ChemDoodle Web Component framework for handling touch events and gestures from mobile devices (notably iPhone OS and Android) has been completed. The Canvas class now has 6 new optional abstract methods: touchstart, touchmove, touchend, gesturestart, gesturechange and gestureend.

    Users can interact with ChemDoodle Web Components through a desktop browser using a keyboard and mouse or through a mobile browser using touch events and gestures. For desktop browsers, implement the mouse and keyboard event listeners to perform actions. On mobile devices, the touch events and gestures will be closely mapped to the most equivalent mouse and keyboard event handlers. This is perfect for simple applications as the drag, mousedown and mouseup events are closely matched to touch events. However, hovering is something that is not possible on mobile devices, so mousemove handlers will never be called. Additionally, gestures like pinching have no mouse equivalent.

    To rectify this, write event handlers for any of the touch or gesture events to have mobile device interactions forwarded to more appropriate methods. If those mobile gesture handlers are implemented, the Canvas class will forward the corresponding events to them instead of to the mapped mouse and keyboard events. This way, you can implement all of the handlers for your single component and it will perform suitably on both desktop and mobile browsers!
  2. Implicit hydrogens are now rendered in 2D components for all atoms with visible labels. This specification is controlled by the VisualSpecificationsatoms_implicitHydrogens_2D variable which is true by default. The numbers in hydrogen labels will be properly subscripted and the hydrogens will stack depending on the orientations of bonds from the concerned atom.
  3. To correspond with the rendering of implicit hydrogens, a new VisualSpecifications variable, atoms_displayTerminalCarbonLabels_2D, has been added that will show carbon labels for terminal carbons. Combined with the atoms_implicitHydrogens_2D specification, methyl groups can be nicely displayed. This specification is false by default.
  4. Animations for Rotators and Rotator3Ds can now be toggled by double clicking on them.


  1. The zoom scale for Transformer components can no longer become a negative value, which caused molecules to invert.
  2. The element selecting algorithm performed when setting atom labels in the Doodler component has been greatly improved to mirror how ChemDoodle works.