Consider valid candidates with overlap

README.md

@@ -40,6 +40,12 @@ following CSS selectors:
 
 Any potential candidate with the `lrud-ignore` class, or inside any parent with the `lrud-ignore` class, will not be considered focusable and will be skipped over. By default LRUD will not ignore candidates that have `opacity: 0` or have a parent with `opacity: 0`, so this class can be used for that.
 
+### Focusable Overlap
+
+By default, LRUD will measure to all candidates that are in the direction to move. It will also include candidates that overlap the current focus by up to 30%, allowing for e.g. a 'right' movement to include something that is above the current focus, but has half of it's size expanding to the right.
+
+This threshold can be adjusted on a per-element basis with the `data-lrud-allowed-overlap` attribute, as a float from 0.0 to 1.0. An overlap of 0.0 will make a candidate only be considered if it is located _entirely_ in the direction of movement.
+
 ## Containers
 
 Focusables can be wrapped in containers. Containers can keep track of the last

lib/lrud.js

@@ -214,28 +214,29 @@ const getBlockedExitDirs = (container, candidateContainer) => {
 };
 
 /**
- * Return early if candidate is in the wrong direction
+ * Check if the candidate is in the `exitDir` direction from the rect we're leaving,
+ * with an overlap allowance of entryWeighting as a percentage of the candidate's width.
  *
  * @param {Object} entryRect An object representing the rectangle of the item we're moving to
  * @param {String} exitDir The direction we're moving in
- * @param {Object} exitPoint The first point of the item we're leaving
+ * @param {Object} exitPoint The midpoint of the edge we're leaving
+ * @param {Float} entryWeighting Percentage of the candidate that is allowed to be behind the target
  * @return {Booelan} true if candidate is in the correct dir, false if not
  */
