Приложение sketches — доска для набросок / Хабр

Доброго дня

В 2011 году у нас была идея сделать на web онлайн mind-web доску и недавно идея воплотилась в реальность.

Название приложения - "Наброски", или WebSketch, ссылка.

Зачем ещё одна доска на web, если есть Miro и т.д.

Во первых, получилась не совсем доска, а что-то вроде текстовой доски для набросок в стиле mermaid.live. По итогу, я её так и переименовал, когда пришло понимание, что это на самом деле не совсем mind web.

Во вторых, задумывался проект в далеком 2011 году, когда подобного, по крайней мере на слуху, не было, и так как проект в итоге перерос в что-то вроде проекта-песочницы для меня, где я изучал некоторые аспекты программирования, то я его решил в итоге завершить до MVP, когда время появилось.

В третьих, проект написан на GWT и в итоге, оказалось, что работает быстро, и им довольно комфортно пользоваться, не думал, что вести свои заметки окажется удобным, но это так.

В четвертных, в процессе кодирования, была мысль сделать формат, в котором хранится mind-web удобным. Первоначально предполагалось, что вообще можно будет загрузить текст из notepad'a, и алгоритм сам все представит в mind-web, но по итогу пришлось усложнить алгоритм, так как захотелось поддержки координат вершин, если она требуется, и вложенности страниц.

В пятых, сейчас, возможно, проект кому-то пригодится, не только мне, идеально было бы использовать его, например, на Daily Standup и хранить в mind-web одни короткие наименования задач. А также возможные применения проекта ниже.

Описание, как работает

Наиболее точно websketch можно представить, как лист бумаги, с которого начинается каждый проект. Обычно собирается команда, и начинает на листе бумаги (или настоящей доске) рисовать квадраты с текстом. Если кто-то будет использовать проект для таких целей, то замечательно.

Поддержка только Desktop версии, предполагается, что эта доска для работы в офисе
Поддерживается только текст, т.к. для остального есть другие продукты. Кроме того, изначально предполагалось и предполагается, что только слова. По этой причине пробелы блокируются
Пользователь создает новые вершины, используя Ctrl+ перетаскивание, каждая вершина привязана к существующей, связи между вершинами - используя Shift
В каждую вершину-textbox можно провалиться двойным нажатием (но если два раза нажать на центральную вершину, то сейчас идет переход на статью в википедии по данному слову), при этом открывается новая доска, где в центре только эта вершина и можно создавать новые вершины-textbox'ы находясь на этой вложенной доске
координаты вершин (текстбоксов) не сохраняются, если обновить страницу или нажать на заголовок Tab, то система присвоит вершине определенные координаты, рассчитанные на основе ее хеша. То есть TextBox будет появляться всегда в одном и том же месте
Если понадобилось все-таки сохранить координаты вершин, то нужно из центральной вершины создать вершину и записать в нее символ домика: Alt+127, тогда автоматически добавятся все координаты вершин в виде текста

Доска подойдёт если нужно:

На Daily Standup записать номера тикетов Jira, а ждать когда загрузиться Jira не хочется
Для нового проекта накидать, например, список технологий, сроки или что угодно
Для существующего проекта можно хранить websketch в git, и добавлять новое по мере разрастания проекта, наподобие mermaid.live. Например, новый девелопер может получить одной ссылкой на app.websketch сразу все ссылки, и это будет не файл в notepad, а что-то более красивое, с вложенностью, к тому же находящееся в git самого проекта
Как использую я? 1) для ведения багов самого проекта app.websketch 2) для запоминания разных конструкций в программировании, которые трудно запомнить, но всегда нужны 3) планирую на Standup.

Далее можно читать только тем, кто заинтересовался

По возможности информация, о том, как пользоваться, есть на самой доске, но времени всегда нет, и там скудно, поэтому коротко несколько пояснений:

Сначала вы попадаете на общую доску, которую видят все. Так было изначально и переделывать времени нет. Планировалось, что на этой доске участники самого проекта app.websketch будут писать нечто важное. Поэтому сразу нажимаете на "Создать свою доску".

После создания доски на ней уже есть элемент - это ноль. Почему так? Хотелось, чтобы вся доска была связанной от центральной вершины, поэтому ноль. Страница всегда грузиться с этой вершиной по центру, поэтому её нужно было как-то назвать.

