Browse Source

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

3.0.0/version-upgrade
calvin 3 years ago committed by GitHub
parent
commit
91b91c9519
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 29
      dolphinscheduler-ui-next/src/views/projects/workflow/components/dag/use-canvas-init.ts
  2. 21
      dolphinscheduler-ui-next/src/views/projects/workflow/definition/detail/index.module.scss

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

21
dolphinscheduler-ui-next/src/views/projects/workflow/definition/detail/index.module.scss

@ -15,27 +15,26 @@
* limitations under the License. * limitations under the License.
*/ */
$borderDark: rgba(255, 255, 255, 0.09); $borderDark: rgba(255, 255, 255, 0.09);
$borderLight: rgb(239, 239, 245); $borderLight: rgb(239, 239, 245);
$bgDark: rgb(24, 24, 28); $bgDark: rgb(24, 24, 28);
$bgLight: #ffffff; $bgLight: #ffffff;
.container { .container {
width: 100%; width: 100%;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
height: calc(100vh - 100px); height: calc(100vh - 100px);
overflow: hidden; overflow: hidden;
display: block; display: block;
} }
.dark { .dark {
border: solid 1px $borderDark; border: solid 1px $borderDark;
background-color: $bgDark; background-color: $bgDark;
} }
.light { .light {
border: solid 1px $borderLight; border: solid 1px $borderLight;
background-color: $bgLight; background-color: $bgLight;
} }

Loading…
Cancel
Save