ChemDoodle Web Components

https://web.chemdoodle.com/
Admin
ChemDoodle Web Components is a pure JavaScript library for creating publication-quality 2D and 3D...
Tokens:260,760
Snippets:1,492
Trust Score:9.7
Update:6 months ago
Show doc for...
Tokens:
Raw
### Initializing the Query Sketcher

Source: https://web.chemdoodle.com/tutorial/advanced/sketcher-query-sketcher

Provides instructions and code examples for initializing the Query Sketcher in ChemDoodle.

```APIDOC
## Initializing the Query Sketcher

The Query Sketcher is just a special instance of the _SketcherCanvas_ setting the _includeQuery_ option to _true_. The _SketcherCanvas_ class is a child of the _Canvas_ class, so working with it is the same as with working with any other _Canvas_ in **ChemDoodle Web Components** library. To initialize it, we just call its constructor, which places it into the **HTML** page, including the _includeQuery_ option in the _options_ object:
```javascript
new ChemDoodle.SketcherCanvas(name, width, height, options);
```
```

--------------------------------

### Install react-chemdoodle

Source: https://web.chemdoodle.com/tutorial/advanced/reactjs-development

Command to install the react-chemdoodle package via npm.

```bash
npm install react-chemdoodle
```

--------------------------------

### Install ChemDoodle Web Components

Source: https://web.chemdoodle.com/tutorial/non-canvas/stoichiometry-table

Include the required CSS and JavaScript files to enable the StoichiometryTable component.

```html
<!--these two are required by the ChemDoodle Web Components library-->
<link rel="stylesheet" href="[path]/ChemDoodleWeb.css" type="text/css">
<script type="text/javascript" src="[path]/ChemDoodleWeb.js"></script>
<!--the ChemDoodle Web Components UIs plugin is required for the StoichiometryTable-->
<script type="text/javascript" src="[path]/ChemDoodleWeb-uis.js"></script>
```

--------------------------------

### Complete index.html Configuration

Source: https://web.chemdoodle.com/tutorial/advanced/reactjs-development

Example of a full index.html file including the necessary ChemDoodle CSS and JavaScript files.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link
      rel="stylesheet"
      href="%PUBLIC_URL%/ChemDoodleWeb-9.5.0/install/ChemDoodleWeb.css"
      type="text/css"
    />
    <link
      rel="stylesheet"
      href="%PUBLIC_URL%/ChemDoodleWeb-9.5.0/install/uis/jquery-ui-1.11.4.css"
      type="text/css"
    />
    <script
      type="text/javascript"
      src="%PUBLIC_URL%/ChemDoodleWeb-9.5.0/install/ChemDoodleWeb.js"
    ></script>
    <script
      type="text/javascript"
      src="%PUBLIC_URL%/ChemDoodleWeb-9.5.0/install/uis/ChemDoodleWeb-uis.js"
    ></script>
    <title>My React Application</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
```

--------------------------------

### Import and use ViewerCanvas

Source: https://web.chemdoodle.com/tutorial/advanced/reactjs-development

Example of importing the ViewerCanvas component and passing molecular data as a prop.

```javascript
import { ViewerCanvas } from 'react-chemdoodle'

