@eliorar/angular-cesium
Version:
Angular library for working with Cesium.
113 lines (111 loc) • 13.2 kB
JavaScript
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { fromEvent as observableFromEvent } from 'rxjs';
import { switchMap, takeUntil, tap } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "../../../../angular-cesium/services/cesium/cesium.service";
import * as i2 from "../ac-toolbar-button/ac-toolbar-button.component";
import * as i3 from "./drag-icon.component";
import * as i4 from "@angular/common";
/**
* Toolbar widget, act as a container for ac-toolbar-button components
* allowing drag configuration and passing `toolbarClass` as attributes
*
* Usage:
* ```
* <ac-toolbar [allowDrag]="true" (onDrag)="handleDrag($event)">
<ac-toolbar-button [iconUrl]="'assets/home-icon.svg'" (onClick)="goHome()">
</ac-toolbar-button>
<ac-toolbar-button [iconUrl]="'assets/explore-icon.svg'" (onClick)="rangeAndBearing()">
</ac-toolbar-button>
</ac-toolbar>
* ```
*
*/
export class AcToolbarComponent {
constructor(element, cesiumService) {
this.element = element;
this.cesiumService = cesiumService;
this.allowDrag = true;
this.onDrag = new EventEmitter();
this.dragStyle = {
'height.px': 20,
'width.px': 20,
};
}
ngOnInit() {
this.cesiumService.getMapContainer().appendChild(this.element.nativeElement);
if (this.allowDrag) {
this.listenForDragging();
}
}
ngOnChanges(changes) {
if (changes.allowDrag && changes.allowDrag.currentValue && !changes.allowDrag.previousValue) {
this.listenForDragging();
}
if (changes.allowDrag && !changes.allowDrag.currentValue && changes.allowDrag.previousValue) {
this.dragSubscription.unsubscribe();
}
}
ngOnDestroy() {
if (this.dragSubscription) {
this.dragSubscription.unsubscribe();
}
}
listenForDragging() {
this.mouseDown$ = this.mouseDown$ || observableFromEvent(this.element.nativeElement, 'mousedown');
this.mouseMove$ = this.mouseMove$ || observableFromEvent(document, 'mousemove');
this.mouseUp$ = this.mouseUp$ || observableFromEvent(document, 'mouseup');
this.drag$ = this.drag$ ||
this.mouseDown$.pipe(switchMap(() => this.mouseMove$.pipe(tap(this.onDrag.emit), takeUntil(this.mouseUp$))));
this.dragSubscription = this.drag$.subscribe((event) => {
this.element.nativeElement.style.left = `${event.x}px`;
this.element.nativeElement.style.top = `${event.y}px`;
});
}
}
AcToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AcToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i1.CesiumService }], target: i0.ɵɵFactoryTarget.Component });
AcToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: AcToolbarComponent, selector: "ac-toolbar", inputs: { toolbarClass: "toolbarClass", allowDrag: "allowDrag" }, outputs: { onDrag: "onDrag" }, usesOnChanges: true, ngImport: i0, template: `
<div class="{{toolbarClass}}">
<div *ngIf="allowDrag">
<ac-toolbar-button>
<ac-drag-icon></ac-drag-icon>
</ac-toolbar-button>
</div>
<ng-content></ng-content>
</div>
`, isInline: true, styles: [":host{position:absolute;top:20px;left:20px;width:20px;height:20px;z-index:999;-webkit-user-drag:none}\n"], components: [{ type: i2.AcToolbarButtonComponent, selector: "ac-toolbar-button", inputs: ["iconUrl", "buttonClass", "iconClass"], outputs: ["onClick"] }, { type: i3.DragIconComponent, selector: "ac-drag-icon" }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: AcToolbarComponent, decorators: [{
type: Component,
args: [{
selector: 'ac-toolbar',
template: `
<div class="{{toolbarClass}}">
<div *ngIf="allowDrag">
<ac-toolbar-button>
<ac-drag-icon></ac-drag-icon>
</ac-toolbar-button>
</div>
<ng-content></ng-content>
</div>
`,
styles: [`
:host {
position: absolute;
top: 20px;
left: 20px;
width: 20px;
height: 20px;
z-index: 999;
-webkit-user-drag: none;
}
`],
changeDetection: ChangeDetectionStrategy.OnPush,
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.CesiumService }]; }, propDecorators: { toolbarClass: [{
type: Input
}], allowDrag: [{
type: Input
}], onDrag: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWMtdG9vbGJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNlc2l1bS9zcmMvbGliL2FuZ3VsYXItY2VzaXVtLXdpZGdldHMvY29tcG9uZW50cy90b29sYmFyL2FjLXRvb2xiYXIvYWMtdG9vbGJhci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBRVQsWUFBWSxFQUNaLEtBQUssRUFJTCxNQUFNLEVBRVAsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFNBQVMsSUFBSSxtQkFBbUIsRUFBMkIsTUFBTSxNQUFNLENBQUM7QUFDaEYsT0FBTyxFQUFDLFNBQVMsRUFBRSxTQUFTLEVBQUUsR0FBRyxFQUFDLE1BQU0sZ0JBQWdCLENBQUM7Ozs7OztBQUl6RDs7Ozs7Ozs7Ozs7Ozs7R0FjRztBQTZCSCxNQUFNLE9BQU8sa0JBQWtCO0lBbUI3QixZQUFvQixPQUFtQixFQUFVLGFBQTRCO1FBQXpELFlBQU8sR0FBUCxPQUFPLENBQVk7UUFBVSxrQkFBYSxHQUFiLGFBQWEsQ0FBZTtRQWY3RSxjQUFTLEdBQUcsSUFBSSxDQUFDO1FBRWpCLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBYyxDQUFDO1FBRXhDLGNBQVMsR0FBRztZQUNWLFdBQVcsRUFBRSxFQUFFO1lBQ2YsVUFBVSxFQUFFLEVBQUU7U0FDZixDQUFDO0lBUThFLENBQUM7SUFFakYsUUFBUTtRQUNOLElBQUksQ0FBQyxhQUFhLENBQUMsZUFBZSxFQUFFLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDN0UsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2xCLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxDQUFDO1NBQzFCO0lBQ0gsQ0FBQztJQUdELFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFJLE9BQU8sQ0FBQyxTQUFTLElBQUksT0FBTyxDQUFDLFNBQVMsQ0FBQyxZQUFZLElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLGFBQWEsRUFBRTtZQUMzRixJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztTQUMxQjtRQUVELElBQUksT0FBTyxDQUFDLFNBQVMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsWUFBWSxJQUFJLE9BQU8sQ0FBQyxTQUFTLENBQUMsYUFBYSxFQUFFO1lBQzNGLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUNyQztJQUNILENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxJQUFJLENBQUMsZ0JBQWdCLEVBQUU7WUFDekIsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFdBQVcsRUFBRSxDQUFDO1NBQ3JDO0lBQ0gsQ0FBQztJQUVPLGlCQUFpQjtRQUN2QixJQUFJLENBQUMsVUFBVSxHQUFHLElBQUksQ0FBQyxVQUFVLElBQUksbUJBQW1CLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLEVBQUUsV0FBVyxDQUFDLENBQUM7UUFDbEcsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsVUFBVSxJQUFJLG1CQUFtQixDQUFDLFFBQVEsRUFBRSxXQUFXLENBQTJCLENBQUM7UUFDMUcsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsUUFBUSxJQUFJLG1CQUFtQixDQUFDLFFBQVEsRUFBRSxTQUFTLENBQTJCLENBQUM7UUFFcEcsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSztZQUNWLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUNqQixTQUFTLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQ2xDLEdBQUcsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxFQUNyQixTQUFTLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUN6QixDQUFDLENBQ0osQ0FBQztRQUVmLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLFNBQVMsQ0FBQyxDQUFDLEtBQWlCLEVBQUUsRUFBRTtZQUNqRSxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsSUFBSSxHQUFHLEdBQUcsS0FBSyxDQUFDLENBQUMsSUFBSSxDQUFDO1lBQ3ZELElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxHQUFHLEdBQUcsR0FBRyxLQUFLLENBQUMsQ0FBQyxJQUFJLENBQUM7UUFDeEQsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDOzsrR0E5RFUsa0JBQWtCO21HQUFsQixrQkFBa0Isd0tBekJqQjs7Ozs7Ozs7OztLQVVUOzJGQWVRLGtCQUFrQjtrQkE1QjlCLFNBQVM7bUJBQ1I7b0JBQ0UsUUFBUSxFQUFFLFlBQVk7b0JBQ3RCLFFBQVEsRUFBRTs7Ozs7Ozs7OztLQVVUO29CQUNELE1BQU0sRUFBRSxDQUFDOzs7Ozs7Ozs7O0tBVVIsQ0FBQztvQkFDRixlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTtpQkFDaEQ7NkhBSUQsWUFBWTtzQkFEWCxLQUFLO2dCQUdOLFNBQVM7c0JBRFIsS0FBSztnQkFHTixNQUFNO3NCQURMLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPbkNoYW5nZXMsXG4gIE9uRGVzdHJveSxcbiAgT25Jbml0LFxuICBPdXRwdXQsXG4gIFNpbXBsZUNoYW5nZXNcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge2Zyb21FdmVudCBhcyBvYnNlcnZhYmxlRnJvbUV2ZW50LCBPYnNlcnZhYmxlLCBTdWJzY3JpcHRpb259IGZyb20gJ3J4anMnO1xuaW1wb3J0IHtzd2l0Y2hNYXAsIHRha2VVbnRpbCwgdGFwfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQge0Nlc2l1bVNlcnZpY2V9IGZyb20gJy4uLy4uLy4uLy4uL2FuZ3VsYXItY2VzaXVtL3NlcnZpY2VzL2Nlc2l1bS9jZXNpdW0uc2VydmljZSc7XG5cblxuLyoqXG4gKiBUb29sYmFyIHdpZGdldCwgYWN0IGFzIGEgY29udGFpbmVyIGZvciBhYy10b29sYmFyLWJ1dHRvbiBjb21wb25lbnRzXG4gKiBhbGxvd2luZyBkcmFnIGNvbmZpZ3VyYXRpb24gYW5kIHBhc3NpbmcgYHRvb2xiYXJDbGFzc2AgYXMgYXR0cmlidXRlc1xuICpcbiAqIFVzYWdlOlxuICogYGBgXG4gKiA8YWMtdG9vbGJhciBbYWxsb3dEcmFnXT1cInRydWVcIiAob25EcmFnKT1cImhhbmRsZURyYWcoJGV2ZW50KVwiPlxuIDxhYy10b29sYmFyLWJ1dHRvbiBbaWNvblVybF09XCInYXNzZXRzL2hvbWUtaWNvbi5zdmcnXCIgKG9uQ2xpY2spPVwiZ29Ib21lKClcIj5cbiA8L2FjLXRvb2xiYXItYnV0dG9uPlxuIDxhYy10b29sYmFyLWJ1dHRvbiBbaWNvblVybF09XCInYXNzZXRzL2V4cGxvcmUtaWNvbi5zdmcnXCIgKG9uQ2xpY2spPVwicmFuZ2VBbmRCZWFyaW5nKClcIj5cbiA8L2FjLXRvb2xiYXItYnV0dG9uPlxuIDwvYWMtdG9vbGJhcj5cbiAqIGBgYFxuICpcbiAqL1xuQENvbXBvbmVudChcbiAge1xuICAgIHNlbGVjdG9yOiAnYWMtdG9vbGJhcicsXG4gICAgdGVtcGxhdGU6IGBcbiAgICAgICAgPGRpdiBjbGFzcz1cInt7dG9vbGJhckNsYXNzfX1cIj5cbiAgICAgICAgICAgIDxkaXYgKm5nSWY9XCJhbGxvd0RyYWdcIj5cbiAgICAgICAgICAgICAgICA8YWMtdG9vbGJhci1idXR0b24+XG4gICAgICAgICAgICAgICAgICAgIDxhYy1kcmFnLWljb24+PC9hYy1kcmFnLWljb24+XG4gICAgICAgICAgICAgICAgPC9hYy10b29sYmFyLWJ1dHRvbj5cbiAgICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgIGAsXG4gICAgc3R5bGVzOiBbYFxuICAgICAgICA6aG9zdCB7XG4gICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gICAgICAgICAgICB0b3A6IDIwcHg7XG4gICAgICAgICAgICBsZWZ0OiAyMHB4O1xuICAgICAgICAgICAgd2lkdGg6IDIwcHg7XG4gICAgICAgICAgICBoZWlnaHQ6IDIwcHg7XG4gICAgICAgICAgICB6LWluZGV4OiA5OTk7XG4gICAgICAgICAgICAtd2Via2l0LXVzZXItZHJhZzogbm9uZTtcbiAgICAgICAgfVxuICAgIGBdLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICB9XG4pXG5leHBvcnQgY2xhc3MgQWNUb29sYmFyQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMsIE9uRGVzdHJveSB7XG4gIEBJbnB1dCgpXG4gIHRvb2xiYXJDbGFzczogc3RyaW5nO1xuICBASW5wdXQoKVxuICBhbGxvd0RyYWcgPSB0cnVlO1xuICBAT3V0cHV0KClcbiAgb25EcmFnID0gbmV3IEV2ZW50RW1pdHRlcjxNb3VzZUV2ZW50PigpO1xuXG4gIGRyYWdTdHlsZSA9IHtcbiAgICAnaGVpZ2h0LnB4JzogMjAsXG4gICAgJ3dpZHRoLnB4JzogMjAsXG4gIH07XG5cbiAgcHJpdmF0ZSBtb3VzZURvd24kOiBPYnNlcnZhYmxlPE1vdXNlRXZlbnQ+O1xuICBwcml2YXRlIG1vdXNlTW92ZSQ6IE9ic2VydmFibGU8TW91c2VFdmVudD47XG4gIHByaXZhdGUgbW91c2VVcCQ6IE9ic2VydmFibGU8TW91c2VFdmVudD47XG4gIHByaXZhdGUgZHJhZyQ6IE9ic2VydmFibGU8TW91c2VFdmVudD47XG4gIHByaXZhdGUgZHJhZ1N1YnNjcmlwdGlvbjogU3Vic2NyaXB0aW9uO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxlbWVudDogRWxlbWVudFJlZiwgcHJpdmF0ZSBjZXNpdW1TZXJ2aWNlOiBDZXNpdW1TZXJ2aWNlKSB7fVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuY2VzaXVtU2VydmljZS5nZXRNYXBDb250YWluZXIoKS5hcHBlbmRDaGlsZCh0aGlzLmVsZW1lbnQubmF0aXZlRWxlbWVudCk7XG4gICAgaWYgKHRoaXMuYWxsb3dEcmFnKSB7XG4gICAgICB0aGlzLmxpc3RlbkZvckRyYWdnaW5nKCk7XG4gICAgfVxuICB9XG5cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKSB7XG4gICAgaWYgKGNoYW5nZXMuYWxsb3dEcmFnICYmIGNoYW5nZXMuYWxsb3dEcmFnLmN1cnJlbnRWYWx1ZSAmJiAhY2hhbmdlcy5hbGxvd0RyYWcucHJldmlvdXNWYWx1ZSkge1xuICAgICAgdGhpcy5saXN0ZW5Gb3JEcmFnZ2luZygpO1xuICAgIH1cblxuICAgIGlmIChjaGFuZ2VzLmFsbG93RHJhZyAmJiAhY2hhbmdlcy5hbGxvd0RyYWcuY3VycmVudFZhbHVlICYmIGNoYW5nZXMuYWxsb3dEcmFnLnByZXZpb3VzVmFsdWUpIHtcbiAgICAgIHRoaXMuZHJhZ1N1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICAgIH1cbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIGlmICh0aGlzLmRyYWdTdWJzY3JpcHRpb24pIHtcbiAgICAgIHRoaXMuZHJhZ1N1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgbGlzdGVuRm9yRHJhZ2dpbmcoKSB7XG4gICAgdGhpcy5tb3VzZURvd24kID0gdGhpcy5tb3VzZURvd24kIHx8IG9ic2VydmFibGVGcm9tRXZlbnQodGhpcy5lbGVtZW50Lm5hdGl2ZUVsZW1lbnQsICdtb3VzZWRvd24nKTtcbiAgICB0aGlzLm1vdXNlTW92ZSQgPSB0aGlzLm1vdXNlTW92ZSQgfHwgb2JzZXJ2YWJsZUZyb21FdmVudChkb2N1bWVudCwgJ21vdXNlbW92ZScpIGFzIE9ic2VydmFibGU8TW91c2VFdmVudD47XG4gICAgdGhpcy5tb3VzZVVwJCA9IHRoaXMubW91c2VVcCQgfHwgb2JzZXJ2YWJsZUZyb21FdmVudChkb2N1bWVudCwgJ21vdXNldXAnKSBhcyBPYnNlcnZhYmxlPE1vdXNlRXZlbnQ+O1xuXG4gICAgdGhpcy5kcmFnJCA9IHRoaXMuZHJhZyQgfHxcbiAgICAgICAgICAgICAgICAgdGhpcy5tb3VzZURvd24kLnBpcGUoXG4gICAgICAgICAgICAgICAgICAgIHN3aXRjaE1hcCgoKSA9PiB0aGlzLm1vdXNlTW92ZSQucGlwZShcbiAgICAgICAgICAgICAgICAgICAgICB0YXAodGhpcy5vbkRyYWcuZW1pdCksXG4gICAgICAgICAgICAgICAgICAgICAgdGFrZVVudGlsKHRoaXMubW91c2VVcCQpXG4gICAgICAgICAgICAgICAgICAgICkpXG4gICAgICAgICAgICAgICAgICk7XG5cbiAgICB0aGlzLmRyYWdTdWJzY3JpcHRpb24gPSB0aGlzLmRyYWckLnN1YnNjcmliZSgoZXZlbnQ6IE1vdXNlRXZlbnQpID0+IHtcbiAgICAgIHRoaXMuZWxlbWVudC5uYXRpdmVFbGVtZW50LnN0eWxlLmxlZnQgPSBgJHtldmVudC54fXB4YDtcbiAgICAgIHRoaXMuZWxlbWVudC5uYXRpdmVFbGVtZW50LnN0eWxlLnRvcCA9IGAke2V2ZW50Lnl9cHhgO1xuICAgIH0pO1xuICB9XG59XG4iXX0=