#5910 – Fix closest sgroup detection to allow focusing on entities wi…

…thin expanded monomer's bounding box (#6069)

* #5910 – Fix closest sgroup detection to allow focusing on entities within expanded monomer's bounding box

* #5910 – Fix on checking sgroups map

* #5910 – Fix ui test and erasing contracted sgroup

example/.env

@@ -1,4 +1,4 @@
 SKIP_PREFLIGHT_CHECK=true
 REACT_APP_API_PATH=/v2
 PUBLIC_URL=./
-GENERATE_SOURCEMAP = false
+GENERATE_SOURCEMAP = false

packages/ketcher-react/src/script/editor/shared/closest.ts

@@ -482,7 +482,22 @@ function findClosestSGroup(restruct: ReStruct, pos: Vec2) {
   let minDist = SELECTION_DISTANCE_COEFFICIENT;
 
   restruct.molecule.sgroups.forEach((sg, sgid) => {
-    if (sg.isContracted() || sg.isSuperatomWithoutLabel) return;
+    if (sg.isSuperatomWithoutLabel) {
+      return;
+    }
+
+    if (sg.isContracted()) {
+      const sGroupPosition = sg.pp;
+      if (sGroupPosition) {
+        const dist = Vec2.dist(pos, sGroupPosition);
+        if (dist < minDist) {
+          ret = sgid;
+          minDist = dist;
+        }
+      }
+
+      return;
+    }
 
     const d = sg.bracketDirection;
     const n = d.rotateSC(1, 0);

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

@@ -346,7 +346,7 @@ class EraserTool implements Tool {
     } else if (ci.map === 'bonds') {
       this.editor.update(fromOneBondDeletion(restruct, ci.id));
     } else if (
-      ci.map === 'functionalGroups' &&
+      (ci.map === 'sgroups' || ci.map === 'functionalGroups') &&
       FunctionalGroup.isContractedFunctionalGroup(ci.id, functionalGroups)
     ) {
       const sGroup = sgroups.get(ci.id);

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

@@ -251,8 +251,9 @@ class TemplateTool implements Tool {
       });
 
       if (
-        // if point is functional group and it is not expanded
-        this.closestItem?.map === 'functionalGroups' &&
+        // if point is functional group/sgroup and it is not expanded
+        (this.closestItem?.map === 'functionalGroups' ||
+          this.closestItem?.map === 'sgroups') &&
         FunctionalGroup.isContractedFunctionalGroup(
           this.closestItem.id,
           this.functionalGroups,