epam / ketcher

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

please help me #1885

Open ShiXuanP opened 1 year ago

ShiXuanP commented 1 year ago

In the source code, what methods can be used to obtain the data edited by users? How to set initial value to generate chemical formula?

Nitvex commented 1 year ago

Hi, @ShiXuanP. Could you please, clarify, which result are you trying to get? If I'm getting you correctly, you want something like https://github.com/epam/ketcher/blob/master/packages/ketcher-core/src/application/ketcher.ts#L225 By using this method you can draw a structure. And, for instance, https://github.com/epam/ketcher/blob/master/packages/ketcher-core/src/application/ketcher.ts#L142 to get a molfile of drawn structure.

ShiXuanP commented 1 year ago

@Nitvex How can I call this method in a react project? getMolfile() ,How do I get a ketcher instance in react project?

ShiXuanP commented 1 year ago

@Nitvex import React from 'react'; import { RemoteStructServiceProvider } from 'ketcher-core'; import { Editor } from 'ketcher-react'; export default function KetcherEditor({ onAddOrUpdate, initValue }) { const structServiceProvider = new RemoteStructServiceProvider('http://112.124.47.121:2345/v2');

return (
    <>
        <button>getvalue</button>
        <Editor
            staticResourcesUrl="./"
            structServiceProvider={structServiceProvider}
        />
    </>
);

}

How can I call getMolfile() through the button to obtain the value in the Editor? thank you

Nitvex commented 1 year ago

You can refer to example application: https://github.com/epam/ketcher/blob/master/example/src/App.tsx#L70 There is onInit event, which you can subscribe on via callback. So answering your question you can do something like

function App() {
  const [ketcher, setKethcer] = useState()
  const onClick = () => ketcher.getMolfile()
  return (
       <button onClick={onClick}>get value</button>
       <Editor
        onInit={(ketcherInstance: Ketcher) => {
           setKetcher(ketcherInstance)
        }}
      />
  )
}
ShiXuanP commented 1 year ago

@Nitvex Thank you for your reply , What is the reason for this error? image

ShiXuanP commented 1 year ago

@Nitvex Thank you very much, worship the boss

Nitvex commented 1 year ago

@ShiXuanP, is your problem resolved?

ShiXuanP commented 1 year ago

@Nitvex That problem has been solved, thank you.One more question,How can I call any method to clear the data?

Nitvex commented 1 year ago

@ShiXuanP, sorry for long response. You can do ketcher.editor.clear() You can check Editor interface here https://github.com/epam/ketcher/blob/master/packages/ketcher-core/src/application/editor/editor.types.ts#L40