динамически добавлять выпадающий список на холсте

Question

Я хочу создать холст, который позволит писать химическую формулу, идея состоит в том, чтобы использовать гексагон, который можно нажать на его вершине, чтобы изменить атом.Поэтому, когда мы нажимаем на вершину гексагона, появляется выпадающее меню, в котором мы можем выбрать атом. Я могу добавить раскрывающееся меню как одноуровневый элемент на холст и расположить его благодаря контейнеру, но как я могу динамически (по щелчку мыши) добавить раскрывающееся меню на холсте.

пример выпадающего меню

Любая идея, размышления приветствуются.Я сделал простой гексагон, который может быть репрезентацией циклогексана для тех, у кого есть предложение кода

var canvas = document.querySelector('#canvas').getContext('2d'),side = 0,
    size = 100,
    x = 100,
    y = 100;

canvas.beginPath();
canvas.moveTo(x + size * Math.cos(0), y + size * Math.sin(0));

for (side; side < 7; side++) {
  canvas.lineTo(x + size * Math.cos(side * 2 * Math.PI / 6), y + size * Math.sin(side * 2 * Math.PI / 6));
}


canvas.stroke();

#canvas {
  width: 200px;
  height: 200px;
}

<canvas id="canvas" width="400" height="400"></canvas>

Answer 1

Я бы сделал следующее:

1. У вас уже есть невидимый выпадающий список на странице, снаружи элемента canvas
2. При нажатии на холст, проверьте и посмотрите, нажал ли пользователь на шестиугольник.(проверьте, находится ли расстояние от щелчка мышью в пределах любых шестиугольников на экране)
3. Если оно находится в пределах шестиугольника, переместите невидимый выпадающий список в местоположение шестиугольника и затем поверните его видимым.

Если вам нужен пример, дайте мне знать.

Я кодировал пример в следующем CodePen: https://codepen.io/darrylhuffman/pen/OqmBja

Вот логика, которую я использую, чтобы определить, нажал ли пользователь на атом, а затем переместить выпадающий список:

document.body.addEventListener('mouseup', e => {
    let atom = atoms.find(a => distance(a.position, { x: e.pageX, y: e.pageY}) <= a.r)
    atomDropdown.classList.remove('hidden')
    if(atom){
       atomDropdown.style.left = atom.position.x + 'px'
       atomDropdown.style.top = (atom.position.y + atom.r) + 'px'
    }
})

Обязательно прочитайте весь мой код в CodePen, потому что я полагаю, что вы, возможно, захотите использовать подход, который я использовал, когда дело доходит до генерации атомов / связей / и т.д.