Merge pull request #61 from hjacobs/move-pods

Move pods

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++
             }

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) {

app/src/pod.js

@@ -12,12 +12,47 @@ 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
         }
     }
 
+    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
+        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
@@ -80,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
@@ -197,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