@atlaskit/drag-and-drop-hitbox - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

CHANGELOG.md

 # @atlaskit/drag-and-drop-hitbox
 
+## 0.6.0
+
+### Minor Changes
+
+- [`179d953be18`](https://bitbucket.org/atlassian/atlassian-frontend/commits/179d953be18) - [ux] Tweaking the hitbox of "expanded" tree items to improve the experience when expanding tree items during a drag. Note: our tree item hitbox is still _experimental_
+
 ## 0.5.0
@@ -4,0 +10,0 @@

dist/cjs/experimental/tree-item.js

@@ -22,7 +22,5 @@ "use strict";
 }
-function reorderAndMakeChildArea(_ref) {
+function standardHitbox(_ref) {
   var client = _ref.client,
-    borderBox = _ref.borderBox,
-    indentPerLevel = _ref.indentPerLevel,
-    currentLevel = _ref.currentLevel;
+    borderBox = _ref.borderBox;
   var quarterOfHeight = borderBox.height / 4;
@@ -33,7 +31,3 @@
   if (client.y <= borderBox.top + quarterOfHeight) {
-    return {
-      type: 'reorder-above',
-      indentPerLevel: indentPerLevel,
-      currentLevel: currentLevel
-    };
+    return 'reorder-above';
   }
@@ -43,13 +37,5 @@ // In the bottom 1/4: reorder-below
   if (client.y >= borderBox.bottom - quarterOfHeight) {
-    return {
-      type: 'reorder-below',
-      indentPerLevel: indentPerLevel,
-      currentLevel: currentLevel
-    };
+    return 'reorder-below';
   }
-  return {
-    type: 'make-child',
-    indentPerLevel: indentPerLevel,
-    currentLevel: currentLevel
-  };
+  return 'make-child';
 }
@@ -68,22 +54,24 @@ function getInstruction(_ref2) {
   if (mode === 'standard') {
-    return reorderAndMakeChildArea({
+    var type = standardHitbox({
       borderBox: borderBox,
-      client: client,
+      client: client
+    });
+    return {
+      type: type,
       indentPerLevel: indentPerLevel,
       currentLevel: currentLevel
-    });
+    };
   }
   var center = getCenter(borderBox);
   if (mode === 'expanded') {
-    // Note: We are giving a slight preference to actions were the user is moving something down in the tree
-    // So 'on the line' in this case will cause a 'make-child' action
-    if (client.y < center.y) {
-      return {
-        type: 'reorder-above',
-        indentPerLevel: indentPerLevel,
-        currentLevel: currentLevel
-      };
-    }
+    // leveraging "standard" hitbox to ensure that the 'reorder-above' hit zone is
+    // exactly the same for "standard" and "expanded" items
+    var _type = standardHitbox({
+      borderBox: borderBox,
+      client: client
+    });
     return {
-      type: 'make-child',
+      // Use the "standard" hitbox for "reorder above",
+      // The rest of the item is "make-child"
+      type: _type === 'reorder-above' ? _type : 'make-child',
       indentPerLevel: indentPerLevel,
@@ -93,2 +81,5 @@ currentLevel: currentLevel
   }
+
+  // `mode` is "last-in-group"
+
   var visibleInset = indentPerLevel * currentLevel;
@@ -122,8 +113,10 @@
   // On the visible item
-  return reorderAndMakeChildArea({
-    borderBox: borderBox,
-    client: client,
+  return {
+    type: standardHitbox({
+      borderBox: borderBox,
+      client: client
+    }),
     indentPerLevel: indentPerLevel,
     currentLevel: currentLevel
-  });
+  };
 }
@@ -130,0 +123,0 @@ function applyInstructionBlock(_ref3) {

dist/cjs/version.json

 {
 	"name": "@atlaskit/drag-and-drop-hitbox",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"sideEffects": false
 }

dist/es2019/experimental/tree-item.js

@@ -9,7 +9,5 @@ // using a symbol so we can guarantee a key with a unique value
 }
-function reorderAndMakeChildArea({
+function standardHitbox({
   client,
-  borderBox,
-  indentPerLevel,
-  currentLevel
+  borderBox
 }) {
@@ -21,7 +19,3 @@ const quarterOfHeight = borderBox.height / 4;
   if (client.y <= borderBox.top + quarterOfHeight) {
-    return {
-      type: 'reorder-above',
-      indentPerLevel,
-      currentLevel
-    };
+    return 'reorder-above';
   }
@@ -31,13 +25,5 @@ // In the bottom 1/4: reorder-below
   if (client.y >= borderBox.bottom - quarterOfHeight) {
-    return {
-      type: 'reorder-below',
-      indentPerLevel,
-      currentLevel
-    };
+    return 'reorder-below';
   }
-  return {
-    type: 'make-child',
-    indentPerLevel,
-    currentLevel
-  };
+  return 'make-child';
 }
@@ -57,22 +43,24 @@ function getInstruction({
   if (mode === 'standard') {
-    return reorderAndMakeChildArea({
+    const type = standardHitbox({
       borderBox,
-      client,
+      client
+    });
+    return {
+      type,
       indentPerLevel,
       currentLevel
-    });
+    };
   }
   const center = getCenter(borderBox);
   if (mode === 'expanded') {
-    // Note: We are giving a slight preference to actions were the user is moving something down in the tree
-    // So 'on the line' in this case will cause a 'make-child' action
-    if (client.y < center.y) {
-      return {
-        type: 'reorder-above',
-        indentPerLevel,
-        currentLevel
-      };
-    }
+    // leveraging "standard" hitbox to ensure that the 'reorder-above' hit zone is
+    // exactly the same for "standard" and "expanded" items
+    const type = standardHitbox({
+      borderBox,
+      client
+    });
     return {
-      type: 'make-child',
+      // Use the "standard" hitbox for "reorder above",
+      // The rest of the item is "make-child"
+      type: type === 'reorder-above' ? type : 'make-child',
       indentPerLevel,
@@ -82,2 +70,5 @@ currentLevel
   }
+
+  // `mode` is "last-in-group"
+
   const visibleInset = indentPerLevel * currentLevel;
@@ -111,8 +102,10 @@
   // On the visible item
-  return reorderAndMakeChildArea({
-    borderBox,
-    client,
+  return {
+    type: standardHitbox({
+      borderBox,
+      client
+    }),
     indentPerLevel,
     currentLevel
-  });
+  };
 }
@@ -119,0 +112,0 @@ function applyInstructionBlock({

dist/es2019/version.json

 {
 	"name": "@atlaskit/drag-and-drop-hitbox",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"sideEffects": false
 }

dist/esm/experimental/tree-item.js

@@ -14,7 +14,5 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 }
-function reorderAndMakeChildArea(_ref) {
+function standardHitbox(_ref) {
   var client = _ref.client,
-    borderBox = _ref.borderBox,
-    indentPerLevel = _ref.indentPerLevel,
-    currentLevel = _ref.currentLevel;
+    borderBox = _ref.borderBox;
   var quarterOfHeight = borderBox.height / 4;
@@ -25,7 +23,3 @@
   if (client.y <= borderBox.top + quarterOfHeight) {
-    return {
-      type: 'reorder-above',
-      indentPerLevel: indentPerLevel,
-      currentLevel: currentLevel
-    };
+    return 'reorder-above';
   }
@@ -35,13 +29,5 @@ // In the bottom 1/4: reorder-below
   if (client.y >= borderBox.bottom - quarterOfHeight) {
-    return {
-      type: 'reorder-below',
-      indentPerLevel: indentPerLevel,
-      currentLevel: currentLevel
-    };
+    return 'reorder-below';
   }
-  return {
-    type: 'make-child',
-    indentPerLevel: indentPerLevel,
-    currentLevel: currentLevel
-  };
+  return 'make-child';
 }
@@ -60,22 +46,24 @@ function getInstruction(_ref2) {
   if (mode === 'standard') {
-    return reorderAndMakeChildArea({
+    var type = standardHitbox({
       borderBox: borderBox,
-      client: client,
+      client: client
+    });
+    return {
+      type: type,
       indentPerLevel: indentPerLevel,
       currentLevel: currentLevel
-    });
+    };
   }
   var center = getCenter(borderBox);
   if (mode === 'expanded') {
-    // Note: We are giving a slight preference to actions were the user is moving something down in the tree
-    // So 'on the line' in this case will cause a 'make-child' action
-    if (client.y < center.y) {
-      return {
-        type: 'reorder-above',
-        indentPerLevel: indentPerLevel,
-        currentLevel: currentLevel
-      };
-    }
+    // leveraging "standard" hitbox to ensure that the 'reorder-above' hit zone is
+    // exactly the same for "standard" and "expanded" items
+    var _type = standardHitbox({
+      borderBox: borderBox,
+      client: client
+    });
     return {
-      type: 'make-child',
+      // Use the "standard" hitbox for "reorder above",
+      // The rest of the item is "make-child"
+      type: _type === 'reorder-above' ? _type : 'make-child',
       indentPerLevel: indentPerLevel,
@@ -85,2 +73,5 @@ currentLevel: currentLevel
   }
+
+  // `mode` is "last-in-group"
+
   var visibleInset = indentPerLevel * currentLevel;
@@ -114,8 +105,10 @@
   // On the visible item
-  return reorderAndMakeChildArea({
-    borderBox: borderBox,
-    client: client,
+  return {
+    type: standardHitbox({
+      borderBox: borderBox,
+      client: client
+    }),
     indentPerLevel: indentPerLevel,
     currentLevel: currentLevel
-  });
+  };
 }
@@ -122,0 +115,0 @@ function applyInstructionBlock(_ref3) {

dist/esm/version.json

 {
 	"name": "@atlaskit/drag-and-drop-hitbox",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/drag-and-drop-hitbox",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "An addon for `@atlaskit/drag-and-drop` with helpers for attaching interaction information to a drop target when it is being dragged over",
@@ -5,0 +5,0 @@ "author": "Atlassian Pty Ltd",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

44788

decreased by-0.73%

Lines of code

816

decreased by-3.2%

No dependency changes