reymond-group / smilesDrawer

A small, highly performant JavaScript component for parsing and drawing SMILES strings. Released under the MIT license.
https://smilesdrawer.rocks
MIT License
416 stars 66 forks source link

drawer doesn't respect canvas dimensions #182

Open dave-watts opened 4 months ago

dave-watts commented 4 months ago

The drawer generally draws long compounds horizontally, which is good, therefore I set a long canvas size

<canvas id="smiles-canvas" style="display: inline-block; width: 1050px; height: 400px;" width="1050" height="400"></canvas>

  this.smiles_canvas_dims = { width: 1050, height: 400, padding: 0 };

  this.smilesDrawer = null;
  // Initialize the drawer to draw to canvas
  if(typeof(SmilesDrawer) !== 'undefined')
      this.smilesDrawer = new SmilesDrawer.Drawer(this.smiles_canvas_dims);

then I try to draw a simple smiles

smile="CCCNC"

SmilesDrawer.parse(smile, (tree)=> {
    this.smilesDrawer.draw(tree, "smiles-canvas", "dark", false);

}, function (err) {
    console.log(err);
});

However it is drawn outsize of the canvas area. This doesn't happen for other smiles, such as benzene or the protein fragment

CC(C)CC(C(=O)N)NC(=O)C(C)NC(=O)C(CCCCN)NC(=O)C(CC(C)C)NC(=O)C(C)NC(=O)C(CCCCN)NC(=O)C(CC(C)C)NC(=O)C(CC(C)C)NC(=O)C(C)NC(=O)C(CCCCN)NC(=O)C(CC(C)C)NC(=O)C(C)NC(=O)C(CCCCN)NC(=O)C(C)NC(=O)C(CC1=CC=CC=C1)N

which it renders quite well within the canvas (i have to make the padding 0 otherwise the compound is too small to see properly)

Cheers

Dave