fix: correct intersection logic (#36)

Author: neiromaster

src/ink-mouse/isIntersecting.ts

@@ -1,12 +1,8 @@
 import type { MousePosition } from './MouseContext';
 
-// const LEFT_ADJUSTMENT = 13;
-// const TOP_ADJUSTMENT = 2;
-
 /**
  * Determines if the event is intersecting with the elements layout.
  *
- * TODO: This currently seems to have an off by 13 and 2 issue.
  */
 function isIntersecting({
   mouse: { x, y },
@@ -15,16 +11,14 @@ function isIntersecting({
   mouse: MousePosition;
   element: { left: number; top: number; width: number; height: number };
 }) {
-  /**
-   * for some reason the position is off by 13 and 2
-   */
   const left = element.left;
   const top = element.top;
   const width = element.width;
   const height = element.height;
-  const isOutsideHorizontally = x < left || x > left + width;
-  const isOutsideVertically = y < top || y > top + height;
+  const isOutsideHorizontally = x < left || x >= left + width;
+  const isOutsideVertically = y < top || y >= top + height;
 
   return !isOutsideHorizontally && !isOutsideVertically;
 }
+
 export { isIntersecting };

src/ink-mouse/useElementPosition.ts

@@ -1,13 +1,17 @@
 import type { DOMElement } from 'ink';
-import { useEffect, useState, type RefObject } from 'react';
+import { type RefObject, useEffect, useState } from 'react';
 
 /**
  * Statefule hook to provide the position of the referenced element.
  *
  * @param ref - The reference to the element.
+ * @param deps - Dependencies to recompute the position.
  * @returns The position of the element.
  */
-function useElementPosition(ref: RefObject<DOMElement | null>, deps: unknown[] = []) {
+function useElementPosition(
+  ref: RefObject<DOMElement | null>,
+  deps: unknown[] = [],
+) {
   const [position, setPosition] = useState<{
     left: number;
     top: number;
@@ -27,41 +31,40 @@ function useElementPosition(ref: RefObject<DOMElement | null>, deps: unknown[] =
   return position;
 }
 
-function useElementDimensions(ref: RefObject<DOMElement | null>, deps: unknown[] = []) {
-    const [dimensions, setDimensions] = useState<{
-        width: number;
-        height: number;
-    }>({
-        width: 0,
-        height: 0
-    });
-
-    useEffect(function UpdateDimensions() {
-        const dimensions = getElementDimensions(ref.current);
-        if (!dimensions) {
-            return;
-        }
-        setDimensions(dimensions);
-    }, deps);
-
-    return dimensions;
-}
+function useElementDimensions(
+  ref: RefObject<DOMElement | null>,
+  deps: unknown[] = [],
+) {
+  const [dimensions, setDimensions] = useState<{
+    width: number;
+    height: number;
+  }>({
+    width: 0,
+    height: 0,
+  });
 
-function getElementDimensions(node: DOMElement | null) {
-    if (!node) {
-        return;
+  useEffect(function UpdateDimensions() {
+    const dimensions = getElementDimensions(ref.current);
+    if (!dimensions) {
+      return;
     }
+    setDimensions(dimensions);
+  }, deps);
 
-    if (!node.yogaNode) {
-        return;
-    }
+  return dimensions;
+}
 
-    const elementLayout = node.yogaNode.getComputedLayout();
+function getElementDimensions(node: DOMElement | null) {
+  const elementLayout = node?.yogaNode?.getComputedLayout();
 
-    return {
-        width: elementLayout.width,
-        height: elementLayout.height
-    }
+  if (!elementLayout) {
+    return;
+  }
+
+  return {
+    width: elementLayout.width,
+    height: elementLayout.height,
+  };
 }
 
 /**
@@ -70,57 +73,56 @@ function getElementDimensions(node: DOMElement | null) {
  */
 function getElementPosition(node: DOMElement | null) {
   if (!node) {
-    return null;
-  }
-
-  if (!node.yogaNode) {
-    return null;
+    return;
   }
-  const elementLayout = node.yogaNode.getComputedLayout();
-
-  const parent = walkParentPosition(node);
+  const { left, top } = walkNodePosition(node);
 
-  const position = {
-    left: elementLayout.left + parent.x,
-    top: elementLayout.top + parent.y,
+  return {
+    left,
+    top,
   };
-
-  return position;
 }
 
 /**
- * Walk the parent ancestory to get the position of the element.
+ * Walks the node's ancestry to calculate its absolute position.
+ *
+ * This function traverses up the parent chain of a DOMElement, accumulating
+ * the `left` and `top` layout values to determine the element's final
+ * absolute position within the Ink rendering context.
+ *
+ * Note: The initial `left` and `top` values are set to 1 because terminal
+ * coordinates are 1-indexed. Relative coordinates of each element, however,
+ * start from 0.
  *
  * Since InkNodes are relative by default and because Ink does not
  * provide precomputed x and y values, we need to walk the parent and
  * accumulate the x and y values.
  *
- * I only discovered this by debugging the getElementPosition before
- * and after wrapping the element in a Box with padding:
- *
- *  - before padding: { left: 0, top: 0, width: 10, height: 1 }
- *  - after padding: { left: 2, top: 0, width: 10, height: 1 }
- *
- * It's still a mystery why padding on a parent results in the child
- * having a different top value. `#todo`
+ * @param node - The DOMElement for which to calculate the position.
+ * @returns An object containing the calculated `left` and `top` absolute coordinates.
  */
-function walkParentPosition(node: DOMElement) {
-  let parent = node.parentNode;
-  let x = 0;
-  let y = 0;
-
-  while (parent) {
-    if (!parent.yogaNode) {
-      return { x, y };
+function walkNodePosition(node: DOMElement) {
+  let current: DOMElement | undefined = node;
+  let left = 1;
+  let top = 1;
+
+  while (current) {
+    if (!current.yogaNode) {
+      return { left, top };
     }
 
-    const layout = parent.yogaNode.getComputedLayout();
-    x += layout.left;
-    y += layout.top;
+    const layout = current.yogaNode.getComputedLayout();
+    left += layout.left;
+    top += layout.top;
 
-    parent = parent.parentNode;
+    current = current.parentNode;
   }
-  return { x, y };
+  return { left, top };
 }
 
-export { useElementPosition, getElementPosition, getElementDimensions, useElementDimensions };
+export {
+  useElementPosition,
+  getElementPosition,
+  getElementDimensions,
+  useElementDimensions,
+};