Skip to content

Commit

Permalink
Merge pull request #1864 from DylanC/develop
Browse files Browse the repository at this point in the history 
Timeline cleanup and performance
  • Loading branch information
@DylanC
DylanC authored Jul 23, 2018
2 parents 91abe8d + bc83b22 commit 6a09742
Show file tree
Hide file tree
Showing 7 changed files with 436 additions and 323 deletions.
30 changes: 4 additions & 26 deletions src/timeline/js/controllers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ App.controller('TimelineCtrl',function($scope) {
$scope.project =
{
fps: {
num : 24,
den : 1
},
num : 24,
den : 1
},
duration : 300, //length of project in seconds
scale : 16.0, //seconds per tick
tick_pixels : 100, //pixels between tick mark
Expand Down Expand Up @@ -297,7 +297,7 @@ App.controller('TimelineCtrl',function($scope) {
$scope.PreviewClipFrame = function(clip_id, position_seconds) {
// Get the nearest starting frame position to the playhead (this helps to prevent cutting
// in-between frames, and thus less likely to repeat or skip a frame).
position_seconds_rounded = (Math.round((playhead_position * $scope.project.fps.num) / $scope.project.fps.den ) * $scope.project.fps.den ) / $scope.project.fps.num;
position_seconds_rounded = (Math.round(($scope.project.playhead_position * $scope.project.fps.num) / $scope.project.fps.den ) * $scope.project.fps.den ) / $scope.project.fps.num;

// Determine frame
var frames_per_second = $scope.project.fps.num / $scope.project.fps.den;
Expand Down Expand Up @@ -1368,9 +1368,6 @@ $scope.SetTrackLabel = function (label){

// Re-index Layer Y values
$scope.UpdateLayerIndex();

// Lock / unlock any items
$scope.LockItems();
}
}

Expand All @@ -1396,9 +1393,6 @@ $scope.SetTrackLabel = function (label){
// Re-index Layer Y values
$scope.UpdateLayerIndex();

// Lock / unlock any items
$scope.LockItems();

// Scroll to top/left when loading a project
$("#scrolling_tracks").animate({
scrollTop: 0,
Expand All @@ -1408,19 +1402,6 @@ $scope.SetTrackLabel = function (label){
// return true
return true;
};

// Lock and unlock items
$scope.LockItems = function(){

// Enable all items
//$(".clip").draggable("enable")

// Disable any locked items
// for (layer in $scope.project.layers)
// {
// timeline.qt_log(layer);
// }
};

// ############# END QT FUNCTIONS #################### //

Expand Down Expand Up @@ -1465,9 +1446,7 @@ $scope.SetTrackLabel = function (label){
startNum++;
positionNum+=50;
};

$scope.numClips = "";

};

// Debug method to add effects to a clip's $scope
Expand All @@ -1479,7 +1458,6 @@ $scope.SetTrackLabel = function (label){
icon : 'om.png'
});
$scope.clipNum = "";

};

// Debug method to add a marker to the $scope
Expand Down
85 changes: 36 additions & 49 deletions src/timeline/js/directives/clip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ var dragLoc = null;
App.directive('tlClip', function($timeout){
return {
scope: "@",
link: function(scope, element, attrs){
link: function(scope, element, attrs) {

//handle resizability of clip
element.resizable({
Expand Down Expand Up @@ -105,7 +105,7 @@ App.directive('tlClip', function($timeout){
new_left = scope.clip.start;
new_right = scope.clip.end;

if (dragLoc == 'left'){
if (dragLoc == 'left') {
// changing the start of the clip
new_left += delta_time;
if (new_left < 0) {
Expand All @@ -115,7 +115,8 @@ App.directive('tlClip', function($timeout){
} else {
new_position += delta_time
}
} else {
}
else {
// changing the end of the clips
new_right -= delta_time;
if (new_right > scope.clip.duration)
Expand All @@ -124,8 +125,7 @@ App.directive('tlClip', function($timeout){
}

//apply the new start, end and length to the clip's scope
scope.$apply(function(){

scope.$apply(function() {
// Get the nearest starting frame position to the clip position (this helps to prevent cutting
// in-between frames, and thus less likely to repeat or skip a frame).
new_position = (Math.round((new_position * scope.project.fps.num) / scope.project.fps.den ) * scope.project.fps.den ) / scope.project.fps.num;
Expand All @@ -150,17 +150,15 @@ App.directive('tlClip', function($timeout){
});

//resize the audio canvas to match the new clip width
if (scope.clip.show_audio){
if (scope.clip.show_audio) {
element.find(".audio-container").show();
//redraw audio as the resize cleared the canvas
drawAudio(scope, scope.clip.id);
}

dragLoc = null;

},
resize: function(e, ui) {

if (resize_disabled) {
// disabled, keep the item the same size
$(this).css(ui.originalPosition);
Expand All @@ -176,7 +174,7 @@ App.directive('tlClip', function($timeout){
new_left = scope.clip.start;
new_right = scope.clip.end;

if (dragLoc == 'left'){
if (dragLoc == 'left') {
// changing the start of the clip
new_left += delta_time;
if (new_left < 0) {
Expand All @@ -185,7 +183,8 @@ App.directive('tlClip', function($timeout){
} else {
ui.element.width(ui.size.width);
}
} else {
}
else {
// changing the end of the clips
new_right -= delta_time;
if (new_right > scope.clip.duration) {
Expand All @@ -199,7 +198,6 @@ App.directive('tlClip', function($timeout){
}
}


// Preview frame during resize
if (dragLoc == 'left'){
// Preview the left side of the clip
Expand All @@ -208,9 +206,7 @@ App.directive('tlClip', function($timeout){
// Preview the right side of the clip
scope.PreviewClipFrame(scope.clip.id, new_right);
}

},

}
});

//handle hover over on the clip
Expand Down Expand Up @@ -269,24 +265,21 @@ App.directive('tlClip', function($timeout){

bounding_box = {};

// Init all other selected clips (prepare to drag them)
$(".ui-selected").each(function(){
start_clips[$(this).attr('id')] = {"top": $(this).position().top + vert_scroll_offset,
"left": $(this).position().left + horz_scroll_offset};
move_clips[$(this).attr('id')] = {"top": $(this).position().top + vert_scroll_offset,
"left": $(this).position().left + horz_scroll_offset};
// Init all clips whether selected or not
start_clips[$(this).attr('id')] = {"top": $(this).position().top + vert_scroll_offset,
"left": $(this).position().left + horz_scroll_offset};
move_clips[$(this).attr('id')] = {"top": $(this).position().top + vert_scroll_offset,
"left": $(this).position().left + horz_scroll_offset};

//send clip to bounding box builder
setBoundingBox($(this));
});
//send clip to bounding box builder
setBoundingBox($(this));

// Does this bounding box overlap a locked track?
if (hasLockedTrack(scope, bounding_box.top, bounding_box.bottom) || scope.enable_razor)
return !event; // yes, do nothing

},
stop: function(event, ui) {

// Ignore clip-menu click
$( event.toElement ).one('.clip_menu', function(e){ e.stopImmediatePropagation(); } );

Expand All @@ -296,13 +289,11 @@ App.directive('tlClip', function($timeout){
// Clear previous drag position
previous_drag_position = null;
dragging = false;

},
drag: function(e, ui) {
var previous_x = ui.originalPosition.left;
var previous_y = ui.originalPosition.top;
if (previous_drag_position != null)
{
if (previous_drag_position != null) {
// if available, override with previous drag position
previous_x = previous_drag_position.left;
previous_y = previous_drag_position.top;
Expand All @@ -324,21 +315,21 @@ App.directive('tlClip', function($timeout){
ui.position.left = results.position.left;
ui.position.top = results.position.top;

// Move all other selected clips with this one
$(".ui-selected").each(function(){
var newY = move_clips[$(this).attr('id')]["top"] + y_offset;
var newX = move_clips[$(this).attr('id')]["left"] + x_offset;

//update the clip location in the array
move_clips[$(this).attr('id')]['top'] = newY;
move_clips[$(this).attr('id')]['left'] = newX;

//change the element location
$(this).css('left', newX);
$(this).css('top', newY);

});

// Move all other selected clips with this one if we have more than one clip
if($(".ui-selected").length > 1) {
$(".ui-selected").each(function() {
var newY = move_clips[$(this).attr('id')]["top"] + y_offset;
var newX = move_clips[$(this).attr('id')]["left"] + x_offset;

//update the clip location in the array
move_clips[$(this).attr('id')]['top'] = newY;
move_clips[$(this).attr('id')]['left'] = newX;

//change the element location
$(this).css('left', newX);
$(this).css('top', newY);
});
}
},
revert: function(valid) {
if(!valid) {
Expand All @@ -353,8 +344,6 @@ App.directive('tlClip', function($timeout){
}
}
});


}
};
});
Expand All @@ -377,7 +366,6 @@ App.directive('tlMultiSelectable', function(){
distance: 0,
cancel: '.effect-container,.transition_menu,.clip_menu',
selected: function( event, ui ) {

// Identify the selected ID and TYPE
var id = ui.selected.id;
var type = "";
Expand All @@ -393,8 +381,7 @@ App.directive('tlMultiSelectable', function(){
item = findElement(scope.project.effects, "id", id);
}

if (scope.Qt)
{
if (scope.Qt) {
timeline.addSelection(id, type, false);

// Clear effect selections (if any)
Expand All @@ -405,7 +392,6 @@ App.directive('tlMultiSelectable', function(){
item.selected = true;
},
unselected: function( event, ui ) {

// Identify the selected ID and TYPE
var id = ui.unselected.id;
var type = "";
Expand All @@ -421,8 +407,9 @@ App.directive('tlMultiSelectable', function(){
item = findElement(scope.project.effects, "id", id);
}

if (scope.Qt)
if (scope.Qt) {
timeline.removeSelection(id, type);
}

// Update item state
item.selected = false;
Expand Down
Loading

0 comments on commit 6a09742

Please sign in to comment.