From e5d2f807c91415b871201fd3fe5c503216c2b1f1 Mon Sep 17 00:00:00 2001
From: break60 <790061044@qq.com>
Date: Thu, 30 Jul 2020 11:55:17 +0800
Subject: [PATCH 1/4] [bugFix][ui] Cannot select connection

---
 .../pages/dag/_source/plugIn/jsPlumbHandle.js   | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
index b1121c881d..2d5f938e7a 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
@@ -84,11 +84,10 @@ JSP.prototype.init = function ({ dag, instance, options }) {
   // Monitor line click
   this.JspInstance.bind('click', e => {
     // Untie event
-  if (this.config.isDblclick) {
-    findComponentDownward(this.dag.$root, 'dag-chart')._createLineLabel({id: e._jsPlumb.overlays.label.canvas.id, sourceId: e.sourceId, targetId: e.targetId})
-    }
     if (this.config.isClick) {
       this.connectClick(e)
+    } else {
+      findComponentDownward(this.dag.$root, 'dag-chart')._createLineLabel({id: e._jsPlumb.overlays.label.canvas.id, sourceId: e.sourceId, targetId: e.targetId})
     }
   })
 
@@ -496,6 +495,16 @@ JSP.prototype.removeNodes = function ($id) {
 
   // callback onRemoveNodes event
   this.options && this.options.onRemoveNodes && this.options.onRemoveNodes($id)
+  let connects = []
+  _.map(this.JspInstance.getConnections(), v => {
+    connects.push({
+      endPointSourceId: v.sourceId,
+      endPointTargetId: v.targetId,
+      label: v._jsPlumb.overlays.label.canvas.innerText
+    })
+  })
+  // Storage line dependence
+  store.commit('dag/setConnects', connects)
 }
 
 /**
@@ -819,4 +828,4 @@ JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) {
   this.draggable()
 }
 
-export default new JSP()
+export default new JSP()
\ No newline at end of file

From 80c5c66ce9f32037858ec2dc7bca87b5f763feb1 Mon Sep 17 00:00:00 2001
From: break60 <790061044@qq.com>
Date: Thu, 30 Jul 2020 14:03:23 +0800
Subject: [PATCH 2/4] fix

---
 .../conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
index 2d5f938e7a..5212484aab 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
@@ -632,10 +632,10 @@ JSP.prototype.saveStore = function () {
     // task
     _.map(_.cloneDeep(store.state.dag.tasks), v => {
       if (is(v.id)) {
-        const preTasks = []
-        const id = $(`#${v.id}`)
-        const tar = id.attr('data-targetarr')
-        const idDep = tar ? id.attr('data-targetarr').split(',') : []
+        let preTasks = []
+        let id = $(`#${v.id}`)
+        let tar = id.attr('data-targetarr')
+        let idDep = tar ? id.attr('data-targetarr').split(',') : []
         if (idDep.length) {
           _.map(idDep, v1 => {
             preTasks.push($(`#${v1}`).find('.name-p').text())

From e5f239530c42f3b6efc2567dbbe0661564ec4da4 Mon Sep 17 00:00:00 2001
From: break60 <790061044@qq.com>
Date: Sat, 1 Aug 2020 14:59:57 +0800
Subject: [PATCH 3/4] Remove the new label label function

---
 .../js/conf/home/pages/dag/_source/dag.vue    |  54 +-------
 .../dag/_source/formModel/formLineModel.vue   | 122 ------------------
 .../pages/dag/_source/plugIn/jsPlumbHandle.js |  49 ++-----
 .../src/js/conf/home/store/dag/mutations.js   |   8 --
 4 files changed, 14 insertions(+), 219 deletions(-)
 delete mode 100644 dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
index c40bd19478..2cb7de6e08 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
@@ -166,7 +166,7 @@
     },
     methods: {
       ...mapActions('dag', ['saveDAGchart', 'updateInstance', 'updateDefinition', 'getTaskState']),
-      ...mapMutations('dag', ['addTasks', 'cacheTasks', 'resetParams', 'setIsEditDag', 'setName', 'addConnects']),
+      ...mapMutations('dag', ['addTasks', 'cacheTasks', 'resetParams', 'setIsEditDag', 'setName']),
 
       // DAG automatic layout
       dagAutomaticLayout() {
@@ -195,14 +195,9 @@
                 length: 12,
                 foldback: 0.8
               }
-            ],
-            ['Label', {
-                location: 0.5,
-                id: 'label'
-            }]
+            ]
           ],
-          Container: 'canvas',
-          ConnectionsDetachable: true
+          Container: 'canvas'
         })
       })
         if (this.tasks.length) {
@@ -508,40 +503,6 @@
        * Create a node popup layer
        * @param Object id
        */
-      _createLineLabel({id, sourceId, targetId}) {
-        // $('#jsPlumb_2_50').text('111')
-        let self = this
-        self.$modal.destroy()
-        const removeNodesEvent = (fromThis) => {
-          // Manually destroy events inside the component
-          fromThis.$destroy()
-          // Close the popup
-          eventModel.remove()
-        }
-        eventModel = this.$drawer({
-          className: 'dagMask',
-          render (h) {
-            return h(mFormLineModel,{
-              on: {
-                addLineInfo ({ item, fromThis }) {
-                  self.addConnects(item)
-                  setTimeout(() => {
-                    removeNodesEvent(fromThis)
-                  }, 100)
-                },
-                cancel ({fromThis}) {
-                  removeNodesEvent(fromThis)
-                }
-              },
-              props: {
-                id: id,
-                sourceId: sourceId,
-                targetId: targetId
-              }
-            })
-          }
-        })
-      },
       _createNodes ({ id, type }) {
         let self = this
         self.$modal.destroy()
@@ -676,14 +637,9 @@
                 length: 12,
                 foldback: 0.8
               }
-            ],
-            ['Label', {
-                location: 0.5,
-                id: 'label'
-            }]
+            ]
           ],
