This is an automated email from the ASF dual-hosted git repository.
kerwin pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 27eada79e4 beautify the dag (#12728)
27eada79e4 is described below
commit 27eada79e44856dc89bd1b2a5ad0fa5301af2829
Author: calvin <[email protected]>
AuthorDate: Sun Nov 6 20:04:27 2022 +0800
beautify the dag (#12728)
---
.../projects/workflow/components/dag/dag-config.ts | 23 +++++++++++-----------
.../workflow/components/dag/use-canvas-init.ts | 22 ++++++++++-----------
2 files changed, 23 insertions(+), 22 deletions(-)
diff --git
a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-config.ts
b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-config.ts
index 8223554ea5..0c9d9d4d6d 100644
---
a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-config.ts
+++
b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/dag-config.ts
@@ -19,7 +19,7 @@ export const X6_NODE_NAME = 'dag-task'
export const X6_EDGE_NAME = 'dag-edge'
export const X6_PORT_OUT_NAME = 'dag-port-out'
-const EDGE_COLOR = '#999999'
+const EDGE_COLOR = '#A2B1C3'
const BG_BLUE = '#DFE9F7'
const BG_WHITE = '#FFFFFF'
const NODE_BORDER = '#CCCCCC'
@@ -72,7 +72,7 @@ export const PORT = {
},
'circle-outer': {
stroke: NODE_BORDER,
- strokeWidth: 1,
+ strokeWidth: 2,
r: 6,
fill: BG_WHITE
},
@@ -164,7 +164,7 @@ export const NODE = {
pointerEvents: 'visiblePainted',
fill: BG_WHITE,
stroke: NODE_BORDER,
- strokeWidth: 1,
+ strokeWidth: 2,
strokeDasharray: 'none',
filter: 'none'
},
@@ -178,7 +178,7 @@ export const NODE = {
refX: 45,
refY: 18,
fontFamily: 'Microsoft Yahei',
- fontSize: 12,
+ fontSize: 15,
fontWeight: 'bold',
fill: TITLE,
strokeWidth: 0
@@ -236,12 +236,12 @@ export const EDGE = {
attrs: {
line: {
stroke: EDGE_COLOR,
- strokeWidth: 1,
+ strokeWidth: 1.5,
targetMarker: {
tagName: 'path',
fill: EDGE_COLOR,
strokeWidth: 0,
- d: 'M 6 -3 0 0 6 3 Z'
+ d: 'M 7 -5 0 0 7 5 Z'
},
filter: 'none'
}
@@ -250,9 +250,10 @@ export const EDGE = {
name: 'rounded'
},
router: {
- name: 'manhattan',
+ name: 'er',
args: {
- endDirections: ['top', 'bottom', 'left']
+ offset: 15,
+ direction: 'H',
}
},
defaultLabel: {
@@ -269,7 +270,7 @@ export const EDGE = {
attrs: {
label: {
fill: EDGE_COLOR,
- fontSize: 14,
+ fontSize: 16,
textAnchor: 'middle',
textVerticalAnchor: 'middle',
pointerEvents: 'none'
@@ -278,7 +279,7 @@ export const EDGE = {
ref: 'label',
fill: BG_WHITE,
stroke: EDGE_COLOR,
- strokeWidth: 1,
+ strokeWidth: 2,
rx: 4,
ry: 4,
refWidth: '140%',
@@ -326,7 +327,7 @@ export const EDGE_SELECTED = {
targetMarker: {
fill: STROKE_BLUE
},
- strokeWidth: 2,
+ strokeWidth: 3,
filter: EDGE_SHADOW
}
},
diff --git
a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-canvas-init.ts
b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-canvas-init.ts
index fca224940f..8ceb541a5f 100644
---
a/dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-canvas-init.ts
+++
b/dolphinscheduler-ui/src/views/projects/workflow/components/dag/use-canvas-init.ts
@@ -75,9 +75,9 @@ export function useCanvasInit(options: Options) {
minimap: {
enabled: true,
container: minimap.value,
- scalable: false,
- width: 200,
- height: 120
+ scalable: true,
+ width: 250,
+ height: 150
},
interacting: {
edgeLabelMovable: false,
@@ -108,10 +108,10 @@ export function useCanvasInit(options: Options) {
const { sourceCell, targetCell } = data
if (
- sourceCell &&
- targetCell &&
- sourceCell.isNode() &&
- targetCell.isNode()
+ sourceCell &&
+ targetCell &&
+ sourceCell.isNode() &&
+ targetCell.isNode()
) {
const sourceData = sourceCell.getData()
if (!sourceData) return true
@@ -135,10 +135,10 @@ export function useCanvasInit(options: Options) {
edge?.setAttrs({
line: {
strokeDasharray:
- sourceData.taskExecuteType === 'STREAM' ||
- targetData.taskExecuteType === 'STREAM'
- ? '5 5'
- : 'none'
+ sourceData.taskExecuteType === 'STREAM' ||
+ targetData.taskExecuteType === 'STREAM'
+ ? '5 5'
+ : 'none'
}
})
return true
