2D Shapes

Shapes can be added to 2D Canvases to create complex figures. These may be reactions, or ions or something else. This document covers the different types of 2D shapes and how to use them.

Managing Shapes

2D shapes can be added to 2D Canvases in a couple ways. The first is by adding a single shape by using the Canvas.addShape() function which takes a single shape object as a parameter. Use this function when you want to add to a figure that is already set up. The second method is by using the Canvas.loadContent() function which takes an array of Molecules and an array of Shapes as parameters. Use this when you want to initialize a figure based on a preconfigured set of Molecules and Shapes, such as when reading a reaction file.

You can remove a shape from a 2D Canvas by using the Canvas.removeShape() function which takes the shape to be removed as parameter.

Shapes can be controlled with visual specifications just like the rest of the objects in the ChemDoodle Web Components library. The following visual specifications are global shape specifications that will affect all shapes. Specific visual specifications are covered in the individual shape sections below.

  1. shapes_color – The color string to be used to draw shapes.
  2. shapes_lineWidth – The line width used to draw shapes.

Shapes

2D Shape List

Line

A Line is simply a graphical stroke between two points. In addition, lines can be decorated as arrows. The Line constructor takes two Point data structures, the first Point defining where the line begins from and the second Point defining where the line ends. After initialization, you can change the Line.arrowType variable to draw it as an arrow. The following example shows how to do this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
  var viewerLine = new ChemDoodle.ViewerCanvas('viewerLine', 100, 100);
  // create a plain line
  var plainLine = new ChemDoodle.structures.d2.Line(new ChemDoodle.structures.Point(10, 10), new ChemDoodle.structures.Point(90, 10));
  // create a synthetic arrow
  var syntheticArrow = new ChemDoodle.structures.d2.Line(new ChemDoodle.structures.Point(10, 30), new ChemDoodle.structures.Point(90, 30));
  syntheticArrow.arrowType = ChemDoodle.structures.d2.Line.ARROW_SYNTHETIC;
  // create a retrosynthetic arrow
  var retrosyntheticArrow = new ChemDoodle.structures.d2.Line(new ChemDoodle.structures.Point(10, 50), new ChemDoodle.structures.Point(90, 50));
  retrosyntheticArrow.arrowType = ChemDoodle.structures.d2.Line.ARROW_RETROSYNTHETIC;
  // create a resonance arrow
  var resonanceArrow = new ChemDoodle.structures.d2.Line(new ChemDoodle.structures.Point(10, 70), new ChemDoodle.structures.Point(90, 70));
  resonanceArrow.arrowType = ChemDoodle.structures.d2.Line.ARROW_RESONANCE;
  // create an equilibrium arrow
  var equilibriumArrow = new ChemDoodle.structures.d2.Line(new ChemDoodle.structures.Point(10, 90), new ChemDoodle.structures.Point(90, 90));
  equilibriumArrow.arrowType = ChemDoodle.structures.d2.Line.ARROW_EQUILIBRIUM;
  // add the lines
  viewerLine.addShape(plainLine);
  viewerLine.addShape(syntheticArrow);
  viewerLine.addShape(retrosyntheticArrow);
  viewerLine.addShape(resonanceArrow);
  viewerLine.addShape(equilibriumArrow);
  // repaint
  viewerLine.repaint();
</script>


You can also add text above and below lines, such as in reactions:

1
2
3
4
5
6
7
8
9
10
11
<script>
  var viewerLineText = new ChemDoodle.ViewerCanvas('viewerLineText', 100, 100);
  // create a synthetic arrow
  var syntheticArrow = new ChemDoodle.structures.d2.Line(new ChemDoodle.structures.Point(10, 50), new ChemDoodle.structures.Point(90, 50));
  syntheticArrow.arrowType = ChemDoodle.structures.d2.Line.ARROW_SYNTHETIC;
  syntheticArrow.topText = 'Text on top';
  syntheticArrow.bottomText = 'Text on bottom';
  viewerLineText.addShape(syntheticArrow);
  // repaint
  viewerLineText.repaint();
</script>


The following visual specifications can be used to modify how lines are drawn:

  1. shapes_arrowLength_2D – the length of the arrowheads drawn.

Pusher

A Pusher graphically describes the movement of electrons between atoms and bonds. The Pusher contructor takes two chemical data structures (an Atom or a Bond) and the number of electrons to push (you can also input -1 as the number of electrons to specify a Bond Forming pusher). ChemDoodle will then automatically draw a nice bezier arrow from the first chemical object to the second. Keep in mind that Pushers require two chemical objects. The following example shows how to do this:

1
2
3
4
5
6
7
8
9
10
11
12
<script>
  var viewerPusher = new ChemDoodle.ViewerCanvas('viewerPusher', 100, 100);
  // create a structure to define the Pusher from
  var mol = new ChemDoodle.structures.Molecule();
  mol.atoms.push(new ChemDoodle.structures.Atom());
  mol.atoms.push(new ChemDoodle.structures.Atom('O', 0, -20));
  mol.bonds.push(new ChemDoodle.structures.Bond(mol.atoms[0], mol.atoms[1], 2));
  // create a 2 electron pusher
  var pusher = new ChemDoodle.structures.d2.Pusher(mol.bonds[0], mol.atoms[1], 2);
  // load into the canvas
  viewerPusher.loadContent([mol], [pusher]);
</script>


The following visual specifications can be used to modify how pushers are drawn:

  1. shapes_arrowLength_2D – the length of the arrowheads drawn.

Bracket

A Bracket graphically annotates a group of objects. The constructor takes two Point data structures; the points define the opposite corners of the rectangle that represents its bounds. You can decorate the bracket with three variables, Bracket.charge, Bracket.mult and Bracket.repeat. The Bracket.charge variable will control the charge amount displayed at the top right of the bracket and is great for polyatomic ions. The Bracket.mult variable will control the multiple amount displayed at the center left of the bracket and is great for reactions and other quanities. The Bracket.repeat variable will control the repeat amount displayed at the bottom right of the bracket and is great for polymers. The following example shows how to do this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
  var viewerBracket = new ChemDoodle.ViewerCanvas('viewerBracket', 100, 100);
  // create a bracket
  var bracket = new ChemDoodle.structures.d2.Bracket(new ChemDoodle.structures.Point(25, 25), new ChemDoodle.structures.Point(75, 75));
  // set the charge amount
  bracket.charge = -2;
  // set the multiple count
  bracket.mult = 12;
  // set the repeat count
  bracket.repeat = 3;
  // load into the canvas
  viewerBracket.addShape(bracket);
  // repaint
  viewerBracket.repaint();
</script>