diff --git a/packages/ketcher-core/__tests__/application/render/renderers/__snapshots__/PeptideRenderer.test.ts.snap b/packages/ketcher-core/__tests__/application/render/renderers/__snapshots__/PeptideRenderer.test.ts.snap index 325c2e0565..098e1683f6 100644 --- a/packages/ketcher-core/__tests__/application/render/renderers/__snapshots__/PeptideRenderer.test.ts.snap +++ b/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" > diff --git a/packages/ketcher-core/src/application/render/renderers/BaseMonomerRenderer.ts b/packages/ketcher-core/src/application/render/renderers/BaseMonomerRenderer.ts index 1426263dd8..450b0e08d3 100644 --- a/packages/ketcher-core/src/application/render/renderers/BaseMonomerRenderer.ts +++ b/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', diff --git a/packages/ketcher-core/src/application/render/renderers/PolymerBondRenderer.ts b/packages/ketcher-core/src/application/render/renderers/PolymerBondRenderer.ts index a8bcd38ba1..92a3cac867 100644 --- a/packages/ketcher-core/src/application/render/renderers/PolymerBondRenderer.ts +++ b/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);