Этот документ описывает, как создавать и редактировать генеалогические древа на сайте ВГД. Сначала идут общие понятия, затем — подробности по каждому действию отдельно для компьютера и для телефона / планшета.
ЧАСТЬ 1. ОБЩИЕ ПОНЯТИЯ
Древо
Древо — это рабочий холст, на котором размещаются персоны, связи между ними и текстовые подписи. У каждого древа есть название, числовой ID и единственный автор. Адрес древа выглядит как https://vgd.ru/tree/?n=<id>.
Персона
Иконка одного человека на холсте:
• Мужчина — квадрат.
• Женщина — круг.
У каждой персоны можно указать имя, фамилию, девичью фамилию, даты рождения и смерти, ссылку на поисковую тему форума ВГД и цветовую метку.
Связь (родитель — ребёнок)
Линия от ребёнка к родителю. У одной персоны может быть не более двух родителей: один отец (мужчина) и одна мать (женщина). Программа автоматически блокирует попытки создать второго родителя того же пола, дубликат связи или ситуацию, в которой потомок становится родителем своего предка (цикл).
Надпись и комментарий
Свободные текстовые блоки, не привязанные к персонам. Используются для названий ветвей, пояснений, ссылок на источники. Можно настраивать цвет, размер шрифта и выравнивание (по центру, влево, вправо).
Режимы
• Редактирование — доступен автору древа и администраторам форума. Можно добавлять, удалять, перемещать, переименовывать.
• Только чтение — для гостей и других пользователей. Просмотр + переход по родственным связям через карточку персоны.
Сохранение
Программа сохраняет изменения автоматически каждые несколько секунд. Иконка «Редактирование» в нижнем меню коротко мигает:
• Жёлтым — сохранение прошло успешно.
• Красным — сервер вернул ошибку.
Если ошибки повторяются подряд — сверху появляется оранжевый баннер «Сохранение недоступно с XX:XX». Закрывать вкладку до восстановления связи не нужно: ваши изменения остаются в браузере и уйдут на сервер при первом успешном автосохранении.
Фокус-персона
В каждом древе можно выбрать одну стартовую персону. Когда древо открывают по ссылке, оно автоматически центрируется на ней. Помечается красноватой подложкой под именем.
Главные элементы интерфейса
• Верхняя полоска — слева название древа (клик открывает карточку «О древе»), справа — ник пользователя или кнопка «Войти».
• Нижнее меню — четыре вкладки: Древо, Редактирование, Поиск, Масштаб. На мобильном — горизонтально прокручиваемая полоска.
• Меню пользователя — выпадает по клику на ник: «Создать новое древо», «Список всех древ», «Профиль», «Выйти».
ЧАСТЬ 2. ПОДРОБНЫЕ ДЕЙСТВИЯ
1. Создание нового древа
Клик по нику в правом верхнем углу — «Создать новое древо». Если вы залогинены — откроется новое пустое древо, и сразу появится диалог «Древо создано / Придумайте название». Введите название (до 50 символов) и нажмите «Сохранить» или «Пропустить», если хотите оставить автоматическое имя «Древо ИмяАвтора №N».
Если вы не залогинены — программа отправит на страницу входа на форум; после успешного входа древо создастся автоматически.
2. Перемещение по холсту
Десктоп
• Зажать левую кнопку мыши на пустом месте — потащить холст в нужную сторону.
• Колесо мыши — изменить масштаб (центрируется по курсору).
Мобильный
• Один палец по пустому месту — пан.
• Щипок (два пальца расходятся) — приблизить.
• Щипок (два пальца сходятся) — отдалить.
Кнопки масштаба (одинаково на всех устройствах)
Нижнее меню — «Масштаб»:
• «+» — приблизить.
• «−» — отдалить.
• «100%» — вернуть к натуральному масштабу (только на десктопе).
• «На весь экран» — полноэкранный режим. Если страница встроена в iframe без разрешения, кнопка откроет древо в новой вкладке.
Минимальный масштаб — обзор всего древа целиком. Максимальный — крупный план. При сильном уменьшении подписи у персон автоматически скрываются — на этом масштабе они всё равно нечитаемы.
3. Добавление новых персон
Десктоп
Нижнее меню — «Редактирование» — кнопка «Мужчина» или «Женщина». Появляется призрак иконки, следующий за курсором: кликнуть в нужное место — иконка зафиксируется и сразу откроется форма редактирования.
Мобильный
Нижнее меню — «Редактирование» — тап по «Мужчина» или «Женщина». Иконка ставится в центре экрана с лёгким случайным смещением. Можно сразу нажимать снова — каждое нажатие добавляет новую иконку рядом, без перекрытия.
Через контекстное меню существующей персоны
Тап / клик по любой персоне — в открывшемся контекстном меню есть пункты:
• «Добавить отца» / «Добавить мать» — если соответствующего родителя ещё нет.
• «Добавить родителей» — если оба родителя отсутствуют. Создаст сразу обоих и автоматически свяжет их с этой персоной.
• «Добавить брата» / «Добавить сестру» — доступно только когда у текущей персоны указаны оба родителя; новые брат / сестра автоматически связываются с теми же родителями.
При вставке родителей или сиблингов другие иконки на той же стороне сдвигаются, чтобы освободить место. Соседние ветви остаются на своих местах.
4. Связи между персонами вручную
Чтобы вручную указать кого-то родителем уже существующей персоны:
• Открыть контекстное меню персоны-ребёнка — пункт «Указать родителя».
• Вокруг этой персоны появится красная подсветка, сверху баннер «Выберите родителя».
• Кликнуть / тапнуть по персоне-кандидату.
• Если всё в порядке — связь создана. Если нет — короткое сообщение сверху объяснит причину («У персоны уже указан отец», «Эта связь уже есть», «Нельзя сделать родителем потомка»).
Отмена режима — кнопка «Отмена» в баннере или клавиша Escape (на десктопе).
5. Редактирование персоны
Открытие формы
• Десктоп — двойной клик по иконке.
• Мобильный — тап по иконке, в контекстном меню «Свойства».
Поля формы
• «Имя», «Фамилия», «Девичья фамилия».
• «Дата рождения», «Дата смерти» — в свободном формате («1900», «1 января 1900», «1900–1905»).
• «Поисковая тема» — ссылка на тему форума ВГД. Распознаются форматы: полный URL вида https://forum.vgd.ru/?t=12345, ссылка вида https://forum.vgd.ru/123/12345/page.htm, или просто номер темы. Хранится только числовой ID; в карточке выводится канонический http://forum.vgd.ru?t=<id>.
• «Цвет» — палитра из 8 цветов. Белый = «без метки».
Сохранить — кнопка «Сохранить» внизу формы. Закрыть без сохранения — кнопка «×» или Escape.
6. Перемещение и группы
Перетаскивание одной персоны
• Десктоп — зажать ЛКМ на иконке и тащить.
• Мобильный — палец на иконке и тащить.
Множественное выделение
Десктоп:
• Shift + клик по персоне — добавить или убрать её из группы выделения.
• Shift + потянуть мышью по пустому месту — рамка-marquee. Все, кто попадает внутрь, добавляются в группу.
Мобильный:
• Долгое нажатие на пустом месте, не отпуская — потянуть пальцем для рамки. Внутри рамки выделяются все попавшие персоны.
Когда выделено хотя бы две персоны, сверху появляется баннер с количеством и кнопками «Удалить» / «Снять».
Также из контекстного меню одиночной персоны можно выбрать целые группы родственников: «Выбрать» → «Предки» / «Потомки» / «Все родственники» / «Мужская линия».
Перетаскивание группы
При активном множественном выделении — потянуть за любого выделенного, и вся группа сдвинется как одно целое.
7. Окрашивание
Контекстное меню персоны — «Покрасить». Появится цветовая палитра. Можно:
• Просто выбрать цвет — окрасит только эту персону.
• «Покрасить предков» — окрасит этого человека и всех его предков по обоим линиям.
• «Покрасить потомков» — этого человека и всех его потомков.
• «Покрасить и тех, и тех» — всю родственную ветвь.
• «Покрасить мужскую линию» — только по мужской линии наследования.
8. Удаление
Одна персона
Контекстное меню — «Удалить». Подтверждения нет, но удалённая персона перестаёт быть видимой; все её связи также пропадают. Если удалили по ошибке — обновите страницу до автосохранения, и персона восстановится.
Группа
При активном множественном выделении — кнопка «Удалить» в верхнем баннере. Удаляются сразу все выделенные персоны со связями.
9. Поиск
Нижнее меню — «Поиск». В открывшейся модалке начните вводить имя, фамилию или год. Результаты появляются по мере ввода. Поиск идёт по: имени, фамилии, девичьей фамилии, датам жизни.
Клик по результату — модалка закроется, программа сбросит масштаб на 1× и центрирует холст на найденной персоне.
10. Карточка «О древе»
Открывается кликом по названию древа в верхней полоске. Содержит две вкладки.
Вкладка «Основное»
• Название древа (с кнопкой «Переименовать»).
• ID древа.
• Автор — ссылка на профиль на форуме.
• Счётчики: персон, мужчин, женщин.
• Фокус при открытии — если задан, ссылка на персону.
• Режим — «Редактирование» или «Только чтение».
• Роспись — текстовая версия древа в новой вкладке.
Вкладка «Поделиться»
Готовые сниппеты для встраивания древа на других ресурсах:
• HTML-iframe для произвольного сайта.
• BB-код [bigtree=N] — большая встройка на форуме ВГД.
• BB-код [tree=N] — компактная встройка на форуме.
• Прямая ссылка на древо.
У каждого блока — кнопка «Копировать». После клика появится подтверждение «Скопировано» на полторы секунды.
11. Переименование древа
В «О древе» на вкладке «Основное» под названием — кнопка «Переименовать». В диалоге ввести новое название:
• Длина — до 50 символов.
• Пустое название не принимается; кнопка «Сохранить» разблокируется только когда поле заполнено.
• Enter сохраняет, Escape закрывает без изменений.
После сохранения новое название сразу появляется в верхней полоске.
12. Удаление древа целиком
Доступно только владельцу или администратору форума. Нижнее меню — «Древо» — крайняя справа красная кнопка «Удалить».
Откроется диалог с предупреждением. Чтобы подтвердить:
• Введите код «42» в указанное поле (код подсвечен в тексте предупреждения).
• Кнопка «Удалить» разблокируется только при правильно введённом коде.
После удаления страница перенаправит на список ваших древ на форуме. Удаление мягкое: древо исчезает из списков, но файл остаётся на сервере. Восстановить может только администратор форума.
13. Список древ и переключение
Клик по нику — «Список всех древ». Откроется модалка со всеми вашими активными древами, отсортированными по дате последнего изменения (самые свежие — сверху). У текущего открытого древа — бейдж «Текущее».
Чтобы переключиться:
• Кликнуть на любое другое древо — оно выделится.
• Нажать «Переключиться» — программа сначала сохранит текущее, потом откроет выбранное.
Если у вас только одно древо — модалка покажет «Других древ нет» с кнопкой «ОК».
14. Экспорт
Нижнее меню — «Древо»:
• «Роспись» — текстовая версия древа (иерархический список персон) в новой вкладке.
• «Сохранить в PNG» — растровое изображение всего древа целиком.
• «Сохранить в SVG» — векторное изображение, масштабируется без потери качества.
15. Режим «Только чтение»
Если вы открыли чужое древо или вошли как гость — автоматически включится режим «Только чтение». Вкладка «Редактирование» в нижнем меню недоступна, контекстное меню при клике на персону не открывается.
Вместо этого тап / клик по персоне открывает её карточку, в которой видно:
• ФИО крупным шрифтом.
• Даты жизни.
• Поисковую тему (если есть) — с кнопкой «Перейти».
• Раздел «Родители» — отец и мать с датами и кнопкой «Перейти» (откроет карточку этого родителя в той же модалке).
• Раздел «Дети», сгруппированный по партнёрам:
◦ Заголовок группы «От: ФИО партнёра» с кнопкой «Перейти» к карточке партнёра.
◦ Список детей этого союза — у каждого своя кнопка «Перейти».
◦ Если партнёр неизвестен — «От: Нет данных».
По кнопкам «Перейти» можно последовательно ходить по родственным связям, не закрывая модалку.
ЧАСТЬ 3. КРАТКИЙ СПРАВОЧНИК
Десктоп
• Зум — колесо мыши.
• Пан — drag по пустому месту.
• Контекстное меню персоны — клик.
• Открыть форму редактирования — двойной клик.
• Перетащить персону — drag по иконке.
• Добавить в группу — Shift + клик.
• Прямоугольное выделение — Shift + drag по пустому месту.
• Закрыть модальное окно — Escape или ×.
• Сохранить значение в форме — Enter.
Мобильный
• Зум — щипок двумя пальцами.
• Пан — один палец по пустому месту.
• Контекстное меню персоны — тап.
• Открыть форму редактирования — контекстное меню → «Свойства».
• Перетащить персону — палец на иконке, тащить.
• Прямоугольное выделение — долгое нажатие на пустом месте, не отпуская, тащить.
• Закрыть модальное окно — × или нажать на затемнённый фон.