Browse Source

refactor: use normal html component to replace graph in sideBar

master
smallstonesk 4 years ago
parent
commit
12ad13c7a8
  1. 21
      packages/core/src/common/previewCell/behavior.ts
  2. 18
      packages/core/src/common/previewCell/behavior.tsx
  3. 29
      packages/core/src/common/previewCell/branch.ts
  4. 32
      packages/core/src/common/previewCell/branch.tsx
  5. 41
      packages/core/src/common/previewCell/index.module.less
  6. 10
      packages/core/src/common/previewCell/index.ts
  7. 22
      packages/core/src/common/previewCell/start.ts
  8. 18
      packages/core/src/common/previewCell/start.tsx
  9. 13
      packages/core/src/mods/flowChart/createFlowChart.ts
  10. 16
      packages/core/src/mods/sideBar/index.module.less
  11. 99
      packages/core/src/mods/sideBar/index.tsx

21
packages/core/src/common/previewCell/behavior.ts

@ -1,21 +0,0 @@
import { Shape } from '@antv/x6';
const schema = {
base: Shape.Rect,
shape: 'imove-behavior-preview',
top: 20,
width: 80,
height: 40,
label: '处理',
attrs: {
body: {
fill: '#AACCF7',
stroke: '#5E9CEE',
},
label: {
fill: '#333',
},
},
};
export default schema;

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

@ -0,0 +1,18 @@
import React from 'react';
import styles from './index.module.less';
interface IProps {
title?: string;
}
const Cell: React.FC<IProps> = (props) => {
const { title = '处理', ...rest } = props;
return (
<div className={styles.rect} {...rest}>
{title}
</div>
);
};
export default Cell;

29
packages/core/src/common/previewCell/branch.ts

@ -1,29 +0,0 @@
import { Shape } from '@antv/x6';
const schema = {
base: Shape.Polygon,
shape: 'imove-branch-preview',
top: 20,
width: 80,
height: 40,
label: '分支',
attrs: {
body: {
strokeWidth: 2,
stroke: '#333',
fill: '#FFFC7C',
refPoints: '0,10 10,0 20,10 10,20',
},
label: {
refX: 0.5,
refY: 0.5,
text: '判断',
fill: '#333',
fontSize: 14,
textAnchor: 'middle',
textVerticalAnchor: 'middle',
},
},
};
export default schema;

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

@ -0,0 +1,32 @@
import React from 'react';
import styles from './index.module.less';
interface IProps {
title?: string;
}
const Cell: React.FC<IProps> = (props) => {
const { title = '判断', ...rest } = props;
return (
<div className={styles.diamond} {...rest}>
<svg
width={'100%'}
height={'100%'}
xmlns={'http://www.w3.org/1999/xlink'}
>
<polygon
points={'2,15 28,2 58,15 30,28'}
style={{
fill: '#FFFC7C',
stroke: '#333',
strokeWidth: 2,
}}
/>
</svg>
<span className={styles.text}>{title}</span>
</div>
);
};
export default Cell;

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

