Как реализовать дорисовку линий?

118

16 апреля 2021, 11:20

Проект - Создаются кружки и их должны связывать линии, кружки можно двигать и линии тоже будут вместе с ними двигаться. При создании 3+ кружков линия действует только на двух из них ( то есть соединяет только два кружка, вместо 3). Так вот, как это исправить? (если вы будете запускать html, то надо тыкнуть на все кружки, чтобы они работали)

let circles = document.querySelectorAll(".circle"); 
let elements = []; 
let newCircleButton = document.querySelector(".new-circle"); 
 
const drawLine = (e, i) => { 
  let line = document.querySelector("#line"); 
  let circlesNode = document.querySelector(".circles"); 
  for (let j = 0; j < elements.length; j++) { 
    let c_el = elements[j]; 
    if (j != i) { 
      line.setAttribute("x1", c_el.x); 
      line.setAttribute("y1", c_el.y); 
      line.setAttribute("x2", e.pageX); 
      line.setAttribute("y2", e.pageY); 
      line.setAttribute("stroke", "#000000"); 
    } 
  } 
} 
 
const onMouseDown = (e, el, i) => { 
  const moveAt = (e) => { 
    el.style.left = e.pageX - el.offsetWidth / 2 + 'px'; 
    el.style.top = e.pageY - el.offsetHeight / 2 + 'px'; 
    elements[i] = { 
      x: e.pageX, 
      y: e.pageY 
    } 
    drawLine(e, i); 
  } 
 
  el.style.position = 'absolute'; 
  moveAt(e); 
  document.body.appendChild(el); 
  el.style.zIndex = 1000; 
  document.onmousemove = (e) => { 
    moveAt(e); 
  } 
  el.onmouseup = () => { 
    document.onmousemove = null; 
    el.onmouseup = null; 
  } 
} 
 
for (let i = 0; i < circles.length; i++) { 
  circles[i].addEventListener('mousedown', (e) => { 
    onMouseDown(e, circles[i], i) 
  }) 
}

<div class="wrapper"> 
  <div class="circles"> 
    <div class="circle"></div> 
    <div class="circle"></div> 
  </div> 
  <svg id="svg"><line id="line"/></svg> 
</div>