#225 – moved CIP rendering logic to Bond class

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

@@ -414,10 +414,10 @@ class ReAtom extends ReObject {
     const path = paper.set()
 
     const cipLabelPosition = atom.pp.scaled(options.scale)
-    const cipValuePath = getCIPValuePath({
+    const cipValuePath = util.getCIPValuePath({
       paper,
       cipLabelPosition,
-      atom,
+      atomOrBond: atom,
       options
     })
     const box = util.relBox(cipValuePath.getBBox())
@@ -429,33 +429,6 @@ class ReAtom extends ReObject {
   }
 }
 
-function getCIPValuePath({
-  paper,
-  cipLabelPosition,
-  atom,
-  options
-}: {
-  paper
-  cipLabelPosition: Vec2
-  atom: Atom
-  options
-}) {
-  const text = paper
-    .text(cipLabelPosition.x, cipLabelPosition.y, `(${atom.cip})`)
-    .attr({
-      font: options.font,
-      'font-size': options.fontsz
-    })
-  const box = text.getBBox()
-  const path = paper.set()
-  const rect = paper
-    .rect(box.x - 1, box.y - 1, box.width + 2, box.height + 2, 3, 3)
-    .attr({ fill: '#0f0', stroke: '#fff', opacity: 1 })
-  path.push(rect.toBack(), text.toBack())
-
-  return path
-}
-
 function getStereoAtomColor(options, stereoLabel) {
   if (
     !stereoLabel ||

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

@@ -104,7 +104,7 @@ class ReBond extends ReObject {
     // eslint-disable-line max-statements
     const render = restruct.render
     const struct = restruct.molecule
-    const bond = restruct.molecule.bonds.get(bid)
+    const bond = restruct.molecule.bonds.get(bid)!
     const sgroups = restruct.molecule.sgroups
     const functionalGroups = restruct.molecule.functionalGroups
     if (
@@ -246,6 +246,32 @@ class ReBond extends ReObject {
         true
       )
     }
+
+    if (bond.cip) {
+      this.drawCIPLabel(bond, restruct)
+    }
+
+    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)
   }
 }
 

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  ***************************************************************************/
 
-import { Vec2 } from 'domain/entities'
+import { Atom, Bond, Vec2 } from 'domain/entities'
 import assert from 'assert'
 
 function tfx(v) {
@@ -127,11 +127,39 @@ function calcCoordinates(aPoint, bPoint, lengthHyp) {
   return obj
 }
 
+function getCIPValuePath({
+  paper,
+  cipLabelPosition,
+  atomOrBond,
+  options
+}: {
+  paper
+  cipLabelPosition: Vec2
+  atomOrBond: Atom | Bond
+  options
+}) {
+  const text = paper
+    .text(cipLabelPosition.x, cipLabelPosition.y, `(${atomOrBond.cip})`)
+    .attr({
+      font: options.font,
+      'font-size': options.fontsz
+    })
+  const box = text.getBBox()
+  const path = paper.set()
+  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())
+
+  return path
+}
+
 const util = {
   tfx,
   relBox,
   shiftRayBox,
-  calcCoordinates
+  calcCoordinates,
+  getCIPValuePath
 }
 
 export default util

packages/ketcher-core/src/domain/entities/atom.ts

@@ -53,7 +53,7 @@ export enum StereoLabel {
   Or = 'or'
 }
 
-export enum CIP {
+enum CIP {
   S = 'S',
   R = 'R',
   s = 's',

packages/ketcher-core/src/domain/entities/bond.ts

@@ -18,6 +18,13 @@ import { Pile } from './pile'
 import { Struct } from './struct'
 import { Vec2 } from './vec2'
 
+enum CIP {
+  E = 'E',
+  Z = 'Z',
+  e = 'e',
+  z = 'z'
+}
+
 export interface BondAttributes {
   reactingCenterStatus?: number
   topology?: number
@@ -26,6 +33,7 @@ export interface BondAttributes {
   type: number
   end: number
   begin: number
+  cip?: CIP | null
 }
 
 export class Bond {
@@ -72,7 +80,8 @@ export class Bond {
     type: Bond.PATTERN.TYPE.SINGLE,
     stereo: Bond.PATTERN.STEREO.NONE,
     topology: Bond.PATTERN.TOPOLOGY.EITHER,
-    reactingCenterStatus: Bond.PATTERN.REACTING_CENTER.UNMARKED
+    reactingCenterStatus: Bond.PATTERN.REACTING_CENTER.UNMARKED,
+    cip: null
   }
 
   begin: number
@@ -85,6 +94,7 @@ export class Bond {
   len: number
   sb: number
   sa: number
+  cip?: CIP | null
   hb1?: number
   hb2?: number
   angle: number
@@ -98,6 +108,7 @@ export class Bond {
     this.stereo = Bond.PATTERN.STEREO.NONE
     this.topology = Bond.PATTERN.TOPOLOGY.EITHER
     this.reactingCenterStatus = 0
+    this.cip = attributes.cip ?? null
     this.len = 0
     this.sb = 0
     this.sa = 0

packages/ketcher-core/src/domain/serializers/ket/fromKet/moleculeToStruct.ts

@@ -126,6 +126,7 @@ export function bondToStruct(source) {
   ifDef(params, 'topology', source.topology)
   ifDef(params, 'reactingCenterStatus', source.center)
   ifDef(params, 'stereo', source.stereo)
+  ifDef(params, 'cip', source.cip)
   // if (params.stereo)
   // 	params.stereo = params.stereo > 1 ? params.stereo * 2 : params.stereo;
   // params.xxx = 0;

packages/ketcher-react/src/script/ui/data/schema/struct-schema.js

@@ -212,6 +212,11 @@ export const bond = {
         'Made/broken and changes'
       ], // "Order changes" x 3
       default: 0
+    },
+    cip: {
+      title: 'CIP',
+      type: 'string',
+      enum: ['E', 'Z', 'e', 'z']
     }
   }
 }