На закладке "Старт" есть код страницы и можно что-то поменять в коде и увидеть, как отобразиться на закладке, вернувшись на нее по аналогии с mermaid.live. Так можно понять, какой формат используется, вкратце - пары значений, разделенные символами "0 0" и пятью пробелами (почему пять - зарезервировано для дальнейшего развития).

Есть кнопки загрузить из файла / в файл. Если вы где-то ошиблись можно воспользоваться ими и поправить файл вручную в notepad удалив что-то, если разбираетесь в формате.

Удалить/отредактировать ничего на доске нельзя. Поэтому доска, это аналог листа, на котором вы все рисуете, а удалить с него нельзя. Можно только взять новый лист - для этого кнопка "Очистить".

Система при переходе на страницу из общего файла грузит с сервера только нужное для текущей страницы.

Работает поиск слов по всему mind-web, не только по текущей странице.

В правом верхнем углу есть набор черточек в квадратах, это хеш всего mind-web или текущей страницы, фактически не используется, только как напоминание пользователю, что для каждой страницы рассчитывается хэш, и если, например, на сервере, кто-то что-то изменит в mind-web файле, то вы увидите уведомление, что кто-то влез в ваши доски и что-то поменял (по умолчанию можно только добавлять). Будет удобно, если расшарить доску всей команде и следить, чтобы только добавляли, а ничего не меняли.

Есть permalink, логины и пароли отсутствуют. Если вы поделились ссылкой с кем-то, то он может делать с вашей доской что угодно. Если захочется создать новую доску, то сейчас только очисткой cookies сайта.

Технические детали

Изначально было разработано под Eclipse 3.5/GWT 2.4.0. На сервере чтение текстового файла с mind-web, выборка из текста только данного слова, на котором мы находимся. То есть на сервере нет никакой даже простой БД. Алгоритм просто берет и сканирует файл на данной слово и выбирает все соседние.

Спустя время, пришлось обновиться до GWT 2.12.2 и современный Eclipse. С удивлением обнаружил, что после обновления GWT загрузка страницы процентов на 10-20 стала медленнее, чем старый 2.4.0.

Код, это 3 сервлета и сложный код на Frontend части для парсинга и рисования дерева.

2 сервлета для upload file, download file, и один сервлет, который возвращает с backend только близкостоящие слова к текущему.

Как выглядит файл с mind-web: если, например, создана одна вершина "BUGS", то выглядит так:

0 0 0 BUGS

, где 0 - корневая вершина, а 0 0 - это разделитель. Хотя без разделителя будет работать, так как разрабатывалось вначале, чтобы распарсить обычный файл, разделённый пробелами. Например, если подложить на странице "Start" такой файл/текст (формат с 5 разделенными пробелами):
BUGS FEATURES README TESTS

То на выходе будет такая страница:

Если добавить разделитель, то связи не будет между словами. То есть добавляем: 0 0 FEATURES FEATURE#1, получаем исходный файл:

BUGS FEATURES README TESTS 0 0 FEATURES FEATURE#1

На выходе видим такую картину:

Это если редактировать на сайте через вкладку "Start" для понимания, как работает алгоритм. Но более правильно описать ту же структуру так:

BUGS FEATURES README TESTS 0 0 BUGS FEATURES FEATURE#1

Потому что, с сервера алгоритм забирает только соседние слова разделенные 5 пробелами.1 пробел в слове алгоритм считает, что это цепь слов, но с сервера оно приходит целиком, так как для сервера это одно слово. То есть такими цепочками можно создавать связи. GUI рисует эти связи. Которые также можно создать и с помощью клавиатуры и мыши. Цифры в квадратных скобках - это общее количество раз, которое встречается слово.

Можно сдвинуть вершину BUGS вправо на 100 пикселей, если не понравилось, какие координаты для нее выбрал алгоритм, добавить такой текст: ⌂BUGS[+100,+0] (символ дома Alt+127). Получится так:
BUGS FEATURES README TESTS 0 0 BUGS FEATURES FEATURE#1 ⌂BUGS[+100,+0]

Разделитель выбран такой, чтобы в дальнейшем было легко превратить его в 0. То есть текст, который, например, новый, или не разобран, чтобы можно было быстро пристыковать к центральной вершине 0.

Создал каналы в Telegram / Max, посвященных Наброскам.