PETROGLYPH // Идеям нужно пространство

Заметки, которым тесно в блокноте

Текст, код, картинки, PDF, веб-страницы, аудио и видео на одной бесконечной канве. Соединяйте их стрелочками, рисуйте поверх референсов и собирайте идеи в наглядные схемы. Показываю, что умеет Petroglyph моё приложение для визуальных заметок, в котором файлы остаются у вас, а организация мыслей не ограничивается линейной страницей.

Как я пришёл к созданию своего приложения для заметок

Все мы так или иначе ведём заметки. Сначала я пользовался обычным Блокнотом, но у него был один фатальный недостаток: он не поддерживал картинки. Потом попробовал Word. Это было… непросто. Ну, вы знаете.

Следующим был OneNote и с ним стало намного лучше. Я понял, что мне удобнее организовывать заметки не как линейный документ, а как карту: размещать отдельные блоки, группировать их и показывать связи. Так мне проще ориентироваться в информации и запоминать её.

Но для организации мыслей мне не хватало некоторых инструментов: стрелочек, бэкплейтов и, как выяснилось позже, многого другого.

Затем я попробовал Miro. Однако облачный подход мне не подошёл: хотелось хранить заметки у себя и работать с ними локально.

И тут я открыл для себя Obsidian. Казалось вот оно, используй Canvas и будет тебе счастье! Но чем дольше я с ним работал, тем чаще сталкивался с ограничениями своего сценария. Хотелось прозрачного фона у текстовых карточек, свободного размещения стрелочек, рисования на канве и поверх изображений, просмотра внешних текстовых файлов без необходимости копировать их в хранилище.

Я знаю, что многое можно решить плагинами, а Canvas не основное направление для Obsidian. Но для меня этих "но" оказалось слишком много .

В какой-то момент я отчаялся и решил сделать то что удовлетворит меня полностью.

Так родился Petroglyph.

Идея была простой: собрать всё, что относится к одной задаче, в одном пространстве. Чтобы картинка не жила отдельно от пояснения, код отдельно от заметок, а связи между ними не приходилось держать в голове.

Краткий обзор // Документ как рабочее пространство

Petroglyph организует информацию на масштабируемой канве. Вместо одной линейной страницы документ содержит карточки разных типов: текст, исходники, изображения, PDF, веб-страницы, аудио, видео и файловые вложения. Фигуры и надписи объясняю структуру, стрелочки показывают связи, а бэкплейты объединяют связанные части.

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

Общее поведение карточек

Карточки можно выделять, перемещать, копировать, вырезать и удалять. Для большинства типов доступны изменение размера и управление порядком отображения. Исключения задаются типом: например, точка не масштабируется как обычная карточка.

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

Заголовки и оформление

Customize Title открывает отдельный редактор заголовка. В нём можно изменить сам текст, шрифт, размер и цвет, включить жирное и курсивное начертание, подчёркивание или зачёркивание. Поддерживаются горизонтальное направление и два вертикальных: снизу вверх и сверху вниз.

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

Стиль можно сбросить через Reset To Default или скопировать через Copy Style. Вставка стиля по Ctrl+V применяет его к выделенным карточкам с нормализацией неподдерживаемых вариантов выравнивания. Если цвет заголовка не задан явно, он выводится из цвета рамки и делается немного ярче неё.

Групповые операции

При множественном выделении доступны выравнивание и распределение. Изменение размера рамки множественного выделения с Ctrl пропорционально меняет геометрию группы. Точки не увеличиваются вместе с остальными карточками. Если выделение содержит нелокальные ресурсы, появляется Make Selected Local.

Текстовая карточка: Markdown и небольшой файловый редактор

С текстовой карточкой можно начать как с обычной заметки, а потом добавить в неё исходники, файлы и целую папку проекта. Получается небольшой редактор прямо на канве: рядом с кодом можно держать схему, скриншот и пояснение, зачем всё это вообще понадобилось.

Основным форматом остаётся Markdown. Для расширенного оформления внутри него могут использоваться HTML-фрагменты, например <span> с цветом или размером текста.

Визуальное редактирование

