Merge branch 'master' into #2423-hotkeys-for-atoms-dont-work-on-funct…

…ional-groups-and-salts-abbreviations # Conflicts: # packages/ketcher-react/src/script/ui/state/handleHotkeysOverItem.ts
epam · May 29, 2023 · 0e6b619 · 0e6b619
2 parents 440be93 + a119b50
commit 0e6b619
Show file tree

Hide file tree

Showing 42 changed files with 372 additions and 186 deletions.
diff --git a/packages/ketcher-core/src/application/editor/actions/sgroup.ts b/packages/ketcher-core/src/application/editor/actions/sgroup.ts
@@ -79,7 +79,10 @@ export function setExpandSGroup(restruct, sgid, attrs) {
   })
 
   const sgroup = restruct.molecule.sgroups.get(sgid)
-  if (sgroup.firstSgroupAtom) delete sgroup.firstSgroupAtom
+  if (sgroup.firstSgroupAtom) {
+    delete sgroup.firstSgroupAtom
+    delete sgroup.firstSgroupAtomId
+  }
   const atoms = SGroup.getAtoms(restruct, sgroup)
 
   atoms.forEach((aid) => {

diff --git a/packages/ketcher-core/src/application/render/index.ts b/packages/ketcher-core/src/application/render/index.ts
@@ -1,3 +1,4 @@
+export * from './renderStruct'
 export * from './raphaelRender'
 export * from './restruct'
 export * from './canvasExtension'
diff --git a/...react/src/script/ui/utils/renderStruct.ts → ...re/src/application/render/renderStruct.ts b/...react/src/script/ui/utils/renderStruct.ts → ...re/src/application/render/renderStruct.ts
@@ -1,4 +1,5 @@
-import { Render, Struct } from 'ketcher-core'
+import { Struct } from 'domain/entities'
+import { Render } from './raphaelRender'
 
 /**
  * Is used to improve search and opening tab performance in Template Dialog
@@ -42,7 +43,6 @@ export class RenderStruct {
         ...options
       })
       rnd.setMolecule(preparedStruct)
-      rnd.update(true, options.viewSz)
       if (needCache) {
         renderCache.set(cacheKey, rnd.clientArea.innerHTML)
       }

diff --git a/packages/ketcher-core/src/application/render/restruct/reatom.ts b/packages/ketcher-core/src/application/render/restruct/reatom.ts
@@ -251,7 +251,6 @@ class ReAtom extends ReObject {
       draw.recenterText(index.path, index.rbb)
       restruct.addReObjectPath(LayerMap.indices, this.visel, index.path, ps)
     }
-    this.setHover(this.hover, render)
 
     if (this.showLabel && (!this.a.pseudo || isHydrogenIsotope)) {
       let hydroIndex: any = null
@@ -367,6 +366,9 @@ class ReAtom extends ReObject {
       }
     }
 
+    // draw hover after label is calculated
+    this.setHover(this.hover, render)
+
     if (this.a.attpnt) {
       const lsb = bisectLargestSector(this, restruct.molecule)
       showAttpnt(this, render, lsb, restruct.addReObjectPath.bind(restruct))

diff --git a/packages/ketcher-core/src/application/render/restruct/resgroup.js b/packages/ketcher-core/src/application/render/restruct/resgroup.js
@@ -56,6 +56,7 @@ class ReSGroup extends ReObject {
         if (FunctionalGroup.isAttachmentPointAtom(aid, remol.molecule)) {
           sgroup.firstSgroupAtom = remol.molecule.atoms.get(aid)
           sgroup.functionalGroup = true
+          sgroup.firstSgroupAtomId = aid
         }
       })
     } else {
@@ -139,10 +140,9 @@ class ReSGroup extends ReObject {
       sGroupItem.firstSgroupAtom
     if (sGroupHasFirstAtom) {
       const firstAtomPosition = sGroupItem.firstSgroupAtom.pp
-      const [firstAtomId] = sGroupItem.atoms
-      const reSGroupAtom = render.ctab.atoms.get(firstAtomId)
+      const reSGroupAtom = render.ctab.atoms.get(sGroupItem.firstSgroupAtomId)
       const sGroupTextBoundingBox =
-        reSGroupAtom.visel.boundingBox || reSGroupAtom.visel.oldBoundingBox
+        reSGroupAtom?.visel.boundingBox || reSGroupAtom?.visel.oldBoundingBox
       if (sGroupTextBoundingBox) {
         const { x, y } = Scale.obj2scaled(firstAtomPosition, render.options)
         const { p0, p1 } = sGroupTextBoundingBox

diff --git a/packages/ketcher-core/src/domain/entities/sgroup.ts b/packages/ketcher-core/src/domain/entities/sgroup.ts
@@ -81,6 +81,7 @@ export class SGroup {
   pp: Vec2 | null
   data: any
   firstSgroupAtom: any
+  firstSgroupAtomId: number
 
   constructor(type: string) {
     this.type = type
@@ -101,6 +102,7 @@ export class SGroup {
     this.xBonds = []
     this.neiAtoms = []
     this.pp = null
+    this.firstSgroupAtomId = -1
     this.data = {
       mul: 1, // multiplication count for MUL group
       connectivity: 'ht', // head-to-head, head-to-tail or either-unknown

diff --git a/packages/ketcher-react/src/script/editor/Editor.ts b/packages/ketcher-react/src/script/editor/Editor.ts
@@ -33,12 +33,17 @@ import {
 import closest from './shared/closest'
 import { customOnChangeHandler } from './utils'
 import { isEqual } from 'lodash/fp'
-import toolMap from './tool'
+import { toolsMap } from './tool'
 import { Highlighter } from './highlighter'
 import { setFunctionalGroupsTooltip } from './utils/functionalGroupsTooltip'
 import { contextMenuInfo } from '../ui/views/components/ContextMenu/contextMenu.types'
 import { HoverIcon } from './HoverIcon'
 import RotateController from './tool/rotate-controller'
+import {
+  Tool,
+  ToolConstructorInterface,
+  ToolEventHandlerName
+} from './tool/Tool'
 
 const SCALE = 40
 const HISTORY_SIZE = 32 // put me to options
@@ -108,7 +113,7 @@ class Editor implements KetcherEditor {
   #origin?: any
   render: Render
   _selection: Selection | null
-  _tool: any
+  _tool: Tool | null
   historyStack: any
   historyPtr: any
   errorHandler: ((message: string) => void) | null
@@ -209,7 +214,7 @@ class Editor implements KetcherEditor {
     this.#origin = position ? this.historyStack[position - 1] : null
   }
 
-  tool(name?: any, opts?: any) {
+  tool(name?: any, opts?: any): Tool | null {
     /* eslint-disable no-underscore-dangle */
     if (arguments.length === 0) {
       return this._tool
@@ -219,7 +224,9 @@ class Editor implements KetcherEditor {
       this._tool.cancel()
     }
 
-    const tool = new toolMap[name](this, opts)
+    const ToolConstructor: ToolConstructorInterface = toolsMap[name]
+
+    const tool = new ToolConstructor(this, opts)
 
     const isAtomToolChosen = name === 'atom'
     if (!isAtomToolChosen) {
@@ -433,13 +440,13 @@ class Editor implements KetcherEditor {
     if (this.historyPtr === 0) {
       throw new Error('Undo stack is empty')
     }
-    if (this.tool() && this.tool().cancel) {
-      this.tool().cancel()
+    if (this._tool && this._tool.cancel) {
+      this._tool.cancel()
     }
 
     this.selection(null)
 
-    if (this._tool instanceof toolMap.paste) {
+    if (this._tool instanceof toolsMap.paste) {
       this.event.change.dispatch()
       return
     }
@@ -458,12 +465,12 @@ class Editor implements KetcherEditor {
       throw new Error('Redo stack is empty')
     }
 
-    if (this.tool() && this.tool().cancel) {
-      this.tool().cancel()
+    if (this._tool && this._tool.cancel) {
+      this._tool.cancel()
     }
 
     this.selection(null)
-    if (this._tool instanceof toolMap.paste) {
+    if (this._tool instanceof toolsMap.paste) {
       this.event.change.dispatch()
       return
     }
@@ -620,27 +627,30 @@ function updateLastCursorPosition(editor: Editor, event) {
   }
 }
 
-function isContextMenuClosed(editor: Editor) {
-  return !Object.values(editor.contextMenu).some(Boolean)
+function isContextMenuClosed(contextMenu: contextMenuInfo) {
+  return !Object.values(contextMenu).some(Boolean)
 }
 
 function useToolIfNeeded(
   editor: Editor,
-  eventName: string,
+  eventHandlerName: ToolEventHandlerName,
   clientArea: HTMLElement,
   event
 ) {
-  const EditorTool = editor.tool()
+  const editorTool = editor.tool()
+  if (!editorTool) {
+    return false
+  }
+
   editor.lastEvent = event
   const conditions = [
-    !!EditorTool,
-    eventName in EditorTool,
-    clientArea.contains(event.target) || EditorTool.isSelectionRunning?.(),
-    isContextMenuClosed(editor)
+    eventHandlerName in editorTool,
+    clientArea.contains(event.target) || editorTool.isSelectionRunning?.(),
+    isContextMenuClosed(editor.contextMenu)
   ]
 
   if (conditions.every((condition) => condition)) {
-    EditorTool[eventName](event)
+    editorTool[eventHandlerName]?.(event)
     return true
   }
 
@@ -649,20 +659,54 @@ function useToolIfNeeded(
 
 function domEventSetup(editor: Editor, clientArea: HTMLElement) {
   // TODO: addEventListener('resize', ...);
-  ;[
-    { target: clientArea, eventName: 'click' },
-    { target: clientArea, eventName: 'dblclick' },
-    { target: clientArea, eventName: 'mousedown' },
-    { target: document, eventName: 'mousemove' },
-    { target: document, eventName: 'mouseup' },
-    { target: document, eventName: 'mouseleave' },
+  const trackedDomEvents: {
+    target: Node
+    eventName: string
+    toolEventHandler: ToolEventHandlerName
+  }[] = [
+    {
+      target: clientArea,
+      eventName: 'click',
+      toolEventHandler: 'click'
+    },
+    {
+      target: clientArea,
+      eventName: 'dblclick',
+      toolEventHandler: 'dblclick'
+    },
     {
       target: clientArea,
+      eventName: 'mousedown',
+      toolEventHandler: 'mousedown'
+    },
+    {
+      target: document,
+      eventName: 'mousemove',
+      toolEventHandler: 'mousemove'
+    },
+    {
+      target: document,
+      eventName: 'mouseup',
+      toolEventHandler: 'mouseup'
+    },
+    {
+      target: document,
       eventName: 'mouseleave',
-      toolEventName: 'mouseLeaveClientArea'
+      toolEventHandler: 'mouseleave'
     },
-    { target: clientArea, eventName: 'mouseover' }
-  ].forEach(({ target, eventName, toolEventName }) => {
+    {
+      target: clientArea,
+      eventName: 'mouseleave',
+      toolEventHandler: 'mouseLeaveClientArea'
+    },
+    {
+      target: clientArea,
+      eventName: 'mouseover',
+      toolEventHandler: 'mouseover'
+    }
+  ]
+
+  trackedDomEvents.forEach(({ target, eventName, toolEventHandler }) => {
     editor.event[eventName] = new DOMSubscription()
     const subs = editor.event[eventName]
 
@@ -689,7 +733,7 @@ function domEventSetup(editor: Editor, clientArea: HTMLElement) {
 
       const isToolUsed = useToolIfNeeded(
         editor,
-        toolEventName || eventName,
+        toolEventHandler,
         clientArea,
         event
       )

diff --git a/packages/ketcher-react/src/script/editor/tool/Tool.ts b/packages/ketcher-react/src/script/editor/tool/Tool.ts
@@ -0,0 +1,33 @@
+import Editor from '../Editor'
+
+interface ToolEventHandler {
+  click?(event: Event): void
+
+  dblclick?(event: Event): void
+
+  mousedown?(event: Event): void
+
+  mousemove?(event: Event): void
+
+  mouseup?(event: Event): void
+
+  mouseleave?(event: Event): void
+
+  mouseLeaveClientArea?(event: Event): void
+
+  mouseover?(event: Event): void
+}
+
+export interface Tool extends ToolEventHandler {
+  cancel?(): void
+
+  isSelectionRunning?(): boolean
+
+  isNotActiveTool?: boolean
+}
+
+export type ToolConstructorInterface = {
+  new (editor: Editor, ...args: any[]): Tool
+}
+
+export type ToolEventHandlerName = keyof ToolEventHandler
diff --git a/packages/ketcher-react/src/script/editor/tool/apoint.ts b/packages/ketcher-react/src/script/editor/tool/apoint.ts
@@ -16,9 +16,10 @@
 
 import { fromAtomsAttrs, FunctionalGroup } from 'ketcher-core'
 import Editor from '../Editor'
+import { Tool } from './Tool'
 
-class APointTool {
-  editor: Editor
+class APointTool implements Tool {
+  private readonly editor: Editor
 
   constructor(editor) {
     this.editor = editor

diff --git a/packages/ketcher-react/src/script/editor/tool/atom.ts b/packages/ketcher-react/src/script/editor/tool/atom.ts
@@ -30,12 +30,13 @@ import {
 
 import Editor from '../Editor'
 import utils from '../shared/utils'
+import { Tool } from './Tool'
 
-class AtomTool {
-  editor: Editor
-  atomProps: any
-  dragCtx: any
-  #bondProps: { stereo: number; type: number }
+class AtomTool implements Tool {
+  private readonly editor: Editor
+  private readonly atomProps: any
+  private dragCtx: any
+  readonly #bondProps: { stereo: number; type: number }
   isNotActiveTool: boolean | undefined
 
   constructor(editor, atomProps) {

diff --git a/packages/ketcher-react/src/script/editor/tool/attach.ts b/packages/ketcher-react/src/script/editor/tool/attach.ts
@@ -16,10 +16,11 @@
 
 import { Elements, FunctionalGroup } from 'ketcher-core'
 import Editor from '../Editor'
+import { Tool } from './Tool'
 
-class AttachTool {
-  attach: any
-  editor: Editor
+class AttachTool implements Tool {
+  private readonly attach: { atomid: number; bondid: number }
+  private readonly editor: Editor
 
   constructor(editor, attachPoints) {
     this.attach = {

diff --git a/packages/ketcher-react/src/script/editor/tool/bond.ts b/packages/ketcher-react/src/script/editor/tool/bond.ts
@@ -28,12 +28,13 @@ import {
 
 import utils from '../shared/utils'
 import Editor from '../Editor'
+import { Tool } from './Tool'
 
-class BondTool {
-  editor: Editor
-  atomProps: { label: string }
-  bondProps: any
-  dragCtx: any
+class BondTool implements Tool {
+  private readonly editor: Editor
+  private readonly atomProps: { label: string }
+  private readonly bondProps: any
+  private dragCtx: any
   isNotActiveTool: boolean | undefined
 
   constructor(editor, bondProps) {

diff --git a/packages/ketcher-react/src/script/editor/tool/chain.ts b/packages/ketcher-react/src/script/editor/tool/chain.ts
@@ -29,10 +29,11 @@ import {
 import { atomLongtapEvent } from './atom'
 import utils from '../shared/utils'
 import Editor from '../Editor'
+import { Tool } from './Tool'
 
-class ChainTool {
-  editor: Editor
-  dragCtx: any
+class ChainTool implements Tool {
+  private readonly editor: Editor
+  private dragCtx: any
 
   constructor(editor) {
     this.editor = editor