Rename TimeGraphRowElement to TimeGraphStateComponent

Also rename related classes, methods and variables. Signed-off-by: Patrick Tasse <patrick.tasse@ericsson.com>
eclipse-cdt-cloud · May 4, 2021 · a3a5a2d · a3a5a2d
1 parent 5528daf
commit a3a5a2d
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 83 deletions.
diff --git a/example/src/index.ts b/example/src/index.ts
@@ -9,7 +9,7 @@ import { TimeGraphChartSelectionRange } from "timeline-chart/lib/layer/time-grap
 import { TimeGraphAxisCursors } from "timeline-chart/lib/layer/time-graph-axis-cursors";
 // import { timeGraph } from "timeline-chart/lib/test-data";
 import { TimelineChart } from "timeline-chart/lib/time-graph-model";
-import { TimeGraphRowElementStyle } from "timeline-chart/lib/components/time-graph-row-element";
+import { TimeGraphStateStyle } from "timeline-chart/lib/components/time-graph-state";
 import { TestDataProvider } from "./test-data-provider";
 import { TimeGraphChartGrid } from "timeline-chart/lib/layer/time-graph-chart-grid";
 import { TimeGraphVerticalScrollbar } from "timeline-chart/lib/layer/time-graph-vertical-scrollbar";
@@ -23,7 +23,7 @@ const styleConfig = {
     cursorColor: 0xb77f09
 }
 