Текст можно редактировать непосредственно в представлении Markdown. Для выделения доступны жирное и курсивное начертание, подчёркивание, зачёркивание, цвет текста, цвет фонового выделения, увеличение и уменьшение размера, очистка оформления. Выделенный фрагмент можно превратить в заголовок одного из первых трёх уровней или оформить как ссылку через диалог адреса.

Начало строки с '-' автоматически превращается в элемент списка; '[]' в начале строки создаёт checkbox-элемент. Show Source переключает между визуальным представлением и исходником; выбранный режим сохраняется. Show Background управляет фоном всей карточки, а не отдельной записи аутлайнера.

Изображения вставляются из файла через Insert Image либо через Ctrl+V из буфера обмена, включая случай, когда в буфере находится файл картинки. Для выбранного изображения доступны изменение размера и выравнивание относительно текста. Ctrl+клик по ссылке открывает её системным обработчиком.

Исходники и подсветка

Режим Code позволяет показать всё содержимое как код, без обрамления Markdown-блоком. Для обычного Markdown поддерживается подсветка fenced-блоков с указанием языка. Реализованы C++, Python, JSON, XML/XAML, CMake, JavaScript, TypeScript, Kotlin и Swift. В Show Source отображаются номера строк. Tab вставляет четыре пробела; Shift+Tab снимает отступ. Lock запрещает изменение содержимого, но оставляет доступными чтение, прокрутку и выделение.

Аутлайнер

Слева от редактора находится скрываемый аутлайнер. В него можно добавлять:

• встроенные текстовые записи с собственными именами;

• отдельные локальные или внешние файлы;

• папки и подпапки, содержимое которых строится по файловой системе.

Перетаскивание файлов на карточку добавляет их в аутлайнер. Двойной клик открывает выбранный файл справа, автоматически выбирая подходящий режим и язык. Для бинарного содержимого вместо текстового редактора появляется сообщение Binary File.

У каждой строки есть кнопка удаления из аутлайнера; это не команда удаления исходного файла с диска. Контекстное меню поддерживает добавление встроенной записи, файла или папки, а для файловых ресурсов - Show In Folder, Open In System и Copy Path. Встроенные записи можно переименовывать, их иконки отмечены синей полоской.

Show Outliner управляет видимостью дерева. В автоматическом режиме одна запись не требует видимого аутлайнера, несколько записей раскрывают его.

Файловые изменения

Внешние и локальные текстовые файлы сохраняются отдельно от основного '.pghp'. Для них доступны Save и Reload Source; при нескольких несохранённых файлах - Save All. Reload Source отбрасывает несохранённые изменения и перечитывает исходник. Фоновая проверка сообщает об изменении файла на диске и предлагает перезагрузку.

Несохранённое состояние отмечается красными индикаторами. При закрытии документа изменённые файловые записи формируют отдельный список с выбором того, что сохранить. Обычная заметка, созданная вручную, по умолчанию встроена; импортированный текстовый файл по умолчанию использует External, если настройки не задают другое поведение.

Поиск и замена

Find / Replace доступен в тулбаре, контекстном меню и по Ctrl+F. В верхней части редактора появляется панель запроса с учётом регистра, целыми словами, regexp, Find, Next и Previous. Раскрываемая вторая строка содержит замену, Replace и Replace All.

По умолчанию поиск ограничен активным файлом. In All Documents открывает отдельное немодальное окно с теми же параметрами, списком совпадений слева, форматированным фрагментом справа.

Закладки

Текстовая карточка дополнительно поддерживает закладки конкретных строк в Show Source. У каждой записи аутлайнера может быть собственный набор. Внизу появляется навигация по закладкам: список, предыдущая/следующая и обзор. Навигация прокручивает к строке, не раскрывая каждый раз окно редактирования комментария.

Карточка изображения: референс и слой аннотаций

Изображение можно добавить через Add Image, перетаскиванием или из буфера обмена. Карточка поддерживает Baked, Local и External. Для связанного изображения доступны смена содержимого, Show In Folder и преобразование способа хранения. Отдельная команда Change Content From Clipboard заменяет содержимое данными буфера обмена.

Подменю Transform объединяет Rotate, поворот на 90° по и против часовой стрелки, отражение по горизонтали и вертикали. Rotate открывает редактор угла.

