Browse Source
Merge pull request #98 from qilei0529/pref/dev-playground
feat: 美化 主界面节点样式
master
SmallStone
4 years ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with
165 additions and
100 deletions
-
packages/core/src/common/baseCell/behavior.ts
-
packages/core/src/common/baseCell/branch.ts
-
packages/core/src/common/baseCell/start.ts
-
packages/core/src/common/previewCell/behavior.tsx
-
packages/core/src/common/previewCell/branch.tsx
-
packages/core/src/common/previewCell/index.module.less
-
packages/core/src/common/previewCell/start.tsx
-
packages/core/src/mods/flowChart/createFlowChart.ts
-
packages/core/src/mods/flowChart/index.module.less
|
|
@ -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', |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
@ -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: '', |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
@ -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', |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
@ -9,8 +9,10 @@ interface IProps { |
|
|
|
const Cell: React.FC<IProps> = (props) => { |
|
|
|
const { title = '处理', ...rest } = props; |
|
|
|
return ( |
|
|
|
<div className={styles.rect} {...rest}> |
|
|
|
{title} |
|
|
|
<div className={styles.box} {...rest}> |
|
|
|
<div className={styles.rect}> |
|
|
|
<span className={styles.text}>{title}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
@ -8,18 +8,15 @@ interface IProps { |
|
|
|
|
|
|
|
const Cell: React.FC<IProps> = (props) => { |
|
|
|
const { title = '判断', ...rest } = props; |
|
|
|
const z = (n: any) => n * 1.2; |
|
|
|
return ( |
|
|
|
<div className={styles.diamond} {...rest}> |
|
|
|
<svg |
|
|
|
width={'100%'} |
|
|
|
height={'100%'} |
|
|
|
xmlns={'http://www.w3.org/1999/xlink'} |
|
|
|
> |
|
|
|
<div className={styles.box} {...rest}> |
|
|
|
<svg width={z(40)} height={z(30)} xmlns={'http://www.w3.org/1999/xlink'}> |
|
|
|
<polygon |
|
|
|
points={'2,15 28,2 58,15 30,28'} |
|
|
|
points={`0,${z(15)} ${z(20)},0 ${z(40)},${z(15)} ${z(20)},${z(30)}`} |
|
|
|
style={{ |
|
|
|
fill: '#FFFC7C', |
|
|
|
stroke: '#333', |
|
|
|
fill: '#FFF6D1', |
|
|
|
stroke: '#FFB96B', |
|
|
|
strokeWidth: 2, |
|
|
|
}} |
|
|
|
/> |
|
|
|
|
|
@ -1,41 +1,48 @@ |
|
|
|
.circle { |
|
|
|
.box { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
width: 60px; |
|
|
|
height: 60px; |
|
|
|
border-radius: 30px; |
|
|
|
font-size: 11px; |
|
|
|
color: #FFF; |
|
|
|
background-color: #333; |
|
|
|
} |
|
|
|
|
|
|
|
.rect { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
width: 60px; |
|
|
|
height: 30px; |
|
|
|
font-size: 11px; |
|
|
|
color: #333; |
|
|
|
background-color: #AACCF7; |
|
|
|
border: 2px solid #5E9CEE; |
|
|
|
} |
|
|
|
|
|
|
|
.diamond { |
|
|
|
background-color: #f2f2f2; |
|
|
|
position: relative; |
|
|
|
width: 60px; |
|
|
|
height: 30px; |
|
|
|
font-size: 11px; |
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
.text { |
|
|
|
z-index: 1; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
top: 15px; |
|
|
|
left: 0; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
font-size: 11px; |
|
|
|
height: 30px; |
|
|
|
line-height: 30px; |
|
|
|
text-align: center; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.circle { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
width: 40px; |
|
|
|
height: 40px; |
|
|
|
border-radius: 30px; |
|
|
|
color: #FFF; |
|
|
|
background-color: #6B8CD7; |
|
|
|
border: 2px solid #4E68A3; |
|
|
|
} |
|
|
|
|
|
|
|
.rect { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
width: 52px; |
|
|
|
height: 30px; |
|
|
|
font-size: 12px; |
|
|
|
color: #333; |
|
|
|
border-radius: 4px; |
|
|
|
background-color: #BCD0FF; |
|
|
|
border: 2px solid #6B8CD7; |
|
|
|
} |
|
|
@ -9,8 +9,10 @@ interface IProps extends React.HTMLProps<HTMLDivElement> { |
|
|
|
const Cell: React.FC<IProps> = (props) => { |
|
|
|
const { title = '开始', ...rest } = props; |
|
|
|
return ( |
|
|
|
<div className={styles.circle} {...rest}> |
|
|
|
{title} |
|
|
|
<div className={styles.box} {...rest}> |
|
|
|
<div className={styles.circle}> |
|
|
|
<span className={styles.text}>{title}</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
@ -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: { |
|
|
|
|
|
@ -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; |
|
|
|
} |
|
|
|
} |
|
|
|
} |