From afd5c75cd27c9fe1a7efcafbed92bf28fc3996e5 Mon Sep 17 00:00:00 2001
From: zhukai <boness@qq.com>
Date: Mon, 17 Feb 2020 19:09:10 +0800
Subject: [PATCH] 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.
---
 .../src/js/conf/home/pages/dag/_source/dag.js | 36 ++++++++++++++-----
 .../js/conf/home/pages/dag/_source/dag.vue    | 22 ++++++++----
 .../pages/dag/_source/plugIn/jsPlumbHandle.js |  7 +++-
 3 files changed, 48 insertions(+), 17 deletions(-)

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js
index 8225673ecd..240f3246aa 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.js
+++ b/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({
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 40b6d85198..247f473bad 100644
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
+++ b/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 
-                  type="primary" 
+          <x-button
+                  type="primary"
                   v-tooltip.light="$t('Format DAG')"
-                  icon="ans-icon-triangle-solid-right" 
-                  size="xsmall" 
+                  icon="ans-icon-triangle-solid-right"
+                  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'])
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 6523a1c298..454dfc7e03 100644
--- 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
@@ -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)
 }
 
 /**