#4 animate all pod movements

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.movePodTo(new PIXI.Point(px, py))
-                podBox.y = 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.movePodTo(new PIXI.Point(px, py))
-                podBox.y = py
                 nodeBox.addChild(podBox.draw())
                 px += 13
                 if (px > 90) {

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