Giter Club home page Giter Club logo

timeline's Introduction

Timeline

vw = timeline view port (used here also to refer to its width) 
n = number of vw multipliers on either side of vw
dw = moving div element inside vw (used here also to refer to its width) 
dw = (2n+1) * vw

here vw is in the middle of dw

d0                    d1      d   d2                    d3
---------------------------------------------------------
|                     |     vw     |                    |
---------------------------------------------------------
t0            ot1     t1      t   t2   ot2              t3
                      et1         et2

if we set d1 = 0 we get:
d0 = -n * vw
d1 = 0
d2 = vw
d3 = (n+1) * vw

t0, t1, t2, t3: time points corresponding to d0, d1, d2, d3

From the above:
vw = (d2 - d1) in the space domain = (t2 - t1) in the time domain

For a apoint in time t, corresponding to the point in space d, we have:
(t - t1)/(t2 - t1) = (d - d1)/(d2 - d1)

Substituting d1 = 0, t2 - t1 = scale, d2 - d1 = vw (viewport width):
(t - t1)/scale = d/vw, or

    d = (t - t1) * vw / scale      <---- positioning formula on vw

We can derive the deltas formula by putting d - d1 = dx, and t - t1 = dt

    dt = dx * scale / vw            <---- dragging formula

The positioning formula above will be used to position points after adding (d1 - d0) = n * vw, since we're positioning points on the dw div, not vw:

    d = n * vw + (t - t1) * vw / scale       
    d = vw * (n + ((t - t1) / scale))    <---- positioning formula on dw

vw / scale is the conversion factor between time and space: 
cf = vw / scale

When zooming in/out, the center of the scaling transform is the mouse position. 
Therefore, if point d is the mouse posoition, corresponding to point t: neither point should change due to the transform:
(old t2 - old t1) = (ot2 - ot1) = old scale = s1
(new t2 - new t1) = (et2 - et1) = new scale = s2

(t - t1)/(t2 - t1) = (t - et1)/(et2 - et1)
(t - t1)/s1 = (t - et1)/s2
(t - t1) * s2/s1 = (t - et1)

et1 = t - (t - t1) * s2/s1     <----- formula for deriving new date anchor time value et1 from old anchor t1, and the old and new scale values, after zooming in/out

From positioning formula on vw above
t - t1 = d * scale / vw

t = t1 + d * scale / vw   <----- time value from position in vw reference frame

In the dw reference frame the mouse position d is expressed in reference to d0, therefore to trnasform it back to the vw frame we replace d => d - n * vw:
t = t1 + (d - n * vw) * scale / vw 

t = t1 + (d / vw - n) * scale  <----- time value from position in dw reference frame

timeline's People

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.