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

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

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

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

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

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

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

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

@ -29,4 +29,56 @@
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;
}
}
// 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