Архитектура движка

Для кого: все разработчики, работающие с engine — интеграторы и авторы shapes.

Что получите: понимание слоёв, cell-иерархии, сервисов и потока данных.

Предварительные знания: Быстрый старт.

Слои системы

flowchart TB
  subgraph host [Host App]
    UI[React UI]
  end
  subgraph engine [EulerGraph]
    PM[ProjectsManager]
    SVC[Services]
    EL[elementsLib]
  end
  subgraph scene [Scene2D]
    Cells[GraphicElement cells]
  end
  UI --> engine
  engine --> PM
  engine --> SVC
  engine --> scene
  scene --> Cells
  EL --> Cells

Слой	Класс	Роль
Точка входа	`EulerGraph`	DOM, канвасы, сервисы, события, проекты
Страница	`Scene2D`	Список элементов, zoom, слои, настройки листа
Элемент	`GraphicElement`	Базовый класс фигуры: bbox, drawPaths, toJSON
Реестр типов	`elementsLib`	`typeName` → constructor для десериализации

Cell-иерархия

Класс	Когда наследовать
`GraphicElement`	Абстрактная база; `typeName` не задаётся
`BaseCell`	Прямоугольная фигура с позицией, текстом, fill/stroke
`Cell`	Обычная редактируемая фигура с resize/rotate controls
`CellParametric`	Parametric shape: `_drawRules`, `paramData`, hatch
`CustomCell`	Фигура из JSON (`StencilLibItem`), `customParams`
`BaseLinear`	Линия по точкам (без link-логики)
`Link`	Коннектор: стрелки, routing, text labels
`LineParametric`	Parametric линия (Segment, Spline, …)
`GroupCell`	Группа элементов

Подробнее о реализации shapes: Разработка cell-классов.

Сериализация и typeName

При toJSON() в поле className записывается static typeName класса. При загрузке:

JSON.className → elementsLib[typeName] → new Class() → fromJSON()

Подробно: typeName и сериализация cell-классов.

Модель сервисов

Сервисы не создаются автоматически. Host вызывает:

engine.enableServices(["Editor", "Stencil", "DrawService"])

Доступ:

import { Mode } from "@eulergraph/types"

engine.mode = Mode.select
engine.services.Stencil?.loadLibs()

Список всех сервисов: Сервисы движка.

Канвасы

Движок использует несколько <canvas> внутри container:

Canvas	Назначение
draw	Основная отрисовка сцены и элементов
interactive	Выделение, controls, preview при drag
overlay	Эффекты поверх сцены
grid	Сетка и границы листов (может быть в Worker)

Публичный API рендера: engine.render(), engine.renderSync(), engine.debouncedDraw().

Данные: проект → сцены → cells

Project (AppState)
  └── scenes[] (Scene2D)
        └── children[] (GraphicElement)
              └── toJSON() → { className, id, position, ... }

Версия формата файла хранится в EulerGraph (_version). При изменении схемы JSON версию нужно обновлять.

Частые ошибки

Наследование Cell вместо CellParametric для parametric shape — придётся вручную реализовать отрисовку.
Регистрация shape без typeName — ошибка assertCellTypeName.
Обращение к services.Editor до enableServices — undefined.