Быстрый старт

Установка

Пакет подключается как обычная npm/workspace зависимость и используется напрямую из Vue-кода.

import { TimelineChart } from '@engine2d/timeline-chart'

Для базового сценария нужен Vue 3 и runtime-пакеты Nova. Для template-профилей через DSL в проекте должен быть включен Nova compiler plugin. Для большинства рабочих сценариев используйте renderer="webgl".

Основные понятия

Понятие	Что означает
group	Строка, ресурс или категория в левой панели.
task	Интервал времени с startTime, endTime и groupId.
background	Фоновый интервал для визуального контекста.
ungrouped task	Задача с groupId: null, которая попадает в нижнюю ungrouped panel.
timeRange	Общий доступный диапазон времени и текущее видимое окно.
viewport	Видимая часть timeline, scroll offsets и ограничения zoom.
task profile	Правило отрисовки задачи через schema или compiled recipe.
plugin	Расширение timeline, например markers или overlay.
TimelineChartRef	Imperative API: add, update, remove, batch, focusOnTask, selectTasks, refresh, data, options.

Пример

Исполняемый примерTimeline: базовый примерГруппы, задачи и временная шкала.

import { Nova, NovaNode, type NovaSchema } from '@endge/nova'

// Документационный сценарий: timeline-chart-basic
class ExampleNode extends NovaNode<Record<string, Event>> {
  render(): void {
    const schema: NovaSchema = [
      {
        type: 'rect',
        x: 24,
        y: 24,
        width: this.width - 48,
        height: this.height - 48,
        styles: { background: '#0d2745' },
      },
      {
        type: 'text',
        x: 44,
        y: 44,
        width: this.width - 88,
        height: 32,
        text: 'Timeline: базовый пример',
        styles: { color: '#e8f5ff' },
      },
    ]

    this.renderer.schema(schema)
    this.setRenderBoundsFromSchema(schema)
  }
}

export function mountExample(canvas: HTMLCanvasElement) {
  const app = Nova.createApp({
    target: canvas,
    size: { width: canvas.clientWidth, height: canvas.clientHeight, maxDpr: 2 },
    scheduler: { loop: false },
  })
  const surface = app.surface({ id: 'dirty-culling' })
  surface.createNode(ExampleNode)

  return () => app.destroy()
}