-const styleMap = new Map<string, TimeGraphRowElementStyle>();
+const styleMap = new Map<string, TimeGraphStateStyle>();
 
 const container = document.getElementById('main');
 if (!container) {
@@ -95,8 +95,8 @@ const timeGraphChart = new TimeGraphChart('timeGraphChart', {
             resolution: newResolution
         };
     },
-    rowElementStyleProvider: (model: TimelineChart.TimeGraphState) => {
-        const styles: TimeGraphRowElementStyle[] = [
+    stateStyleProvider: (model: TimelineChart.TimeGraphState) => {
+        const styles: TimeGraphStateStyle[] = [
             {
                 color: 0x11ad1b,
                 height: rowHeight * 0.8
@@ -108,7 +108,7 @@ const timeGraphChart = new TimeGraphChart('timeGraphChart', {
                 height: rowHeight * 0.6
             }
         ];
-        let style: TimeGraphRowElementStyle | undefined = styles[0];
+        let style: TimeGraphStateStyle | undefined = styles[0];
         if (model.data && model.data.value) {
             const val = model.data.value;
             style = styleMap.get(val);
@@ -135,7 +135,7 @@ const timeGraphChart = new TimeGraphChart('timeGraphChart', {
 }, rowController);
 timeGraphChartContainer.addLayer(timeGraphChart);
 
-timeGraphChart.registerRowElementMouseInteractions({
+timeGraphChart.registerStateMouseInteractions({
     click: el => {
         console.log(el.model.label);
         if (el.model.data) {

diff --git a/timeline-chart/src/components/time-graph-row.ts b/timeline-chart/src/components/time-graph-row.ts
@@ -1,6 +1,6 @@
 import { TimeGraphComponent, TimeGraphElementPosition, TimeGraphParentComponent, TimeGraphStyledRect } from "./time-graph-component";
 import { TimelineChart } from "../time-graph-model";
-import { TimeGraphRowElement } from "./time-graph-row-element";
+import { TimeGraphStateComponent } from "./time-graph-state";
 
 export interface TimeGraphRowStyle {
     backgroundColor?: number
@@ -12,7 +12,7 @@ export interface TimeGraphRowStyle {
 
 export class TimeGraphRow extends TimeGraphComponent implements TimeGraphParentComponent {
 
-    protected rowElements: TimeGraphRowElement[] = [];
+    protected states: TimeGraphStateComponent[] = [];
 
     constructor(
         id: string,
@@ -56,9 +56,9 @@ export class TimeGraphRow extends TimeGraphComponent implements TimeGraphParentC
     }
 
     // Gets called by TimeGraphLayer. Don't call it unless you know what you are doing.
-    addChild(rowElement: TimeGraphRowElement) {
-        this.rowElements.push(rowElement);
-        this._displayObject.addChild(rowElement.displayObject);
+    addChild(state: TimeGraphStateComponent) {
+        this.states.push(state);
+        this._displayObject.addChild(state.displayObject);
     }
 
     get style() {

diff --git a/.../src/components/time-graph-row-element.ts → ...-chart/src/components/time-graph-state.ts b/.../src/components/time-graph-row-element.ts → ...-chart/src/components/time-graph-state.ts
@@ -4,14 +4,14 @@ import { TimelineChart } from "../time-graph-model";
 import { FontController } from "../time-graph-font-controller";
 import * as PIXI from "pixi.js-legacy";
 
-export interface TimeGraphRowElementStyle {
+export interface TimeGraphStateStyle {
     color?: number
     height?: number
     borderWidth?: number
     borderColor?: number
 }
 
-export class TimeGraphRowElement extends TimeGraphComponent {
+export class TimeGraphStateComponent extends TimeGraphComponent {
 
     protected _height: number;
     protected _position: TimeGraphElementPosition;
@@ -24,7 +24,7 @@ export class TimeGraphRowElement extends TimeGraphComponent {
         protected _model: TimelineChart.TimeGraphState,
         protected range: TimelineChart.TimeGraphRange,
         protected _row: TimeGraphRow,
-        protected _style: TimeGraphRowElementStyle = { color: 0xfffa66, height: 14 },
+        protected _style: TimeGraphStateStyle = { color: 0xfffa66, height: 14 },
         protected displayWidth: number,
         displayObject?: PIXI.Graphics
     ) {
@@ -53,8 +53,8 @@ export class TimeGraphRowElement extends TimeGraphComponent {
         if (!this._model.label) {
             return;
         }
-        const fontName = TimeGraphRowElement.fontController.getFontName(this._options.color ? this._options.color : 0, this._options.height - 2) ||
-            TimeGraphRowElement.fontController.getDefaultFontName();
+        const fontName = TimeGraphStateComponent.fontController.getFontName(this._options.color ? this._options.color : 0, this._options.height - 2) ||
+            TimeGraphStateComponent.fontController.getDefaultFontName();
         const textObj = new PIXI.BitmapText(this._model.label, { fontName: fontName });
         const textWidth = textObj.getLocalBounds().width;
         const position = {
@@ -112,7 +112,7 @@ export class TimeGraphRowElement extends TimeGraphComponent {
         return this._style;
     }
 
-    set style(style: TimeGraphRowElementStyle) {
+    set style(style: TimeGraphStateStyle) {
         if (style.color !== undefined) {
             this._options.color = style.color;
         }

diff --git a/timeline-chart/src/layer/time-graph-chart-cursors.ts b/timeline-chart/src/layer/time-graph-chart-cursors.ts
@@ -80,7 +80,7 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
             this.stage.cursor = 'crosshair';
             const mouseX = event.data.global.x;
             const xpos = this.unitController.viewRange.start + (mouseX / this.stateController.zoomFactor);
-            this.chartLayer.selectRowElement(undefined);
+            this.chartLayer.selectState(undefined);
             if (extendSelection) {
                 const start = this.unitController.selectionRange ? this.unitController.selectionRange.start : 0;
                 this.unitController.selectionRange = {
@@ -164,13 +164,13 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
         const row = this.rowController.selectedRow;
         if (row && this.unitController.selectionRange) {
             const cursorPosition = this.unitController.selectionRange.end;
-            const prevState = row.states.slice().reverse().find((rowElementModel: TimelineChart.TimeGraphState) => cursorPosition > rowElementModel.range.end ||
-                (cursorPosition > rowElementModel.range.start && cursorPosition <= rowElementModel.range.end));
+            const prevState = row.states.slice().reverse().find((stateModel: TimelineChart.TimeGraphState) => cursorPosition > stateModel.range.end ||
+                (cursorPosition > stateModel.range.start && cursorPosition <= stateModel.range.end));
 
             if (prevState) {
                 const newPos = cursorPosition > prevState.range.end ? prevState.range.end : prevState.range.start;
                 this.unitController.selectionRange = { start: this.shiftKeyDown ? this.unitController.selectionRange.start : newPos, end: newPos };
-                this.chartLayer.selectRowElement(prevState);
+                this.chartLayer.selectState(prevState);
             } else {
                 this.unitController.selectionRange = { start: this.shiftKeyDown ? this.unitController.selectionRange.start : row.prevPossibleState, end: row.prevPossibleState };
                 this.chartLayer.setNavigationFlag(true);
@@ -183,13 +183,13 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
         const row = this.rowController.selectedRow;
         if (row && this.unitController.selectionRange) {
             const cursorPosition = this.unitController.selectionRange.end;
-            const nextState = row.states.find((rowElementModel: TimelineChart.TimeGraphState) => cursorPosition < rowElementModel.range.start ||
-                (cursorPosition >= rowElementModel.range.start && cursorPosition < rowElementModel.range.end));
+            const nextState = row.states.find((stateModel: TimelineChart.TimeGraphState) => cursorPosition < stateModel.range.start ||
+                (cursorPosition >= stateModel.range.start && cursorPosition < stateModel.range.end));
 
             if (nextState) {
                 const newPos = cursorPosition < nextState.range.start ? nextState.range.start : nextState.range.end;
                 this.unitController.selectionRange = { start: this.shiftKeyDown ? this.unitController.selectionRange.start : newPos, end: newPos };
-                this.chartLayer.selectRowElement(nextState);
+                this.chartLayer.selectState(nextState);
             } else {
                 this.unitController.selectionRange = { start: this.shiftKeyDown ? this.unitController.selectionRange.start : row.nextPossibleState, end: row.nextPossibleState };
                 this.chartLayer.setNavigationFlag(true);
@@ -212,7 +212,7 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
             }
             return false;
         });
-        state && this.chartLayer.selectRowElement(state);
+        state && this.chartLayer.selectState(state);
     }
 
     protected navigateUp() {
@@ -229,7 +229,7 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
             }
             return false;
         })
-        state && this.chartLayer.selectRowElement(state);
+        state && this.chartLayer.selectState(state);
     }
 
     centerCursor() {