diff --git a/timeline-chart/src/components/time-graph-axis-scale.ts b/timeline-chart/src/components/time-graph-axis-scale.ts index cd4261b..1e69839 100644 --- a/timeline-chart/src/components/time-graph-axis-scale.ts +++ b/timeline-chart/src/components/time-graph-axis-scale.ts @@ -4,6 +4,10 @@ import { TimeGraphStateController } from "../time-graph-state-controller"; import * as _ from "lodash"; import { TimelineChart } from "../time-graph-model"; +export interface TimeGraphAxisStyle extends TimeGraphStyledRect { + lineColor?: number +} + export class TimeGraphAxisScale extends TimeGraphComponent { protected mouseStartY: number; @@ -13,7 +17,7 @@ export class TimeGraphAxisScale extends TimeGraphComponent { protected labels: PIXI.Text[]; constructor(id: string, - protected _options: TimeGraphStyledRect, + protected _options: TimeGraphAxisStyle, protected unitController: TimeGraphUnitController, protected stateController: TimeGraphStateController) { super(id); @@ -74,7 +78,8 @@ export class TimeGraphAxisScale extends TimeGraphComponent { if (this.unitController.numberTranslator) { const label = this.unitController.numberTranslator(absolutePosition); const text = new PIXI.Text(label, { - fontSize: 10 + fontSize: 10, + fill: lineColor }); text.x = position.x + 5; text.y = this._options.height - (2 * lineHeight); @@ -104,7 +109,7 @@ export class TimeGraphAxisScale extends TimeGraphComponent { width: this._options.width, position: this._options.position }); - this.renderVerticalLines(10, 0x000000); + this.renderVerticalLines(10, this._options.lineColor || 0x000000); } zoom(zoomStep: number) { diff --git a/timeline-chart/src/components/time-graph-component.ts b/timeline-chart/src/components/time-graph-component.ts index c846bd9..94d3cd3 100644 --- a/timeline-chart/src/components/time-graph-component.ts +++ b/timeline-chart/src/components/time-graph-component.ts @@ -38,6 +38,8 @@ export abstract class TimeGraphComponent { protected _displayObject: PIXI.Graphics; protected _options: TimeGraphComponentOptions; + protected graphicsData: PIXI.GraphicsData; + constructor(protected _id: string, displayObject?: PIXI.Graphics) { this._displayObject = displayObject || new PIXI.Graphics(); } @@ -68,7 +70,11 @@ export abstract class TimeGraphComponent { const { position, width, height, color, opacity, borderColor, borderWidth, borderRadius } = opts; this.displayObject.lineStyle(borderWidth || 0, borderColor || 0x000000); this.displayObject.beginFill((color || 0xffffff), (opacity !== undefined ? opacity : 1)); - this.displayObject.drawRoundedRect(position.x + 0.5, position.y + 0.5, width, height, borderRadius || 0); + + const r = new PIXI.RoundedRectangle(position.x + 0.5, position.y + 0.5, width, height, borderRadius || 0); + this.graphicsData = this.displayObject.drawShape(r); + + // this.displayObject.drawRoundedRect(position.x + 0.5, position.y + 0.5, width, height, borderRadius || 0); this.displayObject.endFill(); } diff --git a/timeline-chart/src/components/time-graph-grid.ts b/timeline-chart/src/components/time-graph-grid.ts index 481ff5c..c9e3039 100644 --- a/timeline-chart/src/components/time-graph-grid.ts +++ b/timeline-chart/src/components/time-graph-grid.ts @@ -3,10 +3,14 @@ import { TimeGraphRect } from "./time-graph-component"; import { TimeGraphUnitController } from "../time-graph-unit-controller"; import { TimeGraphStateController } from "../time-graph-state-controller"; +export interface TimeGraphGridStyle extends TimeGraphRect { + lineColor?: number +} + export class TimeGraphGrid extends TimeGraphAxisScale { constructor(id: string, - protected _options: TimeGraphRect, + protected _options: TimeGraphGridStyle, protected rowHeight: number, protected unitController: TimeGraphUnitController, protected stateController: TimeGraphStateController) { @@ -16,6 +20,6 @@ export class TimeGraphGrid extends TimeGraphAxisScale { protected addEvents() { } render(): void { - this.renderVerticalLines(this.stateController.canvasDisplayHeight, 0xdddddd); + this.renderVerticalLines(this.stateController.canvasDisplayHeight, this._options.lineColor || 0xdddddd); } } \ No newline at end of file diff --git a/timeline-chart/src/components/time-graph-row-element.ts b/timeline-chart/src/components/time-graph-row-element.ts index 7bdd260..a4d1a1e 100644 --- a/timeline-chart/src/components/time-graph-row-element.ts +++ b/timeline-chart/src/components/time-graph-row-element.ts @@ -37,7 +37,8 @@ export class TimeGraphRowElement extends TimeGraphComponent { position: this.position, width, borderRadius: 2, - borderWidth: style.borderWidth || 0 + borderWidth: style.borderWidth || 0, + borderColor: style.borderColor || 0x000000 }; } @@ -66,7 +67,7 @@ export class TimeGraphRowElement extends TimeGraphComponent { } update(opts?: TimeGraphStyledRect) { - if(opts){ + if (opts) { this._options.position = opts.position; this._options.width = opts.width; } diff --git a/timeline-chart/src/layer/time-graph-axis.ts b/timeline-chart/src/layer/time-graph-axis.ts index 2ab6cae..fa82dd7 100644 --- a/timeline-chart/src/layer/time-graph-axis.ts +++ b/timeline-chart/src/layer/time-graph-axis.ts @@ -7,12 +7,17 @@ export class TimeGraphAxis extends TimeGraphLayer { protected scaleComponent: TimeGraphAxisScale; - constructor(id: string, protected style?: { color?: number }) { + constructor(id: string, protected style?: { color?: number, lineColor?: number }) { super(id); } protected getOptions() { - const color = this.style && this.style.color ? this.style.color : undefined; + let color; + let lineColor; + if(this.style){ + color = this.style.color; + lineColor = this.style.lineColor; + } return { height: this.stateController.canvasDisplayHeight, width: this.stateController.canvasDisplayWidth, @@ -20,7 +25,8 @@ export class TimeGraphAxis extends TimeGraphLayer { x: 0, y: 0 }, - color + color, + lineColor } } diff --git a/timeline-chart/src/layer/time-graph-chart-grid.ts b/timeline-chart/src/layer/time-graph-chart-grid.ts index 2572458..4f21fae 100644 --- a/timeline-chart/src/layer/time-graph-chart-grid.ts +++ b/timeline-chart/src/layer/time-graph-chart-grid.ts @@ -5,7 +5,7 @@ export class TimeGraphChartGrid extends TimeGraphLayer { protected gridComponent: TimeGraphGrid; - constructor(id: string, protected rowHeight: number) { + constructor(id: string, protected rowHeight: number, protected lineColor?: number) { super(id); } @@ -13,7 +13,8 @@ export class TimeGraphChartGrid extends TimeGraphLayer { this.gridComponent = new TimeGraphGrid('', { height: this.stateController.canvasDisplayHeight, position: { x: 0, y: 0 }, - width: this.stateController.canvasDisplayWidth + width: this.stateController.canvasDisplayWidth, + lineColor: this.lineColor }, this.rowHeight, this.unitController, this.stateController); this.addChild(this.gridComponent); this.unitController.onViewRangeChanged(() => this.update()); diff --git a/timeline-chart/src/layer/time-graph-chart-selection-range.ts b/timeline-chart/src/layer/time-graph-chart-selection-range.ts index d86c393..44409bc 100644 --- a/timeline-chart/src/layer/time-graph-chart-selection-range.ts +++ b/timeline-chart/src/layer/time-graph-chart-selection-range.ts @@ -13,7 +13,7 @@ export class TimeGraphChartSelectionRange extends TimeGraphLayer { } protected updateScaleAndPosition() { - if (this.unitController.selectionRange) { + if (this.unitController.selectionRange && this.selectionRange) { this.selectionRange.rectOptions.position.x = this.getPixels(this.unitController.selectionRange.start - this.unitController.viewRange.start); this.selectionRange.rectOptions.width = this.getPixels(this.unitController.selectionRange.end - this.unitController.selectionRange.start) this.selectionRange.update(); diff --git a/timeline-chart/src/layer/time-graph-chart.ts b/timeline-chart/src/layer/time-graph-chart.ts index 2b57779..311a095 100644 --- a/timeline-chart/src/layer/time-graph-chart.ts +++ b/timeline-chart/src/layer/time-graph-chart.ts @@ -195,20 +195,29 @@ export class TimeGraphChart extends TimeGraphChartLayer { }).bind(this)); this.addChild(rowComponent); this.rowComponents.set(row, rowComponent); - row.states.forEach((rowElementModel: TimelineChart.TimeGraphRowElementModel, elementIndex: number) => { - const start = this.getPixels(rowElementModel.range.start); - const end = this.getPixels(rowElementModel.range.end); - const range: TimelineChart.TimeGraphRange = { - start, - end - }; - const elementStyle = this.providers.rowElementStyleProvider ? this.providers.rowElementStyleProvider(rowElementModel) : undefined; - const el = new TimeGraphRowElement(rowElementModel.id, rowElementModel, range, rowComponent, elementStyle); - this.rowElementComponents.set(rowElementModel, el); - el.model.selected && (this.selectedElementModel = el.model); + let selectedElement: TimeGraphRowElement | undefined; + row.states.forEach((rowElementModel: TimelineChart.TimeGraphRowElementModel) => { + const el = this.createNewRowElement(rowElementModel, rowComponent); + el.model.selected && (this.selectedElementModel = el.model) && (selectedElement = el); this.addElementInteractions(el); - this.addChild(el); + !el.model.selected && this.addChild(el); }); + if (selectedElement) { + this.addChild(selectedElement); + } + } + + protected createNewRowElement(rowElementModel: TimelineChart.TimeGraphRowElementModel, rowComponent: TimeGraphRow) { + const start = this.getPixels(rowElementModel.range.start); + const end = this.getPixels(rowElementModel.range.end); + const range: TimelineChart.TimeGraphRange = { + start, + end + }; + const elementStyle = this.providers.rowElementStyleProvider ? this.providers.rowElementStyleProvider(rowElementModel) : undefined; + const el = new TimeGraphRowElement(rowElementModel.id, rowElementModel, range, rowComponent, elementStyle); + this.rowElementComponents.set(rowElementModel, el); + return el; } protected addElementInteractions(el: TimeGraphRowElement) { @@ -258,7 +267,7 @@ export class TimeGraphChart extends TimeGraphChartLayer { } protected updateElementStyle(model: TimelineChart.TimeGraphRowElementModel) { - const style = this.providers.rowElementStyleProvider && this.providers.rowElementStyleProvider(this.selectedElementModel); + const style = this.providers.rowElementStyleProvider && this.providers.rowElementStyleProvider(model); const component = this.rowElementComponents.get(model); component && style && (component.style = style); } @@ -304,7 +313,13 @@ export class TimeGraphChart extends TimeGraphChartLayer { this.updateElementStyle(this.selectedElementModel); const el = this.getElementById(model.id); if (el) { - this.selectRow(el.row.model); + const row = el.row; + if (row) { + const newEl = this.createNewRowElement(model, row); + this.removeChild(el); + this.addChild(newEl); + this.selectRow(newEl.row.model); + } } this.handleSelectedRowElementChange(); } diff --git a/timeline-chart/src/time-graph-container.ts b/timeline-chart/src/time-graph-container.ts index 68c40cd..2139ed5 100644 --- a/timeline-chart/src/time-graph-container.ts +++ b/timeline-chart/src/time-graph-container.ts @@ -2,6 +2,7 @@ import * as PIXI from "pixi.js"; import { TimeGraphUnitController } from "./time-graph-unit-controller"; import { TimeGraphStateController } from "./time-graph-state-controller"; import { TimeGraphLayer } from "./layer/time-graph-layer"; +import { TimeGraphRectangle } from "./components/time-graph-rectangle"; export interface TimeGraphContainerOptions { id: string @@ -56,6 +57,18 @@ export class TimeGraphContainer { this.stateController = new TimeGraphStateController(canvas, unitController); this.layers = []; + + const background = new TimeGraphRectangle({ + opacity: 0, + position: { + x:0, y:0 + }, + height: this.canvas.height, + width: this.canvas.width, + color: 0x550000 + }); + background.render(); + this.stage.addChild(background.displayObject); } get canvas(): HTMLCanvasElement {