diff --git a/package-lock.json b/package-lock.json index c365c2da4a..0cb0ce3479 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15625,9 +15625,9 @@ } }, "node_modules/indigo-ketcher": { - "version": "1.24.0-rc.2", - "resolved": "https://registry.npmjs.org/indigo-ketcher/-/indigo-ketcher-1.24.0-rc.2.tgz", - "integrity": "sha512-/mnK7hP9t5onYASJ31xwaM5+FNWakvtgq61lTIvfvSVCBVXHs3C0JbH74KR74E+4f1kzJKN/I0ZSCkgPeUJP2Q==" + "version": "1.25.0-dev.3", + "resolved": "https://registry.npmjs.org/indigo-ketcher/-/indigo-ketcher-1.25.0-dev.3.tgz", + "integrity": "sha512-4OxA02rUc79e3wep+gEjkHdtCKuQALRK34UFPI689P9pgaIe/nRjFJbZlE3KoMqIgPdSElSeiIa9k+0DkI0obQ==" }, "node_modules/inflight": { "version": "1.0.6", @@ -35268,7 +35268,7 @@ "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.17.9", - "indigo-ketcher": "1.24.0-rc.2", + "indigo-ketcher": "1.25.0-dev.3", "ketcher-core": "*" }, "devDependencies": { diff --git a/packages/ketcher-core/src/domain/services/struct/structService.types.ts b/packages/ketcher-core/src/domain/services/struct/structService.types.ts index 31e6acce45..557f92b7ab 100644 --- a/packages/ketcher-core/src/domain/services/struct/structService.types.ts +++ b/packages/ketcher-core/src/domain/services/struct/structService.types.ts @@ -153,7 +153,6 @@ export type OutputFormatType = 'png' | 'svg'; export interface GenerateImageOptions extends StructServiceOptions { outputFormat: OutputFormatType; backgroundColor?: string; - bondThickness: number; } export interface StructService { diff --git a/packages/ketcher-core/src/infrastructure/services/struct/remoteStructService.ts b/packages/ketcher-core/src/infrastructure/services/struct/remoteStructService.ts index 6a8558a28d..8174e4cf90 100644 --- a/packages/ketcher-core/src/infrastructure/services/struct/remoteStructService.ts +++ b/packages/ketcher-core/src/infrastructure/services/struct/remoteStructService.ts @@ -14,7 +14,7 @@ * limitations under the License. ***************************************************************************/ -import { defaultBondThickness, CoreEditor } from 'application/editor'; +import { CoreEditor } from 'application/editor'; import { AromatizeData, AromatizeResult, @@ -131,6 +131,18 @@ function indigoCall( }; } +export function pickStandardServerOptions(options?: StructServiceOptions) { + return { + 'dearomatize-on-load': options?.['dearomatize-on-load'], + 'smart-layout': options?.['smart-layout'], + 'ignore-stereochemistry-errors': options?.['ignore-stereochemistry-errors'], + 'mass-skip-error-on-pseudoatoms': + options?.['mass-skip-error-on-pseudoatoms'], + 'gross-formula-add-rsites': options?.['gross-formula-add-rsites'], + 'gross-formula-add-isotopes': options?.['gross-formula-add-isotopes'], + }; +} + export class RemoteStructService implements StructService { private readonly apiPath: string; private readonly defaultOptions: StructServiceOptions; @@ -162,6 +174,14 @@ export class RemoteStructService implements StructService { ); } + private getStandardServerOptions(options?: StructServiceOptions) { + if (!options) { + return this.defaultOptions; + } + + return pickStandardServerOptions(options); + } + async info(): Promise { let indigoVersion: string; let imagoVersions: Array; @@ -196,7 +216,17 @@ export class RemoteStructService implements StructService { const monomerLibrary = JSON.stringify( CoreEditor.provideEditorInstance()?.monomersLibraryParsedJson, ); - const expandedOptions = { monomerLibrary, ...options }; + const expandedOptions = { + monomerLibrary, + ...this.getStandardServerOptions(options), + 'bond-length-unit': options?.['bond-length-unit'], + 'bond-length': options?.['bond-length'], + 'reaction-component-margin-size-unit': + options?.['reaction-component-margin-size-unit'], + 'reaction-component-margin-size': + options?.['reaction-component-margin-size'], + 'image-resolution': options?.['image-resolution'], + }; return indigoCall( 'POST', @@ -211,13 +241,26 @@ export class RemoteStructService implements StructService { data: LayoutData, options?: StructServiceOptions, ): Promise { + const expandedOptions = { + ...this.getStandardServerOptions(options), + + 'output-content-type': 'application/json', + 'bond-length-unit': options?.['bond-length-unit'], + 'bond-length': options?.['bond-length'], + 'reaction-component-margin-size-unit': + options?.['reaction-component-margin-size-unit'], + 'reaction-component-margin-size': + options?.['reaction-component-margin-size'], + 'image-resolution': options?.['image-resolution'], + }; + return indigoCall( 'POST', 'indigo/layout', this.apiPath, this.defaultOptions, this.customHeaders, - )(data, options); + )(data, expandedOptions); } clean(data: CleanData, options?: StructServiceOptions): Promise { @@ -227,7 +270,7 @@ export class RemoteStructService implements StructService { this.apiPath, this.defaultOptions, this.customHeaders, - )(data, options); + )(data, this.getStandardServerOptions(options)); } aromatize( @@ -240,7 +283,7 @@ export class RemoteStructService implements StructService { this.apiPath, this.defaultOptions, this.customHeaders, - )(data, options); + )(data, this.getStandardServerOptions(options)); } dearomatize( @@ -253,7 +296,7 @@ export class RemoteStructService implements StructService { this.apiPath, this.defaultOptions, this.customHeaders, - )(data, options); + )(data, this.getStandardServerOptions(options)); } calculateCip( @@ -266,7 +309,7 @@ export class RemoteStructService implements StructService { this.apiPath, this.defaultOptions, this.customHeaders, - )(data, options); + )(data, this.getStandardServerOptions(options)); } automap( @@ -279,7 +322,7 @@ export class RemoteStructService implements StructService { this.apiPath, this.defaultOptions, this.customHeaders, - )(data, options); + )(data, this.getStandardServerOptions(options)); } check(data: CheckData, options?: StructServiceOptions): Promise { @@ -289,7 +332,7 @@ export class RemoteStructService implements StructService { this.apiPath, this.defaultOptions, this.customHeaders, - )(data, options); + )(data, this.getStandardServerOptions(options)); } calculate( @@ -302,7 +345,7 @@ export class RemoteStructService implements StructService { this.apiPath, this.defaultOptions, this.customHeaders, - )(data, options); + )(data, this.getStandardServerOptions(options)); } recognize(blob: Blob, version: string): Promise { @@ -340,8 +383,6 @@ export class RemoteStructService implements StructService { options?: GenerateImageOptions, ): Promise { const outputFormat: OutputFormatType = options?.outputFormat || 'png'; - const bondThickness: number = - options?.bondThickness || defaultBondThickness; return indigoCall( 'POST', @@ -352,8 +393,26 @@ export class RemoteStructService implements StructService { )( { struct: data }, { + ...this.getStandardServerOptions(options), + 'render-coloring': options?.['render-coloring'], + 'render-font-size': options?.['render-font-size'], + 'render-font-size-unit': options?.['render-font-size-unit'], + 'render-font-size-sub': options?.['render-font-size-sub'], + 'render-font-size-sub-unit': options?.['render-font-size-sub-unit'], + 'image-resolution': options?.['image-resolution'], + 'bond-length-unit': options?.['bond-length-unit'], + 'bond-length': options?.['bond-length'], + 'render-bond-thickness': options?.['render-bond-thickness'], + 'render-bond-thickness-unit': options?.['render-bond-thickness-unit'], + 'render-bond-spacing': options?.['render-bond-spacing'], + 'render-stereo-bond-width': options?.['render-stereo-bond-width'], + 'render-stereo-bond-width-unit': + options?.['render-stereo-bond-width-unit'], + 'render-hash-spacing': options?.['render-hash-spacing'], + 'render-hash-spacing-unit': options?.['render-hash-spacing-unit'], + 'render-output-sheet-width': options?.['render-output-sheet-width'], + 'render-output-sheet-height': options?.['render-output-sheet-height'], 'render-output-format': outputFormat, - 'render-bond-line-width': bondThickness, 'render-label-mode': getLabelRenderModeForIndigo(), }, (response) => response.then((resp) => resp.text()), @@ -370,6 +429,6 @@ export class RemoteStructService implements StructService { this.apiPath, this.defaultOptions, this.customHeaders, - )(data, options); + )(data, this.getStandardServerOptions(options)); } } diff --git a/packages/ketcher-react/src/script/ui/state/options/index.js b/packages/ketcher-react/src/script/ui/state/options/index.js index 2ba12e8155..a1d44718db 100644 --- a/packages/ketcher-react/src/script/ui/state/options/index.js +++ b/packages/ketcher-react/src/script/ui/state/options/index.js @@ -64,10 +64,50 @@ export const initOptionsState = { validation(storage.getItem(KETCHER_SAVED_OPTIONS_KEY)), ), getServerSettings() { - return pick(SERVER_OPTIONS, this.settings); + const seriliazedServerOptions = getSerilizedServerOptions(this.settings); + const defaultServerOptions = pick(SERVER_OPTIONS, this.settings); + + return { + ...defaultServerOptions, + ...seriliazedServerOptions, + }; }, }; +function getSerilizedServerOptions(options) { + let newOptions = { + 'render-coloring': options.atomColoring, + 'render-font-size': options.fontsz, + 'render-font-size-unit': options.fontszUnit, + 'render-font-size-sub': options.fontszsub, + 'render-font-size-sub-unit': options.fontszsubUnit, + 'image-resolution': Number(options.imageResolution), + 'bond-length': options.bondLength, + 'bond-length-unit': options.bondLengthUnit, + 'render-bond-thickness': options.bondThickness, + 'render-bond-thickness-unit': options.bondThicknessUnit, + 'render-bond-spacing': options.bondSpacing / 100, + 'render-stereo-bond-width': options.stereoBondWidth, + 'render-stereo-bond-width-unit': options.stereoBondWidthUnit, + 'render-hash-spacing': options.hashSpacing, + 'render-hash-spacing-unit': options.hashSpacingUnit, + 'reaction-component-margin-size': options.reactionComponentMarginSize, + 'reaction-component-margin-size-unit': + options.reactionComponentMarginSizeUnit, + }; + + if (options.imageResolution === '600') { + newOptions = { + ...newOptions, + // TODO: change to the values from settings once they are implemented + 'render-output-sheet-width': 11, + 'render-output-sheet-height': 8.5, + }; + } + + return newOptions; +} + export function appUpdate(data) { return (dispatch) => { dispatch({ type: 'APP_OPTIONS', data }); diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.jsx b/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.jsx index b07a06520e..e19faf1379 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.jsx +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.jsx @@ -141,14 +141,7 @@ class SaveDialog extends Component { }; changeType = (type) => { - const { - struct, - server, - options, - formState, - ignoreChiralFlag, - bondThickness, - } = this.props; + const { struct, server, options, formState, ignoreChiralFlag } = this.props; const errorHandler = this.context.errorHandler; if (this.isImageFormat(type)) { @@ -161,11 +154,12 @@ class SaveDialog extends Component { structStr, isLoading: true, }); - const options = {}; - options.outputFormat = type; - options.bondThickness = bondThickness; + const serverOptions = { ...options }; + + serverOptions.outputFormat = type; + return server - .generateImageAsBase64(structStr, options) + .generateImageAsBase64(structStr, serverOptions) .then((base64) => { this.setState({ disableControls: false, diff --git a/packages/ketcher-standalone/package.json b/packages/ketcher-standalone/package.json index 5d213d7aae..3906bd4d10 100644 --- a/packages/ketcher-standalone/package.json +++ b/packages/ketcher-standalone/package.json @@ -42,7 +42,7 @@ }, "dependencies": { "@babel/runtime": "^7.17.9", - "indigo-ketcher": "1.24.0-rc.2", + "indigo-ketcher": "1.25.0-dev.3", "ketcher-core": "*" }, "devDependencies": { diff --git a/packages/ketcher-standalone/src/infrastructure/services/struct/indigoWorker.ts b/packages/ketcher-standalone/src/infrastructure/services/struct/indigoWorker.ts index c4872812ac..75db11933e 100644 --- a/packages/ketcher-standalone/src/infrastructure/services/struct/indigoWorker.ts +++ b/packages/ketcher-standalone/src/infrastructure/services/struct/indigoWorker.ts @@ -102,8 +102,6 @@ self.onmessage = (e: MessageEvent>) => { ...data.options, 'render-output-format': data.outputFormat, 'render-background-color': data.backgroundColor, - 'render-coloring': true, - 'render-bond-line-width': data.bondThickness, }, Command.GenerateImageAsBase64, data.struct, diff --git a/packages/ketcher-standalone/src/infrastructure/services/struct/standaloneStructService.ts b/packages/ketcher-standalone/src/infrastructure/services/struct/standaloneStructService.ts index 39fec01798..38c74610f3 100644 --- a/packages/ketcher-standalone/src/infrastructure/services/struct/standaloneStructService.ts +++ b/packages/ketcher-standalone/src/infrastructure/services/struct/standaloneStructService.ts @@ -65,6 +65,7 @@ import { RecognizeResult, StructService, StructServiceOptions, + pickStandardServerOptions, } from 'ketcher-core'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment @@ -235,6 +236,14 @@ class IndigoService implements StructService { }; } + private getStandardServerOptions(options?: StructServiceOptions) { + if (!options) { + return this.defaultOptions; + } + + return pickStandardServerOptions(options); + } + private callIndigoNoRenderLoadedCallback() { window.dispatchEvent(new Event(STRUCT_SERVICE_NO_RENDER_INITIALIZED_EVENT)); } @@ -321,8 +330,14 @@ class IndigoService implements StructService { CoreEditor.provideEditorInstance()?.monomersLibraryParsedJson, ); const commandOptions: CommandOptions = { - ...this.defaultOptions, - ...options, + ...this.getStandardServerOptions(options), + 'bond-length-unit': options?.['bond-length-unit'], + 'bond-length': options?.['bond-length'], + 'reaction-component-margin-size-unit': + options?.['reaction-component-margin-size-unit'], + 'reaction-component-margin-size': + options?.['reaction-component-margin-size'], + 'image-resolution': options?.['image-resolution'], 'input-format': inputFormat, monomerLibrary, }; @@ -379,9 +394,16 @@ class IndigoService implements StructService { }; const commandOptions: CommandOptions = { - ...this.defaultOptions, - ...options, + ...this.getStandardServerOptions(options), 'output-content-type': 'application/json', + + 'bond-length-unit': options?.['bond-length-unit'], + 'bond-length': options?.['bond-length'], + 'reaction-component-margin-size-unit': + options?.['reaction-component-margin-size-unit'], + 'reaction-component-margin-size': + options?.['reaction-component-margin-size'], + 'image-resolution': options?.['image-resolution'], }; const commandData: LayoutCommandData = { @@ -420,15 +442,10 @@ class IndigoService implements StructService { } }; - const commandOptions: CommandOptions = { - ...this.defaultOptions, - ...options, - }; - const commandData: CleanCommandData = { struct, format, - options: commandOptions, + options: this.getStandardServerOptions(options), selectedAtoms: selected || [], }; @@ -465,15 +482,10 @@ class IndigoService implements StructService { } }; - const commandOptions: CommandOptions = { - ...this.defaultOptions, - ...options, - }; - const commandData: AromatizeCommandData = { struct, format, - options: commandOptions, + options: this.getStandardServerOptions(options), }; const inputMessage: InputMessage = { @@ -509,15 +521,10 @@ class IndigoService implements StructService { } }; - const commandOptions: CommandOptions = { - ...this.defaultOptions, - ...options, - }; - const commandData: DearomatizeCommandData = { struct, format, - options: commandOptions, + options: this.getStandardServerOptions(options), }; const inputMessage: InputMessage = { @@ -553,15 +560,10 @@ class IndigoService implements StructService { } }; - const commandOptions: CommandOptions = { - ...this.defaultOptions, - ...options, - }; - const commandData: CalculateCipCommandData = { struct, format, - options: commandOptions, + options: this.getStandardServerOptions(options), }; const inputMessage: InputMessage = { @@ -597,16 +599,11 @@ class IndigoService implements StructService { } }; - const commandOptions: CommandOptions = { - ...this.defaultOptions, - ...options, - }; - const commandData: AutomapCommandData = { struct, format, mode, - options: commandOptions, + options: this.getStandardServerOptions(options), }; const inputMessage: InputMessage = { @@ -646,15 +643,10 @@ class IndigoService implements StructService { } }; - const commandOptions: CommandOptions = { - ...this.defaultOptions, - ...options, - }; - const commandData: CheckCommandData = { struct, types, - options: commandOptions, + options: this.getStandardServerOptions(options), }; const inputMessage: InputMessage = { @@ -698,15 +690,10 @@ class IndigoService implements StructService { } }; - const commandOptions: CommandOptions = { - ...this.defaultOptions, - ...options, - }; - const commandData: CalculateCommandData = { struct, properties, - options: commandOptions, + options: this.getStandardServerOptions(options), selectedAtoms: selected || [], }; @@ -731,7 +718,6 @@ class IndigoService implements StructService { options: GenerateImageOptions = { outputFormat: 'png', backgroundColor: '', - bondThickness: 1, }, ): Promise { const { outputFormat, backgroundColor, bondThickness, ...restOptions } = @@ -750,15 +736,32 @@ class IndigoService implements StructService { }; const commandOptions: CommandOptions = { - ...this.defaultOptions, - ...restOptions, + ...this.getStandardServerOptions(restOptions), 'render-label-mode': getLabelRenderModeForIndigo(), + 'render-coloring': restOptions['render-coloring'], + 'render-font-size': restOptions['render-font-size'], + 'render-font-size-unit': restOptions['render-font-size-unit'], + 'render-font-size-sub': restOptions['render-font-size-sub'], + 'render-font-size-sub-unit': restOptions['render-font-size-sub-unit'], + 'image-resolution': restOptions['image-resolution'], + 'bond-length-unit': restOptions['bond-length-unit'], + 'bond-length': restOptions['bond-length'], + 'render-bond-thickness': restOptions['render-bond-thickness'], + 'render-bond-thickness-unit': restOptions['render-bond-thickness-unit'], + 'render-bond-spacing': restOptions['render-bond-spacing'], + 'render-stereo-bond-width': restOptions['render-stereo-bond-width'], + 'render-stereo-bond-width-unit': + restOptions['render-stereo-bond-width-unit'], + 'render-hash-spacing': restOptions['render-hash-spacing'], + 'render-hash-spacing-unit': restOptions['render-hash-spacing-unit'], + 'render-output-sheet-width': restOptions['render-output-sheet-width'], + 'render-output-sheet-height': restOptions['render-output-sheet-height'], }; + const commandData: GenerateImageCommandData = { struct: inputData, outputFormat: outputFormat || 'png', backgroundColor, - bondThickness, options: commandOptions, }; @@ -796,16 +799,11 @@ class IndigoService implements StructService { } }; - const commandOptions: CommandOptions = { - ...this.defaultOptions, - ...options, - }; - const commandData: ExplicitHydrogensCommandData = { struct, format, mode, - options: commandOptions, + options: this.getStandardServerOptions(options), }; const inputMessage: InputMessage = {