Javascript SVG

Question

Dobry wieczór!

Chciałbym uzyskać efekt, żeby podczas przenoszenia kółka z podłączonymi liniami, wszystkie linie podążały za tym kółkiem. Niestety jak na razie udało mi się zrobić to dla jednej linii. Próbowałem już różnych metod, szukałem w Internecie i nic nie znalazłem.

Próbowałem to zrobić na pętli, ustawiając cx i cy dla każdej linii, która jest podłączona do kółka po id (path0, path1 itd.) lecz mi to nie działało. Proszę o pomoc.

PS. kółka łączy się liniami klikając na nie z przytrzymanym "ctrl"

Mam taki kod:

 

var moved_element_offsetLeft = 0,
    moved_element_offsetTop = 0, 
    mousedown = false,
    moved_element,
    cx = 50,
    mcx, 
    cy = 50,
    mcy, 
    x = 50,
    mx, 
    y = 50,
    my,
    zmienna = 1,
    actualX,
    actualClick,
    ActualTagL,
    ActualTagR,
    LRectX,
    LRectY,
    RRectX,
    RRectY,
    FirstClickLocationX = 0,
    FirstClickLocationY = 0,
    SecondClickLocationX = 0,
    SecondClickLocationY = 0,
    click_element,
    liczbaP = 0,
    correctClick,
    Mcircle,
    Mpath,
    zmiennik = 0,
    Arrow2X = 0,
    Arrow2Y = 0,
    Arrow3X = 0,
    Arrow3Y = 0,
    Apath,
    scx;

var svg = document.getElementById('container'); 


function AddCircle(){ 
    var group = document.createElementNS("http://www.w3.org/2000/svg", 'g');
    var circle = document.createElementNS("http://www.w3.org/2000/svg", 'circle');

    Mcircle = circle;

    group.id = "CircleGroup"+zmienna;
    svg.appendChild(group);
    
    circle.setAttribute("cx","50");
    circle.setAttribute("cy","50");
    circle.setAttribute("r","40");
    circle.setAttribute("fill","yellow");
    circle.setAttribute("position", "absolute");
    circle.setAttribute("display", "block");
    circle.id = "Circle"+ zmienna;
    circle.classList = zmienna + 1;

    group.appendChild(circle);

    group.addEventListener('mousedown', mouseClick, true);
    zmienna++;
}

function RemPath(){
  svg.removeChild(Mpath);
}


function AddRect(){
  var rect = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
  rect.setAttribute("x","50");
  rect.setAttribute("y","50");
  rect.setAttribute("width","100");
  rect.setAttribute("height","100");
  rect.setAttribute("fill","blue");
  rect.setAttribute("position", "absolute");
  rect.setAttribute("display", "block");
  svg.appendChild(rect);
  rect.addEventListener('click', mouseClick, true)
}

function AddPath(){
    var LSecondClickLocationX = Number(SecondClickLocationX);
    var LSecondClickLocationY = Number(SecondClickLocationY);
    var LFirstClickLocationX = Number(FirstClickLocationX);
    var LFirstClickLocationY = Number(FirstClickLocationY);

    var path = document.createElementNS("http://www.w3.org/2000/svg", 'line');
    Mpath = path;
    var poly = document.createElementNS("http://www.w3.org/2000/svg", 'polygon');
    path.setAttribute("x1", LFirstClickLocationX);
    path.setAttribute("y1", LFirstClickLocationY);
    path.setAttribute("x2", LSecondClickLocationX);
    path.setAttribute("y2", LSecondClickLocationY);
    path.setAttribute("stroke", "red");
    path.setAttribute("stroke-width", "3");
    path.setAttribute("fill", "none");
    path.setAttribute("position", "absolute");
    path.setAttribute("display", "block");
    path.classList.add("path");
    path.id = "path" + liczbaP;
    liczbaP++;
    svg.appendChild(path); 


    /*Arrow2X = LSecondClickLocationX - 10;
    Arrow2Y = LSecondClickLocationY + 10;
    Arrow3X = LSecondClickLocationX - 10;
    Arrow3Y = LSecondClickLocationY - 10;

    poly.setAttribute("points", LSecondClickLocationX+","+LSecondClickLocationY+" "+Arrow2X+","+Arrow2Y+" "+Arrow3X+","+Arrow3Y);
    poly.setAttribute("fill", "red");
    poly.setAttribute("stroke", "red");
    poly.setAttribute("display", "block");
    poly.setAttribute("position", "absolute");
    poly.setAttribute("z-index", "10");

    svg.appendChild(poly);*/
}

