Розробка онлайн-редактора презентацій
Онлайн-редактор презентацій — rich-інтерфейс для створення слайд-шоу з текстом, зображеннями, фігурами, анімаціями. Canvas-based рендеринг, drag-and-drop, спільне редагування. Розробка повноцінного аналога Google Slides потребує масштабної інженерної роботи; спеціалізований редактор для конкретного контексту (маркетингові матеріали, презентації даних) — реалістичний проект.
Архітектура рендеринга
Два підходи до рендеринга слайду:
DOM-based: кожен елемент слайду — HTML-елемент з абсолютним позиціонуванням. Простіше реалізувати, доступна для screen readers. Складно досягти pixel-perfect рендеринга при експорті.
Canvas-based: слайд рисується на <canvas>. Точний контроль над піксельним виводом, легкий експорт в PNG. Складніше інтерактивність (події, виділення тексту).
Fabric.js — Canvas-бібліотека з об'єктною моделлю (прямокутники, еліпси, текст, зображення), drag-and-drop, масштабування, групування:
const canvas = new fabric.Canvas('editor-canvas', { width: 1280, height: 720 });
const text = new fabric.Textbox('Заголовок слайду', {
left: 100, top: 50, width: 600,
fontSize: 48, fontFamily: 'Inter',
fill: '#1a1a2e',
});
canvas.add(text);
canvas.setActiveObject(text);
Konva.js — аналог Fabric, орієнтований на React з react-konva.
Модель даних слайду
Presentation → Slides → Elements. Кожен елемент — JSON-об'єкт:
{
"id": "el_abc123",
"type": "text",
"x": 100, "y": 50,
"width": 600, "height": 80,
"rotation": 0,
"content": "Заголовок",
"styles": {
"fontSize": 48,
"fontFamily": "Inter",
"bold": true,
"color": "#1a1a2e",
"align": "center"
}
}
Слайд зберігається як JSON. Історія змін — immutable список операцій (Command pattern).
Drag & Drop та вирівнювання
При переміщенні об'єкту — smart guides (умні напрямні): лінії, що з'являються при збігу координат з іншими об'єктами або центром/краями слайду. Прив'язка до сітки — опціонально.
Реалізація smart guides: при drag події вичислюємо відстань до опорних точок всіх об'єктів, при відстані < threshold (5–8px) — показуємо лінію та "прилипаємо".
Спільне редагування
Yjs з Y.Array для слайдів та Y.Map для кожного елемента:
const ydoc = new Y.Doc();
const slides = ydoc.getArray('slides');
const provider = new WebsocketProvider('wss://server', `pres_${id}`, ydoc);
// Оновлення позиції елемента
ydoc.transact(() => {
const slideMap = slides.get(slideIndex);
const elements = slideMap.get('elements');
const el = elements.get(elementId);
el.set('x', newX);
el.set('y', newY);
});
Кожен користувач бачить курсори інших учасників (awareness API Yjs).
Шаблони
Бібліотека шаблонів — набір готових слайдів та повних презентацій. Шаблон зберігається як JSON структура, при створенні з шаблону — клонується в нову презентацію.
Експорт
-
PPTX: через
pptxgenjs(Node.js). Конвертуємо JSON-модель в PPTX-об'єкти. -
PDF: рендер кожного слайду в PNG через Canvas → об'єднання в PDF через
pdf-lib. -
PNG/JPG:
canvas.toDataURL('image/png')для кожного слайду.
import pptxgen from 'pptxgenjs';
const pptx = new pptxgen();
const slide = pptx.addSlide();
slide.addText('Hello World', { x: 1, y: 1, fontSize: 36, bold: true });
pptx.writeFile({ fileName: 'presentation.pptx' });
Анімації
Анімації слайдів (fade, fly-in, scale) в браузері через CSS animations або Web Animations API. Для PPTX-експорту — маппінг на вбудовані анімації PowerPoint через pptxgenjs.
Часові рамки
Спеціалізований редактор (фіксовані типи елементів, базові маніпуляції, експорт PNG/PDF): 3–4 місяці. Повноцінний редактор зі спільним редагуванням, шаблонами, PPTX-експортом та анімаціями: 6–10 місяців.