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/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..0f2934d 100644 --- a/app/src/pod.js +++ b/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