Поверх картинки можно рисовать на отдельном слое: кистью, маркером, линиями, фигурами, ластиком и текстом. Есть настройки цвета, размера, сглаживания и оформления текста. Операции рисования можно подтвердить или отменить; слой можно показывать, скрывать и очищать. Изображение и слой аннотаций не сводятся в одну необратимую картинку, но при копировании картинки слой анотаций учитывается.

Доска Whiteboard: рисование без растягивания штрихов

Whiteboard использует инструменты рисования изображения, но отличается устройством холста. Его размер следует за размером карточки: существующие штрихи не масштабируются, а рабочая область расширяется. При изменении размера за левый или верхний край новое пространство добавляется с соответствующей стороны.

Фон выбирается из трёх вариантов: белый, тёмный или прозрачный. При индивидуальном редактировании уже существующей доски рисование само по себе не меняет размер карточки.

Отдельный сценарий - глобальный Paint Mode с красной рамкой канвы. Первый штрих создаёт прозрачную доску под местом рисования. Она расширяется по необходимости с запасом; начало следующего рисунка на доске, созданной в этом режиме, позволяет продолжить общий холст. Рисунок на свободном месте создаёт отдельную доску. Тулбар закреплён сверху по центру, а созданные доски не отвлекают рамками выделения. Курсор соответствует инструменту; у текста есть предварительное положение до клика. После выхода созданные доски подрезаются под содержимое, пустые удаляются.

Надпись Label: лёгкий текстовый ориентир

Label предназначен для заголовков разделов, коротких пояснений и концов стрелочек. Это не полноценный Markdown-редактор: видимый текст хранится в заголовке карточки. Размер текста и его цвет настраиваются; выравнивание по умолчанию - по центру.

В режиме создания стрелочки клик по свободному месту создаёт надпись и сразу включает редактирование её текста.

Фигура Shape: векторный словарь схем

Shape содержит векторную фигуру и заголовок в её центре. Отдельной фоновой подложки за фигурой нет: изменение цвета задаёт заливку самой формы.

Доступны квадрат, ромб, круг, звезда, человек, геймпад, лампочка, мозг и кинохлопушка. Квадрат, ромб и круг допускают независимое изменение ширины и высоты; остальные пиктограммы сохраняют пропорции изображения фигуры внутри доступной области.

Точка Dot: компактный узел соединения

Dot - небольшой цветной узел для построения схем и маршрутов. У него есть собственная подпись, но нет большой области содержимого. Размер точки не изменяется как у обычной карточки, в том числе при пропорциональном преобразовании множественного выделения. В режиме создания стрелочек Shift позволяет создавать конечную точку и продолжать цепочку соединений. Точку также можно добавить на существующую стрелочку двойным кликом по самой стрелочке.

PDF: документ внутри визуального документа

Add Pdf View открывает диалог выбора PDF; поддерживается и перетаскивание файла. Карточка показывает страницы без необходимости открывать отдельное внешнее окно. Поле номера страницы одновременно отображает текущую страницу и позволяет перейти к указанной; номер сохраняется между сессиями. PDF поддерживает только Local и External. Доступны смена файла, Show In Folder и открытие системным приложением через Open In App

Web View: живой веб-источник

Веб-карточка создаётся вставкой ссылки из буфера или командой Add Web View с вводом адреса. Она содержит браузерную страницу, а не снимок экрана. Ограничение: отображение страницы зависит от возможностей Qt WebEngine. Сам документ не является офлайн-архивом веб-источника.

Видео: просмотр, сравнение и плейлист

Видеокарточка содержит видеоповерхность и ряд управления: воспроизведение, временная шкала, текущая позиция/длительность, громкость, mute и полноэкранный режим.

Плейлист находится слева, отделён сплиттером и включается через Show Playlist. Файлы добавляются перетаскиванием на карточку; одинарный клик выбирает строку, двойной начинает её просмотр. Есть удаление строки и изменение порядка перетаскиванием. При нескольких записях появляются Previous Video / Next Video. Когда текущий файл заканчивается, воспроизведение переходит к следующему; список циклический.

