#5224 – update

epam · Sep 3, 2024 · 85e0687 · 85e0687
1 parent a0ac1ef
commit 85e0687
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 57 deletions.
diff --git a/packages/ketcher-core/src/application/render/renderers/AmbiguousMonomerRenderer.ts b/packages/ketcher-core/src/application/render/renderers/AmbiguousMonomerRenderer.ts
@@ -7,10 +7,12 @@ import { EmptyMonomer } from 'domain/entities/EmptyMonomer';
 import { AttachmentPointName } from 'domain/types';
 import { PreviewAttachmentPoint } from 'domain/PreviewAttachmentPoint';
 import { UsageInMacromolecule } from 'application/render';
+import { D3SvgElementSelection } from 'application/render/types';
 
 const NUMBER_OF_MONOMERS_CIRCLE_Y_OFFSET = 7;
 
 type PreviewAttachmentPointParams = {
+  canvas: D3SvgElementSelection<SVGSVGElement, void>;
   usage: UsageInMacromolecule;
   selectedAttachmentPoint: string | null | undefined;
   connectedAttachmentPoints: string[] | undefined;
@@ -142,11 +144,12 @@ export class AmbiguousMonomerRenderer extends BaseMonomerRenderer {
         connectedAttachmentPoints?.includes(attachmentPointName) ?? false,
       selected: selectedAttachmentPoint === attachmentPointName,
       usage,
+      canvas: params.canvas,
     });
   }
 
-  public showExternal(canvas, params: PreviewAttachmentPointParams) {
-    this.rootElement = this.appendRootElement(canvas);
+  public showExternal(params: PreviewAttachmentPointParams) {
+    this.rootElement = this.appendRootElement(params.canvas);
     this.appendBody(this.rootElement);
     this.appendLabel(this.rootElement);
     this.appendNumberOfMonomers();

diff --git a/packages/ketcher-core/src/application/render/restruct/reatom.ts b/packages/ketcher-core/src/application/render/restruct/reatom.ts
@@ -39,10 +39,7 @@ import { Scale } from 'domain/helpers';
 import draw from '../draw';
 import util from '../util';
 import { tfx } from 'utilities';
-import {
-  RenderOptions,
-  UsageInMacromolecule,
-} from 'application/render/render.types';
+import { RenderOptions } from 'application/render/render.types';
 import { MonomerMicromolecule } from 'domain/entities/monomerMicromolecule';
 import { attachmentPointNames } from 'domain/types';
 import { getAttachmentPointLabel } from 'domain/helpers/attachmentPointCalculations';
@@ -781,53 +778,6 @@ function addTooltip(node, text: string) {
   node.childNodes[0].setAttribute('data-tooltip', util.escapeHtml(tooltip));
 }
 
-function useLabelStyles(
-  attachmentPointSelected: boolean,
-  attachmentPointUsed: boolean,
-  usageInMacromolecule: UsageInMacromolecule,
-): {
-  color: string;
-  fill: string;
-  stroke: string;
-} {
-  let color = '#585858';
-  let fill = '#FFF';
-  let stroke = '#7C7C7F';
-
-  switch (usageInMacromolecule) {
-    case UsageInMacromolecule.MonomerPreview:
-      stroke = 'none';
-      if (attachmentPointUsed) {
-        fill = '#E1E5EA';
-        color = '#B4B9D6';
-      }
-      break;
-    case UsageInMacromolecule.MonomerConnectionsModal:
-      if (attachmentPointSelected) {
-        fill = '#167782';
-        color = '#FFF';
-      } else if (attachmentPointUsed) {
-        fill = '#E1E5EA';
-        color = '#B4B9D6';
-        stroke = '#B4B9D6';
-      }
-      break;
-    case UsageInMacromolecule.BondPreview:
-      if (attachmentPointSelected) {
-        fill = '#CDF1FC';
-      } else if (attachmentPointUsed) {
-        fill = '#E1E5EA';
-        color = '#B4B9D6';
-      }
-      stroke = 'none';
-      break;
-    default:
-      break;
-  }
-
-  return { color, fill, stroke };
-}
-
 function buildLabel(
   atom: ReAtom,
   paper: any,
@@ -871,7 +821,7 @@ function buildLabel(
   const isMonomerAttachmentPointUsed =
     connectedMonomerAttachmentPoints?.includes(label.text);
 
-  const { color, fill, stroke } = useLabelStyles(
+  const { color, fill, stroke } = util.useLabelStyles(
     isMonomerAttachmentPointSelected,
     isMonomerAttachmentPointUsed,
     usageInMacromolecule,

diff --git a/packages/ketcher-core/src/application/render/util.ts b/packages/ketcher-core/src/application/render/util.ts
@@ -19,7 +19,11 @@ import { Atom, Bond, Box2Abs, HalfBond, Vec2 } from 'domain/entities';
 import assert from 'assert';
 import { ReStruct, LayerMap } from './restruct';
 import Visel from './restruct/visel';
-import { RelativeBox, RenderOptions, UsageInMacromolecule } from "./render.types";
+import {
+  RelativeBox,
+  RenderOptions,
+  UsageInMacromolecule,
+} from './render.types';
 
 function relBox(box: RaphaelAxisAlignedBoundingBox): RelativeBox {
   return {

diff --git a/packages/ketcher-core/src/domain/AttachmentPoint.ts b/packages/ketcher-core/src/domain/AttachmentPoint.ts
@@ -403,6 +403,7 @@ export class AttachmentPoint {
       AttachmentPoint.labelSize,
       this.isUsed,
     );
+
     return [pointOnBorder, pointOfAttachment, labelPoint];
   }
 

diff --git a/packages/ketcher-core/src/domain/types/monomers.ts b/packages/ketcher-core/src/domain/types/monomers.ts
@@ -16,7 +16,7 @@ import {
   KetMonomerClass,
 } from 'application/formatters/types/ket';
 import { D3SvgElementSelection } from 'application/render/types';
-import { UsageInMacromolecule } from "application/render";
+import { UsageInMacromolecule } from 'application/render';
 
 export type MonomerColorScheme = {
   regular: string;

diff --git a/...src/components/shared/ConnectionOverview/components/MonomerMiniature/MonomerMiniature.tsx b/...src/components/shared/ConnectionOverview/components/MonomerMiniature/MonomerMiniature.tsx
@@ -41,7 +41,8 @@ const MonomerMiniature = ({
           positionInAngstrom,
         );
         const renderer = new AmbiguousMonomerRenderer(variantMonomer);
-        renderer.showExternal(svgElement, {
+        renderer.showExternal({
+          canvas: svgElement,
           usage,
           selectedAttachmentPoint,
           connectedAttachmentPoints,