Изобразяване на линии между две таблици с React

По време на разработването на GiraffQL, цигулка за схема на GraphQL в браузъра, вградена в React, се нуждаехме от начин за динамично визуализиране на връзки между таблици и полета, които да играят с желания от нас потребителски интерфейс с плъзгане и пускане. Искахме да предоставим на потребителите лесен начин за създаване на таблици и установяване на връзки между тях и техните свойства с помощта на линии, изобразени в React.

Проблем
Точно изобразяване на линии между таблици/свойства в движение, докато потребителите изграждат и редактират своята GraphQL схема.

Условия
Потребителите трябва да могат да установяват връзка между свойство и таблица просто като щракнат върху ред и го плъзнат върху целевата таблица. Таблиците се изобразяват в HTML вътре в div. SVG HTML елемент се поставя зад таблиците div. Това е мястото, където ще начертаем отношенията. Когато позициите на масата се променят, нашите линии трябва да бъдат преначертани.

Цел
‌• Изобразяване на връзки по начин, който е едновременно точен и елегантен
‌• Редовете не трябва да се припокриват с други таблици

Възниква въпросикак да начертая линиите?

Подход

Използвайте алгоритъма A*.

Класическият алгоритъм A* не е нищо повече от „първо търсене в ширина“ (BFS) с евристика, която подобрява времето на изпълнение чрез приоритизиране на открити точки, които са най-близо до дестинацията.

A* е ключът към ускоряване на нашия алгоритъм, така че изобразяването да не предизвиква забележимо забавяне.

Под капака използваме класически BFS, който игнорира точки, които се припокриват с таблици.

Правила
Ще използваме алгоритъма A* и ще го фокусираме върху две точки от лявата и дясната страна на HTML елемента като начална точка.

Валидните дестинации се определят като осем точки на границата на таблицата.

И двете точки ще използват алгоритъма A*, за да намерят път към свързаната таблица. В резултат те ще поемат по най-краткия път и ще го начертаят.

Но как да разберем, че сме готови?

Когато масите се движат, те се движат на стъпки от един пиксел. Нашият алгоритъм за намиране на пътя се движи на стъпки от 20 пиксела. Ние определяме всяко увеличение от 20 пиксела като наша стъпка. Шансовете точно да уцелим целевата точка на масата ни са минимални. Следователно, когато намерим точката, която е по-малка от размера на стъпката от 20 пиксела; тогава линията е начертана и полетата и таблиците са свързани.

Вижте как работи в GitHub.

Заключение
Алгоритъмът не е перфектен, но е един подход за решаване на нашия проблем с изобразяване на линии за илюстриране на връзки между полета и таблици. Остават още няколко неща за уточняване. Все още можем да преразгледаме оформлението на нашите отношения и да променим условията на нашия алгоритъм. Процесът на изучаване и прилагане на този алгоритъм беше предизвикателство и забавление в същото време. Очакваме с нетърпение да повторим нашия първоначален подход.