Видео использует Local или External стратегию ресурса. Поддержка конкретного контейнера и кодека определяется Qt Multimedia и поставленным мультимедийным бэкендом.

Аудио: компактный проигрыватель с подборкой записей

Аудиокарточка содержит Play/Pause, временную шкалу, текущую позицию и длительность, имя файла, mute, переключатель repeat и шкалу громкости. При нескольких файлах возле названия появляются кнопки предыдущей и следующей записи.

Плейлист располагается снизу. Он также скрывается через Show Playlist, имеет сплиттер, удаление строк и изменение порядка. Переключение записи - по двойному клику; одиночный выбирает строку. Если повтор текущего файла не включён, по завершении проигрывается следующая запись, после последней - первая.

Ресурсные стратегии и переносимость аналогичны видео: Local/External без помещения аудиоданных в JSON. В контекстном меню доступны смена содержимого и Show In Folder.

File: универсальное вложение

File представляет произвольный файл значком и заголовком. Он нужен, когда для формата нет специализированной карточки или когда материал требуется хранить как вложение, а не открывать во встроенном редакторе. Поддерживаются Local и External стратегии. Двойной клик настраивается: открыть сам файл системным приложением либо показать его в папке. При перетаскивании Shift позволяет обойти специализированный импорт и вставить файл как обычное вложение.

Стрелочки: связи как самостоятельные объекты

Стрелочки привязаны к карточкам и следуют за ними при перемещении и изменении размера. Можно перестраивать схему, не поправляя вручную каждое соединение. У самой стрелочки настраиваются цвет, стиль, пунктир, наконечники и текстовая подпись.

Реализованы три стиля:

• Curve - кривая с управляющими точками, удобная для свободных карт и mindmap;

• Straight - прямая без промежуточных управляющих точек;

• Orthogonal - прямоугольный маршрут, где контрольные векторы задают направление выхода и входа, а не обязательные удалённые вершины линии.

Наконечники включаются на начале и конце. В режиме редактирования последнее выбранное сочетание стиля и dashed переносится на следующие создаваемые стрелочки.

В режиме создания клик по пустому месту завершает соединение новой надписью. Shift создаёт точку для продолжения цепочки. Начальные цвета и стиль задаются в настройках General.

Стрелочка может иметь собственные комментарии.

Бэкплейты: структура, которую можно свернуть

Бэкплейт - отдельная область группировки со своим цветом, заголовком и набором содержащихся объектов. Он создаётся вручную либо вокруг текущего выделения через Add Backplate Around Selection / Shift+G.

Когда схема разрастается, бэкплейт можно свернуть в компактную карточку. Содержимое и внутренние связи скроются, а внешние стрелочки останутся подключёнными к группе. Её можно переместить и снова раскрыть - карточки переедут вместе с ней. Вложенные бэкплейты тоже поддерживаются.

Lock в тулбаре запрещает добавление новых карточек внутрь бэкплейта, но позволяет убирать существующие. Это не полный запрет редактирования всех вложенных объектов: это ограничение состава группы, в отличие от Lock текста.

Комментарии и закладки: два уровня контекста

Comment доступен для карточек, точек, стрелочек и бэкплейтов. При наличии обсуждения появляется значок, открывающий окно комментариев. Комментарии содержат автора, необязательную почту, дату и Markdown-текст; поддерживаются редактирование, удаление, подсветка кода и ссылки, открываемые системой.

Bookmarks Overview в главном тулбаре объединяет закладки и комментарии текущего визуального документа. Окно содержит изменяемые сплиттером области списка и просмотра; двойной клик фокусирует связанный объект. Можно удалить заметку целиком.

Ресурсы: три стратегии и практические границы переносимости

• Baked / embedded хранит текст или PNG непосредственно в '.pghp'. Это подходит для автономных заметок и небольших изображений, но увеличивает размер документа.

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

