ag-grid
Version:
Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components
87 lines (66 loc) • 3.36 kB
text/typescript
import {GridOptionsWrapper} from "../gridOptionsWrapper";
import {Autowired, Bean} from "../context/context";
import {DragListenerParams, DragService} from "../dragAndDrop/dragService";
export interface HorizontalResizeParams {
eResizeBar: HTMLElement;
onResizeStart: (shiftKey: boolean)=>void;
onResizing: (delta: number)=>void;
onResizeEnd: (delta: number)=>void;
}
export class HorizontalResizeService {
private gridOptionsWrapper: GridOptionsWrapper;
private dragService: DragService;
private eGridDiv: HTMLElement;
private draggingStarted: boolean;
private dragStartX: number;
private resizeAmount: number;
private oldBodyCursor: string;
private oldMsUserSelect: string;
private oldWebkitUserSelect: string;
public addResizeBar(params: HorizontalResizeParams): ()=>void {
let dragSource: DragListenerParams = {
dragStartPixels: 0,
eElement: params.eResizeBar,
onDragStart: this.onDragStart.bind(this, params),
onDragStop: this.onDragStop.bind(this, params),
onDragging: this.onDragging.bind(this, params)
};
this.dragService.addDragSource(dragSource, true);
// we pass remove func back to the caller, so call can tell us when they
// are finished, and then we remove the listener from the drag source
let finishedWithResizeFunc = ()=> this.dragService.removeDragSource(dragSource);
return finishedWithResizeFunc;
}
private onDragStart(params: HorizontalResizeParams, mouseEvent: MouseEvent|Touch): void {
this.draggingStarted = true;
this.dragStartX = mouseEvent.clientX;
this.setResizeIcons();
let shiftKey = mouseEvent instanceof MouseEvent ? (<MouseEvent>mouseEvent).shiftKey === true : false;
params.onResizeStart(shiftKey);
}
private setResizeIcons(): void {
this.oldBodyCursor = this.eGridDiv.style.cursor;
this.oldMsUserSelect = this.eGridDiv.style.msUserSelect;
this.oldWebkitUserSelect = this.eGridDiv.style.webkitUserSelect;
// change the body cursor, so when drag moves out of the drag bar, the cursor is still 'resize' (or 'move'
this.eGridDiv.style.cursor = 'col-resize';
// we don't want text selection outside the grid (otherwise it looks weird as text highlights when we move)
this.eGridDiv.style.msUserSelect = 'none';
this.eGridDiv.style.webkitUserSelect = 'none';
}
private onDragStop(params: HorizontalResizeParams, mouseEvent: MouseEvent|Touch): void {
params.onResizeEnd(this.resizeAmount);
this.resetIcons();
}
private resetIcons(): void {
// we don't want text selection outside the grid (otherwise it looks weird as text highlights when we move)
this.eGridDiv.style.cursor = this.oldBodyCursor;
this.eGridDiv.style.msUserSelect = this.oldMsUserSelect;
this.eGridDiv.style.webkitUserSelect = this.oldWebkitUserSelect;
}
private onDragging(params: HorizontalResizeParams, mouseEvent: MouseEvent|Touch): void {
this.resizeAmount = mouseEvent.clientX - this.dragStartX;
params.onResizing(this.resizeAmount);
}
}