Selection

Selection может быть пользовательским через options.selection и программным через ref API. Единый механизм работает для task, point и link.

Исполняемый примерTimeline: API updatesBatch update и retained frame.

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

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

  return () => app.destroy()
}

Практика

По умолчанию пользовательское выделение работает как single-select: обычный click выбирает только один task, point или link, а выбор сущности другого типа очищает предыдущую. Это задается дефолтным selectionScope: 'exclusive' и единственным rule select-only.

const options = {
  selectionScope: 'exclusive',
  selection: [
    { enabled: true, mode: ['single'], trigger: ['click'], target: ['task', 'point', 'link'], handler: ['select-only'] },
  ],
}

Для multi-select его нужно включить явно: добавьте rule с Meta/Ctrl и toggle или используйте ref API с clearPrevious: false.

const options = {
  selectionScope: 'exclusive',
  selection: [
    { enabled: true, mode: ['single'], trigger: ['click'], target: ['task', 'point', 'link'], handler: ['select-only'] },
    { enabled: true, mode: ['Meta', 'Ctrl'], trigger: ['click'], target: ['task', 'point', 'link'], handler: ['toggle'] },
  ],
}

selectionScope='exclusive' очищает task selection при выборе point/link и наоборот. selectionScope='mixed' разрешает смешанное выделение разных типов, но не включает multi-select само по себе: набор операций по-прежнему задает options.selection.

timeline.value?.selectTasks(['task-1'])
timeline.value?.selectPoints(['point-1'], { clearPrevious: false })
timeline.value?.selectLinks(['link-1'], { clearPrevious: false })
timeline.value?.selectAnnotations({ points: ['point-2'], links: ['link-2'] })

const points = timeline.value?.getSelectedPoints()
const links = timeline.value?.getSelectedLinks()