Backmerge: #2195 - When you click one Functional Group on another the…

…re is no replacement - Fixed (#2218) (#2223)

+ small refactor in eraser tool to get rid of duplicated object

Co-authored-by: Tim Alyakin <31693137+TimSPb89@users.noreply.github.com>

packages/ketcher-react/src/script/editor/tool/eraser.ts

@@ -219,9 +219,8 @@ class EraserTool {
   click(event) {
     const rnd = this.editor.render
     const restruct = rnd.ctab
-    const struct = this.editor.render.ctab
-    const sgroups = struct.sgroups
-    const molecule = struct.molecule
+    const sgroups = restruct.sgroups
+    const molecule = restruct.molecule
     const functionalGroups = molecule.functionalGroups
     const ci = this.editor.findItem(event, this.maps)
     const atomResult: Array<number> = []
@@ -244,7 +243,7 @@ class EraserTool {
         functionalGroups,
         ci.id
       )
-      const atomFromStruct = atomId !== null && struct.atoms.get(atomId)?.a
+      const atomFromStruct = atomId !== null && restruct.atoms.get(atomId)?.a
 
       if (
         atomFromStruct &&
@@ -263,7 +262,7 @@ class EraserTool {
         functionalGroups,
         ci.id
       )
-      const bondFromStruct = bondId !== null && struct.bonds.get(bondId)?.b
+      const bondFromStruct = bondId !== null && restruct.bonds.get(bondId)?.b
 
       if (
         bondFromStruct &&

packages/ketcher-react/src/script/editor/tool/template.ts

@@ -25,7 +25,8 @@ import {
   FunctionalGroup,
   SGroup,
   ReStruct,
-  Struct
+  Struct,
+  fromFragmentDeletion
 } from 'ketcher-core'
 
 import utils from '../shared/utils'
@@ -59,6 +60,7 @@ class TemplateTool {
     this.template.molecule = frag // preloaded struct
     this.findItems = []
     this.template.xy0 = xy0.scaled(1 / (frag.atoms.size || 1)) // template center
+    this.findItems.push('functionalGroups')
 
     const atom = frag.atoms.get(this.template.aid)
     if (atom) {
@@ -160,8 +162,11 @@ class TemplateTool {
         }
       }
     }
-
-    if (result.length) {
+    if (
+      result.length &&
+      (this.mode !== 'fg' ||
+        SGroup.isSaltOrSolvent(this.template.molecule.name))
+    ) {
       this.editor.event.removeFG.dispatch({ fgIds: result })
       return
     }
@@ -300,6 +305,10 @@ class TemplateTool {
       }
     }
 
+    if (!pos0) {
+      return true
+    }
+
     // calc angle
     let angle = utils.calcAngle(pos0, pos1)
 
@@ -364,8 +373,10 @@ class TemplateTool {
     delete this.dragCtx
 
     const restruct = this.editor.render.ctab
+    const sgroups = restruct.sgroups
     const struct = restruct.molecule
     const ci = dragCtx.item
+    const functionalGroups = struct.functionalGroups
 
     /* after moving around bond */
     if (dragCtx.action && ci && ci.map === 'bonds' && this.mode !== 'fg') {
@@ -391,6 +402,7 @@ class TemplateTool {
 
     let action
     let pasteItems = null
+    let isFunctionalGroupReplace = false
 
     if (SGroup.isSaltOrSolvent(this.template.molecule.name)) {
       addSaltsAndSolventsOnCanvasWithoutMerge(
@@ -400,10 +412,23 @@ class TemplateTool {
         this.editor
       )
       return true
+    } else if (
+      ci?.map === 'functionalGroups' &&
+      FunctionalGroup.isContractedFunctionalGroup(ci.id, functionalGroups) &&
+      this.mode === 'fg'
+    ) {
+      const sGroup = sgroups.get(ci.id)
+      this.editor.update(
+        fromFragmentDeletion(this.editor.render.ctab, {
+          atoms: [...SGroup.getAtoms(struct, sGroup?.item)],
+          bonds: [...SGroup.getBonds(struct, sGroup?.item)]
+        })
+      )
+      isFunctionalGroupReplace = true
     }
 
     if (!dragCtx.action) {
-      if (!ci) {
+      if (!ci || isFunctionalGroupReplace) {
         //  ci.type == 'Canvas'
         ;[action, pasteItems] = fromTemplateOnCanvas(
           restruct,
@@ -476,14 +501,15 @@ class TemplateTool {
       ? fromItemsFuse(restruct, dragCtx.mergeItems).mergeWith(dragCtx.action)
       : fromItemsFuse(restruct, dragCtx.mergeItems)
 
-    this.editor.hover(null)
     const completeAction = dragCtx.action
     if (completeAction && !completeAction.isDummy()) {
       this.editor.update(completeAction)
     }
+    this.editor.event.showInfo.dispatch(null)
     this.editor.event.message.dispatch({
       info: false
     })
+    this.editor.hover(this.editor.findItem(event, this.findItems), null, event)
 
     return true
   }