search

epam / ketcher

Web-based molecule sketcher
https://lifescience.opensource.epam.com/ketcher/demo.html
Apache License 2.0
490 stars 167 forks source link

Molecules added with setMolecule are not centered or zoomed in properly #5276

Open xlegs opened 3 months ago

xlegs commented 3 months ago

I want to use ketcher to edit previously made structures, but importing a molecule programmatically exposes a UX bug.

Steps to Reproduce

When running

const mol = `
  -INDIGO-08092409102D

 15 15  0  0  0  0  0  0  0  0999 V2000
    3.5000   -0.8660    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    2.5000   -0.8660    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    2.0000    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    1.0000    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.5000   -0.8660    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.5000   -0.8660    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -1.0000    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.5000    0.8660    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.5000    0.8660    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -2.0000    0.0000    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -2.5000   -0.8660    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -2.0000   -1.7321    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0
   -3.5000   -0.8660    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0
   -2.5000    0.8660    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    2.0000   -1.7321    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
  1  2  1  0  0  0  0
  2  3  1  0  0  0  0
  3  4  1  0  0  0  0
  4  5  2  0  0  0  0
  5  6  1  0  0  0  0
  6  7  2  0  0  0  0
  7  8  1  0  0  0  0
  8  9  2  0  0  0  0
  7 10  1  0  0  0  0
 10 11  1  0  0  0  0
 11 12  2  0  0  0  0
 11 13  1  0  0  0  0
 10 14  1  0  0  0  0
  2 15  1  0  0  0  0
  9  4  1  0  0  0  0
M  END`

ketcher.setMolecule(mol);

The molecule loads, but it is not visible until I:

  1. Set the mode to layout
  2. Set the zoom to 100%

Both steps are done in the web gui.

BEFORE STEPS

image

AFTER STEPS

image

This should be done automatically, but I can't find a a way to do this programmatically either.

Desktop

Ketcher version
v2.21.0

sebastian-muthwill commented 1 month ago

I can confirm the issue with current version 2.24.0

Browser: Edge OS: Windows11

calling ketcher.layout() programmatically does not have an effect. Only when the manual steps are done in the UI the structure is visible.