OpenShot Video Editor
2.0.0
|
Clip directives (draggable & resizable functionality) More...
Go to the source code of this file.
Functions | |
App | directive ('tlClip', function($timeout){return{scope:"@", link:function(scope, element, attrs){element.resizable({handles:"e, w", minWidth:1, maxWidth:scope.clip.length *scope.pixelsPerSecond, start:function(e, ui){dragging=true;var parentOffset=element.offset();var mouseLoc=e.pageX-parentOffset.left;if(mouseLoc< 5){dragLoc= 'left';}else{dragLoc= 'right';}if(hasLockedTrack(scope, e.pageY, e.pageY)) return!event;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').fadeOut('fast');element.find('.audio-container').fadeOut('fast');}, stop:function(e, ui){dragging=false;if(resize_disabled){resize_disabled=false;return;}if(dragLoc== 'right'){element.find('.point_icon').show();element.find('.audio-container').show();}var delta_x=ui.originalSize.width-ui.size.width;var delta_time=delta_x/scope.pixelsPerSecond;new_position=scope.clip.position;new_left=scope.clip.start;new_right=scope.clip.end;if(dragLoc== 'left'){new_left+=delta_time;if(new_left< 0){new_left=0.0;new_position-=scope.clip.start}else{new_position+=delta_time}}else{new_right-=delta_time;if(new_right > scope.clip.duration) new_right=scope.clip.duration;}scope.$apply(function(){if(scope.clip.end!=new_right){scope.clip.end=new_right;}if(scope.clip.start!=new_left){scope.clip.start=new_left;scope.clip.position=new_position;}scope.ResizeTimeline();if(scope.Qt) timeline.update_clip_data(JSON.stringify(scope.clip));});if(scope.clip.show_audio){element.find(".audio-container").show();drawAudio(scope, scope.clip.id);}dragLoc=null;}, resize:function(e, ui){if(resize_disabled){$(this).css(ui.originalPosition);$(this).width(ui.originalSize.width);return;}var delta_x=parseFloat(ui.originalSize.width)-ui.size.width;var delta_time=delta_x/scope.pixelsPerSecond;new_left=scope.clip.start;new_right=scope.clip.end;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;if(new_right > scope.clip.duration){new_right=scope.clip.duration-new_right;ui.element.width(ui.size.width+(new_right *scope.pixelsPerSecond));new_right=scope.clip.duration;}else{ui.element.width(ui.size.width);}}if(dragLoc== 'left'){scope.PreviewClipFrame(scope.clip.id, new_left);}else{scope.PreviewClipFrame(scope.clip.id, new_right);}},});element.hover(function(){if(!dragging){element.addClass("highlight_clip", 200,"easeInOutCubic");}}, function(){if(!dragging){element.removeClass("highlight_clip", 200,"easeInOutCubic");}});element.draggable({snap:".track", snapMode:"inner", snapTolerance:20, scroll:true, cancel: '.effect-container', 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_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};setBoundingBox($(this));});if(hasLockedTrack(scope, bounding_box.top, bounding_box.bottom)) return!event;}, stop:function(event, ui){$(event.toElement).one('.clip_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 newY=move_clips[$(this).attr('id')]["top"]+y_offset;var newX=move_clips[$(this).attr('id')]["left"]+x_offset;move_clips[$(this).attr('id')]['top']=newY;move_clips[$(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_clips[$(this).attr('id')]['top'];var oldX=start_clips[$(this).attr('id')]['left'];$(this).css('left', oldX);$(this).css('top', oldY);});}}});}};}) |
Variables | |
var | dragging = false |
var | dragLog = null |
var | move_clips = {} |
var | out_of_bounds = false |
var | previous_drag_position = null |
var | resize_disabled = false |
var | start_clips = {} |
var | track_container_height = -1 |
Clip 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 clip.js.
App directive | ( | 'tlClip' | , |
function($timeout){return{scope:"@", link:function(scope, element, attrs){element.resizable({handles:"e, w", minWidth:1, maxWidth:scope.clip.length *scope.pixelsPerSecond, start:function(e, ui){dragging=true;var parentOffset=element.offset();var mouseLoc=e.pageX-parentOffset.left;if(mouseLoc< 5){dragLoc= 'left';}else{dragLoc= 'right';}if(hasLockedTrack(scope, e.pageY, e.pageY)) return!event;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').fadeOut('fast');element.find('.audio-container').fadeOut('fast');}, stop:function(e, ui){dragging=false;if(resize_disabled){resize_disabled=false;return;}if(dragLoc== 'right'){element.find('.point_icon').show();element.find('.audio-container').show();}var delta_x=ui.originalSize.width-ui.size.width;var delta_time=delta_x/scope.pixelsPerSecond;new_position=scope.clip.position;new_left=scope.clip.start;new_right=scope.clip.end;if(dragLoc== 'left'){new_left+=delta_time;if(new_left< 0){new_left=0.0;new_position-=scope.clip.start}else{new_position+=delta_time}}else{new_right-=delta_time;if(new_right > scope.clip.duration) new_right=scope.clip.duration;}scope.$apply(function(){if(scope.clip.end!=new_right){scope.clip.end=new_right;}if(scope.clip.start!=new_left){scope.clip.start=new_left;scope.clip.position=new_position;}scope.ResizeTimeline();if(scope.Qt) timeline.update_clip_data(JSON.stringify(scope.clip));});if(scope.clip.show_audio){element.find(".audio-container").show();drawAudio(scope, scope.clip.id);}dragLoc=null;}, resize:function(e, ui){if(resize_disabled){$(this).css(ui.originalPosition);$(this).width(ui.originalSize.width);return;}var delta_x=parseFloat(ui.originalSize.width)-ui.size.width;var delta_time=delta_x/scope.pixelsPerSecond;new_left=scope.clip.start;new_right=scope.clip.end;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;if(new_right > scope.clip.duration){new_right=scope.clip.duration-new_right;ui.element.width(ui.size.width+(new_right *scope.pixelsPerSecond));new_right=scope.clip.duration;}else{ui.element.width(ui.size.width);}}if(dragLoc== 'left'){scope.PreviewClipFrame(scope.clip.id, new_left);}else{scope.PreviewClipFrame(scope.clip.id, new_right);}},});element.hover(function(){if(!dragging){element.addClass("highlight_clip", 200,"easeInOutCubic");}}, function(){if(!dragging){element.removeClass("highlight_clip", 200,"easeInOutCubic");}});element.draggable({snap:".track", snapMode:"inner", snapTolerance:20, scroll:true, cancel: '.effect-container', 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_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};setBoundingBox($(this));});if(hasLockedTrack(scope, bounding_box.top, bounding_box.bottom)) return!event;}, stop:function(event, ui){$(event.toElement).one('.clip_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 newY=move_clips[$(this).attr('id')]["top"]+y_offset;var newX=move_clips[$(this).attr('id')]["left"]+x_offset;move_clips[$(this).attr('id')]['top']=newY;move_clips[$(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_clips[$(this).attr('id')]['top'];var oldX=start_clips[$(this).attr('id')]['left'];$(this).css('left', oldX);$(this).css('top', oldY);});}}});}};} | |||
) |