Skip to content

Markers

Markers plugin показывает линии и интервалы поверх timeline.

ts
const markers = TimelineChart.plugins.markers({
  defaultValue: [{ id: 'now', kind: 'fixed-line', time: Date.now(), color: '#ef4444' }],
})

kind: 'today' использует текущее Date.now() и по умолчанию обновляет label-layer раз в секунду. Timer активен только пока today-marker попадает в текущий viewport; tick не инвалидирует data/layout/tasks и не дергает общий custom, а запрашивает render только plugin anchor с labels.

Для заливки области относительно marker используйте cover. У линии и today доступны left и right, у range дополнительно inside.

ts
TimelineChart.plugins.markers({
  defaultValue: [
    {
      id: 'now',
      kind: 'fixed-line',
      time: Date.now(),
      cover: ['left'],
    },
    {
      id: 'window',
      kind: 'fixed-interval',
      startTime,
      endTime,
      cover: {
        positions: ['left', 'inside'],
        background: 'rgba(29, 115, 255, 0.08)',
      },
    },
  ],
})
Исполняемый примерTimeline: markersМаркеры и overlay-слои.
import { Nova, NovaNode, type NovaSchema } from '@endge/nova'

// Документационный сценарий: timeline-chart-markers
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: markers',
        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: 'airport-layers' })
  surface.createNode(ExampleNode)

  return () => app.destroy()
}