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

47
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;
}
$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;
}

Loading…
Cancel
Save