@igo2/geo 21.0.0-next.30 → 21.0.0-next.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/igo2-geo.mjs +45 -52
- package/fesm2022/igo2-geo.mjs.map +1 -1
- package/package.json +4 -4
- package/src/style/style.scss +12 -0
- package/style/style.css +12 -0
- package/types/igo2-geo.d.ts +1 -1
package/fesm2022/igo2-geo.mjs
CHANGED
|
@@ -23676,8 +23676,10 @@ class DrawComponent {
|
|
|
23676
23676
|
}
|
|
23677
23677
|
}
|
|
23678
23678
|
else {
|
|
23679
|
-
const
|
|
23680
|
-
this.activeStore =
|
|
23679
|
+
const activeStore = this.stores().find((store) => store.layer.id === this.activeDrawingLayer()?.id) ?? this.stores()[0];
|
|
23680
|
+
this.activeStore = activeStore;
|
|
23681
|
+
const drawingLayer = this.activeDrawingLayer() ?? activeStore.layer;
|
|
23682
|
+
this.activeDrawingLayer.set(drawingLayer);
|
|
23681
23683
|
this.activeDrawControl = this.drawControls()?.find((dc) => dc[0] === drawingLayer?.id)?.[1];
|
|
23682
23684
|
this.deactivateDrawControl();
|
|
23683
23685
|
this.allLayers.forEach((layer) => {
|
|
@@ -23715,16 +23717,10 @@ class DrawComponent {
|
|
|
23715
23717
|
});
|
|
23716
23718
|
}
|
|
23717
23719
|
/**
|
|
23718
|
-
* Remove
|
|
23720
|
+
* Remove drawing interactions while retaining drawing layers between tab visits.
|
|
23719
23721
|
* @internal
|
|
23720
23722
|
*/
|
|
23721
23723
|
ngOnDestroy() {
|
|
23722
|
-
if (this.activeStore.count === 0) {
|
|
23723
|
-
const drawingLayer = this.activeDrawingLayer();
|
|
23724
|
-
if (drawingLayer) {
|
|
23725
|
-
this.activeStore.map.layerController.remove(drawingLayer);
|
|
23726
|
-
}
|
|
23727
|
-
}
|
|
23728
23724
|
this.allLayers.forEach((layer) => (layer.opacity = 1));
|
|
23729
23725
|
this.activeStore.state.updateAll({ selected: false });
|
|
23730
23726
|
this.deactivateDrawControl();
|
|
@@ -24024,49 +24020,46 @@ class DrawComponent {
|
|
|
24024
24020
|
});
|
|
24025
24021
|
}
|
|
24026
24022
|
setupLayer(isNewLayer) {
|
|
24027
|
-
|
|
24028
|
-
|
|
24029
|
-
|
|
24030
|
-
|
|
24031
|
-
dialogRef.
|
|
24032
|
-
|
|
24033
|
-
|
|
24034
|
-
this.
|
|
24035
|
-
|
|
24036
|
-
|
|
24037
|
-
|
|
24038
|
-
|
|
24039
|
-
|
|
24040
|
-
activeDrawingLayer.opacity = 0;
|
|
24041
|
-
}
|
|
24042
|
-
this.deactivateDrawControl();
|
|
24043
|
-
this.initStore(label, isNewLayer);
|
|
24044
|
-
this.activeDrawControl = this.createDrawControl(this.fillColor, this.strokeColor, this.strokeWidth);
|
|
24045
|
-
this.activeDrawControl?.setGeometryType(this.currGeometryType);
|
|
24046
|
-
this.toggleDrawControl();
|
|
24047
|
-
this.stores.update((stores) => stores.concat(this.activeStore));
|
|
24048
|
-
if (activeDrawingLayer) {
|
|
24049
|
-
this.drawControls.update((controls) => controls.concat([
|
|
24050
|
-
[activeDrawingLayer.id, this.activeDrawControl]
|
|
24051
|
-
]));
|
|
24052
|
-
this.drawControlsEvent.emit(this.drawControls());
|
|
24053
|
-
this.layersIDEvent.emit(activeDrawingLayer.id);
|
|
24054
|
-
}
|
|
24055
|
-
this.isCreatingNewLayer = false;
|
|
24056
|
-
if (!this.labelsAreShown) {
|
|
24057
|
-
this.onToggleLabels();
|
|
24058
|
-
}
|
|
24059
|
-
this.activeLayerChange.emit(activeDrawingLayer);
|
|
24023
|
+
const dialogRef = this.dialog.open(DrawLayerPopupComponent, {
|
|
24024
|
+
disableClose: false
|
|
24025
|
+
});
|
|
24026
|
+
dialogRef.afterClosed().subscribe((label) => {
|
|
24027
|
+
if (dialogRef.componentInstance.confirmFlag()) {
|
|
24028
|
+
this.activeStore.state.updateAll({ selected: false });
|
|
24029
|
+
this.activeStore = new FeatureStore([], {
|
|
24030
|
+
map: this.map()
|
|
24031
|
+
});
|
|
24032
|
+
this.activeDrawingLayerSource = new OlVectorSource();
|
|
24033
|
+
const previousDrawingLayer = this.activeDrawingLayer();
|
|
24034
|
+
if (previousDrawingLayer) {
|
|
24035
|
+
previousDrawingLayer.opacity = 0;
|
|
24060
24036
|
}
|
|
24061
|
-
|
|
24062
|
-
|
|
24063
|
-
|
|
24064
|
-
|
|
24065
|
-
|
|
24066
|
-
|
|
24037
|
+
this.deactivateDrawControl();
|
|
24038
|
+
this.initStore(label, isNewLayer);
|
|
24039
|
+
const drawingLayer = this.activeDrawingLayer();
|
|
24040
|
+
this.activeDrawControl = this.createDrawControl(this.fillColor, this.strokeColor, this.strokeWidth);
|
|
24041
|
+
this.activeDrawControl?.setGeometryType(this.currGeometryType);
|
|
24042
|
+
this.toggleDrawControl();
|
|
24043
|
+
this.stores.update((stores) => stores.concat(this.activeStore));
|
|
24044
|
+
if (drawingLayer) {
|
|
24045
|
+
this.drawControls.update((controls) => controls.concat([[drawingLayer.id, this.activeDrawControl]]));
|
|
24046
|
+
this.drawControlsEvent.emit(this.drawControls());
|
|
24047
|
+
this.layersIDEvent.emit(drawingLayer.id);
|
|
24048
|
+
}
|
|
24049
|
+
this.isCreatingNewLayer = false;
|
|
24050
|
+
if (!this.labelsAreShown) {
|
|
24051
|
+
this.onToggleLabels();
|
|
24052
|
+
}
|
|
24053
|
+
this.activeLayerChange.emit(drawingLayer);
|
|
24054
|
+
}
|
|
24055
|
+
else {
|
|
24056
|
+
const select = this.select();
|
|
24057
|
+
if (select) {
|
|
24058
|
+
select.value = this.activeDrawingLayer;
|
|
24059
|
+
select.selectionChange.emit(new MatSelectChange(select, this.activeDrawingLayer()));
|
|
24067
24060
|
}
|
|
24068
|
-
}
|
|
24069
|
-
}
|
|
24061
|
+
}
|
|
24062
|
+
});
|
|
24070
24063
|
}
|
|
24071
24064
|
// HTML user interactions
|
|
24072
24065
|
/**
|
|
@@ -26392,7 +26385,7 @@ class MeasurerComponent {
|
|
|
26392
26385
|
this.activeAreaUnit = areaUnit ? areaUnit : this.activeAreaUnit;
|
|
26393
26386
|
}
|
|
26394
26387
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MeasurerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
26395
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MeasurerComponent, isStandalone: true, selector: "igo-measurer", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: true, transformFunction: null }, store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: true, transformFunction: null }, activeMeasureType: { classPropertyName: "activeMeasureType", publicName: "activeMeasureType", isSignal: false, isRequired: false, transformFunction: null }, minSegmentLength: { classPropertyName: "minSegmentLength", publicName: "minSegmentLength", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n <div class=\"measure-type-toggle\">\n <mat-button-toggle-group\n [value]=\"activeMeasureType\"\n (change)=\"onMeasureTypeChange($event.value)\"\n >\n <mat-button-toggle [value]=\"measureType.Length\">\n {{ 'igo.geo.measure.' + measureType.Length | translate }}\n </mat-button-toggle>\n <mat-button-toggle [value]=\"measureType.Area\">\n {{ 'igo.geo.measure.' + measureType.Area | translate }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n\n <div class=\"measure-options\">\n <mat-slide-toggle\n [disabled]=\"drawControlIsDisabled\"\n [checked]=\"drawControlIsActive\"\n [labelPosition]=\"'before'\"\n (change)=\"onToggleDrawControl($event.checked)\"\n >\n {{ 'igo.geo.measure.toggleActive' | translate }}\n </mat-slide-toggle>\n\n @if (hasLine$ | async) {\n <mat-divider />\n }\n\n @if (hasLine$ | async) {\n <mat-slide-toggle\n [checked]=\"displayLines\"\n [labelPosition]=\"'before'\"\n (change)=\"onToggleDisplayLines($event.checked)\"\n >\n {{ 'igo.geo.measure.toggleDisplayLines' | translate }}\n </mat-slide-toggle>\n }\n\n @if ((hasLine$ | async) || (hasArea$ | async)) {\n <mat-divider />\n }\n\n @if (hasArea$ | async) {\n <mat-slide-toggle\n [checked]=\"displayDistance\"\n [labelPosition]=\"'before'\"\n (change)=\"onToggleDisplayDistance($event.checked)\"\n >\n {{ 'igo.geo.measure.toggleDisplayDistance' | translate }}\n </mat-slide-toggle>\n }\n\n @if (hasArea$ | async) {\n <mat-slide-toggle\n [checked]=\"displayAreas\"\n [labelPosition]=\"'before'\"\n (change)=\"onToggleDisplayAreas($event.checked)\"\n >\n {{ 'igo.geo.measure.toggleDisplayAreas' | translate }}\n </mat-slide-toggle>\n }\n\n @if (hasArea$ | async) {\n <mat-divider />\n }\n\n <mat-slide-toggle\n [checked]=\"measureUnitsAuto\"\n [labelPosition]=\"'before'\"\n (change)=\"onToggleMeasureUnitsAuto($event.checked)\"\n >\n {{ 'igo.geo.measure.toggleAutoUnits' | translate }}\n </mat-slide-toggle>\n </div>\n\n @if (measure$ | async; as measure) {\n @if (\n activeMeasureType === measureType.Length ||\n activeMeasureType === measureType.Area\n ) {\n <igo-measurer-item\n [measureType]=\"measureType.Length\"\n [measureUnit]=\"activeLengthUnit\"\n [measure]=\"measure.length ?? 0\"\n [auto]=\"measureUnitsAuto\"\n [placeholder]=\"\n (activeMeasureType === measureType.Area\n ? 'igo.geo.measure.perimeter'\n : 'igo.geo.measure.length'\n ) | translate\n \"\n (measureUnitChange)=\"onLengthUnitChange($any($event))\"\n />\n }\n @if (activeMeasureType === measureType.Area) {\n <igo-measurer-item\n [measureType]=\"measureType.Area\"\n [measureUnit]=\"activeAreaUnit\"\n [measure]=\"measure.area ?? 0\"\n [auto]=\"measureUnitsAuto\"\n [placeholder]=\"'igo.geo.measure.area' | translate\"\n (measureUnitChange)=\"onAreaUnitChange($any($event))\"\n />\n }\n }\n\n @if ((hasLine$ | async) || (hasArea$ | async)) {\n <mat-divider />\n }\n\n <div class=\"measure-store-buttons\">\n @if ((hasLine$ | async) || (hasArea$ | async)) {\n <button\n mat-icon-button\n [matTooltip]=\"'igo.geo.measure.actionbar.calculate.tooltip' | translate\"\n [disabled]=\"(selectedFeatures$ | async)!.length === 0\"\n color=\"accent\"\n (click)=\"onCalculateClick()\"\n >\n <mat-icon>calculate</mat-icon>\n </button>\n }\n\n @if ((hasLine$ | async) || (hasArea$ | async)) {\n <button\n mat-icon-button\n [matTooltip]=\"'igo.geo.measure.actionbar.delete.tooltip' | translate\"\n [disabled]=\"(selectedFeatures$ | async)!.length === 0\"\n color=\"warn\"\n (click)=\"onDeleteClick()\"\n >\n <mat-icon>delete</mat-icon>\n </button>\n }\n </div>\n\n <igo-entity-table\n #table\n class=\"table-compact\"\n [store]=\"$any(store())\"\n [template]=\"tableTemplate\"\n />\n</div>\n", styles: [":host .measure-type-toggle{padding:10px;text-align:center}:host .measure-type-toggle mat-button-toggle-group{width:100%}:host .measure-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}:host .measure-options mat-slide-toggle{width:100%;padding:10px}:host .measure-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .measure-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .measure-store-buttons{margin-left:-2px}:host .measure-store-buttons button:first-of-type{margin-left:14px}:host .table-compact ::ng-deep .mat-mdc-header-cell.mat-column-selectionCheckbox{width:52px}:host .igo-map-tooltip{position:relative;border-radius:4px;padding:4px 8px;white-space:nowrap}
|
|
26388
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: MeasurerComponent, isStandalone: true, selector: "igo-measurer", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: true, transformFunction: null }, store: { classPropertyName: "store", publicName: "store", isSignal: true, isRequired: true, transformFunction: null }, activeMeasureType: { classPropertyName: "activeMeasureType", publicName: "activeMeasureType", isSignal: false, isRequired: false, transformFunction: null }, minSegmentLength: { classPropertyName: "minSegmentLength", publicName: "minSegmentLength", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n <div class=\"measure-type-toggle\">\n <mat-button-toggle-group\n [value]=\"activeMeasureType\"\n (change)=\"onMeasureTypeChange($event.value)\"\n >\n <mat-button-toggle [value]=\"measureType.Length\">\n {{ 'igo.geo.measure.' + measureType.Length | translate }}\n </mat-button-toggle>\n <mat-button-toggle [value]=\"measureType.Area\">\n {{ 'igo.geo.measure.' + measureType.Area | translate }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n\n <div class=\"measure-options\">\n <mat-slide-toggle\n [disabled]=\"drawControlIsDisabled\"\n [checked]=\"drawControlIsActive\"\n [labelPosition]=\"'before'\"\n (change)=\"onToggleDrawControl($event.checked)\"\n >\n {{ 'igo.geo.measure.toggleActive' | translate }}\n </mat-slide-toggle>\n\n @if (hasLine$ | async) {\n <mat-divider />\n }\n\n @if (hasLine$ | async) {\n <mat-slide-toggle\n [checked]=\"displayLines\"\n [labelPosition]=\"'before'\"\n (change)=\"onToggleDisplayLines($event.checked)\"\n >\n {{ 'igo.geo.measure.toggleDisplayLines' | translate }}\n </mat-slide-toggle>\n }\n\n @if ((hasLine$ | async) || (hasArea$ | async)) {\n <mat-divider />\n }\n\n @if (hasArea$ | async) {\n <mat-slide-toggle\n [checked]=\"displayDistance\"\n [labelPosition]=\"'before'\"\n (change)=\"onToggleDisplayDistance($event.checked)\"\n >\n {{ 'igo.geo.measure.toggleDisplayDistance' | translate }}\n </mat-slide-toggle>\n }\n\n @if (hasArea$ | async) {\n <mat-slide-toggle\n [checked]=\"displayAreas\"\n [labelPosition]=\"'before'\"\n (change)=\"onToggleDisplayAreas($event.checked)\"\n >\n {{ 'igo.geo.measure.toggleDisplayAreas' | translate }}\n </mat-slide-toggle>\n }\n\n @if (hasArea$ | async) {\n <mat-divider />\n }\n\n <mat-slide-toggle\n [checked]=\"measureUnitsAuto\"\n [labelPosition]=\"'before'\"\n (change)=\"onToggleMeasureUnitsAuto($event.checked)\"\n >\n {{ 'igo.geo.measure.toggleAutoUnits' | translate }}\n </mat-slide-toggle>\n </div>\n\n @if (measure$ | async; as measure) {\n @if (\n activeMeasureType === measureType.Length ||\n activeMeasureType === measureType.Area\n ) {\n <igo-measurer-item\n [measureType]=\"measureType.Length\"\n [measureUnit]=\"activeLengthUnit\"\n [measure]=\"measure.length ?? 0\"\n [auto]=\"measureUnitsAuto\"\n [placeholder]=\"\n (activeMeasureType === measureType.Area\n ? 'igo.geo.measure.perimeter'\n : 'igo.geo.measure.length'\n ) | translate\n \"\n (measureUnitChange)=\"onLengthUnitChange($any($event))\"\n />\n }\n @if (activeMeasureType === measureType.Area) {\n <igo-measurer-item\n [measureType]=\"measureType.Area\"\n [measureUnit]=\"activeAreaUnit\"\n [measure]=\"measure.area ?? 0\"\n [auto]=\"measureUnitsAuto\"\n [placeholder]=\"'igo.geo.measure.area' | translate\"\n (measureUnitChange)=\"onAreaUnitChange($any($event))\"\n />\n }\n }\n\n @if ((hasLine$ | async) || (hasArea$ | async)) {\n <mat-divider />\n }\n\n <div class=\"measure-store-buttons\">\n @if ((hasLine$ | async) || (hasArea$ | async)) {\n <button\n mat-icon-button\n [matTooltip]=\"'igo.geo.measure.actionbar.calculate.tooltip' | translate\"\n [disabled]=\"(selectedFeatures$ | async)!.length === 0\"\n color=\"accent\"\n (click)=\"onCalculateClick()\"\n >\n <mat-icon>calculate</mat-icon>\n </button>\n }\n\n @if ((hasLine$ | async) || (hasArea$ | async)) {\n <button\n mat-icon-button\n [matTooltip]=\"'igo.geo.measure.actionbar.delete.tooltip' | translate\"\n [disabled]=\"(selectedFeatures$ | async)!.length === 0\"\n color=\"warn\"\n (click)=\"onDeleteClick()\"\n >\n <mat-icon>delete</mat-icon>\n </button>\n }\n </div>\n\n <igo-entity-table\n #table\n class=\"table-compact\"\n [store]=\"$any(store())\"\n [template]=\"tableTemplate\"\n />\n</div>\n", styles: [":host .measure-type-toggle{padding:10px;text-align:center}:host .measure-type-toggle mat-button-toggle-group{width:100%}:host .measure-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}:host .measure-options mat-slide-toggle{width:100%;padding:10px}:host .measure-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .measure-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .measure-store-buttons{margin-left:-2px}:host .measure-store-buttons button:first-of-type{margin-left:14px}:host .table-compact ::ng-deep .mat-mdc-header-cell.mat-column-selectionCheckbox{width:52px}:host .igo-map-tooltip{position:relative;border-radius:4px;padding:4px 8px;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i2$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i1$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MeasurerItemComponent, selector: "igo-measurer-item", inputs: ["measureType", "measureUnit", "measure", "auto", "placeholder"], outputs: ["measureUnitChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: EntityTableComponent, selector: "igo-entity-table", inputs: ["store", "paginator", "template", "scrollBehavior", "sortNullsFirst", "withPaginator", "paginatorOptions"], outputs: ["entityClick", "entitySelectChange", "entitySortChange"] }, { kind: "ngmodule", type: IgoLanguageModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
26396
26389
|
}
|
|
26397
26390
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: MeasurerComponent, decorators: [{
|
|
26398
26391
|
type: Component,
|
|
@@ -26407,7 +26400,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
|
|
|
26407
26400
|
EntityTableComponent,
|
|
26408
26401
|
AsyncPipe,
|
|
26409
26402
|
IgoLanguageModule
|
|
26410
|
-
], template: "<div>\n <div class=\"measure-type-toggle\">\n <mat-button-toggle-group\n [value]=\"activeMeasureType\"\n (change)=\"onMeasureTypeChange($event.value)\"\n >\n <mat-button-toggle [value]=\"measureType.Length\">\n {{ 'igo.geo.measure.' + measureType.Length | translate }}\n </mat-button-toggle>\n <mat-button-toggle [value]=\"measureType.Area\">\n {{ 'igo.geo.measure.' + measureType.Area | translate }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n\n <div class=\"measure-options\">\n <mat-slide-toggle\n [disabled]=\"drawControlIsDisabled\"\n [checked]=\"drawControlIsActive\"\n [labelPosition]=\"'before'\"\n (change)=\"onToggleDrawControl($event.checked)\"\n >\n {{ 'igo.geo.measure.toggleActive' | translate }}\n </mat-slide-toggle>\n\n @if (hasLine$ | async) {\n <mat-divider />\n }\n\n @if (hasLine$ | async) {\n <mat-slide-toggle\n [checked]=\"displayLines\"\n [labelPosition]=\"'before'\"\n (change)=\"onToggleDisplayLines($event.checked)\"\n >\n {{ 'igo.geo.measure.toggleDisplayLines' | translate }}\n </mat-slide-toggle>\n }\n\n @if ((hasLine$ | async) || (hasArea$ | async)) {\n <mat-divider />\n }\n\n @if (hasArea$ | async) {\n <mat-slide-toggle\n [checked]=\"displayDistance\"\n [labelPosition]=\"'before'\"\n (change)=\"onToggleDisplayDistance($event.checked)\"\n >\n {{ 'igo.geo.measure.toggleDisplayDistance' | translate }}\n </mat-slide-toggle>\n }\n\n @if (hasArea$ | async) {\n <mat-slide-toggle\n [checked]=\"displayAreas\"\n [labelPosition]=\"'before'\"\n (change)=\"onToggleDisplayAreas($event.checked)\"\n >\n {{ 'igo.geo.measure.toggleDisplayAreas' | translate }}\n </mat-slide-toggle>\n }\n\n @if (hasArea$ | async) {\n <mat-divider />\n }\n\n <mat-slide-toggle\n [checked]=\"measureUnitsAuto\"\n [labelPosition]=\"'before'\"\n (change)=\"onToggleMeasureUnitsAuto($event.checked)\"\n >\n {{ 'igo.geo.measure.toggleAutoUnits' | translate }}\n </mat-slide-toggle>\n </div>\n\n @if (measure$ | async; as measure) {\n @if (\n activeMeasureType === measureType.Length ||\n activeMeasureType === measureType.Area\n ) {\n <igo-measurer-item\n [measureType]=\"measureType.Length\"\n [measureUnit]=\"activeLengthUnit\"\n [measure]=\"measure.length ?? 0\"\n [auto]=\"measureUnitsAuto\"\n [placeholder]=\"\n (activeMeasureType === measureType.Area\n ? 'igo.geo.measure.perimeter'\n : 'igo.geo.measure.length'\n ) | translate\n \"\n (measureUnitChange)=\"onLengthUnitChange($any($event))\"\n />\n }\n @if (activeMeasureType === measureType.Area) {\n <igo-measurer-item\n [measureType]=\"measureType.Area\"\n [measureUnit]=\"activeAreaUnit\"\n [measure]=\"measure.area ?? 0\"\n [auto]=\"measureUnitsAuto\"\n [placeholder]=\"'igo.geo.measure.area' | translate\"\n (measureUnitChange)=\"onAreaUnitChange($any($event))\"\n />\n }\n }\n\n @if ((hasLine$ | async) || (hasArea$ | async)) {\n <mat-divider />\n }\n\n <div class=\"measure-store-buttons\">\n @if ((hasLine$ | async) || (hasArea$ | async)) {\n <button\n mat-icon-button\n [matTooltip]=\"'igo.geo.measure.actionbar.calculate.tooltip' | translate\"\n [disabled]=\"(selectedFeatures$ | async)!.length === 0\"\n color=\"accent\"\n (click)=\"onCalculateClick()\"\n >\n <mat-icon>calculate</mat-icon>\n </button>\n }\n\n @if ((hasLine$ | async) || (hasArea$ | async)) {\n <button\n mat-icon-button\n [matTooltip]=\"'igo.geo.measure.actionbar.delete.tooltip' | translate\"\n [disabled]=\"(selectedFeatures$ | async)!.length === 0\"\n color=\"warn\"\n (click)=\"onDeleteClick()\"\n >\n <mat-icon>delete</mat-icon>\n </button>\n }\n </div>\n\n <igo-entity-table\n #table\n class=\"table-compact\"\n [store]=\"$any(store())\"\n [template]=\"tableTemplate\"\n />\n</div>\n", styles: [":host .measure-type-toggle{padding:10px;text-align:center}:host .measure-type-toggle mat-button-toggle-group{width:100%}:host .measure-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}:host .measure-options mat-slide-toggle{width:100%;padding:10px}:host .measure-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .measure-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .measure-store-buttons{margin-left:-2px}:host .measure-store-buttons button:first-of-type{margin-left:14px}:host .table-compact ::ng-deep .mat-mdc-header-cell.mat-column-selectionCheckbox{width:52px}:host .igo-map-tooltip{position:relative;border-radius:4px;padding:4px 8px;white-space:nowrap}
|
|
26403
|
+
], template: "<div>\n <div class=\"measure-type-toggle\">\n <mat-button-toggle-group\n [value]=\"activeMeasureType\"\n (change)=\"onMeasureTypeChange($event.value)\"\n >\n <mat-button-toggle [value]=\"measureType.Length\">\n {{ 'igo.geo.measure.' + measureType.Length | translate }}\n </mat-button-toggle>\n <mat-button-toggle [value]=\"measureType.Area\">\n {{ 'igo.geo.measure.' + measureType.Area | translate }}\n </mat-button-toggle>\n </mat-button-toggle-group>\n </div>\n\n <div class=\"measure-options\">\n <mat-slide-toggle\n [disabled]=\"drawControlIsDisabled\"\n [checked]=\"drawControlIsActive\"\n [labelPosition]=\"'before'\"\n (change)=\"onToggleDrawControl($event.checked)\"\n >\n {{ 'igo.geo.measure.toggleActive' | translate }}\n </mat-slide-toggle>\n\n @if (hasLine$ | async) {\n <mat-divider />\n }\n\n @if (hasLine$ | async) {\n <mat-slide-toggle\n [checked]=\"displayLines\"\n [labelPosition]=\"'before'\"\n (change)=\"onToggleDisplayLines($event.checked)\"\n >\n {{ 'igo.geo.measure.toggleDisplayLines' | translate }}\n </mat-slide-toggle>\n }\n\n @if ((hasLine$ | async) || (hasArea$ | async)) {\n <mat-divider />\n }\n\n @if (hasArea$ | async) {\n <mat-slide-toggle\n [checked]=\"displayDistance\"\n [labelPosition]=\"'before'\"\n (change)=\"onToggleDisplayDistance($event.checked)\"\n >\n {{ 'igo.geo.measure.toggleDisplayDistance' | translate }}\n </mat-slide-toggle>\n }\n\n @if (hasArea$ | async) {\n <mat-slide-toggle\n [checked]=\"displayAreas\"\n [labelPosition]=\"'before'\"\n (change)=\"onToggleDisplayAreas($event.checked)\"\n >\n {{ 'igo.geo.measure.toggleDisplayAreas' | translate }}\n </mat-slide-toggle>\n }\n\n @if (hasArea$ | async) {\n <mat-divider />\n }\n\n <mat-slide-toggle\n [checked]=\"measureUnitsAuto\"\n [labelPosition]=\"'before'\"\n (change)=\"onToggleMeasureUnitsAuto($event.checked)\"\n >\n {{ 'igo.geo.measure.toggleAutoUnits' | translate }}\n </mat-slide-toggle>\n </div>\n\n @if (measure$ | async; as measure) {\n @if (\n activeMeasureType === measureType.Length ||\n activeMeasureType === measureType.Area\n ) {\n <igo-measurer-item\n [measureType]=\"measureType.Length\"\n [measureUnit]=\"activeLengthUnit\"\n [measure]=\"measure.length ?? 0\"\n [auto]=\"measureUnitsAuto\"\n [placeholder]=\"\n (activeMeasureType === measureType.Area\n ? 'igo.geo.measure.perimeter'\n : 'igo.geo.measure.length'\n ) | translate\n \"\n (measureUnitChange)=\"onLengthUnitChange($any($event))\"\n />\n }\n @if (activeMeasureType === measureType.Area) {\n <igo-measurer-item\n [measureType]=\"measureType.Area\"\n [measureUnit]=\"activeAreaUnit\"\n [measure]=\"measure.area ?? 0\"\n [auto]=\"measureUnitsAuto\"\n [placeholder]=\"'igo.geo.measure.area' | translate\"\n (measureUnitChange)=\"onAreaUnitChange($any($event))\"\n />\n }\n }\n\n @if ((hasLine$ | async) || (hasArea$ | async)) {\n <mat-divider />\n }\n\n <div class=\"measure-store-buttons\">\n @if ((hasLine$ | async) || (hasArea$ | async)) {\n <button\n mat-icon-button\n [matTooltip]=\"'igo.geo.measure.actionbar.calculate.tooltip' | translate\"\n [disabled]=\"(selectedFeatures$ | async)!.length === 0\"\n color=\"accent\"\n (click)=\"onCalculateClick()\"\n >\n <mat-icon>calculate</mat-icon>\n </button>\n }\n\n @if ((hasLine$ | async) || (hasArea$ | async)) {\n <button\n mat-icon-button\n [matTooltip]=\"'igo.geo.measure.actionbar.delete.tooltip' | translate\"\n [disabled]=\"(selectedFeatures$ | async)!.length === 0\"\n color=\"warn\"\n (click)=\"onDeleteClick()\"\n >\n <mat-icon>delete</mat-icon>\n </button>\n }\n </div>\n\n <igo-entity-table\n #table\n class=\"table-compact\"\n [store]=\"$any(store())\"\n [template]=\"tableTemplate\"\n />\n</div>\n", styles: [":host .measure-type-toggle{padding:10px;text-align:center}:host .measure-type-toggle mat-button-toggle-group{width:100%}:host .measure-type-toggle mat-button-toggle-group mat-button-toggle{width:50%}:host .measure-options mat-slide-toggle{width:100%;padding:10px}:host .measure-options mat-slide-toggle ::ng-deep .mdc-form-field{width:100%}:host .measure-options mat-slide-toggle ::ng-deep .mdc-label{margin-left:0;width:calc(100% - 60px)}:host .measure-store-buttons{margin-left:-2px}:host .measure-store-buttons button:first-of-type{margin-left:14px}:host .table-compact ::ng-deep .mat-mdc-header-cell.mat-column-selectionCheckbox{width:52px}:host .igo-map-tooltip{position:relative;border-radius:4px;padding:4px 8px;white-space:nowrap}\n"] }]
|
|
26411
26404
|
}], ctorParameters: () => [], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: true }] }], store: [{ type: i0.Input, args: [{ isSignal: true, alias: "store", required: true }] }], activeMeasureType: [{
|
|
26412
26405
|
type: Input
|
|
26413
26406
|
}], minSegmentLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSegmentLength", required: false }] }], table: [{ type: i0.ViewChild, args: ['table', { isSignal: true }] }] } });
|