partridgejiang / Kekule.js

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

Weird scrolling behavior #202

Open cleblond opened 3 years ago

cleblond commented 3 years ago

I'm trying to adapt your CKeditor plugin to tinymce. When I create a molecule in the editor and then change the atom type the canvas scrolls the molecule out of view The following gif shows the issue.

The other issue I can't seem to resolve is the size of the ChemObjSetter seems messed up.

Any ideas what I'm doing wrong?

screenshot

partridgejiang commented 3 years ago

The scrolling behavior is quite odd indeed, perhaps it is caused by the tinymce environment when the click event (or something else) bubbling to it? Please use the latest dist files, in which the event bubbling is disabled in the popup widget, and check whether that problem can be resolved. As the size of the ChemObjSetter... Perhaps you have set some custom styles to it? Since it use CSS flex property to layout its child widgets, please do not set its display property to block or inline-block, just use flex or inline-flex instead.

cleblond commented 3 years ago

Unfortunately, it doesn't seem to be tinymce bubbling up events causing the scroll issue. I removed tinymce and still same issue. I added an html test in this repo https://github.com/cleblond/kekule-test showing the issue. Carl

partridgejiang commented 3 years ago

Thanks a lot for the test repo, the bug has now been found and solved. Please check and use the latest dist files, :).

cleblond commented 3 years ago

Awesome the scrolling issue has been resolved. Thank you very much!

Unfortunately, I'm now seeing this error in the 3D generator.

Kekule.Exception {message: "Calculation service "3D structure generator" is unavailable", name: undefined}

partridgejiang commented 3 years ago

Hi @cleblond, the 3D structure generator now relies on the web assembly compiled from OpenBabel. To use it, you need to manually enable the OpenBabel module. For example, in the init() function of the test page:

Kekule.OpenBabel.enable(err => {
  if (err)
    console.error(err);
  else
  {
    // the OpenBabel functions are available now, including the 3D structure generator
  }
});

By the way, the OpenBabel is compiled into a .wasm file, which can not be loaded into web browser under the file:// protocol. So please test the codes with a server.

cleblond commented 3 years ago

Hi @partridgejiang - The weird scroll is still occuring when I open an editor associated with a viewer. Thanks for all you work on this. Carl

partridgejiang commented 3 years ago

Hi @cleblond, still can not reproduce the scroll when opening an editor associated with a viewer in my own tests. Could a demo page be provided here? Thanks a lot.