angular-gridster2
Version:
Angular gridster 2
629 lines (611 loc) • 21.5 kB
TypeScript
import * as _angular_core from '@angular/core';
import { NgZone, ChangeDetectorRef, OnInit, OnDestroy, Renderer2, Signal, ElementRef } from '@angular/core';
import { Subject } from 'rxjs';
declare class GridsterPush {
private gridsterItem;
fromSouth: string;
fromNorth: string;
fromEast: string;
fromWest: string;
private pushedItems;
private pushedItemsTemp;
private pushedItemsTempPath;
private pushedItemsPath;
private gridster;
private pushedItemsOrder;
private tryPattern;
private iteration;
constructor(gridsterItem: GridsterItem);
destroy(): void;
pushItems(direction: string, disable?: boolean): boolean;
restoreTempItems(): void;
restoreItems(): void;
setPushedItems(): void;
checkPushBack(): void;
private push;
private trySouth;
private tryNorth;
private tryEast;
private tryWest;
private addToTempPushed;
private removeFromTempPushed;
private addToPushed;
private removeFromPushed;
private removeFromPushedItem;
private checkPushedItem;
}
declare class GridsterSwap {
private gridsterItem;
private swapedItem;
private gridster;
constructor(gridsterItem: GridsterItem);
destroy(): void;
swapItems(): void;
checkSwapBack(): void;
restoreSwapItem(): void;
setSwapItem(): void;
checkSwap(pushedBy: GridsterItem): void;
}
declare class GridsterDraggable {
private gridsterItem;
private gridster;
private zone;
private cdRef;
lastMouse: {
clientX: number;
clientY: number;
};
offsetLeft: number;
offsetTop: number;
margin: number;
outerMarginTop: number | null;
outerMarginRight: number | null;
outerMarginBottom: number | null;
outerMarginLeft: number | null;
diffTop: number;
diffLeft: number;
originalClientX: number;
originalClientY: number;
top: number;
left: number;
height: number;
width: number;
positionX: number;
positionY: number;
positionXBackup: number;
positionYBackup: number;
enabled: boolean;
mousemove: () => void;
mouseup: () => void;
mouseleave: () => void;
cancelOnBlur: () => void;
touchmove: () => void;
touchend: () => void;
touchcancel: () => void;
mousedown: () => void;
touchstart: () => void;
push: GridsterPush;
swap: GridsterSwap;
path: {
x: number;
y: number;
}[];
collision: GridsterItem | boolean;
constructor(gridsterItem: GridsterItem, gridster: Gridster, zone: NgZone, cdRef: ChangeDetectorRef);
destroy(): void;
dragStart(e: MouseEvent): void;
dragMove: (e: MouseEvent) => void;
calculateItemPositionFromMousePosition: (e: MouseEvent) => void;
calculateItemPositionWithScale(e: MouseEvent, scale: number): void;
calculateItemPositionWithoutScale(e: MouseEvent): void;
dragStop: (e: MouseEvent) => void;
cancelDrag: () => void;
makeDrag: () => void;
calculateItemPosition(): void;
toggle(): void;
dragStartDelay: (e: MouseEvent) => void;
/**
* Returns the list of directions for given mouse event
* @param e Mouse event
* */
private getDirections;
}
declare class GridsterPushResize {
private gridsterItem;
fromSouth: string;
fromNorth: string;
fromEast: string;
fromWest: string;
private pushedItems;
private pushedItemsPath;
private gridster;
private tryPattern;
constructor(gridsterItem: GridsterItem);
destroy(): void;
pushItems(direction: string): boolean;
restoreItems(): void;
setPushedItems(): void;
checkPushBack(): void;
private push;
private trySouth;
private tryNorth;
private tryEast;
private tryWest;
private addToPushed;
private removeFromPushed;
private checkPushedItem;
}
type GridsterResizeEventType = {
north: boolean;
south: boolean;
west: boolean;
east: boolean;
};
declare class GridsterResizable {
private gridsterItem;
private gridster;
private zone;
lastMouse: {
clientX: number;
clientY: number;
};
itemBackup: {
x: number;
y: number;
cols: number;
rows: number;
};
resizeEventScrollType: GridsterResizeEventType;
/**
* The direction function may reference any of the `GridsterResizable` class methods, that are
* responsible for gridster resize when the `dragmove` event is being handled. E.g. it may reference
* the `handleNorth` method when the north handle is pressed and moved by a mouse.
*/
private directionFunction;
resizeEnabled: _angular_core.WritableSignal<boolean>;
resizableHandles: _angular_core.WritableSignal<ResizableHandles>;
mousemove: () => void;
mouseup: () => void;
mouseleave: () => void;
cancelOnBlur: () => void;
touchmove: () => void;
touchend: () => void;
touchcancel: () => void;
push: GridsterPush;
pushResize: GridsterPushResize;
minHeight: number;
minWidth: number;
offsetTop: number;
offsetLeft: number;
diffTop: number;
diffLeft: number;
diffRight: number;
diffBottom: number;
margin: number;
outerMarginTop: number | null;
outerMarginRight: number | null;
outerMarginBottom: number | null;
outerMarginLeft: number | null;
originalClientX: number;
originalClientY: number;
top: number;
left: number;
bottom: number;
right: number;
width: number;
height: number;
hasRatio: boolean;
constructor(gridsterItem: GridsterItem, gridster: Gridster, zone: NgZone);
destroy(): void;
dragStart(e: MouseEvent): void;
dragMove: (e: MouseEvent) => void;
dragStop: (e: MouseEvent) => void;
cancelResize: () => void;
makeResize: () => void;
private check;
private getNewNorthPosition;
private handleNorth;
private getNewWestPosition;
private handleWest;
private getNewSouthPosition;
private handleSouth;
private getNewEastPosition;
private handleEast;
private handleNorthWest;
private handleNorthEast;
private handleSouthWest;
private handleSouthEast;
private makeItemBackup;
private resetItem;
toggle(): void;
dragStartDelay(e: MouseEvent | TouchEvent): void;
setItemTop(top: number): void;
setItemLeft(left: number): void;
setItemHeight(height: number): void;
setItemWidth(width: number): void;
/**
* Enforces the aspect ratio by recalculating grid positions based on current pixel dimensions
*/
private enforceAspectRatio;
}
declare class GridsterItem implements OnInit, OnDestroy {
item: _angular_core.InputSignal<GridsterItemConfig>;
itemInit: _angular_core.OutputEmitterRef<{
item: GridsterItemConfig;
itemComponent: GridsterItem;
}>;
itemChange: _angular_core.OutputEmitterRef<{
item: GridsterItemConfig;
itemComponent: GridsterItem;
}>;
itemResize: _angular_core.OutputEmitterRef<{
item: GridsterItemConfig;
itemComponent: GridsterItem;
}>;
readonly cdRef: ChangeDetectorRef;
readonly el: HTMLElement;
readonly gridster: Gridster;
readonly renderer: Renderer2;
private readonly zone;
$item: Signal<GridsterItemConfig>;
top: number;
left: number;
width: number;
height: number;
drag: GridsterDraggable;
resize: GridsterResizable;
notPlaced: boolean;
init: boolean;
zIndex(): number;
constructor();
ngOnInit(): void;
ngOnDestroy(): void;
setSize(): void;
updateItemSize(): void;
itemChanged(): void;
checkItemChanges(newValue: GridsterItemConfig, oldValue: GridsterItemConfig): void;
canBeDragged(): boolean;
canBeResized(): boolean;
getResizableHandles(): ResizableHandles;
bringToFront(offset: number): void;
sendToBack(offset: number): void;
private getLayerIndex;
protected readonly JSON: JSON;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridsterItem, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<GridsterItem, "gridster-item", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; }, { "itemInit": "itemInit"; "itemChange": "itemChange"; "itemResize": "itemResize"; }, never, ["*"], true, never>;
}
type ResizableHandles = {
s?: boolean;
e?: boolean;
n?: boolean;
w?: boolean;
se?: boolean;
ne?: boolean;
sw?: boolean;
nw?: boolean;
};
type GridsterItemConfig = {
x: number;
y: number;
rows: number;
cols: number;
layerIndex?: number;
initCallback?: (item: GridsterItemConfig, itemComponent: GridsterItem) => void;
dragEnabled?: boolean;
resizeEnabled?: boolean;
resizableHandles?: ResizableHandles;
compactEnabled?: boolean;
itemAspectRatio?: number;
maxItemRows?: number;
minItemRows?: number;
maxItemCols?: number;
minItemCols?: number;
minItemArea?: number;
maxItemArea?: number;
[propName: string]: any;
};
declare class GridsterCompact {
private gridster;
constructor(gridster: Gridster);
destroy(): void;
checkCompact(): void;
checkCompactItem(item: GridsterItemConfig): void;
private checkCompactMovement;
private moveTillCollision;
private checkCompactGrid;
private moveToGridPosition;
}
type gridTypes = 'fit' | 'scrollVertical' | 'scrollHorizontal' | 'fixed' | 'verticalFixed' | 'horizontalFixed';
type displayGrids = 'always' | 'onDrag&Resize' | 'none';
type compactTypes = 'none' | 'compactUp' | 'compactLeft' | 'compactUp&Left' | 'compactLeft&Up' | 'compactRight' | 'compactUp&Right' | 'compactRight&Up' | 'compactDown' | 'compactDown&Left' | 'compactLeft&Down' | 'compactDown&Right' | 'compactRight&Down' | 'compactGrid';
declare enum GridType {
Fit = "fit",
ScrollVertical = "scrollVertical",
ScrollHorizontal = "scrollHorizontal",
Fixed = "fixed",
VerticalFixed = "verticalFixed",
HorizontalFixed = "horizontalFixed"
}
declare enum DisplayGrid {
Always = "always",
OnDragAndResize = "onDrag&Resize",
None = "none"
}
declare enum CompactType {
None = "none",
CompactUp = "compactUp",
CompactLeft = "compactLeft",
CompactUpAndLeft = "compactUp&Left",
CompactLeftAndUp = "compactLeft&Up",
CompactRight = "compactRight",
CompactUpAndRight = "compactUp&Right",
CompactRightAndUp = "compactRight&Up",
CompactDown = "compactDown",
CompactDownAndLeft = "compactDown&Left",
CompactLeftAndDown = "compactLeft&Down",
CompactDownAndRight = "compactDown&Right",
CompactRightAndDown = "compactRight&Down",
CompactGrid = "compactGrid"
}
declare enum DirTypes {
LTR = "ltr",
RTL = "rtl"
}
type dirTypes = 'ltr' | 'rtl';
type GridsterApi = {
calculateLayout: () => void;
resize: () => void;
getNextPossiblePosition: (newItem: GridsterItemConfig, startingFrom?: {
y?: number;
x?: number;
}) => void;
getFirstPossiblePosition: (item: GridsterItemConfig) => GridsterItemConfig;
getLastPossiblePosition: (item: GridsterItemConfig) => GridsterItemConfig;
getItemComponent: (item: GridsterItemConfig) => GridsterItem | undefined;
};
type GridsterConfig = {
gridType?: gridTypes;
scale?: number;
fixedColWidth?: number;
fixedRowHeight?: number;
keepFixedHeightInMobile?: boolean;
keepFixedWidthInMobile?: boolean;
setGridSize?: boolean;
compactType?: compactTypes;
mobileBreakpoint?: number;
allowMultiLayer?: boolean;
defaultLayerIndex?: number;
maxLayerIndex?: number;
baseLayerIndex?: number;
minCols?: number;
maxCols?: number;
minRows?: number;
maxRows?: number;
defaultItemCols?: number;
defaultItemRows?: number;
itemAspectRatio?: number | null;
maxItemCols?: number;
maxItemRows?: number;
minItemCols?: number;
minItemRows?: number;
minItemArea?: number;
maxItemArea?: number;
addEmptyRowsCount?: number;
rowHeightRatio?: number;
margin?: number;
outerMargin?: boolean;
outerMarginTop?: number | null;
outerMarginRight?: number | null;
outerMarginBottom?: number | null;
outerMarginLeft?: number | null;
useTransformPositioning?: boolean;
scrollSensitivity?: number;
scrollSpeed?: number;
initCallback?: (gridster: Gridster, gridsterApi: GridsterApi) => void;
destroyCallback?: (gridster: Gridster) => void;
gridSizeChangedCallback?: (gridster: Gridster) => void;
itemChangeCallback?: (item: GridsterItemConfig, itemComponent: GridsterItem) => void;
itemResizeCallback?: (item: GridsterItemConfig, itemComponent: GridsterItem) => void;
itemInitCallback?: (item: GridsterItemConfig, itemComponent: GridsterItem) => void;
itemRemovedCallback?: (item: GridsterItemConfig, itemComponent: GridsterItem) => void;
itemValidateCallback?: (item: GridsterItemConfig) => boolean;
draggable?: Draggable;
resizable?: Resizable;
swap?: boolean;
swapWhileDragging?: boolean;
pushItems?: boolean;
disablePushOnDrag?: boolean;
disablePushOnResize?: boolean;
disableAutoPositionOnConflict?: boolean;
pushDirections?: PushDirections;
pushResizeItems?: boolean;
displayGrid?: displayGrids;
disableWindowResize?: boolean;
disableWarnings?: boolean;
scrollToNewItems?: boolean;
disableScrollHorizontal?: boolean;
disableScrollVertical?: boolean;
enableBoundaryControl?: boolean;
enableEmptyCellClick?: boolean;
enableEmptyCellContextMenu?: boolean;
enableEmptyCellDrop?: boolean;
enableEmptyCellDrag?: boolean;
enableOccupiedCellDrop?: boolean;
emptyCellClickCallback?: (event: MouseEvent, item: GridsterItemConfig) => void;
emptyCellContextMenuCallback?: (event: MouseEvent, item: GridsterItemConfig) => void;
emptyCellDropCallback?: (event: DragEvent, item: GridsterItemConfig) => void;
emptyCellDragCallback?: (event: MouseEvent, item: GridsterItemConfig) => void;
emptyCellDragMaxCols?: number;
emptyCellDragMaxRows?: number;
ignoreMarginInRow?: boolean;
dirType?: dirTypes;
[propName: string]: any;
};
type DragBase = {
enabled?: boolean;
stop?: (item: GridsterItemConfig, itemComponent: GridsterItem, event: MouseEvent) => Promise<any> | void;
start?: (item: GridsterItemConfig, itemComponent: GridsterItem, event: MouseEvent) => void;
delayStart?: number;
};
type Draggable = DragBase & {
ignoreContentClass?: string;
ignoreContent?: boolean;
dragHandleClass?: string;
dropOverItems?: boolean;
dropOverItemsCallback?: (source: GridsterItemConfig, target: GridsterItemConfig, grid?: Gridster) => void;
};
type Resizable = DragBase & {
handles?: ResizableHandles;
};
type PushDirections = {
north: boolean;
east: boolean;
south: boolean;
west: boolean;
};
type GridsterConfigStrict = Required<GridsterConfig> & {
draggable: Required<Draggable>;
resizable: Required<Resizable>;
};
declare class GridsterEmptyCell {
private gridster;
initialItem: GridsterItemConfig | null;
removeEmptyCellClickListenerFn: (() => void) | null;
removeEmptyCellTouchendListenerFn: (() => void) | null;
removeEmptyCellContextMenuListenerFn: (() => void) | null;
removeEmptyCellDropListenerFn: (() => void) | null;
removeEmptyCellMousedownListenerFn: (() => void) | null;
removeEmptyCellTouchstartListenerFn: (() => void) | null;
removeWindowMousemoveListenerFn: () => void;
removeWindowTouchmoveListenerFn: () => void;
removeWindowMouseupListenerFn: () => void;
removeWindowTouchendListenerFn: () => void;
removeEmptyCellDragoverListenerFn: (() => void) | null;
removeDocumentDragendListenerFn: (() => void) | null;
constructor(gridster: Gridster);
destroy(): void;
updateOptions(): void;
emptyCellClickCb: (e: MouseEvent) => void;
emptyCellContextMenuCb: (e: MouseEvent) => void;
emptyCellDragDrop: (e: DragEvent) => void;
emptyCellDragOver: (e: DragEvent) => void;
emptyCellMouseDown: (e: MouseEvent) => void;
emptyCellMouseMove: (e: MouseEvent) => void;
emptyCellMouseUp: (e: MouseEvent) => void;
getPixelsX(e: MouseEvent, rect: ClientRect): number;
getPixelsY(e: MouseEvent, rect: ClientRect): number;
getValidItemFromEvent(e: MouseEvent, oldItem?: GridsterItemConfig | null): GridsterItemConfig | undefined;
}
declare class GridsterPreview {
private readonly el;
private readonly gridster;
private readonly renderer;
previewStyle(item: GridsterItemConfig | null): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridsterPreview, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<GridsterPreview, "gridster-preview", never, {}, {}, never, never, true, never>;
}
type CommonGridStyle = {
[key: string]: string;
};
declare class GridsterRenderer {
private gridster;
/**
* Caches the last grid column styles.
* This improves the grid responsiveness by caching and reusing the last style object instead of creating a new one.
*/
private lastGridColumnStyles;
/**
* Caches the last grid column styles.
* This improves the grid responsiveness by caching and reusing the last style object instead of creating a new one.
*/
private lastGridRowStyles;
constructor(gridster: Gridster);
updateItem(el: Element, item: GridsterItemConfig, renderer: Renderer2): void;
updateGridster(): void;
getGridColumnStyle(i: number): CommonGridStyle;
getGridRowStyle(i: number): CommonGridStyle;
getLeftPosition(d: number): {
left: string;
} | {
transform: string;
};
getTopPosition(d: number): {
top: string;
} | {
transform: string;
};
clearCellPosition(renderer: Renderer2, el: Element): void;
setCellPosition(renderer: Renderer2, el: Element, x: number, y: number): void;
getLeftMargin(): number;
getTopMargin(): number;
}
declare class Gridster implements OnInit, OnDestroy {
readonly renderer: Renderer2;
readonly cdRef: ChangeDetectorRef;
readonly zone: NgZone;
readonly elRef: ElementRef<HTMLElement>;
readonly api: GridsterApi;
gridsterPreview: _angular_core.Signal<GridsterPreview>;
options: _angular_core.InputSignal<GridsterConfig>;
$options: _angular_core.Signal<GridsterConfigStrict>;
movingItem: GridsterItemConfig | null;
el: HTMLElement;
mobile: boolean;
curWidth: number;
curHeight: number;
grid: GridsterItem[];
columns: number;
rows: number;
curColWidth: number;
curRowHeight: number;
gridColumns: never[];
gridRows: never[];
windowResize: (() => void) | null;
dragInProgress: boolean;
emptyCell: GridsterEmptyCell;
compact: GridsterCompact;
gridRenderer: GridsterRenderer;
calculateLayout$: Subject<void>;
private resize$;
private destroy$;
constructor();
static checkCollisionTwoItemsForSwaping(item: GridsterItemConfig, item2: GridsterItemConfig): boolean;
checkCollisionTwoItems(item: GridsterItemConfig, item2: GridsterItemConfig): boolean;
ngOnInit(): void;
private resize;
ngOnDestroy(): void;
onResize: () => void;
checkIfToResize(): boolean;
checkIfMobile(): boolean;
setGridSize(): void;
setGridDimensions(): void;
private calculateLayout;
updateGrid(): void;
addItem(itemComponent: GridsterItem): void;
removeItem(itemComponent: GridsterItem): void;
checkCollision(item: GridsterItemConfig, checkRatio?: boolean): GridsterItem | boolean;
checkGridCollision(item: GridsterItemConfig, checkRatio?: boolean): boolean;
findItemWithItem(item: GridsterItemConfig): GridsterItem | boolean;
findItemsWithItem(item: GridsterItemConfig): GridsterItem[];
autoPositionItem(itemComponent: GridsterItem): void;
getNextPossiblePosition: (newItem: GridsterItemConfig, startingFrom?: {
y?: number;
x?: number;
}) => boolean;
getFirstPossiblePosition: (item: GridsterItemConfig) => GridsterItemConfig;
getLastPossiblePosition: (item: GridsterItemConfig) => GridsterItemConfig;
pixelsToPositionX(x: number, roundingMethod: (x: number) => number, noLimit?: boolean): number;
pixelsToPositionY(y: number, roundingMethod: (x: number) => number, noLimit?: boolean): number;
positionXToPixels(x: number): number;
positionYToPixels(y: number): number;
getItemComponent(item: GridsterItemConfig): GridsterItem | undefined;
checkCollisionForSwaping(item: GridsterItemConfig): GridsterItem | boolean;
findItemWithItemForSwapping(item: GridsterItemConfig): GridsterItem | boolean;
previewStyle(drag?: boolean): void;
private static getNewArrayLength;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Gridster, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Gridster, "gridster", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
}
declare const GridsterConfigService: GridsterConfig;
export { CompactType, DirTypes, DisplayGrid, GridType, Gridster, GridsterConfigService, GridsterItem, GridsterPush, GridsterPushResize, GridsterSwap };
export type { Draggable, GridsterApi, GridsterConfig, GridsterItemConfig, PushDirections, Resizable, ResizableHandles };