function mouseClick(e) { 
  moved_element = e.target; 
  actualClick = moved_element.id;     
  const moved_element_rect = e.target.getBoundingClientRect();
  const margines_o = document.getElementById('container').getBoundingClientRect();
  moved_element_offsetLeft = e.clientX - moved_element_rect.left; 
  moved_element_offsetTop = e.clientY - moved_element_rect.top;

  if(e.ctrlKey){
    zmiennik = 1;
  }
  else{
    zmiennik = 0;
  }

  Mcircle.onmousedown = function MouseDownClick(){ 
    mousedown = true;
    moved_element.classList.add('mouse-down');
    moved_element.setAttribute('stroke', 'black');
    moved_element.setAttribute('stroke-width', '4');

  }
 
  Mcircle.onmouseup = function MouseUpClick(){
    mousedown = false;
    moved_element.classList.remove('mouse-down');
    moved_element.removeAttribute('stroke');
    moved_element.removeAttribute('stroke-width');

    if(zmiennik == 1){

      if((FirstClickLocationX == 0 && FirstClickLocationY == 0) || (FirstClickLocationX != 0 && FirstClickLocationY != 0 && SecondClickLocationX != 0 && SecondClickLocationY != 0)){
        FirstClickLocationX = moved_element.getAttribute("cx");
        FirstClickLocationY = moved_element.getAttribute("cy");
        
        SecondClickLocationX = 0;
        SecondClickLocationY = 0;
      }
      else if(FirstClickLocationX != 0 && FirstClickLocationY != 0 && SecondClickLocationX == 0 && SecondClickLocationY == 0){
        SecondClickLocationX = moved_element.getAttribute("cx");
        SecondClickLocationY = moved_element.getAttribute("cy");

        AddPath();
      }
    }
    moved_element = undefined;
  
  }
}
  
window.addEventListener('mousemove', (e) => {
  if (mousedown) { 
    if(moved_element=="[object SVGCircleElement]"){
      moved_element.setAttribute("cx", e.clientX - moved_element_offsetLeft + 40); 
      moved_element.setAttribute("cy", e.clientY - moved_element_offsetTop + 40);
 
      cx = e.clientX - moved_element_offsetLeft + 40;
      cy = e.clientY - moved_element_offsetTop + 40; 
    
      if(Mpath != undefined){
        if(document.querySelector('line[x1="'+cx+'"]') && document.querySelector('line[y1="'+cy+'"]')){
          Apath = document.querySelector('line[x1="'+cx+'"]').id;
        }else if(document.querySelector('line[x2="'+cx+'"]') && document.querySelector('line[y2="'+cy+'"]')){
          Apath = document.querySelector('line[x2="'+cx+'"]').id;
        }
      }
      
      
      if(Mpath != undefined){
        if(Mpath.getAttribute('x1') <= cx+20 && Mpath.getAttribute('x1') >= cx-20){
          Mpath.setAttribute('x1', cx);
          Mpath.setAttribute('y1', cy);
        }else if(Mpath.getAttribute('x2') <= cx+20 && Mpath.getAttribute('x2') >= cx-20){
          Mpath.setAttribute('x2', cx);
          Mpath.setAttribute('y2', cy);
        }
      }
    }
    else{
      moved_element.setAttribute("x", e.clientX - moved_element_offsetLeft); 
      moved_element.setAttribute("y", e.clientY - moved_element_offsetTop); 

      x = e.clientX - moved_element_offsetLeft +50;
      y = e.clientY - moved_element_offsetTop +50;
    
    }  
  } 
}, true);

 

<!DOCTYPE html>
<html>
    <head>
        <title>SVG</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
        <style>
              #container{
                    min-width: 1000px;
                    min-height: 700px;
                    background-color: rgb(87, 40, 40);
              }

             circle{
                    position: absolute;
                    display: block;
             }
       </style>
    </head>
    <body>
        <svg id="container">
            

        </svg>

        <button class="onclick" onclick="AddCircle()">Wstaw koło</button>
        <button class="onclick" onclick="AddPath()">Wstaw linię</button>
        <button class="onclick" onclick="RemPath()">Usuń linię</button>
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>