Browse Source

Merge branch '0.3.x'

master
lenghui.yp 4 years ago
parent
commit
0f07bb8a32
  1. 1
      example/package.json
  2. 36
      packages/core/src/common/baseCell/behavior.ts
  3. 51
      packages/core/src/common/baseCell/branch.ts
  4. 40
      packages/core/src/common/baseCell/start.ts
  5. 6
      packages/core/src/common/previewCell/behavior.tsx
  6. 15
      packages/core/src/common/previewCell/branch.tsx
  7. 57
      packages/core/src/common/previewCell/index.module.less
  8. 6
      packages/core/src/common/previewCell/start.tsx
  9. 2
      packages/core/src/mods/flowChart/createFlowChart.ts
  10. 52
      packages/core/src/mods/flowChart/index.module.less

1
example/package.json

@ -1,4 +1,5 @@
{
"name": "example",
"scripts": {
"start": "umi dev",
"build": "umi build",

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',
},
},

6
packages/core/src/common/previewCell/behavior.tsx

@ -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>
);
};

15
packages/core/src/common/previewCell/branch.tsx

@ -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,
}}
/>

57
packages/core/src/common/previewCell/index.module.less

@ -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;
}

6
packages/core/src/common/previewCell/start.tsx

@ -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>
);
};

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

@ -30,3 +30,55 @@
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