Требования
- рисование примитивных/произвольных/заготовленных фигур
- параллельная работа с объектами разными пользователями
- создание/изменение/удаление объектов
- работа с текстом
- курсоры пользователей
- исчезающие чернила
- undo/redo
- подсветка авторов фигур
- возможность рисования при демонстрации окна
Слои
Рендеринг доски
Интерфейс работы с доской
Объектная модель доски
Модель синхронизации
Транспорт
Presenter
Presenter
View
Viewer
INITIAL SYNC
Presenter
Participant
Viewer
Presenter
Participant
Viewer
Presenter
Participant
Viewer
Presenter
Participant
Viewer
Готовые решения
Рендеринг:
Konvajs, Fabricjs, Excalidraw, Tldraw
Интерфейс:
Excalidraw, Tldraw
Модель:
Excalidraw, Tldraw, Konvajs, Fabricjs
Синхронизация:
Yjs, Automerge
Транспорт:
jitsi & WebRTC
💩
💖
- Закрывает сразу 3 слоя
- Рендер
- Интерфейс
- Модель
- Куча фич из коробки
- Базовые инструменты рисования
- Библиотека изображений
- Готовый интерфейс для коллаборативного режима
- Undo Redo
- Нерасширяемый
- Нельзя добавить свои инструменты
- Нельзя гибко управлять элементами интерфейса
- Нельзя отключить перемещение/масштабирование
- Страшная реализация внутри
- Кривой undo/redo в коллабе
- React
Вывод: Невозможно/сложно реализовать все требования, зато дешево реализовать базовые
💩
💖
- Закрывает 3 слоя
- Рендер
- Интерфейс
- Модель
- Модульная архитектрура под капотом, можно напилить свой интерфейс используя только tldraw/core
- Можно запретить скрол и зум канваса в tldraw/core
- Можно расширять набор объектов
- Есть фичи для коллаба
- Рендер в DOM через React DOM
- React
- Производительность????
💩
💖
- Закрывает 2 слоя
- Модель
- Рендер
- Typescript
- Есть встроенный инструмент для перемещения и маштабирования объектов
- Низкоуровневая - все базовые инструменты придется реализовывать с 0
Вывод:
Многое придется реализовывать самим
💩
💖
- Закрывает 2.5 слоя
- Модель
- Рендер
- Немножко интерфейс
- Есть встроенные инструменты
- произвольное рисование кистью + поддержка разных кистей
- перемещение и трансформация
- работа с вводом/редактированием текста
- Расширяемость через наследование
- Олдсукльная
- плохая типизация
- своя реализация ООП
- Многое придется реализовывать самим
- Сложная модель
- Некоторые встроенные инструменты работают не та как хочется:
- Рисование кистью создает объект только после отпускания мыши
- Изменения текста оражаются в объекте только после расфокуса
но активно разрабатывается
версия с более современным API
Вывод:
Многое придется реализовывать самим, но меньше чем в konva)
💩
💖
- Закрывает 1 + 1 слоя
- Модель синхронизации
- Транспорт
- Надежная синхронность обусловленная матаном - CRDT
- Куча плагинов для транспортного уровня
- Есть плагин для undo/redo ✨
- Библиотека на слуху, там где идет речь о поддержки коллаба
- Сложная внутри - без бутылки водки не разберешься как она считает диффы и что она пересылает по сети.
- При одновременной работе с объектом не мержит, а перезаписывает
Сложно, но гибко и расширяемо
Рендеринг:
Fabricjs
Интерфейс:
Fabricjs + Напилим свой
Модель:
Fabricjs + Свои расширения
Синхронизация + undo/redo:
Yjs
Транспорт: ?
jitsi либо Yjs + бэкенд
Рендеринг:
tldraw/core
Интерфейс:
tldraw или Напилить свой
Модель:
tldraw/core + Свои расширения
Синхронизация + undo/redo:
Yjs
Транспорт: ?
jitsi либо Yjs + бэкенд
Проще но не так гибко, придётся тащить реакт
Толк - рисовалка
By Andrey Osipov
