En* hitta rutt Algoritm i Praktiken med React

A* hitta rutt Algoritm i Praktiken med att Reagera

Rendering Linjer mellan Två Tabeller Med Reagera

Under utvecklingen av GiraffQL, en-webbläsaren GraphQL schema fiol byggd i Reagera, vi behövde ett sätt att dynamiskt visualisera relationer mellan tabeller och fält som skulle spela med vår önskade dra-och-släpp-GRÄNSSNITTET. Vi ville ge användarna ett enkelt sätt att skapa tabeller och upprätta förbindelser mellan dem och deras egenskaper med hjälp av linjer återges i att Reagera.

Problem
Korrekt återgivning linjer mellan tabeller/egenskaper på fluga som användare för att bygga ut och ändra sina GraphQL schema.

Villkor:
Användare måste ha möjlighet att etablera en relation mellan en fastighet och en tabell genom att helt enkelt klicka på rad och dra den över målet tabellen. Tabellerna återges i HTML-inuti en div. En SVG HTML-element är placerade bakom bord div. Det är där vi ska dra på relationer. När tabellen positioner förändras, våra linjer behöver ritas om.

Mål:
• Göra förbindelser på ett sätt som är både korrekt och elegant
• Linjer bör inte överlappa andra tabeller

fråga så här för att rita linjer?

Demo

Den klassiska A* algoritm är inget mer än en bredden-först sökning (BFS) med en heuristisk som förbättrar sin körning genom att prioritera upptäckte poäng som är närmast målet.

* är nyckeln till att snabba upp algoritmen så att rendering inte ger en märkbar fördröjning.

Under huven, vi använder en klassisk BFS att ignorerar punkter som överlappar tabeller.

Regler
Vi kommer att använda En* algoritm och fokusera det på två punkter till vänster och höger sidorna av HTML-element som utgångspunkt.

Starta poäng

giltiga destinationer definieras som åtta poäng på bordet gränsen.

Giltiga destinationer

Båda punkter kommer att använda En* algoritm för att finna en väg till den relaterade tabellen. De kommer att ta den kortaste vägen som ett resultat och dra det.

Men hur vet vi att vi har gjort?

När tabeller flytta, de rör sig i en pixel åt gången. Vår algoritm för att hitta rutt går i 20 pixel steg. Vi definierar varje 20 pixel ökning som våra steg. Chansen att vi just hit destination på vårt bord är minimal. Därför, när vi hitta den punkt som är mindre än steg storlek på 20 pixlar, det är när linjen är dragen och fält och tabeller är ansluten.

RÖD — start point, BLÅ — destination poäng, GRÖN — steg

Slutsats
algoritmen är inte perfekt, men det är en strategi för att lösa våra problem för att göra linjer för att illustrera relationer mellan fält och tabeller. Det finns några saker kvar att lösa. Vi kan fortfarande se över utformningen av våra relationer och justera villkoren för vår algoritm. Den process av lärande och att tillämpa denna algoritm var utmanande och roligt på samma gång. Vi ser fram emot att gå på vår första metod.