smallstonesk
4 years ago
23 changed files with 156 additions and 157 deletions
@ -0,0 +1,53 @@ |
|||||
|
import React from 'react'; |
||||
|
|
||||
|
import 'antd/es/menu/style'; |
||||
|
import styles from './index.module.less'; |
||||
|
|
||||
|
import {Graph} from '@antv/x6'; |
||||
|
import {safeGet} from '../../../utils'; |
||||
|
import {HighlightOutlined} from '@ant-design/icons'; |
||||
|
import ColorPicker from '../../../components/colorPicker'; |
||||
|
import makeDropdownWidget from './common/makeDropdownWidget'; |
||||
|
import {hasNodeSelected, getSelectedNodes} from '../../../utils/flowChartUtils'; |
||||
|
|
||||
|
interface IProps { |
||||
|
flowChart: Graph; |
||||
|
} |
||||
|
|
||||
|
const options = { |
||||
|
tooltip: '边框颜色', |
||||
|
getCurBorderColor(flowChart: Graph) { |
||||
|
let borderColor = '#DDD'; |
||||
|
const nodes = getSelectedNodes(flowChart); |
||||
|
if(!options.disabled(flowChart) && nodes.length > 0) { |
||||
|
borderColor = safeGet(nodes, '0.attrs.body.stroke', '#333'); |
||||
|
} |
||||
|
return borderColor; |
||||
|
}, |
||||
|
getIcon(flowChart: Graph) { |
||||
|
const borderColor = options.getCurBorderColor(flowChart); |
||||
|
return ( |
||||
|
<div className={styles.borderColorContainer}> |
||||
|
<HighlightOutlined className={styles.borderColorIcon}/> |
||||
|
<div className={styles.colorPreview} style={{backgroundColor: borderColor}}/> |
||||
|
</div> |
||||
|
); |
||||
|
}, |
||||
|
getOverlay(flowChart: Graph, onChange: (data: any) => void) { |
||||
|
const borderColor = options.getCurBorderColor(flowChart); |
||||
|
const onChangeComplete = (color: string) => onChange(color); |
||||
|
return ( |
||||
|
<ColorPicker color={borderColor} onChangeComplete={onChangeComplete}/> |
||||
|
); |
||||
|
}, |
||||
|
handler: (flowChart: Graph, value: any) => { |
||||
|
getSelectedNodes(flowChart).forEach(node => node.setAttrs({body: {stroke: value}})); |
||||
|
}, |
||||
|
disabled(flowChart: Graph) { |
||||
|
return !hasNodeSelected(flowChart); |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
const BorderColor: React.FC<IProps> = makeDropdownWidget(options); |
||||
|
|
||||
|
export default BorderColor; |
@ -1,7 +1,7 @@ |
|||||
import React, {ReactElement} from 'react'; |
import React, {ReactElement} from 'react'; |
||||
|
|
||||
import 'antd/es/tooltip/style'; |
import 'antd/es/tooltip/style'; |
||||
import styles from './index.module.less'; |
import styles from '../index.module.less'; |
||||
|
|
||||
import {Tooltip} from 'antd'; |
import {Tooltip} from 'antd'; |
||||
import {Graph} from '@antv/x6'; |
import {Graph} from '@antv/x6'; |
@ -1,54 +0,0 @@ |
|||||
import React from 'react'; |
|
||||
|
|
||||
import 'antd/es/menu/style'; |
|
||||
import styles from './index.module.less'; |
|
||||
|
|
||||
import {Graph} from '@antv/x6'; |
|
||||
import {safeGet} from '../../../utils'; |
|
||||
import {HighlightOutlined} from '@ant-design/icons'; |
|
||||
import makeDropdownWidget from './makeDropdownWidget'; |
|
||||
import ColorPicker from '../../../components/colorPicker'; |
|
||||
|
|
||||
interface IProps { |
|
||||
flowChart: Graph; |
|
||||
} |
|
||||
|
|
||||
const LineColor: React.FC<IProps> = makeDropdownWidget({ |
|
||||
tooltip: '线条颜色', |
|
||||
getIcon(flowChart: Graph) { |
|
||||
let lineColor = '#DDD'; |
|
||||
const cells = flowChart.getSelectedCells(); |
|
||||
if(cells.length > 0) { |
|
||||
lineColor = safeGet(cells, '0.attrs.body.stroke', '#333'); |
|
||||
} |
|
||||
return ( |
|
||||
<div className={styles.lineColorContainer}> |
|
||||
<HighlightOutlined className={styles.lineIcon}/> |
|
||||
<div className={styles.colorPreview} style={{backgroundColor: lineColor}}/> |
|
||||
</div> |
|
||||
); |
|
||||
}, |
|
||||
getOverlay(flowChart: Graph, onChange: (data: any) => void) { |
|
||||
let lineColor = '#DDD'; |
|
||||
const cells = flowChart.getSelectedCells(); |
|
||||
if(cells.length > 0) { |
|
||||
lineColor = safeGet(cells, '0.attrs.body.stroke', '#333'); |
|
||||
} |
|
||||
const onChangeComplete = (color: string) => onChange(color); |
|
||||
return ( |
|
||||
<ColorPicker color={lineColor} onChangeComplete={onChangeComplete}/> |
|
||||
); |
|
||||
}, |
|
||||
handler: (flowChart: Graph, value: any) => { |
|
||||
const cells = flowChart.getSelectedCells(); |
|
||||
if(cells.length > 0) { |
|
||||
cells.forEach(cell => cell.setAttrs({body: {stroke: value}})); |
|
||||
flowChart.trigger('toolBar:forceUpdate'); |
|
||||
} |
|
||||
}, |
|
||||
disabled(flowChart: Graph) { |
|
||||
return flowChart.getSelectedCellCount() === 0; |
|
||||
}, |
|
||||
}); |
|
||||
|
|
||||
export default LineColor; |
|
@ -0,0 +1,21 @@ |
|||||
|
import {Cell, Graph} from "@antv/x6"; |
||||
|
|
||||
|
export const hasCellSelected = (flowChart: Graph): boolean => { |
||||
|
return flowChart.getSelectedCellCount() > 0; |
||||
|
} |
||||
|
|
||||
|
export const hasNodeSelected = (flowChart: Graph): boolean => { |
||||
|
return flowChart.getSelectedCells().filter((cell: Cell) => cell.isNode()).length > 0; |
||||
|
}; |
||||
|
|
||||
|
export const hasEdgeSelected = (flowChart: Graph): boolean => { |
||||
|
return flowChart.getSelectedCells().filter((cell: Cell) => cell.isEdge()).length > 0; |
||||
|
}; |
||||
|
|
||||
|
export const getSelectedNodes = (flowChart: Graph): Cell[] => { |
||||
|
return flowChart.getSelectedCells().filter((cell: Cell) => cell.isNode()); |
||||
|
} |
||||
|
|
||||
|
export const getSelectedEdges = (flowChart: Graph): Cell[] => { |
||||
|
return flowChart.getSelectedCells().filter((cell: Cell) => cell.isEdge()); |
||||
|
} |
Loading…
Reference in new issue