@ -0,0 +1,41 @@
.circle {
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 {
position: relative;
width: 60px;
height: 30px;
font-size: 11px;
.text {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
line-height: 30px;
text-align: center;
}
}

10
packages/core/src/common/previewCell/index.ts

@ -2,10 +2,10 @@ import start from './start';
import branch from './branch';
import behavior from './behavior';
const cellSchemaMap: { [key: string]: any } = {
'imove-start-preview': start,
'imove-branch-preview': branch,
'imove-behavior-preview': behavior,
const cellMap: { [key: string]: any } = {
'imove-start': start,
'imove-branch': branch,
'imove-behavior': behavior,
};
export default cellSchemaMap;
export default cellMap;

22
packages/core/src/common/previewCell/start.ts

@ -1,22 +0,0 @@
import { Shape } from '@antv/x6';
const schema = {
base: Shape.Circle,
shape: 'imove-start-preview',
top: 0,
width: 80,
height: 80,
label: '开始',
attrs: {
body: {
strokeWidth: 0,
stroke: '#333',
fill: '#333',
},
label: {
fill: '#FFF',
},
},
};
export default schema;

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

@ -0,0 +1,18 @@
import React from 'react';
import styles from './index.module.less';
interface IProps extends React.HTMLProps<HTMLDivElement> {
title?: string;
}
const Cell: React.FC<IProps> = (props) => {
const { title = '开始', ...rest } = props;
return (
<div className={styles.circle} {...rest}>
{title}
</div>
);
};
export default Cell;

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

@ -2,18 +2,15 @@ import shortcuts from '../../common/shortcuts';
import { Cell, Edge, Graph, Node } from '@antv/x6';
import { MIN_ZOOM, MAX_ZOOM } from '../../common/const';
import baseCellSchemaMap from '../../common/baseCell';
import previewCellSchemaMap from '../../common/previewCell';
import { getSelectedEdges } from '../../utils/flowChartUtils';
import { registerServerStorage } from './registerServerStorage';
import MiniMapSimpleNode from '../../components/miniMapSimpleNode';
// X6 register base/preview cell shape
[baseCellSchemaMap, previewCellSchemaMap].forEach((schemas) =>
Object.values(schemas).forEach((schema) => {
const { base, ...rest } = schema;
base.define(rest);
}),
);
// X6 register base cell shape
Object.values(baseCellSchemaMap).forEach((schema) => {
const { base, ...rest } = schema;
base.define(rest);
});
const registerEvents = (flowChart: Graph): void => {
flowChart.on('node:added', (args) => {

16
packages/core/src/mods/sideBar/index.module.less

@ -13,7 +13,17 @@
}
}
.chart {
width: 100%;
min-width: 201px;
.panelContent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
.cellWrapper {
display: flex;
justify-content: center;
align-items: center;
margin: 8px;
width: 60px;
height: 60px;
}
}

99
packages/core/src/mods/sideBar/index.tsx

@ -1,35 +1,24 @@
import React, { useState, useEffect, useRef } from 'react';
import React, { useState, useEffect, useMemo } from 'react';
import 'antd/es/collapse/style';
import styles from './index.module.less';
import { Collapse } from 'antd';
import { Addon, Events, Graph, Node } from '@antv/x6';
import previewCellSchemaMap from '../../common/previewCell';
import { Addon, Graph, Node } from '@antv/x6';
import cellMap from '../../common/previewCell';
const { Dnd } = Addon;
const { Panel } = Collapse;
const CELL_SIZE = 80;
const CELL_SCALE = 0.7;
const GENERAL_GROUP = {
key: 'general',
name: '通用元件',
cells: [
'imove-start-preview',
'imove-branch-preview',
'imove-behavior-preview',
],
};
const SHAPE_REFLECT_MAP: { [key: string]: string } = {
'imove-start-preview': 'imove-start',
'imove-branch-preview': 'imove-branch',
'imove-behavior-preview': 'imove-behavior',
cellTypes: ['imove-start', 'imove-branch', 'imove-behavior'],
};
interface IGroupItem {
key: string;
name: string;
cells: string[];
cellTypes: string[];
}
interface ISideBarProps {
@ -38,73 +27,55 @@ interface ISideBarProps {
const SideBar: React.FC<ISideBarProps> = (props) => {
const { flowChart } = props;
const [dnd, setDnd] = useState<Addon.Dnd>();
const [groups, setGroups] = useState<IGroupItem[]>([]);
const dnd = useMemo(() => new Dnd({ target: flowChart, scaled: true }), [
flowChart,
]);
// life
useEffect(() => {
// TODO: fetch to get custom group data
setGroups([GENERAL_GROUP]);
setDnd(new Dnd({ target: flowChart, scaled: true }));
}, []);
return (
<div className={styles.container}>
{dnd && (
<Collapse
className={styles.collapse}
defaultActiveKey={['general', 'custom']}
>
{groups.map((group) => (
<Panel key={group.key} header={group.name}>
<PanelContent dnd={dnd} cells={group.cells} />
</Panel>
))}
</Collapse>
)}
<Collapse
className={styles.collapse}
defaultActiveKey={['general', 'custom']}
>
{groups.map((group) => (
<Panel key={group.key} header={group.name}>
<PanelContent dnd={dnd} cellTypes={group.cellTypes} />
</Panel>
))}
</Collapse>
</div>
);
};
interface IPanelContentProps {
dnd: Addon.Dnd;
cells: string[];
cellTypes: string[];
}
const PanelContent: React.FC<IPanelContentProps> = (props) => {
const { dnd, cells } = props;
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (ref.current) {
const graph = new Graph({
container: ref.current,
width: ref.current.offsetWidth,
height: Math.ceil(cells.length / 3) * CELL_SIZE * CELL_SCALE,
interacting: false,
preventDefaultBlankAction: false,
});
cells.forEach((cell: any, index: number) => {
const rowIdx = Math.floor(index / 3);
const colIdx = index % 3;
const { top } = previewCellSchemaMap[cell] || {};
graph.addNode({
shape: cell,
x: colIdx * (CELL_SIZE + 16 / CELL_SCALE),
y: rowIdx * (CELL_SIZE + 16 / CELL_SCALE) + top,
});
});
graph.scale(CELL_SCALE, CELL_SCALE);
graph.on('cell:mousedown', (args: Events.EventArgs['cell:mousedown']) => {
const { node, e } = args;
let newNode = node;
if (SHAPE_REFLECT_MAP[node.shape]) {
newNode = Node.create({ shape: SHAPE_REFLECT_MAP[node.shape] });
}
dnd.start(newNode, e);
});
}
}, []);
return <div className={styles.chart} ref={ref} />;
const { dnd, cellTypes } = props;
const onMouseDown = (evt: any, cellType: string) => {
dnd.start(Node.create({ shape: cellType }), evt);
};
return (
<div className={styles.panelContent}>
{cellTypes.map((cellType, index) => {
const Component = cellMap[cellType];
return (
<div key={index} className={styles.cellWrapper}>
<Component onMouseDown={(evt: any) => onMouseDown(evt, cellType)} />
</div>
);
})}
</div>
);
};
export default SideBar;

Loading…
Cancel
Save