From cb65431a366658aa12f2a79fb27dde62e8857dd4 Mon Sep 17 00:00:00 2001 From: Jan Bicker Date: Mon, 7 Jan 2019 09:46:22 +0000 Subject: [PATCH] Arrows added --- example/src/index.ts | 12 +++---- .../src/components/time-graph-arrow.ts | 31 +++++++++---------- .../src/layer/time-graph-chart-arrows.ts | 24 +++++++------- timeline-chart/src/layer/time-graph-chart.ts | 2 -- 4 files changed, 34 insertions(+), 35 deletions(-) diff --git a/example/src/index.ts b/example/src/index.ts index 59767e0..a3ab2ed 100644 --- a/example/src/index.ts +++ b/example/src/index.ts @@ -13,7 +13,7 @@ import { TimeGraphRowElement, TimeGraphRowElementStyle } from "timeline-chart/li import { TestDataProvider } from "./test-data-provider"; import { TimeGraphChartGrid } from "timeline-chart/lib/layer/time-graph-chart-grid"; import { TimeGraphVerticalScrollbar } from "timeline-chart/lib/layer/time-graph-vertical-scrollbar"; -// import { TimeGraphChartArrows } from "timeline-chart/lib/layer/time-graph-chart-arrows"; +import { TimeGraphChartArrows } from "timeline-chart/lib/layer/time-graph-chart-arrows"; const styleConfig = { mainWidth: 1000, @@ -80,11 +80,11 @@ timeGraphChartContainer.addLayer(timeGraphChartGridLayer); const timeGraphChart = new TimeGraphChart('timeGraphChart', { dataProvider: (range: TimeGraphRange, resolution: number) => { const length = range.end - range.start; - const overlap = ((length * 5) - length) / 2; + const overlap = ((length * 20) - length) / 2; const start = range.start - overlap > 0 ? range.start - overlap : 0; const end = range.end + overlap < unitController.absoluteRange ? range.end + overlap : unitController.absoluteRange; const newRange: TimeGraphRange = { start, end }; - const newResolution: number = resolution * 0.6; + const newResolution: number = resolution * 0.1; timeGraph = testDataProvider.getData({ range: newRange, resolution: newResolution }); if (selectedElement) { for (const row of timeGraph.rows) { @@ -156,9 +156,9 @@ timeGraphChart.onSelectedRowElementChanged((model) => { } }) -// const timeGraphChartArrows = new TimeGraphChartArrows('timeGraphChartArrows'); -// timeGraphChartContainer.addLayer(timeGraphChartArrows); -// timeGraphChartArrows.addArrows(timeGraph.arrows, rowHeight); +const timeGraphChartArrows = new TimeGraphChartArrows('timeGraphChartArrows', rowController); +timeGraphChartContainer.addLayer(timeGraphChartArrows); +timeGraphChartArrows.addArrows(timeGraph.arrows); const timeAxisCursors = new TimeGraphAxisCursors('timeGraphAxisCursors', { color: styleConfig.cursorColor }); timeGraphAxisContainer.addLayer(timeAxisCursors); diff --git a/timeline-chart/src/components/time-graph-arrow.ts b/timeline-chart/src/components/time-graph-arrow.ts index 2803e17..980fbbd 100644 --- a/timeline-chart/src/components/time-graph-arrow.ts +++ b/timeline-chart/src/components/time-graph-arrow.ts @@ -12,7 +12,7 @@ export class TimeGraphArrowComponent extends TimeGraphComponent { } render(): void { - const {start, end} = this.coords; + const { start, end } = this.coords; this._displayObject.lineStyle(1, 0x000000); this._displayObject.moveTo(start.x, start.y); this._displayObject.lineTo(end.x, end.y); @@ -26,20 +26,19 @@ export class TimeGraphArrowHead extends TimeGraphComponent { } render(): void { - // const end = this.coords.end; - // this._displayObject.beginFill(0x000000); - // this._displayObject.drawPolygon([ - // end.x, end.y, - // end.x-10, end.y-4, - // end.x-10, end.y+4, - // end.x,end.y - // ]); - // const head = PIXI.Sprite.fromImage('../assets/arrowhead.png'); - // head.x = 100; - // head.y = 100; - // this._displayObject.addChild(head); - // this._displayObject.endFill(); - // this._displayObject.pivot = new PIXI.Point(end.x, end.y); - // this._displayObject.rotation = 45; + const { end, start } = this.coords; + this._displayObject.beginFill(0x000000); + this._displayObject.drawPolygon([ + end.x, end.y, + end.x - 10, end.y - 4, + end.x - 10, end.y + 4, + end.x, end.y + ]); + this._displayObject.endFill(); + this._displayObject.position.x = end.x; + this._displayObject.position.y = end.y; + this._displayObject.pivot = new PIXI.Point(end.x, end.y); + + this._displayObject.rotation = Math.atan2(end.y - start.y, end.x - start.x); } } \ 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 f5d3ad4..ebfbb9f 100644 --- a/timeline-chart/src/layer/time-graph-chart-arrows.ts +++ b/timeline-chart/src/layer/time-graph-chart-arrows.ts @@ -6,22 +6,25 @@ import { TimeGraphChartLayer } from "./time-graph-chart-layer"; export class TimeGraphChartArrows extends TimeGraphChartLayer { - protected rowHeight: number; protected arrows: TimeGraphArrow[]; protected afterAddToContainer() { this.unitController.onViewRangeChanged(() => this.update()); + + this.rowController.onVerticalOffsetChangedHandler(verticalOffset => { + this.layer.position.y = -verticalOffset; + }); } - protected addArrow(arrow: TimeGraphArrow, rowHeight: number) { + protected addArrow(arrow: TimeGraphArrow) { const relativeStartPosition = arrow.range.start - this.unitController.viewRange.start; const start: TimeGraphElementPosition = { x: relativeStartPosition * this.stateController.zoomFactor, - y: (arrow.sourceId * rowHeight) + (rowHeight / 2) + y: (arrow.sourceId * this.rowController.rowHeight) + (this.rowController.rowHeight / 2) } const end: TimeGraphElementPosition = { x: (relativeStartPosition + arrow.range.end - arrow.range.start) * this.stateController.zoomFactor, - y: (arrow.destinationId * rowHeight) + (rowHeight / 2) + y: (arrow.destinationId * this.rowController.rowHeight) + (this.rowController.rowHeight / 2) } const arrowComponent = new TimeGraphArrowComponent('arrow', { start, end }); this.addChild(arrowComponent); @@ -29,15 +32,14 @@ export class TimeGraphChartArrows extends TimeGraphChartLayer { this.addChild(arrowHead); } - addArrows(arrows: TimeGraphArrow[], rowHeight: number): void { + addArrows(arrows: TimeGraphArrow[]): void { if (!this.stateController) { throw ('Add this TimeGraphChartArrows to a container before adding arrows.'); } - this.rowHeight = rowHeight; this.arrows = []; arrows.forEach(arrow => { this.arrows.push(arrow); - this.addArrow(arrow, rowHeight); + this.addArrow(arrow); }) } @@ -53,10 +55,10 @@ export class TimeGraphChartArrows extends TimeGraphChartLayer { // this.stage.addChild(sprite); // }).bind(this)); - // if (this.arrows && this.rowHeight) { - // this.removeChildren(); - // this.addArrows(this.arrows, this.rowHeight); - // } + if (this.arrows) { + this.removeChildren(); + this.addArrows(this.arrows); + } } } \ 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 776839b..6ea2e5c 100644 --- a/timeline-chart/src/layer/time-graph-chart.ts +++ b/timeline-chart/src/layer/time-graph-chart.ts @@ -2,7 +2,6 @@ import { TimeGraphRowElement, TimeGraphRowElementStyle } from "../components/tim import { TimeGraphRow, TimeGraphRowStyle } from "../components/time-graph-row"; import { TimeGraphRowModel, TimeGraphRowElementModel, TimeGraphRange } from "../time-graph-model"; import { TimeGraphComponent } from "../components/time-graph-component"; -import * as _ from "lodash"; import { TimeGraphChartLayer } from "./time-graph-chart-layer"; import { TimeGraphRowController } from "../time-graph-row-controller"; @@ -84,7 +83,6 @@ export class TimeGraphChart extends TimeGraphChartLayer { this.viewRange.end > this.providedRange.end || resolution < this.providedResolution )) { - console.log("fetch"); this.fetching = true; const rowData = this.providers.dataProvider(this.viewRange, resolution); if (rowData) {