diff --git a/example/src/index.ts b/example/src/index.ts index b095ea4..2045d28 100644 --- a/example/src/index.ts +++ b/example/src/index.ts @@ -88,7 +88,7 @@ const timeGraphChart = new TimeGraphChart('timeGraphChart', { timeGraph = testDataProvider.getData({ range: newRange, resolution: newResolution }); if (selectedElement) { for (const row of timeGraph.rows) { - const selEl = row.states.find(el => el.id === selectedElement.id); + const selEl = row.states.find(el => !!selectedElement && el.id === selectedElement.id); if (selEl) { selEl.selected = true; break; @@ -148,11 +148,15 @@ timeGraphChart.registerRowElementMouseInteractions({ } } }); -let selectedElement: TimeGraphRowElement; +let selectedElement: TimeGraphRowElement | undefined; timeGraphChart.onSelectedRowElementChanged((model) => { - const el = timeGraphChart.getElementById(model.id); - if (el) { - selectedElement = el; + if (model) { + const el = timeGraphChart.getElementById(model.id); + if (el) { + selectedElement = el; + } + } else { + selectedElement = undefined; } }) diff --git a/timeline-chart/src/components/time-graph-row.ts b/timeline-chart/src/components/time-graph-row.ts index 8b95bc8..cb08828 100644 --- a/timeline-chart/src/components/time-graph-row.ts +++ b/timeline-chart/src/components/time-graph-row.ts @@ -1,4 +1,4 @@ -import { TimeGraphComponent, TimeGraphElementPosition, TimeGraphRect, TimeGraphParentComponent } from "./time-graph-component"; +import { TimeGraphComponent, TimeGraphElementPosition, TimeGraphParentComponent, TimeGraphStyledRect } from "./time-graph-component"; import { TimelineChart } from "../time-graph-model"; import { TimeGraphRowElement } from "./time-graph-row-element"; @@ -10,16 +10,16 @@ export interface TimeGraphRowStyle { lineOpacity?: number } -export class TimeGraphRow extends TimeGraphComponent implements TimeGraphParentComponent{ +export class TimeGraphRow extends TimeGraphComponent implements TimeGraphParentComponent { protected rowElements: TimeGraphRowElement[] = []; constructor( id: string, - protected _options: TimeGraphRect, + protected _options: TimeGraphStyledRect, protected _rowIndex: number, public readonly model: TimelineChart.TimeGraphRowModel, - protected style: TimeGraphRowStyle = {lineOpacity:0.5, lineThickness: 1, backgroundOpacity: 0}) { + protected _style: TimeGraphRowStyle = { lineOpacity: 0.5, lineThickness: 1, backgroundOpacity: 0 }) { super(id); } @@ -29,26 +29,24 @@ export class TimeGraphRow extends TimeGraphComponent implements TimeGraphParentC render() { this.rect({ - color: this.style.backgroundColor, - opacity: this.style.backgroundOpacity, + color: this._style.backgroundColor, + opacity: this._style.backgroundOpacity, height: this._options.height, width: this._options.width, position: this._options.position }); this.hline({ - color: this.style.lineColor || 0xeeeeee, - opacity: this.style.lineOpacity || 0.5, - thickness: this.style.lineThickness || 1, + color: this._style.lineColor || 0xeeeeee, + opacity: this._style.lineOpacity || 0.5, + thickness: this._style.lineThickness || 1, width: this._options.width, position: { x: this._options.position.x, - y: this._options.position.y + (this._options.height/2) + y: this._options.position.y + (this._options.height / 2) } }); } - - get position(): TimeGraphElementPosition { return this._options.position; } @@ -58,8 +56,31 @@ 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){ + addChild(rowElement: TimeGraphRowElement) { this.rowElements.push(rowElement); this._displayObject.addChild(rowElement.displayObject); } + + get style() { + return this._style; + } + + set style(style: TimeGraphRowStyle) { + if (style.backgroundColor !== undefined) { + this._options.color = style.backgroundColor; + } + if (style.backgroundOpacity !== undefined) { + this._style.backgroundOpacity = style.backgroundOpacity; + } + if (style.lineColor) { + this._style.lineColor = style.lineColor; + } + if (style.lineOpacity) { + this._style.lineOpacity = style.lineOpacity; + } + if (style.lineThickness) { + this._style.lineThickness = style.lineThickness; + } + this.update(); + } } \ No newline at end of file diff --git a/timeline-chart/src/layer/time-graph-chart.ts b/timeline-chart/src/layer/time-graph-chart.ts index 89b86c9..ac3502e 100644 --- a/timeline-chart/src/layer/time-graph-chart.ts +++ b/timeline-chart/src/layer/time-graph-chart.ts @@ -292,11 +292,17 @@ export class TimeGraphChart extends TimeGraphChartLayer { component && style && (component.style = style); } + protected updateRowStyle(model: TimelineChart.TimeGraphRowModel) { + const style = this.providers.rowStyleProvider && this.providers.rowStyleProvider(model); + const component = this.rowComponents.get(model); + component && style && (component.style = style); + } + registerRowElementMouseInteractions(interactions: TimeGraphRowElementMouseInteractions) { this.rowElementMouseInteractions = interactions; } - onSelectedRowElementChanged(handler: (el: TimelineChart.TimeGraphRowElementModel) => void) { + onSelectedRowElementChanged(handler: (el: TimelineChart.TimeGraphRowElementModel | undefined) => void) { this.selectedElementChangedHandler.push(handler); } @@ -314,9 +320,11 @@ export class TimeGraphChart extends TimeGraphChartLayer { selectRow(row: TimelineChart.TimeGraphRowModel) { if (this.rowController.selectedRow) { delete this.rowController.selectedRow.selected; + this.updateRowStyle(this.rowController.selectedRow); } this.rowController.selectedRow = row; row.selected = true; + this.updateRowStyle(row); } getSelectedRowElement(): TimelineChart.TimeGraphRowElementModel {