Events

const emit = defineEmits<{
  /** Pointermove event on the timeline */
  pointermove: [value: { time: number; event: PointerEvent; item: GTimelineItem | GTimelineMarker | null; group: GTimelineGroup | null }];
  /** Pointerdown event on the timeline */
  pointerdown: [value: { time: number; event: PointerEvent; item: GTimelineItem | GTimelineMarker | null; group: GTimelineGroup | null }];
  /** Pointerup event on the timeline */
  pointerup: [value: { time: number; event: PointerEvent; item: GTimelineItem | GTimelineMarker | null; group: GTimelineGroup | null }];
  /** Wheel event on the timeline */
  wheel: [event: WheelEvent];
  /** Click event on the timeline */
  click: [value: { time: number; event: MouseEvent; item: GTimelineItem | GTimelineMarker | null; group: GTimelineGroup | null }];
  /** Right-click event on the timeline */
  contextmenu: [value: { time: number; event: MouseEvent; item: GTimelineItem | GTimelineMarker | null; group: GTimelineGroup | null }];
  /** Touchmove event on the timeline */
  touchmove: [value: { time: number; event: TouchEvent; group: GTimelineGroup | null }];
  /** Touchstart event on the timeline */
  touchstart: [value: { time: number; event: TouchEvent; group: GTimelineGroup | null }];
  /** Touchend event on the timeline */
  touchend: [value: { event: TouchEvent; group: GTimelineGroup | null }];
  /** Mousemove event on the timeline */
  mousemoveTimeline: [value: { time: number; event: MouseEvent; group: GTimelineGroup | null }];
  /** 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.

NOTE

The group argument is the group at the position of the mouse, pointer or touch point. It is null when there is no group at that position (e.g. at the timestamp labels). Touch events only give a group when there is one touch point.

TIP

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

TIP

Groups have a data-group-id attribute, and items and markers carry a data-item-id attribute.

Events ​

Events