Тема
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()
}