Make drawing of TimeGraphAxisScale labels optional and fix their y-pos

The y-pos of the text label should be just below the tick line height. Drawing the labels should be optional and not done for a TimeGraphGrid which only needs to draw tick (grid) lines at full height. Fixes eclipse-cdt-cloud/theia-trace-extension#243
eclipse-cdt-cloud · Jan 27, 2021 · 2da2641 · 2da2641
1 parent 2378be1
commit 2da2641
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/timeline-chart/src/components/time-graph-axis-scale.ts b/timeline-chart/src/components/time-graph-axis-scale.ts
@@ -74,7 +74,7 @@ export class TimeGraphAxisScale extends TimeGraphComponent {
         return stepLength;
     }
 
-    protected renderVerticalLines(lineColor: number, lineStyle: (label: string | undefined) => { lineHeight: number }) {
+    protected renderVerticalLines(drawLabels: boolean, lineColor: number, lineStyle: (label: string | undefined) => { lineHeight: number }) {
         if (this.unitController.viewRangeLength > 0) {
             const stepLength = this.getStepLength();
             const canvasDisplayWidth = this.stateController.canvasDisplayWidth;
@@ -91,15 +91,15 @@ export class TimeGraphAxisScale extends TimeGraphComponent {
                         y: this._options.position.y
                     };
                     let label;
-                    if (this.unitController.numberTranslator) {
+                    if (drawLabels && this.unitController.numberTranslator) {
                         label = this.unitController.numberTranslator(absolutePosition);
                         if (label) {
                             const text = new PIXI.Text(label, {
                                 fontSize: 10,
                                 fill: lineColor
                             });
                             text.x = position.x + 5;
-                            text.y = this._options.height - (2 * lineStyle(label).lineHeight);
+                            text.y = position.y + lineStyle(label).lineHeight;
                             this.labels.push(text);
                             this._displayObject.addChild(text);
                         }
@@ -127,7 +127,7 @@ export class TimeGraphAxisScale extends TimeGraphComponent {
             width: this._options.width,
             position: this._options.position
         });
-        this.renderVerticalLines(this._options.lineColor || 0x000000, (l) => ({ lineHeight: l === '' || l === undefined ? 5 : 10 }));
+        this.renderVerticalLines(true, this._options.lineColor || 0x000000, (l) => ({ lineHeight: l === '' || l === undefined ? 5 : 10 }));
     }
 
     zoomAroundLeftViewBorder(zoomStep: number) {

diff --git a/timeline-chart/src/components/time-graph-grid.ts b/timeline-chart/src/components/time-graph-grid.ts
@@ -20,6 +20,6 @@ export class TimeGraphGrid extends TimeGraphAxisScale {
     protected addEvents() { }
 
     render(): void {
-        this.renderVerticalLines(this._options.lineColor || 0xdddddd, () => ({ lineHeight: this.stateController.canvasDisplayHeight }));
+        this.renderVerticalLines(false, this._options.lineColor || 0xdddddd, () => ({ lineHeight: this.stateController.canvasDisplayHeight }));
     }
 }