#1820 – added salts and solvents merge prevention. Removed buttons fr…

…om footer
epam · Dec 5, 2022 · 14b056e · 14b056e
1 parent f8fce33
commit 14b056e
Show file tree

Hide file tree

Showing 11 changed files with 434 additions and 1,121 deletions.
diff --git a/example/public/templates/salts-and-solvents.sdf b/example/public/templates/salts-and-solvents.sdf
diff --git a/packages/ketcher-core/src/domain/entities/sgroup.ts b/packages/ketcher-core/src/domain/entities/sgroup.ts
@@ -217,10 +217,10 @@ export class SGroup {
     return Vec2.diff(sgroup.pp, sgroup.bracketBox.p1)
   }
 
-  static isSaltOrSolvent(molecule: Struct): boolean {
-    const saltsAndSolventsProvider = SaltsAndSolventsProvider.getInstance();
-    const saltsAndSolvents = saltsAndSolventsProvider.getSaltsAndSolventsList();
-    return saltsAndSolvents.some(({ name }) => name === molecule.name)
+  static isSaltOrSolvent(moleculeName: string): boolean {
+    const saltsAndSolventsProvider = SaltsAndSolventsProvider.getInstance()
+    const saltsAndSolvents = saltsAndSolventsProvider.getSaltsAndSolventsList()
+    return saltsAndSolvents.some(({ name }) => name === moleculeName)
   }
 
   static filterAtoms(atoms: any, map: any) {

diff --git a/packages/ketcher-core/src/domain/helpers/saltsAndSolventsProvider.ts b/packages/ketcher-core/src/domain/helpers/saltsAndSolventsProvider.ts
@@ -13,29 +13,28 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  ***************************************************************************/
- import { Struct } from '../entities'
+import { Struct } from '../entities'
 
- export class SaltsAndSolventsProvider {
-   // eslint-disable-next-line no-use-before-define
-   private static instance: SaltsAndSolventsProvider
-   saltsAndSolventsList: Struct[]
-   constructor() {
-     this.saltsAndSolventsList = []
-   }
-
-   public static getInstance(): SaltsAndSolventsProvider {
-     if (!SaltsAndSolventsProvider.instance) {
-        SaltsAndSolventsProvider.instance = new SaltsAndSolventsProvider()
-     }
-     return SaltsAndSolventsProvider.instance
-   }
-
-   public getSaltsAndSolventsList() {
-     return this.saltsAndSolventsList
-   }
-
-   public setSaltsAndSolventsList(list: Struct[]): void {
-     this.saltsAndSolventsList = list
-   }
- }
-
+export class SaltsAndSolventsProvider {
+  // eslint-disable-next-line no-use-before-define
+  private static instance: SaltsAndSolventsProvider
+  saltsAndSolventsList: Struct[]
+  constructor() {
+    this.saltsAndSolventsList = []
+  }
+
+  public static getInstance(): SaltsAndSolventsProvider {
+    if (!SaltsAndSolventsProvider.instance) {
+      SaltsAndSolventsProvider.instance = new SaltsAndSolventsProvider()
+    }
+    return SaltsAndSolventsProvider.instance
+  }
+
+  public getSaltsAndSolventsList() {
+    return this.saltsAndSolventsList
+  }
+
+  public setSaltsAndSolventsList(list: Struct[]): void {
+    this.saltsAndSolventsList = list
+  }
+}
diff --git a/packages/ketcher-react/src/script/editor/tool/select.ts b/packages/ketcher-react/src/script/editor/tool/select.ts
@@ -27,7 +27,8 @@ import {
   getItemsToFuse,
   FunctionalGroup,
   fromSimpleObjectResizing,
-  fromArrowResizing
+  fromArrowResizing,
+  ReStruct
 } from 'ketcher-core'
 
 import LassoHelper from './helper/lasso'
@@ -373,6 +374,16 @@ class SelectTool {
 
     if (dragCtx && dragCtx.stopTapping) dragCtx.stopTapping()
 
+    const possibleSaltOrSolvent = struct.sgroups.get(actualSgroupId)
+    if (SGroup.isSaltOrSolvent(possibleSaltOrSolvent?.item.data.name)) {
+      preventSaltAndSolventsMerge(struct, dragCtx, editor)
+      delete this.dragCtx
+      if (this.#lassoHelper.running()) {
+        this.selectElementsOnCanvas(newSelected, editor, event)
+      }
+      return true
+    }
+
     if (dragCtx && dragCtx.item) {
       dragCtx.action = dragCtx.action
         ? fromItemsFuse(struct, dragCtx.mergeItems).mergeWith(dragCtx.action)
@@ -558,6 +569,20 @@ class SelectTool {
 
     this.editor.hover(null)
   }
+
+  selectElementsOnCanvas(
+    elements: { atoms: any[]; bonds: any[] },
+    editor: Editor,
+    event
+  ) {
+    const sel =
+      elements.atoms.length > 0
+        ? selMerge(this.#lassoHelper.end(), elements, false)
+        : this.#lassoHelper.end()
+    editor.selection(
+      !event.shiftKey ? sel : selMerge(sel, editor.selection(), false)
+    )
+  }
 }
 
 function closestToSel(ci) {
@@ -591,4 +616,24 @@ function uniqArray(dest, add, reversible: boolean) {
   }, [])
 }
 
+/**
+ * Salts and Solvents are kind of special structures:
+ * they can not be merged with other structures and are always standalone
+ */
+function preventSaltAndSolventsMerge(
+  struct: ReStruct,
+  dragCtx,
+  editor: Editor
+) {
+  const action = dragCtx.action
+    ? fromItemsFuse(struct, null).mergeWith(dragCtx.action)
+    : fromItemsFuse(struct, null)
+  editor.hover(null)
+  editor.selection(null)
+  editor.update(action)
+  editor.event.message.dispatch({
+    info: false
+  })
+}
+
 export default SelectTool
diff --git a/packages/ketcher-react/src/script/editor/tool/template.ts b/packages/ketcher-react/src/script/editor/tool/template.ts
@@ -24,6 +24,8 @@ import {
   getItemsToFuse,
   FunctionalGroup,
   SGroup,
+  ReStruct,
+  Struct
 } from 'ketcher-core'
 
 import utils from '../shared/utils'
@@ -394,21 +396,13 @@ class TemplateTool {
     let action
     let pasteItems = null
 
-    if (SGroup.isSaltOrSolvent(this.template.molecule)) {
-      [action] = fromTemplateOnCanvas(
-        restruct,
-        this.template,
-        dragCtx.xy0,
-        0
-      )
-      this.editor.update(action)
-      this.editor.selection(null)
-      this.editor.hover(null)
-      return
+    if (SGroup.isSaltOrSolvent(this.template.molecule.name)) {
+      preventSaltAndSolventsMerge(restruct, this.template, dragCtx, this.editor)
+      return true
     }
 
     if (!dragCtx.action) {
-      if (!ci || SGroup.isSaltOrSolvent(this.template)) {
+      if (!ci) {
         //  ci.type == 'Canvas'
         ;[action, pasteItems] = fromTemplateOnCanvas(
           restruct,
@@ -502,6 +496,25 @@ class TemplateTool {
   }
 }
 
+/**
+ * Salts and Solvents are kind of special structures:
+ * they can not be merged with other structures and are always standalone
+ */
+function preventSaltAndSolventsMerge(
+  restruct: ReStruct,
+  template: Struct,
+  dragCtx,
+  editor: Editor
+) {
+  const [action] = fromTemplateOnCanvas(restruct, template, dragCtx.xy0, 0)
+  editor.update(action)
+  editor.selection(null)
+  editor.hover(null)
+  editor.event.message.dispatch({
+    info: false
+  })
+}
+
 function getSign(molecule, bond, v) {
   const begin = molecule.atoms.get(bond.begin).pp
   const end = molecule.atoms.get(bond.end).pp

diff --git a/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx b/packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx
@@ -74,7 +74,7 @@ interface TemplateLibProps {
   lib: Array<Template>
   selected: Template
   mode: string
-  initialTab: number,
+  initialTab: number
   saltsAndSolvents: (Template & { modifiedStruct: Struct })[]
 }
 
@@ -120,24 +120,34 @@ const HeaderContent = () => (
   </div>
 )
 
-const FooterContent = ({ data, tab }) => (
-  <div style={{ flexGrow: 1 }}>
-    <SaveButton
-      key="save-to-SDF"
-      data={data}
-      className={classes.saveButton}
-      filename={
-        tab === TemplateTabs.TemplateLibrary
-          ? 'ketcher-tmpls.sdf'
-          : 'ketcher-fg-tmpls.sdf'
-      }
-    >
-      {tab === TemplateTabs.TemplateLibrary
-        ? 'Save template library to SDF'
-        : 'Save functional groups to SDF'}
-    </SaveButton>
-  </div>
-)
+const FooterContent = ({ data, tab }) => {
+  const tabMapping = {
+    [TemplateTabs.TemplateLibrary]: {
+      fileName: 'ketcher-tmpls.sdf',
+      buttonCaption: 'Save template library to SDF'
+    },
+    [TemplateTabs.FunctionalGroupLibrary]: {
+      fileName: 'ketcher-fg-tmpls.sdf',
+      buttonCaption: 'Save functional groups to SDF'
+    },
+    [TemplateTabs.SaltsAndSolvents]: null
+  }
+  if (!tabMapping[tab]) {
+    return null
+  }
+  return (
+    <div style={{ flexGrow: 1 }}>
+      <SaveButton
+        key="save-to-SDF"
+        data={data}
+        className={classes.saveButton}
+        filename={tabMapping[tab].fileName}
+      >
+        {tabMapping[tab].buttonCaption}
+      </SaveButton>
+    </div>
+  )
+}
 
 const TemplateDialog: FC<Props> = (props) => {
   const {
@@ -170,7 +180,9 @@ const TemplateDialog: FC<Props> = (props) => {
   }, [functionalGroups, filter])
 
   useEffect(() => {
-    setFilteredSaltsAndSolvents(filterFGLib(saltsAndSolvents, filter)[SALTS_AND_SOLVENTS])
+    setFilteredSaltsAndSolvents(
+      filterFGLib(saltsAndSolvents, filter)[SALTS_AND_SOLVENTS]
+    )
   }, [saltsAndSolvents, filter])
 
   const handleTabChange = (_, tab) => {
@@ -204,7 +216,7 @@ const TemplateDialog: FC<Props> = (props) => {
   const serializerMapper = {
     [TemplateTabs.TemplateLibrary]: templateLib,
     [TemplateTabs.FunctionalGroupLibrary]: functionalGroups,
-    [TemplateTabs.SaltsAndSolvents]: saltsAndSolvents,
+    [TemplateTabs.SaltsAndSolvents]: saltsAndSolvents
   }
   const data = sdfSerializer.serialize(serializerMapper[tab])
 
@@ -214,15 +226,19 @@ const TemplateDialog: FC<Props> = (props) => {
     else props.onSelect(tmpl)
   }
 
+  const footerContent =
+    tab === TemplateTabs.SaltsAndSolvents ? null : (
+      <FooterContent tab={tab} data={data} />
+    )
+
   return (
     <Dialog
       headerContent={<HeaderContent />}
-      footerContent={<FooterContent tab={tab} data={data} />}
+      footerContent={footerContent}
       className={`${classes.dialog_body}`}
       params={omit(['group'], rest)}
       result={() => result()}
-      buttons={['OK']}
-      buttonsNameMap={{ OK: 'Add to canvas' }}
+      buttons={[]}
       needMargin={false}
     >
       <div className={classes.inputContainer}>

diff --git a/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx b/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx
@@ -118,14 +118,15 @@ const TemplateTable: FC<TemplateTableProps> = (props) => {
                 <Icon name="delete" />
               </button>
             )}
-            {(tmpl.props.group !== 'Functional Groups' && tmpl.props.group !== 'Salts and Solvents') && (
-              <button
-                className={`${classes.button} ${classes.editButton}`}
-                onClick={() => onAttach!(tmpl)}
-              >
-                <Icon name="edit" />
-              </button>
-            )}
+            {tmpl.props.group !== 'Functional Groups' &&
+              tmpl.props.group !== 'Salts and Solvents' && (
+                <button
+                  className={`${classes.button} ${classes.editButton}`}
+                  onClick={() => onAttach!(tmpl)}
+                >
+                  <Icon name="edit" />
+                </button>
+              )}
           </div>
         )
       })}

diff --git a/packages/ketcher-react/src/script/ui/state/options/index.js b/packages/ketcher-react/src/script/ui/state/options/index.js
@@ -28,7 +28,7 @@ export const initOptionsState = {
     server: false,
     templates: false,
     functionalGroups: false,
-    saltsAndSolvents: false,
+    saltsAndSolvents: false
   },
   analyse: {
     values: null,