angular-calendar-timeline
Version:
A timeline for angular that shows events on a timeline board in different modes: days, weeks, and months.
212 lines (211 loc) • 8.08 kB
TypeScript
import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, TemplateRef } from '@angular/core';
import { ResizeEvent } from 'angular-resizable-element';
import { IViewModeAdaptor, IIdObject, IItemsIterator, IScale, IScaleGenerator, ITimelineItem, ITimelineZoom, IZoomsHandler, IScaleColumn, IItemTimeChangedEvent, IItemRowChangedEvent, TimelineViewMode } from './models';
import { DragEndEvent } from "angular-draggable-droppable/lib/draggable.directive";
import { StrategyManager } from "./strategy-manager";
import * as i0 from "@angular/core";
export declare class TimelineComponent<ViewMode = TimelineViewMode> implements AfterViewInit, OnDestroy {
private _cdr;
private _strategyManager;
private _elementRef;
private _platformId;
/**
* Indicates the current shown date in the middle of user`s screen.
*/
currentDate: Date;
/**
* Scale generator changes depending on current view type.
*/
scaleGenerator: IScaleGenerator;
/**
* View mode adaptor changes depending on current view type.
*/
viewModeAdaptor: IViewModeAdaptor;
dateMarkerLeftPosition: number;
scale: IScale | undefined;
itemsIterator: IItemsIterator;
zoomsHandler: IZoomsHandler<ViewMode>;
private _ignoreNextScrollEvent;
private _destroy$;
/**
* Emits event when startDate and endDate of some item was changed by resizing/moving it.
*/
itemTimeChanged: EventEmitter<IItemTimeChangedEvent>;
/**
* Emits event when item was moved by Y axis.
*/
itemRowChanged: EventEmitter<IItemRowChangedEvent>;
/**
* Emits event when current zoom was changed.
*/
zoomChanged: EventEmitter<ITimelineZoom<ViewMode>>;
/**
* Emits event when user clicked somewhere on time grid.
*/
timeGridClicked: EventEmitter<{
originalEvent: Event;
row: ITimelineItem;
column: IScaleColumn;
}>;
/**
* The locale used to format dates. By default is 'en'
*/
locale: string;
/**
* Height of the each row in pixels. By default is 40.
*/
rowHeight: number;
/**
* Height of the each timeline item in pixels. Can't be bigger then 'rowHeight' property. By default is 30.
*/
itemHeight: number;
/**
* Height of top dates panel in pixels. By default is 60.
*/
headerHeight: number;
/**
* The label of left panel. By default is empty.
*/
panelLabel: string;
/**
* Width of left panel in pixels. By default is 160.
*/
panelWidth: number;
/**
* Minimal width of left panel in pixels. By default is 50.
*/
minPanelWidth: number;
/**
* Maximal width of left panel in pixels. By default is 400.
*/
maxPanelWidth: number;
/**
* Sets the left displacement in pixels between parent and child groups in left panel. By default is 15.
*/
offsetForChildPanelItem: number;
/**
* Can resize panel. By default is true.
*/
isPanelResizable: boolean;
/**
* If false then date marker will be not visible.
*/
showDateMarket: boolean;
/**
* Custom template for item in left panel.
*/
panelItemTemplate: TemplateRef<{
item: ITimelineItem;
index: number;
depth: number;
locale: string;
}>;
/**
* Custom template for item in timeline.
*/
itemContentTemplate: TemplateRef<{
$implicit: ITimelineItem;
locale: string;
}> | undefined;
/**
* Custom template for separators between columns.
*/
columnSeparatorTemplate: TemplateRef<{
column: IScaleColumn;
index: number;
columnWidth: number;
headerHeight: number;
}> | undefined;
/**
* Custom template for marker that indicates current time.
*/
dateMarkerTemplate: TemplateRef<{
leftPosition: number;
}> | undefined;
/**
* Register array of custom zooms.
* Current zoom can be changed to any existed in this array by calling method "changeZoom()"
*/
set zooms(value: ITimelineZoom<ViewMode>[]);
/**
* The items of timeline.
*/
set items(items: ITimelineItem[]);
/**
* Visible timeline width (container visible width - panel width = timeline visible width).
*/
get visibleScaleWidth(): number;
/**
* Active zoom.
*/
get zoom(): ITimelineZoom<ViewMode>;
/**
* Registered zooms list.
*/
get zooms(): ITimelineZoom<ViewMode>[];
constructor(_cdr: ChangeDetectorRef, _strategyManager: StrategyManager<ViewMode>, _elementRef: ElementRef, _platformId: object);
ngAfterViewInit(): void;
/**
* Recalculate and update view.
*/
redraw(): void;
/**
* Set horizontal scroll in the middle of the date
*/
attachCameraToDate(date: Date): void;
/**
* Automatically chooses the most optimal zoom and sets horizontal scroll to the center of the items.
* Padding sets minimal spacing from left and right to the first and last items.
*/
fitToContent(paddings: number): void;
/**
* Change zoom to one of the existed
*/
changeZoom(zoom: ITimelineZoom<ViewMode>): void;
/**
* Find zoom by its index and change
*/
changeZoomByIndex(index: number): void;
/**
* Changes zoom to the max value
*/
zoomFullIn(): void;
/**
* Changes zoom to the min value
*/
zoomFullOut(): void;
/**
* Changes zoom for 1 step back
*/
zoomIn(): void;
/**
* Changes zoom for 1 step forward
*/
zoomOut(): void;
/**
* Accepts the relative coordinates to the timeline container and returns the row and column.
*/
getCellByCoordinates(x: number, y: number): {
row: ITimelineItem | undefined;
column: IScaleColumn;
};
_getCurrentDate(): Date;
_onItemMoved(event: DragEndEvent, item: ITimelineItem): void;
private _onItemMovedHorizontally;
private _onItemMovedVertically;
private _calculateOptimalZoom;
_trackById(index: number, item: IIdObject): number | string;
_handleContentClick(event: MouseEvent): void;
_onItemResized(event: ResizeEvent, item: ITimelineItem): void;
private _onScroll;
private _generateScale;
private _updateItemsPosition;
private _updateItemPosition;
private _calculateItemLeftPosition;
private _calculateItemWidth;
private _recalculateDateMarkerPosition;
private _setStrategies;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<TimelineComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TimelineComponent<any>, "timeline-calendar", never, { "locale": { "alias": "locale"; "required": false; }; "rowHeight": { "alias": "rowHeight"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "headerHeight": { "alias": "headerHeight"; "required": false; }; "panelLabel": { "alias": "panelLabel"; "required": false; }; "panelWidth": { "alias": "panelWidth"; "required": false; }; "minPanelWidth": { "alias": "minPanelWidth"; "required": false; }; "maxPanelWidth": { "alias": "maxPanelWidth"; "required": false; }; "offsetForChildPanelItem": { "alias": "offsetForChildPanelItem"; "required": false; }; "isPanelResizable": { "alias": "isPanelResizable"; "required": false; }; "showDateMarket": { "alias": "showDateMarket"; "required": false; }; "panelItemTemplate": { "alias": "panelItemTemplate"; "required": false; }; "itemContentTemplate": { "alias": "itemContentTemplate"; "required": false; }; "columnSeparatorTemplate": { "alias": "columnSeparatorTemplate"; "required": false; }; "dateMarkerTemplate": { "alias": "dateMarkerTemplate"; "required": false; }; "zooms": { "alias": "zooms"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "itemTimeChanged": "itemTimeChanged"; "itemRowChanged": "itemRowChanged"; "zoomChanged": "zoomChanged"; "timeGridClicked": "timeGridClicked"; }, never, never, false, never>;
}