From e5a5e570b5213a56c3c38487c1bb2e1975819887 Mon Sep 17 00:00:00 2001 From: Jan Koehnlein Date: Tue, 8 Jan 2019 13:43:36 +0000 Subject: [PATCH] code review --- example/src/test-data.ts | 596 ------------------ timeline-chart/src/assets/arrowhead.png | Bin 2638 -> 0 bytes timeline-chart/src/components/arrowhead.png | Bin 2638 -> 0 bytes .../src/components/time-graph-grid.ts | 12 - .../src/layer/time-graph-chart-arrows.ts | 11 - timeline-chart/src/layer/time-graph-chart.ts | 16 +- timeline-chart/src/time-graph-model.ts | 2 + .../src/time-graph-row-controller.ts | 12 +- .../src/time-graph-state-controller.ts | 16 +- .../src/time-graph-unit-controller.ts | 16 +- 10 files changed, 30 insertions(+), 651 deletions(-) delete mode 100644 example/src/test-data.ts delete mode 100644 timeline-chart/src/assets/arrowhead.png delete mode 100644 timeline-chart/src/components/arrowhead.png 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 eb139f96e0bdbd9b32932e48f507a227af200167..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2638 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 { - // 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 {