2D Sketcher

The sketcher controls are modeled from the ChemDoodle® desktop application. Those familiar with the ChemDoodle desktop application will immediately be comfortable drawing structures in this web-based sketching component.

The most basic sketcher input is received from mouse events. All aspects of the ChemDoodle desktop application are present, from locking bond lengths and angles, to the optimize zone to fragment previews. More information about how to use the ChemDoodle family of sketchers can be found in the ChemDoodle user guide.

In addition to mouse input, there are buttons and keyboard shortcuts that are described in the other tabs.

There are two types of ChemDoodle Web Sketchers, the Full Sketcher and the Single Molecule Sketcher. You can choose either above in this demo. Based on the interface, you may be using one or the other or both. The Full Sketcher allows for the creation of multiple chemical structures, shapes and figures. The Single Molecule Sketcher provides a streamlined interface for drawing a single molecular structure.

If you are developer and would like to learn how to install this sketcher, please refer to the SketcherCanvas documentation.

The buttons presented on top of the sketcher provide functionality as described by the following list. It should also be noted, that in all states, the user can use the mouse wheel to scale the sketcher rendering. Users can also click and drag on the background, with nothing hovered, to move the entire molecule. If the shift key is held while dragging the background, the entire molecule will be rotated. Double-clicking on the background will center the molecule.

Lasso – Puts the sketcher into lasso mode. You can select content by pressing down and dragging to surround it. The lasso tools are modeled after ChemDoodle desktop and are only available in the Full Sketcher.

Lasso (shapes only) – Puts the sketcher into lasso mode, but only shapes can be selected. You can select content by pressing down and dragging to surround it. The lasso tools are modeled after ChemDoodle desktop and are only available in the Full Sketcher.

Rectangular Marquee – Puts the sketcher into rectangular marquee mode. You can select content by pressing down and dragging to encompass the content within the rectangle bounds. The marquee tool is modeled after ChemDoodle desktop and is only available in the Full Sketcher.

Move – Puts the sketcher into move mode. Highlighting an atom or bond and then pressing the mouse down and dragging will translate those objects. This tool is only available in the Single Molecule Sketcher.

Clear – Clears the sketcher. In the Single Molecule Sketcher, this leaves a single carbon atom.

Erase – Puts the sketcher into erase mode. In the Full Sketcher, deleting a bond will remove that bond and deleting an atom will remove that atom and any attached bonds. In the Single Molecule Sketcher, highlighting an atom and clicking will remove that atom and any small disconnected fragments, leaving the largest fragment remaining. Highlighting a bond and clicking will only have an effect if that bond is part of a ring, and in that case it will remove that bond.

Clean – Cleans the selected structure in the Full Sketcher and the only structure in the Single Molecule Sketcher in 2D. This feature is only accessible through iChemLabs services.

Undo – Undoes the last performed action.

Redo – Redoes the last undone action.

Zoom In – Increases the rendering scale of the sketcher.

Zoom Out – Decreases the rendering scale of the sketcher.

Open File – This button pops up a window that allows a user to paste in the contents of an MDL MOLFile or ChemDoodle JSON to be loaded into the sketcher. This will replace the current content.

Save File – If iChemLabs services are used, then this button will open a file dialog to allow users to save any of the 24 chemical file formats that ChemDoodle supports. Otherwise, this button pops up a window displaying MDL MOLFile content for the selected structure in the Full Sketcher and the only structure in the Single Molecule Sketcher that can be pasted into a text editor and saved with a .mol extension.

MolGrabber – This button pops up a window displaying a MolGrabberCanvas component that can be used to search the ChemExper, ChemSpider and PubChem databases for molecules of interest and then load them into the sketcher. This feature is only accessible through iChemLabs services. In the Single Molecule Sketcher, loading this content will replace the current content.

Calculator – Calculates various descriptors for the selected structure in the Full Sketcher and the only structure in the Single Molecule Sketcher. This feature is only accessible through iChemLabs services.

Labels – After an element has been selected, hover an atom and click to change that atom’s label to the selected element symbol. If you press the mouse down and drag to the edge of the optimize zone, a new bond will sprout from that atom to the label in an optimal position. Drag out of the optimize zone and/or use the shift/alt keys to place a bond to this label anywhere.

Periodic Table – Pops up a periodic table to select a symbol. After a symbol has been selected, hover an atom and click to change that atom’s label to the selected element symbol. Press the Close button to close it.

Bonds – After a bond type has been selected, hover an atom and press the mouse down to begin drawing a new bond of that type. Drag and place the preview to the preferred position and then release the mouse to place the bond. The optimize zone (blue circle) is provided to help place the bond in the optimal position when the mouse pointer is within the bounds of the circle. Hover a bond and click to change that bond’s type to the selected type. The single bond tool is special and will add to bond orders instead of overriding them. Hold down the shift key to modify standard lengths and hold down the alt key to modify standard angles.

