Replace height buffer behavior while dragging on workboards with infinite column height

Summary:
Ref T4900. The root problem is that dragging stuff near the bottom of the board can cause jittery, jumpy behaviors.

Internal scrolling has changed the nature of this problem. Previously, the height of the board itself would jump around, but it's now fixed so the height of columns jumps around instead.

We could take the same approach and add a chunk to the bottom of each column when a drag starts, but this is really distracting visually since it's obvious to the user.

Instead, treat columns as infinitely tall (so dragging beneath them still counts as dragging to the bottom position).

Test Plan:
  - View a board with a column taller than the screen (has a scrollbar).
  - Drag a card to near the bottom position.
  - Move the mouse down a little bit at a time, continuing toward the bottom of the page.
    - Before patch: at some point, UI flips out and starts rapidly adding, scrolling, and removing the ghost.
    - After patch: sensible behavior, ghost is in bottom position for all cursor locations.

Also works for dragging to the top.

(This leaves us with a little less dead space for cancelling drags, but you've still got the left menu, anything offscreen, and the escape key, which seems fine.)

Reviewers: chad

Reviewed By: chad

Maniphest Tasks: T4900

Differential Revision: https://secure.phabricator.com/D15227

resources/celerity/map.php

@@ -8,7 +8,7 @@
 return array(
   'names' => array(
     'core.pkg.css' => 'e8763436',
-    'core.pkg.js' => '17380dd3',
+    'core.pkg.js' => 'd7daa6d8',
     'darkconsole.pkg.js' => 'e7393ebb',
     'differential.pkg.css' => '2de124c9',
     'differential.pkg.js' => 'd0cd0df6',
@@ -415,8 +415,8 @@ return array(
     'rsrc/js/application/phortune/phortune-credit-card-form.js' => '2290aeef',
     'rsrc/js/application/policy/behavior-policy-control.js' => 'd0c516d5',
     'rsrc/js/application/policy/behavior-policy-rule-editor.js' => '5e9f347c',
-    'rsrc/js/application/projects/Workboard.js' => 'b38d2c73',
-    'rsrc/js/application/projects/behavior-project-boards.js' => '7f4359dd',
+    'rsrc/js/application/projects/Workboard.js' => 'fa8ab410',
+    'rsrc/js/application/projects/behavior-project-boards.js' => '7784bfc6',
     'rsrc/js/application/projects/behavior-project-create.js' => '065227cc',
     'rsrc/js/application/projects/behavior-reorder-columns.js' => 'e1d25dfb',
     'rsrc/js/application/releeph/releeph-preview-branch.js' => 'b2b4fbaf',
@@ -449,7 +449,7 @@ return array(
     'rsrc/js/application/uiexample/notification-example.js' => '8ce821c5',
     'rsrc/js/core/Busy.js' => '59a7976a',
     'rsrc/js/core/DragAndDropFileUpload.js' => '81f182b5',
-    'rsrc/js/core/DraggableList.js' => '705df8d1',
+    'rsrc/js/core/DraggableList.js' => '5a13c79f',
     'rsrc/js/core/FileUpload.js' => '680ea2c8',
     'rsrc/js/core/Hovercard.js' => '1bd28176',
     'rsrc/js/core/KeyboardShortcut.js' => '1ae869f2',
@@ -656,7 +656,7 @@ return array(
     'javelin-behavior-phui-profile-menu' => '12884df9',
     'javelin-behavior-policy-control' => 'd0c516d5',
     'javelin-behavior-policy-rule-editor' => '5e9f347c',
-    'javelin-behavior-project-boards' => '7f4359dd',
+    'javelin-behavior-project-boards' => '7784bfc6',
     'javelin-behavior-project-create' => '065227cc',
     'javelin-behavior-quicksand-blacklist' => '7927a7d3',
     'javelin-behavior-recurring-edit' => '5f1c4d5f',
@@ -723,7 +723,7 @@ return array(
     'javelin-view-renderer' => '6c2b09a2',
     'javelin-view-visitor' => 'efe49472',
     'javelin-websocket' => 'e292eaf4',
-    'javelin-workboard' => 'b38d2c73',
+    'javelin-workboard' => 'fa8ab410',
     'javelin-workflow' => '5b2e3e2b',
     'lightbox-attachment-css' => '7acac05d',
     'maniphest-batch-editor' => 'b0f0b6d5',
@@ -745,7 +745,7 @@ return array(
     'phabricator-countdown-css' => 'e7544472',
     'phabricator-dashboard-css' => 'eb458607',
     'phabricator-drag-and-drop-file-upload' => '81f182b5',
-    'phabricator-draggable-list' => '705df8d1',
+    'phabricator-draggable-list' => '5a13c79f',
     'phabricator-fatal-config-template-css' => '8e6c6fcd',
     'phabricator-feed-css' => 'ecd4ec57',
     'phabricator-file-upload' => '680ea2c8',
@@ -1255,6 +1255,14 @@ return array(
       'javelin-dom',
       'javelin-stratcom',
     ),
+    '5a13c79f' => array(
+      'javelin-install',
+      'javelin-dom',
+      'javelin-stratcom',
+      'javelin-util',
+      'javelin-vector',
+      'javelin-magical-init',
+    ),
     '5b2e3e2b' => array(
       'javelin-stratcom',
       'javelin-request',
@@ -1356,14 +1364,6 @@ return array(
       'javelin-typeahead',
       'javelin-uri',
     ),
-    '705df8d1' => array(
-      'javelin-install',
-      'javelin-dom',
-      'javelin-stratcom',
-      'javelin-util',
-      'javelin-vector',
-      'javelin-magical-init',
-    ),
     '70baed2f' => array(
       'javelin-install',
       'javelin-dom',
@@ -1407,6 +1407,17 @@ return array(
       'javelin-reactor',
       'javelin-util',
     ),
+    '7784bfc6' => array(
+      'javelin-behavior',
+      'javelin-dom',
+      'javelin-util',
+      'javelin-vector',
+      'javelin-stratcom',
+      'javelin-workflow',
+      'phabricator-draggable-list',
+      'phabricator-drag-and-drop-file-upload',
+      'javelin-workboard',
+    ),
     '782ab6e7' => array(
       'javelin-behavior',
       'javelin-dom',
@@ -1446,17 +1457,6 @@ return array(
       'javelin-behavior',
       'javelin-history',
     ),
-    '7f4359dd' => array(
-      'javelin-behavior',
-      'javelin-dom',
-      'javelin-util',
-      'javelin-vector',
-      'javelin-stratcom',
-      'javelin-workflow',
-      'phabricator-draggable-list',
-      'phabricator-drag-and-drop-file-upload',
-      'javelin-workboard',
-    ),
     '805b806a' => array(
       'javelin-magical-init',
       'javelin-install',
@@ -1717,16 +1717,6 @@ return array(
       'javelin-uri',
       'javelin-request',
     ),
-    'b38d2c73' => array(
-      'javelin-install',
-      'javelin-dom',
-      'javelin-util',
-      'javelin-vector',
-      'javelin-stratcom',
-      'javelin-workflow',
-      'phabricator-draggable-list',
-      'phabricator-drag-and-drop-file-upload',
-    ),
     'b3a4b884' => array(
       'javelin-behavior',
       'phabricator-prefab',
@@ -2088,6 +2078,16 @@ return array(
       'javelin-vector',
       'javelin-magical-init',
     ),
+    'fa8ab410' => array(
+      'javelin-install',
+      'javelin-dom',
+      'javelin-util',
+      'javelin-vector',
+      'javelin-stratcom',
+      'javelin-workflow',
+      'phabricator-draggable-list',
+      'phabricator-drag-and-drop-file-upload',
+    ),
     'fb20ac8d' => array(
       'javelin-behavior',
       'javelin-aphlict',

webroot/rsrc/js/application/projects/Workboard.js

@@ -140,7 +140,8 @@ JX.install('Workboard', {
         var list = new JX.DraggableList('project-card', column)
           .setOuterContainer(board_node)
           .setFindItemsHandler(JX.bind(this, this._findCardsInColumn, column))
-          .setCanDragX(true);
+          .setCanDragX(true)
+          .setHasInfiniteHeight(true);
 
         // TODO: Restore these behaviors.
         // list.listen('didSend', JX.bind(list, onupdate, cols[ii]));
@@ -149,10 +150,6 @@ JX.install('Workboard', {
 
         list.listen('didDrop', JX.bind(this, this._onmovecard, list));
 
-        // TODO: Restore these behaviors.
-        // list.listen('didBeginDrag', JX.bind(null, onbegindrag));
-        // list.listen('didEndDrag', JX.bind(null, onenddrag));
-
         lists.push(list);
       }
 

webroot/rsrc/js/application/projects/behavior-project-boards.js

@@ -79,41 +79,6 @@ JX.behavior('project-boards', function(config, statics) {
     return 0;
   }
 
-  function getcontainer() {
-    return JX.DOM.find(
-      JX.$(statics.boardID),
-      'div',
-      'aphront-multi-column-view');
-  }
-
-  function onbegindrag(item) {
-    // If the longest column on the board is taller than the window, the board
-    // will scroll vertically. Dragging an item to the longest column may
-    // make it longer, by the total height of the board, plus the height of
-    // the drop target.
-
-    // If this happens, the scrollbar will jump around and the scroll position
-    // can be adjusted in a disorienting way. To reproduce this, drag a task
-    // to the bottom of the longest column on a scrolling board and wave the
-    // task in and out of the column. The scroll bar will jump around and
-    // it will be hard to lock onto a target.
-
-    // To fix this, set the minimum board height to the current board height
-    // plus the size of the drop target (which is the size of the item plus
-    // a bit of margin). This makes sure the scroll bar never needs to
-    // recalculate.
-
-    var item_size = JX.Vector.getDim(item);
-    var container = getcontainer();
-    var container_size = JX.Vector.getDim(container);
-
-    container.style.minHeight = (item_size.y + container_size.y + 12) + 'px';
-  }
-
-  function onenddrag() {
-    getcontainer().style.minHeight = '';
-  }
-
   function onedit(column, r) {
     var new_card = JX.$H(r.tasks).getNode();
     var new_data = JX.Stratcom.getData(new_card);

webroot/rsrc/js/core/DraggableList.js

@@ -40,7 +40,8 @@ JX.install('DraggableList', {
   properties : {
     findItemsHandler: null,
     canDragX: false,
-    outerContainer: null
+    outerContainer: null,
+    hasInfiniteHeight: false
   },
 
   members : {
@@ -286,6 +287,7 @@ JX.install('DraggableList', {
 
     _getTargetList : function(p) {
       var target_list;
+      var infinity;
       if (this._hasGroup()) {
         var group = this._group;
         for (var ii = 0; ii < group.length; ii++) {
@@ -293,6 +295,15 @@ JX.install('DraggableList', {
           var rp = JX.$V(root);
           var rd = JX.Vector.getDim(root);
 
+          if (group[ii].getHasInfiniteHeight()) {
+            // The math doesn't work out quite right if we actually use
+            // Math.Infinity, so approximate infinity as the document height.
+            infinity = infinity || JX.Vector.getDocument().y;
+
+            rp.y = 0;
+            rd.y = infinity;
+          }
+
           var is_target = false;
           if (p.x >= rp.x && p.y >= rp.y) {
             if (p.x <= (rp.x + rd.x) && p.y <= (rp.y + rd.y)) {