import { Observable, Subject } from 'rxjs'; import { ClickEvent, MouseEnterEvent, MouseLeaveEvent } from '../types'; import { BaseKonvaComponent, ComponentConfig, ConfigWithOptionalStyle, KonvaComponent } from '../layout/konva-component'; import Konva from 'konva'; import { OnMeasurementsChange } from '../common'; export interface TimelineNodeStyle { backgroundFill?: string; backgroundOpacity?: number; backgroundBorderRadius?: number | number[]; } export interface TimelineNodeConfig extends ComponentConfig { /** * If set to true node listens to events */ listening?: boolean; } /** * Custom component that can be added to Timeline */ export interface TimelineNode extends KonvaComponent, TimelineNodeStyle, Konva.Group>, OnMeasurementsChange { /** * Fires on mouse click */ onClick$: Observable; /** * Fires on mouse enter */ onMouseEnter$: Observable; /** * Fires on mouse leave */ onMouseLeave$: Observable; } export declare abstract class BaseTimelineNode, S extends TimelineNodeStyle> extends BaseKonvaComponent implements TimelineNode { readonly onClick$: Subject; readonly onMouseEnter$: Subject; readonly onMouseLeave$: Subject; protected _group: Konva.Group; protected _bgRect: Konva.Rect; protected constructor(config: C); onMeasurementsChange(): void; protected provideKonvaNode(): Konva.Group; protected onStyleChange(): void; destroy(): void; } export interface TextLabelStyle extends TimelineNodeStyle { fontSize?: number; fontFamily?: string; fontStyle?: string; fill?: string; align?: 'left' | 'right' | 'center'; verticalAlign?: 'top' | 'middle' | 'bottom'; wrap?: 'word' | 'char' | 'none'; padding?: number; offsetX?: number; offsetY?: number; opacity?: number; textAreaStretch?: boolean; } export interface TextLabelConfig extends TimelineNodeConfig { /** * Text to display */ text?: string; } /** * Timeline text label. Can be added to timeline lane. {@link TimelineLaneApi} */ export declare class TextLabel extends BaseTimelineNode { private _konvaText; constructor(config: ConfigWithOptionalStyle); onMeasurementsChange(): void; protected onStyleChange(): void; /** * Sets new text to display * @param value */ set text(value: string); get text(): string; } export interface ImageButtonStyle extends TimelineNodeStyle { } export type ImageButtonImageConfig = { /** * Image source */ src: string; /** * Image width */ width?: number; /** * Image height */ height?: number; }; export interface ImageButtonConfig extends TimelineNodeConfig, ImageButtonImageConfig { /** * Image source */ src: string; /** * Image width */ width?: number; /** * Image height */ height?: number; } /** * Timeline image button. Can be added to timeline lane. {@link TimelineLaneApi} */ export declare class ImageButton extends BaseTimelineNode { protected _konvaImage?: Konva.Image; protected _loadImageQueue: Subject; protected _currentImageConfig?: ImageButtonImageConfig; constructor(config: ConfigWithOptionalStyle); private loadImage; /** * Sets new image to display * @param config */ setImage(config: ImageButtonImageConfig): void; /** * Gets current image config * @returns ImageButtonImageConfig */ getImage(): { /** * Image source */ src: string; /** * Image width */ width?: number | undefined; /** * Image height */ height?: number | undefined; } | undefined; }