timeline-chart 0.3.0-next.f3add09.0 → 0.3.1

package/lib/components/time-graph-state.d.ts

@@ -9,16 +9,28 @@ export interface TimeGraphStateStyle {
     height?: number;
     borderWidth?: number;
     borderColor?: number;
+    scale?: number;
 }
 export declare class TimeGraphStateComponent extends TimeGraphComponent<TimelineChart.TimeGraphState> {
     protected _row: TimeGraphRow;
     protected _style: TimeGraphStateStyle;
     protected displayWidth: number;
+    protected scaleFactor: number;
     static fontController: FontController;
     protected _options: TimeGraphStyledRect;
-    constructor(id: string, model: TimelineChart.TimeGraphState, xStart: number, xEnd: number, _row: TimeGraphRow, _style: TimeGraphStateStyle, displayWidth: number, displayObject?: PIXI.Graphics);
+    private textLabelObject;
+    constructor(id: string, model: TimelineChart.TimeGraphState, xStart: number, xEnd: number, _row: TimeGraphRow, _style: TimeGraphStateStyle, displayWidth: number, scaleFactor: number, displayObject?: PIXI.Graphics);
+    /**
+     * Conveniently generate the labels of states and apply proper scaling when zooming
+     */
     renderLabel(): void;
-    clearLabel(): void;
+    /**
+     * Scale only state labels that actually have text displayed.
+     *
+     * @param scaleFactor
+     */
+    scaleLabel(scaleFactor: number): void;
+    private removeLabel;
     get height(): number;
     get width(): number;
     get position(): TimeGraphElementPosition;

package/lib/components/time-graph-state.js

@@ -19,14 +19,35 @@ exports.TimeGraphStateComponent = void 0;
 var time_graph_component_1 = require("./time-graph-component");
 var time_graph_font_controller_1 = require("../time-graph-font-controller");
 var PIXI = require("pixi.js-legacy");
+/**
+ * Using BitMapText.getLocalBounds() to measure the full label width is expensive, because
+ * we need to create a BitMapText object to use it. This means that we need to create a BitMapText
+ * for every state, even if we don't use it. When we remove the states, these objects need to
+ * be removed as well. In the case where we have a lot states, this cause multiple garbage collection
+ * and hogs the performance of the timeline chart.
+ *
+ * An alternative to measure the width of the label is to use PIXI.TextMetrics.measureText().
+ * However, this method applies only for Text objects, and not BitMapText; therefore there is a
+ * slight difference between the values returned by the two methods. PIXI.TextMetrics returns a
+ * slightly smaller value. Currently, PIXI does not support measureText() for BitMapText.
+ *
+ * Through some trials, it looks like the ratio between the text width returned by the two methods is
+ * consistent. Hence, we can use PIXI.TextMetrics.measureText() to get a good estimation of the text width,
+ * then multiply with the SCALING_FACTOR to determine the actual width of the label when rendered
+ * with BitMapText.
+ *
+ * SCALING_FACTOR = BitMapText.getLocalBounds() / PIXI.TextMetrics.measureText()
+ */
+var SCALING_FACTOR = 1.04;
 var TimeGraphStateComponent = /** @class */ (function (_super) {
     __extends(TimeGraphStateComponent, _super);
-    function TimeGraphStateComponent(id, model, xStart, xEnd, _row, _style, displayWidth, displayObject) {
+    function TimeGraphStateComponent(id, model, xStart, xEnd, _row, _style, displayWidth, scaleFactor, displayObject) {
         if (_style === void 0) { _style = { color: 0xfffa66, height: 14 }; }
         var _this = _super.call(this, id, displayObject, model) || this;
         _this._row = _row;
         _this._style = _style;
         _this.displayWidth = displayWidth;
+        _this.scaleFactor = scaleFactor;
         var height = _row.height === 0 ? 0 : Math.min(_style.height || 14, _row.height - 1);
         var position = {
             x: xStart,
@@ -47,12 +68,16 @@ var TimeGraphStateComponent = /** @class */ (function (_super) {
         };
         return _this;
     }
+    /**
+     * Conveniently generate the labels of states and apply proper scaling when zooming
+     */
     TimeGraphStateComponent.prototype.renderLabel = function () {
+        var _a;
         if (!this.model.label) {
             return;
         }
-        var fontName = TimeGraphStateComponent.fontController.getFontName(this._options.color ? this._options.color : 0, this._options.height - 2) ||
-            TimeGraphStateComponent.fontController.getDefaultFontName();
+        var _b = TimeGraphStateComponent.fontController.getFont(this._options.color ? this._options.color : 0, this._options.height - 2) ||
+            TimeGraphStateComponent.fontController.getDefaultFont(), fontName = _b.fontName, fontStyle = _b.fontStyle;
         var position = {
             x: this._options.position.x + this._options.width < 0 ? this._options.position.x : Math.max(0, this._options.position.x),
             y: this._options.position.y
@@ -61,45 +86,61 @@ var TimeGraphStateComponent = /** @class */ (function (_super) {
         var labelText = this.model.label;
         var textPadding = 0.5;
         if (displayWidth < 3) {
-            this.clearLabel();
+            this.removeLabel();
             return;
         }
-        var textObj = new PIXI.BitmapText(this.model.label, { fontName: fontName });
-        var textWidth = textObj.getLocalBounds().width;
-        var textObjX = position.x + textPadding;
-        var textObjY = position.y + textPadding;
-        var displayLabel = "";
-        if (displayWidth > textWidth) {
-            textObjX = position.x + (displayWidth - textWidth) / 2;
-            displayLabel = labelText;
-        }
-        else {
-            var textScaler = displayWidth / textWidth;
-            var index = Math.min(Math.floor(textScaler * labelText.length), labelText.length - 1);
-            var partialLabel = labelText.substr(0, Math.max(index - 3, 0));
-            if (partialLabel.length > 0) {
-                displayLabel = partialLabel.concat("...");
+        if (fontStyle) {
+            var metrics = PIXI.TextMetrics.measureText(this.model.label, fontStyle);
+            // Round the text width up just to be sure that it will fit in the state
+            var textWidth = Math.ceil(metrics.width * SCALING_FACTOR / this.scaleFactor);
+            var textObjX = position.x + textPadding;
+            var textObjY = position.y + textPadding;
+            var displayLabel = "";
+            if (displayWidth > textWidth) {
+                textObjX = position.x + (displayWidth - textWidth) / 2;
+                displayLabel = labelText;
             }
+            else {
+                var textScaler = displayWidth / textWidth;
+                var index = Math.min(Math.floor(textScaler * labelText.length), labelText.length - 1);
+                var partialLabel = labelText.substr(0, Math.max(index - 1, 0));
+                if (partialLabel.length > 0) {
+                    displayLabel = partialLabel.concat("…");
+                }
+            }
+            if (displayLabel === "") {
+                this.removeLabel();
+                return;
+            }
+            if (!this.textLabelObject) {
+                this.textLabelObject = new PIXI.BitmapText(displayLabel, { fontName: fontName });
+                this.displayObject.addChild(this.textLabelObject);
+            }
+            else {
+                this.textLabelObject.text = displayLabel;
+            }
+            this.textLabelObject.alpha = (_a = this._options.opacity) !== null && _a !== void 0 ? _a : 1;
+            this.textLabelObject.x = textObjX;
+            this.textLabelObject.y = textObjY;
+            this.textLabelObject.scale.x = 1 / this.scaleFactor;
         }
-        if (displayLabel === "") {
-            this.clearLabel();
-            return;
-        }
-        if (displayLabel === this.model.label) {
-            textObj.x = textObjX;
-            textObj.y = textObjY;
-            this.displayObject.addChild(textObj);
-        }
-        else {
-            var newTextObj = new PIXI.BitmapText(displayLabel, { fontName: fontName });
-            newTextObj.x = textObjX;
-            newTextObj.y = textObjY;
-            this.displayObject.addChild(newTextObj);
+    };
+    /**
+     * Scale only state labels that actually have text displayed.
+     *
+     * @param scaleFactor
+     */
+    TimeGraphStateComponent.prototype.scaleLabel = function (scaleFactor) {
+        this.scaleFactor = scaleFactor;
+        if (this.textLabelObject && this.textLabelObject.scale) {
+            this.renderLabel();
         }
     };
-    TimeGraphStateComponent.prototype.clearLabel = function () {
-        this.displayObject.children.forEach(function (element) { return element.destroy(); });
-        this.displayObject.removeChildren();
+    TimeGraphStateComponent.prototype.removeLabel = function () {
+        if (this.textLabelObject) {
+            this.textLabelObject.destroy();
+            this.textLabelObject = undefined;
+        }
     };
     Object.defineProperty(TimeGraphStateComponent.prototype, "height", {
         get: function () {
@@ -167,7 +208,6 @@ var TimeGraphStateComponent = /** @class */ (function (_super) {
         this.renderLabel();
     };
     TimeGraphStateComponent.prototype.clear = function () {
-        this.clearLabel();
         _super.prototype.clear.call(this);
     };
     TimeGraphStateComponent.fontController = new time_graph_font_controller_1.FontController();

package/lib/components/time-graph-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-graph-state.js","sourceRoot":"","sources":["../../src/components/time-graph-state.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"time-graph-state.js","sourceRoot":"","sources":["../../src/components/time-graph-state.ts"],"names":[],"mappings":"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"}

package/lib/layer/time-graph-axis.d.ts

@@ -7,6 +7,7 @@ export declare class TimeGraphAxis extends TimeGraphLayer {
     protected style?: {
         color?: number | undefined;
         lineColor?: number | undefined;
+        verticalAlign?: string | undefined;
     } | undefined;
     protected scaleComponent: TimeGraphAxisScale;
     protected controlKeyDown: boolean;
@@ -17,6 +18,7 @@ export declare class TimeGraphAxis extends TimeGraphLayer {
     constructor(id: string, style?: {
         color?: number | undefined;
         lineColor?: number | undefined;
+        verticalAlign?: string | undefined;
     } | undefined);
     protected getOptions(): TimeGraphAxisStyle;
     protected afterAddToContainer(): void;

package/lib/layer/time-graph-axis.js

@@ -30,9 +30,11 @@ var TimeGraphAxis = /** @class */ (function (_super) {
     TimeGraphAxis.prototype.getOptions = function () {
         var color;
         var lineColor;
+        var verticalAlign = 'top'; // Default position is top, same as CSS verticalAlign is 'baseline'
         if (this.style) {
             color = this.style.color;
             lineColor = this.style.lineColor;
+            verticalAlign = this.style.verticalAlign;
         }
         return {
             height: this.stateController.canvasDisplayHeight,
@@ -42,7 +44,8 @@ var TimeGraphAxis = /** @class */ (function (_super) {
                 y: 0
             },
             color: color,
-            lineColor: lineColor
+            lineColor: lineColor,
+            verticalAlign: verticalAlign
         };
     };
     TimeGraphAxis.prototype.afterAddToContainer = function () {

package/lib/layer/time-graph-axis.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-graph-axis.js","sourceRoot":"","sources":["../../src/layer/time-graph-axis.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"time-graph-axis.js","sourceRoot":"","sources":["../../src/layer/time-graph-axis.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,6EAA6F;AAC7F,uDAA2E;AAC3E,0BAA4B;AAE5B,gDAAyC;AAMzC;IAAmC,iCAAc;IAS7C,uBAAY,EAAU,EAAY,KAAsE;QAAxG,YACI,kBAAM,EAAE,CAAC,SACZ;QAFiC,WAAK,GAAL,KAAK,CAAiE;;IAExG,CAAC;IAES,kCAAU,GAApB;QACI,IAAI,KAAK,CAAC;QACV,IAAI,SAAS,CAAC;QACd,IAAI,aAAa,GAAuB,KAAK,CAAC,CAAC,mEAAmE;QAElH,IAAI,IAAI,CAAC,KAAK,EAAE;YACZ,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;YACzB,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;YACjC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;SAC5C;QAED,OAAO;YACH,MAAM,EAAE,IAAI,CAAC,eAAe,CAAC,mBAAmB;YAChD,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,kBAAkB;YAC9C,QAAQ,EAAE;gBACN,CAAC,EAAE,CAAC;gBACJ,CAAC,EAAE,CAAC;aACP;YACD,KAAK,OAAA;YACL,SAAS,WAAA;YACT,aAAa,eAAA;SAChB,CAAA;IACL,CAAC;IAES,2CAAmB,GAA7B;QAAA,iBAwDC;QAvDG,IAAI,CAAC,cAAc,GAAG,KAAK,CAAA;QAC3B,IAAI,CAAC,eAAe,GAAG,UAAC,KAAoB;YACxC,KAAI,CAAC,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC;QACxC,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC3D,IAAI,CAAC,aAAa,GAAG,UAAC,KAAoB;YACtC,KAAI,CAAC,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC;QACxC,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACvD,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC,QAAQ,CAAC,UAAC,EAAc;YAChD,IAAI,KAAI,CAAC,cAAc,EAAE;gBACrB,4BAA4B;gBAC5B,IAAM,YAAY,GAAG,qBAAM,CAAC,KAAK,CAAC,EAAE,CAAC,OAAO,GAAG,KAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;gBAChF,IAAM,MAAM,GAAG,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;gBAC7B,IAAM,kBAAkB,GAAG,qBAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAI,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EACvG,MAAM,CAAC,CAAC,CAAC,EAAE,KAAI,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;gBAClD,IAAM,MAAM,GAAG,KAAI,CAAC,cAAc,CAAC,SAAS,CAAC,KAAK,GAAG,YAAY,CAAC;gBAClE,IAAM,KAAK,GAAG,qBAAM,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,YAAY,CAAC,GAAG,MAAM,CAAC,kBAAkB,CAAC,GAAG,MAAM,CAAC,KAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EACvI,MAAM,CAAC,CAAC,CAAC,EAAE,KAAI,CAAC,cAAc,CAAC,aAAa,GAAG,kBAAkB,CAAC,CAAC;gBACvE,IAAM,GAAG,GAAG,KAAK,GAAG,kBAAkB,CAAC;gBACvC,KAAI,CAAC,cAAc,CAAC,SAAS,GAAG;oBAC5B,KAAK,OAAA;oBACL,GAAG,KAAA;iBACN,CAAA;aACJ;iBAAM;gBACH,UAAU;gBACV,IAAM,SAAS,GAAG,EAAE,CAAC,MAAM,CAAC;gBAC5B,IAAM,YAAY,GAAG,KAAI,CAAC,cAAc,CAAC,SAAS,CAAC;gBACnD,IAAI,KAAK,GAAG,YAAY,CAAC,KAAK,GAAG,qBAAM,CAAC,KAAK,CAAC,SAAS,GAAG,KAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;gBAC3F,IAAI,KAAK,GAAG,CAAC,EAAE;oBACX,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;iBACrB;gBACD,IAAI,GAAG,GAAG,KAAK,GAAG,KAAI,CAAC,cAAc,CAAC,eAAe,CAAC;gBACtD,IAAI,GAAG,GAAG,KAAI,CAAC,cAAc,CAAC,aAAa,EAAE;oBACzC,KAAK,GAAG,KAAI,CAAC,cAAc,CAAC,aAAa,GAAG,KAAI,CAAC,cAAc,CAAC,eAAe,CAAC;oBAChF,GAAG,GAAG,KAAI,CAAC,cAAc,CAAC,aAAa,CAAC;iBAC3C;gBACD,KAAI,CAAC,cAAc,CAAC,SAAS,GAAG,EAAE,KAAK,OAAA,EAAE,GAAG,KAAA,EAAE,CAAA;aACjD;YACD,EAAE,CAAC,cAAc,EAAE,CAAC;YACpB,OAAO,KAAK,CAAC;QACjB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,YAAY,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QAC1D,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;QACrD,IAAI,CAAC,cAAc,GAAG,IAAI,0CAAkB,CACxC,IAAI,CAAC,EAAE,GAAG,QAAQ,EAClB,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,eAAe,CACvB,CAAC;QACF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAEnC,IAAI,CAAC,cAAc,GAAG,cAAY,OAAA,KAAI,CAAC,MAAM,EAAE,EAAb,CAAa,CAAC;QAChD,IAAI,CAAC,cAAc,CAAC,sBAAsB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAChE,IAAI,CAAC,cAAc,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAChE,CAAC;IAED,8BAAM,GAAN,UAAO,IAAgC;QACnC,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE;YACpB,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;SACzC;QACD,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;IAClD,CAAC;IAED,+BAAO,GAAP;QACI,IAAI,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,cAAc,CAAC,6BAA6B,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YACvE,IAAI,CAAC,cAAc,CAAC,kCAAkC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;SAC/E;QACD,IAAI,IAAI,CAAC,kBAAkB,EAAE;YACzB,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAChE,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;SAC9D;QACD,IAAI,IAAI,CAAC,eAAe,EAAE;YACtB,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;SACjE;QACD,IAAI,IAAI,CAAC,aAAa,EAAE;YACpB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;SAC7D;QACD,iBAAM,OAAO,WAAE,CAAC;IACpB,CAAC;IACL,oBAAC;AAAD,CAAC,AAvHD,CAAmC,iCAAc,GAuHhD;AAvHY,sCAAa"}

package/lib/layer/time-graph-chart-arrows.d.ts

@@ -1,13 +1,17 @@
 import { TimeGraphArrowComponent, TimeGraphArrowCoordinates } from "../components/time-graph-arrow";
 import { TimelineChart } from "../time-graph-model";
+import { TimeGraphRowController } from "../time-graph-row-controller";
 import { TimeGraphChartLayer } from "./time-graph-chart-layer";
 export declare class TimeGraphChartArrows extends TimeGraphChartLayer {
+    protected rowController: TimeGraphRowController;
     protected arrows: Map<TimelineChart.TimeGraphArrow, TimeGraphArrowComponent>;
+    protected rowIds: number[];
     private _updateHandler;
+    constructor(id: string, rowController: TimeGraphRowController);
     protected afterAddToContainer(): void;
-    protected getCoordinates(arrow: TimelineChart.TimeGraphArrow): TimeGraphArrowCoordinates;
+    protected getCoordinates(arrow: TimelineChart.TimeGraphArrow): TimeGraphArrowCoordinates | undefined;
     protected addArrow(arrow: TimelineChart.TimeGraphArrow): void;
-    addArrows(arrows: TimelineChart.TimeGraphArrow[]): void;
+    addArrows(arrows: TimelineChart.TimeGraphArrow[], rowIds: number[]): void;
     update(): void;
     protected updateArrow(arrow: TimelineChart.TimeGraphArrow): void;
     destroy(): void;

package/lib/layer/time-graph-chart-arrows.js

@@ -31,37 +31,50 @@ var time_graph_arrow_1 = require("../components/time-graph-arrow");
 var time_graph_chart_layer_1 = require("./time-graph-chart-layer");
 var TimeGraphChartArrows = /** @class */ (function (_super) {
     __extends(TimeGraphChartArrows, _super);
-    function TimeGraphChartArrows() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function TimeGraphChartArrows(id, rowController) {
+        var _this = _super.call(this, id, rowController) || this;
+        _this.rowController = rowController;
+        _this.rowIds = [];
+        _this.isScalable = false;
+        return _this;
     }
     TimeGraphChartArrows.prototype.afterAddToContainer = function () {
         var _this = this;
         this._updateHandler = function () { return _this.update(); };
-        this.unitController.onViewRangeChanged(this._updateHandler);
+        this.stateController.onWorldRender(this._updateHandler);
+        this.stateController.onScaleFactorChange(this._updateHandler);
         this.rowController.onVerticalOffsetChangedHandler(function (verticalOffset) {
             _this.layer.position.y = -verticalOffset;
         });
     };
     TimeGraphChartArrows.prototype.getCoordinates = function (arrow) {
-        var relativeStartPosition = arrow.range.start - this.unitController.viewRange.start;
+        var sourceIndex = this.rowIds.indexOf(arrow.sourceId);
+        var destinationIndex = this.rowIds.indexOf(arrow.destinationId);
+        if (sourceIndex === -1 || destinationIndex === -1) {
+            return undefined;
+        }
         var start = {
-            x: this.getPixel(relativeStartPosition),
-            y: (arrow.sourceId * this.rowController.rowHeight) + (this.rowController.rowHeight / 2)
+            x: this.getWorldPixel(arrow.range.start),
+            y: (sourceIndex * this.rowController.rowHeight) + (this.rowController.rowHeight / 2)
         };
         var end = {
-            x: this.getPixel(relativeStartPosition + arrow.range.end - arrow.range.start),
-            y: (arrow.destinationId * this.rowController.rowHeight) + (this.rowController.rowHeight / 2)
+            x: this.getWorldPixel(arrow.range.end),
+            y: (destinationIndex * this.rowController.rowHeight) + (this.rowController.rowHeight / 2)
         };
         return { start: start, end: end };
     };
     TimeGraphChartArrows.prototype.addArrow = function (arrow) {
         var coords = this.getCoordinates(arrow);
+        if (!coords) {
+            return;
+        }
         var arrowComponent = new time_graph_arrow_1.TimeGraphArrowComponent('arrow', arrow, coords);
         this.arrows.set(arrow, arrowComponent);
         this.addChild(arrowComponent);
     };
-    TimeGraphChartArrows.prototype.addArrows = function (arrows) {
+    TimeGraphChartArrows.prototype.addArrows = function (arrows, rowIds) {
         var _this = this;
+        this.rowIds = rowIds;
         if (!this.stateController) {
             throw ('Add this TimeGraphChartArrows to a container before adding arrows.');
         }
@@ -92,15 +105,21 @@ var TimeGraphChartArrows = /** @class */ (function (_super) {
         }
     };
     TimeGraphChartArrows.prototype.updateArrow = function (arrow) {
-        var _a = this.getCoordinates(arrow), start = _a.start, end = _a.end;
         var arrowComponent = this.arrows.get(arrow);
         if (arrowComponent) {
-            arrowComponent.update({ start: start, end: end });
+            var coords = this.getCoordinates(arrow);
+            if (!coords) {
+                this.removeChild(arrowComponent);
+                this.arrows.delete(arrow);
+            }
+            else {
+                arrowComponent.update(coords);
+            }
         }
     };
     TimeGraphChartArrows.prototype.destroy = function () {
         if (this.unitController) {
-            this.unitController.removeViewRangeChangedHandler(this._updateHandler);
+            this.stateController.removeWorldRenderHandler(this._updateHandler);
         }
         _super.prototype.destroy.call(this);
     };

package/lib/layer/time-graph-chart-arrows.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-graph-chart-arrows.js","sourceRoot":"","sources":["../../src/layer/time-graph-chart-arrows.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"time-graph-chart-arrows.js","sourceRoot":"","sources":["../../src/layer/time-graph-chart-arrows.ts"],"names":[],"mappings":"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"}

package/lib/layer/time-graph-chart-cursors.d.ts

@@ -16,8 +16,9 @@ export declare class TimeGraphChartCursors extends TimeGraphChartLayer {
     private _stageMouseUpHandler;
     private _updateHandler;
     private _mouseDownHandler;
-    private _keyDownHandler;
-    private _keyUpHandler;
+    private _cursorKeyDownHandler;
+    private _cursorKeyUpHandler;
+    protected _keyboardShortcutKeyDownHandler: (event: KeyboardEvent) => void;
     constructor(id: string, chartLayer: TimeGraphChart, rowController: TimeGraphRowController, style?: {
         color?: number;
     });
@@ -25,8 +26,6 @@ export declare class TimeGraphChartCursors extends TimeGraphChartLayer {
     maybeCenterCursor(): void;
     protected navigateOrSelectLeft(): void;
     protected navigateOrSelectRight(): void;
-    protected navigateDown(): void;
-    protected navigateUp(): void;
     centerCursor(): void;
     removeCursors(): void;
     update(): void;

package/lib/layer/time-graph-chart-cursors.js

@@ -16,7 +16,6 @@ var __extends = (this && this.__extends) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimeGraphChartCursors = void 0;
-var keyboardKey = require("keyboard-key");
 var time_graph_cursor_1 = require("../components/time-graph-cursor");
 var time_graph_chart_layer_1 = require("./time-graph-chart-layer");
 var bigint_utils_1 = require("../bigint-utils");
@@ -29,6 +28,7 @@ var TimeGraphChartCursors = /** @class */ (function (_super) {
         _this.mouseSelecting = false;
         _this.mouseButtons = 0;
         _this.color = 0x0000ff;
+        _this.isScalable = false;
         if (style && style.color) {
             _this.color = style.color;
         }
@@ -40,7 +40,7 @@ var TimeGraphChartCursors = /** @class */ (function (_super) {
         this.shiftKeyDown = false;
         this.stage.interactive = true;
         this._updateHandler = function () { return _this.update(); };
-        this._keyDownHandler = function (event) {
+        this._cursorKeyDownHandler = function (event) {
             if (event.key === 'Shift' && _this.mouseButtons === 0 && !event.ctrlKey && !event.altKey) {
                 _this.stage.cursor = 'crosshair';
             }
@@ -49,28 +49,28 @@ var TimeGraphChartCursors = /** @class */ (function (_super) {
                 _this.stage.cursor = 'default';
             }
             _this.shiftKeyDown = event.shiftKey;
-            // TODO: keyCode is deprecated. We should change these.
-            if (event.keyCode === keyboardKey.ArrowLeft) {
-                _this.navigateOrSelectLeft();
-            }
-            else if (event.keyCode === keyboardKey.ArrowRight) {
-                _this.navigateOrSelectRight();
-            }
-            else if (event.keyCode === keyboardKey.ArrowUp) {
-                _this.navigateUp();
-            }
-            else if (event.keyCode === keyboardKey.ArrowDown) {
-                _this.navigateDown();
-            }
         };
-        this._keyUpHandler = function (event) {
+        this._cursorKeyUpHandler = function (event) {
             _this.shiftKeyDown = event.shiftKey;
             if (_this.stage.cursor === 'crosshair' && !_this.mouseSelecting && event.key === 'Shift') {
                 _this.stage.cursor = 'default';
             }
         };
-        this.onCanvasEvent('keydown', this._keyDownHandler);
-        this.onCanvasEvent('keyup', this._keyUpHandler);
+        this._keyboardShortcutKeyDownHandler = function (event) {
+            switch (event.key) {
+                case "ArrowLeft":
+                    _this.navigateOrSelectLeft();
+                    break;
+                case "ArrowRight":
+                    _this.navigateOrSelectRight();
+                    break;
+                default:
+                    break;
+            }
+        };
+        this.onCanvasEvent('keydown', this._cursorKeyDownHandler);
+        this.onCanvasEvent('keydown', this._keyboardShortcutKeyDownHandler);
+        this.onCanvasEvent('keyup', this._cursorKeyUpHandler);
         this._stageMouseDownHandler = function (event) {
             _this.mouseButtons = event.data.buttons;
             // if only left button is pressed with or without Shift key
@@ -149,8 +149,9 @@ var TimeGraphChartCursors = /** @class */ (function (_super) {
             }
         };
         this.onCanvasEvent('mousedown', this._mouseDownHandler);
-        this.unitController.onViewRangeChanged(this._updateHandler);
+        this.stateController.onWorldRender(this._updateHandler);
         this.unitController.onSelectionRangeChange(this._updateHandler);
+        this.stateController.onScaleFactorChange(this._updateHandler);
         this.update();
     };
     TimeGraphChartCursors.prototype.maybeCenterCursor = function () {
@@ -198,40 +199,6 @@ var TimeGraphChartCursors = /** @class */ (function (_super) {
             this.maybeCenterCursor();
         }
     };
-    TimeGraphChartCursors.prototype.navigateDown = function () {
-        var _this = this;
-        var rows = this.chartLayer.getRowModels();
-        var selectedRow = this.rowController.selectedRow;
-        var idx = rows.findIndex(function (row) { return row === selectedRow; });
-        if (idx < rows.length) {
-            this.chartLayer.selectRow(rows[idx + 1]);
-        }
-        selectedRow = this.rowController.selectedRow;
-        var state = selectedRow.states.find(function (state) {
-            if (_this.unitController.selectionRange) {
-                return state.range.start <= _this.unitController.selectionRange.start && state.range.end > _this.unitController.selectionRange.start;
-            }
-            return false;
-        });
-        state && this.chartLayer.selectState(state);
-    };
-    TimeGraphChartCursors.prototype.navigateUp = function () {
-        var _this = this;
-        var rows = this.chartLayer.getRowModels();
-        var selectedRow = this.rowController.selectedRow;
-        var idx = rows.findIndex(function (row) { return row === selectedRow; });
-        if (idx > 0) {
-            this.chartLayer.selectRow(rows[idx - 1]);
-        }
-        selectedRow = this.rowController.selectedRow;
-        var state = selectedRow.states.find(function (state) {
-            if (_this.unitController.selectionRange) {
-                return state.range.start <= _this.unitController.selectionRange.start && state.range.end > _this.unitController.selectionRange.start;
-            }
-            return false;
-        });
-        state && this.chartLayer.selectState(state);
-    };
     TimeGraphChartCursors.prototype.centerCursor = function () {
         if (this.unitController.selectionRange) {
             var cursorPosition = this.unitController.selectionRange.end;
@@ -257,8 +224,12 @@ var TimeGraphChartCursors = /** @class */ (function (_super) {
     };
     TimeGraphChartCursors.prototype.update = function () {
         if (this.unitController.selectionRange) {
-            var firstCursorPosition = this.getPixel(this.unitController.selectionRange.start - this.unitController.viewRange.start);
-            var secondCursorPosition = this.getPixel(this.unitController.selectionRange.end - this.unitController.viewRange.start);
+            /**
+             * When user selects a range on the timeline chart, the selection position must correspond to the cursor of the user,
+             * and not the timeline chart itself since scaling might be applied.
+             */
+            var firstCursorPosition = this.getWorldPixel(this.unitController.selectionRange.start);
+            var secondCursorPosition = this.getWorldPixel(this.unitController.selectionRange.end);
             var firstCursorOptions = {
                 color: this.color,
                 height: this.stateController.canvasDisplayHeight,
@@ -304,17 +275,20 @@ var TimeGraphChartCursors = /** @class */ (function (_super) {
     };
     TimeGraphChartCursors.prototype.destroy = function () {
         if (this.unitController) {
-            this.unitController.removeViewRangeChangedHandler(this._updateHandler);
+            this.stateController.removeWorldRenderHandler(this._updateHandler);
             this.unitController.removeSelectionRangeChangedHandler(this._updateHandler);
         }
         if (this._mouseDownHandler) {
             this.removeOnCanvasEvent('mousedown', this._mouseDownHandler);
         }
-        if (this._keyDownHandler) {
-            this.removeOnCanvasEvent('keydown', this._keyDownHandler);
+        if (this._cursorKeyDownHandler) {
+            this.removeOnCanvasEvent('keydown', this._cursorKeyDownHandler);
+        }
+        if (this._keyboardShortcutKeyDownHandler) {
+            this.removeOnCanvasEvent('keydown', this._keyboardShortcutKeyDownHandler);
         }
-        if (this._keyUpHandler) {
-            this.removeOnCanvasEvent('mousedown', this._keyUpHandler);
+        if (this._cursorKeyUpHandler) {
+            this.removeOnCanvasEvent('mousedown', this._cursorKeyUpHandler);
         }
         if (this.stage) {
             this.stage.off('mousedown', this._stageMouseDownHandler);