потоковое программирование js html ui

Question

Мне нужна ваша большая помощь в создании интерфейса на основе Simple Flow в JS.

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

Ввод -> Процесс -> Выход

В приведенном ниже примере я хотел бы просто начать со статического входного значения x = 65, которое можно подключить через разъем к процессу x + 10 или x + 10000, и в зависимости от того, какой из них был выбран, выход положен.

так что это в основном функция

function input(){
x=65;
return x;
}

function processadd10(x){
x=x+10;
return x;
}

function processadd10000(x){
x=x+10000;
return x;
}

function output(x){
return "after processing the value of X is".X;
}

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

Буду признателен за помощь в создании простого пользовательского интерфейса для выполнения приведенных ниже действий.

Answer 1

JSPlumb, кажется, стоит $ 3000 за одну лицензию разработчика! Вот бесплатная библиотека с открытым исходным кодом, размер которой составляет всего 10 КБ в сжатом виде: https://github.com/shamansir/rpd

И у Total.js, похоже, есть библиотека для потоковых данных (также бесплатная):

Answer 2

Вы можете использовать jsplumb toolkit для того же.

Позволяет быстро создавать приложения с визуальным подключением . Он поддерживает перетаскивание, соединение двух узлов, функцию панорамирования и масштабирования, мини-карту и т. Д.

Сайт инструментария Jsplumb находится по адресу ссылка .

Пройдите их демонстрации, и вы убедитесь, что ищете то же самое