Browse Source

feat: add line style option into toolbar

master
smallstonesk 4 years ago
parent
commit
33ffaef283
  1. 2
      packages/core/src/components/xIcon/index.tsx
  2. 3
      packages/core/src/mods/toolBar/widgets/index.tsx
  3. 79
      packages/core/src/mods/toolBar/widgets/lineStyle.tsx

2
packages/core/src/components/xIcon/index.tsx

@ -7,7 +7,7 @@ interface IconFontProps {
} }
const XIcon: React.SFC<IconFontProps> = createFromIconfontCN({ const XIcon: React.SFC<IconFontProps> = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_2024452_lw8k0l261fe.js' scriptUrl: '//at.alicdn.com/t/font_2024452_02tul6sizoy9.js'
}); });
export default XIcon; export default XIcon;

3
packages/core/src/mods/toolBar/widgets/index.tsx

@ -12,6 +12,7 @@ import BgColor from './bgColor';
import FontSize from './fontSize'; import FontSize from './fontSize';
import TextColor from './textColor'; import TextColor from './textColor';
import LineColor from './lineColor'; import LineColor from './lineColor';
import LineStyle from './lineStyle';
import Underline from './underline'; import Underline from './underline';
import FitWindow from './fitWindow'; import FitWindow from './fitWindow';
import BringToTop from './bringToTop'; import BringToTop from './bringToTop';
@ -28,7 +29,7 @@ const tools: React.FC<IProps>[][] = [
[Zoom], [Zoom],
[FontSize, Bold, Italic, Underline, TextColor], [FontSize, Bold, Italic, Underline, TextColor],
[HorizontalAlign, VerticalAlign], [HorizontalAlign, VerticalAlign],
[BgColor, LineColor], [BgColor, LineColor, LineStyle],
[BringToTop, BringToBack] [BringToTop, BringToBack]
]; ];

79
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: <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…
Cancel
Save