diff --git a/packages/geo/src/lib/measure/measurer/measurer.component.html b/packages/geo/src/lib/measure/measurer/measurer.component.html index 305ad7d7e0..dd8d0bb389 100644 --- a/packages/geo/src/lib/measure/measurer/measurer.component.html +++ b/packages/geo/src/lib/measure/measurer/measurer.component.html @@ -72,7 +72,7 @@ activeMeasureType === measureType.Area " [measureType]="measureType.Length" - [measureUnit]="measureLengthUnit.Meters" + [measureUnit]="activeLengthUnit" [measure]="measure.length" [auto]="measureUnitsAuto" [placeholder]=" @@ -88,7 +88,7 @@ = + this.document.getElementsByClassName( + 'igo-map-tooltip-measure-polygone-segments' + ); if (this.displayDistance) { - Array.from( - document.getElementsByClassName( - 'igo-map-tooltip-measure-polygone-segments' - ) - ).map((value: Element) => + Array.from(elements).map((value: Element) => value.classList.remove('igo-map-tooltip-hidden') ); } else { - Array.from( - document.getElementsByClassName( - 'igo-map-tooltip-measure-polygone-segments' - ) - ).map((value: Element) => value.classList.add('igo-map-tooltip-hidden')); + Array.from(elements).map((value: Element) => + value.classList.add('igo-map-tooltip-hidden') + ); } } @@ -477,16 +479,19 @@ export class MeasurerComponent implements OnInit, OnDestroy { * @internal */ onDisplayLines() { - if (this.displayLines) { - Array.from( - document.getElementsByClassName('igo-map-tooltip-measure-line-segments') - ).map((value: Element) => - value.classList.remove('igo-map-tooltip-hidden') + const elements: HTMLCollectionOf = + this.document.getElementsByClassName( + 'igo-map-tooltip-measure-line-segments' ); + + if (this.displayLines) { + Array.from(elements).map((value: Element) => { + value.classList.remove('igo-map-tooltip-hidden'); + }); } else { - Array.from( - document.getElementsByClassName('igo-map-tooltip-measure-line-segments') - ).map((value: Element) => value.classList.add('igo-map-tooltip-hidden')); + Array.from(elements).map((value: Element) => { + value.classList.add('igo-map-tooltip-hidden'); + }); } } @@ -495,16 +500,17 @@ export class MeasurerComponent implements OnInit, OnDestroy { * @internal */ onDisplayAreas() { + const elements: HTMLCollectionOf = + this.document.getElementsByClassName('igo-map-tooltip-measure-area'); + if (this.displayAreas) { - Array.from( - document.getElementsByClassName('igo-map-tooltip-measure-area') - ).map((value: Element) => + Array.from(elements).map((value: Element) => value.classList.remove('igo-map-tooltip-hidden') ); } else { - Array.from( - document.getElementsByClassName('igo-map-tooltip-measure-area') - ).map((value: Element) => value.classList.add('igo-map-tooltip-hidden')); + Array.from(elements).map((value: Element) => + value.classList.add('igo-map-tooltip-hidden') + ); } } @@ -514,11 +520,8 @@ export class MeasurerComponent implements OnInit, OnDestroy { */ onLengthUnitChange(unit: MeasureLengthUnit) { this.activeLengthUnit = unit; - this.table.refresh(); - this.updateTooltipsOfOlSource(this.store.source.ol); - if (this.activeOlGeometry !== undefined) { - this.updateTooltipsOfOlGeometry(this.activeOlGeometry); - } + this.saveCurrentUnits(); + this.refreshTableAndTooltip(); } /** @@ -527,7 +530,13 @@ export class MeasurerComponent implements OnInit, OnDestroy { */ onAreaUnitChange(unit: MeasureAreaUnit) { this.activeAreaUnit = unit; - this.table.refresh(); + this.saveCurrentUnits(); + this.refreshTableAndTooltip(); + } + + private refreshTableAndTooltip(): void { + this.store.stateView.clear(); + this.updateTooltipsOfOlSource(this.store.source.ol); if (this.activeOlGeometry !== undefined) { this.updateTooltipsOfOlGeometry(this.activeOlGeometry); @@ -634,16 +643,15 @@ export class MeasurerComponent implements OnInit, OnDestroy { tryBindStoreLayer(store, layer); store.layer.visible = true; layer.visible$.subscribe((visible) => { + const elements: HTMLCollectionOf = + this.document.getElementsByClassName('igo-map-tooltip-measure'); + if (visible) { - Array.from( - document.getElementsByClassName('igo-map-tooltip-measure') - ).map((value: Element) => + Array.from(elements).map((value: Element) => value.classList.remove('igo-map-tooltip-measure-by-display') ); } else { - Array.from( - document.getElementsByClassName('igo-map-tooltip-measure') - ).map((value: Element) => + Array.from(elements).map((value: Element) => value.classList.add('igo-map-tooltip-measure-by-display') ); } @@ -666,6 +674,8 @@ export class MeasurerComponent implements OnInit, OnDestroy { const olGeometry = localFeature.getGeometry() as any; this.updateMeasureOfOlGeometry(olGeometry, localFeature.get('measure')); this.onDisplayDistance(); + this.onDisplayLines(); + this.onDisplayAreas(); } ); @@ -1170,4 +1180,27 @@ export class MeasurerComponent implements OnInit, OnDestroy { return true; } + + private saveCurrentUnits() { + this.storageService.set( + 'distanceUnit', + this.activeLengthUnit, + StorageScope.SESSION + ); + this.storageService.set( + 'areaUnit', + this.activeAreaUnit, + StorageScope.SESSION + ); + } + + private getSavedUnits() { + const distanceUnit = this.storageService.get( + 'distanceUnit' + ) as MeasureLengthUnit; + const areaUnit = this.storageService.get('areaUnit') as MeasureAreaUnit; + + this.activeLengthUnit = distanceUnit ? distanceUnit : this.activeLengthUnit; + this.activeAreaUnit = areaUnit ? areaUnit : this.activeAreaUnit; + } }