diff --git a/packages/core/src/components/xIcon/index.tsx b/packages/core/src/components/xIcon/index.tsx index 5f190b6..2957ead 100644 --- a/packages/core/src/components/xIcon/index.tsx +++ b/packages/core/src/components/xIcon/index.tsx @@ -7,7 +7,7 @@ interface IconFontProps { } const XIcon: React.SFC = createFromIconfontCN({ - scriptUrl: '//at.alicdn.com/t/font_2024452_lw8k0l261fe.js' + scriptUrl: '//at.alicdn.com/t/font_2024452_02tul6sizoy9.js' }); export default XIcon; diff --git a/packages/core/src/mods/toolBar/widgets/index.tsx b/packages/core/src/mods/toolBar/widgets/index.tsx index 507f9a3..3924af2 100644 --- a/packages/core/src/mods/toolBar/widgets/index.tsx +++ b/packages/core/src/mods/toolBar/widgets/index.tsx @@ -12,6 +12,7 @@ import BgColor from './bgColor'; import FontSize from './fontSize'; import TextColor from './textColor'; import LineColor from './lineColor'; +import LineStyle from './lineStyle'; import Underline from './underline'; import FitWindow from './fitWindow'; import BringToTop from './bringToTop'; @@ -28,7 +29,7 @@ const tools: React.FC[][] = [ [Zoom], [FontSize, Bold, Italic, Underline, TextColor], [HorizontalAlign, VerticalAlign], - [BgColor, LineColor], + [BgColor, LineColor, LineStyle], [BringToTop, BringToBack] ]; diff --git a/packages/core/src/mods/toolBar/widgets/lineStyle.tsx b/packages/core/src/mods/toolBar/widgets/lineStyle.tsx new file mode 100644 index 0000000..d9f2956 --- /dev/null +++ b/packages/core/src/mods/toolBar/widgets/lineStyle.tsx @@ -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: , + attrs: { + type: 'straight', + strokeDasharray: '5, 0' + } + }, + dashed: { + text: '虚线', + icon: , + attrs: { + type: 'dashed', + strokeDasharray: '5, 5' + } + } +}; + +const LineStyle: React.FC = 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 ( + onChange(LINE_STYLE_MAP[key].attrs)}> + {Object.keys(LINE_STYLE_MAP).map((lineType: string) => ( + + {LINE_STYLE_MAP[lineType].icon} + {LINE_STYLE_MAP[lineType].text} + + ))} + + ); + }, + 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;