[COH-18154] Enhancement/improve spatial navigation logic

[MartinBozhilov-coh]

• Self-reviewed and fixed any obvious mistakes, TODOs, removed debugging code, logs, etc
• Updated package.json in related components, the library or the cli
• Tested in a browser
• Tested in Gameface

Remove any item from the list if not applicable by editing this message.

[alien1976]

Please add hold action when spatial navigation registers the key actions inside registerKeyActions

keyboard.on({
                    keys: [key],
                    callback: `move-focus-${direction}`,
                    type: ['press', 'hold'],
                });

[alien1976]

Suggested change

	The navigatableElement can either be a string with an element selector
	The `navigatableElement` can either be a string with an element selector.

[alien1976]

Suggested change

	The `init` method takes an optional second argument, `overlap`, which accepts a value between 0.01 and 1. The default value is 0.5 (50%). It specifies the percentage of acceptable overlap between the current element and a potential element for navigation.
	The `init` method takes an optional second argument, `overlap`, which accepts a value between 0.01 and 1. The default value is 0.5 (50%). It specifies the percentage of acceptable overlap between the current element and the next potential element for navigation.

[alien1976]

Can we add an image explaining the overlap similar to the one you've send us in slack so the users visual representation of what you are talking about.

[alien1976]

Document that if you set invalid value that is <0 or >1 it will not set it and instead will use the default value.

[alien1976]

Also check if the overlap argument is valid and fallback to default value if not.

0 and <1

[alien1976]

Suggested change

	let nextFocusableElement;
	if (currentAxisGroup.length > 0) {
	nextFocusableElement = this.findNextElement(direction, currentAxisGroup, x, y);
	if (!nextFocusableElement) {
	nextFocusableElement = this.getClosestToEdge(direction, currentAxisGroup, { x, y });
	}
	nextFocusableElement.element.focus();
	}
	if (!currentAxisGroup.length) return;
	const nextFocusableElement = this.findNextElement(direction, currentAxisGroup, x, y);
	if (nextFocusableElement) return nextFocusableElement.element.focus();
	this.getClosestToEdge(direction, currentAxisGroup, { x, y }).element.focus();

[alien1976]

Maybe split it in that way to reduce the code in the filter method and make it more readable.

Suggested change

	filterGroupByCurrentAxis(direction, focusableGroup, currentElement) {
	return focusableGroup.filter((element) => {
	if (direction === 'left' || direction === 'right') {
	const lowerBoundary = Math.min(currentElement.y + currentElement.height, element.y + element.height);
	const topBoundary = Math.max(currentElement.y, element.y);
	const verticalOverlap = Math.max(0, (lowerBoundary - topBoundary));
	const minHeight = Math.min(currentElement.height, element.height);
	const overlapPercentage = verticalOverlap / minHeight;
	return overlapPercentage >= this.overlapPercentage;
	} else {
	const rightBoundary = Math.min(currentElement.x + currentElement.width, element.x + element.width);
	const leftBoundary = Math.max(currentElement.x, element.x);
	const horizontalOverlap = Math.max(0, rightBoundary - leftBoundary);
	const minWidth = Math.min(currentElement.width, element.width);
	const overlapPercentage = horizontalOverlap / minWidth;
	return overlapPercentage >= this.overlapPercentage;
	}
	});
	}
	isOverlappingX(currentElement, nextElement) {
	const lowerBoundary = Math.min(currentElement.y + currentElement.height, nextElement.y + nextElement.height);
	const topBoundary = Math.max(currentElement.y, nextElement.y);
	const verticalOverlap = Math.max(0, (lowerBoundary - topBoundary));
	const minHeight = Math.min(currentElement.height, nextElement.height);
	const overlapPercentage = verticalOverlap / minHeight;
	return overlapPercentage >= this.overlapPercentage;
	}
	isOverlappingY(currentElement, nextElement) {
	const rightBoundary = Math.min(currentElement.x + currentElement.width, nextElement.x + nextElement.width);
	const leftBoundary = Math.max(currentElement.x, nextElement.x);
	const horizontalOverlap = Math.max(0, rightBoundary - leftBoundary);
	const minWidth = Math.min(currentElement.width, nextElement.width);
	const overlapPercentage = horizontalOverlap / minWidth;
	return overlapPercentage >= this.overlapPercentage;
	}
	filterGroupByCurrentAxis(direction, focusableGroup, currentElement) {
	return focusableGroup.filter((element) => {
	if (direction === 'left' || direction === 'right') return isOverlappingX(currentElement, element);
	return isOverlappingY(currentElement, element)
	});
	}

[alien1976]

This is a feature so the version should be 2.2.0

[MartinBozhilov-coh]

Yeah, true. Initially it was supposed to be a bug fix so I didn't consider it a feature but when I added the overlap I forgot to change the version. :D