Можно ли это сделать в cytoscape.js?

Question

Можно ли реализовать следующую концепцию использования в cytoscape.js?

1. Пользователи могут добавлять новые узлы в сетку, кликнув левой кнопкой мыши на пустое место.
2. Пользователи могут подключать два узла A и B, нажимая левую кнопку мыши над A и отпуская левую кнопку мыши над B. (Пока пользователи держат левую кнопку мыши, появляется «граница предварительного просмотра» между A и текущей мышью позиция.)

Answer 1

Для (1) вы можете использовать cy.on('tap', ...) и определить строку/серию сетки на основе координат модели события.

По состоянию на 2016-08-19, имеется два расширения для помощи с сеткой выравнивания UI:

• cytoscape-grid-guide
• cytoscape-snap-to-grid

Как правило, расширения имеют demo.html, так что вы можете изучить их особенности. Существует list in the docs, и новые все время добавляются (как для первой, так и для третьей стороны).

Вы также можете быть заинтересованы в макете grid.

Для (2), есть расширения, которые делают именно то, что вы говорите, каждый с различными дополнительными функциями и опциями:

• cytoscape-edgehandles
• cytoscape-edge-ediation