#2288 - tooltip appears after dragging abbreviation and stay on canva…

…s until release click (#2535) Co-authored-by: Maxim Novikov <Maxim_Novikov@epam.com> Co-authored-by: Nikita_Vozisov <Nikita_Vozisov@epam.com>
epam · May 16, 2023 · 235fb38 · 235fb38
1 parent d399ad2
commit 235fb38
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 15 deletions.
diff --git a/packages/ketcher-react/src/script/editor/Editor.ts b/packages/ketcher-react/src/script/editor/Editor.ts
@@ -35,7 +35,7 @@ import { customOnChangeHandler } from './utils'
 import { isEqual } from 'lodash/fp'
 import toolMap from './tool'
 import { Highlighter } from './highlighter'
-import { showFunctionalGroupsTooltip } from './utils/functionalGroupsTooltip'
+import { setFunctionalGroupsTooltip } from './utils/functionalGroupsTooltip'
 import { contextMenuInfo } from '../ui/views/components/ContextMenu/contextMenu.types'
 import { HoverIcon } from './HoverIcon'
 import RotateController from './tool/rotate-controller'
@@ -384,14 +384,23 @@ class Editor implements KetcherEditor {
 
     if (!event) return
 
-    showFunctionalGroupsTooltip(this)
+    setFunctionalGroupsTooltip({
+      editor: this,
+      event,
+      isShow: true
+    })
   }
 
   update(
     action: Action | true,
     ignoreHistory?: boolean,
     options = { resizeCanvas: true }
   ) {
+    setFunctionalGroupsTooltip({
+      editor: this,
+      isShow: false
+    })
+
     if (action === true) {
       this.render.update(true, null, options) // force
     } else {
@@ -462,7 +471,7 @@ class Editor implements KetcherEditor {
 
   subscribe(eventName: any, handler: any) {
     const subscriber = {
-      handler: handler
+      handler
     }
 
     switch (eventName) {

diff --git a/packages/ketcher-react/src/script/editor/utils/functionalGroupsTooltip.ts b/packages/ketcher-react/src/script/editor/utils/functionalGroupsTooltip.ts
@@ -1,16 +1,23 @@
-import { Bond, Struct } from 'ketcher-core'
+import Editor from '../Editor'
+import { Bond, SGroup, Struct } from 'ketcher-core'
 
 let showTooltipTimer: ReturnType<typeof setTimeout> | null = null
 
 export const TOOLTIP_DELAY = 300
 
-function makeStruct(editor, sGroup) {
+type InfoPanelData = {
+  groupStruct: Struct
+  sGroup: SGroup
+  event: PointerEvent
+}
+
+function makeStruct(editor: Editor, sGroup: SGroup) {
   const existingStruct = editor.struct()
   const struct = new Struct()
   const atomsIdMapping = new Map()
 
   sGroup.atoms.forEach((atomId) => {
-    const atomIdInTooltip = struct.atoms.add(existingStruct.atoms.get(atomId))
+    const atomIdInTooltip = struct.atoms.add(existingStruct.atoms.get(atomId)!)
     atomsIdMapping.set(atomId, atomIdInTooltip)
   })
   Array.from(existingStruct.bonds).forEach((value) => {
@@ -26,27 +33,44 @@ function makeStruct(editor, sGroup) {
   return struct
 }
 
-export function showTooltip(editor, infoPanelData) {
+function hideTooltip(editor: Editor) {
   editor.event.showInfo.dispatch(null)
 
   if (showTooltipTimer) {
     clearTimeout(showTooltipTimer)
   }
-  if (infoPanelData) {
-    showTooltipTimer = setTimeout(() => {
-      editor.event.showInfo.dispatch(infoPanelData)
-    }, TOOLTIP_DELAY)
-  }
 }
 
-export function showFunctionalGroupsTooltip(editor) {
-  let infoPanelData: any = null
+function showTooltip(editor: Editor, infoPanelData: InfoPanelData | null) {
+  hideTooltip(editor)
+
+  showTooltipTimer = setTimeout(() => {
+    editor.event.showInfo.dispatch(infoPanelData)
+  }, TOOLTIP_DELAY)
+}
+
+export function setFunctionalGroupsTooltip({
+  editor,
+  event,
+  isShow
+}: {
+  editor: Editor
+  event?: PointerEvent
+  isShow: boolean
+}) {
+  if (!isShow) {
+    hideTooltip(editor)
+
+    return
+  }
+
+  let infoPanelData: null | InfoPanelData = null
   const checkFunctionGroupTypes = ['sgroups', 'functionalGroups']
   const closestCollapsibleStructures = editor.findItem(
     event,
     checkFunctionGroupTypes
   )
-  if (closestCollapsibleStructures) {
+  if (closestCollapsibleStructures && event) {
     const sGroup = editor.struct()?.sgroups.get(closestCollapsibleStructures.id)
     if (sGroup && !sGroup.data.expanded && sGroup.hovering) {
       const groupName = sGroup.data.name