ngx-drag-to-select
Version:
A lightweight, fast, configurable and reactive drag-to-select component for Angular 8 and beyond
25 lines • 5.76 kB
JavaScript
import { distinctUntilChanged, filter, map, withLatestFrom } from 'rxjs/operators';
import { getRelativeMousePosition, hasMinimumSize } from './utils';
export const createSelectBox = (container) => {
return (source) => {
return source.pipe(map(([event, opacity, { x, y }]) => {
// Type annotation is required here, because `getRelativeMousePosition` returns a `MousePosition`,
// the TS compiler cannot figure out the shape of this type.
const mousePosition = getRelativeMousePosition(event, container);
const width = opacity > 0 ? mousePosition.x - x : 0;
const height = opacity > 0 ? mousePosition.y - y : 0;
return {
top: height < 0 ? mousePosition.y : y,
left: width < 0 ? mousePosition.x : x,
width: Math.abs(width),
height: Math.abs(height),
opacity,
};
}));
};
};
export const whenSelectBoxVisible = (selectBox$) => (source) => source.pipe(withLatestFrom(selectBox$), filter(([, selectBox]) => hasMinimumSize(selectBox, 0, 0)), map(([event, _]) => event));
export const distinctKeyEvents = () => (source) => source.pipe(distinctUntilChanged((prev, curr) => {
return prev && curr && prev.code === curr.code;
}));
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3BlcmF0b3JzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRyYWctdG8tc2VsZWN0L3NyYy9saWIvb3BlcmF0b3JzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLGNBQWMsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRW5GLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxjQUFjLEVBQUUsTUFBTSxTQUFTLENBQUM7QUFFbkUsTUFBTSxDQUFDLE1BQU0sZUFBZSxHQUFHLENBQUMsU0FBOEIsRUFBRSxFQUFFO0lBQ2hFLE9BQU8sQ0FBQyxNQUFrQyxFQUFpQyxFQUFFO1FBQzNFLE9BQU8sTUFBTSxDQUFDLElBQUksQ0FDaEIsR0FBRyxDQUFDLENBQUMsQ0FBQyxLQUFLLEVBQUUsT0FBTyxFQUFFLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRTtZQUNqQyxrR0FBa0c7WUFDbEcsNERBQTREO1lBQzVELE1BQU0sYUFBYSxHQUFrQix3QkFBd0IsQ0FBQyxLQUFLLEVBQUUsU0FBUyxDQUFDLENBQUM7WUFFaEYsTUFBTSxLQUFLLEdBQUcsT0FBTyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsYUFBYSxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUNwRCxNQUFNLE1BQU0sR0FBRyxPQUFPLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxhQUFhLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBRXJELE9BQU87Z0JBQ0wsR0FBRyxFQUFFLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLENBQUM7Z0JBQ3JDLElBQUksRUFBRSxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO2dCQUNyQyxLQUFLLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUM7Z0JBQ3RCLE1BQU0sRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQztnQkFDeEIsT0FBTzthQUNSLENBQUM7UUFDSixDQUFDLENBQUMsQ0FDSCxDQUFDO0lBQ0osQ0FBQyxDQUFDO0FBQ0osQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sb0JBQW9CLEdBQUcsQ0FBQyxVQUF5QyxFQUFFLEVBQUUsQ0FBQyxDQUFDLE1BQXlCLEVBQUUsRUFBRSxDQUMvRyxNQUFNLENBQUMsSUFBSSxDQUNULGNBQWMsQ0FBQyxVQUFVLENBQUMsRUFDMUIsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxjQUFjLENBQUMsU0FBUyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxFQUMxRCxHQUFHLENBQUMsQ0FBQyxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsS0FBSyxDQUFDLENBQzNCLENBQUM7QUFFSixNQUFNLENBQUMsTUFBTSxpQkFBaUIsR0FBRyxHQUFHLEVBQUUsQ0FBQyxDQUFDLE1BQWlDLEVBQUUsRUFBRSxDQUMzRSxNQUFNLENBQUMsSUFBSSxDQUNULG9CQUFvQixDQUFDLENBQUMsSUFBSSxFQUFFLElBQUksRUFBRSxFQUFFO0lBQ2xDLE9BQU8sSUFBSSxJQUFJLElBQUksSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksQ0FBQyxJQUFJLENBQUM7QUFDakQsQ0FBQyxDQUFDLENBQ0gsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE9ic2VydmFibGUgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IGRpc3RpbmN0VW50aWxDaGFuZ2VkLCBmaWx0ZXIsIG1hcCwgd2l0aExhdGVzdEZyb20gfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBNb3VzZVBvc2l0aW9uLCBTZWxlY3RCb3gsIFNlbGVjdEJveElucHV0LCBTZWxlY3RDb250YWluZXJIb3N0IH0gZnJvbSAnLi9tb2RlbHMnO1xuaW1wb3J0IHsgZ2V0UmVsYXRpdmVNb3VzZVBvc2l0aW9uLCBoYXNNaW5pbXVtU2l6ZSB9IGZyb20gJy4vdXRpbHMnO1xuXG5leHBvcnQgY29uc3QgY3JlYXRlU2VsZWN0Qm94ID0gKGNvbnRhaW5lcjogU2VsZWN0Q29udGFpbmVySG9zdCkgPT4ge1xuICByZXR1cm4gKHNvdXJjZTogT2JzZXJ2YWJsZTxTZWxlY3RCb3hJbnB1dD4pOiBPYnNlcnZhYmxlPFNlbGVjdEJveDxudW1iZXI+PiA9PiB7XG4gICAgcmV0dXJuIHNvdXJjZS5waXBlKFxuICAgICAgbWFwKChbZXZlbnQsIG9wYWNpdHksIHsgeCwgeSB9XSkgPT4ge1xuICAgICAgICAvLyBUeXBlIGFubm90YXRpb24gaXMgcmVxdWlyZWQgaGVyZSwgYmVjYXVzZSBgZ2V0UmVsYXRpdmVNb3VzZVBvc2l0aW9uYCByZXR1cm5zIGEgYE1vdXNlUG9zaXRpb25gLFxuICAgICAgICAvLyB0aGUgVFMgY29tcGlsZXIgY2Fubm90IGZpZ3VyZSBvdXQgdGhlIHNoYXBlIG9mIHRoaXMgdHlwZS5cbiAgICAgICAgY29uc3QgbW91c2VQb3NpdGlvbjogTW91c2VQb3NpdGlvbiA9IGdldFJlbGF0aXZlTW91c2VQb3NpdGlvbihldmVudCwgY29udGFpbmVyKTtcblxuICAgICAgICBjb25zdCB3aWR0aCA9IG9wYWNpdHkgPiAwID8gbW91c2VQb3NpdGlvbi54IC0geCA6IDA7XG4gICAgICAgIGNvbnN0IGhlaWdodCA9IG9wYWNpdHkgPiAwID8gbW91c2VQb3NpdGlvbi55IC0geSA6IDA7XG5cbiAgICAgICAgcmV0dXJuIHtcbiAgICAgICAgICB0b3A6IGhlaWdodCA8IDAgPyBtb3VzZVBvc2l0aW9uLnkgOiB5LFxuICAgICAgICAgIGxlZnQ6IHdpZHRoIDwgMCA/IG1vdXNlUG9zaXRpb24ueCA6IHgsXG4gICAgICAgICAgd2lkdGg6IE1hdGguYWJzKHdpZHRoKSxcbiAgICAgICAgICBoZWlnaHQ6IE1hdGguYWJzKGhlaWdodCksXG4gICAgICAgICAgb3BhY2l0eSxcbiAgICAgICAgfTtcbiAgICAgIH0pXG4gICAgKTtcbiAgfTtcbn07XG5cbmV4cG9ydCBjb25zdCB3aGVuU2VsZWN0Qm94VmlzaWJsZSA9IChzZWxlY3RCb3gkOiBPYnNlcnZhYmxlPFNlbGVjdEJveDxudW1iZXI+PikgPT4gKHNvdXJjZTogT2JzZXJ2YWJsZTxFdmVudD4pID0+XG4gIHNvdXJjZS5waXBlKFxuICAgIHdpdGhMYXRlc3RGcm9tKHNlbGVjdEJveCQpLFxuICAgIGZpbHRlcigoWywgc2VsZWN0Qm94XSkgPT4gaGFzTWluaW11bVNpemUoc2VsZWN0Qm94LCAwLCAwKSksXG4gICAgbWFwKChbZXZlbnQsIF9dKSA9PiBldmVudClcbiAgKTtcblxuZXhwb3J0IGNvbnN0IGRpc3RpbmN0S2V5RXZlbnRzID0gKCkgPT4gKHNvdXJjZTogT2JzZXJ2YWJsZTxLZXlib2FyZEV2ZW50PikgPT5cbiAgc291cmNlLnBpcGUoXG4gICAgZGlzdGluY3RVbnRpbENoYW5nZWQoKHByZXYsIGN1cnIpID0+IHtcbiAgICAgIHJldHVybiBwcmV2ICYmIGN1cnIgJiYgcHJldi5jb2RlID09PSBjdXJyLmNvZGU7XG4gICAgfSlcbiAgKTtcbiJdfQ==