several impovements

timeline-chart/src/components/time-graph-arrow.ts

@@ -1,44 +1,56 @@
-import { TimeGraphComponent, TimeGraphElementPosition } from "./time-graph-component";
+import { TimeGraphComponent, TimeGraphElementPosition, TimeGraphComponentOptions } from "./time-graph-component";
 
-export interface TimeGraphArrowCoordinates {
+export interface TimeGraphArrowCoordinates extends TimeGraphComponentOptions {
     start: TimeGraphElementPosition
     end: TimeGraphElementPosition
 }
 
 export class TimeGraphArrowComponent extends TimeGraphComponent {
 
-    constructor(id: string, protected coords: TimeGraphArrowCoordinates) {
+    protected head: PIXI.Graphics;
+
+    constructor(id: string, protected _options: TimeGraphArrowCoordinates) {
         super(id);
+
+        this.head = new PIXI.Graphics();
     }
 
     render(): void {
-        const { start, end } = this.coords;
+        const { start, end } = this._options as TimeGraphArrowCoordinates;
         this._displayObject.lineStyle(1, 0x000000);
         this._displayObject.moveTo(start.x, start.y);
         this._displayObject.lineTo(end.x, end.y);
-    }
-}
-
-export class TimeGraphArrowHead extends TimeGraphComponent {
 
-    constructor(id: string, protected coords: TimeGraphArrowCoordinates) {
-        super(id);
-    }
-
-    render(): void {
-        const { end, start } = this.coords;
-        this._displayObject.beginFill(0x000000);
-        this._displayObject.drawPolygon([
+        // const edge = Math.sqrt((8*8)+(2*2));
+        // const cos_a = Math.cos(Math.atan2(end.y - start.y, end.x - start.x) + Math.atan2(2, 8));
+        // const cos_b = Math.cos(Math.atan2(end.y - start.y, end.x - start.x) - Math.atan2(2, 8));
+        // const xa = edge * cos_a;
+        // const ya = Math.sqrt((edge*edge) - (xa*xa));
+        // const xb = edge * cos_b;
+        // const yb = Math.sqrt((edge*edge) - (xb*xb));
+
+        // this._displayObject.beginFill(0x000000);
+        // this._displayObject.drawPolygon([
+        //     end.x, end.y,
+        //     end.x - xa, end.y - ya,
+        //     end.x - xb, end.y + yb,
+        //     end.x, end.y
+        // ]);
+        // this._displayObject.endFill();
+
+        this.head.clear();
+        this.head.beginFill(0x000000);
+        this.head.drawPolygon([
             end.x, end.y,
-            end.x - 10, end.y - 4,
-            end.x - 10, end.y + 4,
+            end.x - 7, end.y - 3,
+            end.x - 7, end.y + 3,
             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);
+        this.head.endFill();
+        this.head.position.x = end.x;
+        this.head.position.y = end.y;
+        this.head.pivot = new PIXI.Point(end.x, end.y);
+        this.head.rotation = Math.atan2(end.y - start.y, end.x - start.x);
+        this._displayObject.addChild(this.head);
     }
 }

timeline-chart/src/components/time-graph-axis-scale.ts

@@ -45,20 +45,23 @@ export class TimeGraphAxisScale extends TimeGraphComponent {
 
     protected getStepLength(): number {
         const canvasDisplayWidth = this.stateController.canvasDisplayWidth;
-        const minCanvasStepWidth = 200;
+        const minCanvasStepWidth = 80;
         const viewRangeLength = this.unitController.viewRangeLength;
-
         const maxSteps = canvasDisplayWidth / minCanvasStepWidth;
         const realStepLength = viewRangeLength / maxSteps;
         const log = Math.log10(realStepLength);
         const logRounded = Math.round(log);
         const normalizedStepLength = Math.pow(10, logRounded);
-        return normalizedStepLength;
+        const residual = realStepLength / normalizedStepLength;
+        const steps = [1, 1.5, 2, 2.5, 5, 10];
+        const normStepLength = steps.find(s => s > residual);
+        const stepLength = normalizedStepLength * (normStepLength || 1);
+        return stepLength;
     }
 
     protected renderVerticalLines(lineHeight: number, lineColor: number) {
         const stepLength = this.getStepLength();
-        const steps = Math.trunc(this.unitController.absoluteRange / stepLength);
+        const steps = Math.trunc(this.unitController.absoluteRange / stepLength) + 1;
         for (let i = 0; i < steps; i++) {
             const absolutePosition = stepLength * i;
             const xpos = (absolutePosition - this.unitController.viewRange.start) * this.stateController.zoomFactor;
@@ -86,7 +89,7 @@ export class TimeGraphAxisScale extends TimeGraphComponent {
         }
     }
 
-    update(opts?: TimeGraphComponentOptions){
+    update(opts?: TimeGraphComponentOptions) {
         this.labels.forEach(label => label.destroy());
         this.labels = [];
         super.update(opts);

timeline-chart/src/components/time-graph-rectangle.ts

@@ -3,13 +3,10 @@ import { TimeGraphComponent, TimeGraphStyledRect } from "./time-graph-component"
 export class TimeGraphRectangle extends TimeGraphComponent {
     constructor(protected opts: TimeGraphStyledRect){
         super('rect');
-    }
-
-    setOptions(opts: TimeGraphStyledRect){
-        this.opts = opts;
+        this._options = opts;
     }
 
     render(): void {
-        this.rect(this.opts);
+        this.rect(this._options as TimeGraphStyledRect);
     }
 }

timeline-chart/src/layer/time-graph-axis-cursors.ts

@@ -55,8 +55,8 @@ export class TimeGraphAxisCursors extends TimeGraphLayer {
             }
         } else {
             this.removeChildren();
-            this.firstCursor = undefined;
-            this.secondCursor = undefined;
+            delete this.firstCursor;
+            delete this.secondCursor;
         }
     }
 }

timeline-chart/src/layer/time-graph-chart-arrows.ts

@@ -1,12 +1,11 @@
-import { TimeGraphArrowComponent, TimeGraphArrowHead } from "../components/time-graph-arrow";
+import { TimeGraphArrowComponent, TimeGraphArrowCoordinates } from "../components/time-graph-arrow";
 import { TimeGraphElementPosition } from "../components/time-graph-component";
 import { TimeGraphArrow } from "../time-graph-model";
 import { TimeGraphChartLayer } from "./time-graph-chart-layer";
-// import ArrowHead from "./arrowhead.png";
 
 export class TimeGraphChartArrows extends TimeGraphChartLayer {
 
-    protected arrows: TimeGraphArrow[];
+    protected arrows: Map<TimeGraphArrow, TimeGraphArrowComponent>;
 
     protected afterAddToContainer() {
         this.unitController.onViewRangeChanged(() => this.update());
@@ -16,7 +15,7 @@ export class TimeGraphChartArrows extends TimeGraphChartLayer {
         });
     }
 
-    protected addArrow(arrow: TimeGraphArrow) {
+    protected getCoordinates(arrow: TimeGraphArrow): TimeGraphArrowCoordinates {
         const relativeStartPosition = arrow.range.start - this.unitController.viewRange.start;
         const start: TimeGraphElementPosition = {
             x: relativeStartPosition * this.stateController.zoomFactor,
@@ -26,27 +25,39 @@ export class TimeGraphChartArrows extends TimeGraphChartLayer {
             x: (relativeStartPosition + arrow.range.end - arrow.range.start) * this.stateController.zoomFactor,
             y: (arrow.destinationId * this.rowController.rowHeight) + (this.rowController.rowHeight / 2)
         }
-        const arrowComponent = new TimeGraphArrowComponent('arrow', { start, end });
+        return { start, end };
+    }
+
+    protected addArrow(arrow: TimeGraphArrow) {
+        const coords = this.getCoordinates(arrow);
+        const arrowComponent = new TimeGraphArrowComponent('arrow', coords);
+        this.arrows.set(arrow, arrowComponent);
         this.addChild(arrowComponent);
-        const arrowHead = new TimeGraphArrowHead('arrowHead', { start, end });
-        this.addChild(arrowHead);
     }
 
     addArrows(arrows: TimeGraphArrow[]): void {
         if (!this.stateController) {
             throw ('Add this TimeGraphChartArrows to a container before adding arrows.');
         }
-        this.arrows = [];
+        this.arrows = new Map();
         arrows.forEach(arrow => {
-            this.arrows.push(arrow);
             this.addArrow(arrow);
         })
     }
 
     protected update(): void {
         if (this.arrows) {
-            this.removeChildren();
-            this.addArrows(this.arrows);
+            for (const arrow of this.arrows.keys()) {
+                this.updateArrow(arrow);
+            }
+        }
+    }
+
+    protected updateArrow(arrow: TimeGraphArrow) {
+        const { start, end } = this.getCoordinates(arrow);
+        const arrowComponent = this.arrows.get(arrow);
+        if (arrowComponent) {
+            arrowComponent.update({ start, end });
         }
     }
 

timeline-chart/src/layer/time-graph-chart-cursors.ts

@@ -138,7 +138,6 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
     }
 
     update() {
-        this.removeChildren();
         if (this.unitController.selectionRange) {
             const firstCursorPosition = (this.unitController.selectionRange.start - this.unitController.viewRange.start) * this.stateController.zoomFactor;
             const secondCursorPosition = (this.unitController.selectionRange.end - this.unitController.viewRange.start) * this.stateController.zoomFactor;
@@ -150,8 +149,12 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
                     y: 0
                 }
             };
-            this.firstCursor = new TimeGraphCursor(firstCursorOptions);
-            this.addChild(this.firstCursor);
+            if (!this.firstCursor) {
+                this.firstCursor = new TimeGraphCursor(firstCursorOptions);
+                this.addChild(this.firstCursor);
+            }else{
+                this.firstCursor.update(firstCursorOptions);
+            }
             if (secondCursorPosition !== firstCursorPosition) {
                 const secondCursorOptions = {
                     color: this.color,
@@ -161,9 +164,20 @@ export class TimeGraphChartCursors extends TimeGraphChartLayer {
                         y: 0
                     }
                 };
-                this.secondCursor = new TimeGraphCursor(secondCursorOptions);
-                this.addChild(this.secondCursor);
+                if (!this.secondCursor) {
+                    this.secondCursor = new TimeGraphCursor(secondCursorOptions);
+                    this.addChild(this.secondCursor);
+                }else{
+                    this.secondCursor.update(secondCursorOptions);
+                }
+            } else if(!!this.secondCursor){
+                this.removeChild(this.secondCursor);
+                delete this.secondCursor;
             }
+        } else {
+            this.removeChildren();
+            delete this.firstCursor;
+            delete this.secondCursor;
         }
     }
 }

timeline-chart/src/layer/time-graph-chart-element-selection.ts

@@ -0,0 +1,8 @@
+import { TimeGraphChartLayer } from "./time-graph-chart-layer";
+
+export class TimeGraphChartElementSelection extends TimeGraphChartLayer {
+
+    setSelection(){
+
+    }
+}

timeline-chart/src/layer/time-graph-chart-selection-range.ts

@@ -26,22 +26,37 @@ export class TimeGraphChartSelectionRange extends TimeGraphLayer {
     }
 
     update() {
-        this.removeChildren();
         if (this.unitController.selectionRange) {
             const firstCursorPosition = this.unitController.selectionRange.start;
             const secondCursorPosition = this.unitController.selectionRange.end;
             if (secondCursorPosition !== firstCursorPosition) {
-                this.selectionRange = new TimeGraphRectangle({
-                    color: this.color,
-                    opacity: 0.2,
-                    position: {
-                        x: firstCursorPosition,
-                        y: 0
-                    },
-                    height: this.stateController.canvasDisplayHeight,
-                    width: secondCursorPosition - firstCursorPosition
-                });
-                this.addChild(this.selectionRange);
+                if (!this.selectionRange) {
+                    this.selectionRange = new TimeGraphRectangle({
+                        color: this.color,
+                        opacity: 0.2,
+                        position: {
+                            x: firstCursorPosition,
+                            y: 0
+                        },
+                        height: this.stateController.canvasDisplayHeight,
+                        width: secondCursorPosition - firstCursorPosition
+                    });
+                    this.addChild(this.selectionRange);
+                } else {
+                    this.selectionRange.update({
+                        color: this.color,
+                        opacity: 0.2,
+                        position: {
+                            x: firstCursorPosition,
+                            y: 0
+                        },
+                        height: this.stateController.canvasDisplayHeight,
+                        width: secondCursorPosition - firstCursorPosition
+                    })
+                }
+            }else{
+                this.removeChildren();
+                delete this.selectionRange;
             }
         }
     }

timeline-chart/src/layer/time-graph-chart.ts

@@ -33,6 +33,8 @@ export class TimeGraphChart extends TimeGraphChartLayer {
 
     protected fetching: boolean;
 
+    protected shiftKeyDown: boolean;
+
     constructor(id: string,
         protected providers: TimeGraphChartProviders,
         protected rowController: TimeGraphRowController) {
@@ -42,16 +44,27 @@ export class TimeGraphChart extends TimeGraphChartLayer {
     }
 
     protected afterAddToContainer() {
+        this.shiftKeyDown = false
+        document.addEventListener('keydown', (event: KeyboardEvent) => {
+            this.shiftKeyDown = event.shiftKey;
+        });
+        document.addEventListener('keyup', (event: KeyboardEvent) => {
+            this.shiftKeyDown = event.shiftKey;
+        });
         this.onCanvasEvent('mousewheel', (ev: WheelEvent) => {
-            const shiftStep = ev.deltaY;
-            let verticalOffset = this.rowController.verticalOffset + shiftStep;
-            if (verticalOffset < 0) {
-                verticalOffset = 0;
-            }
-            if (this.rowController.totalHeight - verticalOffset <= this.stateController.canvasDisplayHeight) {
-                verticalOffset = this.rowController.totalHeight - this.stateController.canvasDisplayHeight;
+            if (this.shiftKeyDown) {
+                const shiftStep = ev.deltaY;
+                let verticalOffset = this.rowController.verticalOffset + shiftStep;
+                if (verticalOffset < 0) {
+                    verticalOffset = 0;
+                }
+                if (this.rowController.totalHeight - verticalOffset <= this.stateController.canvasDisplayHeight) {
+                    verticalOffset = this.rowController.totalHeight - this.stateController.canvasDisplayHeight;
+                }
+                this.rowController.verticalOffset = verticalOffset;
+            } else {
+
             }
-            this.rowController.verticalOffset = verticalOffset;
             ev.preventDefault();
         });
 

timeline-chart/src/layer/time-graph-layer.ts

@@ -45,7 +45,9 @@ export abstract class TimeGraphLayer {
         this.children = [];
     }
 
-    protected afterAddToContainer() { }
+    protected removeChild(child:TimeGraphComponent){
+        this.layer.removeChild(child.displayObject);
+    }
 
-    protected abstract update(): void;
+    protected afterAddToContainer() { }
 }

timeline-chart/src/layer/time-graph-navigator.ts

@@ -35,9 +35,7 @@ export class TimeGraphNavigator extends TimeGraphLayer {
                 this.selectionRange = new TimeGraphRectangle(selectionOpts);
                 this.addChild(this.selectionRange);
             } else {
-                this.selectionRange.displayObject.clear();
-                this.selectionRange.setOptions(selectionOpts);
-                this.selectionRange.render();
+                this.selectionRange.update(selectionOpts);
             }
         } else {
             if(this.selectionRange){