#2679 - Highlight colors for Simple Objects do not match the new design

ketcher-autotests/tests/Structure-Creating-&-Editing/Actions-With-Structures/Selection-Hover/simple-object-selection-and-hover.spec.ts

@@ -0,0 +1,45 @@
+import { Page, test } from '@playwright/test';
+import {
+  LeftPanelButton,
+  clickInTheMiddleOfTheScreen,
+  dragMouseTo,
+  getCoordinatesOfTheMiddleOfTheScreen,
+  selectLeftPanelButton,
+  takeEditorScreenshot,
+} from '@utils';
+
+test.describe('Selection and hover for simple objects', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('');
+  });
+  test.afterEach(async ({ page }) => {
+    await takeEditorScreenshot(page);
+  });
+
+  const ellipseWidth = 120;
+  const ellipseHeight = 100;
+
+  const setupEllipse = async (page: Page) => {
+    await selectLeftPanelButton(LeftPanelButton.ShapeEllipse, page);
+    const { x, y } = await getCoordinatesOfTheMiddleOfTheScreen(page);
+    const ellipseCoordinates = { x: x + ellipseWidth, y: y + ellipseHeight };
+    await clickInTheMiddleOfTheScreen(page);
+    await dragMouseTo(ellipseCoordinates.x, ellipseCoordinates.y, page);
+    return ellipseCoordinates;
+  };
+
+  test('Selection highlight appears immediately for simple objects', async ({
+    page,
+  }) => {
+    await setupEllipse(page);
+    await clickInTheMiddleOfTheScreen(page);
+  });
+
+  test('Hover highlight appears immediately for simple objects', async ({
+    page,
+  }) => {
+    const ellipseCoordinates = await setupEllipse(page);
+    await clickInTheMiddleOfTheScreen(page);
+    await page.mouse.move(ellipseCoordinates.x, ellipseCoordinates.y);
+  });
+});

packages/ketcher-core/__tests__/application/render/restruct/reobject.test.ts

@@ -0,0 +1,37 @@
+import ReObject from 'application/render/restruct/reobject';
+
+it('should change selection style correctly for simple objects when selected', () => {
+  const reObject = new ReObject('simpleObject');
+  reObject.selected = true;
+  const options = {
+    hoverStyle: {
+      stroke: '#0097A8',
+      fill: '#CCFFDD',
+      'stroke-width': 20,
+    },
+  };
+  reObject.hovering = {
+    attr: jest.fn((style) =>
+      expect(style.fill).not.toEqual(options.hoverStyle.fill),
+    ),
+  };
+
+  reObject.changeSelectionStyle(options);
+});
+
+it('should change selection style correctly for other objects when selected', () => {
+  const reObject = new ReObject('frag');
+  reObject.selected = true;
+  const options = {
+    hoverStyle: {
+      fill: '#CCFFDD',
+    },
+  };
+  reObject.hovering = {
+    attr: jest.fn((style) =>
+      expect(style.fill).toEqual(options.hoverStyle.fill),
+    ),
+  };
+
+  reObject.changeSelectionStyle(options);
+});

packages/ketcher-core/__tests__/application/render/restruct/resimpleObject.test.ts

@@ -0,0 +1,71 @@
+import { ReStruct, Render } from 'application/render';
+import { RenderOptions } from 'application/render/render.types';
+import ReSimpleObject from 'application/render/restruct/resimpleObject';
+import { SimpleObjectMode, Struct, Vec2 } from 'domain/entities';
+
+const ellipse = {
+  mode: SimpleObjectMode.ellipse,
+  pos: [
+    new Vec2({
+      x: 5.025,
+      y: 9.600000000000001,
+      z: 0,
+    }),
+    new Vec2({
+      x: 10.05,
+      y: 12.200000000000001,
+      z: 0,
+    }),
+  ],
+};
+const rectangle = {
+  mode: SimpleObjectMode.ellipse,
+  pos: [
+    new Vec2({
+      x: 7.2250000000000005,
+      y: 10.3,
+      z: 0,
+    }),
+    new Vec2({
+      x: 11.100000000000001,
+      y: 12.825000000000001,
+      z: 0,
+    }),
+  ],
+};
+const line = {
+  mode: SimpleObjectMode.ellipse,
+  pos: [
+    new Vec2({
+      x: 7.7,
+      y: 9.125,
+      z: 0,
+    }),
+    new Vec2({
+      x: 11.3,
+      y: 12.4,
+      z: 0,
+    }),
+  ],
+};
+it('should get hover path and style for simple objects correctly', () => {
+  [ellipse, rectangle, line].forEach((simpleObject) => {
+    const reSimpleObject = new ReSimpleObject(simpleObject);
+    const option = { scale: 20, width: 100, height: 100 } as RenderOptions;
+    const render = new Render(document as unknown as HTMLElement, option);
+    const paths = reSimpleObject.hoverPath(render);
+    expect(
+      paths.filter((path) => path.path.attrs.fill === '#fff')?.length,
+    ).toBeGreaterThanOrEqual(1);
+  });
+});
+
+it('should get selection plate for simple objects correctly with selection points in a separated set', () => {
+  const reSimpleObject = new ReSimpleObject(ellipse);
+  const initialPathLength = reSimpleObject.visel.paths.length;
+  const option = { scale: 20, width: 100, height: 100 } as RenderOptions;
+  const render = new Render(document as unknown as HTMLElement, option);
+  const restruct = new ReStruct(new Struct(), render);
+  reSimpleObject.makeSelectionPlate(restruct, render.paper, render.options);
+  expect(initialPathLength + 1).toEqual(reSimpleObject.visel.paths.length);
+});

