Arrows added

eclipse-cdt-cloud · Jan 7, 2019 · cb65431 · cb65431
1 parent bf71c5a
commit cb65431
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 35 deletions.
diff --git 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
@@ -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);
     }
 }
diff --git a/timeline-chart/src/layer/time-graph-chart-arrows.ts b/timeline-chart/src/layer/time-graph-chart-arrows.ts
@@ -6,38 +6,40 @@ 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);
         const arrowHead = new TimeGraphArrowHead('arrowHead', { start, end });
         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);
+        }
     }
 
 }
diff --git 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) {