1、修复组件初始化后，组件位置发生变化，拉线位置错乱的问题

2、babel升级（6->7）

Author: yanjun.zsj

.babelrc

@@ -1,6 +1,14 @@
 {
-  "presets": ["react", "es2015", "stage-3"],
+  "presets": ["@babel/preset-react", "@babel/preset-env"],
   "plugins": [
-    "transform-runtime"
+    "@babel/plugin-transform-runtime",
+    ["@babel/plugin-proposal-class-properties", { "loose": true }],
+    // Stage 1
+    "@babel/plugin-proposal-export-default-from",
+    "@babel/plugin-proposal-logical-assignment-operators",
+    ["@babel/plugin-proposal-optional-chaining", { "loose": false }],
+    ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }],
+    ["@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }],
+    "@babel/plugin-proposal-do-expressions"
   ]
 }

package.json

@@ -31,32 +31,39 @@
     "LICENSE"
   ],
   "devDependencies": {
-    "babel-eslint": "^10.0.1",
-    "eslint": "^5.0.1",
-    "eslint-loader": "^2.0.0",
-    "eslint-plugin-react": "^7.10.0",
+    "@babel/plugin-proposal-class-properties": "^7.7.0",
+    "@babel/plugin-proposal-do-expressions": "^7.6.0",
+    "@babel/plugin-proposal-export-default-from": "^7.5.2",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.2.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
+    "@babel/plugin-proposal-pipeline-operator": "^7.5.0",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.4.0",
+    "eslint-loader": "^3.0.0",
+    "eslint-plugin-react": "^7.14.3",
     "jsinspect": "^0.12.7",
-    "less": "^3.8.1",
-    "webpack-dev-server": "^3.1.5"
+    "less": "^3.10.3",
+    "webpack-dev-server": "^3.8.1"
   },
   "dependencies": {
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-3": "^6.24.1",
-    "cross-env": "^5.1.1",
-    "css-loader": "^0.28.7",
-    "less-loader": "^4.0.5",
+    "@babel/core": "^7.6.0",
+    "@babel/plugin-transform-runtime": "^7.6.0",
+    "@babel/polyfill": "^7.6.0",
+    "@babel/preset-env": "^7.6.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/runtime": "^7.6.0",
+    "babel-loader": "^8.0.6",
+    "cross-env": "^6.0.0",
+    "css-loader": "^3.2.0",
+    "less-loader": "^5.0.0",
+    "style-loader": "^1.0.0",
+    "url-loader": "^2.1.0",
+    "webpack": "^4.40.2",
+    "webpack-cli": "^3.3.9",
     "lodash": "^4.17.11",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
-    "sortablejs": "^1.7.0",
-    "style-loader": "^0.19.0",
-    "url-loader": "^0.6.2",
-    "webpack": "^4.16.5",
-    "webpack-cli": "^3.1.0"
+    "sortablejs": "^1.7.0"
   }
 }

src/drawLines.jsx

@@ -16,30 +16,30 @@ const defaultState = {
 };
 
 class DrawLines extends Component {
+  baseXY = {
+    left: 0,
+    top: 0
+  }
   constructor(props) {
     super(props);
     this.state = {
-      baseXY:{
-        left: 0,
-        top: 0
-      },
       ...defaultState
     };
   }
   componentDidMount() {
     const me = this;
-    const baseXY = getOffset(this.drawEle);
+    this.baseXY = getOffset(this.drawEle);
     const box = document.querySelector('.react-field-mapping-box');
     let scrollTop = 0;
     let scrollLeft = 0;
-    this.setState({
-      baseXY
-    });
     document.documentElement.onmousedown = (event) => {
       const eventDom = event.target;
       const className = eventDom && eventDom.className;
       if (className && typeof className === "string" && className.indexOf("source-column-icon") > -1) {
         event.preventDefault();
+        if(this.baseXY !== getOffset(this.drawEle)) {
+          this.baseXY = getOffset(this.drawEle);
+        }
         let scrollEle = box;
         document.body.classList.add("user-select-none");
         const sourceData = _.find(me.props.sourceData, (o) => {
@@ -66,8 +66,8 @@ class DrawLines extends Component {
       if (this.state.drawing) {
         me.props.onDrawing && me.props.onDrawing(me.state.sourceData, me.props.relation);
         me.setState({
-          endX: event.pageX - baseXY.left + scrollLeft,
-          endY: event.pageY - baseXY.top + scrollTop
+          endX: event.pageX - this.baseXY.left + scrollLeft,
+          endY: event.pageY - this.baseXY.top + scrollTop
         });
       }
     };
@@ -111,8 +111,8 @@ class DrawLines extends Component {
   }
   domOperate(eventDom) {
     return {
-      left: getOffset(eventDom).left - this.state.baseXY.left + 3,
-      top: getOffset(eventDom).top - this.state.baseXY.top + 6,
+      left: getOffset(eventDom).left - this.baseXY.left + 3,
+      top: getOffset(eventDom).top - this.baseXY.top + 6,
       key: eventDom.offsetParent.getAttribute('data-key')
     };
   }

src/util.js

@@ -2,7 +2,7 @@
  * @Author: yanjun.zsj
  * @Date: 2019-07-30 14:05:00
  * @LastEditors: yanjun.zsj
- * @LastEditTime: 2019-11-21 17:50:18
+ * @LastEditTime: 2019-11-22 19:00:58
  */
 /* @author yanjun.zsj
  * @date 2018.11

webpack.config.js

@@ -6,7 +6,7 @@ const path = require("path");
 const webpack = require("webpack");
 const env = process.env.NODE_ENV;
 const entry = {
-  fieldmapping: './src/index.js'
+  fieldmapping: ['@babel/polyfill', './src/index.js']
 };
 const plugins = [
   new webpack.HotModuleReplacementPlugin(),
@@ -40,7 +40,8 @@ module.exports = {
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'src')
-    }
+    },
+    extensions: ['.jsx', '.less', '.css', '.wasm', '.mjs', '.js', '.json']
   },
   module: {
     rules: [{
@@ -49,7 +50,7 @@ module.exports = {
       include: [
         path.resolve(__dirname, 'src')
       ],
-      loader: 'babel-loader'
+      loader: ['babel-loader', 'eslint-loader']
     }, {
       test: /\.(png|jpg|gif)$/,
       use: [
@@ -64,12 +65,7 @@ module.exports = {
       test: /\.(less|css)$/,
       exclude: /node_modules/,
       use: ['style-loader', 'css-loader', 'less-loader']
-    }, {
-      test: /\.(js|jsx)$/,
-      exclude: /node_modules/,
-      loader: 'eslint-loader'
-    }
-    ]
+    }]
   },
   plugins: plugins
 };