#2060: Don't break the selection if the user's cursor goes beyond the…

… canvas (#2071) * #2060 — Don't break the selection if the user's cursor goes beyond the canvas * #2060 - fix redundant actions on mouse events when not over canvas Co-authored-by: Stanislav Permiakov <[email protected]>
epam · Jan 10, 2023 · 248f71d · 248f71d
1 parent 00fd694
commit 248f71d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/packages/ketcher-react/src/script/editor/Editor.ts b/packages/ketcher-react/src/script/editor/Editor.ts
@@ -598,7 +598,7 @@ function isMouseRight(event) {
 }
 
 function resetSelectionOnCanvasClick(editor: Editor, eventName: string) {
-  if (eventName === 'mouseup') {
+  if (eventName === 'mouseup' && editor.selection()) {
     editor.selection(null)
   }
 }
@@ -616,17 +616,18 @@ function updateLastCursorPosition(editor: Editor, event) {
 function domEventSetup(editor: Editor, clientArea) {
   // TODO: addEventListener('resize', ...);
   ;[
-    'click',
-    'dblclick',
-    'mousedown',
-    'mousemove',
-    'mouseup',
-    'mouseleave',
-    'mouseover'
-  ].forEach((eventName) => {
+    { target: clientArea, eventName: 'click' },
+    { target: clientArea, eventName: 'dblclick' },
+    { target: clientArea, eventName: 'mousedown' },
+    { target: document, eventName: 'mousemove' },
+    { target: document, eventName: 'mouseup' },
+    { target: document, eventName: 'mouseleave' },
+    { target: clientArea, eventName: 'mouseover' }
+  ].forEach(({ target, eventName }) => {
     editor.event[eventName] = new DOMSubscription()
     const subs = editor.event[eventName]
-    clientArea.addEventListener(eventName, subs.dispatch.bind(subs))
+
+    target.addEventListener(eventName, subs.dispatch.bind(subs))
 
     subs.add((event) => {
       updateLastCursorPosition(editor, event)
@@ -644,7 +645,11 @@ function domEventSetup(editor: Editor, clientArea) {
       }
       const EditorTool = editor.tool()
       editor.lastEvent = event
-      if (EditorTool && eventName in EditorTool) {
+      if (
+        EditorTool &&
+        eventName in EditorTool &&
+        clientArea.contains(event.target)
+      ) {
         EditorTool[eventName](event)
         return true
       }

diff --git a/packages/ketcher-react/src/script/editor/tool/select.ts b/packages/ketcher-react/src/script/editor/tool/select.ts
@@ -407,7 +407,11 @@ class SelectTool {
       // TODO it catches more events than needed, to be re-factored
       this.selectElementsOnCanvas(newSelected, editor, event)
     } else if (this.#lassoHelper.fragment) {
-      if (!event.shiftKey) editor.selection(null)
+      if (
+        !event.shiftKey &&
+        this.editor.render.clientArea.contains(event.target)
+      )
+        editor.selection(null)
     }
     editor.event.message.dispatch({
       info: false