[Feature][UI Next] Add the tooltip to display the whole node's name. (#8353)

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')
+    })
   })
 
   /**

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;
+$borderDark: rgba(255, 255, 255, 0.09);
+$borderLight: rgb(239, 239, 245);
+$bgDark: rgb(24, 24, 28);
+$bgLight: #ffffff;
 
- .container {
+.container {
   width: 100%;
   padding: 20px;
   box-sizing: border-box;
   height: calc(100vh - 100px);
   overflow: hidden;
   display: block;
- }
+}
 
- .dark {
+.dark {
   border: solid 1px $borderDark;
   background-color: $bgDark;
- }
+}
 
- .light {
+.light {
   border: solid 1px $borderLight;
   background-color: $bgLight;
- }
- 
+}