#2849 – When zoom out or zoom in, atoms and templates are located not…

… under the mouse cursor (#3182)
epam · Aug 25, 2023 · 4a37ded · 4a37ded
1 parent 893e9e6
commit 4a37ded
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/packages/ketcher-react/src/script/editor/Editor.ts b/packages/ketcher-react/src/script/editor/Editor.ts
@@ -711,8 +711,8 @@ function updateLastCursorPosition(editor: Editor, event) {
       editor.render.clientArea.getBoundingClientRect();
 
     editor.lastCursorPosition = {
-      x: event.pageX - clientAreaBoundingBox.x,
-      y: event.pageY - clientAreaBoundingBox.y,
+      x: event.clientX - clientAreaBoundingBox.x,
+      y: event.clientY - clientAreaBoundingBox.y,
     };
   }
 }

diff --git a/packages/ketcher-react/src/script/editor/HoverIcon.ts b/packages/ketcher-react/src/script/editor/HoverIcon.ts
@@ -1,4 +1,4 @@
-import type { ElementLabel, AtomColor } from 'ketcher-core';
+import { type ElementLabel, type AtomColor, Vec2 } from 'ketcher-core';
 import Editor from './Editor';
 
 const HOVER_ICON_OPACITY = 0.7;
@@ -76,8 +76,16 @@ export class HoverIcon {
   }
 
   updatePosition() {
+    const render = this.editor.render;
     const { x, y } = this.editor.lastCursorPosition;
-    this.element.attr({ x, y });
+    const currentPosition = new Vec2(x, y);
+    const scrollPosition = render.scrollPos();
+    const zoom = render.options.zoom;
+    const newPosition = currentPosition.add(scrollPosition).scaled(1 / zoom);
+    this.element.attr({
+      x: newPosition.x,
+      y: newPosition.y,
+    });
   }
 
   show() {