From 91b91c95192a23c1c4e0320d328b1a9776bccfc0 Mon Sep 17 00:00:00 2001
From: calvin <jianghuachinacom@163.com>
Date: Fri, 11 Feb 2022 16:53:26 +0800
Subject: [PATCH] [Feature][UI Next] Add the tooltip to display the whole
 node's name. (#8353)

---
 .../components/dag/use-canvas-init.ts         | 29 ++++++++++++
 .../definition/detail/index.module.scss       | 47 +++++++++----------
 2 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-canvas-init.ts b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-canvas-init.ts
index ffd5dc2bab..ebba1d8b2f 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-canvas-init.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-canvas-init.ts
@@ -132,6 +132,35 @@ export function useCanvasInit(options: Options) {
         edge.setSource(sourceNode)
       }
     })
+
+    // Add a node tool when the mouse entering
+    graph.value.on('node:mouseenter', ({ node }) => {
+      const nodeName = node.getData().taskName
+      node.addTools({
+        name: 'button',
+        args: {
+          markup: [
+            {
+              tagName: 'text',
+              textContent: nodeName,
+              attrs: {
+                fill: '#868686',
+                'font-size': 16,
+                'text-anchor': 'center'
+              }
+            }
+          ],
+          x: 0,
+          y: 0,
+          offset: { x: 0, y: -10 }
+        }
+      })
+    })
+
+    // Remove all tools when the mouse leaving
+    graph.value.on('node:mouseleave', ({ node }) => {
+      node.removeTool('button')
+    })
   })
 
   /**
diff --git a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/detail/index.module.scss b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/detail/index.module.scss
index baab217347..38be4c83e8 100644
--- a/dolphinscheduler-ui-next/src/views/projects/workflow/definition/detail/index.module.scss
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow/definition/detail/index.module.scss
@@ -15,27 +15,26 @@
  * limitations under the License.
  */
 
- $borderDark: rgba(255, 255, 255, 0.09);
- $borderLight: rgb(239, 239, 245);
- $bgDark: rgb(24, 24, 28);
- $bgLight: #ffffff;
- 
- .container {
-   width: 100%;
-   padding: 20px;
-   box-sizing: border-box;
-   height: calc(100vh - 100px);
-   overflow: hidden;
-   display: block;
- }
- 
- .dark {
-   border: solid 1px $borderDark;
-   background-color: $bgDark;
- }
- 
- .light {
-   border: solid 1px $borderLight;
-   background-color: $bgLight;
- }
- 
\ No newline at end of file
+$borderDark: rgba(255, 255, 255, 0.09);
+$borderLight: rgb(239, 239, 245);
+$bgDark: rgb(24, 24, 28);
+$bgLight: #ffffff;
+
+.container {
+  width: 100%;
+  padding: 20px;
+  box-sizing: border-box;
+  height: calc(100vh - 100px);
+  overflow: hidden;
+  display: block;
+}
+
+.dark {
+  border: solid 1px $borderDark;
+  background-color: $bgDark;
+}
+
+.light {
+  border: solid 1px $borderLight;
+  background-color: $bgLight;
+}