#2838 - Bonds between atoms are not centered and not drawn symmetrically

packages/ketcher-core/__tests__/application/render/util.test.ts

@@ -0,0 +1,35 @@
+import { HalfBond } from 'domain/entities';
+import util from './../../../src/application/render/util';
+
+describe('util', () => {
+  describe('updateHalfBondCoordinates()', () => {
+    let hb1: HalfBond;
+    let hb2: HalfBond;
+    const xShift = 1;
+    beforeEach(() => {
+      hb1 = new HalfBond(1, 2, 1);
+      hb2 = new HalfBond(1, 2, 1);
+      hb1.p.x = 100;
+      hb1.p.y = 100;
+      hb2.p.x = 110;
+      hb2.p.y = 100;
+    });
+
+    it('should not update the coordinates if y-coordinates are different', () => {
+      hb2.p.y = hb2.p.y + 1;
+
+      const result = util.updateHalfBondCoordinates(hb1, hb2, xShift);
+      expect(result).toEqual([hb1, hb2]);
+    });
+    it('should update the coordinates if x-coordinate of hb1 is less than hb2', () => {
+      const result = util.updateHalfBondCoordinates(hb1, hb2, xShift);
+
+      expect(result[0].p.x).toBe(101);
+    });
+    it('should update the coordinates if x-coordinate of hb2 is less than hb1', () => {
+      hb2.p.x = 90;
+      const result = util.updateHalfBondCoordinates(hb1, hb2, xShift);
+      expect(result[0].p.x).toBe(99);
+    });
+  });
+});

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

@@ -524,7 +524,7 @@ function getBondPath(
   const struct = restruct.molecule;
   const shiftA = !restruct.atoms.get(hb1.begin)?.showLabel;
   const shiftB = !restruct.atoms.get(hb2.begin)?.showLabel;
-
+  let newHalfBonds: [HalfBond, HalfBond];
   switch (bond.b.type) {
     case Bond.PATTERN.TYPE.SINGLE:
       switch (bond.b.stereo) {
@@ -637,7 +637,13 @@ function getBondPath(
       break;
     }
     case Bond.PATTERN.TYPE.SINGLE_OR_DOUBLE:
-      path = getSingleOrDoublePath(render, hb1, hb2, isSnapping);
+      newHalfBonds = util.updateHalfBondCoordinates(hb1, hb2, 1);
+      path = getSingleOrDoublePath(
+        render,
+        newHalfBonds[0],
+        newHalfBonds[1],
+        isSnapping,
+      );
       break;
     case Bond.PATTERN.TYPE.SINGLE_OR_AROMATIC:
       path = getBondAromaticPath(
@@ -651,24 +657,35 @@ function getBondPath(
       );
       break;
     case Bond.PATTERN.TYPE.DOUBLE_OR_AROMATIC:
+      newHalfBonds = util.updateHalfBondCoordinates(hb1, hb2, -1);
       path = getBondAromaticPath(
         render,
-        hb1,
-        hb2,
+        newHalfBonds[0],
+        newHalfBonds[1],
         bond,
         shiftA,
         shiftB,
         isSnapping,
       );
       break;
     case Bond.PATTERN.TYPE.ANY:
-      path = draw.bondAny(render.paper, hb1, hb2, render.options, isSnapping);
+      console.log(hb1.p, hb2.p);
+
+      newHalfBonds = util.updateHalfBondCoordinates(hb1, hb2, -1);
+      path = draw.bondAny(
+        render.paper,
+        newHalfBonds[0],
+        newHalfBonds[1],
+        render.options,
+        isSnapping,
+      );
       break;
     case Bond.PATTERN.TYPE.HYDROGEN:
+      newHalfBonds = util.updateHalfBondCoordinates(hb1, hb2, 1);
       path = draw.bondHydrogen(
         render.paper,
-        hb1,
-        hb2,
+        newHalfBonds[0],
+        newHalfBonds[1],
         render.options,
         isSnapping,
       );

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

@@ -15,7 +15,7 @@
  ***************************************************************************/
 
 import { RaphaelAxisAlignedBoundingBox, RaphaelPaper } from 'raphael';
-import { Atom, Bond, Box2Abs, Vec2 } from 'domain/entities';
+import { Atom, Bond, Box2Abs, HalfBond, Vec2 } from 'domain/entities';
 import assert from 'assert';
 import { ReStruct, LayerMap } from './restruct';
 import Visel from './restruct/visel';
@@ -186,11 +186,26 @@ function drawCIPLabel({
   return cipValuePath;
 }
 
+function updateHalfBondCoordinates(
+  hb1: HalfBond,
+  hb2: HalfBond,
+  xShift: number,
+): [HalfBond, HalfBond] {
+  if (hb1.p.y !== hb2.p.y) return [hb1, hb2];
+  if (hb1.p.x < hb2.p.x && hb1.p.y === hb2.p.y) {
+    hb1.p.x = hb1.p.x + xShift;
+  } else if (hb1.p.x > hb2.p.x) {
+    hb1.p.x = hb1.p.x - xShift;
+  }
+
+  return [hb1, hb2];
+}
 const util = {
   relBox,
   shiftRayBox,
   calcCoordinates,
   drawCIPLabel,
+  updateHalfBondCoordinates,
 };
 
 export default util;

packages/ketcher-react/src/script/ui/views/toolbars/LeftToolbar/LeftToolbar.tsx

@@ -99,7 +99,6 @@ const LeftToolbar = (props: Props) => {
     return visibleItems.length ? (
       <div className={clsx(classes.group, className)}>
         {visibleItems.map((item) => {
-          console.log('items', item, item.id);
           switch (item.id) {
             case 'bond-common':
               return <Bond {...rest} height={height} key={item.id} />;