Time marks stay when you scroll

Author: JacksonRG

src/timeline/js/directives/ruler.js

@@ -175,7 +175,7 @@ App.directive("tlRuler", function ($timeout) {
         // startTime : time[0]; endTime : time[1]
         fps = scope.project.fps.num / scope.project.fps.den;
         time = [ startPos / scope.pixelsPerSecond, endPos / scope.pixelsPerSecond];
-        time[0] -= time[0]%1;
+        time[0] -= time[0]%2;
         time[1] -= time[1]%1 - 1;
 
         startFrame = time[0] * Math.round(fps);
@@ -185,21 +185,17 @@ App.directive("tlRuler", function ($timeout) {
         let tPrev;
         showTime = true;
 
-        // timePerTick = framesPerTick(scope.pixelsPerSecond, scope.project.fps.num ,scope.project.fps.num) / fps;
-        // console.log('FPT: ' + framesPerTick(scope.pixelsPerSecond, scope.project.fps.num ,scope.project.fps.num));
-        fpt = framesPerTick(scope.pixelsPerSecond, scope.project.fps.num ,scope.project.fps.den)
-        frame = startFrame
-        console.log ("Start: "+ startFrame)
-        console.log ("End : "+ endFrame)
-        console.log ("FPT : "+ fpt)
-        console.log ("start Time : "+ time[0])
+        fpt = framesPerTick(scope.pixelsPerSecond, scope.project.fps.num ,scope.project.fps.den);
+        frame = startFrame;
+        console.log('fpt: ' + fpt);
+        console.log('startFrame: ' + startFrame);
         while ( frame <= endFrame){
           t = frame / fps;
           pos = t * scope.pixelsPerSecond;
           tickSpan = $('<span style="left:'+pos+'px;"></span>');
           tickSpan.addClass("tick_mark");
 
-          if (showTime) {
+          if ((frame - startFrame) % (fpt * 2) == 0) {
             timeSpan = $('<span style="left:'+pos+'px;"></span>');
             timeSpan.addClass("ruler_time");
             timeText = secondsToTime(t, scope.project.fps.num, scope.project.fps.den);
@@ -209,19 +205,15 @@ App.directive("tlRuler", function ($timeout) {
             if (fpt < Math.round(fps)) {
               timeSpan[0].innerText += ',' + timeText['frame'];
             }
-              // timeText['frame'];
             tickSpan[0].style['height'] = '20px';
-            showTime = false;
-          } else {
-            showTime = true;
           }
           ruler.append(timeSpan);
           ruler.append(tickSpan);
 
           frame += fpt;
         }
         return;
-      }
+      };
 
       scope.$watch("project.scale + project.duration + scrollLeft", function (val) {
         if (val) {

src/timeline/js/functions.js

@@ -335,26 +335,48 @@ function moveBoundingBox(scope, previous_x, previous_y, x_offset, y_offset, left
 }
 
 /**
+ * Primes are used for factoring.
+ * Store any that have been found for future use.
+ */
+global_primes = new Set();
+
+/**
+ * Creates a list of all primes less than n.
+ * Stores primes in a set for better performance in the future.
+ * If some primes have been found, start with that list,
+ * and check the remaining numbers up to n.
  * @param {any number} n 
  * @returns the list of all primes less than n
  */
 function primesUpTo(n) {
+  n = Math.floor(n);
+  if (Array.from(global_primes).pop() >= n) { // All primes already found
+    return Array.from(global_primes).filter( x => { return x < n });
+  }
+  start = 2; // 0 and 1 can't be prime
   primes = [...Array(n+1).keys()]; // List from 0 to n
-  primes = primes.slice(2,primes.length -1); // 0 and 1 divide nothing and everything
-  primes.forEach( p => {
+  if (Array.from(global_primes).length) { // Some primes already found
+    start = Array.from(global_primes).pop() + 1;
+    primes = primes.slice(start,primes.length -1);
+    primes = Array.from(global_primes).concat(primes);
+  } else {
+    primes = primes.slice(start,primes.length -1);
+  }
+  primes.forEach( p => { // Sieve of Eratosthenes method of prime factoring
     primes = primes.filter( test => { return (test % p != 0) || (test == p) } );
-  });
-  primes.forEach( p => {
     global_primes.add(p);
-  })
+  });
   return primes;
 }
 
 /**
+ * Every integer is either prime,
+ * is the product of some list of primes.
  * @param {integer to factor} n 
  * @returns the list of prime factors of n
  */
 function primeFactorsOf(n) {
+  n = Math.floor(n);
   factors = [];
   primes = primesUpTo(n);
   primes.push(n);
@@ -373,6 +395,9 @@ function primeFactorsOf(n) {
  * From the pixels per second of the project,
  * Find a number of frames between each ruler mark,
  * such that the tick marks remain at least 50px apart.
+ * 
+ * Increases the number of frames by factors of FPS.
+ * This way each tick should land neatly on a second mark
  * @param {Pixels per second} pps 
  * @param fps_num 
  * @param fps_den 
@@ -384,15 +409,9 @@ function framesPerTick(pps, fps_num, fps_den) {
   seconds = () => { return frames / fps };
   pixels = () => { return seconds() * pps };
   factors = primeFactorsOf(Math.round(fps));
-  while (pixels() < 35) {
+  while (pixels() < 40) {
       frames *= factors.shift() || 2;
   }
 
   return frames;
-}
-
-/**
- * Primes are used for factoring.
- * Store any that have been found for future use.
- */
-global_primes = new Set();
+}