test/DolphinScheduler
1
0
Fork 0
mirror of https://gitee.com/dolphinscheduler/DolphinScheduler.git synced 2024-12-02 12:17:43 +08:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

beautify the dag (#12728)

Browse Source
This commit is contained in:
calvin 2022-11-06 20:04:27 +08:00 committed by zhuangchong
parent 7f3193643a
commit cb3a38332f
2 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-config.ts
View File

@ -19,7 +19,7 @@ export const X6_NODE_NAME = 'dag-task'
export const X6_EDGE_NAME = 'dag-edge' export const X6_EDGE_NAME = 'dag-edge'
export const X6_PORT_OUT_NAME = 'dag-port-out' export const X6_PORT_OUT_NAME = 'dag-port-out'
const EDGE_COLOR = '#999999' const EDGE_COLOR = '#A2B1C3'
const BG_BLUE = '#DFE9F7' const BG_BLUE = '#DFE9F7'
const BG_WHITE = '#FFFFFF' const BG_WHITE = '#FFFFFF'
const NODE_BORDER = '#CCCCCC' const NODE_BORDER = '#CCCCCC'
@ -72,7 +72,7 @@ export const PORT = {
}, },
'circle-outer': { 'circle-outer': {
stroke: NODE_BORDER, stroke: NODE_BORDER,
strokeWidth: 1, strokeWidth: 2,
r: 6, r: 6,
fill: BG_WHITE fill: BG_WHITE
}, },
@ -164,7 +164,7 @@ export const NODE = {
pointerEvents: 'visiblePainted', pointerEvents: 'visiblePainted',
fill: BG_WHITE, fill: BG_WHITE,
stroke: NODE_BORDER, stroke: NODE_BORDER,
strokeWidth: 1, strokeWidth: 2,
strokeDasharray: 'none', strokeDasharray: 'none',
filter: 'none' filter: 'none'
}, },
@ -178,7 +178,7 @@ export const NODE = {
refX: 45, refX: 45,
refY: 18, refY: 18,
fontFamily: 'Microsoft Yahei', fontFamily: 'Microsoft Yahei',
fontSize: 12, fontSize: 15,
fontWeight: 'bold', fontWeight: 'bold',
fill: TITLE, fill: TITLE,
strokeWidth: 0 strokeWidth: 0
@ -236,12 +236,12 @@ export const EDGE = {
attrs: { attrs: {
line: { line: {
stroke: EDGE_COLOR, stroke: EDGE_COLOR,
strokeWidth: 1, strokeWidth: 1.5,
targetMarker: { targetMarker: {
tagName: 'path', tagName: 'path',
fill: EDGE_COLOR, fill: EDGE_COLOR,
strokeWidth: 0, strokeWidth: 0,
d: 'M 6 -3 0 0 6 3 Z' d: 'M 7 -5 0 0 7 5 Z'
}, },
filter: 'none' filter: 'none'
} }
@ -250,9 +250,10 @@ export const EDGE = {
name: 'rounded' name: 'rounded'
}, },
router: { router: {
name: 'manhattan', name: 'er',
args: { args: {
endDirections: ['top', 'bottom', 'left'] offset: 15,
direction: 'H',
} }
}, },
defaultLabel: { defaultLabel: {
@ -269,7 +270,7 @@ export const EDGE = {
attrs: { attrs: {
label: { label: {
fill: EDGE_COLOR, fill: EDGE_COLOR,
fontSize: 14, fontSize: 16,
textAnchor: 'middle', textAnchor: 'middle',
textVerticalAnchor: 'middle', textVerticalAnchor: 'middle',
pointerEvents: 'none' pointerEvents: 'none'
@ -278,7 +279,7 @@ export const EDGE = {
ref: 'label', ref: 'label',
fill: BG_WHITE, fill: BG_WHITE,
stroke: EDGE_COLOR, stroke: EDGE_COLOR,
strokeWidth: 1, strokeWidth: 2,
rx: 4, rx: 4,
ry: 4, ry: 4,
refWidth: '140%', refWidth: '140%',
@ -326,7 +327,7 @@ export const EDGE_SELECTED = {
targetMarker: { targetMarker: {
fill: STROKE_BLUE fill: STROKE_BLUE
}, },
strokeWidth: 2, strokeWidth: 3,
filter: EDGE_SHADOW filter: EDGE_SHADOW
} }
}, },

22
dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-canvas-init.ts
View File

@ -75,9 +75,9 @@ export function useCanvasInit(options: Options) {
minimap: { minimap: {
enabled: true, enabled: true,
container: minimap.value, container: minimap.value,
scalable: false, scalable: true,
width: 200, width: 250,
height: 120 height: 150
}, },
interacting: { interacting: {
edgeLabelMovable: false, edgeLabelMovable: false,
@ -108,10 +108,10 @@ export function useCanvasInit(options: Options) {
const { sourceCell, targetCell } = data const { sourceCell, targetCell } = data
if ( if (
sourceCell && sourceCell &&
targetCell && targetCell &&
sourceCell.isNode() && sourceCell.isNode() &&
targetCell.isNode() targetCell.isNode()
) { ) {
const sourceData = sourceCell.getData() const sourceData = sourceCell.getData()
if (!sourceData) return true if (!sourceData) return true
@ -135,10 +135,10 @@ export function useCanvasInit(options: Options) {
edge?.setAttrs({ edge?.setAttrs({
line: { line: {
strokeDasharray: strokeDasharray:
sourceData.taskExecuteType === 'STREAM' || sourceData.taskExecuteType === 'STREAM' ||
targetData.taskExecuteType === 'STREAM' targetData.taskExecuteType === 'STREAM'
? '5 5' ? '5 5'
: 'none' : 'none'
} }
}) })
return true return true