From a3a5a2df80e891eeef1b1c55a855198b8467b4e6 Mon Sep 17 00:00:00 2001 From: Patrick Tasse Date: Tue, 4 May 2021 14:57:18 -0400 Subject: [PATCH] Rename TimeGraphRowElement to TimeGraphStateComponent Also rename related classes, methods and variables. Signed-off-by: Patrick Tasse --- example/src/index.ts | 12 +- .../src/components/time-graph-row.ts | 10 +- ...aph-row-element.ts => time-graph-state.ts} | 12 +- .../src/layer/time-graph-chart-cursors.ts | 18 +-- timeline-chart/src/layer/time-graph-chart.ts | 114 +++++++++--------- 5 files changed, 83 insertions(+), 83 deletions(-) rename timeline-chart/src/components/{time-graph-row-element.ts => time-graph-state.ts} (90%) diff --git a/example/src/index.ts b/example/src/index.ts index 37e0144..b699f33 100644 --- 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(); +const styleMap = new Map(); 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 index cb08828..5cbb93a 100644 --- 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/timeline-chart/src/components/time-graph-row-element.ts b/timeline-chart/src/components/time-graph-state.ts similarity index 90% rename from timeline-chart/src/components/time-graph-row-element.ts rename to timeline-chart/src/components/time-graph-state.ts index 897e304..374e67e 100644 --- a/timeline-chart/src/components/time-graph-row-element.ts +++ b/timeline-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 index fe0d739..5120e36 100644 --- 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() { diff --git a/timeline-chart/src/layer/time-graph-chart.ts b/timeline-chart/src/layer/time-graph-chart.ts index 102adc5..186e782 100644 --- a/timeline-chart/src/layer/time-graph-chart.ts +++ b/timeline-chart/src/layer/time-graph-chart.ts @@ -3,22 +3,22 @@ import { TimeGraphAnnotationComponent, TimeGraphAnnotationComponentOptions, Time import { TimeGraphComponent, TimeGraphRect, TimeGraphStyledRect } from "../components/time-graph-component"; import { TimeGraphRectangle } from "../components/time-graph-rectangle"; import { TimeGraphRow, TimeGraphRowStyle } from "../components/time-graph-row"; -import { TimeGraphRowElement, TimeGraphRowElementStyle } from "../components/time-graph-row-element"; +import { TimeGraphStateComponent, TimeGraphStateStyle } from "../components/time-graph-state"; import { TimelineChart } from "../time-graph-model"; import { TimeGraphRowController } from "../time-graph-row-controller"; import { TimeGraphChartLayer } from "./time-graph-chart-layer"; -export interface TimeGraphRowElementMouseInteractions { - click?: (el: TimeGraphRowElement, ev: PIXI.InteractionEvent) => void - mouseover?: (el: TimeGraphRowElement, ev: PIXI.InteractionEvent) => void - mouseout?: (el: TimeGraphRowElement, ev: PIXI.InteractionEvent) => void - mousedown?: (el: TimeGraphRowElement, ev: PIXI.InteractionEvent) => void - mouseup?: (el: TimeGraphRowElement, ev: PIXI.InteractionEvent) => void +export interface TimeGraphStateMouseInteractions { + click?: (el: TimeGraphStateComponent, ev: PIXI.InteractionEvent) => void + mouseover?: (el: TimeGraphStateComponent, ev: PIXI.InteractionEvent) => void + mouseout?: (el: TimeGraphStateComponent, ev: PIXI.InteractionEvent) => void + mousedown?: (el: TimeGraphStateComponent, ev: PIXI.InteractionEvent) => void + mouseup?: (el: TimeGraphStateComponent, ev: PIXI.InteractionEvent) => void } export interface TimeGraphChartProviders { dataProvider: (range: TimelineChart.TimeGraphRange, resolution: number) => Promise<{ rows: TimelineChart.TimeGraphRowModel[], range: TimelineChart.TimeGraphRange, resolution: number }> | { rows: TimelineChart.TimeGraphRowModel[], range: TimelineChart.TimeGraphRange, resolution: number } | undefined - rowElementStyleProvider?: (el: TimelineChart.TimeGraphState) => TimeGraphRowElementStyle | undefined + stateStyleProvider?: (el: TimelineChart.TimeGraphState) => TimeGraphStateStyle | undefined rowAnnotationStyleProvider?: (el: TimelineChart.TimeGraphAnnotation) => TimeGraphAnnotationStyle | undefined rowStyleProvider?: (row: TimelineChart.TimeGraphRowModel) => TimeGraphRowStyle | undefined } @@ -36,10 +36,10 @@ export class TimeGraphChart extends TimeGraphChartLayer { protected rows: TimelineChart.TimeGraphRowModel[]; protected rowComponents: Map; - protected rowStateComponents: Map; + protected rowStateComponents: Map; protected rowAnnotationComponents: Map; - protected rowElementMouseInteractions: TimeGraphRowElementMouseInteractions; - protected selectedElementModel: TimelineChart.TimeGraphState; + protected stateMouseInteractions: TimeGraphStateMouseInteractions; + protected selectedStateModel: TimelineChart.TimeGraphState; protected selectedElementChangedHandler: ((el: TimelineChart.TimeGraphState) => void)[] = []; protected providedRange: TimelineChart.TimeGraphRange; protected providedResolution: number; @@ -458,8 +458,8 @@ export class TimeGraphChart extends TimeGraphChartLayer { } } - protected handleSelectedRowElementChange() { - this.selectedElementChangedHandler.forEach(handler => handler(this.selectedElementModel)); + protected handleSelectedStateChange() { + this.selectedElementChangedHandler.forEach(handler => handler(this.selectedStateModel)); } protected addRow(row: TimelineChart.TimeGraphRowModel, height: number, rowIndex: number) { @@ -482,16 +482,16 @@ export class TimeGraphChart extends TimeGraphChartLayer { if (this.rowController.selectedRow && this.rowController.selectedRow.id === row.id) { this.selectRow(row); } - row.states.forEach((rowElementModel: TimelineChart.TimeGraphState) => { - const el = this.createNewRowElement(rowElementModel, rowComponent); + row.states.forEach((stateModel: TimelineChart.TimeGraphState) => { + const el = this.createNewState(stateModel, rowComponent); if (el) { this.addElementInteractions(el); this.addChild(el); - if (this.selectedElementModel && this.rowController.selectedRow + if (this.selectedStateModel && this.rowController.selectedRow && this.rowController.selectedRow.id === row.id - && this.selectedElementModel.range.start === el.model.range.start - && this.selectedElementModel.range.end === el.model.range.end) { - this.selectRowElement(el.model); + && this.selectedStateModel.range.start === el.model.range.start + && this.selectedStateModel.range.end === el.model.range.end) { + this.selectState(el.model); } } }); @@ -512,51 +512,51 @@ export class TimeGraphChart extends TimeGraphChartLayer { return el; } - protected createNewRowElement(rowElementModel: TimelineChart.TimeGraphState, rowComponent: TimeGraphRow): TimeGraphRowElement | undefined { - const start = this.getPixels(rowElementModel.range.start - this.unitController.viewRange.start); - const end = this.getPixels(rowElementModel.range.end - this.unitController.viewRange.start); - let el: TimeGraphRowElement | undefined; + protected createNewState(stateModel: TimelineChart.TimeGraphState, rowComponent: TimeGraphRow): TimeGraphStateComponent | undefined { + const start = this.getPixels(stateModel.range.start - this.unitController.viewRange.start); + const end = this.getPixels(stateModel.range.end - this.unitController.viewRange.start); + let el: TimeGraphStateComponent | undefined; const range: TimelineChart.TimeGraphRange = { start, end }; - const displayStart = this.getPixels(Math.max(rowElementModel.range.start, this.unitController.viewRange.start)); - const displayEnd = this.getPixels(Math.min(rowElementModel.range.end, this.unitController.viewRange.end)); + const displayStart = this.getPixels(Math.max(stateModel.range.start, this.unitController.viewRange.start)); + const displayEnd = this.getPixels(Math.min(stateModel.range.end, this.unitController.viewRange.end)); const displayWidth = displayEnd - displayStart; - const elementStyle = this.providers.rowElementStyleProvider ? this.providers.rowElementStyleProvider(rowElementModel) : undefined; - el = new TimeGraphRowElement(rowElementModel.id, rowElementModel, range, rowComponent, elementStyle, displayWidth); - this.rowStateComponents.set(rowElementModel, el); + const elementStyle = this.providers.stateStyleProvider ? this.providers.stateStyleProvider(stateModel) : undefined; + el = new TimeGraphStateComponent(stateModel.id, stateModel, range, rowComponent, elementStyle, displayWidth); + this.rowStateComponents.set(stateModel, el); return el; } - protected addElementInteractions(el: TimeGraphRowElement) { + protected addElementInteractions(el: TimeGraphStateComponent) { el.displayObject.interactive = true; el.displayObject.on('click', ((e: PIXI.InteractionEvent) => { if (!this.mousePanning && !this.mouseZooming) { - this.selectRowElement(el.model); + this.selectState(el.model); } - if (this.rowElementMouseInteractions && this.rowElementMouseInteractions.click) { - this.rowElementMouseInteractions.click(el, e); + if (this.stateMouseInteractions && this.stateMouseInteractions.click) { + this.stateMouseInteractions.click(el, e); } }).bind(this)); el.displayObject.on('mouseover', ((e: PIXI.InteractionEvent) => { - if (this.rowElementMouseInteractions && this.rowElementMouseInteractions.mouseover) { - this.rowElementMouseInteractions.mouseover(el, e); + if (this.stateMouseInteractions && this.stateMouseInteractions.mouseover) { + this.stateMouseInteractions.mouseover(el, e); } }).bind(this)); el.displayObject.on('mouseout', ((e: PIXI.InteractionEvent) => { - if (this.rowElementMouseInteractions && this.rowElementMouseInteractions.mouseout) { - this.rowElementMouseInteractions.mouseout(el, e); + if (this.stateMouseInteractions && this.stateMouseInteractions.mouseout) { + this.stateMouseInteractions.mouseout(el, e); } }).bind(this)); el.displayObject.on('mousedown', ((e: PIXI.InteractionEvent) => { - if (this.rowElementMouseInteractions && this.rowElementMouseInteractions.mousedown) { - this.rowElementMouseInteractions.mousedown(el, e); + if (this.stateMouseInteractions && this.stateMouseInteractions.mousedown) { + this.stateMouseInteractions.mousedown(el, e); } }).bind(this)); el.displayObject.on('mouseup', ((e: PIXI.InteractionEvent) => { - if (this.rowElementMouseInteractions && this.rowElementMouseInteractions.mouseup) { - this.rowElementMouseInteractions.mouseup(el, e); + if (this.stateMouseInteractions && this.stateMouseInteractions.mouseup) { + this.stateMouseInteractions.mouseup(el, e); } }).bind(this)); } @@ -579,7 +579,7 @@ export class TimeGraphChart extends TimeGraphChartLayer { } protected updateElementStyle(model: TimelineChart.TimeGraphState) { - const style = this.providers.rowElementStyleProvider && this.providers.rowElementStyleProvider(model); + const style = this.providers.stateStyleProvider && this.providers.stateStyleProvider(model); const component = this.rowStateComponents.get(model); component && style && (component.style = style); } @@ -590,11 +590,11 @@ export class TimeGraphChart extends TimeGraphChartLayer { component && style && (component.style = style); } - registerRowElementMouseInteractions(interactions: TimeGraphRowElementMouseInteractions) { - this.rowElementMouseInteractions = interactions; + registerStateMouseInteractions(interactions: TimeGraphStateMouseInteractions) { + this.stateMouseInteractions = interactions; } - onSelectedRowElementChanged(handler: (el: TimelineChart.TimeGraphState | undefined) => void) { + onSelectedStateChanged(handler: (el: TimelineChart.TimeGraphState | undefined) => void) { this.selectedElementChangedHandler.push(handler); } @@ -602,11 +602,11 @@ export class TimeGraphChart extends TimeGraphChartLayer { return this.rows; } - getElementById(id: string): TimeGraphRowElement | undefined { + getElementById(id: string): TimeGraphStateComponent | undefined { const element: TimeGraphComponent | undefined = this.children.find((child) => { return child.id === id; }); - return element as TimeGraphRowElement; + return element as TimeGraphStateComponent; } selectRow(row: TimelineChart.TimeGraphRowModel) { @@ -619,28 +619,28 @@ export class TimeGraphChart extends TimeGraphChartLayer { this.updateRowStyle(row); } - getSelectedRowElement(): TimelineChart.TimeGraphState { - return this.selectedElementModel; + getSelectedState(): TimelineChart.TimeGraphState { + return this.selectedStateModel; } - selectRowElement(model: TimelineChart.TimeGraphState | undefined) { - if (this.selectedElementModel) { - delete this.selectedElementModel.selected; - this.updateElementStyle(this.selectedElementModel); + selectState(model: TimelineChart.TimeGraphState | undefined) { + if (this.selectedStateModel) { + delete this.selectedStateModel.selected; + this.updateElementStyle(this.selectedStateModel); } if (model) { const el = this.getElementById(model.id); if (el) { const row = el.row; if (row) { - this.selectedElementModel = el.model; + this.selectedStateModel = el.model; el.model.selected = true; - this.updateElementStyle(this.selectedElementModel); + this.updateElementStyle(this.selectedStateModel); this.selectRow(row.model); } } } - this.handleSelectedRowElementChange(); + this.handleSelectedStateChange(); } setNavigationFlag(flag: boolean) { @@ -651,8 +651,8 @@ export class TimeGraphChart extends TimeGraphChartLayer { const row = this.rowController.selectedRow; if (row && this.unitController.selectionRange) { const cursorPosition = this.unitController.selectionRange.end; - const rowElement = row.states.find((rowElementModel: TimelineChart.TimeGraphState) => rowElementModel.range.start === cursorPosition || rowElementModel.range.end === cursorPosition); - this.selectRowElement(rowElement); + const state = row.states.find((stateModel: TimelineChart.TimeGraphState) => stateModel.range.start === cursorPosition || stateModel.range.end === cursorPosition); + this.selectState(state); } this.setNavigationFlag(false); }