-          Container: 'canvas',
-          ConnectionsDetachable: true
+          Container: 'canvas'
         })
       })
     },
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue
deleted file mode 100644
index 2864b3c720..0000000000
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/formModel/formLineModel.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-<template>
-  <div class="form-model-model" v-clickoutside="_handleClose">
-    <div class="title-box">
-      <span class="name">{{$t('Current connection settings')}}</span>
-    </div>
-    <div class="content-box">
-      <div class="from-model">
-        <!-- Node name -->
-        <div class="clearfix list">
-          <div class="text-box"><span>{{$t('Connection name')}}</span></div>
-          <div class="cont-box">
-            <label class="label-box">
-              <x-input
-                type="text"
-                v-model="labelName"
-                :disabled="isDetails"
-                :placeholder="$t('Please enter name')"
-                maxlength="100"
-                autocomplete="off">
-              </x-input>
-            </label>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="bottom-box">
-      <div class="submit" style="background: #fff;">
-        <x-button type="text" @click="cancel()"> {{$t('Cancel')}} </x-button>
-        <x-button type="primary" shape="circle" :loading="spinnerLoading" @click="ok()" :disabled="isDetails">{{spinnerLoading ? 'Loading...' : $t('Confirm add')}} </x-button>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-  import _ from 'lodash'
-  import { mapActions } from 'vuex'
-  import i18n from '@/module/i18n'
-  import JSP from './../plugIn/jsPlumbHandle'
-  import disabledState from '@/module/mixin/disabledState'
-
-  export default {
-    name: 'form-line-model',
-    data () {
-      return {
-          // loading
-        spinnerLoading: false,
-        // node name
-        labelName: '',
-      }
-    },
-    mixins: [disabledState],
-    props: {
-      id: String,
-      sourceId: String,
-      targetId: String
-    },
-    methods: {
-        cancel() {
-            this.$emit('cancel', {
-                fromThis: this
-            })
-        },
-        ok() {
-          if($(`#${this.id}`).prev().attr('class')==='jtk-overlay') {
-            $(`#${this.id}`).prev().empty()
-          }
-          $(`#${this.id}`).text(this.labelName)
-            this.$emit('addLineInfo', {
-              item: {
-                labelName: this.labelName,
-                sourceId: this.sourceId,
-                targetId: this.targetId
-              },
-              fromThis: this
-            })
-        }
-    }, 
-    watch: {
-      
-    },
-    created () {
-      if($(`#${this.id}`).prev().attr('class').indexOf('jtk-overlay')!==-1) {
-        this.labelName = $(`#${this.id}`).prev().text()
-      } else {
-        this.labelName = $(`#${this.id}`).text()
-      }
-    },
-    mounted () {
-      
-    },
-    updated () {
-    },
-    beforeDestroy () {
-    },
-    destroyed () {
-    },
-    computed: {
-      
-    },
-    components: {}
-  }
-</script>
-
-<style lang="scss" rel="stylesheet/scss">
-
-</style>
diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
index 5212484aab..fc91f6ebd4 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js
@@ -83,11 +83,8 @@ JSP.prototype.init = function ({ dag, instance, options }) {
 
   // Monitor line click
   this.JspInstance.bind('click', e => {
-    // Untie event
     if (this.config.isClick) {
       this.connectClick(e)
-    } else {
-      findComponentDownward(this.dag.$root, 'dag-chart')._createLineLabel({id: e._jsPlumb.overlays.label.canvas.id, sourceId: e.sourceId, targetId: e.targetId})
     }
   })
 
@@ -654,39 +651,13 @@ JSP.prototype.saveStore = function () {
         tasks.push(tasksParam)
       }
     })
