resize block visualization instantly on zoom

frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts

@@ -181,7 +181,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
       this.gl.viewport(0, 0, this.displayWidth, this.displayHeight);
     }
     if (this.scene) {
-      this.scene.resize({ width: this.displayWidth, height: this.displayHeight });
+      this.scene.resize({ width: this.displayWidth, height: this.displayHeight, animate: false });
       this.start();
     } else {
       this.scene = new BlockScene({ width: this.displayWidth, height: this.displayHeight, resolution: this.resolution,

frontend/src/app/components/block-overview-graph/block-scene.ts

@@ -29,7 +29,7 @@ export default class BlockScene {
     this.init({ width, height, resolution, blockLimit, orientation, flip, vertexArray });
   }
 
-  resize({ width = this.width, height = this.height }: { width?: number, height?: number}): void {
+  resize({ width = this.width, height = this.height, animate = true }: { width?: number, height?: number, animate: boolean }): void {
     this.width = width;
     this.height = height;
     this.gridSize = this.width / this.gridWidth;
@@ -38,7 +38,7 @@ export default class BlockScene {
 
     this.dirty = true;
     if (this.initialised && this.scene) {
-      this.updateAll(performance.now(), 50);
+      this.updateAll(performance.now(), 50, 'left', animate);
     }
   }
 
@@ -212,7 +212,7 @@ export default class BlockScene {
     this.vbytesPerUnit = blockLimit / Math.pow(resolution / 1.02, 2);
     this.gridWidth = resolution;
     this.gridHeight = resolution;
-    this.resize({ width, height });
+    this.resize({ width, height, animate: true });
     this.layout = new BlockLayout({ width: this.gridWidth, height: this.gridHeight });
 
     this.txs = {};
@@ -225,14 +225,14 @@ export default class BlockScene {
     this.animateUntil = Math.max(this.animateUntil, tx.update(update));
   }
 
-  private updateTx(tx: TxView, startTime: number, delay: number, direction: string = 'left'): void {
+  private updateTx(tx: TxView, startTime: number, delay: number, direction: string = 'left', animate: boolean = true): void {
     if (tx.dirty || this.dirty) {
       this.saveGridToScreenPosition(tx);
-      this.setTxOnScreen(tx, startTime, delay, direction);
+      this.setTxOnScreen(tx, startTime, delay, direction, animate);
     }
   }
 
-  private setTxOnScreen(tx: TxView, startTime: number, delay: number = 50, direction: string = 'left'): void {
+  private setTxOnScreen(tx: TxView, startTime: number, delay: number = 50, direction: string = 'left', animate: boolean = true): void {
     if (!tx.initialised) {
       const txColor = tx.getColor();
       this.applyTxUpdate(tx, {
@@ -252,30 +252,42 @@ export default class BlockScene {
           position: tx.screenPosition,
           color: txColor
         },
-        duration: 1000,
+        duration: animate ? 1000 : 1,
         start: startTime,
-        delay,
+        delay: animate ? delay : 0,
       });
     } else {
       this.applyTxUpdate(tx, {
         display: {
           position: tx.screenPosition
         },
-        duration: 1000,
+        duration: animate ? 1000 : 0,
-        minDuration: 500,
+        minDuration: animate ? 500 : 0,
         start: startTime,
-        delay,
+        delay: animate ? delay : 0,
-        adjust: true
+        adjust: animate
       });
+      if (!animate) {
+        this.applyTxUpdate(tx, {
+          display: {
+            position: tx.screenPosition
+          },
+          duration: 0,
+          minDuration: 0,
+          start: startTime,
+          delay: 0,
+          adjust: false
+        });
+      }
     }
   }
 
-  private updateAll(startTime: number, delay: number = 50, direction: string = 'left'): void {
+  private updateAll(startTime: number, delay: number = 50, direction: string = 'left', animate: boolean = true): void {
     this.scene.count = 0;
     const ids = this.getTxList();
     startTime = startTime || performance.now();
     for (const id of ids) {
-      this.updateTx(this.txs[id], startTime, delay, direction);
+      this.updateTx(this.txs[id], startTime, delay, direction, animate);
     }
     this.dirty = false;
   }