@lightningtv/solid 0.0.8 → 0.0.10

package/src/primitives/useMouse.ts

@@ -4,6 +4,7 @@ import {
   activeElement,
   setActiveElement,
   rootNode,
+  Config,
 } from '@lightningtv/solid';
 import { makeEventListener } from '@solid-primitives/event-listener';
 import { useMousePosition } from '@solid-primitives/mouse';
@@ -41,15 +42,16 @@ const handleScroll = throttle((e: WheelEvent): void => {
 
 const handleClick = (e: MouseEvent): void => {
   const active = activeElement();
+  const precision = Config.rendererOptions?.deviceLogicalPixelRatio || 1;
   if (
     active &&
     testCollision(
       e.clientX,
       e.clientY,
-      (active.lng as MainOnlyNode).coreNode.absX,
-      (active.lng as MainOnlyNode).coreNode.absY,
-      active.width,
-      active.height,
+      (active.lng as MainOnlyNode).coreNode.absX * precision,
+      (active.lng as MainOnlyNode).coreNode.absY * precision,
+      active.width! * precision,
+      active.height! * precision,
     )
   ) {
     document.dispatchEvent(createKeyboardEvent('Enter', 13));
@@ -72,26 +74,45 @@ function getChildrenByPosition(
   x: number,
   y: number,
 ): ElementNode[] {
-  let result: ElementNode[] = [node];
+  const result: ElementNode[] = [];
+  const precision = Config.rendererOptions?.deviceLogicalPixelRatio || 1;
 
-  for (let i = 0; i < node.children.length; i++) {
-    const child = node.children[i];
-    if (child instanceof ElementNode) {
+  // Queue for BFS
+  let queue: ElementNode[] = [node];
+
+  while (queue.length > 0) {
+    // Process nodes at the current level
+    const currentLevelNodes: ElementNode[] = [];
+
+    for (const currentNode of queue) {
       if (
-        child.alpha !== 0 &&
+        currentNode.alpha !== 0 &&
         testCollision(
           x,
           y,
-          (child.lng as MainOnlyNode).coreNode.absX,
-          (child.lng as MainOnlyNode).coreNode.absY,
-          child.width,
-          child.height,
+          (currentNode.lng as MainOnlyNode).coreNode.absX * precision,
+          (currentNode.lng as MainOnlyNode).coreNode.absY * precision,
+          currentNode.width! * precision,
+          currentNode.height! * precision,
         )
       ) {
-        // continue searching tree
-        result = [...result, ...getChildrenByPosition(child, x, y)];
+        currentLevelNodes.push(currentNode);
       }
     }
+
+    const size = currentLevelNodes.length;
+    if (size === 0) {
+      break;
+    } else if (size > 1) {
+      // Find the node with the highest zIndex
+      currentLevelNodes.sort((a, b) => (a.zIndex || 0) - (b.zIndex || 0));
+    }
+
+    const highestZIndexNode = currentLevelNodes[0] as ElementNode;
+    result.push(highestZIndexNode);
+    if (!highestZIndexNode.isTextNode()) {
+      queue = highestZIndexNode.children as ElementNode[];
+    }
   }
 
   return result;
@@ -104,9 +125,9 @@ export function useMouse(myApp: ElementNode = rootNode): void {
   makeEventListener(window, 'click', handleClick);
   createEffect(() => {
     if (scheduled()) {
-      const result = getChildrenByPosition(myApp, pos.x, pos.y)
-        .filter((el) => (el.focus || el.onFocus || el.onEnter) && !el.skipFocus)
-        .sort((a, b) => (a.zIndex || 0) - (b.zIndex || 0));
+      const result = getChildrenByPosition(myApp, pos.x, pos.y).filter(
+        (el) => (el.focus || el.onFocus || el.onEnter) && !el.skipFocus,
+      );
 
       if (result.length) {
         let activeElm = result[result.length - 1];