Allow to change gauge denominators. dev packages updated.

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## Changes
 
+## [2.3.5] - 21.07.2024
+
+### Changed
+
+- Allow to change gauge denominators.
+- Dev packages updates.
+
 ## [2.3.4] - 10.04.2024
 
 ### Changed

README.md

@@ -207,6 +207,19 @@ export default TimelineComponent;
 ></TimelineComponent>
 ```
 
+## FAQ
+
+- Can I have a tree view or list on the left/right?
+Answer: The outline/tree view has to be implemented separately. This gives additional control over the styling.
+- Can I have separately connected groups of keyframes per row?
+Answer: Yes, multiple groups can be created per row. See <demo/demo.js> for details.
+- Can I override the format of the gauge?
+Answer: Yes, the text can be changed. Just override the method _formatUnitsText.
+- Can I have an individual style per row/keyframe/group?
+Answer: Yes, every instance can be styled separately if needed.
+- Can I style individual keyframes?
+Answer: Yes, you have to override _renderKeyframe. See <demo/demo.js> for details.
+
 ### Outline list
 
 Outline list\tree can implemented as a separate HTML component and scrolling needs to be synchronized with the timeline.
@@ -371,7 +384,7 @@ Separate global styles for the timeline indicator are used:
 
 See Changelog [here](./CHANGELOG.md)
 
-## Development
+## Development of the component
 
 ### Build
 

lib/animation-timeline.js

@@ -171,7 +171,7 @@ function timelineUtils_createClass(e, r, t) { return r && timelineUtils_definePr
 function timelineUtils_defineProperty(e, r, t) { return (r = timelineUtils_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function timelineUtils_toPropertyKey(t) { var i = timelineUtils_toPrimitive(t, "string"); return "symbol" == timelineUtils_typeof(i) ? i : i + ""; }
 function timelineUtils_toPrimitive(t, r) { if ("object" != timelineUtils_typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != timelineUtils_typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-var denominators = [1, 2, 5, 10];
+var defaultDenominators = [1, 2, 5, 10];
 var TimelineUtils = /*#__PURE__*/function () {
   function TimelineUtils() {
     timelineUtils_classCallCheck(this, TimelineUtils);
@@ -224,6 +224,10 @@ var TimelineUtils = /*#__PURE__*/function () {
     key: "findGoodStep",
     value: function findGoodStep(originalStep) {
       var divisionCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      var denominators = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultDenominators;
+      if (!denominators) {
+        denominators = defaultDenominators;
+      }
       if (originalStep <= 0 || isNaN(originalStep) || !Number.isFinite(originalStep)) {
         return originalStep;
       }
@@ -2546,14 +2550,10 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
      * @param isSeconds whether seconds are passed.
      */
     timeline_defineProperty(_this, "_formatUnitsText", function (ms) {
-      var isSeconds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var sign = TimelineUtils.sign(ms) < 0 ? '-' : '';
       ms = Math.abs(ms);
       // 1- Convert to seconds:
       var seconds = ms / 1000;
-      if (isSeconds) {
-        seconds = ms;
-      }
       var year = Math.floor(seconds / (365 * 86400));
       seconds = seconds % (365 * 86400);
       var days = Math.floor(seconds / 86400);
@@ -2596,6 +2596,7 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
      * Render line gauge ticks.
      */
     timeline_defineProperty(_this, "_renderTicks", function () {
+      var _this$_options7;
       if (!_this._ctx || !_this._ctx.canvas || _this._ctx.canvas.clientWidth <= 0 || _this._ctx.canvas.clientHeight <= 0 || !_this._options || !_this._options.stepPx) {
         return;
       }
@@ -2616,8 +2617,8 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
       }
 
       // Find the nearest 'beautiful' step for a gauge.
-      // 'beautiful' step should be dividable by 1/2/5/10!
-      var step = TimelineUtils.findGoodStep(valDistance / (screenWidth / _this._options.stepPx));
+      // 'beautiful' step. Ex: should be dividable by 1/2/5/10!
+      var step = TimelineUtils.findGoodStep(valDistance / (screenWidth / _this._options.stepPx), 0, (_this$_options7 = _this._options) === null || _this$_options7 === void 0 ? void 0 : _this$_options7.denominators);
 
       // Find beautiful start point:
       var fromVal = Math.floor(from / step) * step;
@@ -2629,7 +2630,8 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
       }
       var smallStep = 0;
       if (_this._options.stepSmallPx) {
-        smallStep = TimelineUtils.findGoodStep(valDistance / (screenWidth / _this._options.stepSmallPx));
+        var _this$_options8;
+        smallStep = TimelineUtils.findGoodStep(valDistance / (screenWidth / _this._options.stepSmallPx), 0, (_this$_options8 = _this._options) === null || _this$_options8 === void 0 ? void 0 : _this$_options8.denominators);
       }
       var lastTextStart = 0;
       _this._ctx.save();
@@ -3051,8 +3053,9 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
               _this._ctx.clip();
             }
             _this._renderKeyframe(_this._ctx, keyframeViewModel);
-          } finally {}
-          _this._ctx.restore();
+          } finally {
+            _this._ctx.restore();
+          }
         }
       });
     });
@@ -3178,8 +3181,8 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
      * Render timeline cap top.
      */
     timeline_defineProperty(_this, "_renderTimelineCap", function (timeLinePos, y) {
-      var _this$_options7;
-      var capStyle = (_this$_options7 = _this._options) === null || _this$_options7 === void 0 || (_this$_options7 = _this$_options7.timelineStyle) === null || _this$_options7 === void 0 ? void 0 : _this$_options7.capStyle;
+      var _this$_options9;
+      var capStyle = (_this$_options9 = _this._options) === null || _this$_options9 === void 0 || (_this$_options9 = _this$_options9.timelineStyle) === null || _this$_options9 === void 0 ? void 0 : _this$_options9.capStyle;
       if (!_this._ctx || !capStyle) {
         return;
       }
@@ -3524,8 +3527,8 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
             return false;
           }
         } else if (element.type === TimelineElementType.Timeline) {
-          var _this$_options8;
-          if (((_this$_options8 = _this._options) === null || _this$_options8 === void 0 ? void 0 : _this$_options8.timelineDraggable) === false) {
+          var _this$_options10;
+          if (((_this$_options10 = _this._options) === null || _this$_options10 === void 0 ? void 0 : _this$_options10.timelineDraggable) === false) {
             return false;
           }
         } else if (element.type === TimelineElementType.Row) {
@@ -3579,7 +3582,7 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
      * get all clickable elements by the given local screen coordinate.
      */
     timeline_defineProperty(_this, "elementFromPoint", function (pos, clickRadius, onlyTypes) {
-      var _this$_options9;
+      var _this$_options11;
       clickRadius = Math.max(clickRadius, 1);
       var toReturn = [];
       if (!pos) {
@@ -3589,7 +3592,7 @@ var Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
       // Check whether we can drag timeline.
       var timeLinePos = _this._toScreenPx(_this._val);
       var width = 0;
-      var timelineStyle = (_this$_options9 = _this._options) === null || _this$_options9 === void 0 ? void 0 : _this$_options9.timelineStyle;
+      var timelineStyle = (_this$_options11 = _this._options) === null || _this$_options11 === void 0 ? void 0 : _this$_options11.timelineStyle;
       if (timelineStyle) {
         var _timelineStyle$capSty;
         width = Math.max((timelineStyle.width || 1) * _this._pixelRatio, ((timelineStyle === null || timelineStyle === void 0 || (_timelineStyle$capSty = timelineStyle.capStyle) === null || _timelineStyle$capSty === void 0 ? void 0 : _timelineStyle$capSty.width) || 0) * _this._pixelRatio || 1) + clickRadius;

lib/settings/timelineOptions.d.ts

@@ -104,4 +104,9 @@ export interface TimelineOptions extends TimelineRanged {
      * Timeline can be dragged or position can be changed by user interaction. Default: true
      */
     timelineDraggable?: boolean;
+    /**
+     * Array of the denominators used to determine 'beautiful' numbers to be rendered for the gauge.
+     * Default: [1, 2, 5, 10];
+     */
+    denominators?: number[];
 }

lib/timeline.d.ts

@@ -369,7 +369,7 @@ export declare class Timeline extends TimelineEventsEmitter {
      * @param ms milliseconds to convert.
      * @param isSeconds whether seconds are passed.
      */
-    _formatUnitsText: (ms: number, isSeconds?: boolean) => string;
+    _formatUnitsText: (ms: number) => string;
     /**
      * Left padding of the timeline.
      */

lib/utils/timelineUtils.d.ts

@@ -14,7 +14,7 @@ export declare class TimelineUtils {
     /**
      * Find beautiful step for the header line gauge.
      */
-    static findGoodStep(originalStep: number, divisionCheck?: number): number;
+    static findGoodStep(originalStep: number, divisionCheck?: number, denominators?: number[]): number;
     /**
      * Keep value in min, max bounds.
      */

package.json

@@ -1,32 +1,32 @@
 {
   "name": "animation-timeline-js",
-  "version": "2.3.4",
+  "version": "2.3.5",
   "description": "animation timeline control based on the canvas.",
   "main": "lib/animation-timeline.min.js",
   "types": "lib/animation-timeline.d.ts",
   "devDependencies": {
-    "@babel/cli": "7.24.7",
-    "@babel/core": "7.24.7",
+    "@babel/cli": "7.24.8",
+    "@babel/core": "7.24.9",
     "@babel/plugin-proposal-class-properties": "7.18.6",
     "@babel/plugin-proposal-object-rest-spread": "7.20.7",
-    "@babel/preset-env": "7.24.7",
+    "@babel/preset-env": "7.24.8",
     "@babel/preset-typescript": "7.24.7",
-    "@eslint/js": "^9.6.0",
+    "@eslint/js": "9.7.0",
     "@jest/globals": "29.7.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
-    "eslint": "^9.6.0",
+    "eslint": "9.7.0",
     "eslint-config-prettier": "^9.1.0",
-    "globals": "^15.6.0",
+    "globals": "15.8.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "prettier": "3.3.2",
-    "ts-jest": "29.1.5",
+    "prettier": "3.3.3",
+    "ts-jest": "29.2.3",
     "ts-loader": "9.5.1",
     "ts-node": "10.9.2",
-    "typescript": "5.5.2",
-    "typescript-eslint": "^7.14.1",
-    "webpack": "5.92.1",
+    "typescript": "5.5.3",
+    "typescript-eslint": "7.16.1",
+    "webpack": "5.93.0",
     "webpack-cli": "5.1.4"
   },
   "scripts": {
@@ -71,4 +71,4 @@
     "url": "https://github.com/ievgennaida/js-animation-timeline-control/issues"
   },
   "homepage": "https://ievgennaida.github.io/animation-timeline-control/index.html"
-}
+}

src/settings/timelineOptions.ts

@@ -107,4 +107,10 @@ export interface TimelineOptions extends TimelineRanged {
    * Timeline can be dragged or position can be changed by user interaction. Default: true
    */
   timelineDraggable?: boolean;
+
+  /**
+   * Array of the denominators used to determine 'beautiful' numbers to be rendered for the gauge.
+   * Default: [1, 2, 5, 10];
+   */
+  denominators?: number[];
 }

src/timeline.ts

@@ -1490,14 +1490,11 @@ export class Timeline extends TimelineEventsEmitter {
    * @param ms milliseconds to convert.
    * @param isSeconds whether seconds are passed.
    */
-  _formatUnitsText = (ms: number, isSeconds = false): string => {
+  _formatUnitsText = (ms: number): string => {
     const sign = TimelineUtils.sign(ms) < 0 ? '-' : '';
     ms = Math.abs(ms);
     // 1- Convert to seconds:
     let seconds = ms / 1000;
-    if (isSeconds) {
-      seconds = ms;
-    }
 
     const year = Math.floor(seconds / (365 * 86400));
     seconds = seconds % (365 * 86400);
@@ -1568,8 +1565,8 @@ export class Timeline extends TimelineEventsEmitter {
     }
 
     // Find the nearest 'beautiful' step for a gauge.
-    // 'beautiful' step should be dividable by 1/2/5/10!
-    const step = TimelineUtils.findGoodStep(valDistance / (screenWidth / this._options.stepPx));
+    // 'beautiful' step. Ex: should be dividable by 1/2/5/10!
+    const step = TimelineUtils.findGoodStep(valDistance / (screenWidth / this._options.stepPx), 0, this._options?.denominators);
 
     // Find beautiful start point:
     const fromVal = Math.floor(from / step) * step;
@@ -1582,7 +1579,7 @@ export class Timeline extends TimelineEventsEmitter {
     }
     let smallStep = 0;
     if (this._options.stepSmallPx) {
-      smallStep = TimelineUtils.findGoodStep(valDistance / (screenWidth / this._options.stepSmallPx));
+      smallStep = TimelineUtils.findGoodStep(valDistance / (screenWidth / this._options.stepSmallPx), 0, this._options?.denominators);
     }
 
     let lastTextStart = 0;

src/utils/timelineUtils.ts

@@ -1,7 +1,7 @@
 import { TimelineRanged } from '../models/timelineRanged';
 import { TimelineOptions } from '../settings/timelineOptions';
 
-const denominators = [1, 2, 5, 10];
+const defaultDenominators = [1, 2, 5, 10];
 export class TimelineUtils {
   static drawLine(ctx: CanvasRenderingContext2D, x1: number, y1: number, x2: number, y2: number): void {
     ctx.moveTo(x1, y1);
@@ -42,7 +42,10 @@ export class TimelineUtils {
   /**
    * Find beautiful step for the header line gauge.
    */
-  static findGoodStep(originalStep: number, divisionCheck = 0): number {
+  static findGoodStep(originalStep: number, divisionCheck = 0, denominators: number[] = defaultDenominators): number {
+    if (!denominators) {
+      denominators = defaultDenominators;
+    }
     if (originalStep <= 0 || isNaN(originalStep) || !Number.isFinite(originalStep)) {
       return originalStep;
     }