packages/ketcher-core/__tests__/application/render/restruct/restruct.test.ts

@@ -0,0 +1,34 @@
+import { ReSimpleObject, ReStruct, Render } from 'application/render';
+import { RenderOptions } from 'application/render/render.types';
+import { SimpleObjectMode, Struct, Vec2 } from 'domain/entities';
+
+describe('show selection', () => {
+  const ellipse = {
+    mode: SimpleObjectMode.ellipse,
+    pos: [
+      new Vec2({
+        x: 5.025,
+        y: 9.600000000000001,
+        z: 0,
+      }),
+      new Vec2({
+        x: 10.05,
+        y: 12.200000000000001,
+        z: 0,
+      }),
+    ],
+  };
+  const reSimpleObject = new ReSimpleObject(ellipse);
+  reSimpleObject.togglePoints = jest.fn();
+  const option = { scale: 20, width: 100, height: 100 } as RenderOptions;
+  const render = new Render(document as unknown as HTMLElement, option);
+  const restruct = new ReStruct(new Struct(), render);
+  it('should show selection simple objects correctly when selected', () => {
+    restruct.showItemSelection(reSimpleObject, true);
+    expect(reSimpleObject.togglePoints).toHaveBeenCalled();
+  });
+  it('should show selection simple objects correctly when unselected', () => {
+    restruct.showItemSelection(reSimpleObject, false);
+    expect(reSimpleObject.togglePoints).toHaveBeenCalled();
+  });
+});

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

@@ -94,8 +94,7 @@ function defaultOptions(options: RenderOptions): RenderOptions {
     },
     hoverStyle: {
       stroke: '#0097A8',
-      fill: 'transparent',
-      fillSelected: '#CCFFDD',
+      fill: '#CCFFDD',
       'stroke-width': (0.6 * scaleFactor) / 20,
     },
     sgroupBracketStyle: {
@@ -106,11 +105,10 @@ function defaultOptions(options: RenderOptions): RenderOptions {
       stroke: 'gray',
       'stroke-width': '1px',
     },
-    hoverStyleSimpleObject: {
+    selectionStyleSimpleObject: {
       stroke: '#57FF8F',
       'stroke-width': scaleFactor / 4,
       'stroke-linecap': 'round',
-      'stroke-opacity': 0.6,
     },
     atomSelectionPlateRadius: labelFontSize,
     contractedFunctionalGroupSize: 50,

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

@@ -58,6 +58,7 @@ export type RenderOptions = {
   hoverStyle: RenderOptionStyles;
   sgroupBracketStyle: RenderOptionStyles;
   lassoStyle: RenderOptionStyles;
+  selectionStyleSimpleObject: RenderOptionStyles;
   hoverStyleSimpleObject: RenderOptionStyles;
   atomSelectionPlateRadius: number;
   contractedFunctionalGroupSize: number;

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

@@ -33,10 +33,16 @@ class ReObject {
 
   changeSelectionStyle(options: any) {
     const { hoverStyle } = options;
-    this.hovering?.attr({
-      fill: this.selected ? hoverStyle.fillSelected : hoverStyle.fill,
-      'fill-opacity': this.selected ? 1 : 0,
-    });
+    if (this.visel.type === 'simpleObject') {
+      this.hovering?.attr({
+        'fill-opacity': this.selected ? 1 : 0,
+      });
+    } else {
+      this.hovering?.attr({
+        fill: hoverStyle.fill,
+        'fill-opacity': this.selected ? 1 : 0,
+      });
+    }
   }
 
   getVBoxObj(render: Render): Box2Abs | null {