#5605 - The attachment points arent colored (#5878)

* #5605 - The attachment points aren't colored

* update screenshots

* update test and screenshot

ketcher-autotests/tests/Macromolecule-editor/Macro-Micro-Switcher/macro-micro-switcher.spec.ts

@@ -1052,10 +1052,11 @@ test.describe('Macro-Micro-Switcher', () => {
     await takeEditorScreenshot(page);
   });
 
-  test('Check that in context menu for AP - only Delete avaliable', async () => {
+  test('Check that in context menu for AP - only Delete and Highlight avaliable', async () => {
     /*
     Test case: Macro-Micro-Switcher/#4530
-    Description: In context menu for AP - only Delete avaliable.
+    update: add Highlight option - https://github.com/epam/ketcher/issues/5605
+    Description: In context menu for AP - only Delete and Highlight avaliable.
     */
     await openFileAndAddToCanvas(
       'KET/structure-with-two-attachment-points.ket',

packages/ketcher-core/src/application/editor/actions/highlight.ts

@@ -23,6 +23,7 @@ import { Action } from './action';
 type HighlightType = {
   atoms: number[];
   bonds: number[];
+  rgroupAttachmentPoints: number[];
   color: string;
 };
 
@@ -33,9 +34,9 @@ export function fromHighlightCreate(
   const action = new Action();
 
   highlights.forEach((highlight) => {
-    const { atoms, bonds, color } = highlight;
+    const { atoms, bonds, rgroupAttachmentPoints, color } = highlight;
 
-    action.addOp(new HighlightAdd(atoms, bonds, color));
+    action.addOp(new HighlightAdd(atoms, bonds, rgroupAttachmentPoints, color));
   });
   return action.perform(restruct);
 }

packages/ketcher-core/src/application/editor/operations/highlight.ts

@@ -24,6 +24,7 @@ import { OperationType } from './OperationType';
 type Data = {
   atoms: Array<number>;
   bonds: Array<number>;
+  rgroupAttachmentPoints: Array<number>;
   color: string;
   highlightId?: number;
 };
@@ -34,20 +35,22 @@ export class HighlightAdd extends BaseOperation {
   constructor(
     atoms: Array<number>,
     bonds: Array<number>,
+    rgroupAttachmentPoints: Array<number>,
     color: string,
     highlightId?: number,
   ) {
     super(OperationType.ADD_HIGHLIGHT);
     this.data = {
       atoms,
       bonds,
+      rgroupAttachmentPoints,
       color,
       highlightId,
     };
   }
 
   execute(restruct: ReStruct) {
-    const { atoms, bonds, color } = this.data;
+    const { atoms, bonds, rgroupAttachmentPoints, color } = this.data;
 
     if (!color) {
       return;
@@ -57,6 +60,7 @@ export class HighlightAdd extends BaseOperation {
     const highlight = new Highlight({
       atoms,
       bonds,
+      rgroupAttachmentPoints,
       color,
     });
 
@@ -66,12 +70,19 @@ export class HighlightAdd extends BaseOperation {
       struct.highlights.set(this.data.highlightId, highlight);
     }
 
-    notifyChanged(restruct, atoms, bonds);
+    notifyChanged(restruct, atoms, bonds, rgroupAttachmentPoints);
   }
 
   invert() {
-    const { atoms, bonds, color, highlightId } = this.data;
-    const inverted = new HighlightDelete(highlightId, atoms, bonds, color);
+    const { atoms, bonds, rgroupAttachmentPoints, color, highlightId } =
+      this.data;
+    const inverted = new HighlightDelete(
+      highlightId,
+      atoms,
+      bonds,
+      rgroupAttachmentPoints,
+      color,
+    );
     return inverted;
   }
 }
@@ -83,13 +94,15 @@ export class HighlightDelete extends BaseOperation {
     highlightId?: number,
     atoms?: Array<number>,
     bonds?: Array<number>,
+    rgroupAttachmentPoints?: Array<number>,
     color?: string,
   ) {
     super(OperationType.REMOVE_HIGHLIGHT, 5);
     this.data = {
       highlightId,
       atoms: atoms || [],
       bonds: bonds || [],
+      rgroupAttachmentPoints: rgroupAttachmentPoints || [],
       color: color || 'white',
     };
   }
@@ -115,8 +128,15 @@ export class HighlightDelete extends BaseOperation {
   }
 
   invert() {
-    const { atoms, bonds, color, highlightId } = this.data;
-    const inverted = new HighlightAdd(atoms, bonds, color, highlightId);
+    const { atoms, bonds, rgroupAttachmentPoints, color, highlightId } =
+      this.data;
+    const inverted = new HighlightAdd(
+      atoms,
+      bonds,
+      rgroupAttachmentPoints,
+      color,
+      highlightId,
+    );
     inverted.data = this.data;
     return inverted;
   }
@@ -131,12 +151,14 @@ export class HighlightUpdate extends BaseOperation {
     highlightId: number,
     atoms: Array<number>,
     bonds: Array<number>,
+    rgroupAttachmentPoints: Array<number>,
     color: string,
   ) {
     super(OperationType.UPDATE_HIGHLIGHT);
     this.newData = {
       atoms,
       bonds,
+      rgroupAttachmentPoints,
       color,
       highlightId,
     };
@@ -145,13 +167,14 @@ export class HighlightUpdate extends BaseOperation {
     this.oldData = {
       atoms,
       bonds,
+      rgroupAttachmentPoints,
       color,
       highlightId,
     };
   }
 
   execute(restruct: ReStruct) {
-    const { atoms, bonds, color } = this.newData;
+    const { atoms, bonds, rgroupAttachmentPoints, color } = this.newData;
     if (!color) {
       return;
     }
@@ -166,11 +189,13 @@ export class HighlightUpdate extends BaseOperation {
       const {
         atoms: oldAtoms,
         bonds: oldBonds,
+        rgroupAttachmentPoints: oldRgroupAttachmentPoints,
         color: oldColor,
       } = highlightToUpdate;
       this.oldData = {
         atoms: oldAtoms,
         bonds: oldBonds,
+        rgroupAttachmentPoints: oldRgroupAttachmentPoints,
         color: oldColor,
         highlightId,
       };
@@ -179,6 +204,7 @@ export class HighlightUpdate extends BaseOperation {
       const updatedHighlight = new Highlight({
         atoms,
         bonds,
+        rgroupAttachmentPoints,
         color,
       });
 
@@ -191,21 +217,28 @@ export class HighlightUpdate extends BaseOperation {
   }
 
   invert() {
-    const { atoms, bonds, color } = this.oldData;
+    const { atoms, bonds, rgroupAttachmentPoints, color } = this.oldData;
     const inverted = new HighlightUpdate(
       this.newData.highlightId,
       atoms,
       bonds,
+      rgroupAttachmentPoints,
       color,
     );
     return inverted;
   }
 }
 
-function notifyChanged(restruct: ReStruct, atoms?: number[], bonds?: number[]) {
+function notifyChanged(
+  restruct: ReStruct,
+  atoms?: number[],
+  bonds?: number[],
+  rgroupAttachmentPoints?: number[],
+) {
   // Notifying ReStruct that repaint needed
   const reAtoms = restruct.atoms;
   const reBonds = restruct.bonds;
+  const reRgroupAttachmentPoints = restruct.rgroupAttachmentPoints;
 
   if (atoms) {
     atoms.forEach((atomId) => {
@@ -222,4 +255,12 @@ function notifyChanged(restruct: ReStruct, atoms?: number[], bonds?: number[]) {
       }
     });
   }
+
+  if (rgroupAttachmentPoints) {
+    rgroupAttachmentPoints.forEach((rgroupAPid) => {
+      if (typeof reRgroupAttachmentPoints.get(rgroupAPid) !== 'undefined') {
+        restruct.markRgroupAttachmentPoint(rgroupAPid, 1);
+      }
+    });
+  }
 }

packages/ketcher-core/src/application/render/restruct/rergroupAttachmentPoint.ts

@@ -11,7 +11,7 @@ import { Scale } from 'domain/helpers';
 import { ReAtom, ReObject, ReStruct } from '.';
 import draw from '../draw';
 import { Render } from '../raphaelRender';
-import { RenderOptions } from '../render.types';
+import { RenderOptions, RenderOptionStyles } from '../render.types';
 import { LayerMap } from './generalEnumTypes';
 import Visel from './visel';
 
@@ -68,58 +68,64 @@ class ReRGroupAttachmentPoint extends ReObject {
     return true;
   }
 
-  getOutlinePoints() {
+  getOutlinePoints(isHighlight = false) {
+    const highlightPadding = isHighlight ? -0.1 : 0;
+    const curveOutlineWidth =
+      ReRGroupAttachmentPoint.CURVE_OUTLINE_WIDTH + highlightPadding;
+    const lineOutlineWidth =
+      ReRGroupAttachmentPoint.LINE_OUTLINE_WIDTH + highlightPadding;
+
     const topLeftPadPoint = this.outlineEndPoint.addScaled(
       this.normalizedCurveDirectionVector,
-      -ReRGroupAttachmentPoint.CURVE_OUTLINE_WIDTH / 2,
+      -curveOutlineWidth / 2,
     );
     const topLeftPoint = topLeftPadPoint.addScaled(
       this.normalizedCurveDirectionVector,
       ReRGroupAttachmentPoint.OUTLINE_PADDING,
     );
     const topRightPadPoint = this.outlineEndPoint.addScaled(
       this.normalizedCurveDirectionVector,
-      ReRGroupAttachmentPoint.CURVE_OUTLINE_WIDTH / 2,
+      curveOutlineWidth / 2,
     );
     const topRightPoint = topRightPadPoint.addScaled(
       this.normalizedCurveDirectionVector,
       -ReRGroupAttachmentPoint.OUTLINE_PADDING,
     );
     const middleMostLeftPadPoint = this.middlePoint.addScaled(
       this.normalizedCurveDirectionVector,
-      -ReRGroupAttachmentPoint.CURVE_OUTLINE_WIDTH / 2,
+      -curveOutlineWidth / 2,
     );
     const middleMostLeftPoint = middleMostLeftPadPoint.addScaled(
       this.normalizedCurveDirectionVector,
       ReRGroupAttachmentPoint.OUTLINE_PADDING,
     );
     const middleMostRightPadPoint = this.middlePoint.addScaled(
       this.normalizedCurveDirectionVector,
-      ReRGroupAttachmentPoint.CURVE_OUTLINE_WIDTH / 2,
+      curveOutlineWidth / 2,
     );
     const middleMostRightPoint = middleMostRightPadPoint.addScaled(
       this.normalizedCurveDirectionVector,
       -ReRGroupAttachmentPoint.OUTLINE_PADDING,
     );
     const middleLeftPoint = this.middlePoint.addScaled(
       this.normalizedCurveDirectionVector,
-      -ReRGroupAttachmentPoint.LINE_OUTLINE_WIDTH / 2,
+      -lineOutlineWidth / 2,
     );
     const middleRightPoint = this.middlePoint.addScaled(
       this.normalizedCurveDirectionVector,
-      ReRGroupAttachmentPoint.LINE_OUTLINE_WIDTH / 2,
+      lineOutlineWidth / 2,
     );
     const bottomLeftPadPoint = this.startPoint.addScaled(
       this.normalizedCurveDirectionVector,
-      -ReRGroupAttachmentPoint.LINE_OUTLINE_WIDTH / 2,
+      -lineOutlineWidth / 2,
     );
     const bottomLeftPoint = bottomLeftPadPoint.addScaled(
       this.normalizedLineDirectionVector,
       ReRGroupAttachmentPoint.OUTLINE_PADDING,
     );
     const bottomRightPadPoint = this.startPoint.addScaled(
       this.normalizedCurveDirectionVector,
-      ReRGroupAttachmentPoint.LINE_OUTLINE_WIDTH / 2,
+      lineOutlineWidth / 2,
     );
     const bottomRightPoint = bottomRightPadPoint.addScaled(
       this.normalizedLineDirectionVector,
@@ -148,7 +154,16 @@ class ReRGroupAttachmentPoint extends ReObject {
     return Vec2.dist(destination, this.middlePoint);
   }
 
-  show(restruct: ReStruct) {
+  private makeHighlightePlate = (
+    restruct: ReStruct,
+    style: RenderOptionStyles,
+  ) => {
+    const { paper, options } = restruct.render;
+    const hoverPlatePath = this.getHoverPlatePath(options, true);
+    return paper.path(hoverPlatePath).attr(options.selectionStyle).attr(style);
+  };
+
+  show(restruct: ReStruct, rgroupAttachmentPointId: number) {
     const directionVector = this.getAttachmentPointDirectionVector(
       restruct.molecule,
     );
@@ -179,10 +194,27 @@ class ReRGroupAttachmentPoint extends ReObject {
         this.visel,
       );
     }
+    const highlights = restruct.molecule.highlights;
+    let isHighlighted = false;
+    let highlightColor = '';
+    highlights.forEach((highlight) => {
+      const hasCurrentHighlight = highlight.rgroupAttachmentPoints?.includes(
+        rgroupAttachmentPointId,
+      );
+      isHighlighted = isHighlighted || hasCurrentHighlight;
+      if (hasCurrentHighlight) {
+        highlightColor = highlight.color;
+      }
+    });
+    if (isHighlighted) {
+      const style = { fill: highlightColor, stroke: 'none' };
+      const path = this.makeHighlightePlate(restruct, style);
+      restruct.addReObjectPath(LayerMap.hovering, this.visel, path);
+    }
   }
 
-  private getHoverPlatePath(options: RenderOptions) {
-    const outlinePoints = this.getOutlinePoints();
+  private getHoverPlatePath(options: RenderOptions, isHighlight = false) {
+    const outlinePoints = this.getOutlinePoints(isHighlight);
     const scaledOutlinePoints = outlinePoints.map((point) =>
       Scale.modelToCanvas(point, options),
     );

packages/ketcher-core/src/application/render/restruct/restruct.ts

@@ -335,6 +335,10 @@ class ReStruct {
     this.markItem('atoms', aid, mark);
   }
 
+  markRgroupAttachmentPoint(rgAPid: number, mark: number): void {
+    this.markItem('rgroupAttachmentPoints', rgAPid, mark);
+  }
+
   markItem(map: string, id: number, mark: number): void {
     const mapChanged = this[map + 'Changed'];
 
@@ -697,7 +701,7 @@ class ReStruct {
         return;
       }
 
-      rgroupAttachmentPoint?.show(this);
+      rgroupAttachmentPoint?.show(this, id);
     });
   }