add elements
remove elements
update elements
delete elements

elementArray = []


addElement(elem){
	elementArray.add(elem);
}

getElem(id){
	for(int i=0;i<elementArray.length;i++){
		if(id == elementArray[i].id){
			return elementArray[i];
		}
	}
}

updateElem(){
	for(int i=0;i<elementArray.length;i++){
		if(elem.id == elementArray[i].id){
			elementArray[i] == elem;
		}
	}
}


deleteElem(){
	for(int i=0;i<elementArray.length;i++){
		if(elem.id == elementArray[i].id){
			elementArray.removeAt(i);
		}
	}
}



========================================= Graphical Only =================================================


function isElementNearby(targetElement, otherElement, thresholdX, thresholdY) {
  // Get the bounding rectangles of the two elements
  const targetRect = targetElement.getBoundingClientRect();
  const otherRect = otherElement.getBoundingClientRect();

  // Calculate the distance between the centers of the elements along the X and Y axes
  const targetCenterX = targetRect.left + targetRect.width / 2;
  const targetCenterY = targetRect.top + targetRect.height / 2;
  const otherCenterX = otherRect.left + otherRect.width / 2;
  const otherCenterY = otherRect.top + otherRect.height / 2;

  const distanceX = Math.abs(targetCenterX - otherCenterX);
  const distanceY = Math.abs(targetCenterY - otherCenterY);

  // Compare the distances with the specified thresholds for X and Y axes
  return distanceX <= thresholdX && distanceY <= thresholdY;
}

// Usage example:
const targetElement = document.getElementById('targetElement');
const otherElement = document.getElementById('otherElement');
const thresholdX = 50; // Threshold for X-axis (in pixels)
const thresholdY = 30; // Threshold for Y-axis (in pixels)

const isNearby = isElementNearby(targetElement, otherElement, thresholdX, thresholdY);
console.log('Is nearby:', isNearby);







function isClickOnElementArray(clickX, clickY, elementArray) {
  for (const element of elementArray) {
    const elementRect = element.getBoundingClientRect();
    const elementX = elementRect.left;
    const elementY = elementRect.top;
    const elementWidth = elementRect.width;
    const elementHeight = elementRect.height;

    // Check if the click coordinates are within the bounding rectangle of the element
    if (
      clickX >= elementX &&
      clickX <= elementX + elementWidth &&
      clickY >= elementY &&
      clickY <= elementY + elementHeight
    ) {
      return element; // Click falls on this element
    }
  }

  return false; // Click doesn't fall on any element in the array
}

// Usage example:
const elementArray = document.getElementsByClassName('clickable-element'); // Replace with your element array
const clickX = 100; // Replace with the actual X-coordinate of the click
const clickY = 200; // Replace with the actual Y-coordinate of the click

const isClickOnElement = isClickOnElementArray(clickX, clickY, elementArray);
console.log('Is click on element:', isClickOnElement);