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