Events

const emit = defineEmits<{
  /** Pointermove event on the timeline */
  pointermove: [value: { time: number; event: PointerEvent; item: GTimelineItem | GTimelineMarker | null }];
  /** Pointerdown event on the timeline */
  pointerdown: [value: { time: number; event: PointerEvent; item: GTimelineItem | GTimelineMarker | null }];
  /** Pointerup event on the timeline */
  pointerup: [value: { time: number; event: PointerEvent; item: GTimelineItem | GTimelineMarker | null }];
  /** Wheel event on the timeline */
  wheel: [event: WheelEvent];
  /** Click event on the timeline */
  click: [value: { time: number; event: MouseEvent; item: GTimelineItem | GTimelineMarker | null }];
  /** Right-click event on the timeline */
  contextmenu: [value: { time: number; event: MouseEvent; item: GTimelineItem | GTimelineMarker | null }];
  /** Touchmove event on the timeline */
  touchmove: [value: { time: number; event: TouchEvent }];
  /** Touchstart event on the timeline */
  touchstart: [value: { time: number; event: TouchEvent }];
  /** Touchend event on the timeline */
  touchend: [value: { event: TouchEvent }];
  /** Mousemove event on the timeline */
  mousemoveTimeline: [value: { time: number; event: MouseEvent }];
  /** Mouseleave event on the timeline */
  mouseleaveTimeline: [value: { event: MouseEvent }];
  /** Visible range has changed */
  changeViewport: [value: { start: number; end: number }];
  /** Visible scale (minutes/hours/days/etc.) has changed */
  changeScale: [value: TimelineScale];
  /** A group's lane count changed. Returns the lane count for each stacking-enabled group. */
  changeStacking: [value: Record<TimelineGroup['id'], { laneCount: number }>];
}>();

IMPORTANT

The time argument is the position (in ms) in the timeline where the mouse is hovering.

TIP

The onWheel event handler is exposed as a method on the timeline component. This is useful when syncing multiple timelines.

Events ​

Events