3 changed files with 82 additions and 2 deletions
			
			
		| @ -0,0 +1,79 @@ | |||
| import React, {ReactElement} from 'react'; | |||
| 
 | |||
| import 'antd/es/menu/style'; | |||
| 
 | |||
| import {Menu} from 'antd'; | |||
| import {Graph, Cell} from '@antv/x6'; | |||
| import {safeGet} from '../../../utils'; | |||
| import XIcon from '../../../components/xIcon'; | |||
| import makeDropdownWidget from './makeDropdownWidget'; | |||
| 
 | |||
| interface IProps { | |||
|   flowChart: Graph; | |||
| } | |||
| 
 | |||
| interface LineStyleItem { | |||
|   text: string; | |||
|   icon: ReactElement; | |||
|   attrs: { | |||
|     type: string; | |||
|     strokeDasharray: string; | |||
|   } | |||
| } | |||
| 
 | |||
| const MenuItem = Menu.Item; | |||
| const LINE_STYLE_MAP: {[key: string]: LineStyleItem} = { | |||
|   straight: { | |||
|     text: '直线', | |||
|     icon: <XIcon type={'icon-line'}/>, | |||
|     attrs: { | |||
|       type: 'straight', | |||
|       strokeDasharray: '5, 0' | |||
|     } | |||
|   }, | |||
|   dashed: { | |||
|     text: '虚线', | |||
|     icon: <XIcon type={'icon-dash'}/>, | |||
|     attrs: { | |||
|       type: 'dashed', | |||
|       strokeDasharray: '5, 5' | |||
|     } | |||
|   } | |||
| }; | |||
| 
 | |||
| const LineStyle: React.FC<IProps> = makeDropdownWidget({ | |||
|   tooltip: '线条样式', | |||
|   getIcon(flowChart: Graph) { | |||
|     let lineType = 'straight'; | |||
|     const cells = flowChart.getSelectedCells(); | |||
|     if(cells.length > 0) { | |||
|       lineType = safeGet(cells, '0.attrs.line.type', 'straight'); | |||
|     } | |||
|     return LINE_STYLE_MAP[lineType].icon; | |||
|   }, | |||
|   getOverlay(flowChart: Graph, onChange: (data: any) => void) { | |||
|     return ( | |||
|       <Menu onClick={({key}) => onChange(LINE_STYLE_MAP[key].attrs)}> | |||
|         {Object.keys(LINE_STYLE_MAP).map((lineType: string) => ( | |||
|           <MenuItem key={lineType}> | |||
|             {LINE_STYLE_MAP[lineType].icon} | |||
|             <span>{LINE_STYLE_MAP[lineType].text}</span> | |||
|           </MenuItem> | |||
|         ))} | |||
|       </Menu> | |||
|     ); | |||
|   }, | |||
|   handler: (flowChart: Graph, value: any) => { | |||
|     const edges = flowChart.getSelectedCells().filter((cell: Cell) => cell.isEdge()); | |||
|     if(edges.length > 0) { | |||
|       edges.forEach(edge => edge.setAttrs({line: value})); | |||
|       flowChart.trigger('toolBar:forceUpdate'); | |||
|     } | |||
|   }, | |||
|   disabled(flowChart: Graph) { | |||
|     const edges = flowChart.getSelectedCells().filter((cell: Cell) => cell.isEdge()); | |||
|     return edges.length === 0; | |||
|   }, | |||
| }); | |||
| 
 | |||
| export default LineStyle; | |||
					Loading…
					
					
				
		Reference in new issue