function Caffeine() {
    const caffeine = // fetch molecular data

    return (
        <ViewerCanvas
            id="caffeine"
            data={{ mol: caffeine }}
            canvasStyle={{
                bonds_width_2D: 0.6,
                bonds_saturationWidthAbs_2D: 2.6,
                bonds_hashSpacing_2D: 2.5,
                atoms_font_size_2D: 10,
                atoms_font_families_2D: ['Helvetica', 'Arial', 'sans-serif']
            }}
            moleculeStyle={{
                scaleToAverageBondLength: 14.4
            }}
        />
    )
}
```

--------------------------------

### Install ChemDoodle Web Components

Source: https://web.chemdoodle.com/tutorial/3d-structure-canvases/editor3d-canvas

Include the required CSS and JavaScript files to enable the EditorCanvas3D plugin.

```html
<!--these two are required by the ChemDoodle Web Components library-->
<link rel="stylesheet" href="[path]/ChemDoodleWeb.css" type="text/css">
<script type="text/javascript" src="[path]/ChemDoodleWeb.js"></script>
<!--the ChemDoodle Web Components UIs plugin is required for the EditorCanvas3D-->
<script type="text/javascript" src="[path]/ChemDoodleWeb-uis.js"></script>
```

--------------------------------

### Configure and Preload MolGrabberCanvas3D

Source: https://web.chemdoodle.com/tutorial/3d-structure-canvases/molgrabber3d-canvas

Example of initializing the component, setting display styles, and triggering an automatic search.

```html
<script>
  let molgrabber = new ChemDoodle.MolGrabberCanvas3D('molgrabber', 300, 300);
  molgrabber.styles.set3DRepresentation('Stick');
  molgrabber.styles.backgroundColor = 'black';
  molgrabber.setSearchTerm('morphine');
</script>
```

--------------------------------

### Ethane Example

Source: https://web.chemdoodle.com/docs/chemdoodle-json-format

JSON for an ethane molecule, including atom coordinates and a single bond object.

```json
{"b":[{"e":1,"b":0}],"a":[{"y":-5,"x":-8.6603},{"y":5,"x":8.6603}]}
```

--------------------------------

### Configure and Preload MolGrabberCanvas

Source: https://web.chemdoodle.com/tutorial/2d-structure-canvases/molgrabber-canvas

Example of initializing a canvas, setting display styles, and preloading a search term.

```html
<script>
  let molgrabber = new ChemDoodle.MolGrabberCanvas('molgrabber', 200, 200);
  molgrabber.styles.atoms_displayTerminalCarbonLabels_2D = true;
  molgrabber.styles.bonds_clearOverlaps_2D = true;
  molgrabber.styles.bonds_overlapClearWidth_2D = 2;
  molgrabber.setSearchTerm('morphine');
