diff --git a/packages/ketcher-react/src/script/editor/tool/select.ts b/packages/ketcher-react/src/script/editor/tool/select.ts index 0dfc2174df..ada54ba4e4 100644 --- a/packages/ketcher-react/src/script/editor/tool/select.ts +++ b/packages/ketcher-react/src/script/editor/tool/select.ts @@ -571,7 +571,7 @@ class SelectTool { } selectElementsOnCanvas( - elements: { atoms: any[]; bonds: any[] }, + elements: { atoms: number[]; bonds: number[] }, editor: Editor, event ) { diff --git a/packages/ketcher-react/src/script/ui/component/structrender.tsx b/packages/ketcher-react/src/script/ui/component/structrender.tsx index 53a1c7306c..7c28aac45b 100644 --- a/packages/ketcher-react/src/script/ui/component/structrender.tsx +++ b/packages/ketcher-react/src/script/ui/component/structrender.tsx @@ -17,27 +17,36 @@ import { Component, ComponentType, createRef } from 'react' import { MolSerializer, Render, Struct } from 'ketcher-core' +/** + * for S-Groups we want to show expanded structure + * without brackets + */ +function prepareStruct(struct: Struct) { + if (struct.sgroups.size > 0) { + const newStruct = struct.clone() + newStruct.sgroups.delete(0) + return newStruct + } + return struct +} + function renderStruct( el: HTMLElement | null, struct: Struct | null, options = {} ) { - if (el) { - if (struct) { - console.info('render!', el.clientWidth, el.clientWidth) - struct.initHalfBonds() - struct.initNeighbors() - struct.setImplicitHydrogen() - struct.markFragments() - const rnd = new Render(el, { - autoScale: true, - ...options - }) - rnd.setMolecule(struct) - rnd.update() - // console.info('render!');//, el.innerHTML); - // struct.prerender = el.innerHTML; - } + if (el && struct) { + const preparedStruct = prepareStruct(struct) + preparedStruct.initHalfBonds() + preparedStruct.initNeighbors() + preparedStruct.setImplicitHydrogen() + preparedStruct.markFragments() + const rnd = new Render(el, { + autoScale: true, + ...options + }) + rnd.setMolecule(preparedStruct) + rnd.update() } } diff --git a/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx b/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx index fdd437993e..e613074014 100644 --- a/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx +++ b/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx @@ -75,7 +75,7 @@ interface TemplateLibProps { selected: Template mode: string initialTab: number - saltsAndSolvents: (Template & { modifiedStruct: Struct })[] + saltsAndSolvents: Template[] } interface TemplateLibCallProps { @@ -86,7 +86,7 @@ interface TemplateLibCallProps { onFilter: (filter: string) => void onOk: (res: any) => void onSelect: (res: any) => void - functionalGroups: (Template & { modifiedStruct: Struct })[] + functionalGroups: Template[] } type Props = TemplateLibProps & TemplateLibCallProps @@ -357,23 +357,12 @@ const TemplateDialog: FC = (props) => { ) } -/* - Think, this is a kind of workaround for some logic. - Without it only names of structures are rendered in dialog - instead of chemical structure. -*/ -const removeSgroup = (template) => { - const struct = template.struct.clone() - struct.sgroups.delete(0) - return { ...template, modifiedStruct: struct } -} - export default connect( (store) => ({ ...omit(['attach'], (store as any).templates), initialTab: (store as any).modal?.prop?.tab, - functionalGroups: functionalGroupsSelector(store).map(removeSgroup), - saltsAndSolvents: saltsAndSolventsSelector(store).map(removeSgroup) + functionalGroups: functionalGroupsSelector(store), + saltsAndSolvents: saltsAndSolventsSelector(store) }), (dispatch: Dispatch, props) => ({ onFilter: (filter) => dispatch(changeFilter(filter)), diff --git a/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx b/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx index 1d6ab715cc..19388a6d1e 100644 --- a/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx +++ b/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx @@ -24,7 +24,6 @@ import Icon from 'src/script/ui/component/view/icon' export interface Template { struct: Struct - modifiedStruct?: Struct // TODO: Do something with that, in future it shouldn't be here props: { atomid: number bondid: number @@ -70,7 +69,7 @@ const RenderTmpl: FC<{ }> = ({ tmpl, options, ...props }) => { return (