#1886 Change shortcuts for atoms, bonds, zoom and functions (#2262)

* #1886-wip

* #1886 - added atom data saved & hotkey for bonds

* #1886 fix after review

* #1886 fix after review

packages/ketcher-react/src/script/ui/action/action.types.ts

@@ -20,6 +20,7 @@ type ToolVariant =
   | 'about'
   | 'analyse'
   | 'arom'
+  | 'atom-props'
   | 'bond-any'
   | 'bond-hydrogen'
   | 'bond-aromatic'
@@ -28,6 +29,7 @@ type ToolVariant =
   | 'bond-double'
   | 'bond-doublearomatic'
   | 'bond-down'
+  | 'bond-props'
   | 'bond-single'
   | 'bond-singlearomatic'
   | 'bond-singledouble'

packages/ketcher-react/src/script/ui/action/index.js

@@ -60,6 +60,16 @@ const config = {
     action: { dialog: 'save' },
     hidden: (options) => isHidden(options, 'save')
   },
+  'atom-props': {
+    title: 'Atom Properties',
+    action: { dialog: 'atomProps' },
+    hidden: (options) => isHidden(options, 'atom-props')
+  },
+  'bond-props': {
+    title: 'Bond Properties',
+    action: { dialog: 'bondProps' },
+    hidden: (options) => isHidden(options, 'bond-props')
+  },
   undo: {
     shortcut: 'Mod+z',
     title: 'Undo',

packages/ketcher-react/src/script/ui/action/server.js

@@ -37,6 +37,7 @@ const config = {
     hidden: (options) => isHidden(options, 'clean')
   },
   arom: {
+    shortcut: 'Alt+a',
     title: 'Aromatize',
     action: {
       thunk: serverTransform('aromatize')
@@ -45,6 +46,7 @@ const config = {
     hidden: (options) => isHidden(options, 'arom')
   },
   dearom: {
+    shortcut: 'Ctrl+Alt+a',
     title: 'Dearomatize',
     action: {
       thunk: serverTransform('dearomatize')
@@ -62,12 +64,14 @@ const config = {
     hidden: (options) => isHidden(options, 'cip')
   },
   check: {
+    shortcut: 'Alt+s',
     title: 'Check Structure',
     action: { dialog: 'check' },
     disabled: (editor, server, options) => !options.app.server,
     hidden: (options) => isHidden(options, 'check')
   },
   analyse: {
+    shortcut: 'Alt+c',
     title: 'Calculated Values',
     action: { dialog: 'analyse' },
     disabled: (editor, server, options) => !options.app.server,

packages/ketcher-react/src/script/ui/action/tools.js

@@ -68,13 +68,13 @@ const toolActions = {
     hidden: (options) => isHidden(options, 'enhanced-stereo')
   },
   'charge-plus': {
-    shortcut: '5',
+    shortcut: '+',
     title: 'Charge Plus',
     action: { tool: 'charge', opts: 1 },
     hidden: (options) => isHidden(options, 'charge-plus')
   },
   'charge-minus': {
-    shortcut: '5',
+    shortcut: '-',
     title: 'Charge Minus',
     action: { tool: 'charge', opts: -1 },
     hidden: (options) => isHidden(options, 'charge-minus')
@@ -305,6 +305,7 @@ const toolActions = {
     hidden: (options) => isHidden(options, 'shape-line')
   },
   text: {
+    shortcut: 'Alt+t',
     title: 'Add text',
     action: { tool: 'text' },
     hidden: (options) => isHidden(options, 'text')

packages/ketcher-react/src/script/ui/action/zoom.js

@@ -24,11 +24,13 @@ export const zoomList = [
 
 export default {
   zoom: {
+    shortcut: ['Ctrl+Shift+0'],
     selected: (editor) => editor.zoom(),
+    action: (editor) => editor.zoom(1),
     hidden: (options) => isHidden(options, 'zoom')
   },
   'zoom-out': {
-    shortcut: ['-', '_', 'Shift+-'],
+    shortcut: ['Ctrl+_', 'Ctrl+-'],
     title: 'Zoom Out',
     disabled: (editor) => editor.zoom() <= zoomList[0], // unsave
     action: (editor) => {
@@ -39,7 +41,7 @@ export default {
     hidden: (options) => isHidden(options, 'zoom-out')
   },
   'zoom-in': {
-    shortcut: ['+', '=', 'Shift+='],
+    shortcut: ['Ctrl+=', 'Ctrl++'],
     title: 'Zoom In',
     disabled: (editor) => zoomList[zoomList.length - 1] <= editor.zoom(),
     action: (editor) => {

packages/ketcher-react/src/script/ui/data/convert/structconv.js

@@ -70,7 +70,7 @@ export function toElement(elem) {
   return elem
 }
 
-function fromAtom(satom) {
+export function fromAtom(satom) {
   const alias = satom.alias || ''
   const charge = satom.charge.toString()
 
@@ -91,7 +91,7 @@ function fromAtom(satom) {
   }
 }
 
-function toAtom(atom) {
+export function toAtom(atom) {
   // TODO merge this to Atom.attrlist?
   //      see ratomtool
   const chargeRegexp = new RegExp(atomSchema.properties.charge.pattern)

packages/ketcher-react/src/script/ui/state/handleHotkeysOverItem.ts

@@ -3,17 +3,23 @@ import {
   fromAtomAddition,
   fromAtomsAttrs,
   fromBondAddition,
+  fromBondsAttrs,
   fromFragmentDeletion,
   FunctionalGroup,
   SGroup,
   Atom
 } from 'ketcher-core'
+import { openDialog } from './modal'
 import Tools from '../../editor/tool'
+import { getSelectedAtoms } from '../../editor/tool/select'
 import { onAction } from './shared'
 import { Editor } from '../../editor'
+import { updateSelectedAtoms } from 'src/script/ui/state/modal/atoms'
+import { fromAtom, toAtom, fromBond, toBond } from '../data/convert/structconv'
 
 type TNewAction = {
-  tool: string
+  tool?: string
+  dialog?: string
   opts?: any
 }
 
@@ -34,7 +40,9 @@ type HandleHotkeyOverItemProps = {
 export function handleHotkeyOverItem(props: HandleHotkeyOverItemProps) {
   if (props.newAction.tool === 'eraser') {
     handleEraser(props)
-  } else {
+  } else if (props.newAction.dialog) {
+    handleDialog(props)
+  } else if (props.newAction.tool) {
     handleTool(props)
   }
 }
@@ -48,6 +56,99 @@ function handleEraser({ editor, hoveredItem }: HandleHotkeyOverItemProps) {
   editor.hover(null)
 }
 
+function handleDialog({
+  hoveredItem,
+  newAction,
+  editor,
+  dispatch
+}: HandleHotkeyOverItemProps) {
+  const dialogType = Object.keys(hoveredItem)[0]
+  const dialogHandler = getDialogHandler(dialogType)
+  const hoveredItemId = hoveredItem[dialogType]
+
+  if (dialogHandler) {
+    const props: HandlersProps = {
+      hoveredItemId,
+      newAction,
+      editor,
+      dispatch
+    }
+    return dialogHandler(props)
+  }
+}
+
+function getDialogHandler(itemType: string) {
+  const dialogs = {
+    atoms: (props: HandlersProps) => handleAtomPropsDialog(props),
+    bonds: (props: HandlersProps) => handleBondPropsDialog(props)
+  }
+
+  const dialog = dialogs[itemType]
+  return dialog
+}
+
+function handleAtomPropsDialog({
+  hoveredItemId,
+  newAction,
+  editor,
+  dispatch
+}: HandlersProps) {
+  const selection = editor.selection()
+  const atomsSelected = selection?.atoms
+  const restruct = editor.render.ctab
+
+  if (atomsSelected && atomsSelected.includes(hoveredItemId)) {
+    const atoms = getSelectedAtoms(selection, restruct.molecule)
+    const changeAtomPromise = editor.event.elementEdit.dispatch(atoms)
+
+    updateSelectedAtoms({
+      selection,
+      editor,
+      changeAtomPromise
+    })
+  } else {
+    const atomFromStruct = restruct.atoms.get(hoveredItemId)
+    const convertedAtomForModal = fromAtom(atomFromStruct?.a)
+
+    openDialog(dispatch, newAction.dialog, convertedAtomForModal)
+      .then((res) => {
+        const updatedAtom = fromAtomsAttrs(
+          restruct,
+          hoveredItemId,
+          toAtom(res),
+          false
+        )
+
+        editor.update(updatedAtom)
+      })
+      .catch(() => null)
+  }
+}
+
+function handleBondPropsDialog({
+  hoveredItemId,
+  newAction,
+  editor,
+  dispatch
+}: HandlersProps) {
+  const restruct = editor.render.ctab
+  const bondFromStruct = restruct.bonds.get(hoveredItemId)
+  const convertedBondForModal = fromBond(bondFromStruct?.b)
+
+  openDialog(dispatch, newAction.dialog, convertedBondForModal)
+    .then((res) => {
+      const updatedBond = fromBondsAttrs(
+        restruct,
+        hoveredItemId,
+        toBond(res),
+        false
+      )
+
+      editor.update(updatedBond)
+    })
+    .catch(() => null)
+}
+
 function handleTool({
   hoveredItem,
   newAction,
@@ -73,11 +174,12 @@ function handleTool({
     }
   }
 }
+
 async function isFunctionalGroupChange(props: HandlersProps): Promise<boolean> {
   return await isChangingFunctionalGroup(props)
 }
 
-function getToolHandler(itemType: string, toolName: string) {
+function getToolHandler(itemType: string, toolName = '') {
   const items = {
     atoms: {
       atom: (props: HandlersProps) => handleAtomTool(props),
@@ -95,7 +197,9 @@ function getToolHandler(itemType: string, toolName: string) {
 
   const item = items[itemType]
 
-  if (item) return item[toolName]
+  if (item) {
+    return item[toolName]
+  }
   return items._default[toolName]
 }
 

packages/ketcher-react/src/script/ui/state/hotkeys.ts

@@ -74,6 +74,28 @@ function keyHandle(dispatch, state, hotKeys, event) {
       })
       .catch(() => null)
     event.preventDefault()
+  } else if (key && key.length === 1 && key.match('/')) {
+    const hotkeyDialogTypes = {
+      atoms: actions['atom-props'].action,
+      bonds: actions['bond-props'].action
+    }
+
+    const hoveredItem = getHoveredItem(render.ctab)
+    if (!hoveredItem) {
+      return
+    }
+    const dialogType = Object.keys(hoveredItem)[0]
+
+    if (Object.hasOwn(hotkeyDialogTypes, dialogType)) {
+      handleHotkeyOverItem({
+        hoveredItem,
+        newAction: hotkeyDialogTypes[dialogType],
+        editor,
+        dispatch
+      })
+    }
+
+    event.preventDefault()
   } else if ((group = keyNorm.lookup(hotKeys, event)) !== undefined) {
     const index = checkGroupOnTool(group, actionTool) // index currentTool in group || -1
     const groupLength = group !== null ? group.length : 1

packages/ketcher-react/src/script/ui/views/toolbars/TopToolbar/ZoomControls.tsx

@@ -46,7 +46,7 @@ const ZoomLabel = styled('span')`
 const Dropdown = styled(Popover)`
   & .MuiPopover-paper {
     padding: 8px;
-    width: 135px;
+    width: 175px;
     border: none;
     border-radius: 0px 0px 4px 4px;
     box-shadow: 0px 30px 48px -17px rgba(160, 165, 174, 0.3);
@@ -199,8 +199,9 @@ export const ZoomControls = ({
               <ShortcutLabel>{shortcuts['zoom-in']}</ShortcutLabel>
             </ZoomControlButton>
           )}
-          <ZoomControlButton onClick={resetZoom}>
+          <ZoomControlButton title="Zoom 100%" onClick={resetZoom}>
             <span>Zoom 100%</span>
+            <ShortcutLabel>{shortcuts.zoom}</ShortcutLabel>
           </ZoomControlButton>
         </DropDownContent>
       </Dropdown>