order or draggable objects pickup is covered by unittests

lib/animation-timeline.js

@@ -2913,15 +2913,23 @@ var timeline_Timeline = /*#__PURE__*/function (_TimelineEventsEmitte) {
         var prioA = getPriority(a.type);
         var prioB = getPriority(b.type);
 
-        if (prioA == prioB) {
+        if (prioA === prioB) {
           if (val === null) {
             return 0;
+          } // Sort by distance
+
+
+          prioA = TimelineUtils.getDistance(a.val, val);
+          prioB = TimelineUtils.getDistance(b.val, val);
+
+          if (prioA === prioB) {
+            return 0;
           }
 
-          return TimelineUtils.getDistance(a.val, val) > TimelineUtils.getDistance(b.val, val) ? 1 : 0;
+          return prioA < prioB ? 1 : -1;
         }
 
-        return prioA > prioB ? 1 : 0;
+        return prioA < prioB ? 1 : -1;
       });
 
       if (sorted.length > 0) {

lib/utils/timelineClickableElement.d.ts

@@ -13,9 +13,9 @@ export interface TimelineClickableElement {
     /**
      * Related keyframe model. In a case of stripe this value will be empty.
      */
-    keyframe: TimelineKeyframe;
+    keyframe?: TimelineKeyframe;
     /**
      * Related row model.
      */
-    row: TimelineRow;
+    row?: TimelineRow;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "animation-timeline-js",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "animation timeline control based on the canvas.",
   "main": "lib/animation-timeline.min.js",
   "types": "lib/animation-timeline.d.ts",
@@ -28,7 +28,7 @@
   "scripts": {
     "test": "echo \"Run tests/unittest.html explicitly to execute tests\" && exit 1",
     "build-typescript-definitions": "tsc -emitDeclarationOnly",
-    "build": "webpack && npm run build-typescript-definitions",
+    "build": "webpack && npm run build-typescript-definitions && npm run build-tests",
     "webpack": "npm run build",
     "build-tests": "tsc -p tsconfig.tests.json"
   },

src/timeline.ts

@@ -1766,16 +1766,23 @@ export class Timeline extends TimelineEventsEmitter {
     });
 
     const sorted = filteredElements.sort((a, b): number => {
-      const prioA = getPriority(a.type);
-      const prioB = getPriority(b.type);
-      if (prioA == prioB) {
+      let prioA = getPriority(a.type);
+      let prioB = getPriority(b.type);
+      if (prioA === prioB) {
         if (val === null) {
           return 0;
         }
-        return TimelineUtils.getDistance(a.val, val) > TimelineUtils.getDistance(b.val, val) ? 1 : 0;
+
+        // Sort by distance
+        prioA = TimelineUtils.getDistance(a.val, val);
+        prioB = TimelineUtils.getDistance(b.val, val);
+        if (prioA === prioB) {
+          return 0;
+        }
+        return prioA < prioB ? 1 : -1;
       }
 
-      return prioA > prioB ? 1 : 0;
+      return prioA < prioB ? 1 : -1;
     });
     if (sorted.length > 0) {
       return sorted[sorted.length - 1];

src/utils/timelineClickableElement.ts

@@ -14,10 +14,10 @@ export interface TimelineClickableElement {
   /**
    * Related keyframe model. In a case of stripe this value will be empty.
    */
-  keyframe: TimelineKeyframe;
+  keyframe?: TimelineKeyframe;
 
   /**
    * Related row model.
    */
-  row: TimelineRow;
+  row?: TimelineRow;
 }

tests/timelineTests.js

@@ -1,7 +1,95 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable @typescript-eslint/no-explicit-any */
 var animation_timeline_1 = require("../lib/animation-timeline");
-describe('Timeline ', function () {
+function assertEquals(value, expected, message) {
+    if (message === void 0) { message = null; }
+    if (expected !== value) {
+        if (!message) {
+            message = 'Not equal!';
+        }
+        new Error(message + '. Expected: ' + expected + value);
+    }
+}
+describe('_findDraggable', function () {
+    it('Keyframe should be selected', function () {
+        var timeline = new animation_timeline_1.Timeline();
+        var elements = [
+            {
+                type: animation_timeline_1.TimelineElementType.Stripe,
+                val: 5,
+            },
+            {
+                type: animation_timeline_1.TimelineElementType.Keyframe,
+                val: 5,
+            },
+        ];
+        var element = timeline._findDraggable(elements, 5);
+        if (!element) {
+            throw new Error('element cannot be empty');
+        }
+        assertEquals(element.type, animation_timeline_1.TimelineElementType.Keyframe, animation_timeline_1.TimelineElementType.Keyframe + ' should be selected');
+    });
+    it('Timeline should be selected', function () {
+        var timeline = new animation_timeline_1.Timeline();
+        var elements = [
+            {
+                type: animation_timeline_1.TimelineElementType.Timeline,
+                val: 5,
+            },
+            {
+                type: animation_timeline_1.TimelineElementType.Stripe,
+                val: 5,
+            },
+        ];
+        var element = timeline._findDraggable(elements, 5);
+        if (!element) {
+            throw new Error('element cannot be empty');
+        }
+        assertEquals(element.type, animation_timeline_1.TimelineElementType.Timeline, animation_timeline_1.TimelineElementType.Timeline + ' should be selected');
+    });
+    it('Timeline should taken first', function () {
+        var timeline = new animation_timeline_1.Timeline();
+        var elements = [
+            {
+                type: animation_timeline_1.TimelineElementType.Timeline,
+                val: 5,
+            },
+            {
+                type: animation_timeline_1.TimelineElementType.Keyframe,
+                val: 4,
+            },
+            {
+                type: animation_timeline_1.TimelineElementType.Keyframe,
+                val: 5,
+            },
+            {
+                type: animation_timeline_1.TimelineElementType.Stripe,
+                val: 5,
+            },
+        ];
+        var element = timeline._findDraggable(elements, 5);
+        if (!element) {
+            throw new Error('element cannot be empty');
+        }
+        assertEquals(element.type, animation_timeline_1.TimelineElementType.Timeline, animation_timeline_1.TimelineElementType.Timeline + ' should be selected');
+        // Keyframe with value 5 should be selected
+        assertEquals(element.val, 5);
+    });
+    it('Stripe should be selected', function () {
+        var timeline = new animation_timeline_1.Timeline();
+        var elements = [
+            {
+                type: animation_timeline_1.TimelineElementType.Stripe,
+                val: 5,
+            },
+        ];
+        var element = timeline._findDraggable(elements, 5);
+        if (!element) {
+            throw new Error('element cannot be empty');
+        }
+        assertEquals(element.type, animation_timeline_1.TimelineElementType.Stripe, animation_timeline_1.TimelineElementType.Stripe + ' should be selected');
+    });
     it('closest keyframe should be returned', function () {
         var timeline = new animation_timeline_1.Timeline();
         var elements = [
@@ -19,9 +107,7 @@ describe('Timeline ', function () {
             },
         ];
         var element = timeline._findDraggable(elements, 5);
-        if (element.val !== elements[2].val) {
-            throw new Error('Wrong keyframe selected');
-        }
+        assertEquals(element.val, elements[2].val);
     });
 });
 //# sourceMappingURL=timelineTests.js.map

tests/timelineTests.ts

@@ -1,6 +1,94 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Timeline, TimelineElementType, TimelineClickableElement } from '../lib/animation-timeline';
 
-describe('Timeline ', function () {
+function assertEquals(value: any, expected: any, message: string | null = null): void {
+  if (expected !== value) {
+    if (!message) {
+      message = 'Not equal!';
+    }
+    new Error(message + '. Expected: ' + expected + value);
+  }
+}
+
+describe('_findDraggable', function () {
+  it('Keyframe should be selected', function () {
+    const timeline = new Timeline();
+    const elements = [
+      {
+        type: TimelineElementType.Stripe,
+        val: 5,
+      } as TimelineClickableElement,
+      {
+        type: TimelineElementType.Keyframe,
+        val: 5,
+      } as TimelineClickableElement,
+    ];
+    const element = timeline._findDraggable(elements, 5);
+    if (!element) {
+      throw new Error('element cannot be empty');
+    }
+    assertEquals(element.type, TimelineElementType.Keyframe, TimelineElementType.Keyframe + ' should be selected');
+  });
+  it('Timeline should be selected', function () {
+    const timeline = new Timeline();
+    const elements = [
+      {
+        type: TimelineElementType.Timeline,
+        val: 5,
+      } as TimelineClickableElement,
+      {
+        type: TimelineElementType.Stripe,
+        val: 5,
+      } as TimelineClickableElement,
+    ];
+    const element = timeline._findDraggable(elements, 5);
+    if (!element) {
+      throw new Error('element cannot be empty');
+    }
+    assertEquals(element.type, TimelineElementType.Timeline, TimelineElementType.Timeline + ' should be selected');
+  });
+  it('Timeline should taken first', function () {
+    const timeline = new Timeline();
+    const elements = [
+      {
+        type: TimelineElementType.Timeline,
+        val: 5,
+      } as TimelineClickableElement,
+      {
+        type: TimelineElementType.Keyframe,
+        val: 4,
+      },
+      {
+        type: TimelineElementType.Keyframe,
+        val: 5,
+      } as TimelineClickableElement,
+      {
+        type: TimelineElementType.Stripe,
+        val: 5,
+      } as TimelineClickableElement,
+    ];
+    const element = timeline._findDraggable(elements, 5);
+    if (!element) {
+      throw new Error('element cannot be empty');
+    }
+    assertEquals(element.type, TimelineElementType.Timeline, TimelineElementType.Timeline + ' should be selected');
+    // Keyframe with value 5 should be selected
+    assertEquals(element.val, 5);
+  });
+  it('Stripe should be selected', function () {
+    const timeline = new Timeline();
+    const elements = [
+      {
+        type: TimelineElementType.Stripe,
+        val: 5,
+      } as TimelineClickableElement,
+    ];
+    const element = timeline._findDraggable(elements, 5);
+    if (!element) {
+      throw new Error('element cannot be empty');
+    }
+    assertEquals(element.type, TimelineElementType.Stripe, TimelineElementType.Stripe + ' should be selected');
+  });
   it('closest keyframe should be returned', function () {
     const timeline = new Timeline();
     const elements = [
@@ -18,8 +106,6 @@ describe('Timeline ', function () {
       } as TimelineClickableElement,
     ];
     const element = timeline._findDraggable(elements, 5);
-    if (element.val !== elements[2].val) {
-      throw new Error('Wrong keyframe selected');
-    }
+    assertEquals(element.val, elements[2].val);
   });
 });

tests/unittests.html

@@ -9,6 +9,9 @@
 </head>
 
 <body>
+    <div>
+        <a href="../demo/index.html">back</a>
+    </div>
     <div id="mocha"></div>
 
     <script src="https://unpkg.com/chai/chai.js"></script>