События и режимы работы

Для кого: интеграторы UI, синхронизирующие React/store с состоянием движка.

Что получите: ключевые события, режимы Mode, паттерн подписки.

Предварительные знания: Сервисы движка.

Подписка на события

EulerGraph наследует EventEmitter. Типы: EngineEvents, payload — EngineEventsPayloads.

import type { EngineEventsPayloads } from "@eulergraph/types"

function onSelectionChanged(cells: EngineEventsPayloads["selection_changed"]) {
  console.log("Selected:", cells.map((c) => c.id))
}

engine.on("selection_changed", onSelectionChanged)

// Отписка
engine.off("selection_changed", onSelectionChanged)

Эталон множественных подписок: src/renderer/src/hooks/useEngine.ts.

Ключевые события

Событие	Payload (кратко)	Use case
`started`	`EulerGraph`	Инициализация сцены
`restart`	`EulerGraph`	Потеря canvas context — пересоздать engine
`selection_changed`	`GraphicElement[]`	Панель свойств
`cell_transformed`	`ChangedCell`	Live preview transform
`cells_removed`	`GraphicElement[]`	Обновить списки
`set_current_scene`	`{ pageName, currentScene }`	Табы страниц
`scenes_updated`	`{ sceneNames }`	Список листов
`mode_changed`	`Mode`	Активный инструмент
`zoom_update`	`number`	Индикатор масштаба (подписка на `engine.canvasControls`, не на `engine`)
`undoRedo`	`{ hasUndo, hasRedo }`	Кнопки undo/redo
`libs_updated`	`StencilGroup[]`	Панель Stencil
`layers_changed`	`{ layers }`	Панель слоёв
`services_changed`	`AvailableServices`	Доступные сервисы
`line_draw_start`	`{ figure }`	Начало рисования линии
`beforeSceneChange`	`{ save }`	Автосохранение

Полный список — src/engine/types/events/events.ts.

Режимы Mode

import { Mode } from "@eulergraph/types"

engine.mode = Mode.select
engine.mode = Mode.draw
engine.mode = Mode.pan
engine.mode = Mode.rotate

Mode	Назначение
`select`	Выделение и перемещение
`draw`	Рисование через DrawService
`pan`	Панорамирование
`move` / `scale` / `rotate`	Transform (часто через Editor)
`addText`	Добавление текста
`copyStyle`	Копирование стиля
`comment`	Комментарии

Смена режима эмитит mode_changed.

restart при потере context

engine.on("restart", (newEngine) => {
  // EulergraphCanvas пересоздаёт engine автоматически
  onEngineSet(newEngine)
})

Паттерн: store + engine

Подписаться в useEffect при появлении eulerEngine.
В handler — только setters store (без лишних deps), как в useEngine.
Отписаться в cleanup off(...).

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

Утечки памяти — не вызван off при unmount.
Stale closure — handler без актуального engine ref.
Дублирование подписок при каждом render — подписываться один раз на instance.