Browse Source

feat: 美化 主界面 节点样式

master
qilei0529 4 years ago
parent
commit
bc6e02f980
  1. 36
      packages/core/src/common/baseCell/behavior.ts
  2. 51
      packages/core/src/common/baseCell/branch.ts
  3. 40
      packages/core/src/common/baseCell/start.ts
  4. 2
      packages/core/src/mods/flowChart/createFlowChart.ts
  5. 52
      packages/core/src/mods/flowChart/index.module.less

36
packages/core/src/common/baseCell/behavior.ts

@ -3,16 +3,20 @@ import { Shape } from '@antv/x6';
const schema = { const schema = {
base: Shape.Rect, base: Shape.Rect,
shape: 'imove-behavior', shape: 'imove-behavior',
width: 80, width: 60,
height: 40, height: 30,
label: '处理', label: '处理',
attrs: { attrs: {
body: { body: {
fill: '#AACCF7', fill: '#BCD0FF',
stroke: '#5E9CEE', stroke: '#6B8CD7',
rx: 4,
ry: 4,
}, },
label: { label: {
fill: '#333', fill: '#333',
fontSize: 13,
fontWeight: 500,
textWrap: { width: '100%' }, textWrap: { width: '100%' },
}, },
}, },
@ -22,10 +26,10 @@ const schema = {
position: 'top', position: 'top',
attrs: { attrs: {
circle: { circle: {
r: 3, r: 2.5,
magnet: true, magnet: true,
stroke: '#666', stroke: '#4E68A3',
strokeWidth: 1, strokeWidth: 2,
fill: '#fff', fill: '#fff',
}, },
}, },
@ -34,10 +38,10 @@ const schema = {
position: 'right', position: 'right',
attrs: { attrs: {
circle: { circle: {
r: 3, r: 2.5,
magnet: true, magnet: true,
stroke: '#666', stroke: '#4E68A3',
strokeWidth: 1, strokeWidth: 2,
fill: '#fff', fill: '#fff',
}, },
}, },
@ -46,10 +50,10 @@ const schema = {
position: 'bottom', position: 'bottom',
attrs: { attrs: {
circle: { circle: {
r: 3, r: 2.5,
magnet: true, magnet: true,
stroke: '#666', stroke: '#4E68A3',
strokeWidth: 1, strokeWidth: 2,
fill: '#fff', fill: '#fff',
}, },
}, },
@ -58,10 +62,10 @@ const schema = {
position: 'left', position: 'left',
attrs: { attrs: {
circle: { circle: {
r: 3, r: 2.5,
magnet: true, magnet: true,
stroke: '#666', stroke: '#4E68A3',
strokeWidth: 1, strokeWidth: 2,
fill: '#fff', fill: '#fff',
}, },
}, },

51
packages/core/src/common/baseCell/branch.ts

@ -3,24 +3,25 @@ import { Shape } from '@antv/x6';
const schema = { const schema = {
base: Shape.Polygon, base: Shape.Polygon,
shape: 'imove-branch', shape: 'imove-branch',
width: 80, width: 40,
height: 40, height: 30,
attrs: { attrs: {
body: { body: {
strokeWidth: 2, strokeWidth: 2,
stroke: '#333', stroke: '#FFB96B',
fill: '#FFFC7C', fill: '#FFF6D1',
refPoints: '0,10 10,0 20,10 10,20', refPoints: '0,10 10,0 20,10 10,20',
}, },
label: { label: {
refX: 0.5, refX: 0.5,
refY: 0.5, refY: 1,
text: '判断', text: '判断',
fill: '#333', fill: '#333',
fontSize: 14, fontSize: 13,
fontWeight: 500,
textAnchor: 'middle', textAnchor: 'middle',
textVerticalAnchor: 'middle', textVerticalAnchor: 'bottom',
textWrap: { width: '100%' }, transform: 'matrix(1,0,0,1,0,-6)',
}, },
}, },
ports: { ports: {
@ -29,23 +30,22 @@ const schema = {
position: 'top', position: 'top',
attrs: { attrs: {
circle: { circle: {
r: 3, r: 2.5,
magnet: true, magnet: true,
stroke: '#666', stroke: '#DD7500',
strokeWidth: 1, strokeWidth: 2,
fill: '#fff', fill: '#fff',
}, },
}, },
}, },
right: { right: {
zIndex: 999999999,
position: 'right', position: 'right',
attrs: { attrs: {
circle: { circle: {
r: 3, r: 2.5,
magnet: true, magnet: true,
stroke: '#666', stroke: '#DD7500',
strokeWidth: 1, strokeWidth: 2,
fill: '#fff', fill: '#fff',
}, },
}, },
@ -54,14 +54,13 @@ const schema = {
}, },
}, },
bottom: { bottom: {
zIndex: 999999999,
position: 'bottom', position: 'bottom',
attrs: { attrs: {
circle: { circle: {
r: 3, r: 2.5,
magnet: true, magnet: true,
stroke: '#666', stroke: '#DD7500',
strokeWidth: 1, strokeWidth: 2,
fill: '#fff', fill: '#fff',
}, },
}, },
@ -73,26 +72,22 @@ const schema = {
position: 'left', position: 'left',
attrs: { attrs: {
circle: { circle: {
r: 3, r: 2.5,
magnet: true, magnet: true,
stroke: '#666', stroke: '#DD7500',
strokeWidth: 1, strokeWidth: 2,
fill: '#fff', fill: '#fff',
}, },
}, },
}, },
}, },
items: [ items: [
{
id: 'top',
group: 'top',
},
{ {
id: 'right', id: 'right',
group: 'right', group: 'right',
attrs: { attrs: {
text: { text: {
text: '', text: '',
}, },
}, },
}, },
@ -101,7 +96,7 @@ const schema = {
group: 'bottom', group: 'bottom',
attrs: { attrs: {
text: { text: {
text: '', text: '',
}, },
}, },
}, },

40
packages/core/src/common/baseCell/start.ts

@ -3,17 +3,19 @@ import { Shape } from '@antv/x6';
const schema = { const schema = {
base: Shape.Circle, base: Shape.Circle,
shape: 'imove-start', shape: 'imove-start',
width: 80, width: 60,
height: 80, height: 60,
label: '开始', label: '开始',
attrs: { attrs: {
body: { body: {
fill: '#333', fill: '#6B8CD7',
strokeWidth: 1, strokeWidth: 2,
stroke: '#333', stroke: '#4E68A3',
}, },
label: { label: {
fill: '#FFF', fill: '#FFF',
fontSize: 13,
fontWeight: 500,
textWrap: { width: '100%' }, textWrap: { width: '100%' },
}, },
}, },
@ -21,48 +23,52 @@ const schema = {
groups: { groups: {
top: { top: {
position: 'top', position: 'top',
zIndex: 10,
attrs: { attrs: {
circle: { circle: {
r: 3, r: 2.5,
magnet: true, magnet: true,
stroke: '#666', stroke: '#4E68A3',
strokeWidth: 1, strokeWidth: 2,
fill: '#fff', fill: '#fff',
}, },
}, },
}, },
right: { right: {
position: 'right', position: 'right',
zIndex: 10,
attrs: { attrs: {
circle: { circle: {
r: 3, r: 2.5,
magnet: true, magnet: true,
stroke: '#666', stroke: '#4E68A3',
strokeWidth: 1, strokeWidth: 2,
fill: '#fff', fill: '#fff',
}, },
}, },
}, },
bottom: { bottom: {
position: 'bottom', position: 'bottom',
zIndex: 10,
attrs: { attrs: {
circle: { circle: {
r: 3, r: 2.5,
magnet: true, magnet: true,
stroke: '#666', stroke: '#4E68A3',
strokeWidth: 1, strokeWidth: 2,
fill: '#fff', fill: '#fff',
}, },
}, },
}, },
left: { left: {
position: 'left', position: 'left',
zIndex: 10,
attrs: { attrs: {
circle: { circle: {
r: 3, r: 2.5,
magnet: true, magnet: true,
stroke: '#666', stroke: '#4E68A3',
strokeWidth: 1, strokeWidth: 2,
fill: '#fff', fill: '#fff',
}, },
}, },

2
packages/core/src/mods/flowChart/createFlowChart.ts

@ -144,7 +144,7 @@ const createFlowChart = (
rubberband: true, rubberband: true,
movable: true, movable: true,
strict: true, strict: true,
showNodeSelectionBox: true, showNodeSelectionBox: false,
}, },
// https://x6.antv.vision/zh/docs/tutorial/basic/snapline // https://x6.antv.vision/zh/docs/tutorial/basic/snapline
snapline: { snapline: {

52
packages/core/src/mods/flowChart/index.module.less

@ -29,4 +29,56 @@
min-width: 200px; min-width: 200px;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05) !important; box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05) !important;
} }
}
// add global for x6
:global {
.x6-widget-transform{
border-color:rgba(0, 0, 0, 0.3);
border-style: dashed;
background-color: rgba(0, 0, 0, 0.14);
border-radius: 0;
padding: 6px;
margin: -7px 0 0 -7px;
.x6-widget-transform-resize{
width: 6px;
height: 6px;
border-radius: 0;
border-color:rgba(0, 0, 0, 0.3);
// border: 0 none;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
}
.x6-widget-transform-cursor-nw{
top: -6px;
left: -6px;
}
.x6-widget-transform-cursor-n{
margin-left: -3px;
top: -6px;
}
.x6-widget-transform-cursor-ne{
top: -6px;
right: -6px;
}
.x6-widget-transform-cursor-e{
margin-top: -3px;
right: -6px;
}
.x6-widget-transform-cursor-se{
right: -6px;
bottom: -6px;
}
.x6-widget-transform-cursor-s{
margin-left: -3px;
bottom: -6px;
}
.x6-widget-transform-cursor-sw{
left: -6px;
bottom: -6px;
}
.x6-widget-transform-cursor-w{
left: -6px;
margin-top: -3px;
}
}
} }
Loading…
Cancel
Save