hook to translate numbers into human readable form added.

- for timeline axis labels
eclipse-cdt-cloud · Dec 12, 2018 · a371110 · a371110
1 parent cda917d
commit a371110
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 10 deletions.
diff --git a/src/components/time-graph-axis-scale.ts b/src/components/time-graph-axis-scale.ts
@@ -1,4 +1,4 @@
-import { TimeGraphComponent, TimeGraphInteractionHandler, TimeGraphStyledRect } from "./time-graph-component";
+import { TimeGraphComponent, TimeGraphInteractionHandler, TimeGraphStyledRect, TimeGraphComponentOptions } from "./time-graph-component";
 import { TimeGraphUnitController } from "../time-graph-unit-controller";
 import { TimeGraphRange } from "../time-graph-model";
 import { TimeGraphStateController } from "../time-graph-state-controller";
@@ -10,10 +10,16 @@ export class TimeGraphAxisScale extends TimeGraphComponent {
     protected mouseStartX: number;
     protected oldViewRange: TimeGraphRange;
     protected mouseIsDown: boolean = false;
+    protected labels: PIXI.Text[];
 
-    constructor(id: string, protected _options: TimeGraphStyledRect, protected unitController: TimeGraphUnitController, protected stateController: TimeGraphStateController) {
+    constructor(id: string,
+        protected _options: TimeGraphStyledRect,
+        protected unitController: TimeGraphUnitController,
+        protected stateController: TimeGraphStateController,
+        protected numberTranslator?: (theNumber: number) => string) {
         super(id);
         this.addEvents();
+        this.labels = [];
     }
 
     protected addEvents() {
@@ -55,22 +61,38 @@ export class TimeGraphAxisScale extends TimeGraphComponent {
         const stepLength = this.getStepLength();
         const steps = Math.trunc(this.unitController.absoluteRange / stepLength);
         for (let i = 0; i < steps; i++) {
-            const height = lineHeight * (-1);
-            const xpos = (stepLength * i - this.unitController.viewRange.start) * this.stateController.zoomFactor;
+            const absolutePosition = stepLength * i;
+            const xpos = (absolutePosition - this.unitController.viewRange.start) * this.stateController.zoomFactor;
             if (xpos >= 0 && xpos < this.stateController.canvasDisplayWidth) {
                 const position = {
                     x: xpos,
                     y: this._options.height
                 };
+                if (this.numberTranslator) {
+                    const label = this.numberTranslator(absolutePosition);
+                    const text = new PIXI.Text(label, {
+                        fontSize: 10
+                    });
+                    text.x = position.x + 5;
+                    text.y = this._options.height - (2 * lineHeight);
+                    this.labels.push(text);
+                    this._displayObject.addChild(text);
+                }
                 this.vline({
                     position,
-                    height,
+                    height: lineHeight * (-1),
                     color: lineColor
                 });
             }
         }
     }
 
+    update(opts?: TimeGraphComponentOptions){
+        this.labels.forEach(label => label.destroy());
+        this.labels = [];
+        super.update(opts);
+    }
+
     render() {
         this.rect({
             color: this._options.color || 0xededdd,

diff --git a/src/components/time-graph-grid.ts b/src/components/time-graph-grid.ts
@@ -5,7 +5,11 @@ import { TimeGraphStateController } from "../time-graph-state-controller";
 
 export class TimeGraphGrid extends TimeGraphAxisScale {
 
-    constructor(id: string, protected _options: TimeGraphRect, protected rowHeight: number, protected unitController: TimeGraphUnitController, protected stateController: TimeGraphStateController) {
+    constructor(id: string,
+        protected _options: TimeGraphRect,
+        protected rowHeight: number,
+        protected unitController: TimeGraphUnitController,
+        protected stateController: TimeGraphStateController) {
         super(id, _options, unitController, stateController);
     }
 

diff --git a/src/index.ts b/src/index.ts
@@ -78,11 +78,18 @@ container.appendChild(axisHTMLContainer);
 const timeGraphAxisContainer = new TimeGraphContainer({
     height: 30,
     width: styleConfig.mainWidth,
-    id: timeGraph.id + '_axis'
+    id: timeGraph.id + '_axis',
+    backgroundColor: 0xffffff
 }, unitController);
 axisHTMLContainer.appendChild(timeGraphAxisContainer.canvas);
 
 const timeAxisLayer = new TimeGraphAxis('timeGraphAxis', { color: styleConfig.naviBackgroundColor });
+timeAxisLayer.registerNumberTranslator((theNumber:number)=>{
+    const milli = Math.floor(theNumber / 1000000);
+    const micro = Math.floor((theNumber % 1000000) / 1000);
+    const nano = Math.floor((theNumber % 1000000) % 1000);
+    return milli + ':' + micro + ':' + nano;
+});
 timeGraphAxisContainer.addLayer(timeAxisLayer);
 
 const chartHTMLContainer = document.createElement('div');

diff --git a/src/layer/time-graph-axis.ts b/src/layer/time-graph-axis.ts
@@ -5,6 +5,7 @@ import * as _ from "lodash";
 export class TimeGraphAxis extends TimeGraphLayer {
 
     protected scaleComponent: TimeGraphAxisScale;
+    protected numberTranslator?: (theNumber: number) => string;
 
     constructor(id: string, protected style?: { color?: number }) {
         super(id);
@@ -40,8 +41,13 @@ export class TimeGraphAxis extends TimeGraphLayer {
             return false;
         });
         this.onCanvasEvent('mousewheel', mw);
-        this.scaleComponent = new TimeGraphAxisScale(this.id + '_scale', this.getOptions(), this.unitController, this.stateController);
-
+        this.scaleComponent = new TimeGraphAxisScale(
+            this.id + '_scale',
+            this.getOptions(),
+            this.unitController,
+            this.stateController,
+            this.numberTranslator
+        );
         this.addChild(this.scaleComponent);
 
         this.unitController.onSelectionRangeChange(() => this.update());
@@ -51,4 +57,8 @@ export class TimeGraphAxis extends TimeGraphLayer {
     update() {
         this.scaleComponent.update(this.getOptions());
     }
+
+    registerNumberTranslator(translator: (theNumber: number) => string) {
+        this.numberTranslator = translator;
+    }
 }
diff --git a/src/layer/time-graph-chart.ts b/src/layer/time-graph-chart.ts
@@ -81,7 +81,7 @@ export class TimeGraphChart extends TimeGraphLayer {
         rowComponent.displayObject.interactive = true;
         rowComponent.displayObject.on('click', ((e: PIXI.interaction.InteractionEvent) => {
             this.selectRow(row);
-        }).bind(this))
+        }).bind(this));
         this.addChild(rowComponent);
         row.states.forEach((rowElementModel: TimeGraphRowElementModel, elementIndex: number) => {
             const relativeElementStartPosition = rowElementModel.range.start - this.unitController.viewRange.start;