From e2369c0b434779e38165976647d39a5a3435a7b2 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sun, 28 Jun 2020 22:20:51 +0200
Subject: display ticks and total

---
 .../views/align/components/ticks.component.js      | 84 +++++++++++++---------
 1 file changed, 50 insertions(+), 34 deletions(-)

(limited to 'animism-align/frontend/views/align/components')

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}
-- 
cgit v1.2.3-70-g09d2