Tutorial > Initializing Components after Closing the DOM

In the basic tutorial covering the initialization of Canvases, we discussed how to create ChemDoodle Web Components using the constructor functions. The examples created each component in the DOM as it was being written. While this process is very simple, you may be interested in developing a system that requires a bit more complexity. For instance, you need to be able to create ChemDoodle Web Components on actions by the user, or you are working with a framework that separates writing the DOM from any JavaScript code. Fortunately, the ChemDoodle Web Components library was written with this in mind, and you can initialize components after the DOM has been closed. Let us look at a few examples.

Initializing a Component on an Existing <canvas>

We can create a ChemDoodle Web Component on an existing <canvas> element by calling the exact same function as we did before, but now we will use the id of the element in the DOM in the ChemDoodle Web Component constructor.

When writing the DOM, we first create the <canvas> element. Notice that we define its id to initializeMeLater and set the width and height to 150. We also give it a border so we can see where it is, otherwise it would just be blank space.

<canvas id="initializeMeLater" width="150" height="150" style="border:1px solid black;">This is a message that shows if the browser doesn't support HTML5 canvas, which all modern browsers should support now.</canvas>

We can see the empty <canvas> element. Now we can call the JavaScript at any time to initialize the ChemDoodle Web Component.

<script>
  // just check to make sure it wasn't already initialized
  if(!window.myCanvas){
    // we don't provide a width or height, as those values will be absorbed from the existing element
    // place the object in the global scope so we can access it outside of this function by excluding the let keyword
    myCanvas = new ChemDoodle.ViewerCanvas('initializeMeLater');
    myCanvas.emptyMessage = 'No Data Loaded!';
    let caffeineMolFile = 'Molecule Name\n  CHEMDOOD08070920033D 0   0.00000     0.00000     0\n[Insert Comment Here]\n 14 15  0  0  0  0  0  0  0  0  1 V2000\n   -0.3318    2.0000    0.0000   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318    1.0000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -1.1980    0.5000    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    0.5342    0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -1.1980   -0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -2.0640    1.0000    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n    1.4804    0.8047    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    0.5342   -0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -2.0640   -1.0000    0.0000   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318   -1.0000    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    2.0640   -0.0000    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n    1.7910    1.7553    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n    1.4804   -0.8047    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318   -2.0000    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n  1  2  2  0  0  0  0\n  3  2  1  0  0  0  0\n  4  2  1  0  0  0  0\n  3  5  1  0  0  0  0\n  3  6  1  0  0  0  0\n  7  4  1  0  0  0  0\n  4  8  2  0  0  0  0\n  9  5  2  0  0  0  0\n 10  5  1  0  0  0  0\n 10  8  1  0  0  0  0\n  7 11  1  0  0  0  0\n  7 12  1  0  0  0  0\n 13  8  1  0  0  0  0\n 13 11  2  0  0  0  0\n 10 14  1  0  0  0  0\nM  END\n> <DATE>\n07-08-2009\n';
    let caffeine = ChemDoodle.readMOL(caffeineMolFile);
    myCanvas.loadMolecule(caffeine);
  }
</script>

Give it a try:

This is a message that shows if the browser doesn't support HTML5 canvas, which all modern browsers should support now.

Notice that we didn't give a width or height parameter to the constructor as we had already preset the size in the <canvas> element. The ChemDoodle Web Components know to absorb these values on initialization. We can also define or override those dimensions as shown in the next example.

Initializing a Component on an Existing <canvas> and Change Dimensions

We are going to do the same thing as the previous example, but this time, we will define a size in the ChemDoodle Web Components constructor to be used on initialization. The initial size of the <canvas> will be set to 0x0px so when initialized, it will appear to come out of no where. To this effect, we will also remove the border (which will later be added when the ChemDoodle Web Components API assigns its CSS class).

<canvas id="initializeMeLaterWithDimensions" width="0" height="0">This is a message that shows if the browser doesn't support HTML5 canvas, which all modern browsers should support now.</canvas>

We can see the empty <canvas> element. Now we can call the JavaScript at any time to initialize the ChemDoodle Web Component.

