41 App.directive(
'tlScrollableTracks',
function () {
45 link:
function (scope, element, attrs) {
48 element.on(
'scroll',
function () {
52 $(
'#track_controls').
scrollTop(element.scrollTop());
53 $(
'#scrolling_ruler').scrollLeft(element.scrollLeft());
54 $(
'#progress_container').scrollLeft(element.scrollLeft());
58 element.on(
'mousedown',
function(
e) {
62 starting_scrollbar = { x: element.scrollLeft(), y: element.scrollTop() };
64 element.addClass(
'drag_cursor');
69 element.on(
'mousemove',
function(
e){
81 element.on(
'mouseup',
function(
e) {
82 element.removeClass(
'drag_cursor');
91 App.directive(
'tlBody',
function () {
93 link:
function (scope, element, attrs){
95 element.on(
'mouseup',
function(
e){
107 App.directive(
'tlRuler',
function ($timeout) {
110 link:
function (scope, element, attrs) {
112 element.on(
'mousedown',
function(
e){
114 var playhead_left =
e.pageX - element.offset().left;
115 var playhead_seconds = playhead_left / scope.pixelsPerSecond;
118 scope.PreviewFrame(playhead_seconds);
121 scope.playhead_animating =
true;
122 $(
".playhead-line").animate({left: playhead_left + scope.playheadOffset }, 200);
123 $(
".playhead-top").animate({left: playhead_left + scope.playheadOffset }, 200,
function() {
125 scope.MovePlayhead(playhead_seconds);
128 scope.$apply(
function(){
129 scope.playhead_animating =
false;
136 element.on(
'mousemove',
function(
e){
137 if (
e.which == 1 && !scope.playhead_animating) {
138 var playhead_seconds = (e.pageX - element.offset().left) / scope.pixelsPerSecond;
140 scope.MovePlayhead(playhead_seconds);
141 scope.PreviewFrame(playhead_seconds);
147 scope.$watch(
'project.scale + markers.length + project.duration',
function (val) {
152 var scale = scope.project.scale;
153 var tick_pixels = scope.project.tick_pixels;
154 var each_tick = tick_pixels / 2;
155 var pixel_length = scope.GetTimelineWidth(1024);
158 var ctx = element[0].getContext(
'2d');
160 ctx.clearRect(0, 0, element.width(), element.height());
162 num_ticks = pixel_length / 50;
165 ctx.strokeStyle =
"#c8c8c8";
166 ctx.lineCap =
"round";
169 for (x=0;x<num_ticks+1;x++){
178 time = (scale * x) /2;
179 time_text =
secondsToTime(time, scope.project.fps.num, scope.project.fps.den);
182 ctx.fillStyle =
"#c8c8c8";
184 ctx.fillText(time_text[
"hour"] +
":"+ time_text[
"min"] +
":"+ time_text[
"sec"], x*each_tick-22, 11);
191 ctx.moveTo(x*each_tick, 39);
192 ctx.lineTo(x*each_tick, line_top);
207 App.directive(
'tlRulertime',
function () {
210 link:
function (scope, element, attrs) {
212 element.on(
'mousedown',
function(
e){
213 var playhead_seconds = 0.0;
215 scope.MovePlayhead(playhead_seconds);
216 scope.PreviewFrame(playhead_seconds);
221 element.on(
'mousemove',
function(
e){
222 if (
e.which == 1 && !scope.playhead_animating) {
223 var playhead_seconds = 0.0;
225 scope.MovePlayhead(playhead_seconds);
226 scope.PreviewFrame(playhead_seconds);
238 App.directive(
'tlProgress',
function($timeout){
240 link:
function(scope, element, attrs){
241 scope.$watch(
'progress + project.scale',
function (val) {
244 var progress = scope.project.progress;
245 for(p=0;p<progress.length;p++){
248 var start_second = progress[p][0];
249 var stop_second = progress[p][1];
250 var status = progress[p][2];
253 var start_pixel = start_second * scope.pixelsPerSecond;
254 var stop_pixel = stop_second * scope.pixelsPerSecond;
255 var rect_length = stop_pixel - start_pixel;
258 var ctx = element[0].getContext(
'2d');
260 ctx.rect(start_pixel, 0, rect_length, 5);
262 if (status ==
'complete'){
263 ctx.fillStyle =
'green';
265 ctx.fillStyle =
'yellow';
Tween propHooks scrollTop
function secondsToTime(secs, fps_num, fps_den)
var starting_mouse_position