diff --git a/packages/ketcher-core/src/application/render/renderers/BondRenderer.ts b/packages/ketcher-core/src/application/render/renderers/BondRenderer.ts index 85ddb2ada8..81062fc21c 100644 --- a/packages/ketcher-core/src/application/render/renderers/BondRenderer.ts +++ b/packages/ketcher-core/src/application/render/renderers/BondRenderer.ts @@ -199,10 +199,11 @@ export class BondRenderer extends BaseRenderer { private appendRootElement() { return this.canvas .append('g') + .data([this]) .attr( 'transform', `translate(${this.scaledPosition.startPosition.x}, ${this.scaledPosition.startPosition.y})`, - ); + ) as never as D3SvgElementSelection; } getSelectionPoints() { @@ -646,6 +647,7 @@ export class BondRenderer extends BaseRenderer { public remove() { super.remove(); this.removeHover(); + this.removeSelection(); } public move() { diff --git a/packages/ketcher-core/src/application/render/renderers/MonomerToAtomBondRenderer.ts b/packages/ketcher-core/src/application/render/renderers/MonomerToAtomBondRenderer.ts index 24ab4b48e4..eb99c0677d 100644 --- a/packages/ketcher-core/src/application/render/renderers/MonomerToAtomBondRenderer.ts +++ b/packages/ketcher-core/src/application/render/renderers/MonomerToAtomBondRenderer.ts @@ -4,6 +4,10 @@ import { Scale } from 'domain/helpers'; import { MonomerToAtomBond } from 'domain/entities/MonomerToAtomBond'; export class MonomerToAtomBondRenderer extends BaseRenderer { + private selectionElement: + | D3SvgElementSelection + | undefined; + constructor(public monomerToAtomBond: MonomerToAtomBond) { super(monomerToAtomBond); this.monomerToAtomBond.setRenderer(this); @@ -29,10 +33,11 @@ export class MonomerToAtomBondRenderer extends BaseRenderer { show() { this.rootElement = this.canvas .insert('g', `.monomer`) + .data([this]) .attr( 'transform', `translate(${this.scaledPosition.startPosition.x}, ${this.scaledPosition.startPosition.y})`, - ); + ) as never as D3SvgElementSelection; this.rootElement ?.append('line') @@ -48,15 +53,60 @@ export class MonomerToAtomBondRenderer extends BaseRenderer { ) .attr('stroke', '#333333') .attr('stroke-width', 1); + this.appendHover(); } protected appendHover(): D3SvgElementSelection | void { - return undefined; + this.rootElement + ?.append('line') + .attr('x1', 0) + .attr('y1', 0) + .attr( + 'x2', + this.scaledPosition.endPosition.x - this.scaledPosition.startPosition.x, + ) + .attr( + 'y2', + this.scaledPosition.endPosition.y - this.scaledPosition.startPosition.y, + ) + .attr('stroke', 'transparent') + .attr('stroke-width', 10); } protected appendHoverAreaElement(): void {} - drawSelection(): void {} + public drawSelection() { + if (!this.rootElement) { + return; + } + if (this.monomerToAtomBond.selected) { + this.appendSelection(); + } else { + this.removeSelection(); + } + } + + public appendSelection(): void { + this.selectionElement = this.rootElement + ?.insert('line', ':first-child') + .attr('x1', 0) + .attr('y1', 0) + .attr( + 'x2', + this.scaledPosition.endPosition.x - this.scaledPosition.startPosition.x, + ) + .attr( + 'y2', + this.scaledPosition.endPosition.y - this.scaledPosition.startPosition.y, + ) + .attr('stroke', '#57ff8f') + .attr('stroke-width', 10); + } + + public removeSelection() { + this.selectionElement?.remove(); + this.selectionElement = undefined; + } public move() { if (!this.rootElement) { @@ -67,7 +117,10 @@ export class MonomerToAtomBondRenderer extends BaseRenderer { this.show(); } - protected removeHover(): void {} + protected removeHover(): void { + this.hoverElement?.remove(); + this.hoverElement = undefined; + } public moveSelection(): void {} } diff --git a/packages/ketcher-core/src/domain/entities/DrawingEntitiesManager.ts b/packages/ketcher-core/src/domain/entities/DrawingEntitiesManager.ts index d05f83fae4..05a7b83d9e 100644 --- a/packages/ketcher-core/src/domain/entities/DrawingEntitiesManager.ts +++ b/packages/ketcher-core/src/domain/entities/DrawingEntitiesManager.ts @@ -2233,6 +2233,7 @@ export class DrawingEntitiesManager { ) { if (_monomerToAtomBond) { this.monomerToAtomBonds.set(_monomerToAtomBond.id, _monomerToAtomBond); + monomer.setBond(attachmentPoint, _monomerToAtomBond); return _monomerToAtomBond; }