</script>
```

--------------------------------

### Initialize ChemDoodle Molecule Visualization

Source: https://web.chemdoodle.com/tutorial/advanced/transparent-backgrounds

Load a molecule from a MOL file string and start a 3D animation, followed by configuring a 2D rotator canvas.

```javascript
  0  0  0  0
    0.4766   -4.0323    7.1351 H   0  0  0  0  0  0  0  0  0  0  0  0
   -2.6844   -4.5447    4.2483 H   0  0  0  0  0  0  0  0  0  0  0  0
    3.1053   -7.8745    4.5359 H   0  0  0  0  0  0  0  0  0  0  0  0
    1.8095   -8.4516    0.4646 H   0  0  0  0  0  0  0  0  0  0  0  0
   -0.0505    0.4000   -2.8850 H   0  0  0  0  0  0  0  0  0  0  0  0
    1.3037    1.1277   -1.9920 H   0  0  0  0  0  0  0  0  0  0  0  0
   -0.3805    1.2760   -1.3734 H   0  0  0  0  0  0  0  0  0  0  0  0
    0.5205    2.3984    6.6525 H   0  0  0  0  0  0  0  0  0  0  0  0
   -1.1042    2.3234    5.9778 H   0  0  0  0  0  0  0  0  0  0  0  0
    0.1102    3.3898    5.2329 H   0  0  0  0  0  0  0  0  0  0  0  0
    8.6474   -5.6372   -0.6562 H   0  0  0  0  0  0  0  0  0  0  0  0
    7.9378   -5.5784   -2.2667 H   0  0  0  0  0  0  0  0  0  0  0  0
    7.6388   -6.9887   -1.2235 H   0  0  0  0  0  0  0  0  0  0  0  0
   -1.6201   -5.1948    7.7336 H   0  0  0  0  0  0  0  0  0  0  0  0
   -2.9101   -5.4069    6.5540 H   0  0  0  0  0  0  0  0  0  0  0  0
   -2.6476   -3.8102    7.2941 H   0  0  0  0  0  0  0  0  0  0  0  0
    1.5797  -10.1882    3.0627 H   0  0  0  0  0  0  0  0  0  0  0  0
    2.7931  -10.3081    1.7667 H   0  0  0  0  0  0  0  0  0  0  0  0
    3.3167  -10.0729    3.4313 H   0  0  0  0  0  0  0  0  0  0  0  0
  1  2  2  0  0  0  0
  1  5  1  0  0  0  0
  1  6  1  0  0  0  0
  3 13  1  0  0  0  0
  3 36  1  0  0  0  0
  4 13  2  0  0  0  0
  5  7  1  0  0  0  0
  5  9  1  0  0  0  0
  5 11  1  0  0  0  0
  6  8  1  0  0  0  0
  6 10  1  0  0  0  0
  6 12  1  0  0  0  0
  7  8  1  0  0  0  0
  7 13  1  0  0  0  0
  7 41  1  0  0  0  0
  8 42  1  0  0  0  0
  8 43  1  0  0  0  0
  9 10  2  0  0  0  0
  9 14  1  0  0  0  0
 10 15  1  0  0  0  0
 11 16  2  0  0  0  0
 11 17  1  0  0  0  0
 12 18  2  0  0  0  0
 12 19  1  0  0  0  0
 14 20  2  0  0  0  0
 14 21  1  0  0  0  0
 15 22  2  0  0  0  0
 15 23  1  0  0  0  0
 16 24  1  0  0  0  0
 16 44  1  0  0  0  0
 17 25  2  0  0  0  0
 17 45  1  0  0  0  0
 18 26  1  0  0  0  0
 18 46  1  0  0  0  0
 19 27  2  0  0  0  0
 19 47  1  0  0  0  0
 20 30  1  0  0  0  0
 20 48  1  0  0  0  0
 21 31  2  0  0  0  0
 21 49  1  0  0  0  0
 22 32  1  0  0  0  0
 22 50  1  0  0  0  0
 23 33  2  0  0  0  0
 23 51  1  0  0  0  0
 24 28  2  0  0  0  0
 24 52  1  0  0  0  0
 25 28  1  0  0  0  0
 25 53  1  0  0  0  0
 26 29  2  0  0  0  0
 26 54  1  0  0  0  0
 27 29  1  0  0  0  0
 27 55  1  0  0  0  0
 28 37  1  0  0  0  0
 29 38  1  0  0  0  0
 30 34  2  0  0  0  0
 30 56  1  0  0  0  0
 31 34  1  0  0  0  0
 31 57  1  0  0  0  0
 32 35  2  0  0  0  0
 32 58  1  0  0  0  0
 33 35  1  0  0  0  0
 33 59  1  0  0  0  0
 34 39  1  0  0  0  0
 35 40  1  0  0  0  0
 36 60  1  0  0  0  0
 36 61  1  0  0  0  0
 36 62  1  0  0  0  0
 37 63  1  0  0  0  0
 37 64  1  0  0  0  0
 37 65  1  0  0  0  0
 38 66  1  0  0  0  0
 38 67  1  0  0  0  0
 38 68  1  0  0  0  0
 39 69  1  0  0  0  0
 39 70  1  0  0  0  0
 39 71  1  0  0  0  0
 40 72  1  0  0  0  0
 40 73  1  0  0  0  0
 40 74  1  0  0  0  0
M  END
';
      let mol = ChemDoodle.readMOL(molFile, 1);
      rotator3D.loadMolecule(mol);
      rotator3D.startAnimation();

      let rotator2D = new ChemDoodle.RotatorCanvas('rotator2D', 300, 300);
      rotator2D.styles.backgroundColor = 'transparent';
      rotator2D.styles.atoms_useJMOLColors = true;
      rotator2D.styles.atoms_displayTerminalCarbonLabels_2D = true;
      rotator2D.styles.bonds_color = 'white';
