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 'antd/es/tooltip/style'; |
|||
import styles from './index.module.less'; |
|||
import styles from '../index.module.less'; |
|||
|
|||
import {Tooltip} from 'antd'; |
|||
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