angular-cesium
Version:
Angular library for working with Cesium.
61 lines • 7.18 kB
JavaScript
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
import { DraggableToMapService } from '../services/draggable-to-map.service';
/**
* This directive is used to allow dragging of icons from outside the map over the map
* while being notified of the dragging position and drop position with an observable exposed from `DraggableToMapService`.
* @Input {src: string, style?: any} | string -
* the [src: string | string] should be the image src of the dragged image.
* The style is an optional style object for the image.
*
* example:
* ```
* <a href="..." class="..." [draggableToMap]="{src: '../assets/GitHub-Mark-Light.png', style: {width: '50px', height: '50px'}}">
* <img class="github" src="../assets/GitHub-Mark-Light.png">
* </a>
* ```
*
* In order the get notified of the dragging location and drop state subscribe to `DraggableToMapService.dragUpdates()`
* ```
* this.iconDragService.dragUpdates().subscribe(e => console.log(e));
* ```
*
* In order the cancel dragging use `DraggableToMapService.cancel()`
* ```
* this.iconDragService.cancel();
* ```
*/
export class DraggableToMapDirective {
constructor(el, iconDragService) {
this.iconDragService = iconDragService;
el.nativeElement.style['user-drag'] = 'none';
el.nativeElement.style['user-select'] = 'none';
el.nativeElement.style['-moz-user-select'] = 'none';
el.nativeElement.style['-webkit-user-drag'] = 'none';
el.nativeElement.style['-webkit-user-select'] = 'none';
el.nativeElement.style['-ms-user-select'] = 'none';
}
ngOnInit() {
if (typeof this.draggableToMap === 'string') {
this.src = this.draggableToMap;
}
else {
this.src = this.draggableToMap.src;
this.style = this.draggableToMap.style;
}
}
onMouseDown() {
this.iconDragService.drag(this.src, this.style);
}
}
DraggableToMapDirective.decorators = [
{ type: Directive, args: [{ selector: '[draggableToMap]' },] }
];
DraggableToMapDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: DraggableToMapService }
];
DraggableToMapDirective.propDecorators = {
draggableToMap: [{ type: Input }],
onMouseDown: [{ type: HostListener, args: ['mousedown',] }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJhZ2dhYmxlLXRvLW1hcC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNlc2l1bS9zcmMvbGliL2FuZ3VsYXItY2VzaXVtLXdpZGdldHMvZGlyZWN0aXZlcy9kcmFnZ2FibGUtdG8tbWFwLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQ25GLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBRTdFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQXVCRztBQUdILE1BQU0sT0FBTyx1QkFBdUI7SUFLbEMsWUFBWSxFQUFjLEVBQVUsZUFBc0M7UUFBdEMsb0JBQWUsR0FBZixlQUFlLENBQXVCO1FBQ3hFLEVBQUUsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQyxHQUFHLE1BQU0sQ0FBQztRQUM3QyxFQUFFLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxhQUFhLENBQUMsR0FBRyxNQUFNLENBQUM7UUFDL0MsRUFBRSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsa0JBQWtCLENBQUMsR0FBRyxNQUFNLENBQUM7UUFDcEQsRUFBRSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsbUJBQW1CLENBQUMsR0FBRyxNQUFNLENBQUM7UUFDckQsRUFBRSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMscUJBQXFCLENBQUMsR0FBRyxNQUFNLENBQUM7UUFDdkQsRUFBRSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsaUJBQWlCLENBQUMsR0FBRyxNQUFNLENBQUM7SUFDckQsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLE9BQU8sSUFBSSxDQUFDLGNBQWMsS0FBSyxRQUFRLEVBQUU7WUFDM0MsSUFBSSxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDO1NBQ2hDO2FBQU07WUFDTCxJQUFJLENBQUMsR0FBRyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsR0FBRyxDQUFDO1lBQ25DLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxLQUFLLENBQUM7U0FDeEM7SUFDSCxDQUFDO0lBR0QsV0FBVztRQUNULElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2xELENBQUM7OztZQTNCRixTQUFTLFNBQUMsRUFBQyxRQUFRLEVBQUUsa0JBQWtCLEVBQUM7OztZQTVCckIsVUFBVTtZQUNyQixxQkFBcUI7Ozs2QkE2QjNCLEtBQUs7MEJBc0JMLFlBQVksU0FBQyxXQUFXIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgRHJhZ2dhYmxlVG9NYXBTZXJ2aWNlIH0gZnJvbSAnLi4vc2VydmljZXMvZHJhZ2dhYmxlLXRvLW1hcC5zZXJ2aWNlJztcclxuXHJcbi8qKlxyXG4gKiBUaGlzIGRpcmVjdGl2ZSBpcyB1c2VkIHRvIGFsbG93IGRyYWdnaW5nIG9mIGljb25zIGZyb20gb3V0c2lkZSB0aGUgbWFwIG92ZXIgdGhlIG1hcFxyXG4gKiB3aGlsZSBiZWluZyBub3RpZmllZCBvZiB0aGUgZHJhZ2dpbmcgcG9zaXRpb24gYW5kIGRyb3AgcG9zaXRpb24gd2l0aCBhbiBvYnNlcnZhYmxlIGV4cG9zZWQgZnJvbSBgRHJhZ2dhYmxlVG9NYXBTZXJ2aWNlYC5cclxuICogQElucHV0IHtzcmM6IHN0cmluZywgc3R5bGU/OiBhbnl9IHwgc3RyaW5nIC1cclxuICogdGhlIFtzcmM6IHN0cmluZyB8IHN0cmluZ10gc2hvdWxkIGJlIHRoZSBpbWFnZSBzcmMgb2YgdGhlIGRyYWdnZWQgaW1hZ2UuXHJcbiAqIFRoZSBzdHlsZSBpcyBhbiBvcHRpb25hbCBzdHlsZSBvYmplY3QgZm9yIHRoZSBpbWFnZS5cclxuICpcclxuICogZXhhbXBsZTpcclxuICogYGBgXHJcbiAqIDxhIGhyZWY9XCIuLi5cIiBjbGFzcz1cIi4uLlwiIFtkcmFnZ2FibGVUb01hcF09XCJ7c3JjOiAnLi4vYXNzZXRzL0dpdEh1Yi1NYXJrLUxpZ2h0LnBuZycsIHN0eWxlOiB7d2lkdGg6ICc1MHB4JywgaGVpZ2h0OiAnNTBweCd9fVwiPlxyXG4gKiAgICAgPGltZyBjbGFzcz1cImdpdGh1YlwiIHNyYz1cIi4uL2Fzc2V0cy9HaXRIdWItTWFyay1MaWdodC5wbmdcIj5cclxuICogPC9hPlxyXG4gKiBgYGBcclxuICpcclxuICogSW4gb3JkZXIgdGhlIGdldCBub3RpZmllZCBvZiB0aGUgZHJhZ2dpbmcgbG9jYXRpb24gIGFuZCBkcm9wIHN0YXRlIHN1YnNjcmliZSB0byBgRHJhZ2dhYmxlVG9NYXBTZXJ2aWNlLmRyYWdVcGRhdGVzKClgXHJcbiAqIGBgYFxyXG4gKiAgdGhpcy5pY29uRHJhZ1NlcnZpY2UuZHJhZ1VwZGF0ZXMoKS5zdWJzY3JpYmUoZSA9PiBjb25zb2xlLmxvZyhlKSk7XHJcbiAqIGBgYFxyXG4gKlxyXG4gKiBJbiBvcmRlciB0aGUgY2FuY2VsIGRyYWdnaW5nIHVzZSBgRHJhZ2dhYmxlVG9NYXBTZXJ2aWNlLmNhbmNlbCgpYFxyXG4gKiBgYGBcclxuICogIHRoaXMuaWNvbkRyYWdTZXJ2aWNlLmNhbmNlbCgpO1xyXG4gKiBgYGBcclxuICovXHJcblxyXG5ARGlyZWN0aXZlKHtzZWxlY3RvcjogJ1tkcmFnZ2FibGVUb01hcF0nfSlcclxuZXhwb3J0IGNsYXNzIERyYWdnYWJsZVRvTWFwRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0IHtcclxuICBASW5wdXQoKSBkcmFnZ2FibGVUb01hcDogeyBzcmM6IHN0cmluZywgc3R5bGU/OiBhbnkgfSB8IHN0cmluZztcclxuICBwcml2YXRlIHNyYzogc3RyaW5nO1xyXG4gIHByaXZhdGUgc3R5bGU6IGFueTtcclxuXHJcbiAgY29uc3RydWN0b3IoZWw6IEVsZW1lbnRSZWYsIHByaXZhdGUgaWNvbkRyYWdTZXJ2aWNlOiBEcmFnZ2FibGVUb01hcFNlcnZpY2UpIHtcclxuICAgIGVsLm5hdGl2ZUVsZW1lbnQuc3R5bGVbJ3VzZXItZHJhZyddID0gJ25vbmUnO1xyXG4gICAgZWwubmF0aXZlRWxlbWVudC5zdHlsZVsndXNlci1zZWxlY3QnXSA9ICdub25lJztcclxuICAgIGVsLm5hdGl2ZUVsZW1lbnQuc3R5bGVbJy1tb3otdXNlci1zZWxlY3QnXSA9ICdub25lJztcclxuICAgIGVsLm5hdGl2ZUVsZW1lbnQuc3R5bGVbJy13ZWJraXQtdXNlci1kcmFnJ10gPSAnbm9uZSc7XHJcbiAgICBlbC5uYXRpdmVFbGVtZW50LnN0eWxlWyctd2Via2l0LXVzZXItc2VsZWN0J10gPSAnbm9uZSc7XHJcbiAgICBlbC5uYXRpdmVFbGVtZW50LnN0eWxlWyctbXMtdXNlci1zZWxlY3QnXSA9ICdub25lJztcclxuICB9XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgaWYgKHR5cGVvZiB0aGlzLmRyYWdnYWJsZVRvTWFwID09PSAnc3RyaW5nJykge1xyXG4gICAgICB0aGlzLnNyYyA9IHRoaXMuZHJhZ2dhYmxlVG9NYXA7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICB0aGlzLnNyYyA9IHRoaXMuZHJhZ2dhYmxlVG9NYXAuc3JjO1xyXG4gICAgICB0aGlzLnN0eWxlID0gdGhpcy5kcmFnZ2FibGVUb01hcC5zdHlsZTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlZG93bicpXHJcbiAgb25Nb3VzZURvd24oKSB7XHJcbiAgICB0aGlzLmljb25EcmFnU2VydmljZS5kcmFnKHRoaXMuc3JjLCB0aGlzLnN0eWxlKTtcclxuICB9XHJcbn1cclxuIl19