[Task] | System Drag & Drop (Grid System)

[PEXEL2002]

Opis zadania i szczegółowe wymagania

Należy stworzyć interaktywny obszar roboczy (Canvas), który pozwoli użytkownikowi na wygodne budowanie logiki sterowania poprzez swobodne układanie elementów na szczeblach drabinki. W tym zadaniu musi zawierać się:

• Wdrożenie sprawdzonej biblioteki do obsługi przeciągania elementów (np. dnd-kit lub ewentualnie starszego react-beautiful-dnd).
• Implementacja logiki przesuwania obiektów zarówno z przybornika (Toolbox) na szczeble, jak i reorganizacji elementów już umieszczonych na szczeblach.
• Zaprojektowanie i wdrożenie systemu "siatki" (Grid System), który wymusza logiczne wyrównanie (snapowanie) styków i cewek do określonych pozycji wewnątrz rzędu.
• Implementacja mechanizmu automatycznego generowania i renderowania połączeń (linii zasilających) pomiędzy dodanymi elementami, zachowując ciągłość szczebla od lewej do prawej szyny.

Dodatkowy kontekst i źrodła pomocnicze

System Drag & Drop jest fundamentem User Experience w tego typu edytorach. Rekomendowane jest użycie nowoczesnej biblioteki dnd-kit, ponieważ react-beautiful-dnd nie jest już aktywnie rozwijane przez Atlassian. Należy dobrze przemyśleć strefy upuszczania (Drop Zones) w globalnym stanie. Po upuszczeniu elementu na siatce, aplikacja musi zaktualizować globalny stan drabinki (np. w Zustand), co automatycznie wymusi wyrenderowanie nowych ścieżek prądowych łączących dodany blok z resztą szczebla.

Definicja wykonania zadania

• Wdrożono bibliotekę obsługującą mechanikę Drag & Drop.
• Użytkownik ma możliwość płynnego przeciągania elementów z przybornika wprost na wybrane szczeble.
• Siatka obszaru roboczego poprawnie "przyciąga" i wyrównuje upuszczane komponenty.
• Struktura szczebla automatycznie generuje poprawne wizualnie linie połączeń między elementami.
• Obszar szczebla dynamicznie dostosowuje swój rozmiar (lub rozkład) do liczby i typu umieszczonych na nim elementów.