Для кого: разработчики, которые впервые подключают engine к host-приложению.
Что получите: установленный пакет, корректные импорты и минимальный DOM для запуска EulerGraph.
Предварительные знания: npm, TypeScript или JavaScript, базовый DOM API.
npm install @8brigde_dev_team/eulergraph
Пакет публикуется из src/renderer/src/engine. В package.json указаны entry points:
"." → ./dist/index.js + типы ./dist/engine/index.d.tsИз каталога engine:
cd src/renderer/src/engine
npm run build-lib # или npm run dev для watch
npm link
В host-приложении:
npm link @8brigde_dev_team/eulergraph
Основной API:
import { EulerGraph, Cell, Library } from "@8brigde_dev_team/eulergraph"
// или алиас host-приложения:
import { EulerGraph } from "@eulergraph/index"
Типы и события:
import type { EngineOptions, EngineEventsPayloads } from "@8brigde_dev_team/eulergraph"
// или:
import type { Mode } from "@eulergraph/types"
В monorepo renderer используются алиасы (@eulergraph, @engine, @etypes). Во внешнем приложении настройте paths в tsconfig или resolve в bundler по аналогии с src/renderer/vite.shared.ts.
Движок принимает EngineDom:
type EngineDom = {
container: HTMLDivElement
drawCanvas?: string | HTMLCanvasElement
interactiveCanvas?: string | HTMLCanvasElement
overlayCanvas?: string | HTMLCanvasElement | null
gridCanvas?: string | HTMLCanvasElement | null
}
Минимально достаточно container. Движок сам создаёт внутри него канвасы (draw, interactive, overlay, grid). Опциональные поля — если нужно переиспользовать существующие <canvas> по id или ссылке.
<div id="canvas-root" style="width: 100%; height: 100%;"></div>
const container = document.getElementById("canvas-root") as HTMLDivElement
const engine = new EulerGraph({ container })
type EngineOptions = {
useWorker?: boolean // Worker для отрисовки сетки
useSkia?: boolean // false — не инициализировать SkiaWasmService
defaultSceneParams?: SceneParams
coordsLabelStyle?: CoordsLabelStyle
}
Пример:
const engine = new EulerGraph(
{ container },
{
useSkia: true,
useWorker: true,
},
)
По мотивам appendEditor.ts:
import { EulerGraph } from "@8brigde_dev_team/eulergraph"
async function initEngine() {
const container = document.createElement("div")
container.style.width = "100%"
container.style.height = "100%"
document.body.appendChild(container)
const engine = new EulerGraph({ container })
engine.enableServices([
"Editor",
"Stencil",
"DrawService",
"SaveService",
])
await new Promise<void>((resolve) => {
engine.on("started", () => {
const scene = engine.addScene()
engine.setCurrentScene(scene.pageName)
engine.registerStandardLibs()
engine.services.Stencil?.loadLibs()
engine.fitToWidth(0)
resolve()
})
})
return engine
}
initEngine().then((engine) => {
console.log("Engine ready", engine.currentScene?.pageName)
})
| Проблема | Причина |
|---|---|
| Пустой или нулевой canvas | Контейнер без размеров (width/height 0) |
started не срабатывает |
Конструктор EulerGraph не завершился; проверьте DOM |
| Типы не находятся | Не собран dist или неверный exports в package.json |