#4997 - The second of three horizontal bond overlaps backbone connect…

…ion line

- changed order of rendering bonds(side over backbone)

#4995 - The bottom horizontal bonds does not shift if there is an overlap

- applied offsets for bottom part of horizontal bonds

packages/ketcher-core/__tests__/application/render/renderers/__snapshots__/PeptideRenderer.test.ts.snap

@@ -19,6 +19,7 @@ exports[`PeptideRenderer should render peptide 1`] = `
     class="drawn-structures"
   >
     <g
+      class="monomer"
       transform="translate(0, 0) scale(1)"
       transition="transform 0.2s"
     >

packages/ketcher-core/src/application/render/renderers/BaseMonomerRenderer.ts

@@ -21,6 +21,7 @@ import { Coordinates } from 'application/editor/shared/coordinates';
 
 const labelPositions: { [key: string]: { x: number; y: number } | undefined } =
   {};
+export const MONOMER_CSS_CLASS = 'monomer';
 
 export abstract class BaseMonomerRenderer extends BaseRenderer {
   private editorEvents: typeof editorEvents;
@@ -274,6 +275,7 @@ export abstract class BaseMonomerRenderer extends BaseRenderer {
     return canvas
       .append('g')
       .data([this])
+      .attr('class', MONOMER_CSS_CLASS)
       .attr('transition', 'transform 0.2s')
       .attr(
         'transform',

packages/ketcher-core/src/application/render/renderers/PolymerBondRenderer.ts

@@ -280,6 +280,8 @@ export class PolymerBondRenderer extends BaseRenderer {
       );
     }
 
+    let maxHorizontalOffset = 0;
+
     cells.forEach((cell, cellIndex) => {
       const cellConnection = cell.connections.find((connection) => {
         return connection.polymerBond === this.polymerBond;
@@ -290,6 +292,15 @@ export class PolymerBondRenderer extends BaseRenderer {
           ? 180
           : 0
         : xDirection;
+      const maxXOffset = cell.connections.reduce((max, connection) => {
+        return connection.isVertical || max > connection.offset
+          ? max
+          : connection.offset;
+      }, 0);
+
+      maxHorizontalOffset =
+        maxHorizontalOffset > maxXOffset ? maxHorizontalOffset : maxXOffset;
+
       if (isLastCell) {
         if (isStraightVerticalConnection) {
           return;
@@ -305,7 +316,14 @@ export class PolymerBondRenderer extends BaseRenderer {
 
         if (!areCellsOnSameRow) {
           dAttributeForPath += `V ${
-            endPosition.y - CELL_HEIGHT / 2 - SMOOTH_CORNER_SIZE
+            endPosition.y -
+            CELL_HEIGHT / 2 -
+            SMOOTH_CORNER_SIZE -
+            sin * (cellConnection.yOffset || 0) * 3 -
+            (isTwoNeighborRowsConnection
+              ? maxHorizontalOffset - cellConnection.offset
+              : cellConnection.offset) *
+              3
           } `;
           dAttributeForPath += `q 0,${SMOOTH_CORNER_SIZE * sin} ${
             SMOOTH_CORNER_SIZE * cos
@@ -685,7 +703,7 @@ export class PolymerBondRenderer extends BaseRenderer {
 
   private appendRootElement() {
     return this.canvas
-      .insert('g', `:first-child`)
+      .insert('g', `.monomer`)
       .data([this])
       .on('mouseover', (event) => {
         this.editorEvents.mouseOverPolymerBond.dispatch(event);