#225 – fixed selection for bonds and atoms

packages/ketcher-core/src/application/render/restruct/reatom.ts

@@ -404,29 +404,9 @@ class ReAtom extends ReObject {
     }
 
     if (atom.cip) {
-      this.drawCIPLabel(atom, render.ctab)
+      util.drawCIPLabel(atom, atom.pp, render.ctab, this.visel)
     }
   }
-
-  drawCIPLabel(atom: Atom, restruct: ReStruct) {
-    const render = restruct.render
-    const { options, paper } = render
-    const path = paper.set()
-
-    const cipLabelPosition = atom.pp.scaled(options.scale)
-    const cipValuePath = util.getCIPValuePath({
-      paper,
-      cipLabelPosition,
-      atomOrBond: atom,
-      options
-    })
-    const box = util.relBox(cipValuePath.getBBox())
-
-    cipValuePath.translateAbs(0.5 * box.width, -0.5 * box.height)
-    path.push(cipValuePath.toBack())
-
-    restruct.addReObjectPath(LayerMap.data, this.visel, path, null, true)
-  }
 }
 
 function getStereoAtomColor(options, stereoLabel) {

packages/ketcher-core/src/application/render/restruct/rebond.ts

@@ -248,31 +248,11 @@ class ReBond extends ReObject {
     }
 
     if (bond.cip) {
-      this.drawCIPLabel(bond, restruct)
+      util.drawCIPLabel(bond, bond.center, render.ctab, this.visel)
     }
 
     this.path.toBack()
   }
-
-  drawCIPLabel(bond: Bond, restruct: ReStruct) {
-    const render = restruct.render
-    const { options, paper } = render
-    const path = paper.set()
-
-    const cipLabelPosition = bond.center.scaled(options.scale)
-    const cipValuePath = util.getCIPValuePath({
-      paper,
-      cipLabelPosition,
-      atomOrBond: bond,
-      options
-    })
-    const box = util.relBox(cipValuePath.getBBox())
-
-    cipValuePath.translateAbs(0.5 * box.width, -0.5 * box.height)
-    path.push(cipValuePath.toBack())
-
-    restruct.addReObjectPath(LayerMap.data, this.visel, path, null, true)
-  }
 }
 
 function getHighlightPath(restruct: ReStruct, hb1: HalfBond, hb2: HalfBond) {

packages/ketcher-core/src/application/render/restruct/restruct.ts

@@ -614,6 +614,7 @@ class ReStruct {
           }
 
           this.showItemSelection(item, selected)
+          item.selectionPlate?.toBack()
         })
       }
     })

packages/ketcher-core/src/application/render/util.ts

@@ -16,6 +16,8 @@
 
 import { Atom, Bond, Vec2 } from 'domain/entities'
 import assert from 'assert'
+import { ReStruct, LayerMap } from './restruct'
+import Visel from './restruct/visel'
 
 function tfx(v) {
   return parseFloat(v).toFixed(8)
@@ -149,17 +151,43 @@ function getCIPValuePath({
   const rect = paper
     .rect(box.x - 1, box.y - 1, box.width + 2, box.height + 2, 3, 3)
     .attr({ fill: '#fff', stroke: '#fff', opacity: 1 })
-  path.push(rect.toBack(), text.toBack())
+  path.push(rect.toFront(), text.toFront())
 
   return path
 }
 
+function drawCIPLabel(
+  atomOrBond: Bond | Atom,
+  position: Vec2,
+  restruct: ReStruct,
+  visel: Visel
+) {
+  const render = restruct.render
+  const { options, paper } = render
+  const path = paper.set()
+
+  const cipLabelPosition = position.scaled(options.scale)
+  const cipValuePath = getCIPValuePath({
+    paper,
+    cipLabelPosition,
+    atomOrBond,
+    options
+  })
+  const box = relBox(cipValuePath.getBBox())
+
+  cipValuePath.translateAbs(0.5 * box.width, -0.5 * box.height)
+  path.push(cipValuePath.toFront())
+
+  restruct.addReObjectPath(LayerMap.data, visel, path, null, true)
+}
+
 const util = {
   tfx,
   relBox,
   shiftRayBox,
   calcCoordinates,
-  getCIPValuePath
+  getCIPValuePath,
+  drawCIPLabel
 }
 
 export default util