diff --git a/packages/ketcher-core/__tests__/application/render/util.test.ts b/packages/ketcher-core/__tests__/application/render/util.test.ts new file mode 100644 index 0000000000..3f7e4e92da --- /dev/null +++ b/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); + }); + }); +}); diff --git a/packages/ketcher-core/src/application/render/restruct/rebond.ts b/packages/ketcher-core/src/application/render/restruct/rebond.ts index bbeccb916d..ec37083a29 100644 --- a/packages/ketcher-core/src/application/render/restruct/rebond.ts +++ b/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,10 +657,11 @@ 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, @@ -662,13 +669,23 @@ function getBondPath( ); 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, ); diff --git a/packages/ketcher-core/src/application/render/util.ts b/packages/ketcher-core/src/application/render/util.ts index a079bc19e9..8cc5d19103 100644 --- a/packages/ketcher-core/src/application/render/util.ts +++ b/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; diff --git a/packages/ketcher-react/src/script/ui/views/toolbars/LeftToolbar/LeftToolbar.tsx b/packages/ketcher-react/src/script/ui/views/toolbars/LeftToolbar/LeftToolbar.tsx index 6b62ad9342..da12645b8b 100644 --- a/packages/ketcher-react/src/script/ui/views/toolbars/LeftToolbar/LeftToolbar.tsx +++ b/packages/ketcher-react/src/script/ui/views/toolbars/LeftToolbar/LeftToolbar.tsx @@ -99,7 +99,6 @@ const LeftToolbar = (props: Props) => { return visibleItems.length ? (
{visibleItems.map((item) => { - console.log('items', item, item.id); switch (item.id) { case 'bond-common': return ;