Руководство пользователя EulerGraph Engine

EulerGraph Engine — 2D-движок для отрисовки и редактирования большого числа графических элементов на canvas. Поставляется как npm-пакет @8brigde_dev_team/eulergraph.

Минимальные требования: DOM-контейнер, поддержка Canvas 2D в браузере, TypeScript/JavaScript host-приложение.

Минимальный пример

import { EulerGraph } from "@8brigde_dev_team/eulergraph"

const container = document.getElementById("canvas-root") as HTMLDivElement
const engine = new EulerGraph({ container })

engine.on("started", () => {
  const scene = engine.addScene()
  engine.setCurrentScene(scene.pageName)
  engine.enableServices(["Editor", "Stencil"])
  engine.registerStandardLibs()
  engine.services.Stencil?.loadLibs()
  engine.render()
})
Copy

Подробный разбор lifecycle, React-интеграции и типичных ошибок — в Быстрый старт.

Оглавление

Основы

Разработка контента

Прочее

Маршруты обучения

Маршрут A — интегратор (встроить engine в приложение)

1. Установка и подключение
2. Быстрый старт
3. Архитектура движка
4. Сцены и проекты
5. Сервисы движка
6. События и режимы работы
7. Экспорт и импорт

Маршрут B — автор расширений (свои shapes и библиотеки)

1. Быстрый старт
2. Архитектура движка (раздел cell-иерархии)
3. Как создавать библиотеки
4. typeName и сериализация cell-классов
5. Разработка cell-классов
6. Внешние расширения

Эталонный код в репозитории