simplify rendering

Author: connor4312

packages/vscode-js-profile-flame/package.json

@@ -41,7 +41,8 @@
         {
           "type": "webview",
           "id": "vscode-js-profile-flame.realtime",
-          "name": "Realtime Performance"
+          "name": "Realtime Performance",
+          "when": "debugConfigurationType =~ /^pwa-/"
         }
       ]
     },

packages/vscode-js-profile-flame/src/realtime/chart.ts

@@ -7,7 +7,6 @@ import { Metric } from './baseMetric';
 import styles from './chart.css';
 import { Configurator } from './configurator';
 import { FrameCanvas, Sizing } from './frameCanvas';
-import { GraphCanvas } from './graphCanvas';
 import { Settings } from './settings';
 
 const naturalAspectRatio = 16 / 9;
@@ -23,13 +22,8 @@ export class Chart {
   private configHadManualToggle = false;
 
   private readonly frameCanvas = new FrameCanvas(this.width, this.height, this.settings);
-  private readonly graphCanvas = new GraphCanvas(this.width, this.height, this.settings);
   private readonly elements = this.createElements();
-  private readonly settingListener = this.settings.onChange(() => {
-    this.applySettings();
-    this.graphCanvas.updateMetrics();
-    this.frameCanvas.updateMetrics(this.graphCanvas, false);
-  });
+  private readonly settingListener = this.settings.onChange(() => this.applySettings());
   private readonly configurator = new Configurator(this.settings);
 
   public get elem() {
@@ -44,7 +38,6 @@ export class Chart {
   public dispose() {
     this.settingListener();
     this.frameCanvas.dispose();
-    this.graphCanvas.dispose();
   }
 
   /**
@@ -77,16 +70,13 @@ export class Chart {
     }
 
     this.frameCanvas.updateSize(graphWidth, graphHeight);
-    this.graphCanvas.updateSize(graphWidth, graphHeight);
-    this.frameCanvas.updateMetrics(this.graphCanvas, false);
   }
 
   /**
    * Update the chart metrics
    */
   public updateMetrics() {
-    this.graphCanvas.updateMetrics();
-    this.frameCanvas.updateMetrics(this.graphCanvas);
+    this.frameCanvas.updateMetrics();
 
     if (this.configOpen) {
       this.configurator.updateMetrics();

packages/vscode-js-profile-flame/src/realtime/frameCanvas.ts

@@ -2,41 +2,48 @@
  * Copyright (C) Microsoft Corporation. All rights reserved.
  *--------------------------------------------------------*/
 
+import { Metric } from './baseMetric';
 import { Canvas } from './canvas';
-import { GraphCanvas } from './graphCanvas';
 
 export const enum Sizing {
   LabelHeight = 18,
   RulerWidth = 1,
   Easing = 200,
 }
 
+const rulers = 4;
+
 export class FrameCanvas extends Canvas {
+  private rulers = this.createRulers();
+  private paths: [Path2D, string][] = [];
   private ease?: { raf: number; dx: number };
   private rmSettingListener = this.settings.onChange(() => this.redraw());
 
   /**
    * Redraws the max values
    */
-  public updateMetrics(graphCanvas: GraphCanvas, shouldEase = this.settings.value.easing) {
-    const { width: w, height: h } = this;
-
-    let easeLength = graphCanvas.stepWidth;
+  public updateMetrics(shouldEase = this.settings.value.easing) {
+    let easeLength = this.width / this.settings.steps;
     if (this.ease) {
       cancelAnimationFrame(this.ease.raf);
       easeLength += this.ease.dx;
     }
 
+    this.paths = this.settings.enabledMetrics.map(metric => [
+      this.createMetricPath(metric),
+      this.settings.metricColor(metric),
+    ]);
+
     if (!shouldEase) {
-      this.drawGraph(graphCanvas, w, h);
+      this.drawGraph();
       return;
     }
 
     let start: number;
     const draw = (now: number) => {
       const progress = Math.min(1, (now - start) / Sizing.Easing);
       const dx = easeLength * (1 - progress);
-      this.drawGraph(graphCanvas, w, h, dx);
+      this.drawGraph(dx);
 
       if (progress === 1) {
         this.ease = undefined;
@@ -65,18 +72,78 @@ export class FrameCanvas extends Canvas {
     }
   }
 
-  protected drawGraph(graphCanvas: GraphCanvas, w: number, h: number, dx = 0) {
-    this.ctx.clearRect(0, 0, w, h);
-    this.ctx.drawImage(
-      graphCanvas.ctx.canvas,
-      graphCanvas.width - w - dx,
-      0,
-      w * this.scale,
-      h * this.scale,
-      0,
-      0,
-      w,
-      h,
-    );
+  protected redraw() {
+    this.rulers = this.createRulers();
+    this.updateMetrics(false);
+  }
+
+  protected drawGraph(dx = 0) {
+    this.ctx.clearRect(0, 0, this.width, this.height);
+
+    // draw the background rulers first
+    this.ctx.globalAlpha = 1;
+    this.ctx.strokeStyle = this.settings.colors.border;
+    this.ctx.stroke(this.rulers);
+
+    this.ctx.save();
+    this.ctx.translate(dx, 0);
+
+    // then the chart fill first (so lines will always be in the foreground)
+    this.ctx.globalAlpha = 0.1;
+    for (const [path, color] of this.paths) {
+      this.ctx.fillStyle = color;
+      this.ctx.fill(path);
+    }
+
+    // then stroke the lines
+    this.ctx.globalAlpha = 1;
+    for (const [path, color] of this.paths) {
+      this.ctx.strokeStyle = color;
+      this.ctx.stroke(path);
+    }
+
+    this.ctx.restore();
+  }
+
+  private createRulers() {
+    const path = new Path2D();
+    const { width, height } = this;
+    const step = (height - Sizing.RulerWidth) / rulers;
+
+    let y = step;
+    for (let i = 0; i < rulers; i++) {
+      const targetY = Math.floor(y) + Sizing.RulerWidth / 2;
+      path.moveTo(0, targetY);
+      path.lineTo(width, targetY);
+      y += step;
+    }
+
+    return path;
+  }
+
+  private createMetricPath({ max, metrics }: Metric) {
+    const { width, height } = this;
+    const stepSize = width / this.settings.steps;
+    const path = new Path2D();
+
+    if (metrics.length === 0) {
+      path.moveTo(0, height - 1);
+      path.lineTo(width, height - 1);
+      return path;
+    }
+
+    let x = width;
+    path.moveTo(x, height * (1 - metrics[metrics.length - 1] / max));
+
+    for (let i = metrics.length - 2; i >= 0; i--) {
+      x -= stepSize;
+      path.lineTo(x, height * (1 - metrics[i] / max));
+    }
+
+    path.lineTo(x - stepSize, height - 1);
+    path.lineTo(-stepSize, height - 1);
+    path.lineTo(-stepSize, height + 2);
+    path.lineTo(width, height + 2);
+    return path;
   }
 }