partridgejiang / Kekule.js

A Javascript cheminformatics toolkit.
http://partridgejiang.github.io/Kekule.js
MIT License
248 stars 61 forks source link

How to setAutofit in painter? #244

Closed akulmehta closed 2 years ago

akulmehta commented 2 years ago

For viewer you can setAutofit using

viewer.setAutofit(true);

as described in issue: #33

How can we do something similar in painter?

To be specific I am drawing a structure using painter as described in the documents using a function like:

function renderSingleMolecule(id='', mol) {
  var renderType = Kekule.Render.RendererType.R2D//R3D  // do 2D or 3D drawing
  var is3D = (renderType === Kekule.Render.RendererType.R3D);

  // parent HTML element, we will draw inside it
  var parentElem = document.getElementById(`linkerstructurediv${id}`);
  // clear parent elem
  Kekule.DomUtils.clearChildContent(parentElem);

  // create painter, bind with molecule
  var painter = new Kekule.Render.ChemObjPainter(renderType, mol);

  // create context inside parentElem
  var dim = Kekule.HtmlElementUtils.getElemOffsetDimension(parentElem); // get width/height of parent element
  var context = painter.createContext(parentElem, dim.width, dim.height); // create context fulfill parent element

  // at last, draw the molecule at the center of context
  painter.draw(context, { 'x': dim.width / 2, 'y': dim.height / 2 });

}
partridgejiang commented 2 years ago

Generally, you may set autofit to true in the draw options:

painter.draw(context, { 'x': dim.width / 2, 'y': dim.height / 2 }, {autofit: true});

Anyway, manually using the painter is fairly complex. Instead, the Viewer widget is much more recommended for displaying molecule and other chem objects.

akulmehta commented 2 years ago

Yes I switched to the viewer as well.