Backmerge: #4297 - Macro: When removing nucleotides from the canvas, …

…the preview of the nucleotide does not disappear, if you leave the cursor over it (#4312)

- added removing preview on mousemove and keypress
- added getting canvas and canvasWrapper from ZoomTool to find it in DOM once instead of on each renderer creation
- added async rendering after each keypress event handled in sequence edit mode

---------

Co-authored-by: Roman Rodionov <roman_rodionov@epam.com>

packages/ketcher-core/package.json

@@ -37,6 +37,7 @@
     "test:eslint:fix": "npm run test:eslint -- --fix",
     "test:types": "tsc --noEmit",
     "test:unit": "jest",
+    "test:unit:update": "jest -u",
     "test:prettier": "prettier --check \"./**/*.{js,ts,json}\"",
     "prettier:write": "prettier --write \"./**/*.{js,ts,json}\"",
     "typedoc": "typedoc"

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

@@ -126,8 +126,8 @@ export class CoreEditor {
 
   private setupKeyboardEvents() {
     this.setupHotKeysEvents();
-    document.addEventListener('keydown', (event: KeyboardEvent) => {
-      this.mode.onKeyDown(event);
+    document.addEventListener('keydown', async (event: KeyboardEvent) => {
+      await this.mode.onKeyDown(event);
     });
   }
 

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

@@ -34,6 +34,7 @@ export function resetEditorEvents() {
     editSequence: new Subscription(),
     startNewSequence: new Subscription(),
     mouseOverSequenceItem: new Subscription(),
+    mouseOnMoveSequenceItem: new Subscription(),
     mouseLeaveSequenceItem: new Subscription(),
     changeSequenceTypeEnterMode: new Subscription(),
     toggleSequenceEditMode: new Subscription(),
@@ -58,6 +59,7 @@ export const renderersEvents: ToolEventHandlerName[] = [
   'editSequence',
   'startNewSequence',
   'mouseOverSequenceItem',
+  'mouseOnMoveSequenceItem',
   'mouseLeaveSequenceItem',
   'changeSequenceTypeEnterMode',
   'toggleSequenceEditMode',

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

@@ -107,16 +107,22 @@ export class SequenceMode extends BaseMode {
     editor.events.toggleSequenceEditMode.dispatch(false);
   }
 
-  public onKeyDown(event: KeyboardEvent) {
+  public async onKeyDown(event: KeyboardEvent) {
     if (!this.isEditMode) {
       return;
     }
-    const hotKeys = initHotKeys(this.keyboardEventHandlers);
-    const shortcutKey = keyNorm.lookup(hotKeys, event);
 
-    this.keyboardEventHandlers[shortcutKey]?.handler(event);
+    await new Promise<void>((resolve) => {
+      setTimeout(() => {
+        const hotKeys = initHotKeys(this.keyboardEventHandlers);
+        const shortcutKey = keyNorm.lookup(hotKeys, event);
+        const editor = CoreEditor.provideEditorInstance();
 
-    return true;
+        this.keyboardEventHandlers[shortcutKey]?.handler(event);
+        editor.events.mouseLeaveSequenceItem.dispatch();
+        resolve();
+      }, 0);
+    });
   }
 
   public startNewSequence() {

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

@@ -51,6 +51,8 @@ interface ToolEventHandler {
 
   mouseOverSequenceItem?(event: Event): void;
 
+  mouseOnMoveSequenceItem?(event: Event): void;
+
   mouseLeaveSequenceItem?(event: Event): void;
 
   changeSequenceTypeEnterMode?(event: Event): void;

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

@@ -36,8 +36,8 @@ const AUTO_SCROLL_OFFSET_X = 10;
 const AUTO_SCROLL_OFFSET_Y = 10;
 
 class ZoomTool implements BaseTool {
-  private canvas: D3SvgElementSelection<SVGSVGElement, void>;
-  private canvasWrapper: D3SvgElementSelection<SVGSVGElement, void>;
+  public canvas: D3SvgElementSelection<SVGSVGElement, void>;
+  public canvasWrapper: D3SvgElementSelection<SVGSVGElement, void>;
   private zoom!: ZoomBehavior<SVGSVGElement, void> | null;
   private zoomLevel: number;
   private zoomTransform: ZoomTransform;

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

@@ -1,7 +1,8 @@
-import { select } from 'd3';
 import { DrawingEntity } from 'domain/entities/DrawingEntity';
 import { D3SvgElementSelection } from 'application/render/types';
 import { provideEditorSettings } from 'application/editor/editorSettings';
+import ZoomTool from 'application/editor/tools/Zoom';
+import { select } from 'd3';
 import {
   canvasSelector,
   drawnStructuresSelector,
@@ -31,8 +32,9 @@ export abstract class BaseRenderer implements IBaseRenderer {
 
   protected canvas: D3SvgElementSelection<SVGSVGElement, void>;
   protected constructor(public drawingEntity: DrawingEntity) {
-    this.canvasWrapper = select(canvasSelector);
-    this.canvas = select(drawnStructuresSelector);
+    this.canvasWrapper =
+      ZoomTool.instance?.canvasWrapper || select(canvasSelector);
+    this.canvas = ZoomTool.instance?.canvas || select(drawnStructuresSelector);
   }
 
   protected get editorSettings() {

packages/ketcher-core/src/application/render/renderers/sequence/BaseSequenceItemRenderer.ts

@@ -291,6 +291,9 @@ export abstract class BaseSequenceItemRenderer extends BaseSequenceRenderer {
     this.textElement.on('mouseover', (event) => {
       this.editorEvents.mouseOverSequenceItem.dispatch(event);
     });
+    this.textElement.on('mousemove', (event) => {
+      this.editorEvents.mouseOnMoveSequenceItem.dispatch(event);
+    });
     this.textElement.on('mouseleave', (event) => {
       this.editorEvents.mouseLeaveSequenceItem.dispatch(event);
     });

packages/ketcher-macromolecules/src/Editor.tsx

@@ -296,10 +296,13 @@ function Editor({ theme, togglerComponent }: EditorProps) {
       }
     };
     editor?.events.mouseOnMoveMonomer.add(onMoveHandler);
+    editor?.events.mouseOnMoveSequenceItem.add(onMoveHandler);
+
     return () => {
       editor?.events.mouseOverMonomer.remove(handleOpenPreview);
       editor?.events.mouseLeaveMonomer.remove(handleClosePreview);
       editor?.events.mouseOnMoveMonomer.remove(onMoveHandler);
+      editor?.events.mouseOnMoveSequenceItem.remove(onMoveHandler);
       editor?.events.mouseOverSequenceItem.remove(handleOpenPreview);
       editor?.events.mouseLeaveSequenceItem.remove(handleClosePreview);
     };