<script>
  // just check to make sure it wasn't already initialized
  if(!window.myCanvas2){
    // we don't provide a width or height, as those values will be absorbed from the existing element
    // place the object in the global scope so we can access it outside of this function by excluding the let keyword
    myCanvas2 = new ChemDoodle.ViewerCanvas('initializeMeLaterWithDimensions', 150, 150);
    myCanvas2.emptyMessage = 'No Data Loaded!';
    let caffeineMolFile = 'Molecule Name\n  CHEMDOOD08070920033D 0   0.00000     0.00000     0\n[Insert Comment Here]\n 14 15  0  0  0  0  0  0  0  0  1 V2000\n   -0.3318    2.0000    0.0000   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318    1.0000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -1.1980    0.5000    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    0.5342    0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -1.1980   -0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -2.0640    1.0000    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n    1.4804    0.8047    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    0.5342   -0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -2.0640   -1.0000    0.0000   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318   -1.0000    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    2.0640   -0.0000    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n    1.7910    1.7553    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n    1.4804   -0.8047    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318   -2.0000    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n  1  2  2  0  0  0  0\n  3  2  1  0  0  0  0\n  4  2  1  0  0  0  0\n  3  5  1  0  0  0  0\n  3  6  1  0  0  0  0\n  7  4  1  0  0  0  0\n  4  8  2  0  0  0  0\n  9  5  2  0  0  0  0\n 10  5  1  0  0  0  0\n 10  8  1  0  0  0  0\n  7 11  1  0  0  0  0\n  7 12  1  0  0  0  0\n 13  8  1  0  0  0  0\n 13 11  2  0  0  0  0\n 10 14  1  0  0  0  0\nM  END\n> <DATE>\n07-08-2009\n';
    let caffeine = ChemDoodle.readMOL(caffeineMolFile);
    myCanvas2.loadMolecule(caffeine);
  }
</script>

Give it a try:

This is a message that shows if the browser doesn't support HTML5 canvas, which all modern browsers should support now.

This works for UIs like the SketcherCanvas as well:

This is a message that shows if the browser doesn't support HTML5 canvas, which all modern browsers should support now.

Creating a Component and <canvas> after the DOM has Closed

In advanced cases, you may not know where to first place a <canvas> object, as the location of the component may depend on a user action. We can use jQuery (bundled in ChemDoodle Web Components) to first place a <canvas> element in the DOM, then initialize the ChemDoodle Web Component on that <canvas>.

Click on the following button, and then click anywhere on this page to place and initialize a ChemDoodle Web Component after that element.


And this is the code to make that work:

<script>
let addCount = 0;
function clickToCreate(){
  // only once per mousedown, using jQuery bundled in CWC
  ChemDoodle.lib.jQuery(document).one("mousedown", function(event){
    // id is 'created[x]', where [x] is a counter that is incremented on use, avoiding id clashes
    let id = 'created' + (addCount++).toString();
    // on the element that was clicked (event.target), append a canvas element with the above id
    ChemDoodle.lib.jQuery(event.target).after('<canvas id="'+id+'" width="0" height="0">This is a message that shows if the browser doesn\'t support HTML5 canvas, which all modern browsers should support now.</canvas>');
    // initialize the component
    canvas = new ChemDoodle.ViewerCanvas(id, 50, 50);
    canvas.emptyMessage = 'No Data Loaded!';
    let caffeineMolFile = 'Molecule Name\n  CHEMDOOD08070920033D 0   0.00000     0.00000     0\n[Insert Comment Here]\n 14 15  0  0  0  0  0  0  0  0  1 V2000\n   -0.3318    2.0000    0.0000   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318    1.0000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -1.1980    0.5000    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    0.5342    0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -1.1980   -0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -2.0640    1.0000    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n    1.4804    0.8047    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    0.5342   -0.5000    0.0000   C 0  0  0  1  0  0  0  0  0  0  0  0\n   -2.0640   -1.0000    0.0000   O 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318   -1.0000    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n    2.0640   -0.0000    0.0000   C 0  0  0  2  0  0  0  0  0  0  0  0\n    1.7910    1.7553    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n    1.4804   -0.8047    0.0000   N 0  0  0  1  0  0  0  0  0  0  0  0\n   -0.3318   -2.0000    0.0000   C 0  0  0  4  0  0  0  0  0  0  0  0\n  1  2  2  0  0  0  0\n  3  2  1  0  0  0  0\n  4  2  1  0  0  0  0\n  3  5  1  0  0  0  0\n  3  6  1  0  0  0  0\n  7  4  1  0  0  0  0\n  4  8  2  0  0  0  0\n  9  5  2  0  0  0  0\n 10  5  1  0  0  0  0\n 10  8  1  0  0  0  0\n  7 11  1  0  0  0  0\n  7 12  1  0  0  0  0\n 13  8  1  0  0  0  0\n 13 11  2  0  0  0  0\n 10 14  1  0  0  0  0\nM  END\n> <DATE>\n07-08-2009\n';
    let caffeine = ChemDoodle.readMOL(caffeineMolFile);
    canvas.loadMolecule(caffeine);
  });
};
</script>

Get your work done with our popular desktop software.