diff --git a/example/src/test-data.ts b/example/src/test-data.ts deleted file mode 100644 index 5fa3d98..0000000 --- a/example/src/test-data.ts +++ /dev/null @@ -1,596 +0,0 @@ -import { TimeGraphModel } from "timeline-chart/lib/time-graph-model"; - -export const timeGraph: TimeGraphModel = { - id: 'test1', - totalRange: 160000, - rows: [ - { - id: 0, - name: 'Test Row 1', - range: { - start: 0, - end: 12000 - }, - states: [ - { - id: '0_0', - label: 'row 1 state 1', - range: { - start: 10, - end: 100 - }, - data: { - value: 'yellow' - }, - selected: false - }, - { - id: '0_1', - label: 'row 1 state 2', - range: { - start: 210, - end: 1100 - }, - data: { - value: 'red' - }, - selected: false - }, - { - id: '0_2', - label: 'row 1 state 3', - range: { - start: 1110, - end: 2100 - }, - selected: false - }, - { - id: '0_3', - label: 'row 1 state 4', - range: { - start: 2510, - end: 2600 - }, - selected: false - }, - { - id: '0_4', - label: 'row 1 state 5', - range: { - start: 4010, - end: 6100 - }, - data: { - value: 'red' - }, - selected: false - }, - { - id: '0_5', - label: 'row 1 state 6', - range: { - start: 7010, - end: 8100 - }, - data: { - value: 'yellow' - }, - selected: false - }, - { - id: '0_6', - label: 'row 1 state 7', - range: { - start: 9010, - end: 11100 - }, - selected: false - }, - ], - selected: false - }, - { - id: 1, - name: 'empty row1', - range: { - start: 0, - end: 160000 - }, - selected: false, - states: [] - }, - { - id: 2, - name: 'empty row2', - range: { - start: 0, - end: 160000 - }, - selected: false, - states: [] - }, - { - id: 3, - name: 'empty row3', - range: { - start: 0, - end: 160000 - }, - selected: false, - states: [] - }, - { - id: 4, - name: 'empty row4', - range: { - start: 0, - end: 160000 - }, - selected: false, - states: [] - }, - { - id: 5, - name: 'empty row5', - range: { - start: 0, - end: 160000 - }, - selected: false, - states: [] - }, - { - id: 6, - name: 'empty row6', - range: { - start: 0, - end: 160000 - }, - selected: false, - states: [] - }, - { - id: 7, - name: 'empty row7', - range: { - start: 0, - end: 160000 - }, - selected: false, - states: [] - }, - { - id: 8, - name: 'empty row8', - range: { - start: 0, - end: 160000 - }, - selected: false, - states: [] - }, - { - id: 9, - name: 'empty row9', - range: { - start: 0, - end: 160000 - }, - selected: false, - states: [] - }, - { - id: 10, - name: 'empty row10', - range: { - start: 0, - end: 160000 - }, - selected: false, - states: [] - }, - { - id: 11, - name: 'empty row11', - range: { - start: 0, - end: 160000 - }, - selected: false, - states: [] - }, - { - id: 12, - name: 'empty row12', - range: { - start: 0, - end: 160000 - }, - selected: false, - states: [] - }, - { - id: 13, - name: 'empty row13', - range: { - start: 0, - end: 160000 - }, - selected: false, - states: [] - }, - { - id: 14, - name: 'Test Row 2', - range: { - start: 9000, - end: 63000 - }, - states: [ - { - id: '1_0', - label: 'row 2 state 1', - range: { - start: 11000, - end: 15000 - }, - data: { - value: "red", - }, - selected: false - }, - { - id: '1_1', - label: 'row 2 state 3', - range: { - start: 15320, - end: 15500 - }, - data: { - value: 'red' - }, - selected: false - }, - { - id: '1_2', - label: 'row 2 state 4', - range: { - start: 26500, - end: 34550 - }, - data: { - value: 'yellow' - }, - selected: false - }, - { - id: '1_3', - label: 'row 2 state 5', - range: { - start: 35650, - end: 46550 - }, - data: { - value: 'red' - }, - selected: false - }, - { - id: '1_4', - label: 'row 2 state 6', - range: { - start: 57650, - end: 58455 - }, - selected: false - } - ], - selected: false - }, - { - id: 15, - name: 'Test Row 3', - range: { - start: 21000, - end: 39000 - }, - states: [ - { - id: '2_0', - label: 'row 3 state 1', - range: { - start: 21145, - end: 28255 - }, - data: { - value: 'red' - }, - selected: false - }, - { - id: '2_1', - label: 'row 3 state 2', - range: { - start: 31265, - end: 35275 - }, - selected: false - }, - { - id: '2_2', - label: 'row 3 state 3', - range: { - start: 36865, - end: 38955 - }, - selected: false - } - ], - selected: false - }, - { - id: 16, - name: 'Test Row 4', - range: { - start: 35000, - end: 50000 - }, - states: [ - { - id: '3_0', - label: 'row 4 state 1', - range: { - start: 35265, - end: 36455 - }, - selected: false - }, - { - id: '3_1', - label: 'row 4 state 2', - range: { - start: 43265, - end: 46455 - }, - data: { - value: 'red' - }, - selected: false - }, - { - id: '3_2', - label: 'row 4 state 3', - range: { - start: 48265, - end: 50000 - }, - selected: false - } - ], - selected: false - }, - { - id: 17, - name: 'Test Row 5', - range: { - start: 45000, - end: 90000 - }, - states: [ - { - id: '4_0', - label: 'row 5 state 1', - range: { - start: 45265, - end: 46455 - }, - data: { - value: 'red' - }, - selected: false - }, - { - id: '4_1', - label: 'row 5 state 2', - range: { - start: 53265, - end: 66455 - }, - data: { - value: 'yellow' - }, - selected: false - }, - { - id: '4_2', - label: 'row 5 state 3', - range: { - start: 78265, - end: 90000 - }, - selected: false - } - ], - selected: false - }, - { - id: 18, - name: 'empty row', - range: { - start: 0, - end: 160000 - }, - selected: false, - states: [] - }, - { - id: 19, - name: 'empty row', - range: { - start: 0, - end: 160000 - }, - selected: false, - states: [] - }, - { - id: 20, - name: 'empty row', - range: { - start: 0, - end: 160000 - }, - selected: false, - states: [] - }, - { - id: 21, - name: 'empty row', - range: { - start: 0, - end: 160000 - }, - selected: false, - states: [] - }, - { - id: 22, - name: 'empty row', - range: { - start: 0, - end: 160000 - }, - selected: false, - states: [] - }, - { - id: 23, - name: 'Test Row 6', - range: { - start: 75000, - end: 160000 - }, - states: [ - { - id: '5_0', - label: 'row 6 state 1', - range: { - start: 75265, - end: 76455 - }, - data: { - value: 'red' - }, - selected: false - }, - { - id: '5_1', - label: 'row 6 state 2', - range: { - start: 77265, - end: 86455 - }, - selected: false - }, - { - id: '5_2', - label: 'row 6 state 3', - range: { - start: 100265, - end: 100455 - }, - data: { - value: 'red' - }, - selected: false - }, - { - id: '5_3', - label: 'row 6 state 4', - range: { - start: 120265, - end: 126455 - }, - selected: false - }, - { - id: '5_4', - label: 'row 6 state 5', - range: { - start: 147265, - end: 160000 - }, - selected: false - } - ], - selected: false - }, - { - id: 24, - name: 'Test Row 7', - range: { - start: 0, - end: 160000 - }, - states: [ - { - id: '6_0', - label: 'row 7 state 1', - range: { - start: 0, - end: 160000 - }, - data: { - value: 'red' - }, - selected: false - } - ], - selected: false - } - ], - arrows: [ - { - sourceId: 1, - destinationId: 2, - range: { - start: 15000, - end: 21145 - } - }, - { - sourceId: 2, - destinationId: 2, - range: { - start: 28255, - end: 31265 - } - }, - { - sourceId: 2, - destinationId: 1, - range: { - start: 35275, - end: 35650 - } - }, - { - sourceId: 5, - destinationId: 4, - range: { - start: 76455, - end: 78265 - } - }, - { - sourceId: 4, - destinationId: 5, - range: { - start: 90000, - end: 100265 - } - } - - ] -} \ No newline at end of file diff --git a/timeline-chart/src/assets/arrowhead.png b/timeline-chart/src/assets/arrowhead.png deleted file mode 100644 index eb139f9..0000000 Binary files a/timeline-chart/src/assets/arrowhead.png and /dev/null differ diff --git a/timeline-chart/src/components/arrowhead.png b/timeline-chart/src/components/arrowhead.png deleted file mode 100644 index eb139f9..0000000 Binary files a/timeline-chart/src/components/arrowhead.png and /dev/null differ diff --git a/timeline-chart/src/components/time-graph-grid.ts b/timeline-chart/src/components/time-graph-grid.ts index 7303c5e..481ff5c 100644 --- a/timeline-chart/src/components/time-graph-grid.ts +++ b/timeline-chart/src/components/time-graph-grid.ts @@ -17,17 +17,5 @@ export class TimeGraphGrid extends TimeGraphAxisScale { render(): void { this.renderVerticalLines(this.stateController.canvasDisplayHeight, 0xdddddd); - - // const rowNumber = Math.trunc(this.stateController.canvasDisplayHeight / this.rowHeight) + 2; - // for (let i = 0; i < rowNumber; i++) { - // this.hline({ - // color: 0xdddddd, - // position: { - // x: this._options.position.x, - // y: (i * this.rowHeight) - (this.rowHeight / 2) - // }, - // width: this._options.width - // }); - // } } } \ No newline at end of file diff --git a/timeline-chart/src/layer/time-graph-chart-arrows.ts b/timeline-chart/src/layer/time-graph-chart-arrows.ts index ebfbb9f..ce26c03 100644 --- a/timeline-chart/src/layer/time-graph-chart-arrows.ts +++ b/timeline-chart/src/layer/time-graph-chart-arrows.ts @@ -44,17 +44,6 @@ export class TimeGraphChartArrows extends TimeGraphChartLayer { } protected update(): void { - // PIXI.loader - // .add(ArrowHead) - // .load((() => { - // let sprite = new PIXI.Sprite( - // PIXI.loader.resources[ArrowHead].texture - // ); - // sprite.x = 100; - // sprite.y = 100; - // this.stage.addChild(sprite); - // }).bind(this)); - if (this.arrows) { this.removeChildren(); this.addArrows(this.arrows); diff --git a/timeline-chart/src/layer/time-graph-chart.ts b/timeline-chart/src/layer/time-graph-chart.ts index 6ea2e5c..bc3bea4 100644 --- a/timeline-chart/src/layer/time-graph-chart.ts +++ b/timeline-chart/src/layer/time-graph-chart.ts @@ -35,8 +35,7 @@ export class TimeGraphChart extends TimeGraphChartLayer { constructor(id: string, protected providers: TimeGraphChartProviders, - protected rowController: TimeGraphRowController, - protected viewRange?: TimeGraphRange) { + protected rowController: TimeGraphRowController) { super(id, rowController); this.providedRange = { start: 0, end: 0 }; this.providedResolution = 1; @@ -60,12 +59,8 @@ export class TimeGraphChart extends TimeGraphChartLayer { this.layer.position.y = -verticalOffset; }); - if (!this.viewRange) { - this.viewRange = this.unitController.viewRange; - } this.unitController.onViewRangeChanged(() => { this.updateScaleAndPosition(); - this.viewRange = this.unitController.viewRange; if (!this.fetching) { this.maybeFetchNewData(); } @@ -78,13 +73,14 @@ export class TimeGraphChart extends TimeGraphChartLayer { protected maybeFetchNewData() { const resolution = this.unitController.viewRangeLength / this.stateController.canvasDisplayWidth; - if (this.viewRange && ( - this.viewRange.start < this.providedRange.start || - this.viewRange.end > this.providedRange.end || + const viewRange = this.unitController.viewRange; + if (viewRange && ( + viewRange.start < this.providedRange.start || + viewRange.end > this.providedRange.end || resolution < this.providedResolution )) { this.fetching = true; - const rowData = this.providers.dataProvider(this.viewRange, resolution); + const rowData = this.providers.dataProvider(viewRange, resolution); if (rowData) { this.providedResolution = rowData.resolution; this.providedRange = rowData.range; diff --git a/timeline-chart/src/time-graph-model.ts b/timeline-chart/src/time-graph-model.ts index c6fdc59..be008ab 100644 --- a/timeline-chart/src/time-graph-model.ts +++ b/timeline-chart/src/time-graph-model.ts @@ -5,6 +5,7 @@ export interface TimeGraphRange { export interface TimeGraphModel { id: string + // what is this? A range is usually an interval with start and end. Consider rename totalRange: number rows: TimeGraphRowModel[] arrows: TimeGraphArrow[] @@ -32,4 +33,5 @@ export interface TimeGraphArrow { destinationId: number range: TimeGraphRange data?: {[key:string]:any} + // Q: Can I select an arrow? } \ No newline at end of file diff --git a/timeline-chart/src/time-graph-row-controller.ts b/timeline-chart/src/time-graph-row-controller.ts index c4790d5..ab6f86a 100644 --- a/timeline-chart/src/time-graph-row-controller.ts +++ b/timeline-chart/src/time-graph-row-controller.ts @@ -3,27 +3,27 @@ import { TimeGraphRowModel } from "./time-graph-model"; export class TimeGraphRowController { private _selectedRow: TimeGraphRowModel; private _verticalOffset: number; - protected selectedRowChangedHandler: ((row: TimeGraphRowModel) => void)[] = []; - protected verticalOffsetChangedHandler: ((verticalOffset: number) => void)[] = []; + protected selectedRowChangedHandlers: ((row: TimeGraphRowModel) => void)[] = []; + protected verticalOffsetChangedHandlers: ((verticalOffset: number) => void)[] = []; constructor(public rowHeight: number, public totalHeight: number) { this._verticalOffset = 0; } protected handleVerticalOffsetChanged(){ - this.verticalOffsetChangedHandler.forEach(h=>h(this._verticalOffset)); + this.verticalOffsetChangedHandlers.forEach(h=>h(this._verticalOffset)); } protected handleSelectedRowChanged(){ - this.selectedRowChangedHandler.forEach(h=>h(this._selectedRow)); + this.selectedRowChangedHandlers.forEach(h=>h(this._selectedRow)); } onSelectedRowChangedHandler(handler: (row: TimeGraphRowModel) => void) { - this.selectedRowChangedHandler.push(handler); + this.selectedRowChangedHandlers.push(handler); } onVerticalOffsetChangedHandler(handler: (verticalOffset: number) => void) { - this.verticalOffsetChangedHandler.push(handler); + this.verticalOffsetChangedHandlers.push(handler); } get verticalOffset(): number { diff --git a/timeline-chart/src/time-graph-state-controller.ts b/timeline-chart/src/time-graph-state-controller.ts index 5784a4f..46f9c87 100644 --- a/timeline-chart/src/time-graph-state-controller.ts +++ b/timeline-chart/src/time-graph-state-controller.ts @@ -21,8 +21,8 @@ export class TimeGraphStateController { y: number; }; - protected zoomChangedHandler: (() => void)[]; - protected positionChangedHandler: (() => void)[]; + protected zoomChangedHandlers: (() => void)[]; + protected positionChangedHandlers: (() => void)[]; constructor(protected canvas: HTMLCanvasElement, protected unitController: TimeGraphUnitController) { const ratio = window.devicePixelRatio; @@ -31,22 +31,22 @@ export class TimeGraphStateController { this._initialZoomFactor = this.zoomFactor; this._positionOffset = { x: 0, y: 0 }; this.oldPositionOffset = { x: 0, y: 0 }; - this.zoomChangedHandler = []; - this.positionChangedHandler = []; + this.zoomChangedHandlers = []; + this.positionChangedHandlers = []; } protected handleZoomChange() { - this.zoomChangedHandler.map(handler => handler()); + this.zoomChangedHandlers.forEach(handler => handler()); } protected handlePositionChange() { - this.positionChangedHandler.map(handler => handler()); + this.positionChangedHandlers.forEach(handler => handler()); } onZoomChanged(handler: () => void) { - this.zoomChangedHandler.push(handler); + this.zoomChangedHandlers.push(handler); } onPositionChanged(handler: () => void) { - this.positionChangedHandler.push(handler); + this.positionChangedHandlers.push(handler); } get initialZoomFactor(): number { diff --git a/timeline-chart/src/time-graph-unit-controller.ts b/timeline-chart/src/time-graph-unit-controller.ts index c79bf8a..02c6398 100644 --- a/timeline-chart/src/time-graph-unit-controller.ts +++ b/timeline-chart/src/time-graph-unit-controller.ts @@ -1,35 +1,35 @@ import { TimeGraphRange } from "./time-graph-model"; export class TimeGraphUnitController { - protected viewRangeChangedHandler: ((newRange: TimeGraphRange) => void)[]; + protected viewRangeChangedHandlers: ((newRange: TimeGraphRange) => void)[]; protected _viewRange: TimeGraphRange; - protected selectionRangeChangedHandler: ((newRange?: TimeGraphRange) => void)[]; + protected selectionRangeChangedHandlers: ((newRange?: TimeGraphRange) => void)[]; protected _selectionRange?: TimeGraphRange; numberTranslator?: (theNumber: number) => string; constructor(public absoluteRange: number, viewRange?: TimeGraphRange) { - this.viewRangeChangedHandler = []; + this.viewRangeChangedHandlers = []; this._viewRange = viewRange || { start: 0, end: absoluteRange }; - this.selectionRangeChangedHandler = []; + this.selectionRangeChangedHandlers = []; } protected handleViewRangeChange() { - this.viewRangeChangedHandler.map(handler => handler(this._viewRange)); + this.viewRangeChangedHandlers.forEach(handler => handler(this._viewRange)); } protected handleSelectionRangeChange() { - this.selectionRangeChangedHandler.map(handler => handler(this._selectionRange)); + this.selectionRangeChangedHandlers.forEach(handler => handler(this._selectionRange)); } onViewRangeChanged(handler: (viewRange: TimeGraphRange) => void) { - this.viewRangeChangedHandler.push(handler); + this.viewRangeChangedHandlers.push(handler); } onSelectionRangeChange(handler: (selectionRange: TimeGraphRange) => void) { - this.selectionRangeChangedHandler.push(handler); + this.selectionRangeChangedHandlers.push(handler); } get viewRange(): TimeGraphRange {