3 files changed, 76 insertions, 36 deletions

diff --git a/animism-align/frontend/views/align/align.css b/animism-align/frontend/views/align/align.css
index bd561ad..5c83a45 100644
--- a/animism-align/frontend/views/align/align.css
+++ b/animism-align/frontend/views/align/align.css
@@ -21,14 +21,19 @@ canvas {
 
 .ticks {
   position: relative;
+  height: 20px;
 }
 .ticks .tick {
   position: absolute;
   top: 0;
   height: 4px;
+  width: 1px;
+  background: #ddd;
 }
 .ticks .tickLabel {
   position: absolute;
-  top: 4px;
-  font-size: 0.75rem;
+  top: 6px;
+  font-size: 12px;
+  width: 40px;
+  text-align: center;
 }
\ No newline at end of file
diff --git a/animism-align/frontend/views/align/components/ticks.component.js b/animism-align/frontend/views/align/components/ticks.component.js
index 3baa1f6..95a2b32 100644
--- a/animism-align/frontend/views/align/components/ticks.component.js
+++ b/animism-align/frontend/views/align/components/ticks.component.js
@@ -1,14 +1,12 @@
 import React, { Component } from 'react'
 
-import { ZOOM_STEPS, ZOOM_TICK_INTERVAL } from '../constants'
+import { ZOOM_STEPS, ZOOM_LABEL_STEPS, ZOOM_TICK_STEPS } from '../constants'
 import { timestamp } from '../../../util'
 
 export default class Ticks extends Component {
   render() {
     let { start_ts, zoom, duration } = this.props.timeline
-    start_ts = 65.0
     duration /= 10
-    zoom = 2
     const width = window.innerWidth
 
     let secondsPerPixel = ZOOM_STEPS[zoom] / 10 // 0.1 sec / step
@@ -17,28 +15,31 @@ export default class Ticks extends Component {
     console.log(secondsPerPixel, pixelTimeDuration)
     console.log('width in seconds', widthTimeDuration)
 
-    let secondsPerTick = ZOOM_STEPS[zoom] * 10 // secs
-    let pixelsPerTick = secondsPerTick * pixelTimeDuration
-    console.log('pixels per tick', pixelsPerTick)
+    let secondsPerTick = ZOOM_LABEL_STEPS[zoom] // secs
+    let pixelsPerLabel = secondsPerTick * pixelTimeDuration
+    let pixelsPerTick = ZOOM_TICK_STEPS[zoom]
+    console.log('pixels per label', pixelsPerLabel)
 
-    let labelSpacing = pixelsPerTick
     let subdivision = secondsPerTick
-    while (labelSpacing < 200) {
-      labelSpacing *= 2
+    while (pixelsPerLabel < 200) {
+      pixelsPerLabel *= 2
+      pixelsPerTick *= 2
       subdivision *= 2
     }
+    if (subdivision > 60) {
+
+    }
 
     console.log('start ts', start_ts)
     let pixelOffset = (start_ts / secondsPerPixel)
-    let pixelRemainder = pixelOffset % labelSpacing
-    // let startOffset = pixelsPerTick - (startTiming % pixelsPerTick)
-    let startOffset = labelSpacing - pixelRemainder
+    let pixelRemainder = pixelOffset % pixelsPerLabel
+    let startOffset = pixelsPerLabel - pixelRemainder
     let startTiming = (pixelOffset + startOffset) * secondsPerPixel
 
-    let tickCount = Math.ceil(width / labelSpacing)
+    let labelCount = Math.ceil(width / pixelsPerLabel)
     let offset, timing, tickLabels = [], ticks = []
-    for (var i = -1; i < tickCount; i++) {
-      offset = i * labelSpacing + startOffset
+    for (var i = -1; i < labelCount; i++) {
+      offset = i * pixelsPerLabel + startOffset - 20
       if (offset + 20 > width) continue
       timing = i * subdivision + startTiming
       if (timing > duration) {
@@ -54,25 +55,40 @@ export default class Ticks extends Component {
       )
     }
 
-    // tickLabels.push(
-    //   <div className='tickLabel tickLabelTotal' key={"tickLabel_total"}
-    //     style={{
-    //       left: width
-    //     }}>
-    //     {timestamp(duration, 1)}
-    //   </div>
-    // )
-    // for (var i = 0; i < minuteCount; i += 1) {
-    //   offset = i * labelSpacing
-    //   timing = i * subdivision
-    //   ticks.push(
-    //     <div className='tick' key={"tick_" + i}
-    //       style={{
-    //         left: Math.floor(offset),
-    //       }}
-    //     />
-    //   )
-    // }
+    let durationOffset = duration / secondsPerPixel - pixelOffset
+    if (timing > duration) {
+      tickLabels.push(
+        <div className='tickLabel tickLabelTotal' key={"tickLabel_total"}
+          style={{
+            left: durationOffset - 20
+          }}>
+          {timestamp(duration, 1)}
+        </div>
+      )
+      ticks.push(
+        <div className='tick' key={"tick_total"}
+          style={{
+            left: Math.floor(durationOffset),
+          }}
+        />
+      )
+    }
+    let tickCount = Math.ceil(width / pixelsPerTick) + 1
+    for (var i = 0; i < tickCount; i += 1) {
+      offset = i * pixelsPerTick + startOffset - pixelsPerLabel
+      if (offset > durationOffset) {
+        break
+      }
+      ticks.push(
+        <div className='tick' key={"tick_" + i}
+          style={{
+            left: Math.floor(offset),
+          }}
+        />
+      )
+    }
+    console.log(ticks.length)
+
     return (
       <div className='ticks'>
         {ticks}
diff --git a/animism-align/frontend/views/align/constants.js b/animism-align/frontend/views/align/constants.js
index 0b0630f..bd10f8d 100644
--- a/animism-align/frontend/views/align/constants.js
+++ b/animism-align/frontend/views/align/constants.js
@@ -11,3 +11,22 @@ export const ZOOM_STEPS = [
   60,
 ]
 
+export const ZOOM_LABEL_STEPS = [
+  10,
+  30,
+  30,
+  75,
+  300,
+  300,
+  600,
+]
+
+export const ZOOM_TICK_STEPS = [
+  10,
+  25,
+  25,
+  15,
+  15,
+  20,
+  25,
+]