Rings – After a ring type has been selected, hover an atom and press the mouse down to begin drawing a new ring of that type. Drag and place the preview to the preferred position and then release the mouse to place the ring. The optimize zone (blue circle) is provided to help place the ring in the optimal position when the mouse pointer is within the bounds of the circle. Hover a bond and press the mouse down to begin drawing a ring from that bond. Drag the preview to either side of the bond and then release the mouse to place the ring. Hold down the shift key to modify standard lengths and hold down the alt key to modify standard angles.

Charges – After a charge sign has been selected, hover an atom and click the mouse to add or subtract from that atom’s charge amount.

Lone Pairs – After a lone pair icon has been selected, hover an atom and click the mouse to add or remove a lone pair from that atom.

Radicals – After a lone pair icon has been selected, hover an atom and click the mouse to add or remove a lone pair from that atom.

Any Element – Use this tool to hover over an atom and click to designate that atom to be any element. An asterisk will appear instead of its label. Click on the atom again with this tool to remove the any element attribute.

Rgroup – Use this tool to hover over an atom and click to designate that atom as an Rgroup. A dialog will appear asking for the Rgroup number. The label will then be changed to the Rgroup label. Only positive integers are allowed. To remove the Rgroup designation, use this tool to assign an Rgroup number of -1.

Arrows – To place arrows, chose this tool, press the mouse down where the arrow will start and then drag and release the mouse where the arrow will end. Shapes are only available in the full sketcher.

Electron Pushing Arrows – To place electron pushing arrows, chose this tool, press the mouse down over a hovered atom or bond and then drag and release over another hovered atom or bond. The pusher will automatically render. You can remove pushers by placing another pusher in the reverse direction or by using the other delete methods with the pusher hovered. Shapes are only available in the full sketcher.

Bracket – To place brackets, chose this tool, press the mouse down where the first corner of the bracket will start and then drag and release the mouse to where the opposite corner will end. In this mode, there will also be up and down arrows displayed at various positions on the bracket. Pressing the up and down arrows will increment and decrement the values at these positions. The top-right defines the charge amount, the center-left defines the multiple count, and the bottom-right defines the repeat count.

Group Buttons

At the end of some button groups, there is a small button with a downwards facing arrow. This means that there are more options available for this button set. Just click on this downwards facing arrow and select an option. The button adjacent to the downwards facing arrow will pick up this option and will be automatically selected for use.

Just like in the desktop version of ChemDoodle, the web-based sketcher implements a copious amount of keyboard shortcuts. In addition to the listed shortcuts, you can also use the arrow keys to nudge the molecule. All keyboard shortcuts will work regardless of the state or mode the sketcher is in. But keep in mind that many of these shortcuts also are shortcuts for the browser. So these shortcuts will only work if the mouse is over the sketcher.

Modifier Shortcuts

Modifier shortcuts are executed by holding down the system meta key, which is ctrl on Windows and Linux and command on Mac OS X.

a	Selects all content in the Full Sketcher.
n	Clears the sketcher, leaving a lone carbon atom.
o	Pops up a window to load a chemical file.
s	Pops up a window to save the structure in the sketcher in a chemical format.
y	Redoes the last undone action.
z	Undoes the last performed action.
+	Zooms in.
-	Zooms out.

When Atoms are Hovered

When an atom is hovered, the following shortcuts will be active. An atom is hovered if the mouse is close enough to the atom such that the atom is surrounded by an amber circle.

Alphabet	Cycles the hovered atom’s label through the element symbols that begin with that letter of the alphabet.
Digits	Adds a carbon chain with length equal to the digit pressed in the most optimal orientation. The 0 key will add a chain of length 10.
Shift+Digits	Adds a ring with number of sides equal to the digit pressed (3+) in the most optimal orientation.
Delete/Backspace	Removes the hovered atom and any attached bonds and any small attached bonds. Leaves the largest fragment remaining in the Single Molecule Sketcher.
+/-	Increase/Decrease the charge amount of the atom.

When Bonds are Hovered

When a bond is hovered, the following shortcuts will be active. A bond is hovered if the mouse is close enough to the center of the bond such that the bond is encapsulated by two amber semicircles.

Digits	Changes the bond’s order to the digit. Only 1-3 work.
Shift+Digits	Adds a ring with number of sides equal to the digit pressed (3+) in the most optimal orientation.
Delete/Backspace	Removes the hovered bond. In the Single Molecule Sketcher, the bond is removed if and only if that bond is a member of a ring.
f	Flip the bond orientation.

When Shapes are Hovered

When a shape is hovered, the following shortcuts will be active. A shape is hovered if the mouse is close enough to the control points of the shape or over the shape such that the shape control points appear. These functions will only work in the Full Sketcher, because only the Full Sketcher allows shapes.

Delete/Backspace

Removes the hovered shape.

Lasso Shortcuts

These shortcuts will make it easier to work with the lasso tool. The functions are only available in the Full Sketcher.

Tab	Select the next molecule.
Shift+Tab	Select the next shape.
Space	Empties the selection and starts the Single Bond tool.
Delete/Backspace	Removes the selected content.

If the website implementing the web-based sketcher does not access iChemLabs services, then important functionality that you may benefit from is missing from their implementation. Please urge the providers of that service to contact us and provide users like you with premium services.

If you need help for any reason, please view our support options.