Merge pull request #2118 from epam/#2112-the-hand-tool-is-still-follo…

…wing-the-cursor-when-moving-outside-the-canvas #2112: The hand tool is still following the cursor when moving outside the canvas
epam · Jan 25, 2023 · 5664d59 · 5664d59
2 parents 2fc8c1d + 069ed54
commit 5664d59
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/packages/ketcher-react/src/script/editor/Editor.ts b/packages/ketcher-react/src/script/editor/Editor.ts
@@ -654,8 +654,13 @@ function domEventSetup(editor: Editor, clientArea: HTMLElement) {
     { target: document, eventName: 'mousemove' },
     { target: document, eventName: 'mouseup' },
     { target: document, eventName: 'mouseleave' },
+    {
+      target: clientArea,
+      eventName: 'mouseleave',
+      toolEventName: 'mouseLeaveClientArea'
+    },
     { target: clientArea, eventName: 'mouseover' }
-  ].forEach(({ target, eventName }) => {
+  ].forEach(({ target, eventName, toolEventName }) => {
     editor.event[eventName] = new DOMSubscription()
     const subs = editor.event[eventName]
 
@@ -676,7 +681,12 @@ function domEventSetup(editor: Editor, clientArea: HTMLElement) {
         }
       }
 
-      const isToolUsed = useToolIfNeeded(editor, eventName, clientArea, event)
+      const isToolUsed = useToolIfNeeded(
+        editor,
+        toolEventName || eventName,
+        clientArea,
+        event
+      )
       if (isToolUsed) {
         return true
       }

diff --git a/packages/ketcher-react/src/script/editor/tool/hand.ts b/packages/ketcher-react/src/script/editor/tool/hand.ts
@@ -69,7 +69,7 @@ class HandTool {
     this.editor.event.cursor.dispatch({ status: 'mouseover' })
   }
 
-  mouseleave() {
+  mouseLeaveClientArea() {
     this.begPos = null
     this.endPos = null
     this.editor.event.cursor.dispatch({ status: 'leave' })