Merge pull request #2 from metrica-sports/fran/add-order-field-to-item

Add order field to item
metrica-sports · Jul 1, 2023 · 2a92b9a · 2a92b9a
2 parents 3c060fd + 7cef635
commit 2a92b9a
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 10 deletions.
diff --git a/lib/timeline/Stack.js b/lib/timeline/Stack.js
@@ -6,7 +6,13 @@ const EPSILON = 0.001; // used when checking collisions, to prevent round-off er
  * @param {Item[]} items
  */
 export function orderByStart(items) {
-  items.sort((a, b) => a.data.start - b.data.start);
+  items.sort((a, b) => {
+    if (a.data.order !== b.data.order) {
+      return a.data.order - b.data.order;
+    }
+
+    return a.data.start - b.data.start;
+  });
 }
 
 /**
@@ -16,6 +22,10 @@ export function orderByStart(items) {
  */
 export function orderByEnd(items) {
   items.sort((a, b) => {
+    if (a.data.order !== b.data.order) {
+      return a.data.order - b.data.order;
+    }
+
     const aTime = ('end' in a.data) ? a.data.end : a.data.start;
     const bTime = ('end' in b.data) ? b.data.end : b.data.start;
 
@@ -311,15 +321,22 @@ function performStacking(items, margins, compareTimes, shouldStack, shouldOthers
     const horizontallyCollidingItems = itemsAlreadyPositioned
       .slice(horizontalOverlapStartIndex, horizontalOverlapEndIndex)
       .filter(i => itemStart < getItemEnd(i) - EPSILON && itemEnd - EPSILON > getItemStart(i))
-      .sort((a, b) => a.top - b.top);
+      .sort((a, b) => {
+        if (a.data.order !== b.data.order) {
+          return a.data.order - b.data.order;
+        }
+
+        return a.top - b.top;
+      });
 
     // Keep moving the item down until it stops colliding with any other items
     for(let i2 = 0; i2 < horizontallyCollidingItems.length; i2++) {
       const otherItem = horizontallyCollidingItems[i2];
-
-      if(checkVerticalSpatialCollision(item, otherItem, margins)) {
+
+      // We won't check vertical collisions because don't want to share lanes with previous items.
+      //if(checkVerticalSpatialCollision(item, otherItem, margins)) {
         item.top = otherItem.top + otherItem.height + margins.vertical;
-      }
+      //}
     }
 
     if(shouldOthersStack(item)) {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@metrica-sports/vis-timeline",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Create a fully customizable, interactive timeline with items and ranges.",
   "homepage": "https://visjs.github.io/vis-timeline/",
   "license": "(Apache-2.0 OR MIT)",

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -87,6 +87,7 @@ export interface LegendOptions {
 export interface DataItem {
   className?: string;
   content: string;
+  order: number;
   end?: DateType;
   group?: any;
   id?: IdType;