From 069ed54125af6d43ea90072db2a5b174c833517c Mon Sep 17 00:00:00 2001
From: Stanislav Permiakov <Stanislav.Permiakov@primark.onmicrosoft.com>
Date: Fri, 20 Jan 2023 13:44:32 +0300
Subject: [PATCH] #2112 - The hand tool is still following the cursor when
 moving outside the canvas

---
 packages/ketcher-react/src/script/editor/Editor.ts | 14 ++++++++++++--
 .../ketcher-react/src/script/editor/tool/hand.ts   |  2 +-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/ketcher-react/src/script/editor/Editor.ts b/packages/ketcher-react/src/script/editor/Editor.ts
index 680c4f1416..7593ff77ce 100644
--- 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
index 415b83d3d9..8c88276b18 100644
--- 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' })