Fix simpleDiff and tweak spatial navigation algorithms

Author: WillsonHaw

.changeset/mean-bananas-lick.md

@@ -0,0 +1,5 @@
+---
+"@plexinc/react-lightning": patch
+---
+
+Fix simpleDiff to not error on nullish objects

.changeset/stupid-ideas-smell.md

@@ -0,0 +1,5 @@
+---
+"@plexinc/react-lightning": patch
+---
+
+Tweak focus logic to match W3C spatial navigation spec

packages/react-lightning/src/utils/findClosestElement.spec.ts

@@ -1,7 +1,7 @@
 import { describe, expect, it, suite } from 'vitest';
 import { Direction } from '../focus/Direction';
 import type { LightningElement, Rect } from '../types';
-import { findClosestElement } from './findClosestElement';
+import { findClosestElement, getOverlap } from './findClosestElement';
 
 // First element is the source, second is the direction, third is the
 // expected closest element or null if there is no closest element.
@@ -279,4 +279,60 @@ suite('findClosestElement', () => {
 
     runTestsOnElements(elements, tests);
   });
+
+  describe('should return the correct element for a wide element in the middle', () => {
+    /**
+     * ┌─────────────────┐
+     * │ ╔══════╗        │
+     * │ ║   1  ║        │
+     * │ ╚══════╝        │
+     * │ ╔═══════════╗   │
+     * │ ║     2     ║   │
+     * │ ╚═══════════╝   │
+     * │ ╔═══╗           │
+     * │ ║ 3 ║           │
+     * │ ╚═══╝           │
+     * └─────────────────┘
+     */
+    const elements = createLayout(500, 500, [
+      { height: 48, width: 243, x: 160, y: 24 },
+      { height: 96, width: 820, x: 160, y: 88 },
+      { height: 64, width: 544, x: 160, y: 264 },
+    ]);
+    const tests: TestCases = [
+      [1, Direction.Up, null],
+      [1, Direction.Right, null],
+      [1, Direction.Down, 2],
+      [1, Direction.Left, null],
+      [2, Direction.Up, 1],
+      [2, Direction.Right, null],
+      [2, Direction.Down, 3],
+      [2, Direction.Left, null],
+      [3, Direction.Up, 2],
+      [3, Direction.Right, null],
+      [3, Direction.Down, null],
+      [3, Direction.Left, null],
+    ];
+
+    runTestsOnElements(elements, tests);
+  });
+});
+
+suite('getOverlap', () => {
+  it('should return the correct overlap for two elements', () => {
+    const a = { x: 0, y: 0, width: 100, height: 100, centerX: 50, centerY: 50 };
+    const b = {
+      x: 75,
+      y: 75,
+      width: 100,
+      height: 100,
+      centerX: 50,
+      centerY: 50,
+    };
+
+    expect(getOverlap(Direction.Up, a, b)).toEqual(0);
+    expect(getOverlap(Direction.Right, a, b)).toEqual(25);
+    expect(getOverlap(Direction.Down, a, b)).toEqual(25);
+    expect(getOverlap(Direction.Left, a, b)).toEqual(0);
+  });
 });

packages/react-lightning/src/utils/findClosestElement.ts

@@ -91,6 +91,82 @@ function getDistance(
   return x * x + y * y;
 }
 
+/**
+ * Calculate the shortest distance between two elements based on the W3C CSS
+ * Spatial Navigation spec: https://drafts.csswg.org/css-nav-1/#heuristics
+ */
+function calculateShortestDistance(
+  direction: Direction,
+  source: Dimensions,
+  target: Dimensions,
+): number | null {
+  const euclidean = getDistance(direction, source, target);
+  const displacement = getDisplacement(direction, source, target);
+  const alignment = getAlignment(direction, source, target);
+
+  if (euclidean === null) {
+    return null;
+  }
+
+  return (
+    euclidean +
+    displacement -
+    alignment -
+    Math.sqrt(getOverlap(direction, source, target))
+  );
+}
+
+function getAlignment(
+  direction: Direction,
+  source: Dimensions,
+  target: Dimensions,
+): number {
+  const isHorizontal = direction & Direction.Horizontal;
+  const bias =
+    getOverlap(direction, source, target) /
+    (isHorizontal ? source.width : source.height);
+
+  return bias * 5;
+}
+
+function getDisplacement(
+  direction: Direction,
+  { width: w1, height: h1, centerX: cx1, centerY: cy1 }: Dimensions,
+  { centerX: cx2, centerY: cy2 }: Dimensions,
+) {
+  const isHorizontal = direction & Direction.Horizontal;
+  const distance = isHorizontal ? cy2 - cy1 : cx2 - cx1;
+  const bias = isHorizontal ? h1 / 2 : w1 / 2;
+  const weight = isHorizontal ? 30 : 2;
+
+  return (distance + bias) * weight;
+}
+
+export function getOverlap(
+  direction: Direction,
+  { x: x1, y: y1, width: w1, height: h1 }: Dimensions,
+  { x: x2, y: y2, width: w2, height: h2 }: Dimensions,
+): number {
+  let length = 0;
+
+  switch (direction) {
+    case Direction.Up:
+      length = y1 > y2 && y1 < y2 + h2 ? y2 + h2 - y1 : 0;
+      break;
+    case Direction.Right:
+      length = x1 + w1 > x2 && x1 + w1 < x2 + w2 ? x1 + w1 - x2 : 0;
+      break;
+    case Direction.Down:
+      length = y1 + w1 > y2 && y1 + w1 < y2 + h2 ? y1 + h1 - y2 : 0;
+      break;
+    case Direction.Left:
+      length = x1 > x2 && x1 < x2 + w2 ? x2 + w2 - x1 : 0;
+      break;
+  }
+
+  return length;
+}
+
 function isOverlap(
   { x: x1, y: y1, width: w1, height: h1 }: Dimensions,
   { x: x2, y: y2, width: w2, height: h2 }: Dimensions,
@@ -132,7 +208,7 @@ export function findClosestElement(
         otherDimensions,
       );
 
-      const distance = getDistance(
+      const distance = calculateShortestDistance(
         direction,
         sourceDimensions,
         otherDimensions,
@@ -154,14 +230,6 @@ export function findClosestElement(
     }
   }
 
-  if (closest.length === 0) {
-    return null;
-  }
-
-  if (closest.length === 1) {
-    return closest[0] as LightningElement;
-  }
-
   // If we have multiple elements with the same closeness, then try to pick the
   // next element in the render tree. This may not be the same order as the
   // `elementsToCheck` array.

packages/react-lightning/src/utils/simpleDiff.spec.ts

@@ -52,4 +52,23 @@ describe('simpleDiff', () => {
     const result = simpleDiff(obj1, obj2);
     expect(result).toEqual({ children: [obj2] });
   });
+
+  it('should handle null and undefined values', () => {
+    type User = {
+      name: string;
+      dob?: { year: number; month: number; day: number } | null;
+    };
+    const obj1: User = { name: 'John', dob: null };
+    const obj2: User = { name: 'John', dob: { year: 1920, month: 2, day: 2 } };
+
+    const result = simpleDiff(obj1, obj2);
+
+    expect(result).toEqual({
+      dob: {
+        day: 2,
+        month: 2,
+        year: 1920,
+      },
+    });
+  });
 });

packages/react-lightning/src/utils/simpleDiff.ts

@@ -41,7 +41,7 @@ function areEqualObjects<T extends object>(
   second: T,
   visited: Set<unknown>,
 ): boolean {
-  if ((first == null && second == null) || typeof first !== 'object') {
+  if (first == null || second == null || typeof first !== 'object') {
     return first === second;
   }