-const isValidCandidate = (entryRect, exitDir, exitPoint) => {
+const isValidCandidate = (entryRect, exitDir, exitPoint, entryWeighting) => {
   if (entryRect.width === 0 && entryRect.height === 0) return false;
+  if (!entryWeighting && entryWeighting != 0) entryWeighting = 0.3;
 
-  const corners = [
-    { x: entryRect.left, y: entryRect.top },
-    { x: entryRect.right, y: entryRect.top },
-    { x: entryRect.right, y: entryRect.bottom },
-    { x: entryRect.left, y: entryRect.bottom }
-  ];
+  const weightedEntryPoint = {
+    x: entryRect.x + (entryRect.width * (exitDir === 'left' ? 1 - entryWeighting : exitDir === 'right' ? entryWeighting : 0.5)),
+    y: entryRect.y + (entryRect.height * (exitDir === 'up' ? 1 - entryWeighting : exitDir === 'down' ? entryWeighting : 0.5))
+  };
 
   if (
-    exitDir === 'left' && corners.some((corner) => isRight(exitPoint, corner)) ||
-    exitDir === 'right' && corners.some((corner) => isRight(corner, exitPoint)) ||
-    exitDir === 'up' && corners.some((corner) => isBelow(exitPoint, corner)) ||
-    exitDir === 'down' && corners.some((corner) => isBelow(corner, exitPoint))
+    exitDir === 'left' && isRight(exitPoint, weightedEntryPoint) ||
+    exitDir === 'right' && isRight(weightedEntryPoint, exitPoint) ||
+    exitDir === 'up' && isBelow(exitPoint, weightedEntryPoint) ||
+    exitDir === 'down' && isBelow(weightedEntryPoint, exitPoint)
   ) return true;
 
   return false;
@@ -252,7 +253,8 @@ const getBestCandidate = (elem, candidates, exitDir) => {
     const entryRect = candidate.getBoundingClientRect();
 
     // Bail if the candidate is in the opposite direction or has no dimensions
-    if (!isValidCandidate(entryRect, exitDir, exitPoint)) continue;
+    const allowedOverlap = parseFloat(candidate.getAttribute('data-lrud-allowed-overlap'));
+    if (!isValidCandidate(entryRect, exitDir, exitPoint, allowedOverlap)) continue;
 
     const nearestPoint = getNearestPoint(exitPoint, exitDir, entryRect);
     const distance = getDistanceBetweenPoints(exitPoint, nearestPoint);

package.json

@@ -11,7 +11,9 @@
     "build": "rm -f lib/lrud.min.js && babel lib --out-file lib/lrud.min.js",
     "server": "node ./test/server.js",
     "lint": "eslint .",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "preversion": "npm test",
+    "postversion": "git push origin master --tags --no-verify"
   },
   "repository": {
     "type": "git",

test/lrud.test.js

@@ -492,12 +492,44 @@ describe('LRUD spatial', () => {
       await page.keyboard.press('ArrowDown');
       expect(await page.evaluate(() => document.activeElement.id)).toEqual('item-11');
     });
+  });
+
+  describe('Candidate overlap', () => {
+    beforeEach(async () => {
+      await page.goto(`${testPath}/tiled-items.html`);
+      await page.waitForFunction('document.activeElement');
+    });
 
-    it('should consider items in the direction you want to move even if some of that items area is in the opposite direction', async () => {
+    it('should consider items in the direction you want to move if they are fully in that direction with no overlap', async () => {
+      await page.evaluate(() => document.getElementById('item-36').focus());
+      await page.keyboard.press('ArrowRight');
+      expect(await page.evaluate(() => document.activeElement.id)).toEqual('item-44');
+    });
+
+    it('should consider items in the direction you want to move if they overlap by up to 30%', async () => {
       await page.evaluate(() => document.getElementById('item-22').focus());
       await page.keyboard.press('ArrowRight');
       expect(await page.evaluate(() => document.activeElement.id)).toEqual('item-15');
     });
+
+    it('should not consider items in the direction you want to move if they overlap by more than 30%', async () => {
+      await page.evaluate(() => document.getElementById('item-29').focus());
+      await page.keyboard.press('ArrowRight');
+      expect(await page.evaluate(() => document.activeElement.id)).not.toEqual('item-15');
+      expect(await page.evaluate(() => document.activeElement.id)).toEqual('item-8');
+    });
+
+    it('should consider items with a customised overlap value', async () => {
+      await page.evaluate(() => document.getElementById('item-44').setAttribute('data-lrud-allowed-overlap', 0.6));
+      await page.evaluate(() => document.getElementById('item-29').focus());
+      await page.keyboard.press('ArrowRight');
+      expect(await page.evaluate(() => document.activeElement.id)).toEqual('item-44');
+
+      await page.evaluate(() => document.getElementById('item-15').setAttribute('data-lrud-allowed-overlap', 0));
+      await page.evaluate(() => document.getElementById('item-22').focus());
+      await page.keyboard.press('ArrowRight');
+      expect(await page.evaluate(() => document.activeElement.id)).toEqual('item-8');
+    });
   });
 
   describe('Scope', () => {

test/template.html

@@ -31,7 +31,7 @@
         };
         const distance = ([a, b]) => Math.sqrt(Math.pow(a.x - b.x, 2) + Math.pow(a.y - b.y, 2))
         window.drawLines = () => {
-            ctx.clearRect(0, 0, canvas.width, canvas.height)
+            window.clear()
             lines.sort((a, b) => distance(a) - distance(b))
             if(!lines) return
             const bestLine = lines.shift()
@@ -42,6 +42,16 @@
         window.addLine = (pointA, pointB) => {
             lines.push([pointA, pointB])
         }
+        window.drawDot = (point, colour = 'red') => {
+            if(!document.getElementById('lines').checked) return
+            ctx.beginPath();
+            ctx.arc(point.x, point.y, 3, 0, 2 * Math.PI, false);
+            ctx.fillStyle = colour;
+            ctx.fill();
+        }
+        window.clear = () => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height)
+        }
     </script>
 </body>
 </html>