4、连线的样式可以通过样式覆盖的方式修改，但是关闭按钮是图片，修改不了，现增加一个icon属性可以覆盖原图片，img url

Author: yanjun.zsj

src/drawLines.jsx

@@ -146,7 +146,7 @@ class DrawLines extends Component {
   }
   render() {
     const { startX, startY, drawing, endX, endY } = this.state;
-    const { relation, currentRelation, edit } = this.props;
+    const { relation, currentRelation, edit, closeIcon } = this.props;
     return <div className="lines-area" ref={me => {this.drawEle = me;}}>
       <svg width="100%" height="100%" version="1.1"
            xmlns="http://www.w3.org/2000/svg">
@@ -173,6 +173,7 @@ class DrawLines extends Component {
             endY={item.target.y}
             data={item}
             edit={edit}
+            closeIcon={closeIcon}
             toTop={this.topLine.bind(this)}
             currentRelation={currentRelation}
             removeRelation={this.removeRelation.bind(this)}
@@ -204,7 +205,8 @@ DrawLines.propTypes = {
   edit: PropTypes.bool.isRequired,
   currentRelation: PropTypes.object.isRequired,
   onChange: PropTypes.func.isRequired,
-  changeIconStatus: PropTypes.func.isRequired
+  changeIconStatus: PropTypes.func.isRequired,
+  closeIcon: PropTypes.string
 };
 DrawLines.defaultProps = {
   onDrawStart: () => {},

src/fieldMapping.jsx

@@ -117,7 +117,8 @@ class FieldMapping extends Component {
       onDrawStart,
       onDrawing,
       onDrawEnd,
-      edit
+      edit,
+      closeIcon
     } = this.props;
     const sourceOpt = {
       ref: (me) => {this.sourceCom = me;},
@@ -153,6 +154,7 @@ class FieldMapping extends Component {
       onDrawEnd,
       relation,
       edit,
+      closeIcon,
       currentRelation,
       onChange: this.changeRelation.bind(this),
       changeIconStatus: this.changeIconStatus.bind(this)
@@ -206,7 +208,8 @@ FieldMapping.propTypes = {
   onDrawStart: PropTypes.func,// function(params=source, relation)
   onDrawing: PropTypes.func,// function(params=source, relation)
   onDrawEnd: PropTypes.func,// function(params=source, relation)
-  edit: PropTypes.bool // 是否能操作线条编辑 default true
+  edit: PropTypes.bool, // 是否能操作线条编辑 default true
+  closeIcon: PropTypes.string // 关闭线条的icon url，不传用默认的关闭按钮
 };
 FieldMapping.defaultProps = {
   relation: [],

src/line.jsx

@@ -20,7 +20,8 @@ class Line extends Component {
       endY = 0,
       currentRelation,
       data,
-      edit
+      edit,
+      closeIcon
     } = this.props;
     return <g className={`path-end ${(currentRelation === data) ? "active" : ""} ${edit ? '' : 'disabled'}`} onMouseOver={() => {
       edit && this.props.toTop(this.props.data);
@@ -38,7 +39,7 @@ class Line extends Component {
         y={(endY + startY - iconSize[1])/2}
         width={iconSize[0]}
         height={iconSize[1]}
-        xlinkHref="//img.alicdn.com/tfs/TB1laCNsXYqK1RjSZLeXXbXppXa-200-200.png" />
+        xlinkHref={closeIcon || "//img.alicdn.com/tfs/TB1laCNsXYqK1RjSZLeXXbXppXa-200-200.png"} />
     </g>;
   }
 }
@@ -51,6 +52,7 @@ Line.propTypes = {
   edit: PropTypes.bool.isRequired,
   toTop: PropTypes.func.isRequired,
   currentRelation: PropTypes.object.isRequired,
-  removeRelation: PropTypes.func.isRequired
+  removeRelation: PropTypes.func.isRequired,
+  closeIcon: PropTypes.string
 };
 export default Line;