From d9d1f37937618e42e606b39d6b8d983e38e2dba7 Mon Sep 17 00:00:00 2001 From: DmitriiP-EPAM <167520099+DmitriiP-EPAM@users.noreply.github.com> Date: Thu, 10 Oct 2024 18:29:55 +0300 Subject: [PATCH] =?UTF-8?q?#5497=20=E2=80=93=20Refactor:=20Specify=20the?= =?UTF-8?q?=20types=20of=20classes=20for=20`SnakeModePolymerBondRenderer`?= =?UTF-8?q?=20(#5498)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * #5497 – Refactor (Connection.ts): Specify the types * #5497 – Refactor (Connection.ts): Rename `xOffset` * #5497 – Refactor (SnakeModePolymerBondRenderer.ts): Specify the types * #5497 – Refactor (Connection.ts): Specify the types (amend) * Revert "#5497 – Refactor (Connection.ts): Rename `xOffset`" This reverts commit 33540e37f5747c35e0cf2a52f0b26c51a7354173. * #5497 – Refactor (SnakeModePolymerBondRenderer.ts): Specify the types, refactor the calculation of `endOfPathPart` * #5497 – Refactor (CanvasMatrix.ts): Specify the types * #5497 – Refactor (CanvasMatrix.ts): Use `new Connection(6)` * #5497 – Refactor (Connection.ts): Rename `xOffset` * #5497 – Refactor (SnakeModePolymerBondRenderer.ts): Change `FIXME` text * #5497 – Refactor (Connection.ts): Rename `ConnectionDirectionInDegrees`, `ConnectionDirectionOfLastCell` --- .../FlexModePolymerBondRenderer.ts | 2 +- .../SnakeModePolymerBondRenderer.ts | 118 +++++++++++------- .../entities/canvas-matrix/CanvasMatrix.ts | 111 ++++++++-------- .../entities/canvas-matrix/Connection.ts | 18 ++- 4 files changed, 144 insertions(+), 105 deletions(-) diff --git a/packages/ketcher-core/src/application/render/renderers/PolymerBondRenderer/FlexModePolymerBondRenderer.ts b/packages/ketcher-core/src/application/render/renderers/PolymerBondRenderer/FlexModePolymerBondRenderer.ts index 6e3dad3eea..a9e9e184e6 100644 --- a/packages/ketcher-core/src/application/render/renderers/PolymerBondRenderer/FlexModePolymerBondRenderer.ts +++ b/packages/ketcher-core/src/application/render/renderers/PolymerBondRenderer/FlexModePolymerBondRenderer.ts @@ -241,7 +241,7 @@ export class FlexModePolymerBondRenderer extends BaseRenderer { return this.hoverAreaElement.attr('stroke', 'transparent'); } - public remove() { + public remove(): void { super.remove(); if (this.polymerBond.hovered) { this.editorEvents.mouseLeaveMonomer.dispatch(); diff --git a/packages/ketcher-core/src/application/render/renderers/PolymerBondRenderer/SnakeModePolymerBondRenderer.ts b/packages/ketcher-core/src/application/render/renderers/PolymerBondRenderer/SnakeModePolymerBondRenderer.ts index 53d083ca85..767d19df67 100644 --- a/packages/ketcher-core/src/application/render/renderers/PolymerBondRenderer/SnakeModePolymerBondRenderer.ts +++ b/packages/ketcher-core/src/application/render/renderers/PolymerBondRenderer/SnakeModePolymerBondRenderer.ts @@ -1,10 +1,19 @@ import { editorEvents } from 'application/editor/editorEvents'; import { CoreEditor } from 'application/editor/internal'; import { Coordinates } from 'application/editor/shared/coordinates'; +import { + BaseMonomerRenderer, + BaseSequenceItemRenderer, +} from 'application/render'; import { D3SvgElementSelection } from 'application/render/types'; import assert from 'assert'; -import { Vec2 } from 'domain/entities'; -import { Connection } from 'domain/entities/canvas-matrix/Connection'; +import { BaseMonomer, Vec2 } from 'domain/entities'; +import { Cell } from 'domain/entities/canvas-matrix/Cell'; +import { + Connection, + ConnectionDirectionInDegrees, + ConnectionDirectionOfLastCell, +} from 'domain/entities/canvas-matrix/Connection'; import { SNAKE_LAYOUT_CELL_WIDTH } from 'domain/entities/DrawingEntitiesManager'; import { DrawingEntity } from 'domain/entities/DrawingEntity'; import { PolymerBond } from 'domain/entities/PolymerBond'; @@ -138,40 +147,48 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer { return this.bodyElement; } - // TODO: Specify the types. private drawPartOfSideConnection( isHorizontal: boolean, - connection, - cell, - direction, + connection: Connection, + cell: Cell, + direction: ConnectionDirectionInDegrees, ): string { const sin = Math.sin((direction * Math.PI) / 180); const cos = Math.cos((direction * Math.PI) / 180); const xOffset = (SNAKE_LAYOUT_CELL_WIDTH / 2) * cos; const yOffset = (CELL_HEIGHT / 2) * sin; - const maxXOffset = cell.connections.reduce((max, connection) => { - return max > connection.offset ? max : connection.offset; - }, 0); - const maxYOffset = cell.connections.reduce((max, connection) => { - const connectionYOffset = connection.yOffset || 0; - return max > connectionYOffset ? max : connectionYOffset; - }, 0); - - let endOfPathPart = isHorizontal - ? this.sideConnectionBondTurnPoint || - cell.monomer.renderer?.scaledMonomerPosition.x + - cell.monomer.renderer?.monomerSize.width / 2 + - xOffset - : cell.monomer.renderer?.scaledMonomerPosition.y + - cell.monomer.renderer?.monomerSize.height / 2 + - yOffset; + const maxXOffset = cell.connections.reduce( + (max: number, connection: Connection): number => { + return max > connection.xOffset ? max : connection.xOffset; + }, + 0, + ); + const maxYOffset = cell.connections.reduce( + (max: number, connection: Connection): number => { + const connectionYOffset = connection.yOffset || 0; + return max > connectionYOffset ? max : connectionYOffset; + }, + 0, + ); + + let endOfPathPart: number; + if (isHorizontal && this.sideConnectionBondTurnPoint) { + endOfPathPart = this.sideConnectionBondTurnPoint; + } else { + const { monomerSize, scaledMonomerPosition } = ( + cell.monomer as BaseMonomer + ).renderer as BaseMonomerRenderer | BaseSequenceItemRenderer; + endOfPathPart = isHorizontal + ? scaledMonomerPosition.x + monomerSize.width / 2 + xOffset + : scaledMonomerPosition.y + monomerSize.height / 2 + yOffset; + } this.sideConnectionBondTurnPoint = endOfPathPart; if (isHorizontal) { endOfPathPart += -(connection.yOffset || 0) * 3 + - cos * -connection.offset * 3 + + cos * -connection.xOffset * 3 + cos * (maxXOffset + 1) * 3 + (maxYOffset + 1) * 3; } @@ -193,9 +210,11 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer { } const firstCell = cells[0]; - const firstCellConnection = firstCell.connections.find((connection) => { - return connection.polymerBond === this.polymerBond; - }) as Connection; + const firstCellConnection = firstCell.connections.find( + (connection: Connection): boolean => { + return connection.polymerBond === this.polymerBond; + }, + ) as Connection; const isVerticalConnection = firstCellConnection.isVertical; const isStraightVerticalConnection = cells.length === 2 && isVerticalConnection; @@ -219,11 +238,10 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer { const cos = Math.cos((xDirection * Math.PI) / 180); - // TODO: Specify the types. - let previousConnection; - let previousCell; + let previousConnection: Connection; + let previousCell: Cell; - const horizontalPartIntersectionsOffset = firstCellConnection.offset; + const horizontalPartIntersectionsOffset = firstCellConnection.xOffset; const areCellsOnSameRow = cells.every((cell) => { return cell.y === firstCell.y; @@ -266,21 +284,26 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer { let maxHorizontalOffset = 0; - cells.forEach((cell, cellIndex) => { - const cellConnection = cell.connections.find((connection) => { - return connection.polymerBond === this.polymerBond; - }) as Connection; + cells.forEach((cell: Cell, cellIndex: number): void => { + const cellConnection = cell.connections.find( + (connection: Connection): boolean => { + return connection.polymerBond === this.polymerBond; + }, + ) as Connection; const isLastCell = cellIndex === cells.length - 1; const _xDirection = this.sideConnectionBondTurnPoint ? endPosition.x < this.sideConnectionBondTurnPoint ? 180 : 0 : xDirection; - const maxXOffset = cell.connections.reduce((max, connection) => { - return connection.isVertical || max > connection.offset - ? max - : connection.offset; - }, 0); + const maxXOffset = cell.connections.reduce( + (max: number, connection: Connection): number => { + return connection.isVertical || max > connection.xOffset + ? max + : connection.xOffset; + }, + 0, + ); maxHorizontalOffset = maxHorizontalOffset > maxXOffset ? maxHorizontalOffset : maxXOffset; @@ -290,10 +313,8 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer { return; } - const directionObject = cellConnection.direction as { - x: number; - y: number; - }; + const directionObject = + cellConnection.direction as ConnectionDirectionOfLastCell; const yDirection = isVerticalConnection ? 90 : directionObject.y; const sin = Math.sin((yDirection * Math.PI) / 180); const cos = Math.cos((_xDirection * Math.PI) / 180); @@ -305,8 +326,8 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer { SMOOTH_CORNER_SIZE - sin * (cellConnection.yOffset || 0) * 3 - (isTwoNeighborRowsConnection - ? maxHorizontalOffset - cellConnection.offset - : cellConnection.offset) * + ? maxHorizontalOffset - cellConnection.xOffset + : cellConnection.xOffset) * 3 } `; dAttributeForPath += generateBend(0, sin, cos, 1); @@ -333,7 +354,10 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer { isHorizontal, previousConnection, previousCell, - isHorizontal ? xDirection : previousConnection.direction, + // FIXME: Check. Is it correct to use `as ConnectionDirectionInDegrees` here? + isHorizontal + ? xDirection + : (previousConnection.direction as ConnectionDirectionInDegrees), ); } previousCell = cell; @@ -951,7 +975,7 @@ export class SnakeModePolymerBondRenderer extends BaseRenderer { this.isSnakeBond = true; } - public remove() { + public remove(): void { super.remove(); if (this.polymerBond.hovered) { this.editorEvents.mouseLeaveMonomer.dispatch(); diff --git a/packages/ketcher-core/src/domain/entities/canvas-matrix/CanvasMatrix.ts b/packages/ketcher-core/src/domain/entities/canvas-matrix/CanvasMatrix.ts index f14eee2dc3..0b876d7403 100644 --- a/packages/ketcher-core/src/domain/entities/canvas-matrix/CanvasMatrix.ts +++ b/packages/ketcher-core/src/domain/entities/canvas-matrix/CanvasMatrix.ts @@ -43,13 +43,13 @@ export class CanvasMatrix { direction: number, increaseOffset = (connection: Connection, increaseValue?: number) => { if (isNumber(increaseValue)) { - connection.offset = increaseValue; + connection.xOffset = increaseValue; } else { - connection.offset++; + connection.xOffset++; } }, - getOffset = (connection: Connection) => connection.offset, - ) { + getOffset = (connection: Connection): number => connection.xOffset, + ): void { // set offsets for connections with overlappings const currentConnections = new Map>(); const iterationMethod = @@ -61,14 +61,14 @@ export class CanvasMatrix { iterationMethod((cell) => { const biggestOffsetInCell = cell.connections.reduce( - (biggestOffset, connection) => { + (biggestOffset: number, connection: Connection): number => { return getOffset(connection) > biggestOffset ? getOffset(connection) : biggestOffset; }, 0, ); - cell.connections.forEach((connection) => { + cell.connections.forEach((connection: Connection): void => { if (connection.direction !== direction || connection.connectedNode) { return; } @@ -76,16 +76,18 @@ export class CanvasMatrix { const polymerBondConnections = this.polymerBondToConnections.get( connection.polymerBond, ); - polymerBondConnections?.forEach((polymerBondConnection) => { - increaseOffset(polymerBondConnection, biggestOffsetInCell); - }); + polymerBondConnections?.forEach( + (polymerBondConnection: Connection): void => { + increaseOffset(polymerBondConnection, biggestOffsetInCell); + }, + ); currentConnections.set( connection.polymerBond, new Set(polymerBondConnections), ); } }); - cell.connections.forEach((connection) => { + cell.connections.forEach((connection: Connection): void => { if ( !connection.connectedNode || (connection.direction !== direction && @@ -95,10 +97,12 @@ export class CanvasMatrix { } if (currentConnections.has(connection.polymerBond)) { currentConnections.delete(connection.polymerBond); - currentConnections.forEach((connections) => { - Array.from(connections.values()).forEach((currentConnection) => { - increaseOffset(currentConnection); - }); + currentConnections.forEach((connections: Set): void => { + Array.from(connections.values()).forEach( + (currentConnection: Connection): void => { + increaseOffset(currentConnection); + }, + ); }); } else { currentConnections.set( @@ -118,7 +122,8 @@ export class CanvasMatrix { this.polymerBondToConnections.get(polymerBond); if ( polymerBondConnections?.every( - (connection) => !cell.connections.includes(connection), + (connection: Connection): boolean => + !cell.connections.includes(connection), ) ) { currentConnections.delete(polymerBond); @@ -133,25 +138,27 @@ export class CanvasMatrix { this.matrix.forEach((cell) => { const biggestOffsetInCell = cell.connections.reduce( - (biggestOffset, connection) => { - return connection.offset > biggestOffset - ? connection.offset + (biggestOffset: number, connection: Connection): number => { + return connection.xOffset > biggestOffset + ? connection.xOffset : biggestOffset; }, 0, ); - cell.connections.forEach((connection) => { + cell.connections.forEach((connection: Connection): void => { if (connection.direction !== direction) { return; } - if (connection.offset <= biggestOffsetInCell) { + if (connection.xOffset <= biggestOffsetInCell) { const polymerBondConnections = this.polymerBondToConnections.get( connection.polymerBond, ); - polymerBondConnections?.forEach((polymerBondConnection) => { - polymerBondConnection.offset = biggestOffsetInCell; - }); + polymerBondConnections?.forEach( + (polymerBondConnection: Connection): void => { + polymerBondConnection.xOffset = biggestOffsetInCell; + }, + ); handledConnections.add(connection.polymerBond); } }); @@ -165,7 +172,7 @@ export class CanvasMatrix { return; } - polymerBondConnection.offset++; + polymerBondConnection.xOffset++; }); }); } @@ -287,14 +294,14 @@ export class CanvasMatrix { const isVertical = xDistanceAbsolute === 0; // fill start cell by connection with direction - let connection: Connection = { - polymerBond, + let connection = new Connection( connectedNode, - direction: isVertical ? 90 : xDirection, - offset: 0, - yOffset: 0, + isVertical ? 90 : xDirection, isVertical, - }; + polymerBond, + 0, + 0, + ); cell.connections.push(connection); this.polymerBondToCells.set(polymerBond, [cell]); @@ -310,14 +317,14 @@ export class CanvasMatrix { nextCellY, nextCellX, ) as Cell; - connection = { - polymerBond, - connectedNode: null, - direction: xDirection, - offset: 0, - yOffset: 0, + connection = new Connection( + null, + xDirection, isVertical, - }; + polymerBond, + 0, + 0, + ); nextCellToHandle.connections.push(connection); this.polymerBondToCells.get(polymerBond)?.push(nextCellToHandle); this.polymerBondToConnections.get(polymerBond)?.push(connection); @@ -332,14 +339,14 @@ export class CanvasMatrix { nextCellY, nextCellX, ) as Cell; - connection = { - polymerBond, - connectedNode: null, - direction: yDirection, - offset: 0, - yOffset: 0, + connection = new Connection( + null, + yDirection, isVertical, - }; + polymerBond, + 0, + 0, + ); nextCellToHandle.connections.push(connection); this.polymerBondToCells.get(polymerBond)?.push(nextCellToHandle); this.polymerBondToConnections.get(polymerBond)?.push(connection); @@ -355,16 +362,16 @@ export class CanvasMatrix { nextCellY, nextCellX, ) as Cell; - connection = { - polymerBond, + connection = new Connection( connectedNode, - direction: isVertical + isVertical ? yDirection : { x: xDistance === 0 ? 0 : xDirection, y: yDirection }, - offset: 0, - yOffset: 0, isVertical, - }; + polymerBond, + 0, + 0, + ); lastCellToHandle.connections.push(connection); this.polymerBondToCells.get(polymerBond)?.push(lastCellToHandle); this.polymerBondToConnections.get(polymerBond)?.push(connection); @@ -379,14 +386,14 @@ export class CanvasMatrix { this.fillConnectionsOffset(0); this.fillConnectionsOffset( 90, - (connection, increaseValue) => { + (connection: Connection, increaseValue: number | undefined): void => { if (isNumber(increaseValue)) { connection.yOffset = increaseValue; } else { connection.yOffset++; } }, - (connection) => connection.yOffset, + (connection: Connection): number => connection.yOffset, ); } } diff --git a/packages/ketcher-core/src/domain/entities/canvas-matrix/Connection.ts b/packages/ketcher-core/src/domain/entities/canvas-matrix/Connection.ts index a86a2f1d70..d11dff5338 100644 --- a/packages/ketcher-core/src/domain/entities/canvas-matrix/Connection.ts +++ b/packages/ketcher-core/src/domain/entities/canvas-matrix/Connection.ts @@ -1,13 +1,21 @@ import { PolymerBond } from 'domain/entities/PolymerBond'; import { SubChainNode } from 'domain/entities'; +export type ConnectionDirectionInDegrees = 0 | 90 | 180 | 270; +export type ConnectionDirectionOfLastCell = { + readonly x: number; + readonly y: number; +}; + export class Connection { constructor( - public polymerBond: PolymerBond, - public connectedNode: SubChainNode | null, - public direction: number | { x: number; y: number }, - public offset: number, + public readonly connectedNode: SubChainNode | null, + public readonly direction: + | ConnectionDirectionInDegrees + | ConnectionDirectionOfLastCell, + public readonly isVertical: boolean, + public readonly polymerBond: PolymerBond, + public xOffset: number, public yOffset: number, - public isVertical: boolean, ) {} }