@greenmice/ngx-cesium
Version:
Angular library for working with Cesium.
96 lines • 13 kB
JavaScript
import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter } 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 "@angular/common";
import * as i3 from "./drag-icon.component";
import * as i4 from "../ac-toolbar-button/ac-toolbar-button.component";
/**
* 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.getMap().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`;
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: AcToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i1.CesiumService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", 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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.DragIconComponent, selector: "ac-drag-icon" }, { kind: "component", type: i4.AcToolbarButtonComponent, selector: "ac-toolbar-button", inputs: ["iconUrl", "buttonClass", "iconClass"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", 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>
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:absolute;top:20px;left:20px;width:20px;height:20px;z-index:999;-webkit-user-drag:none}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.CesiumService }], propDecorators: { toolbarClass: [{
type: Input
}], allowDrag: [{
type: Input
}], onDrag: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWMtdG9vbGJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hbmd1bGFyLWNlc2l1bS9zcmMvbGliL2FuZ3VsYXItY2VzaXVtLXdpZGdldHMvY29tcG9uZW50cy90b29sYmFyL2FjLXRvb2xiYXIvYWMtdG9vbGJhci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBRVQsS0FBSyxFQUtMLE1BQU0sRUFDTixZQUFZLEVBQ2IsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFNBQVMsSUFBSSxtQkFBbUIsRUFBNEIsTUFBTSxNQUFNLENBQUM7QUFDbEYsT0FBTyxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsR0FBRyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7OztBQUkzRDs7Ozs7Ozs7Ozs7Ozs7R0FjRztBQTRCSCxNQUFNLE9BQU8sa0JBQWtCO0lBbUI3QixZQUFvQixPQUFtQixFQUFVLGFBQTRCO1FBQXpELFlBQU8sR0FBUCxPQUFPLENBQVk7UUFBVSxrQkFBYSxHQUFiLGFBQWEsQ0FBZTtRQWY3RSxjQUFTLEdBQUcsSUFBSSxDQUFDO1FBRWpCLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBYyxDQUFDO1FBRXhDLGNBQVMsR0FBRztZQUNWLFdBQVcsRUFBRSxFQUFFO1lBQ2YsVUFBVSxFQUFFLEVBQUU7U0FDZixDQUFDO0lBUThFLENBQUM7SUFFakYsUUFBUTtRQUNOLElBQUksQ0FBQyxhQUFhLENBQUMsTUFBTSxFQUFFLENBQUMsZUFBZSxFQUFFLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDdEYsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7WUFDbkIsSUFBSSxDQUFDLGlCQUFpQixFQUFFLENBQUM7UUFDM0IsQ0FBQztJQUNILENBQUM7SUFHRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsU0FBUyxJQUFJLE9BQU8sQ0FBQyxTQUFTLENBQUMsWUFBWSxJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxhQUFhLEVBQUUsQ0FBQztZQUM1RixJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztRQUMzQixDQUFDO1FBRUQsSUFBSSxPQUFPLENBQUMsU0FBUyxJQUFJLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxZQUFZLElBQUksT0FBTyxDQUFDLFNBQVMsQ0FBQyxhQUFhLEVBQUUsQ0FBQztZQUM1RixJQUFJLENBQUMsZ0JBQWdCLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDdEMsQ0FBQztJQUNILENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxJQUFJLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztZQUMxQixJQUFJLENBQUMsZ0JBQWdCLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDdEMsQ0FBQztJQUNILENBQUM7SUFFTyxpQkFBaUI7UUFDdkIsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsVUFBVSxJQUFJLG1CQUFtQixDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxFQUFFLFdBQVcsQ0FBQyxDQUFDO1FBQ2xHLElBQUksQ0FBQyxVQUFVLEdBQUcsSUFBSSxDQUFDLFVBQVUsSUFBSSxtQkFBbUIsQ0FBQyxRQUFRLEVBQUUsV0FBVyxDQUEyQixDQUFDO1FBQzFHLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLFFBQVEsSUFBSSxtQkFBbUIsQ0FBQyxRQUFRLEVBQUUsU0FBUyxDQUEyQixDQUFDO1FBRXBHLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUs7WUFDVixJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FDakIsU0FBUyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUNsQyxHQUFHLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsRUFDckIsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FDekIsQ0FBQyxDQUNKLENBQUM7UUFFZixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxTQUFTLENBQUMsQ0FBQyxLQUFpQixFQUFFLEVBQUU7WUFDakUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLElBQUksR0FBRyxHQUFHLEtBQUssQ0FBQyxDQUFDLElBQUksQ0FBQztZQUN2RCxJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsR0FBRyxHQUFHLEdBQUcsS0FBSyxDQUFDLENBQUMsSUFBSSxDQUFDO1FBQ3hELENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzs4R0E5RFUsa0JBQWtCO2tHQUFsQixrQkFBa0Isd0tBeEJqQjs7Ozs7Ozs7O0tBU1Q7OzJGQWVRLGtCQUFrQjtrQkEzQjlCLFNBQVM7K0JBRUksWUFBWSxZQUNaOzs7Ozs7Ozs7S0FTVCxtQkFZZ0IsdUJBQXVCLENBQUMsTUFBTTsyR0FLakQsWUFBWTtzQkFEWCxLQUFLO2dCQUdOLFNBQVM7c0JBRFIsS0FBSztnQkFHTixNQUFNO3NCQURMLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBJbnB1dCxcbiAgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIE9uQ2hhbmdlcyxcbiAgU2ltcGxlQ2hhbmdlcyxcbiAgT3V0cHV0LFxuICBFdmVudEVtaXR0ZXJcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBmcm9tRXZlbnQgYXMgb2JzZXJ2YWJsZUZyb21FdmVudCwgU3Vic2NyaXB0aW9uLCBPYnNlcnZhYmxlIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBzd2l0Y2hNYXAsIHRha2VVbnRpbCwgdGFwIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgQ2VzaXVtU2VydmljZSB9IGZyb20gJy4uLy4uLy4uLy4uL2FuZ3VsYXItY2VzaXVtL3NlcnZpY2VzL2Nlc2l1bS9jZXNpdW0uc2VydmljZSc7XG5cblxuLyoqXG4gKiBUb29sYmFyIHdpZGdldCwgYWN0IGFzIGEgY29udGFpbmVyIGZvciBhYy10b29sYmFyLWJ1dHRvbiBjb21wb25lbnRzXG4gKiBhbGxvd2luZyBkcmFnIGNvbmZpZ3VyYXRpb24gYW5kIHBhc3NpbmcgYHRvb2xiYXJDbGFzc2AgYXMgYXR0cmlidXRlc1xuICpcbiAqIFVzYWdlOlxuICogYGBgXG4gKiA8YWMtdG9vbGJhciBbYWxsb3dEcmFnXT1cInRydWVcIiAob25EcmFnKT1cImhhbmRsZURyYWcoJGV2ZW50KVwiPlxuIDxhYy10b29sYmFyLWJ1dHRvbiBbaWNvblVybF09XCInYXNzZXRzL2hvbWUtaWNvbi5zdmcnXCIgKG9uQ2xpY2spPVwiZ29Ib21lKClcIj5cbiA8L2FjLXRvb2xiYXItYnV0dG9uPlxuIDxhYy10b29sYmFyLWJ1dHRvbiBbaWNvblVybF09XCInYXNzZXRzL2V4cGxvcmUtaWNvbi5zdmcnXCIgKG9uQ2xpY2spPVwicmFuZ2VBbmRCZWFyaW5nKClcIj5cbiA8L2FjLXRvb2xiYXItYnV0dG9uPlxuIDwvYWMtdG9vbGJhcj5cbiAqIGBgYFxuICpcbiAqL1xuQENvbXBvbmVudChcbiAge1xuICAgIHNlbGVjdG9yOiAnYWMtdG9vbGJhcicsXG4gICAgdGVtcGxhdGU6IGBcbiAgICAgICAgPGRpdiBjbGFzcz1cInt7dG9vbGJhckNsYXNzfX1cIj5cbiAgICAgICAgICAgIDxkaXYgKm5nSWY9XCJhbGxvd0RyYWdcIj5cbiAgICAgICAgICAgICAgICA8YWMtdG9vbGJhci1idXR0b24+XG4gICAgICAgICAgICAgICAgICAgIDxhYy1kcmFnLWljb24+PC9hYy1kcmFnLWljb24+XG4gICAgICAgICAgICAgICAgPC9hYy10b29sYmFyLWJ1dHRvbj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2Rpdj5cbiAgICBgLFxuICAgIHN0eWxlczogW2BcbiAgICAgICAgOmhvc3Qge1xuICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICAgICAgdG9wOiAyMHB4O1xuICAgICAgICAgICAgbGVmdDogMjBweDtcbiAgICAgICAgICAgIHdpZHRoOiAyMHB4O1xuICAgICAgICAgICAgaGVpZ2h0OiAyMHB4O1xuICAgICAgICAgICAgei1pbmRleDogOTk5O1xuICAgICAgICAgICAgLXdlYmtpdC11c2VyLWRyYWc6IG5vbmU7XG4gICAgICAgIH1cbiAgICBgXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgfVxuKVxuZXhwb3J0IGNsYXNzIEFjVG9vbGJhckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzLCBPbkRlc3Ryb3kge1xuICBASW5wdXQoKVxuICB0b29sYmFyQ2xhc3M6IHN0cmluZztcbiAgQElucHV0KClcbiAgYWxsb3dEcmFnID0gdHJ1ZTtcbiAgQE91dHB1dCgpXG4gIG9uRHJhZyA9IG5ldyBFdmVudEVtaXR0ZXI8TW91c2VFdmVudD4oKTtcblxuICBkcmFnU3R5bGUgPSB7XG4gICAgJ2hlaWdodC5weCc6IDIwLFxuICAgICd3aWR0aC5weCc6IDIwLFxuICB9O1xuXG4gIHByaXZhdGUgbW91c2VEb3duJDogT2JzZXJ2YWJsZTxNb3VzZUV2ZW50PjtcbiAgcHJpdmF0ZSBtb3VzZU1vdmUkOiBPYnNlcnZhYmxlPE1vdXNlRXZlbnQ+O1xuICBwcml2YXRlIG1vdXNlVXAkOiBPYnNlcnZhYmxlPE1vdXNlRXZlbnQ+O1xuICBwcml2YXRlIGRyYWckOiBPYnNlcnZhYmxlPE1vdXNlRXZlbnQ+O1xuICBwcml2YXRlIGRyYWdTdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbjtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsZW1lbnQ6IEVsZW1lbnRSZWYsIHByaXZhdGUgY2VzaXVtU2VydmljZTogQ2VzaXVtU2VydmljZSkge31cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmNlc2l1bVNlcnZpY2UuZ2V0TWFwKCkuZ2V0TWFwQ29udGFpbmVyKCkuYXBwZW5kQ2hpbGQodGhpcy5lbGVtZW50Lm5hdGl2ZUVsZW1lbnQpO1xuICAgIGlmICh0aGlzLmFsbG93RHJhZykge1xuICAgICAgdGhpcy5saXN0ZW5Gb3JEcmFnZ2luZygpO1xuICAgIH1cbiAgfVxuXG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xuICAgIGlmIChjaGFuZ2VzLmFsbG93RHJhZyAmJiBjaGFuZ2VzLmFsbG93RHJhZy5jdXJyZW50VmFsdWUgJiYgIWNoYW5nZXMuYWxsb3dEcmFnLnByZXZpb3VzVmFsdWUpIHtcbiAgICAgIHRoaXMubGlzdGVuRm9yRHJhZ2dpbmcoKTtcbiAgICB9XG5cbiAgICBpZiAoY2hhbmdlcy5hbGxvd0RyYWcgJiYgIWNoYW5nZXMuYWxsb3dEcmFnLmN1cnJlbnRWYWx1ZSAmJiBjaGFuZ2VzLmFsbG93RHJhZy5wcmV2aW91c1ZhbHVlKSB7XG4gICAgICB0aGlzLmRyYWdTdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcbiAgICB9XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5kcmFnU3Vic2NyaXB0aW9uKSB7XG4gICAgICB0aGlzLmRyYWdTdWJzY3JpcHRpb24udW5zdWJzY3JpYmUoKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGxpc3RlbkZvckRyYWdnaW5nKCkge1xuICAgIHRoaXMubW91c2VEb3duJCA9IHRoaXMubW91c2VEb3duJCB8fCBvYnNlcnZhYmxlRnJvbUV2ZW50KHRoaXMuZWxlbWVudC5uYXRpdmVFbGVtZW50LCAnbW91c2Vkb3duJyk7XG4gICAgdGhpcy5tb3VzZU1vdmUkID0gdGhpcy5tb3VzZU1vdmUkIHx8IG9ic2VydmFibGVGcm9tRXZlbnQoZG9jdW1lbnQsICdtb3VzZW1vdmUnKSBhcyBPYnNlcnZhYmxlPE1vdXNlRXZlbnQ+O1xuICAgIHRoaXMubW91c2VVcCQgPSB0aGlzLm1vdXNlVXAkIHx8IG9ic2VydmFibGVGcm9tRXZlbnQoZG9jdW1lbnQsICdtb3VzZXVwJykgYXMgT2JzZXJ2YWJsZTxNb3VzZUV2ZW50PjtcblxuICAgIHRoaXMuZHJhZyQgPSB0aGlzLmRyYWckIHx8XG4gICAgICAgICAgICAgICAgIHRoaXMubW91c2VEb3duJC5waXBlKFxuICAgICAgICAgICAgICAgICAgICBzd2l0Y2hNYXAoKCkgPT4gdGhpcy5tb3VzZU1vdmUkLnBpcGUoXG4gICAgICAgICAgICAgICAgICAgICAgdGFwKHRoaXMub25EcmFnLmVtaXQpLFxuICAgICAgICAgICAgICAgICAgICAgIHRha2VVbnRpbCh0aGlzLm1vdXNlVXAkKVxuICAgICAgICAgICAgICAgICAgICApKVxuICAgICAgICAgICAgICAgICApO1xuXG4gICAgdGhpcy5kcmFnU3Vic2NyaXB0aW9uID0gdGhpcy5kcmFnJC5zdWJzY3JpYmUoKGV2ZW50OiBNb3VzZUV2ZW50KSA9PiB7XG4gICAgICB0aGlzLmVsZW1lbnQubmF0aXZlRWxlbWVudC5zdHlsZS5sZWZ0ID0gYCR7ZXZlbnQueH1weGA7XG4gICAgICB0aGlzLmVsZW1lbnQubmF0aXZlRWxlbWVudC5zdHlsZS50b3AgPSBgJHtldmVudC55fXB4YDtcbiAgICB9KTtcbiAgfVxufVxuIl19