45 App.directive(
'tlClip',
function($timeout){
48 link:
function(scope, element, attrs){
54 maxWidth: scope.clip.length * scope.pixelsPerSecond,
59 var parentOffset = element.offset();
60 var mouseLoc =
e.pageX - parentOffset.left;
72 var vert_scroll_offset = $(
"#scrolling_tracks").
scrollTop();
73 var track_top = (parseInt(element.position().top) + parseInt(vert_scroll_offset));
74 var track_bottom = (parseInt(element.position().top) + parseInt(element.height()) + parseInt(vert_scroll_offset));
79 element.find(
'.point_icon').fadeOut(
'fast');
80 element.find(
'.audio-container').fadeOut(
'fast');
83 stop:
function(
e, ui) {
93 if (dragLoc ==
'right') {
95 element.find(
'.point_icon').show();
96 element.find(
'.audio-container').show();
100 var delta_x = ui.originalSize.width - ui.size.width;
101 var delta_time = delta_x/scope.pixelsPerSecond;
104 new_position = scope.clip.position;
105 new_left = scope.clip.start;
106 new_right = scope.clip.end;
108 if (dragLoc ==
'left'){
110 new_left += delta_time;
114 new_position -= scope.clip.start
116 new_position += delta_time
120 new_right -= delta_time;
121 if (new_right > scope.clip.duration)
123 new_right = scope.clip.duration;
127 scope.$apply(
function(){
129 if (scope.clip.end != new_right){
130 scope.clip.end = new_right;
132 if (scope.clip.start != new_left){
133 scope.clip.start = new_left;
134 scope.clip.position = new_position;
138 scope.ResizeTimeline();
142 timeline.update_clip_data(JSON.stringify(scope.clip));
147 if (scope.clip.show_audio){
148 element.find(
".audio-container").show();
156 resize:
function(
e, ui) {
160 $(
this).css(ui.originalPosition);
161 $(
this).
width(ui.originalSize.width);
166 var delta_x = parseFloat(ui.originalSize.width) - ui.size.width;
167 var delta_time = delta_x / scope.pixelsPerSecond;
170 new_left = scope.clip.start;
171 new_right = scope.clip.end;
173 if (dragLoc ==
'left'){
175 new_left += delta_time;
177 ui.element.width(ui.size.width + (new_left * scope.pixelsPerSecond));
178 ui.element.css(
"left", ui.position.left - (new_left * scope.pixelsPerSecond));
180 ui.element.width(ui.size.width);
184 new_right -= delta_time;
185 if (new_right > scope.clip.duration) {
186 new_right = scope.clip.duration - new_right;
187 ui.element.width(ui.size.width + (new_right * scope.pixelsPerSecond));
190 new_right = scope.clip.duration;
192 ui.element.width(ui.size.width);
198 if (dragLoc ==
'left'){
200 scope.PreviewClipFrame(scope.clip.id, new_left);
203 scope.PreviewClipFrame(scope.clip.id, new_right);
215 element.addClass(
"highlight_clip", 200,
"easeInOutCubic" );
221 element.removeClass(
"highlight_clip", 200,
"easeInOutCubic" );
232 cancel:
'.effect-container',
233 start:
function(event, ui) {
236 if (!element.hasClass(
'ui-selected'))
239 var clear_selections =
false;
240 if ($(
".ui-selected").length > 0)
241 clear_selections =
true;
244 var
id = $(
this).attr(
"id");
245 if (element.hasClass(
'clip')) {
247 scope.SelectTransition(
"", clear_selections);
248 scope.SelectClip(
id, clear_selections);
250 }
else if (element.hasClass(
'transition')) {
252 scope.SelectClip(
"", clear_selections);
253 scope.SelectTransition(
id, clear_selections);
258 scope.$apply(
function(){});
260 var vert_scroll_offset = $(
"#scrolling_tracks").
scrollTop();
261 var horz_scroll_offset = $(
"#scrolling_tracks").scrollLeft();
267 $(
".ui-selected").
each(
function(){
268 start_clips[$(
this).attr(
'id')] = {
"top": $(
this).position().top + vert_scroll_offset,
269 "left": $(
this).position().left + horz_scroll_offset};
270 move_clips[$(
this).attr(
'id')] = {
"top": $(
this).position().top + vert_scroll_offset,
271 "left": $(
this).position().left + horz_scroll_offset};
282 stop:
function(event, ui) {
285 $(
event.toElement ).one(
'.clip_menu',
function(
e){
e.stopImmediatePropagation(); } );
288 scope.HideSnapline();
295 drag:
function(
e, ui) {
296 var previous_x = ui.originalPosition.left;
297 var previous_y = ui.originalPosition.top;
309 var x_offset = ui.position.left - previous_x;
310 var y_offset = ui.position.top - previous_y;
313 results =
moveBoundingBox(scope, previous_x, previous_y, x_offset, y_offset, ui.position.left, ui.position.top);
314 x_offset = results.x_offset;
315 y_offset = results.y_offset;
318 ui.position.left = results.position.left;
319 ui.position.top = results.position.top;
322 $(
".ui-selected").
each(
function(){
323 var newY =
move_clips[$(
this).attr(
'id')][
"top"] + y_offset;
324 var newX =
move_clips[$(
this).attr(
'id')][
"left"] + x_offset;
328 move_clips[$(
this).attr(
'id')][
'left'] = newX;
331 $(
this).css(
'left', newX);
332 $(
this).css(
'top', newY);
337 revert:
function(valid) {
340 $(
".ui-selected").
each(
function(){
342 var oldX =
start_clips[$(
this).attr(
'id')][
'left'];
344 $(
this).css(
'left', oldX);
345 $(
this).css(
'top', oldY);
357 App.directive(
'tlClipEffects',
function(){
359 link:
function(scope, element, attrs){
366 App.directive(
'tlMultiSelectable',
function(){
368 link:
function(scope, element, attrs){
370 filter:
'.droppable',
372 cancel:
'.effect-container',
373 selected:
function( event, ui ) {
376 var
id = ui.selected.id;
380 if (
id.match(
"^clip_")) {
381 id =
id.replace(
"clip_",
"");
384 }
else if (
id.match(
"^transition_")) {
385 id =
id.replace(
"transition_",
"");
387 item =
findElement(scope.project.effects,
"id",
id);
392 timeline.qt_log(
"Add to selection: " +
id);
393 timeline.addSelection(
id, type,
false);
396 timeline.addSelection(
"",
"effect",
true);
399 scope.$apply(
function(){
400 item.selected =
true;
404 unselected:
function( event, ui ) {
407 var
id = ui.unselected.id;
411 if (
id.match(
"^clip_")) {
412 id =
id.replace(
"clip_",
"");
415 }
else if (
id.match(
"^transition_")) {
416 id =
id.replace(
"transition_",
"");
418 item =
findElement(scope.project.effects,
"id",
id);
423 timeline.qt_log(
"Remove from selection: " +
id);
426 scope.$apply(
function(){
427 item.selected =
false;
function getTrackContainerHeight()
if(window.getComputedStyle)
function findElement(arr, propName, propValue)
function moveBoundingBox(scope, previous_x, previous_y, x_offset, y_offset, left, top)
var previous_drag_position
function setBoundingBox(item)
Tween propHooks scrollTop
function drawAudio(scope, clip_id)
jQuery each(["height","width"], function(i, name){jQuery.cssHooks[name]={get:function(elem, computed, extra){if(computed){return elem.offsetWidth===0 &&rdisplayswap.test(jQuery.css(elem,"display"))?jQuery.swap(elem, cssShow, function(){return getWidthOrHeight(elem, name, extra);}):getWidthOrHeight(elem, name, extra);}}, set:function(elem, value, extra){var styles=extra &&getStyles(elem);return setPositiveNumber(elem, value, extra?augmentWidthOrHeight(elem, name, extra, jQuery.support.boxSizing &&jQuery.css(elem,"boxSizing", false, styles)==="border-box", styles):0);}};})
function hasLockedTrack(scope, top, bottom)
var track_container_height