Fix the bug #1968. (#1969)

When create a new task or edit an exist task.The task details window will be open.
Then if delete the task node or click the DataSource menu. And the task details window still open.

The task details window should be close.

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js

@@ -49,10 +49,16 @@ Dag.prototype.setConfig = function (o) {
  * create dag
  */
 Dag.prototype.create = function () {
+  let self = this
   jsPlumb.ready(() => {
     JSP.init({
       dag: this.dag,
-      instance: this.instance
+      instance: this.instance,
+      options: {
+        onRemoveNodes ($id) {
+          self.dag.removeEventModelById($id)
+        }
+      }
     })
 
     // init event
@@ -108,7 +114,7 @@ Dag.prototype.backfill = function (arg) {
         tmp.push(locationsValue2[i])
       }
     }
-    
+
     function copy (array) {
       let newArray = []
       for(let item of array) {
@@ -117,7 +123,7 @@ Dag.prototype.backfill = function (arg) {
       return  newArray;
     }
 
-    
+
     let newArr = copy(arr)
     function getNewArr() {
       for(let i= 0; i<newArr.length; i++) {
@@ -231,7 +237,7 @@ Dag.prototype.backfill = function (arg) {
         for(let i = 0; i<listarrs.length; i++) {
           delete(listarrs[i].id)
         }
-        
+
         for(let a = 0; a<listarr.length; a++) {
           dataObject[listarr[a].id] = listarrs[a]
         }
@@ -250,9 +256,9 @@ Dag.prototype.backfill = function (arg) {
             }
           };
         }
-        
+
         lastchildren = lastchildren.sort(createComparisonFunction('x'))
-        
+
         // Coordinate value of each leaf node
         for(let a = 0; a<lastchildren.length; a++) {
           dataObject[lastchildren[a].id].y = (a+1)*120
@@ -280,12 +286,18 @@ Dag.prototype.backfill = function (arg) {
         if(countTree>1) {
           dataObject[Object.keys(locationsValue1)[0]].y = (countTree/2)*120+50
         }
-    
+
     locationsValue = dataObject
+    let self = this
     jsPlumb.ready(() => {
       JSP.init({
         dag: this.dag,
-        instance: this.instance
+        instance: this.instance,
+        options: {
+          onRemoveNodes ($id) {
+            self.dag.removeEventModelById($id)
+          }
+        }
       })
       // Backfill
       JSP.jspBackfill({
@@ -298,10 +310,16 @@ Dag.prototype.backfill = function (arg) {
       })
     })
   } else {
+    let self = this
     jsPlumb.ready(() => {
       JSP.init({
         dag: this.dag,
-        instance: this.instance
+        instance: this.instance,
+        options: {
+          onRemoveNodes ($id) {
+            self.dag.removeEventModelById($id)
+          }
+        }
       })
       // Backfill
       JSP.jspBackfill({

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue

@@ -61,7 +61,7 @@
           <span v-if="name"  class="copy-name" @click="_copyName" :data-clipboard-text="name"><em class="ans-icon-copy" data-container="body"  data-toggle="tooltip" :title="$t('Copy name')" ></em></span>
         </div>
         <div class="save-btn">
-          <div class="operation" style="vertical-align: middle;"> 
+          <div class="operation" style="vertical-align: middle;">
             <a href="javascript:"
                v-for="(item,$index) in toolOperList"
                :class="_operationClass(item)"
@@ -71,14 +71,14 @@
               <x-button type="text" data-container="body" :icon="item.icon" v-tooltip.light="item.desc"></x-button>
             </a>
           </div>
-          <x-button 
+          <x-button
-                  type="primary" 
+                  type="primary"
                   v-tooltip.light="$t('Format DAG')"
-                  icon="ans-icon-triangle-solid-right" 
+                  icon="ans-icon-triangle-solid-right"
-                  size="xsmall" 
+                  size="xsmall"
                   data-container="body"
                   v-if="type === 'instance'"
-                  style="vertical-align: middle;" 
+                  style="vertical-align: middle;"
                   @click="dagAutomaticLayout">
           </x-button>
           <x-button
@@ -169,7 +169,7 @@
       // DAG automatic layout
       dagAutomaticLayout() {
         $('#canvas').html('')
-        
+
       // Destroy round robin
         Dag.init({
         dag: this,
@@ -527,6 +527,11 @@
             }
           })
         })
+      },
+      removeEventModelById ($id) {
+        if(eventModel && this.taskId == $id){
+          eventModel.remove()
+        }
       }
     },
     watch: {
@@ -580,6 +585,9 @@
       clearInterval(this.setIntervalP)
     },
     destroyed () {
+      if (eventModel) {
+        eventModel.remove()
+      }
     },
     computed: {
       ...mapState('dag', ['tasks', 'locations', 'connects', 'isEditDag', 'name'])

dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/plugIn/jsPlumbHandle.js

@@ -58,11 +58,13 @@ let JSP = function () {
 /**
  * dag init
  */
-JSP.prototype.init = function ({ dag, instance }) {
+JSP.prototype.init = function ({ dag, instance, options }) {
   // Get the dag component instance
   this.dag = dag
   // Get jsplumb instance
   this.JspInstance = instance
+  // Get JSP options
+  this.options = options || {}
   // Register jsplumb connection type and configuration
   this.JspInstance.registerConnectionType('basic', {
     anchor: 'Continuous',
@@ -494,6 +496,9 @@ JSP.prototype.removeNodes = function ($id) {
 
   // delete dom
   $(`#${$id}`).remove()
+
+  // callback onRemoveNodes event
+  this.options&&this.options.onRemoveNodes&&this.options.onRemoveNodes($id)
 }
 
 /**