• Local копирует ресурс в '<имя документа>.res' рядом с '.pghp'. При переносе нужно копировать оба объекта. Local в дереве - виртуальная категория, а не обязательное имя физической подпапки. Внутри .res разрешены свои папки и подпапки.

  

  Для ресурсов доступны Make Local, а для текста и изображения - Bake Into Document. Команды показываются с учётом текущего состояния: уже локальному ресурсу не нужна Make Local, уже встроенному изображению - повторное запекание. Изображение из буфера не должно зависеть от несуществующего внешнего оригинала: при External оно становится локальным, либо используется поддерживаемое встроенное хранение согласно настройке.

Дерево открытого документа показывает Local, References и Links. Ресурсы можно переименовывать и переносить между папками с обновлением ссылок. Find Item/Find References позволяет найти использующие их карточки. Удаление ресурса с зависимостями требует отдельного просмотра; Remove Garbage Resources показывает список файлов без ссылок с выбором удаляемых.

Шифрование: защита от посторонних глаз

Для пароля используется AES-256; защищаются документ и локальные ресурсы. Внешние оригиналы и живые сайты не становятся зашифрованными только из-за пароля. После закрытия временные расшифрованные ресурсы очищаются, а неудачные очистки фиксируются и повторяются; проблемный документ имеет отдельный индикатор и Show Problem.

Мышиные жесты и шаблоны документов: управление канвой без постоянного обращения к меню

Petroglyph предлагает два взаимодополняющих способа ускорить работу. Мышиные жесты сокращают путь от действия к результату непосредственно на канве. Шаблоны позволяют повторно использовать не отдельную команду, а целую структуру документа: расположение карточек, стрелочки, группы и подготовленные материалы. При построении карты идей пользователь может жестами добавлять подписи и текст, переходить к рисованию или соединению карточек. Повторяющийся результат - например, структуру технического разбора - можно сохранить как шаблон и использовать в следующих документах.

Жест выполняется в области канвы одним из двух способов:

• Зажать среднюю кнопку мыши, провести движение и отпустить кнопку.

• Зажать Ctrl и правую кнопку мыши, провести движение и отпустить кнопку мыши.

Команда выполняется после отпускания кнопки. Для команд добавления ориентиром служит точка начала жеста в координатах документа, а не его конец. Конкретный тип карточки может использовать собственное смещение относительно этой точки: например, надпись и точка размещаются с поправкой на свои размеры. Движение распознаётся по четырём основным направлениям: вверх, вниз, влево и вправо. Есть простые жесты из одного направления и составные из двух. Поворот и возврат - разные действия: → ↓ отличается от ↓ →, а → ← считается отдельным жестом.

Направленные жесты не следует путать с другими действиями мышью:

Переключение колесом, это мышиный аналог Ctrl+Tab и Ctrl+Shift+Tab: используется порядок обращения к документам, а не только их расположение в строке вкладок. Очередь использования сохраняется между сессиями; закрытые вкладки удаляются из неё. Встроенные редакторы, проигрыватели и браузерные страницы могут обрабатывать события в своей области: описание жестов относится к событиям, поступившим канве.

Шаблон в Petroglyph - сохранённая основа документа. Он содержит сериализованную сцену: карточки, стрелочки, бэкплейты, оформление и данные, которые соответствующие типы объектов сохраняют в .pghp.

Это позволяет подготовить рабочую структуру один раз: секции для гипотез, области референсов, пустые текстовые блоки, связи между этапами и пояснения. Новый документ получает эту структуру для дальнейшего независимого редактирования.

В заключение

Работа над Petroglyph продолжается: ещё предстоит заняться оптимизацией и доработать интерфейс. В планах: поддержка таблиц, CSV и SVG, графиков и диаграмм, скриптов на питоне. А если проект вызовет интерес, хотелось бы добавить сервер документов с совместным редактированием и другие возможности.

Но уже сейчас Petroglyph закрывает большинство моих потребностей в организации заметок ради этого всё и затевалось.

Я разрабатываю приложение в свободное от основной работы время, поэтому не обещаю конкретных сроков и строгого графика обновлений. Проект развивается по мере моих возможностей, идей и обратной связи.

Скачать Petroglyph можно совершенно бесплатно на моём Boosty. Там же можно поддержать разработку, если приложение оказалось вам полезным или просто понравилась идея.

Спасибо, что дочитали! Буду рад вашим впечатлениям, предложениям и примерам того, как вы организуете свои заметки.