From 9e05c9e33edb8b8012c65cb93fe41b9c0b835f47 Mon Sep 17 00:00:00 2001
From: Henning Jacobs <henning@zalando.de>
Date: Thu, 22 Dec 2016 19:01:38 +0100
Subject: [PATCH 1/2] #4 animate all pod movements

---
 app/src/node.js |  6 ++----
 app/src/pod.js  | 28 ++++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/app/src/node.js b/app/src/node.js
index cc88708..dec505d 100644
--- a/app/src/node.js
+++ b/app/src/node.js
@@ -84,8 +84,7 @@ export default class Node extends PIXI.Graphics {
         for (const pod of this.node.pods) {
             if (pod.namespace != 'kube-system') {
                 const podBox = Pod.getOrCreate(pod, this.cluster, this.tooltip)
-                podBox.x = px
-                podBox.y = py
+                podBox.movePodTo(new PIXI.Point(px, py))
                 nodeBox.addChild(podBox.draw())
                 px += 13
                 if (px > 90) {
@@ -100,8 +99,7 @@ export default class Node extends PIXI.Graphics {
         for (const pod of this.node.pods) {
             if (pod.namespace == 'kube-system') {
                 const podBox = Pod.getOrCreate(pod, this.cluster, this.tooltip)
-                podBox.x = px
-                podBox.y = py
+                podBox.movePodTo(new PIXI.Point(px, py))
                 nodeBox.addChild(podBox.draw())
                 px += 13
                 if (px > 90) {
diff --git a/app/src/pod.js b/app/src/pod.js
index e9f07bd..900a4e6 100644
--- a/app/src/pod.js
+++ b/app/src/pod.js
@@ -12,12 +12,40 @@ export class Pod extends PIXI.Graphics {
         this.tooltip = tooltip
         this.tick = null
         this._progress = 1
+        this._targetPosition = null
 
         if (cluster) {
             ALL_PODS[cluster.cluster.api_server_url + '/' + pod.namespace + '/' + pod.name] = this
         }
     }
 
+    animateMove(time) {
+        const deltaX = this._targetPosition.x - this.position.x
+        const deltaY = this._targetPosition.y - this.position.y
+        if (Math.abs(deltaX) < 2 && Math.abs(deltaY) < 2) {
+            this.position = this._targetPosition
+            PIXI.ticker.shared.remove(this.animateMove, this)
+        } else {
+            if (Math.abs(deltaX) > time) {
+                this.position.x += time * Math.sign(deltaX)
+            }
+            if (Math.abs(deltaY) > time) {
+                this.position.y += time * Math.sign(deltaY)
+            }
+        }
+    }
+
+    movePodTo(targetPosition) {
+        if (!this._targetPosition) {
+            // just set coords
+            this.position = this._targetPosition = targetPosition
+        } else if (!this._targetPosition.equals(targetPosition)) {
+            // animate moving to new position
+            this._targetPosition = targetPosition
+            PIXI.ticker.shared.add(this.animateMove, this)
+        }
+    }
+
     getResourceUsage() {
         const metric = (metric, type) =>
             metric ? (metric[type] ? parseResource(metric[type]) : 0) : 0

From 5253ea827e665abc264d845539546c15becb15df Mon Sep 17 00:00:00 2001
From: Henning Jacobs <henning@zalando.de>
Date: Thu, 22 Dec 2016 19:28:53 +0100
Subject: [PATCH 2/2] #4 do not leak tick listeners!

---
 app/src/app.js |  6 +++++-
 app/src/pod.js | 14 +++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/src/app.js b/app/src/app.js
index 1ff012d..e88406c 100644
--- a/app/src/app.js
+++ b/app/src/app.js
@@ -152,6 +152,7 @@ export default class App {
             if (progress >= 1) {
                 PIXI.ticker.shared.remove(tick)
                 that.stage.removeChild(pod)
+                pod.destroy()
                 originalPod.visible = true
             }
         }
@@ -167,7 +168,7 @@ export default class App {
         pod.position = globalPosition.clone()
         pod.alpha = 1
         pod._progress = 1
-        originalPod.visible = false
+        originalPod.destroy()
         const that = this
         const tick = function(t) {
             // progress goes from 1 to 0
@@ -181,6 +182,7 @@ export default class App {
             if (progress <= 0) {
                 PIXI.ticker.shared.remove(tick)
                 that.stage.removeChild(pod)
+                pod.destroy()
             }
         }
         PIXI.ticker.shared.add(tick)
@@ -214,6 +216,8 @@ export default class App {
                     window.setTimeout(function() {
                         that.animatePodDeletion(pod, globalPos)
                     }, 100 * changes)
+                } else {
+                    pod.destroy()
                 }
                 changes++
             }
diff --git a/app/src/pod.js b/app/src/pod.js
index 900a4e6..0f2934d 100644
--- a/app/src/pod.js
+++ b/app/src/pod.js
@@ -19,6 +19,13 @@ export class Pod extends PIXI.Graphics {
         }
     }
 
+    destroy() {
+        if (this.tick) {
+            PIXI.ticker.shared.remove(this.tick, this)
+        }
+        super.destroy()
+    }
+
     animateMove(time) {
         const deltaX = this._targetPosition.x - this.position.x
         const deltaY = this._targetPosition.y - this.position.y
@@ -108,7 +115,6 @@ export class Pod extends PIXI.Graphics {
 
     draw() {
 
-
         // pod.status.containerStatuses might be undefined!
         const containerStatuses = this.pod.status.containerStatuses || []
         var ready = 0
@@ -225,10 +231,12 @@ export class Pod extends PIXI.Graphics {
             }
         }
 
-        if (newTick) {
+        if (newTick && newTick != this.tick) {
             this.tick = newTick
+            // important: only register new listener if it does not exist yet!
+            // (otherwise we leak listeners)
             PIXI.ticker.shared.add(this.tick, this)
-        } else if (this.tick) {
+        } else if (!newTick && this.tick) {
             PIXI.ticker.shared.remove(this.tick, this)
             this.tick = null
             this.alpha = this._progress