-    if(store.state.dag.connects.length ===this.JspInstance.getConnections().length) {
-      _.map(store.state.dag.connects, u => {
-        connects.push({
-          endPointSourceId: u.endPointSourceId,
-          endPointTargetId: u.endPointTargetId,
-          label: u.label
-        })
-      })
-    } else if(store.state.dag.connects.length>0 && store.state.dag.connects.length < this.JspInstance.getConnections().length) {
-      _.map(this.JspInstance.getConnections(), v => {
-        connects.push({
-          endPointSourceId: v.sourceId,
-          endPointTargetId: v.targetId,
-          label: v._jsPlumb.overlays.label.canvas.innerText
-        })
-      })
-      _.map(store.state.dag.connects, u => {
-        _.map(connects, v => {
-          if(u.label && u.endPointSourceId === v.endPointSourceId && u.endPointTargetId===v.endPointTargetId) {
-            v.label = u.label
-          }
-        })
-      })
-    } else if(store.state.dag.connects.length===0) {
-      _.map(this.JspInstance.getConnections(), v => {
-        connects.push({
-          endPointSourceId: v.sourceId,
-          endPointTargetId: v.targetId,
-          label: v._jsPlumb.overlays.label.canvas.innerText
-        })
-      })
-    }
     
+    _.map(this.JspInstance.getConnections(), v => {
+      connects.push({
+        endPointSourceId: v.sourceId,
+        endPointTargetId: v.targetId
+      })
+    })
     _.map(tasksAll(), v => {
       locations[v.id] = {
         name: v.name,
@@ -779,7 +750,6 @@ JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) {
     _.map(connects, v => {
       let sourceId = v.endPointSourceId.split('-')
       let targetId = v.endPointTargetId.split('-')
-      let labels = v.label
       if (sourceId.length === 4 && targetId.length === 4) {
         sourceId = `${sourceId[0]}-${sourceId[1]}-${sourceId[2]}`
         targetId = `${targetId[0]}-${targetId[1]}-${targetId[2]}`
@@ -795,7 +765,7 @@ JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) {
           type: 'basic',
           paintStyle: { strokeWidth: 2, stroke: '#4caf50' },
           HoverPaintStyle: {stroke: '#ccc', strokeWidth: 3},
-          overlays:[["Label", { label: labels} ]]
+          overlays:[["Label", { label: i18n.$t('success'), location:0.5, id:"label"} ]]
         })
       } else if($(`#${sourceId}`).attr('data-tasks-type') === 'CONDITIONS' && $(`#${sourceId}`).attr('data-failednode') === $(`#${targetId}`).find('.name-p').text()) {
         this.JspInstance.connect({
@@ -804,7 +774,7 @@ JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) {
           type: 'basic',
           paintStyle: { strokeWidth: 2, stroke: '#252d39' },
           HoverPaintStyle: {stroke: '#ccc', strokeWidth: 3},
-          overlays:[["Label", { label: labels} ]]
+          overlays:[["Label", { label: i18n.$t('failed'), location:0.5, id:"label"} ]]
         })
       } else {
         this.JspInstance.connect({
@@ -812,8 +782,7 @@ JSP.prototype.jspBackfill = function ({ connects, locations, largeJson }) {
           target: targetId,
           type: 'basic',
           paintStyle: { strokeWidth: 2, stroke: '#2d8cf0' },
-          HoverPaintStyle: {stroke: '#ccc', strokeWidth: 3},
-          overlays:[["Label", { label: labels} ]]
+          HoverPaintStyle: {stroke: '#ccc', strokeWidth: 3}
         })
       }
     })
diff --git a/dolphinscheduler-ui/src/js/conf/home/store/dag/mutations.js b/dolphinscheduler-ui/src/js/conf/home/store/dag/mutations.js
index 11395dbc5d..509ae3c103 100755
--- a/dolphinscheduler-ui/src/js/conf/home/store/dag/mutations.js
+++ b/dolphinscheduler-ui/src/js/conf/home/store/dag/mutations.js
@@ -140,14 +140,6 @@ export default {
       y: parseInt(dom.css('top'), 10)
     })
   },
-  addConnects(state, payload) {
-    state.connects = _.map(state.connects, v => {
-      if(v.endPointSourceId===payload.sourceId && v.endPointTargetId===payload.targetId) {
-        v.label = payload.labelName
-      }
-      return v
-    })
-  },
   /**
    * Cache the input
    * @param state

From 5ef79307afdfbe42d795e1e5c4eac287098db99b Mon Sep 17 00:00:00 2001
From: break60 <790061044@qq.com>
Date: Sat, 1 Aug 2020 15:01:46 +0800
Subject: [PATCH 4/4] fix

---
 dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
index 2cb7de6e08..25516bf265 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
@@ -131,7 +131,6 @@
   import { allNodesId } from './plugIn/util'
   import { toolOper, tasksType } from './config'
   import mFormModel from './formModel/formModel'
-  import mFormLineModel from './formModel/formLineModel'
   import { formatDate } from '@/module/filter/filter'
   import { findComponentDownward } from '@/module/util/'
   import disabledState from '@/module/mixin/disabledState'