```

--------------------------------

### Initialize and Animate Molecule

Source: https://web.chemdoodle.com/tutorial/advanced/transparent-backgrounds

Loads a chemical structure from a MOL file string and starts a 2D rotation animation.

```javascript
molFile = 'Molecule Name
  CHEMDOOD08070920113D 0   0.00000     0.00000     0
[Insert Comment Here]
 42 47  0  0  0  0  0  0  0  0  1 V2000
    2.5688   -1.4702    0.0000   O 0  0  0  1  0  0  0  0  0  0  0  0
   -1.3587    0.4207    0.0000   O 0  0  0  1  0  0  0  0  0  0  0  0
    7.1400   -0.8173    0.0000   O 0  0  0  1  0  0  0  0  0  0  0  0
   -4.3466    0.6451    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0
   -4.5151    1.6308    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0
   -2.8921   -0.3846    0.0000   N 0  0  0  2  0  0  0  0  0  0  0  0
   -1.4280   -1.3100    0.0000   N 0  0  0  2  0  0  0  0  0  0  0  0
    5.6867    0.1250    0.0000   N 0  0  0  2  0  0  0  0  0  0  0  0
    4.5987   -1.5532    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0
    4.2288    1.1115    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0
   -3.4856    3.0853    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0
   -3.6298    2.0957    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0
   -3.3412    4.0748    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0
   -4.4751    3.2295    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0
   -2.4960    2.9409    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0
   -2.9141    1.3973    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0
   -3.3571    0.5008    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0
   -5.0449   -0.0706    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0
   -6.0140    0.1763    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0
   -4.7742   -1.0333    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0
   -1.8929   -0.4246    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0
   -0.4288   -1.3500    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0
    0.0361   -2.2353    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0
    1.0353   -2.2754    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0
   -6.7123   -0.5395    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0
   -5.4727   -1.7490    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0
   -6.4416   -1.5021    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0
    1.5696   -1.4301    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0
    0.1055   -0.5047    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0
    1.1046   -0.5448    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0
   -0.5340   -3.1071    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0
    1.5338   -3.1900    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0
   -7.1400   -2.2179    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0
   -0.0568   -4.0331    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0
    0.9840   -4.0748    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0
    3.1030   -0.6249    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0
    4.1440   -0.6625    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0
    4.6880    0.1766    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0
    2.6224    0.2992    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0
    3.1890    1.1732    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0
    6.1413   -0.7658    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0
    5.5973   -1.6048    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0
  1 28  1  0  0  0  0
  1 36  1  0  0  0  0
  2 21  2  0  0  0  0
  3 41  2  0  0  0  0
  4  5  1  0  0  0  0
  4 17  1  0  0  0  0
  4 18  1  0  0  0  0
  5 12  2  0  0  0  0
  6 17  1  0  0  0  0
  6 21  1  0  0  0  0
  7 21  1  0  0  0  0
  7 22  1  0  0  0  0
  8 38  1  0  0  0  0
  8 41  1  0  0  0  0
  9 37  1  0  0  0  0
  9 42  2  0  0  0  0
 10 38  2  0  0  0  0
 10 40  1  0  0  0  0
 11 12  1  0  0  0  0
 11 13  1  0  0  0  0
 11 14  1  0  0  0  0
 11 15  1  0  0  0  0
 12 16  1  0  0  0  0
 16 17  2  0  0  0  0
 18 19  2  0  0  0  0
 18 20  1  0  0  0  0
 19 25  1  0  0  0  0
 20 26  2  0  0  0  0
 22 23  1  0  0  0  0
 22 29  2  0  0  0  0
 23 24  1  0  0  0  0
 23 31  2  0  0  0  0
 24 28  1  0  0  0  0
 24 32  2  0  0  0  0
 25 27  2  0  0  0  0
 26 27  1  0  0  0  0
 27 33  1  0  0  0  0
 28 30  2  0  0  0  0
 29 30  1  0  0  0  0
 31 34  1  0  0  0  0
 32 35  1  0  0  0  0
 34 35  2  0  0  0  0
 36 37  2  0  0  0  0
 36 39  1  0  0  0  0
 37 38  1  0  0  0  0
 39 40  2  0  0  0  0
 41 42  1  0  0  0  0
