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

package/lib/time-graph-row-controller.js

@@ -1,10 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimeGraphRowController = void 0;
+var time_graph_render_controller_1 = require("./time-graph-render-controller");
 var TimeGraphRowController = /** @class */ (function () {
     function TimeGraphRowController(rowHeight, _totalHeight) {
         this.rowHeight = rowHeight;
         this._totalHeight = _totalHeight;
+        this._selectedRow = undefined;
+        this._selectedRowIndex = -1;
         this.selectedRowChangedHandlers = [];
         this.verticalOffsetChangedHandlers = [];
         this.totalHeightChangedHandlers = [];
@@ -13,24 +16,49 @@ var TimeGraphRowController = /** @class */ (function () {
     TimeGraphRowController.prototype.handleVerticalOffsetChanged = function () {
         var _this = this;
         this.verticalOffsetChangedHandlers.forEach(function (h) { return h(_this._verticalOffset); });
+        this.startRender();
     };
     TimeGraphRowController.prototype.handleSelectedRowChanged = function () {
-        var _this = this;
-        this.selectedRowChangedHandlers.forEach(function (h) { return h(_this._selectedRow); });
+        var selectedRow = this._selectedRow;
+        if (selectedRow) {
+            this.selectedRowChangedHandlers.forEach(function (h) { return h(selectedRow); });
+        }
     };
     TimeGraphRowController.prototype.handleTotalHeightChanged = function () {
         var _this = this;
         this.totalHeightChangedHandlers.forEach(function (h) { return h(_this._totalHeight); });
+        this.startRender();
+    };
+    TimeGraphRowController.prototype.startRender = function () {
+        time_graph_render_controller_1.RenderEvents.startRender();
     };
     TimeGraphRowController.prototype.onSelectedRowChangedHandler = function (handler) {
         this.selectedRowChangedHandlers.push(handler);
     };
+    TimeGraphRowController.prototype.removeSelectedRowChangedHandler = function (handler) {
+        var index = this.selectedRowChangedHandlers.indexOf(handler);
+        if (index > -1) {
+            this.selectedRowChangedHandlers.splice(index, 1);
+        }
+    };
     TimeGraphRowController.prototype.onVerticalOffsetChangedHandler = function (handler) {
         this.verticalOffsetChangedHandlers.push(handler);
     };
+    TimeGraphRowController.prototype.removeVerticalOffsetChangedHandler = function (handler) {
+        var index = this.verticalOffsetChangedHandlers.indexOf(handler);
+        if (index > -1) {
+            this.verticalOffsetChangedHandlers.splice(index, 1);
+        }
+    };
     TimeGraphRowController.prototype.onTotalHeightChangedHandler = function (handler) {
         this.totalHeightChangedHandlers.push(handler);
     };
+    TimeGraphRowController.prototype.removeTotalHeightChangedHandler = function (handler) {
+        var index = this.totalHeightChangedHandlers.indexOf(handler);
+        if (index > -1) {
+            this.totalHeightChangedHandlers.splice(index, 1);
+        }
+    };
     Object.defineProperty(TimeGraphRowController.prototype, "totalHeight", {
         get: function () {
             return this._totalHeight;
@@ -64,6 +92,17 @@ var TimeGraphRowController = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(TimeGraphRowController.prototype, "selectedRowIndex", {
+        get: function () {
+            return this._selectedRowIndex;
+        },
+        set: function (index) {
+            this._selectedRowIndex = index;
+            this.handleSelectedRowChanged();
+        },
+        enumerable: false,
+        configurable: true
+    });
     return TimeGraphRowController;
 }());
 exports.TimeGraphRowController = TimeGraphRowController;

package/lib/time-graph-row-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-graph-row-controller.js","sourceRoot":"","sources":["../src/time-graph-row-controller.ts"],"names":[],"mappings":";;;AAEA;IAOI,gCAAmB,SAAiB,EAAU,YAAoB;QAA/C,cAAS,GAAT,SAAS,CAAQ;QAAU,iBAAY,GAAZ,YAAY,CAAQ;QAJxD,+BAA0B,GAAuD,EAAE,CAAC;QACpF,kCAA6B,GAAyC,EAAE,CAAC;QACzE,+BAA0B,GAAsC,EAAE,CAAC;QAGzE,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC;IAC7B,CAAC;IAES,4DAA2B,GAArC;QAAA,iBAEC;QADG,IAAI,CAAC,6BAA6B,CAAC,OAAO,CAAC,UAAA,CAAC,IAAE,OAAA,CAAC,CAAC,KAAI,CAAC,eAAe,CAAC,EAAvB,CAAuB,CAAC,CAAC;IAC3E,CAAC;IAES,yDAAwB,GAAlC;QAAA,iBAEC;QADG,IAAI,CAAC,0BAA0B,CAAC,OAAO,CAAC,UAAA,CAAC,IAAE,OAAA,CAAC,CAAC,KAAI,CAAC,YAAY,CAAC,EAApB,CAAoB,CAAC,CAAC;IACrE,CAAC;IAES,yDAAwB,GAAlC;QAAA,iBAEC;QADG,IAAI,CAAC,0BAA0B,CAAC,OAAO,CAAC,UAAA,CAAC,IAAE,OAAA,CAAC,CAAC,KAAI,CAAC,YAAY,CAAC,EAApB,CAAoB,CAAC,CAAC;IACrE,CAAC;IAED,4DAA2B,GAA3B,UAA4B,OAAuD;QAC/E,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClD,CAAC;IAED,+DAA8B,GAA9B,UAA+B,OAAyC;QACpE,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrD,CAAC;IAED,4DAA2B,GAA3B,UAA4B,OAAuC;QAC/D,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClD,CAAC;IAED,sBAAI,+CAAW;aAAf;YACI,OAAO,IAAI,CAAC,YAAY,CAAC;QAC7B,CAAC;aAED,UAAgB,MAAc;YAC1B,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;YAC3B,IAAI,CAAC,wBAAwB,EAAE,CAAC;QACpC,CAAC;;;OALA;IAOD,sBAAI,kDAAc;aAAlB;YACI,OAAO,IAAI,CAAC,eAAe,CAAC;QAChC,CAAC;aACD,UAAmB,KAAa;YAC5B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC7B,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACvC,CAAC;;;OAJA;IAMD,sBAAI,+CAAW;aAAf;YACI,OAAO,IAAI,CAAC,YAAY,CAAC;QAC7B,CAAC;aACD,UAAgB,KAAsC;YAClD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC1B,IAAI,CAAC,wBAAwB,EAAE,CAAC;QACpC,CAAC;;;OAJA;IAKL,6BAAC;AAAD,CAAC,AA3DD,IA2DC;AA3DY,wDAAsB"}
+{"version":3,"file":"time-graph-row-controller.js","sourceRoot":"","sources":["../src/time-graph-row-controller.ts"],"names":[],"mappings":"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"}

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

@@ -1,3 +1,4 @@
+import { TimelineChart } from "./time-graph-model";
 import { TimeGraphUnitController } from "./time-graph-unit-controller";
 export declare class TimeGraphStateController {
     protected canvas: HTMLCanvasElement;
@@ -8,24 +9,32 @@ export declare class TimeGraphStateController {
     };
     snapped: boolean;
     protected ratio: number;
+    private _unscaledCanvasWidth;
     protected _canvasDisplayWidth: number;
     protected _canvasDisplayHeight: number;
+    private _scaleFactor;
     protected _zoomFactor: number;
     protected _initialZoomFactor: number;
     protected _positionOffset: {
         x: number;
         y: number;
     };
-    protected zoomChangedHandlers: (() => void)[];
+    protected _worldRange: TimelineChart.TimeGraphRange;
+    protected _worldZoomFactor: number;
+    private _worldRenderedHandlers;
+    protected zoomChangedHandlers: ((zoomFactor: number) => void)[];
+    protected canvasWidthChangedHandlers: ((baseWidth: number) => void)[];
     protected positionChangedHandlers: (() => void)[];
-    protected canvasDisplayWidthChangedHandlers: (() => void)[];
+    protected scaleFactorChangedHandlers: ((newScaleFactor: number) => void)[];
     constructor(canvas: HTMLCanvasElement, unitController: TimeGraphUnitController);
-    protected handleZoomChange(): void;
+    protected handleZoomChange(zoomFactor: number): void;
     protected handlePositionChange(): void;
-    protected handleCanvasDisplayWidthChange(): void;
-    onZoomChanged(handler: () => void): void;
+    protected handleScaleFactorChange(): void;
+    onZoomChanged(handler: (zoomFactor: number) => void): void;
     onPositionChanged(handler: () => void): void;
-    onCanvasDisplayWidthChanged(handler: () => void): void;
+    onScaleFactorChange(handler: (newWidth: number) => void): void;
+    removeOnZoomChanged(handler: (zoomFactor: number) => void): void;
+    removeOnScaleFactorChanged(handler: (zoomFactor: number) => void): void;
     /**
         It is not the width of the canvas display buffer but of the canvas element in browser. Can be different depending on the display pixel ratio.
     */
@@ -37,6 +46,11 @@ export declare class TimeGraphStateController {
     get canvasDisplayHeight(): number;
     updateDisplayHeight(): void;
     get initialZoomFactor(): number;
+    updateZoomFactor: () => void;
+    updateScaleFactor: (oldViewRange: TimelineChart.TimeGraphRange, newViewRange: TimelineChart.TimeGraphRange) => void;
+    resetScale(): void;
+    get scaleFactor(): number;
+    set scaleFactor(newScaleFactor: number);
     get zoomFactor(): number;
     get absoluteResolution(): number;
     get positionOffset(): {
@@ -47,4 +61,17 @@ export declare class TimeGraphStateController {
         x: number;
         y: number;
     });
+    computeWorldRangeFromViewRange(): {
+        start: bigint;
+        end: bigint;
+    };
+    get worldRange(): TimelineChart.TimeGraphRange;
+    set worldRange(newRange: TimelineChart.TimeGraphRange);
+    get worldZoomFactor(): number;
+    set worldZoomFactor(worldZoomFactor: number);
+    get worldRangeLength(): bigint;
+    onWorldRender: (handler: (worldRange: TimelineChart.TimeGraphRange) => void) => void;
+    handleOnWorldRender: () => void;
+    removeWorldRenderHandler: (handler: (worldRange: TimelineChart.TimeGraphRange) => void) => void;
+    removeHandlers(): void;
 }

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

@@ -1,29 +1,66 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimeGraphStateController = void 0;
+var bigint_utils_1 = require("./bigint-utils");
 var TimeGraphStateController = /** @class */ (function () {
     function TimeGraphStateController(canvas, unitController) {
+        var _this = this;
         this.canvas = canvas;
         this.unitController = unitController;
+        this._worldRange = { start: BigInt(0), end: BigInt(0) };
+        this._worldZoomFactor = 1;
+        this._worldRenderedHandlers = [];
+        this.zoomChangedHandlers = [];
+        this.canvasWidthChangedHandlers = [];
+        this.positionChangedHandlers = [];
+        this.scaleFactorChangedHandlers = [];
+        this.updateZoomFactor = function () {
+            var newZoom = _this.canvasDisplayWidth / Number(_this.unitController.viewRangeLength);
+            if (_this._zoomFactor !== newZoom) {
+                _this.handleZoomChange(_this._zoomFactor = newZoom);
+            }
+        };
+        // Adjust the scale factor if the view range changes
+        this.updateScaleFactor = function (oldViewRange, newViewRange) {
+            var oldViewRangeLength = oldViewRange.end - oldViewRange.start;
+            var newViewRangeLength = newViewRange.end - newViewRange.start;
+            var newScaleFactor = Number(oldViewRangeLength) / Number(newViewRangeLength) * _this._scaleFactor;
+            _this.scaleFactor = newScaleFactor;
+        };
+        this.onWorldRender = function (handler) {
+            _this._worldRenderedHandlers.push(handler);
+        };
+        this.handleOnWorldRender = function () {
+            _this._worldRenderedHandlers.forEach(function (handler) { return handler(_this.worldRange); });
+        };
+        this.removeWorldRenderHandler = function (handler) {
+            var index = _this._worldRenderedHandlers.indexOf(handler);
+            if (index > -1) {
+                _this._worldRenderedHandlers.splice(index, 1);
+            }
+        };
         this.ratio = window.devicePixelRatio;
         this._canvasDisplayWidth = this.canvas.width / this.ratio;
         this._canvasDisplayHeight = this.canvas.height / this.ratio;
         this._initialZoomFactor = this.zoomFactor;
         this._positionOffset = { x: 0, y: 0 };
         this.oldPositionOffset = { x: 0, y: 0 };
-        this.zoomChangedHandlers = [];
-        this.positionChangedHandlers = [];
-        this.canvasDisplayWidthChangedHandlers = [];
         this.snapped = false;
+        this._unscaledCanvasWidth = this._canvasDisplayWidth;
+        this._scaleFactor = 1;
+        this.worldRange = this.computeWorldRangeFromViewRange();
+        this.unitController.onViewRangeChanged(this.updateZoomFactor);
+        this.unitController.onViewRangeChanged(this.updateScaleFactor);
     }
-    TimeGraphStateController.prototype.handleZoomChange = function () {
-        this.zoomChangedHandlers.forEach(function (handler) { return handler(); });
+    TimeGraphStateController.prototype.handleZoomChange = function (zoomFactor) {
+        this.zoomChangedHandlers.forEach(function (handler) { return handler(zoomFactor); });
     };
     TimeGraphStateController.prototype.handlePositionChange = function () {
         this.positionChangedHandlers.forEach(function (handler) { return handler(); });
     };
-    TimeGraphStateController.prototype.handleCanvasDisplayWidthChange = function () {
-        this.canvasDisplayWidthChangedHandlers.forEach(function (handler) { return handler(); });
+    TimeGraphStateController.prototype.handleScaleFactorChange = function () {
+        var _this = this;
+        this.scaleFactorChangedHandlers.forEach(function (handler) { return handler(_this._scaleFactor); });
     };
     TimeGraphStateController.prototype.onZoomChanged = function (handler) {
         this.zoomChangedHandlers.push(handler);
@@ -31,8 +68,20 @@ var TimeGraphStateController = /** @class */ (function () {
     TimeGraphStateController.prototype.onPositionChanged = function (handler) {
         this.positionChangedHandlers.push(handler);
     };
-    TimeGraphStateController.prototype.onCanvasDisplayWidthChanged = function (handler) {
-        this.canvasDisplayWidthChangedHandlers.push(handler);
+    TimeGraphStateController.prototype.onScaleFactorChange = function (handler) {
+        this.scaleFactorChangedHandlers.push(handler);
+    };
+    TimeGraphStateController.prototype.removeOnZoomChanged = function (handler) {
+        var index = this.zoomChangedHandlers.indexOf(handler);
+        if (index > -1) {
+            this.zoomChangedHandlers.splice(index, 1);
+        }
+    };
+    TimeGraphStateController.prototype.removeOnScaleFactorChanged = function (handler) {
+        var index = this.scaleFactorChangedHandlers.indexOf(handler);
+        if (index > -1) {
+            this.scaleFactorChangedHandlers.splice(index, 1);
+        }
     };
     Object.defineProperty(TimeGraphStateController.prototype, "canvasDisplayWidth", {
         /**
@@ -46,6 +95,8 @@ var TimeGraphStateController = /** @class */ (function () {
     });
     TimeGraphStateController.prototype.updateDisplayWidth = function () {
         this._canvasDisplayWidth = this.canvas.width / this.ratio;
+        // Adjust the scale factor if the display canvas width changes
+        this.scaleFactor = this._canvasDisplayWidth / this._unscaledCanvasWidth;
     };
     Object.defineProperty(TimeGraphStateController.prototype, "canvasDisplayHeight", {
         /**
@@ -67,9 +118,24 @@ var TimeGraphStateController = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    TimeGraphStateController.prototype.resetScale = function () {
+        this._unscaledCanvasWidth = this._canvasDisplayWidth;
+        this.scaleFactor = 1;
+    };
+    Object.defineProperty(TimeGraphStateController.prototype, "scaleFactor", {
+        get: function () {
+            return this._scaleFactor;
+        },
+        set: function (newScaleFactor) {
+            this._scaleFactor = newScaleFactor;
+            this.handleScaleFactorChange();
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(TimeGraphStateController.prototype, "zoomFactor", {
         get: function () {
-            this._zoomFactor = this.canvasDisplayWidth / Number(this.unitController.viewRangeLength);
+            this.updateZoomFactor();
             return this._zoomFactor;
         },
         enumerable: false,
@@ -93,6 +159,51 @@ var TimeGraphStateController = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    TimeGraphStateController.prototype.computeWorldRangeFromViewRange = function () {
+        var deltaV = this.unitController.viewRange.end - this.unitController.viewRange.start;
+        var start = this.unitController.viewRange.start - bigint_utils_1.BIMath.multiply(deltaV, this.unitController.worldRenderFactor);
+        var end = this.unitController.viewRange.end + bigint_utils_1.BIMath.multiply(deltaV, this.unitController.worldRenderFactor);
+        return { start: start, end: end };
+    };
+    Object.defineProperty(TimeGraphStateController.prototype, "worldRange", {
+        get: function () {
+            return this._worldRange;
+        },
+        set: function (newRange) {
+            if (newRange.end > newRange.start) {
+                this._worldRange = { start: newRange.start, end: newRange.end };
+            }
+            if (newRange.start < 0) {
+                this._worldRange.start = BigInt(0);
+            }
+            if (this._worldRange.end > this.unitController.absoluteRange) {
+                this._worldRange.end = this.unitController.absoluteRange;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TimeGraphStateController.prototype, "worldZoomFactor", {
+        get: function () {
+            return this._worldZoomFactor;
+        },
+        set: function (worldZoomFactor) {
+            this._worldZoomFactor = worldZoomFactor;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(TimeGraphStateController.prototype, "worldRangeLength", {
+        get: function () {
+            return this._worldRange.end - this._worldRange.start;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    TimeGraphStateController.prototype.removeHandlers = function () {
+        this.unitController.removeViewRangeChangedHandler(this.updateZoomFactor);
+        this.unitController.removeViewRangeChangedHandler(this.updateScaleFactor);
+    };
     return TimeGraphStateController;
 }());
 exports.TimeGraphStateController = TimeGraphStateController;

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

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

package/lib/time-graph-unit-controller.d.ts

@@ -1,11 +1,19 @@
 import { TimelineChart } from "./time-graph-model";
+import { TimeGraphRenderController } from "./time-graph-render-controller";
 export declare class TimeGraphUnitController {
     absoluteRange: bigint;
-    protected viewRangeChangedHandlers: ((newRange: TimelineChart.TimeGraphRange) => void)[];
+    protected viewRangeChangedHandlers: ((oldRange: TimelineChart.TimeGraphRange, newRange: TimelineChart.TimeGraphRange) => void)[];
     protected _viewRange: TimelineChart.TimeGraphRange;
+    /**
+     * This determines the world size.
+     * worldRenderFactor = 1 renders one extra viewRange to the left and right,
+     *      so there are three viewRanges rendered.
+     */
+    private _worldRenderFactor;
     protected selectionRangeChangedHandlers: ((newRange?: TimelineChart.TimeGraphRange) => void)[];
     protected _selectionRange?: TimelineChart.TimeGraphRange;
     protected _offset: bigint;
+    protected _renderer: TimeGraphRenderController;
     /**
      *  Create a string from the given number, which is shown in TimeAxis.
      *  Or return undefined to not show any text for that number.
@@ -13,10 +21,10 @@ export declare class TimeGraphUnitController {
     numberTranslator?: (theNumber: bigint) => string | undefined;
     scaleSteps?: number[];
     constructor(absoluteRange: bigint, viewRange?: TimelineChart.TimeGraphRange);
-    protected handleViewRangeChange(): void;
+    protected handleViewRangeChange(oldRange: TimelineChart.TimeGraphRange): void;
     protected handleSelectionRangeChange(): void;
-    onViewRangeChanged(handler: (viewRange: TimelineChart.TimeGraphRange) => void): void;
-    removeViewRangeChangedHandler(handler: (viewRange: TimelineChart.TimeGraphRange) => void): void;
+    onViewRangeChanged(handler: (oldRange: TimelineChart.TimeGraphRange, viewRange: TimelineChart.TimeGraphRange) => void): void;
+    removeViewRangeChangedHandler(handler: (oldRange: TimelineChart.TimeGraphRange, viewRange: TimelineChart.TimeGraphRange) => void): void;
     onSelectionRangeChange(handler: (selectionRange: TimelineChart.TimeGraphRange) => void): void;
     removeSelectionRangeChangedHandler(handler: (selectionRange: TimelineChart.TimeGraphRange) => void): void;
     get viewRange(): TimelineChart.TimeGraphRange;
@@ -26,4 +34,6 @@ export declare class TimeGraphUnitController {
     get viewRangeLength(): bigint;
     get offset(): bigint;
     set offset(offset: bigint);
+    get worldRenderFactor(): number;
+    set worldRenderFactor(n: number);
 }

package/lib/time-graph-unit-controller.js

@@ -1,17 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimeGraphUnitController = void 0;
+var time_graph_render_controller_1 = require("./time-graph-render-controller");
 var TimeGraphUnitController = /** @class */ (function () {
     function TimeGraphUnitController(absoluteRange, viewRange) {
         this.absoluteRange = absoluteRange;
+        /**
+         * This determines the world size.
+         * worldRenderFactor = 1 renders one extra viewRange to the left and right,
+         *      so there are three viewRanges rendered.
+         */
+        this._worldRenderFactor = 1;
         this._offset = BigInt(0);
-        this.viewRangeChangedHandlers = [];
         this._viewRange = viewRange || { start: BigInt(0), end: absoluteRange };
+        this.viewRangeChangedHandlers = [];
         this.selectionRangeChangedHandlers = [];
+        this._renderer = new time_graph_render_controller_1.TimeGraphRenderController();
     }
-    TimeGraphUnitController.prototype.handleViewRangeChange = function () {
+    TimeGraphUnitController.prototype.handleViewRangeChange = function (oldRange) {
         var _this = this;
-        this.viewRangeChangedHandlers.forEach(function (handler) { return handler(_this._viewRange); });
+        this.viewRangeChangedHandlers.forEach(function (handler) { return handler(oldRange, _this._viewRange); });
     };
     TimeGraphUnitController.prototype.handleSelectionRangeChange = function () {
         var _this = this;
@@ -40,6 +48,11 @@ var TimeGraphUnitController = /** @class */ (function () {
             return this._viewRange;
         },
         set: function (newRange) {
+            // Making a deep copy
+            var oldRange = {
+                start: this._viewRange.start,
+                end: this._viewRange.end
+            };
             if (newRange.end > newRange.start) {
                 this._viewRange = { start: newRange.start, end: newRange.end };
             }
@@ -49,7 +62,7 @@ var TimeGraphUnitController = /** @class */ (function () {
             if (this._viewRange.end > this.absoluteRange) {
                 this._viewRange.end = this.absoluteRange;
             }
-            this.handleViewRangeChange();
+            this.handleViewRangeChange(oldRange);
         },
         enumerable: false,
         configurable: true
@@ -82,6 +95,16 @@ var TimeGraphUnitController = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(TimeGraphUnitController.prototype, "worldRenderFactor", {
+        get: function () {
+            return this._worldRenderFactor;
+        },
+        set: function (n) {
+            this._worldRenderFactor = n;
+        },
+        enumerable: false,
+        configurable: true
+    });
     return TimeGraphUnitController;
 }());
 exports.TimeGraphUnitController = TimeGraphUnitController;

package/lib/time-graph-unit-controller.js.map

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

package/package.json

@@ -1,6 +1,13 @@
 {
   "name": "timeline-chart",
-  "version": "0.3.0-next.f3add09.0+f3add09",
+  "version": "0.3.1",
+  "description": "A time graph / gantt chart library for large data (e.g. traces)",
+  "keywords": [
+    "gantt",
+    "timeline",
+    "tracing",
+    "trace"
+  ],
   "license": "MIT",
   "scripts": {
     "build": "tsc",
@@ -14,8 +21,7 @@
     "glob": "^7.1.6",
     "keyboard-key": "1.1.0",
     "lodash.throttle": "^4.1.1",
-    "pixi.js-legacy": "^5.3.3",
-    "rimraf": "latest"
+    "pixi.js-legacy": "^5.3.3"
   },
   "devDependencies": {
     "@types/enzyme": "^3.10.10",
@@ -25,7 +31,16 @@
     "enzyme-adapter-react-16": "^1.15.6",
     "jest": "^27.4.3",
     "jest-canvas-mock": "^2.3.1",
-    "ts-jest": "^27.0.7"
+    "rimraf": "latest",
+    "ts-jest": "^29.0.0"
   },
-  "gitHead": "f3add09fff094369018ee47258c637e6f8dd6db0"
+  "homepage": "https://github.com/eclipse-cdt-cloud/timeline-chart",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eclipse-cdt-cloud/timeline-chart"
+  },
+  "bugs": {
+    "url": "https://github.com/eclipse-cdt-cloud/timeline-chart/issues"
+  },
+  "gitHead": "d5bb0d550eae71f4e6f95735b242e7a3fc511457"
 }

package/src/bigint-utils.ts

@@ -30,4 +30,11 @@ export class BIMath {
         val = BIMath.round(val);
         return val >= 0 ? val : -val;
     };
+
+    static readonly multiply = (a: bigint | number, b: bigint | number): bigint => {
+        a = Number(a);
+        b = Number(b);
+        let c = a * b;
+        return BIMath.round(c);
+    }
 };

package/src/components/time-graph-annotation.ts

@@ -32,14 +32,16 @@ export class TimeGraphAnnotationComponent extends TimeGraphComponent<TimelineCha
         protected _options: TimeGraphAnnotationComponentOptions,
         protected _style: TimeGraphAnnotationStyle = { color: 0, size: 7, symbol: 'cross', verticalAlign: 'middle' },
         protected _row: TimeGraphRow,
-        displayObject?: PIXI.Graphics) {
+        protected scaleFactor: number,
+        displayObject?: PIXI.Graphics
+    ) {
         super(id, displayObject, model);
         this._size = _style.size || 7;
         // called to ensure consistency. Only the X component is used from options.
         this.update(_options);
     }
 
-    update(opts: TimeGraphAnnotationComponentOptions): void {
+    update(opts?: TimeGraphAnnotationComponentOptions): void {
         if (opts) {
             this._options.position.x = opts.position.x;
             this.updateYPosition();
@@ -63,7 +65,7 @@ export class TimeGraphAnnotationComponent extends TimeGraphComponent<TimelineCha
     render(): void {
         const { symbol } = this._style as TimeGraphAnnotationStyle;
         const size = this._size;
-        const x = this._options.position.x;
+        const x = this._options.position.x * this.scaleFactor;
         const y = this._options.position.y;
 
         if (symbol === undefined || symbol == 'none') {
@@ -84,6 +86,19 @@ export class TimeGraphAnnotationComponent extends TimeGraphComponent<TimelineCha
         } else {
             this.drawPlus(x, y, size);
         }
+        this._displayObject.scale.x = 1 / this.scaleFactor;
+    }
+
+    /**
+     * Scale only annotations labels that actually have object displayed.
+     *
+     * @param scaleFactor
+     */
+    scaleAnnotation(scaleFactor: number) {
+        this.scaleFactor = scaleFactor;
+        if (this._displayObject && this._displayObject.scale) {
+            this.render();
+        }
     }
 
     private drawCircle(x: number, y: number, radius: number): void {

package/src/components/time-graph-arrow.ts

@@ -18,11 +18,7 @@ export class TimeGraphArrowComponent extends TimeGraphComponent<TimelineChart.Ti
         super(id, undefined, model);
 
         this.head = new PIXI.Graphics();
-    }
-
-    destroy() {
-        this.head.destroy();
-        super.destroy();
+        this._displayObject.addChild(this.head);
     }
 
     render(): void {
@@ -61,6 +57,5 @@ export class TimeGraphArrowComponent extends TimeGraphComponent<TimelineChart.Ti
         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);
     }
 }