Как реализовать небольшой редактор электрических схем?

Question

[Looko8]

Здравствуйте, суть в том, что есть некое рабочее окно с прибором (картинка), который измеряет различные параметры электрического кабеля. Справа от этого окна есть элементы (различные марки кабелей) из которых собирается схема. Эти элементы необходимо перетаскивать курсором в рабочее окно и собирать саму схему, с помощью соединительных линий (проводов) и отслеживать правильность ее сборки.
Вопрос в том как реализовать это перетаскивание, соединение элементов схемы и отслежку правильности сборки?
Читал про Drag’n’Drop, но не знаю как реализовать соединительные линии правильно. Есть мысли добавить на концах каждого элемента кнопки и при их нажатии производить соединение, но хотелось бы просто при нажатии мыши вести курсором к необходимому разъёму прибора и, чтобы за курсором следовал провод.
С реализацией проверки правильности встал в тупик. Думаю при соединении назначать, например, элементу схемы какой-то идентификатор, который соответствует разъёму самого прибора и через условие потом проверять, насколько это будет правильно?

Answer 1

[inzeppelin]

Вам нужен SVG или Canvas. Но самостоятельно реализовать такое будет довольно сложно. Попробуйте посмотреть в сторону каких-то готовых решений по построению блок-схем.

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

// device - это ваш прибор, input# - это разъемы, массивы содержат подсоединенные элементы.
const device = {
  input1: [],
  input2: [],
  ...
};
// это объект, в котором есть список разъемов с разрешенными элементами
const allowedConnnections = {
  input1: ['element1', 'element2'],
  input2: ['element3'],
  ...
};

Таким образом при добавлении нового элемента в разъем, нужно проверять, разрешен он или нет

// функция должна вызываться каждый раз на добавление нового элемента
function checkInput(inputId, elementId) {
  // возвращает true/false если элемент есть в списке разрешенных для разъема
  return allowedConnnections[inputId].indexOf(elementId) !== -1;
}