epam / ketcher

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

Impossible to add any ring to structure #5011

Closed Sinkler521 closed 2 days ago

Sinkler521 commented 4 days ago

Greetings and thank you for your work. Have a problem with ketcher: I use it in a modal window and everything works fine except rings panel (at the bottom). Every time I'm trying to add, for example, benzene ring to existing structure, the modal being closed as editor doesn't let me to draw any ring from that panel. If the editor is empty or I'm adding a ring separately, the problem doesn't appear. I don't know how to provide a code example though since there are a few files and it won't be that compact, but here is my component where I use ketcher:

  const handleOnInit = async (ketcher: Ketcher) => {
      (window as any).ketcher = ketcher;

      await loadMolecule(ketcher);
      ketcher.editor.subscribe('change', operations => {updateMolecule()})
      window.parent.postMessage({
          eventType: 'init',
      }, '*');
  };

  const loadMolecule = async (ketcherInstance: Ketcher) => {
      try {
          await ketcherInstance.setMolecule(props.smilesStr);
      } catch (error) {
          console.error("Error loading molecule:", error);
          setErrorMessage("Failed to load molecule");
      }
  };

   const updateMolecule = async () => {
      try {
          const ketcherInstance: Ketcher = (window as any).ketcher;

          const smiles = await ketcherInstance.getSmiles();
          props.setInputValue(smiles);
          props.setCurrentOptions({...props.currentOptions, smiles: smiles})
      } catch (error) {
          console.error("Error updating molecule:", error);
          setErrorMessage("Failed to update molecule");
      }
  };

  return (
      <>
          <div className="ketcher-container">
              <Editor
                  staticResourcesUrl={""}
                  structServiceProvider={structServiceProvider}
                  errorHandler={(message: string) => {
                      setErrorMessage(message);
                  }}
                  onInit={handleOnInit}
              />
          </div>
      </>
  );

Have you ever seen such issue? Please let me know if you do, because I'd be glad having a possibility to solve it asap