M  END
';
mol = ChemDoodle.readMOL(molFile);
rotator2D.loadMolecule(mol);
rotator2D.startAnimation();
```

--------------------------------

### ChemDoodle Web Components Installation

Source: https://web.chemdoodle.com/tutorial/2d-structure-canvases/sketcher-canvas

Include the necessary ChemDoodle Web Components CSS and JavaScript files, including the UIs plugin for SketcherCanvas.

```APIDOC
## ChemDoodle Web Components Installation

To simplify the **ChemDoodle Web Components** library, the _SketcherCanvas_ component is provided as a plugin with other components needing a more advanced user interface. In order to use the _SketcherCanvas_ class, you need to link the _ChemDoodleWeb-uis.js_ file provided in the ChemDoodle Web Components download:

```html
<!--these two are required by the ChemDoodle Web Components library-->
<link rel="stylesheet" href="[path]/ChemDoodleWeb.css" type="text/css">
<script type="text/javascript" src="[path]/ChemDoodleWeb.js"></script>
<!--the ChemDoodle Web Components UIs plugin is required for the SketcherCanvas-->
<script type="text/javascript" src="[path]/ChemDoodleWeb-uis.js"></script>
```

### Sketcher Toolbar Icons

The icons for the sketcher are embedded directly in the _ChemDoodleWeb-uis.js_ file source itself as data URIs, so there is no need to host those images. Please note that the _ChemDoodleWeb-uis.js_ icons (that you see in the toolbars) are **iChemLabs** Proprietary and may only be used in projects using **ChemDoodle Web Components**.
```

--------------------------------

### Atom Mapping Example

Source: https://web.chemdoodle.com/docs/chemdoodle-json-format

Links a reactant atom to a product atom in a reaction scheme. Used for atom mapping in ChemDoodle.

```json
{"t":"AtomMapping","o1":"a0","o2":"a1","n":"1"}
```

--------------------------------

### Enhanced Stereochemistry Example

Source: https://web.chemdoodle.com/docs/chemdoodle-json-format

Example of an atom with enhanced stereochemistry designation '&' (and) in group 2, used for a chiral carbon.

```json
{"m":[{"a":[{"x":-20,"i":"a0","y":0,"l":"F"},{"x":0,"i":"a1","y":0,"s2":{"t":"&","g":2}},{"x":20,"i":"a2","y":0,"l":"H"},{"x":0,"i":"a3","y":-20,"l":"Cl"},{"x":0,"i":"a4","y":20,"l":"Br"}],"b":[{"b":1,"s":"protruding","e":0,"i":"b0","o":1},{"b":1,"e":2,"i":"b1"},{"b":1,"s":"recessed","e":3,"i":"b2","o":1},{"b":1,"e":4,"i":"b3"}]}]}
```

--------------------------------

### Isomers of Butane Example

Source: https://web.chemdoodle.com/docs/chemdoodle-json-format

Example JSON representing the isomers of butane, showing atom coordinates and bond connections.

```json
{"m":[{"a":[{"x":85,"y":144},{"x":102.32050807568878,"y":134},{"x":67.67949192431124,"y":134},{"x":85,"y":164}],"b":[{"b":0,"e":1},{"b":0,"e":2},{"b":0,"e":3}]},{"a":[{"x":213,"y":131},{"x":230.32050807568876,"y":121},{"x":247.64101615137753,"y":131},{"x":264.9615242270663,"y":121}],"b":[{"b":0,"e":1},{"b":1,"e":2},{"b":2,"e":3}]}]}
```
Tokens:
Raw