#6167 – Long bonds for linearly displayed circular structures (#6392)

– added showing cyclic bond as a side chain in snake mode and flex mode

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

@@ -21,28 +21,30 @@ exports[`Polymer Bond Renderer should render bond 1`] = `
     <g
       pointer-events="stroke"
     >
-      <line
+      <path
         class="selection-area"
+        d="
+      M400,400
+      L3600,4000
+    "
         data-bondid="2"
         data-bondtype="covalent"
         data-frommonomerid="0"
         data-testid="bond"
         data-tomonomerid="1"
+        fill="none"
         pointer-events="stroke"
         stroke="#333333"
         stroke-width="1"
-        x1="400"
-        x2="3600"
-        y1="400"
-        y2="4000"
       />
-      <line
+      <path
+        d="
+      M400,400
+      L3600,4000
+    "
+        fill="none"
         stroke="transparent"
         stroke-width="10"
-        x1="400"
-        x2="3600"
-        y1="400"
-        y2="4000"
       />
       <circle
         cursor="pointer"

packages/ketcher-core/__tests__/domain/entities/drawingEntitiesManager.test.ts

@@ -19,9 +19,8 @@ import {
 } from 'application/editor/operations/monomer';
 import { RenderersManager } from 'application/render/renderers/RenderersManager';
 import { createPolymerEditorCanvas } from '../../helpers/dom';
-import { CoreEditor } from 'application/editor';
+import { CoreEditor, MACROMOLECULES_BOND_TYPES } from 'application/editor';
 import { FlexMode } from 'application/editor/modes/FlexMode';
-import { MACROMOLECULES_BOND_TYPES } from 'application/editor/tools/Bond';
 
 describe('Drawing Entities Manager', () => {
   it('should create monomer', () => {

packages/ketcher-core/src/application/editor/MacromoleculesConverter.ts

@@ -14,7 +14,6 @@ import { ReAtom, ReBond, ReSGroup, ReStruct } from 'application/render';
 import { BaseMonomer } from 'domain/entities/BaseMonomer';
 import { MonomerMicromolecule } from 'domain/entities/monomerMicromolecule';
 import { Command } from 'domain/entities/Command';
-import { MONOMER_CONST } from 'application/editor/operations/monomer/monomerFactory';
 import { PolymerBond } from 'domain/entities/PolymerBond';
 import assert from 'assert';
 import { AttachmentPointName } from 'domain/types';
@@ -30,7 +29,8 @@ import { Atom } from 'domain/entities/CoreAtom';
 import { AtomLabel } from 'domain/constants';
 import { isMonomerSgroupWithAttachmentPoints } from '../../utilities/monomers';
 import { HydrogenBond } from 'domain/entities/HydrogenBond';
-import { MACROMOLECULES_BOND_TYPES } from 'application/editor/tools/Bond';
+import { MONOMER_CONST } from 'domain/constants/monomers';
+import { MACROMOLECULES_BOND_TYPES } from 'application/editor/tools/types';
 
 export class MacromoleculesConverter {
   private static convertMonomerToMonomerMicromolecule(
@@ -672,6 +672,7 @@ export class MacromoleculesConverter {
     });
 
     drawingEntitiesManager.setMicromoleculesHiddenEntities(struct);
+    drawingEntitiesManager.detectCycles();
 
     if (editor) {
       editor.viewModel.initialize([...drawingEntitiesManager.bonds.values()]);

packages/ketcher-core/src/application/editor/modes/BaseMode.ts

@@ -27,8 +27,8 @@ import { ketcherProvider } from 'application/utils';
 import { DrawingEntitiesManager } from 'domain/entities/DrawingEntitiesManager';
 import { HydrogenBond } from 'domain/entities/HydrogenBond';
 import { AttachmentPointName } from 'domain/types';
-import { MACROMOLECULES_BOND_TYPES } from 'application/editor/tools/Bond';
 import { Atom } from 'domain/entities/CoreAtom';
+import { MACROMOLECULES_BOND_TYPES } from 'application/editor';
 
 export abstract class BaseMode {
   private _pasteIsInProgress = false;

packages/ketcher-core/src/application/editor/modes/SequenceMode.ts

@@ -55,10 +55,10 @@ import {
 import { NewSequenceButton } from 'application/render/renderers/sequence/ui-controls/NewSequenceButton';
 import { PolymerBond } from 'domain/entities/PolymerBond';
 import { MonomerToAtomBond } from 'domain/entities/MonomerToAtomBond';
-import { MACROMOLECULES_BOND_TYPES } from 'application/editor/tools/Bond';
 import { BackBoneSequenceNode } from 'domain/entities/BackBoneSequenceNode';
 import { STRAND_TYPE } from 'domain/constants';
 import { getNodeFromTwoStrandedNode } from 'domain/helpers/chains';
+import { MACROMOLECULES_BOND_TYPES } from 'application/editor';
 
 const naturalAnalogues = uniq([
   ...rnaDnaNaturalAnalogues,

packages/ketcher-core/src/application/editor/operations/monomer/monomerFactory.ts

@@ -23,24 +23,12 @@ import {
 import { KetMonomerClass } from 'application/formatters/types/ket';
 import { isAmbiguousMonomerLibraryItem } from 'domain/helpers/monomers';
 import {
+  MONOMER_CONST,
   rnaDnaNaturalAnalogues,
   unknownNaturalAnalogues,
 } from 'domain/constants/monomers';
 
 type DerivedClass<T> = new (...args: unknown[]) => T;
-export const MONOMER_CONST = {
-  AMINO_ACID: 'AminoAcid',
-  PEPTIDE: 'PEPTIDE',
-  CHEM: 'CHEM',
-  RNA: 'RNA',
-  DNA: 'DNA',
-  MODDNA: 'MODDNA',
-  R: 'R', // states for Ribose
-  P: 'P', // states for Phosphate
-  SUGAR: 'SUGAR',
-  BASE: 'BASE',
-  PHOSPHATE: 'PHOSPHATE',
-};
 
 type Monomer =
   | typeof Chem

packages/ketcher-core/src/application/editor/tools/Bond.ts

@@ -21,9 +21,9 @@ import { SnakeModePolymerBondRenderer } from 'application/render/renderers/Polym
 import assert from 'assert';
 import { AttachmentPoint } from 'domain/AttachmentPoint';
 import {
+  AmbiguousMonomer,
   UnresolvedMonomer,
   UnsplitNucleotide,
-  AmbiguousMonomer,
 } from 'domain/entities';
 import { BaseMonomer } from 'domain/entities/BaseMonomer';
 import { Chem } from 'domain/entities/Chem';
@@ -39,18 +39,13 @@ import { AttachmentPointName } from 'domain/types';
 //  because of using uncontrolled `index.ts` files.
 import { Coordinates } from '../shared/coordinates';
 import { AtomRenderer } from 'application/render/renderers/AtomRenderer';
-import { ToolName } from 'application/editor';
+import { MACROMOLECULES_BOND_TYPES, ToolName } from 'application/editor';
 import { KetMonomerClass } from 'application/formatters';
 
 type FlexModeOrSnakeModePolymerBondRenderer =
   | FlexModePolymerBondRenderer
   | SnakeModePolymerBondRenderer;
 
-export enum MACROMOLECULES_BOND_TYPES {
-  SINGLE = 'single',
-  HYDROGEN = 'hydrogen',
-}
-
 class PolymerBond implements BaseTool {
   private bondRenderer?: FlexModeOrSnakeModePolymerBondRenderer;
   private isBondConnectionModalOpen = false;

packages/ketcher-core/src/application/editor/tools/SelectRectangle.ts

@@ -232,6 +232,7 @@ class SelectRectangle implements BaseTool {
       this.mousePositionAfterMove = this.editor.lastCursorPositionOfCanvas;
       requestAnimationFrame(() => {
         this.editor.renderersContainer.update(modelChanges);
+        this.editor.drawingEntitiesManager.rerenderPolymerBonds();
       });
     }
   }

packages/ketcher-core/src/application/editor/tools/types.ts

@@ -8,3 +8,8 @@ export enum ToolName {
   clear = 'clear',
   hand = 'hand',
 }
+
+export enum MACROMOLECULES_BOND_TYPES {
+  SINGLE = 'single',
+  HYDROGEN = 'hydrogen',
+}

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

@@ -91,7 +91,7 @@ export abstract class BaseMonomerRenderer extends BaseRenderer {
       this.monomer.attachmentPointsToBonds[attachmentPointName]?.renderer;
     if (!renderer) return false;
     if ('isSnake' in renderer) {
-      return renderer.isSnake && !renderer.isMonomersOnSameHorizontalLine();
+      return renderer.isSnake && !renderer.polymerBond.isHorizontal;
     }
     return false;
   }