Соединение элементов в списке javascript

Question

Как бы я соединил 2 элемента в списке изогнутой линией.

Вот пример использования боковой панели SO:

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

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

Например, мне нравится этот ответ: https://stackoverflow.com/a/35493737/663447 но я ищу изогнутую, а не прямую линию.

Answer 1

Так вот что я придумал. Я использую холст для рисования линий и getBoundingClientRect, чтобы получить положение отдельных элементов. Он использует vanilla JS, поэтому нет 600 кБ зависимостей.

https://codepen.io/kwiniarski97/pen/VqNjbm?editors=1111

var c = document.getElementById("canvas");
var li1 = document.getElementById("1");
var li1Pos = li1.getBoundingClientRect();
var li2 = document.getElementById("2");
var li2Pos = li2.getBoundingClientRect();
var li3 = document.getElementById("3");
var li3Pos = li3.getBoundingClientRect();
var li4 = document.getElementById("4");
var li4Pos = li4.getBoundingClientRect();
var ctx = c.getContext("2d");
drawLine(li1Pos, li4Pos, 30);
drawLine(li2Pos, li3Pos, 20);
function drawLine(from, to, deepness){
  ctx.beginPath();
  ctx.moveTo(from.x, from.y);
  ctx.bezierCurveTo(from.x + deepness, from.y , to.x+deepness, to.y, to.x, to.y);
  ctx.stroke();
}

div{
  display:flex;
}

canvas{
  margin-left: -45px;
}

<div>
<ul>
  <li id="1">1</li>
  <li id="2">2</li>
  <li id="3">3</li>
  <li id="4">4</li>
</ul>

<canvas id="canvas"></canvas>
</div>