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