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

…s until release click
epam · Apr 26, 2023 · ef43a05 · ef43a05
1 parent 5f570b9
commit ef43a05
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 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'
 
@@ -374,14 +374,16 @@ class Editor implements KetcherEditor {
 
     if (!event) return
 
-    showFunctionalGroupsTooltip(this)
+    setFunctionalGroupsTooltip(this, true)
   }
 
   update(
     action: Action | true,
     ignoreHistory?: boolean,
     options = { resizeCanvas: true }
   ) {
+    setFunctionalGroupsTooltip(this, false)
+
     if (action === true) {
       this.render.update(true, null, options) // force
     } else {
@@ -452,7 +454,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,23 +1,33 @@
 import { FunctionalGroup } from 'ketcher-core'
+import Editor from '../Editor'
 
 let showTooltipTimer: ReturnType<typeof setTimeout> | null = null
 
 export const TOOLTIP_DELAY = 300
 
-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) {
+function showTooltip(editor: Editor, infoPanelData: any) {
+  hideTooltip(editor)
+
+  showTooltipTimer = setTimeout(() => {
+    editor.event.showInfo.dispatch(infoPanelData)
+  }, TOOLTIP_DELAY)
+}
+
+export function setFunctionalGroupsTooltip(editor: Editor, isShow: boolean) {
+  if (!isShow) {
+    hideTooltip(editor)
+
+    return
+  }
+
   let infoPanelData: any = null
   const checkFunctionGroupTypes = ['sgroups', 'functionalGroups']
   const closestCollapsibleStructures = editor.findItem(