Remove Droppable Track from Angular timeline code. Replace with static function called on Draggable End (to update UI data). Allows for clips to be dragged to edge of timeline without resetting back to original positions. Also fixed a race condition (on Web Engine) that caused a ng-click to happen after a drag (randomly) clearing selections.

Author: jonoomph

src/timeline/index.html

@@ -26,7 +26,6 @@
         <script type="text/javascript" src="js/controllers.js"></script>
         <script type="text/javascript" src="js/directives/ruler.js"></script>
         <script type="text/javascript" src="js/directives/playhead.js"></script>
-        <script type="text/javascript" src="js/directives/track.js"></script>
         <script type="text/javascript" src="js/directives/clip.js"></script>
         <script type="text/javascript" src="js/directives/transition.js"></script>
         <script type="text/javascript" src="js/directives/misc.js"></script>
@@ -78,7 +77,7 @@
 		</div>
 		<!-- TRACKS CONTAINER (right of screen) -->
 		<div tl-scrollable-tracks id="scrolling_tracks">
-			<div id="track-container" tl-track tl-multi-selectable style="width: {{getTimelineWidth(0) - 6}}px; padding-bottom: 2px;">
+			<div id="track-container" tl-multi-selectable style="width: {{getTimelineWidth(0) - 6}}px; padding-bottom: 2px;">
 				<!-- TRACKS -->
 				<div ng-repeat="layer in project.layers.slice().reverse()" id="track_{{layer.number}}" ng-right-click="showTimelineMenu($event, layer.number)"  class="{{getTrackStyle(layer.lock)}}" style="width:{{getTimelineWidth(0) - 6}}px;">
 					<div class="banding-overlay"></div>

src/timeline/js/controllers.js

@@ -400,12 +400,6 @@ App.controller("TimelineCtrl", function ($scope) {
   $scope.setSnappingMode = function (enable_snapping) {
     $scope.$apply(function () {
       $scope.enable_snapping = enable_snapping;
-      if (enable_snapping) {
-        $(".droppable").draggable("option", "snapTolerance", 20);
-      }
-      else {
-        $(".droppable").draggable("option", "snapTolerance", 0);
-      }
     });
   };
 
@@ -580,6 +574,11 @@ App.controller("TimelineCtrl", function ($scope) {
 
   // Select item (either clip or transition)
   $scope.selectItem = function (item_id, item_type, clear_selections, event, force_ripple) {
+    if ($scope.dragging) {
+      timeline.qt_log("DEBUG", "Skip selection due to dragging...");
+      return;
+    }
+
     // Trim item_id
     var id = item_id.replace(`${item_type}_`, "");
 

src/timeline/js/directives/clip.js

@@ -27,7 +27,7 @@
  */
 
 
-/*global setSelections, setBoundingBox, moveBoundingBox, bounding_box, drawAudio */
+/*global setSelections, setBoundingBox, moveBoundingBox, bounding_box, drawAudio, updateDraggables */
 // Init variables
 var dragging = false;
 var resize_disabled = false;
@@ -323,9 +323,11 @@ App.directive("tlClip", function ($timeout) {
           // Hide snapline (if any)
           scope.hideSnapline();
 
+          // Call the shared function for drag stop
+          updateDraggables(scope, ui, 'clip');
+
           // Clear previous drag position
           previous_drag_position = null;
-          scope.setDragging(false);
         },
         drag: function (e, ui) {
           // Retrieve the initial cursor offset
@@ -368,18 +370,6 @@ App.directive("tlClip", function ($timeout) {
               $(this).css("top", newY);
             }
           });
-        },
-        revert: function (valid) {
-          if (!valid) {
-            //the drop spot was invalid, so we're going to move all clips to their original position
-            $(".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);
-            });
-          }
         }
       });
     }

src/timeline/js/directives/track.js

@@ -27,7 +27,7 @@
  */
 
 
-/*global setSelections, setBoundingBox, moveBoundingBox, bounding_box */
+/*global setSelections, setBoundingBox, moveBoundingBox, bounding_box, updateDraggables */
 // Init Variables
 var resize_disabled = false;
 var previous_drag_position = null;
@@ -266,10 +266,11 @@ App.directive("tlTransition", function () {
           // Hide snapline (if any)
           scope.hideSnapline();
 
+          // Call the shared function for drag stop
+          updateDraggables(scope, ui, 'transition');
+
           // Clear previous drag position
           previous_drag_position = null;
-          scope.setDragging(false);
-
         },
         drag: function (e, ui) {
           // Retrieve the initial cursor offset
@@ -313,18 +314,6 @@ App.directive("tlTransition", function () {
             }
           });
 
-        },
-        revert: function (valid) {
-          if (!valid) {
-            // The drop spot was invalid, so we're going to move all transitions to their original position
-            $(".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);
-            });
-          }
         }
       });