#4878 - Replace selected monomer on canvas with monomer from library …

…in sequence mode

- added ketcher-standalone builds for indigo without render module
- added structService reinitialization

example/vite.config.js

@@ -205,6 +205,10 @@ export default defineConfig({
         find: 'web-worker:./indigoWorker',
         replacement: './indigoWorker?worker',
       },
+      {
+        find: '_indigo-ketcher-import-alias_',
+        replacement: 'indigo-ketcher',
+      },
     ],
   },
   customLogger: logger,

packages/ketcher-core/src/application/ketcher.ts

@@ -55,10 +55,10 @@ const allowedApiSettings = {
 
 export class Ketcher {
   logging: LogSettings;
-  #structService: StructService;
+  structService: StructService;
   #formatterFactory: FormatterFactory;
   #editor: Editor;
-  #indigo: Indigo;
+  _indigo: Indigo;
   #eventBus: EventEmitter;
 
   get editor(): Editor {
@@ -79,9 +79,9 @@ export class Ketcher {
     assert(formatterFactory != null);
 
     this.#editor = editor;
-    this.#structService = structService;
+    this.structService = structService;
     this.#formatterFactory = formatterFactory;
-    this.#indigo = new Indigo(this.#structService);
+    this._indigo = new Indigo(this.structService);
     this.#eventBus = new EventEmitter();
     this.logging = {
       enabled: false,
@@ -95,7 +95,7 @@ export class Ketcher {
   }
 
   get indigo() {
-    return this.#indigo;
+    return this._indigo;
   }
 
   // TEMP.: getting only dearomatize-on-load setting
@@ -300,7 +300,7 @@ export class Ketcher {
       this.#editor.struct(),
     );
 
-    return this.#structService.getInChIKey(struct);
+    return this.structService.getInChIKey(struct);
   }
 
   containsReaction(): boolean {
@@ -354,11 +354,11 @@ export class Ketcher {
 
       if (window.isPolymerEditorTurnedOn) {
         deleteAllEntitiesOnCanvas();
-        await parseAndAddMacromoleculesOnCanvas(structStr, this.#structService);
+        await parseAndAddMacromoleculesOnCanvas(structStr, this.structService);
       } else {
         const struct: Struct = await prepareStructToRender(
           structStr,
-          this.#structService,
+          this.structService,
           this,
         );
 
@@ -375,7 +375,7 @@ export class Ketcher {
       assert(typeof helmStr === 'string');
       const struct: Struct = await prepareStructToRender(
         helmStr,
-        this.#structService,
+        this.structService,
         this,
       );
       struct.rescale();
@@ -393,11 +393,11 @@ export class Ketcher {
       assert(typeof structStr === 'string');
 
       if (window.isPolymerEditorTurnedOn) {
-        await parseAndAddMacromoleculesOnCanvas(structStr, this.#structService);
+        await parseAndAddMacromoleculesOnCanvas(structStr, this.structService);
       } else {
         const struct: Struct = await prepareStructToRender(
           structStr,
-          this.#structService,
+          this.structService,
           this,
         );
 
@@ -413,7 +413,7 @@ export class Ketcher {
     }
 
     runAsyncAction<void>(async () => {
-      const struct = await this.#indigo.layout(this.#editor.struct());
+      const struct = await this._indigo.layout(this.#editor.struct());
       const ketSerializer = new KetSerializer();
       this.setMolecule(ketSerializer.serialize(struct));
     }, this.eventBus);
@@ -458,7 +458,7 @@ export class Ketcher {
     if (window.isPolymerEditorTurnedOn) {
       throw new Error('Recognize is not available in macro mode');
     }
-    return this.#indigo.recognize(image, { version });
+    return this._indigo.recognize(image, { version });
   }
 
   async generateImage(
@@ -481,7 +481,7 @@ export class Ketcher {
         options.outputFormat = 'png';
     }
 
-    const base64 = await this.#structService.generateImageAsBase64(
+    const base64 = await this.structService.generateImageAsBase64(
       data,
       options,
     );
@@ -494,4 +494,9 @@ export class Ketcher {
     const blob = new Blob([byteArray], { type: meta });
     return blob;
   }
+
+  public reinitializeIndigo(structService: StructService) {
+    this.structService = structService;
+    this._indigo = new Indigo(structService);
+  }
 }

packages/ketcher-core/src/domain/services/struct/structService.types.ts

@@ -204,4 +204,5 @@ export interface StructService {
     data: ExplicitHydrogensData,
     options?: StructServiceOptions,
   ) => Promise<ExplicitHydrogensResult>;
+  destroy?: () => void;
 }

packages/ketcher-react/src/Editor.tsx

@@ -25,14 +25,15 @@ import init, { Config } from './script';
 import { useEffect, useRef } from 'react';
 import { createRoot, Root } from 'react-dom/client';
 
-import { Ketcher } from 'ketcher-core';
+import { Ketcher, StructService } from 'ketcher-core';
 import classes from './Editor.module.less';
 import clsx from 'clsx';
 import { useResizeObserver } from './hooks';
 import {
   ketcherInitEventName,
   KETCHER_ROOT_NODE_CLASS_NAME,
 } from './constants';
+import { KetcherBuilder } from './script/builders';
 
 const mediaSizes = {
   smallWidth: 1040,
@@ -47,13 +48,24 @@ function Editor(props: EditorProps) {
   const initPromiseRef = useRef<ReturnType<typeof init> | null>(null);
   const appRootRef = useRef<Root | null>(null);
   const cleanupRef = useRef<(() => unknown) | null>(null);
+  const ketcherBuilderRef = useRef<KetcherBuilder | null>(null);
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const setServerRef = useRef<(structService: StructService) => void>(() => {});
+  const structServiceProvider = props.structServiceProvider;
 
   const rootElRef = useRef<HTMLDivElement>(null);
 
   const { height, width } = useResizeObserver<HTMLDivElement>({
     ref: rootElRef,
   });
 
+  useEffect(() => {
+    ketcherBuilderRef.current?.reinitializeApi(
+      props.structServiceProvider,
+      setServerRef.current,
+    );
+  }, [structServiceProvider]);
+
   const initKetcher = () => {
     appRootRef.current = createRoot(rootElRef.current as HTMLDivElement);
 
@@ -63,15 +75,19 @@ function Editor(props: EditorProps) {
       appRoot: appRootRef.current,
     });
 
-    initPromiseRef.current?.then(({ ketcher, ketcherId, cleanup }) => {
-      cleanupRef.current = cleanup;
+    initPromiseRef.current?.then(
+      ({ ketcher, ketcherId, cleanup, builder, setServer }) => {
+        cleanupRef.current = cleanup;
+        ketcherBuilderRef.current = builder;
+        setServerRef.current = setServer;
 
-      if (typeof props.onInit === 'function' && ketcher) {
-        props.onInit(ketcher);
-        const ketcherInitEvent = new Event(ketcherInitEventName(ketcherId));
-        window.dispatchEvent(ketcherInitEvent);
-      }
-    });
+        if (typeof props.onInit === 'function' && ketcher) {
+          props.onInit(ketcher);
+          const ketcherInitEvent = new Event(ketcherInitEventName(ketcherId));
+          window.dispatchEvent(ketcherInitEvent);
+        }
+      },
+    );
   };
   useEffect(() => {
     if (initPromiseRef.current === null) {

packages/ketcher-react/src/constants.ts

@@ -31,3 +31,6 @@ export const KETCHER_ROOT_NODE_CSS_SELECTOR = `.${KETCHER_ROOT_NODE_CLASS_NAME}`
 
 export const EditorClassName = 'Ketcher-polymer-editor-root';
 export const KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR = `.${EditorClassName}`;
+export const STRUCT_SERVICE_NO_RENDER_INITIALIZED_EVENT =
+  'struct-service-no-render-initialized';
+export const STRUCT_SERVICE_INITIALIZED_EVENT = 'struct-service-initialized';

packages/ketcher-react/src/script/api.ts

@@ -49,6 +49,7 @@ function createApi(
     getInChIKey: structService.getInChIKey.bind(structService),
     toggleExplicitHydrogens:
       structService.toggleExplicitHydrogens.bind(structService),
+    destroy: structService.destroy?.bind(structService),
   });
 }