Add frame support, so we can use this library with time-codes at any …

…frame-rate. TODO: minor-label rendering is not accurate in the library. Some frames are repeated, but we'll leave it as is for now because we're using our own formatter in the application part
metrica-sports · Jun 24, 2023 · 52a9f4a · 52a9f4a
1 parent f289fc9
commit 52a9f4a
Show file tree

Hide file tree

Showing 13 changed files with 195 additions and 33 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -34,6 +34,23 @@
         ],
         "console": "integratedTerminal",
         "internalConsoleOptions": "neverOpen"
-    }
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Test",
+      "program": "${workspaceFolder}/node_modules/mocha/bin/_mocha",
+      "args": [
+          "--exit",
+          "--timeout",
+          "999999",
+          "--colors",
+          "--require",
+          "vis-dev-utils/babel-register",
+          "${workspaceFolder}/test"
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen"
+  }
   ]
 }
diff --git a/docs/graph2d/index.html b/docs/graph2d/index.html
@@ -867,6 +867,7 @@ <h3 id="timelineOptions">Timeline Options</h3>
       <pre class="prettyprint lang-js">{
   minorLabels: {
     millisecond:'SSS',
+    frame:      'SSS',
     second:     's',
     minute:     'HH:mm',
     hour:       'HH:mm',
@@ -878,6 +879,7 @@ <h3 id="timelineOptions">Timeline Options</h3>
   },
   majorLabels: {
     millisecond:'HH:mm:ss',
+    frame:      'HH:mm:ss,
     second:     'D MMMM HH:mm',
     minute:     'ddd D MMMM',
     hour:       'ddd D MMMM',

diff --git a/docs/timeline/index.html b/docs/timeline/index.html
@@ -640,6 +640,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
       <pre class="prettyprint lang-js">{
   minorLabels: {
     millisecond:'SSS',
+    frame:      'SSS',
     second:     's',
     minute:     'HH:mm',
     hour:       'HH:mm',
@@ -651,6 +652,7 @@ <h2 id="Configuration_Options">Configuration Options</h2>
   },
   majorLabels: {
     millisecond:'HH:mm:ss',
+    frame:      'HH:mm:ss',
     second:     'D MMMM HH:mm',
     minute:     'ddd D MMMM',
     hour:       'ddd D MMMM',

diff --git a/lib/timeline/Graph2d.js b/lib/timeline/Graph2d.js
@@ -81,6 +81,10 @@ function Graph2d (container, items, groups, options) {
       getStep() {
         return me.timeAxis.step.step;
       },
+      getMillisecondsPerFrame() {
+        return me.timeAxis.step.millisecondsPerFrame;
+      },
+
 
       toScreen: me._toScreen.bind(me),
       toGlobalScreen: me._toGlobalScreen.bind(me), // this refers to the root.width