From 24e78e22675d11425007c41193f79b36a89a4ee0 Mon Sep 17 00:00:00 2001 From: Stanislav Permiakov Date: Mon, 9 Jan 2023 13:14:59 +0300 Subject: [PATCH 1/2] =?UTF-8?q?#2060=20=E2=80=94=20Don't=20break=20the=20s?= =?UTF-8?q?election=20if=20the=20user's=20cursor=20goes=20beyond=20the=20c?= =?UTF-8?q?anvas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ketcher-react/src/script/editor/Editor.ts | 19 ++++++++++--------- .../src/script/editor/tool/select.ts | 6 +++++- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/packages/ketcher-react/src/script/editor/Editor.ts b/packages/ketcher-react/src/script/editor/Editor.ts index d99d5f5652..d98475f7f1 100644 --- a/packages/ketcher-react/src/script/editor/Editor.ts +++ b/packages/ketcher-react/src/script/editor/Editor.ts @@ -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) diff --git a/packages/ketcher-react/src/script/editor/tool/select.ts b/packages/ketcher-react/src/script/editor/tool/select.ts index acebb0b07b..333198a767 100644 --- 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 From 838bf089a5d126f980f31b8d13c8a2b20e775d4a Mon Sep 17 00:00:00 2001 From: Stanislav Permiakov Date: Tue, 10 Jan 2023 11:06:06 +0300 Subject: [PATCH 2/2] #2060 - fix redundant actions on mouse events when not over canvas --- packages/ketcher-react/src/script/editor/Editor.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/ketcher-react/src/script/editor/Editor.ts b/packages/ketcher-react/src/script/editor/Editor.ts index d98475f7f1..c8a6c5dfd6 100644 --- 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) } } @@ -645,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 }