OpenShot Video Editor
2.0.0
|
Transition directives (draggable & resizable functionality) More...
Go to the source code of this file.
Functions | |
App | directive ('tlTransition', function(){return{scope:"@", link:function(scope, element, attrs){element.resizable({handles:"e, w", minWidth:1, start:function(e, ui){dragging=true;resize_disabled=false;var parentOffset=element.offset();var mouseLoc=e.pageX-parentOffset.left;if(mouseLoc< 5){dragLoc= 'left';}else{dragLoc= 'right';}var vert_scroll_offset=$("#scrolling_tracks").scrollTop();var track_top=(parseInt(element.position().top)+parseInt(vert_scroll_offset));var track_bottom=(parseInt(element.position().top)+parseInt(element.height())+parseInt(vert_scroll_offset));if(hasLockedTrack(scope, track_top, track_bottom)) resize_disabled=true;element.find('.point_icon').hide()}, stop:function(e, ui){dragging=false;if(resize_disabled){resize_disabled=false;return;}element.find('.point_icon').show() var delta_x=ui.originalSize.width-ui.size.width;var delta_time=delta_x/scope.pixelsPerSecond;new_left=scope.transition.position;new_right=(scope.transition.end-scope.transition.start);if(dragLoc== 'left'){new_left+=delta_time;if(new_left< 0) new_left=0;}else{new_right-=delta_time;}scope.$apply(function(){if(dragLoc== 'right'){scope.transition.end=new_right;}if(dragLoc== 'left'){scope.transition.position=new_left;scope.transition.end-=delta_time;}if(scope.Qt) timeline.update_transition_data(JSON.stringify(scope.transition));});dragLoc=null;}, resize:function(e, ui){if(resize_disabled){$(this).css(ui.originalPosition);$(this).width(ui.originalSize.width);return;}var delta_x=ui.originalSize.width-ui.size.width;var delta_time=Math.round(delta_x/scope.pixelsPerSecond);new_left=scope.transition.position;new_right=(scope.transition.end-scope.transition.start);if(dragLoc== 'left'){new_left+=delta_time;if(new_left< 0){ui.element.width(ui.size.width+(new_left *scope.pixelsPerSecond));ui.element.css("left", ui.position.left-(new_left *scope.pixelsPerSecond));}else{ui.element.width(ui.size.width);}}else{new_right-=delta_time;ui.element.width(ui.size.width);}},});element.hover(function(){if(!dragging){element.addClass("highlight_transition", 200,"easeInOutCubic");}}, function(){if(!dragging){element.removeClass("highlight_transition", 200,"easeInOutCubic");}});element.draggable({snap:".track", snapMode:"inner", snapTolerance:20, scroll:true, revert: 'invalid', start:function(event, ui){previous_drag_position=null;dragging=true;if(!element.hasClass('ui-selected')){var clear_selections=false;if($(".ui-selected").length > 0) clear_selections=true;var id=$(this).attr("id");if(element.hasClass('clip')){scope.SelectTransition("", clear_selections);scope.SelectClip(id, clear_selections);}else if(element.hasClass('transition')){scope.SelectClip("", clear_selections);scope.SelectTransition(id, clear_selections);}}scope.$apply(function(){});var vert_scroll_offset=$("#scrolling_tracks").scrollTop();var horz_scroll_offset=$("#scrolling_tracks").scrollLeft();track_container_height=getTrackContainerHeight();bounding_box={};$(".ui-selected").each(function(){start_transitions[$(this).attr('id')]={"top":$(this).position().top+vert_scroll_offset,"left":$(this).position().left+horz_scroll_offset};move_transitions[$(this).attr('id')]={"top":$(this).position().top+vert_scroll_offset,"left":$(this).position().left+horz_scroll_offset};setBoundingBox($(this));});if(hasLockedTrack(scope, bounding_box.top, bounding_box.bottom)) return!event;}, stop:function(event, ui){$(event.toElement).one('.transition_menu', function(e){e.stopImmediatePropagation();});scope.HideSnapline();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){previous_x=previous_drag_position.left;previous_y=previous_drag_position.top;}previous_drag_position=ui.position;var x_offset=ui.position.left-previous_x;var y_offset=ui.position.top-previous_y;results=moveBoundingBox(scope, previous_x, previous_y, x_offset, y_offset, ui.position.left, ui.position.top);x_offset=results.x_offset;y_offset=results.y_offset;ui.position.left=results.position.left;ui.position.top=results.position.top;$(".ui-selected").each(function(){var pos=$(this).position();var newY=move_transitions[$(this).attr('id')]["top"]+y_offset;var newX=move_transitions[$(this).attr('id')]["left"]+x_offset;move_transitions[$(this).attr('id')]['top']=newY;move_transitions[$(this).attr('id')]['left']=newX;$(this).css('left', newX);$(this).css('top', newY);});}, revert:function(valid){if(!valid){$(".ui-selected").each(function(){var oldY=start_transitions[$(this).attr('id')]['top'];var oldX=start_transitions[$(this).attr('id')]['left'];$(this).css('left', oldX);$(this).css('top', oldY);});}}});}};}) |
Variables | |
var | dragging = false |
var | dragLog = null |
var | move_transitions = {} |
var | out_of_bounds = false |
var | previous_drag_position = null |
var | resize_disabled = false |
var | start_transitions = {} |
var | track_container_height = -1 |
Transition directives (draggable & resizable functionality)
Copyright (c) 2008-2014 OpenShot Studios, LLC http://www.openshotstudios.com/. This file is part of OpenShot Video Editor, an open-source project dedicated to delivering high quality video editing and animation solutions to the world. For more information visit http://www.openshot.org/.
OpenShot Video Editor is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
OpenShot Video Editor is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with OpenShot Library. If not, see http://www.gnu.org/licenses/.
Definition in file transition.js.
App directive | ( | 'tlTransition' | , |
function(){return{scope:"@", link:function(scope, element, attrs){element.resizable({handles:"e, w", minWidth:1, start:function(e, ui){dragging=true;resize_disabled=false;var parentOffset=element.offset();var mouseLoc=e.pageX-parentOffset.left;if(mouseLoc< 5){dragLoc= 'left';}else{dragLoc= 'right';}var vert_scroll_offset=$("#scrolling_tracks").scrollTop();var track_top=(parseInt(element.position().top)+parseInt(vert_scroll_offset));var track_bottom=(parseInt(element.position().top)+parseInt(element.height())+parseInt(vert_scroll_offset));if(hasLockedTrack(scope, track_top, track_bottom)) resize_disabled=true;element.find('.point_icon').hide()}, stop:function(e, ui){dragging=false;if(resize_disabled){resize_disabled=false;return;}element.find('.point_icon').show() var delta_x=ui.originalSize.width-ui.size.width;var delta_time=delta_x/scope.pixelsPerSecond;new_left=scope.transition.position;new_right=(scope.transition.end-scope.transition.start);if(dragLoc== 'left'){new_left+=delta_time;if(new_left< 0) new_left=0;}else{new_right-=delta_time;}scope.$apply(function(){if(dragLoc== 'right'){scope.transition.end=new_right;}if(dragLoc== 'left'){scope.transition.position=new_left;scope.transition.end-=delta_time;}if(scope.Qt) timeline.update_transition_data(JSON.stringify(scope.transition));});dragLoc=null;}, resize:function(e, ui){if(resize_disabled){$(this).css(ui.originalPosition);$(this).width(ui.originalSize.width);return;}var delta_x=ui.originalSize.width-ui.size.width;var delta_time=Math.round(delta_x/scope.pixelsPerSecond);new_left=scope.transition.position;new_right=(scope.transition.end-scope.transition.start);if(dragLoc== 'left'){new_left+=delta_time;if(new_left< 0){ui.element.width(ui.size.width+(new_left *scope.pixelsPerSecond));ui.element.css("left", ui.position.left-(new_left *scope.pixelsPerSecond));}else{ui.element.width(ui.size.width);}}else{new_right-=delta_time;ui.element.width(ui.size.width);}},});element.hover(function(){if(!dragging){element.addClass("highlight_transition", 200,"easeInOutCubic");}}, function(){if(!dragging){element.removeClass("highlight_transition", 200,"easeInOutCubic");}});element.draggable({snap:".track", snapMode:"inner", snapTolerance:20, scroll:true, revert: 'invalid', start:function(event, ui){previous_drag_position=null;dragging=true;if(!element.hasClass('ui-selected')){var clear_selections=false;if($(".ui-selected").length > 0) clear_selections=true;var id=$(this).attr("id");if(element.hasClass('clip')){scope.SelectTransition("", clear_selections);scope.SelectClip(id, clear_selections);}else if(element.hasClass('transition')){scope.SelectClip("", clear_selections);scope.SelectTransition(id, clear_selections);}}scope.$apply(function(){});var vert_scroll_offset=$("#scrolling_tracks").scrollTop();var horz_scroll_offset=$("#scrolling_tracks").scrollLeft();track_container_height=getTrackContainerHeight();bounding_box={};$(".ui-selected").each(function(){start_transitions[$(this).attr('id')]={"top":$(this).position().top+vert_scroll_offset,"left":$(this).position().left+horz_scroll_offset};move_transitions[$(this).attr('id')]={"top":$(this).position().top+vert_scroll_offset,"left":$(this).position().left+horz_scroll_offset};setBoundingBox($(this));});if(hasLockedTrack(scope, bounding_box.top, bounding_box.bottom)) return!event;}, stop:function(event, ui){$(event.toElement).one('.transition_menu', function(e){e.stopImmediatePropagation();});scope.HideSnapline();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){previous_x=previous_drag_position.left;previous_y=previous_drag_position.top;}previous_drag_position=ui.position;var x_offset=ui.position.left-previous_x;var y_offset=ui.position.top-previous_y;results=moveBoundingBox(scope, previous_x, previous_y, x_offset, y_offset, ui.position.left, ui.position.top);x_offset=results.x_offset;y_offset=results.y_offset;ui.position.left=results.position.left;ui.position.top=results.position.top;$(".ui-selected").each(function(){var pos=$(this).position();var newY=move_transitions[$(this).attr('id')]["top"]+y_offset;var newX=move_transitions[$(this).attr('id')]["left"]+x_offset;move_transitions[$(this).attr('id')]['top']=newY;move_transitions[$(this).attr('id')]['left']=newX;$(this).css('left', newX);$(this).css('top', newY);});}, revert:function(valid){if(!valid){$(".ui-selected").each(function(){var oldY=start_transitions[$(this).attr('id')]['top'];var oldX=start_transitions[$(this).attr('id')]['left'];$(this).css('left', oldX);$(this).css('top', oldY);});}}});}};} | |||
) |
var dragging = false |
Definition at line 31 of file transition.js.
var dragLog = null |
Definition at line 43 of file transition.js.
var move_transitions = {} |
Definition at line 35 of file transition.js.
var out_of_bounds = false |
Definition at line 36 of file transition.js.
var previous_drag_position = null |
Definition at line 33 of file transition.js.
var resize_disabled = false |
Definition at line 32 of file transition.js.
var start_transitions = {} |
Definition at line 34 of file transition.js.
var track_container_height = -1 |
Definition at line 37 of file transition.js.