From cbee9738c5fc48c160cffe5b42fe0baff33efe79 Mon Sep 17 00:00:00 2001 From: Sven Efftinge Date: Thu, 20 Dec 2018 07:03:40 +0000 Subject: [PATCH] wip - use scale and position --- example/package.json | 6 +- timeline-chart/src/layer/time-graph-chart.ts | 60 ++++++++------------ 2 files changed, 26 insertions(+), 40 deletions(-) diff --git a/example/package.json b/example/package.json index dfdd188..13aa5ca 100644 --- a/example/package.json +++ b/example/package.json @@ -3,9 +3,9 @@ "version": "0.0.2", "private": true, "scripts": { - "build": "webpack --mode development", - "watch": "webpack --watch --mode development", - "start": "webpack-dev-server --host 0.0.0.0" + "build": "webpack --mode=development", + "watch": "webpack --watch --mode=development", + "start": "webpack-dev-server --host 0.0.0.0 --mode=development" }, "devDependencies": { "@types/lodash.throttle": "^4.1.4", diff --git a/timeline-chart/src/layer/time-graph-chart.ts b/timeline-chart/src/layer/time-graph-chart.ts index 22dfbdd..b2b30ba 100644 --- a/timeline-chart/src/layer/time-graph-chart.ts +++ b/timeline-chart/src/layer/time-graph-chart.ts @@ -36,10 +36,8 @@ export class TimeGraphChart extends TimeGraphLayer { protected afterAddToContainer() { this.unitController.onViewRangeChanged(() => { - // TODO shouldn't be called on every view range change. - // Smarter decisions should be made here. - const rowData = this.pullHook(this.unitController.viewRange, this.stateController.zoomFactor); - this.setRowModel(rowData.rows); + this.stage.position.x = -(this.unitController.viewRange.start * this.stateController.zoomFactor); + this.stage.scale.x = this.stateController.zoomFactor; this.update(); }); this.onCanvasEvent('mousewheel', (ev: WheelEvent) => { @@ -52,17 +50,14 @@ export class TimeGraphChart extends TimeGraphLayer { verticalOffset = this.totalHeight - this.stateController.canvasDisplayHeight; } this.stateController.positionOffset.y = verticalOffset; + this.stage.position.y = -verticalOffset; this.handleVerticalPositionChange(); return false; }); - this.throttledUpdate = _.throttle(() => { - if (this.rows && this.rowHeight) { - this.removeChildren(); - this.addRows(this.rows, this.rowHeight); - } - }, 40); } + update() {} + protected handleVerticalPositionChange() { this.verticalPositionChangedHandler.forEach(handler => handler(this.stateController.positionOffset.y)); } @@ -77,15 +72,14 @@ export class TimeGraphChart extends TimeGraphLayer { protected addRow(row: TimeGraphRowModel, height: number, rowIndex: number) { const rowId = 'row_' + rowIndex; - const range = row.range.end - row.range.start; - const relativeStartPosition = row.range.start - this.unitController.viewRange.start; + const length = row.range.end - row.range.start; const rowStyle = this.rowStyleHook ? this.rowStyleHook(row) : undefined; const rowComponent = new TimeGraphRow(rowId, { position: { - x: relativeStartPosition * this.stateController.zoomFactor, - y: (height * rowIndex) - this.stateController.positionOffset.y + x: row.range.start, + y: (height * rowIndex) }, - width: range * this.stateController.zoomFactor, + width: length, height }, rowIndex, row, rowStyle); rowComponent.displayObject.interactive = true; @@ -94,20 +88,16 @@ export class TimeGraphChart extends TimeGraphLayer { }).bind(this)); this.addChild(rowComponent); row.states.forEach((rowElementModel: TimeGraphRowElementModel, elementIndex: number) => { - const relativeElementStartPosition = rowElementModel.range.start - this.unitController.viewRange.start; - const relativeElementEndPosition = rowElementModel.range.end - this.unitController.viewRange.start; - const start = (relativeElementStartPosition * this.stateController.zoomFactor) + this.stateController.positionOffset.x; - const end = (relativeElementEndPosition * this.stateController.zoomFactor) + this.stateController.positionOffset.x; - if (start < this.stateController.canvasDisplayWidth && end > 0) { - const range: TimeGraphRange = { - start, - end - }; - const elementStyle = this.rowElementStyleHook ? this.rowElementStyleHook(rowElementModel) : undefined; - const el = new TimeGraphRowElement(rowElementModel.id, rowElementModel, range, rowComponent, elementStyle); - this.addElementInteractions(el); - this.addChild(el); - } + const start = rowElementModel.range.start; + const end = rowElementModel.range.end; + const range: TimeGraphRange = { + start, + end + }; + const elementStyle = this.rowElementStyleHook ? this.rowElementStyleHook(rowElementModel) : undefined; + const el = new TimeGraphRowElement(rowElementModel.id, rowElementModel, range, rowComponent, elementStyle); + this.addElementInteractions(el); + this.addChild(el); }); } @@ -152,12 +142,12 @@ export class TimeGraphChart extends TimeGraphLayer { }); } - protected update() { - this.throttledUpdate(); - } - registerPullHook(pullHook: (range: TimeGraphRange, resolution: number) => {rows: TimeGraphRowModel[], range: TimeGraphRange}){ this.pullHook = pullHook; + // lets fetch everything + const rowData = this.pullHook({ start:0, end: this.unitController.absoluteRange}, 1); + this.setRowModel(rowData.rows); + this.addRows(rowData.rows, this.rowHeight); } registerRowStyleHook(styleHook: TimeGraphRowStyleHook) { @@ -206,7 +196,6 @@ export class TimeGraphChart extends TimeGraphLayer { this.selectedRow = row; row.selected = true; this.handleSelectedRowChange(); - this.update(); } getSelectedRowElement(): TimeGraphRowElementModel { @@ -224,16 +213,13 @@ export class TimeGraphChart extends TimeGraphLayer { this.selectRow(el.row.model); } this.handleSelectedRowElementChange(); - this.update(); } setRowModel(rows: TimeGraphRowModel[]) { this.rows = rows; - this.update(); } setVerticalPositionOffset(ypos: number) { this.stateController.positionOffset.y = ypos; - this.update(); } } \ No newline at end of file