smallstonesk
4 years ago
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