@ux-aspects/ux-aspects
Version:
Open source user interface framework for building modern, responsive, mobile big data applications
280 lines (279 loc) • 10.5 kB
TypeScript
import { OnDestroy } from '@angular/core';
import { BehaviorSubject, Observable, Subject } from 'rxjs';
import { DragScrollEvent } from '../../directives/drag/index';
import { DashboardOptions } from './dashboard.component';
import { DashboardWidgetComponent } from './widget/dashboard-widget.component';
import * as i0 from "@angular/core";
export declare class DashboardService implements OnDestroy {
private _widgetOrigin;
private _actionWidget;
private _rowHeight;
private _cache;
private _event;
initialized$: BehaviorSubject<boolean>;
widgets$: BehaviorSubject<DashboardWidgetComponent[]>;
options$: BehaviorSubject<DashboardOptions>;
dimensions$: BehaviorSubject<DashboardDimensions>;
height$: Observable<number>;
placeholder$: BehaviorSubject<DashboardPlaceholder>;
layout$: BehaviorSubject<DashboardLayoutData[]>;
stacked$: BehaviorSubject<boolean>;
isDragging$: BehaviorSubject<DashboardWidgetComponent>;
isGrabbing$: BehaviorSubject<DashboardWidgetComponent>;
userLayoutChange$: Subject<DashboardLayoutData[]>;
get options(): DashboardOptions;
get widgets(): DashboardWidgetComponent[];
get stacked(): boolean;
get dimensions(): DashboardDimensions;
get columnWidth(): number;
/** Unsubscribe from all observables on destroy */
private readonly _onDestroy;
constructor();
ngOnDestroy(): void;
/**
* Add a widget to the dashboard
* @param widget The widget component to add to the dashboard
*/
addWidget(widget: DashboardWidgetComponent): void;
/**
* Remove a widget from the dashboard
* @param widget The widget to remove
*/
removeWidget(widget: DashboardWidgetComponent): void;
/**
* Indicate that the dashboard element has been resized
* @param width The width of the dashboard element in px
* @param height The height of the dashboard element in px
*/
setDimensions(width?: number, height?: number): void;
/**
* Produce an object containing all the required layout data.
* This can be useful for exporting/saving a layout
*/
getLayoutData(): DashboardLayoutData[];
/**
* Position widgets programatically
*/
setLayoutData(widgets: DashboardLayoutData[]): void;
/**
* Update the positions and sizes of the widgets
*/
renderDashboard(): void;
/**
* Determine where widgets should be positioned based on their positions, width and the size of the container
*/
setDashboardLayout(): void;
updateWhenStacked(): void;
/** Get widgets in the order they visually appear as the widgets array order does not reflect this */
getWidgetsByOrder(): DashboardWidgetComponent[];
/**
* Find a position that a widget can fit in the dashboard
* @param widget The widget to try and position
*/
setWidgetPosition(widget: DashboardWidgetComponent): void;
/**
* Check if a position in the dashboard is vacant or not
*/
getPositionAvailable(column: number, row: number, columnSpan: number, rowSpan: number, ignoreWidget?: DashboardWidgetComponent): boolean;
getOccupiedSpaces(): DashboardSpace[];
/**
* Begin resizing a widget
* @param action The the widget to resize
*/
onResizeStart(action: DashboardAction): void;
onResizeDrag(action: DashboardAction): void;
onResizeEnd(): void;
onDragStart(action: DashboardAction): void;
onDragEnd(): void;
onDrag(action: DashboardAction): void;
onDragScroll(widget: DashboardWidgetComponent, event: DragScrollEvent): void;
getRowHeight(): number;
cacheWidgets(): DashboardCache[];
restoreWidgets(ignoreActionWidget?: boolean, cache?: DashboardCache[], restoreSize?: boolean): void;
/**
* Return the set of widgets which overlap the given dashboard region.
*/
getOverlappingWidgets(region: DashboardRegion, actionWidget: DashboardWidgetComponent): DashboardWidgetComponent[];
/**
* Resolve any overlapping widgets after a widget changes rowSpan/colSpan.
*/
resizeWidget(widget: DashboardWidgetComponent): void;
/**
* Move any widgets which intersect with the given dashboard region.
*/
shiftWidgetsFromRegion(region: DashboardRegion, actionWidget: DashboardWidgetComponent, validatePosition?: (shiftDirection: ActionDirection) => void): void;
/**
* When dragging any widgets that need to be moved should be moved to an appropriate position
*/
shiftWidgets(): void;
/**
* After shifts have taken place we should verify the place holder position is still valid
* @param shiftDirection - the position widgets were shifted
*/
validatePlaceholderPosition(shiftDirection: ActionDirection): void;
/**
* Determine if a widget can be moved left - or if it can move the widgets to the right to make space for the widget
*/
canWidgetMoveLeft(widget: DashboardWidgetComponent, performMove?: boolean, shift?: number): boolean;
/**
* Determine if a widget can be moved right - or if it can move the widgets to the right to make space for the widget
*/
canWidgetMoveRight(widget: DashboardWidgetComponent, performMove?: boolean, shift?: number): boolean;
/**
* Store the initial position of the widget being dragged
*/
setWidgetOrigin(): void;
/**
* Calculate all the required positions is a widget was to be positioned at a particular point
*/
getRequiredSpacesFromPoint(widget: DashboardWidgetComponent, column: number, row: number): DashboardSpace[];
/**
* Position widgets based on the position of the placeholder - this is temporary until confirmed
*/
updateWidgetPositions(widget: DashboardWidgetComponent): void;
/**
* Determine if a widget is occupying a specific row and column
* @param column The columns to check if occupied
* @param row The row to check if occupied
* @param ignoreResizing Whether or not to ignore the widget currently being resized
*/
getWidgetsAtPosition(column: number, row: number, ignoreResizing?: boolean): DashboardWidgetComponent[];
/**
* Update the placeholder visibility, position and size
*/
setPlaceholderBounds(visible: boolean, x: number, y: number, width: number, height: number): void;
/**
* Get the placeholder column position
*/
getPlaceholderColumn(x: number, width: number): number;
/**
* Get the column span of the placeholder
*/
getPlaceholderColumnSpan(width: number): number;
/**
* Get the row position of the placeholder
*/
getPlaceholderRow(y: number, height: number): number;
/**
* Get the row span of the placeholder
*/
getPlaceholderRowSpan(height: number): number;
getColumnFromPx(x: number, rounding?: Rounding): number;
getRowFromPx(y: number, rounding?: Rounding): number;
commitWidgetChanges(): void;
/**
* Get the current column width
*/
getColumnWidth(): number;
/**
* Calculate the number of rows populated with widgets
*/
getRowCount(): number;
/**
* Set the height of the dashboard container element
*/
setDashboardHeight(): void;
/**
* Orders the z-index of all widgets to move the active one to the front
* @param widget The widget that should be brought to the front
*/
bringToFront(widget: DashboardWidgetComponent): void;
/**
* Move a widget down - if widgets are in the position below, then move them down further
* @param widget The widget to move downwards
*/
moveWidgetDown(widget: DashboardWidgetComponent, distance?: number): void;
/**
* Widgets should not be allowed to have a vacant space above them - if there is one they should move upwards to fill it
*/
shiftWidgetsUp(): boolean;
/**
* Iterate over each space a widget occupied
* @param widget The widget to determine spaces
* @param callback The function to be called for each space, should expect a column and row argument witht he context being the widget
*/
forEachBlock(widget: DashboardWidgetComponent, callback: (column: number, row: number) => void): void;
getWidgetBelow(widget: DashboardWidgetComponent): DashboardWidgetComponent | null;
/**
* Returns the number of columns available
*/
getColumnCount(): number;
onShiftStart(widget: DashboardWidgetComponent): void;
/** Programmatically move a widget in a given direction */
onShift(widget: DashboardWidgetComponent, direction: ActionDirection): void;
onShiftEnd(): void;
/** Programmatically resize a widget in a given direction */
onResize(widget: DashboardWidgetComponent, direction: ActionDirection): void;
getSurroundingWidgets(widget: DashboardWidgetComponent, direction: ActionDirection): DashboardWidgetComponent[];
private moveWidget;
static ɵfac: i0.ɵɵFactoryDeclaration<DashboardService, never>;
static ɵprov: i0.ɵɵInjectableDeclaration<DashboardService>;
}
export declare const defaultOptions: DashboardOptions;
export interface DashboardDimensions {
width?: number;
height?: number;
}
export interface DashboardWidgetDimensions {
x: number;
y: number;
width: number;
height: number;
}
export interface DashboardAction {
widget: DashboardWidgetComponent;
direction: ActionDirection;
event?: MouseEvent;
handle?: HTMLElement;
}
export interface DashboardSpace {
widget: DashboardWidgetComponent;
column: number;
row: number;
}
export interface DashboardRegion {
column?: number;
row?: number;
columnSpan?: number;
rowSpan?: number;
}
export interface DashboardPlaceholder extends DashboardRegion {
visible: boolean;
x: number;
y: number;
width: number;
height: number;
}
export interface DashboardCache {
id: string;
column: number;
row: number;
columnSpan: number;
rowSpan: number;
}
export interface DashboardLayoutData {
id: string;
col: number;
row: number;
colSpan: number;
rowSpan: number;
minColSpan?: number;
minRowSpan?: number;
}
export declare enum ActionDirection {
Top = 0,
TopRight = 1,
Right = 2,
BottomRight = 3,
Bottom = 4,
BottomLeft = 5,
Left = 6,
TopLeft = 7,
Move = 8
}
export declare enum Rounding {
RoundDown = 0,
RoundDownBelowHalf = 1,
RoundUp = 2,
RoundUpOverHalf = 3
}