WebSketch: tablica GWT do mind-map

WebSketch: tekstowa tablica do strukturalnych szkiców na GWT

WebSketch to aplikacja internetowa oparta na GWT, służąca do tworzenia strukturalnych diagramów tekstowych. Przypomina mapę myśli z wierzchołkami w postaci pól tekstowych, obsługuje zagnieżdżanie i automatyczne pozycjonowanie. Projekt jest przeznaczony wyłącznie dla komputerów stacjonarnych, bez grafiki — tylko tekst i połączenia. Idealny do codziennych stand-upów, planowania zadań lub przechowywania linków w repozytorium git.

Podstawowe zasady działania

Użytkownik zaczyna od centralnego wierzchołka, dodając nowe elementy przez przeciągnięcie przy naciśniętym klawiszu Ctrl. Połączenia tworzy się przy naciśnięciu Shift+przeciągnięcie. Podwójne kliknięcie w pole tekstowe otwiera zagnieżdżoną tablicę z tym wierzchołkiem w centrum. Koordynaty wierzchołków generowane są na podstawie skrótu tekstu — po ponownym załadowaniu pozycje są automatycznie przywracane.

Aby ustalić stałe położenie w wierzchołku centralnym, dodaje się symbol domu (Alt+127), po czym zapisywane są przesunięcia w formacie ⌂BUGS[+100,+0]. Spacje w polach tekstowych są blokowane, aby zachować jedynie słowa lub krótkie frazy.

Zasady ogólne:

• Tylko wersja desktopowa, przeznaczona do pracy w biurze.
• Brak edycji lub usuwania — tylko dodawanie, jak na papierowej kartce.
• Wyszukiwanie w całym diagramie, nie tylko na bieżącej stronie.
• Skrót tablicy w prawym górnym rogu do monitorowania zmian (powiadomienia o modyfikacjach).

Format przechowywania danych

Dane przechowywane są w pliku tekstowym z prostym parsowaniem. Separatorem jest 0 0 lub pięć spacji. Przykład podstawowej struktury:

0 0 0 BUGS

To korzeń drzewa "BUGS". Bez separatora słowa tworzą ciąg:

BUGS FEATURES README TESTS

Wynik: płaska sekwencja wierzchołków. Z zagnieżdżeniem:

BUGS FEATURES README TESTS 0 0 BUGS FEATURES FEATURE#1

Algorytm serwera wyodrębnia sąsiednie elementy na podstawie klucza, skanując plik bez bazy danych. Cyfry w nawiasach pokazują częstość występowania terminu.

Wczytywanie/wykładanie do pliku umożliwia ręczne edytowanie. Karta "Start" wyświetla surowy kod do eksperymentów, podobnie jak mermaid.live.

Praktyczne zastosowania

• Codzienny stand-up: zapisywanie numerów ticketów Jira bez oczekiwania na załadowanie usługi.
• Planowanie projektu: lista technologii, terminy, zależności.
• Integracja z Git: przechowywanie mapy myśli w repozytorium — nowy developer otrzymuje link do wizualnej mapy z hierarchią.
• Notatki osobiste: błędy projektu, struktury kodu, szablony.

Przykład dla dewelopera: centralny wierzchołek "app.websketch", gałęzie — bugs, features, z koordynatami do niestandardowego ułożenia.

Realizacja techniczna

Rozwinięto na GWT 2.12.2 (początkowo 2.4.0 pod Eclipse 3.5). Frontend parsuje i renderuje drzewo, trzy serwlety po stronie backendu:

• Przesyłanie pliku.
• Pobieranie pliku.
• Wybieranie sąsiednich wierzchołków według klucza (skanowanie tekstowe).

Aktualizacja GWT spowolniła ładowanie o 10–20%. Brak bazy danych — serwer czyta cały plik i filtrowanie odbywa się według aktualnego słowa. Permalink bez uwierzytelniania: udostępnienie linku daje pełny dostęp.

Przykład z koordynatami:

BUGS FEATURES README TESTS 0 0 BUGS FEATURES FEATURE#1 ⌂BUGS[+100,+0]

GUI rysuje połączenia, wspierając ciągi słów jako pojedyncze węzły.

Co jest ważne

• Format tekstowy kompatybilny z notepadem/git, parsowanie bez zależności.
• Automatyczne pozycjonowanie na podstawie skrótu upraszcza przywracanie układu.
• Zagnieżdżanie tablic dla hierarchii bez utraty wydajności.
• Minimalistyczny stos: GWT + serwlety, bez bazy danych.
• Kontrola integralności poprzez skrót do współpracy zespołowej.

— Editorial Team