From d53a09f5b997090593df6602e0f7c571a0249a53 Mon Sep 17 00:00:00 2001 From: KonstantinEpam23 <101649391+KonstantinEpam23@users.noreply.github.com> Date: Thu, 1 Dec 2022 21:52:19 +0100 Subject: [PATCH] #1826 dont select tools on hover (#1877) * #1826: do not select a hotkey tool if we are hovering over an atom * #1826: do not select a hotkey tool if we are hovering over an atom / eslint * #1826: do not select a hotkey tool if we are hovering over an atom / let -> const * #1826: do not select a hotkey tool if we are hovering over an atom / fix types for hotkeys.js * #1826: do not select a hotkey tool if we are hovering over an atom / fix import error Co-authored-by: Konstantin Levin --- .../src/script/ui/state/hotkeys.ts | 40 ++++++++++++++++--- 1 file changed, 34 insertions(+), 6 deletions(-) diff --git a/packages/ketcher-react/src/script/ui/state/hotkeys.ts b/packages/ketcher-react/src/script/ui/state/hotkeys.ts index 9776897246..455b8ad551 100644 --- a/packages/ketcher-react/src/script/ui/state/hotkeys.ts +++ b/packages/ketcher-react/src/script/ui/state/hotkeys.ts @@ -20,7 +20,9 @@ import { KetSerializer, MolSerializer, formatProperties, - ChemicalMimeType + ChemicalMimeType, + fromAtomsAttrs, + ReAtom } from 'ketcher-core' import { debounce, isEqual } from 'lodash/fp' import { load, onAction } from './shared' @@ -43,14 +45,15 @@ export function initKeydownListener(element) { function keyHandle(dispatch, state, hotKeys, event) { if (state.modal) return - const editor = state.editor + const { editor } = state + const { render } = editor const actionState = state.actionState const actionTool = actionState.activeTool const key = keyNorm(event) const atomsSelected = editor.selection() && editor.selection().atoms - let group + let group: any = null if (key && key.length === 1 && atomsSelected && key.match(/\w/)) { openDialog(dispatch, 'labelEdit', { letter: key }) @@ -61,7 +64,8 @@ function keyHandle(dispatch, state, hotKeys, event) { event.preventDefault() } else if ((group = keyNorm.lookup(hotKeys, event)) !== undefined) { let index = checkGroupOnTool(group, actionTool) // index currentTool in group || -1 - index = (index + 1) % group.length + const groupLength = group !== null ? group.length : 1 + index = (index + 1) % groupLength const actName = group[index] if (actionState[actName] && actionState[actName].disabled === true) { @@ -70,7 +74,24 @@ function keyHandle(dispatch, state, hotKeys, event) { } if (clipArea.actions.indexOf(actName) === -1) { const newAction = actions[actName].action - dispatch(onAction(newAction)) + const hoverItemId = getHoveredAtomId(render.ctab.atoms) + const isHoveringOverAtom = hoverItemId !== null + if (isHoveringOverAtom) { + // check if atom is currently hovered over + // in this case we do not want to activate the corresponding tool + // and just insert the atom directly + const atomProps = { ...newAction.opts } + const updatedAtoms = fromAtomsAttrs( + render.ctab, + hoverItemId, + atomProps, + true + ) + editor.update(updatedAtoms) + } else { + dispatch(onAction(newAction)) + } + event.preventDefault() } else if (isIE) { clipArea.exec(event) @@ -78,6 +99,13 @@ function keyHandle(dispatch, state, hotKeys, event) { } } +function getHoveredAtomId(atoms: Map): number | null { + for (const [id, atom] of atoms.entries()) { + if (atom.hover) return id + } + return null +} + function setHotKey(key, actName, hotKeys) { if (Array.isArray(hotKeys[key])) hotKeys[key].push(actName) else hotKeys[key] = [actName] @@ -116,7 +144,7 @@ function checkGroupOnTool(group, actionTool) { const rxnTextPlain = /\$RXN\n+\s+0\s+0\s+0\n*/ /* ClipArea */ -export function initClipboard(dispatch, _getState) { +export function initClipboard(dispatch) { const formats = Object.keys(formatProperties).map( (format) => formatProperties[format].mime )