diff --git a/projects/arlas-components/src/lib/components/bbox-generator/bbox-generator.component.scss b/projects/arlas-map/src/lib/bbox-generator/bbox-generator.component.scss
similarity index 100%
rename from projects/arlas-components/src/lib/components/bbox-generator/bbox-generator.component.scss
rename to projects/arlas-map/src/lib/bbox-generator/bbox-generator.component.scss
diff --git a/projects/arlas-components/src/lib/components/bbox-generator/bbox-generator.component.ts b/projects/arlas-map/src/lib/bbox-generator/bbox-generator.component.ts
similarity index 95%
rename from projects/arlas-components/src/lib/components/bbox-generator/bbox-generator.component.ts
rename to projects/arlas-map/src/lib/bbox-generator/bbox-generator.component.ts
index 8c91957d..832177fc 100644
--- a/projects/arlas-components/src/lib/components/bbox-generator/bbox-generator.component.ts
+++ b/projects/arlas-map/src/lib/bbox-generator/bbox-generator.component.ts
@@ -19,10 +19,10 @@
import { AfterViewInit, ChangeDetectorRef, Component, Inject, OnDestroy, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { marker } from '@colsen1991/ngx-translate-extract-marker';
-import { Corner } from '../mapgl/draw/draw.models';
-import { MapboxAoiDrawService } from '../mapgl/draw/draw.service';
import { BboxFormGroup } from './bbox-generator.utils';
+import { marker } from '@colsen1991/ngx-translate-extract-marker';
+import { MapboxAoiDrawService } from '../draw/draw.service';
+import { Corner } from '../draw/draw.models';
@Component({
selector: 'arlas-bbox-generator',
diff --git a/projects/arlas-components/src/lib/components/bbox-generator/bbox-generator.module.ts b/projects/arlas-map/src/lib/bbox-generator/bbox-generator.module.ts
similarity index 95%
rename from projects/arlas-components/src/lib/components/bbox-generator/bbox-generator.module.ts
rename to projects/arlas-map/src/lib/bbox-generator/bbox-generator.module.ts
index f7b4d5ab..4229e459 100644
--- a/projects/arlas-components/src/lib/components/bbox-generator/bbox-generator.module.ts
+++ b/projects/arlas-map/src/lib/bbox-generator/bbox-generator.module.ts
@@ -23,7 +23,6 @@ import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
-import { BrowserModule } from '@angular/platform-browser';
import { TranslateModule } from '@ngx-translate/core';
import { BboxGeneratorComponent } from './bbox-generator.component';
import { NgModule } from '@angular/core';
@@ -33,7 +32,6 @@ import { BboxFormErrorPipe } from './bbox-form-error.pipe';
@NgModule({
imports: [
CommonModule,
- BrowserModule,
FormsModule,
MatDialogModule,
MatFormFieldModule,
diff --git a/projects/arlas-components/src/lib/components/bbox-generator/bbox-generator.utils.ts b/projects/arlas-map/src/lib/bbox-generator/bbox-generator.utils.ts
similarity index 95%
rename from projects/arlas-components/src/lib/components/bbox-generator/bbox-generator.utils.ts
rename to projects/arlas-map/src/lib/bbox-generator/bbox-generator.utils.ts
index a942c408..0c6640b7 100644
--- a/projects/arlas-components/src/lib/components/bbox-generator/bbox-generator.utils.ts
+++ b/projects/arlas-map/src/lib/bbox-generator/bbox-generator.utils.ts
@@ -18,8 +18,8 @@
*/
import { FormGroup } from '@angular/forms';
-import { Coordinate, PointFormGroup } from '../../tools/coordinates.tools';
-import { Corner } from '../mapgl/draw/draw.models';
+import { Coordinate, PointFormGroup } from './coordinates.tools';
+import { Corner } from '../draw/draw.models';
import { Subscription } from 'rxjs';
diff --git a/projects/arlas-components/src/lib/tools/coordinates.tools.ts b/projects/arlas-map/src/lib/bbox-generator/coordinates.tools.ts
similarity index 99%
rename from projects/arlas-components/src/lib/tools/coordinates.tools.ts
rename to projects/arlas-map/src/lib/bbox-generator/coordinates.tools.ts
index a55dc168..5ddee289 100644
--- a/projects/arlas-components/src/lib/tools/coordinates.tools.ts
+++ b/projects/arlas-map/src/lib/bbox-generator/coordinates.tools.ts
@@ -53,7 +53,7 @@ export class Coordinate {
/** Parses a coordinate in decimal or sexagesimal degrees and returns the decimal degrees */
public static parse(value: string) {
const coordinatesRegex = DECIMAL_SEXAGESIMAL_REGEX;
- const parsedCoordinates = (String(value)).match(coordinatesRegex);
+ const parsedCoordinates = (String(value)).match(coordinatesRegex) as any;
if (parsedCoordinates && parsedCoordinates.groups) {
const groups = parsedCoordinates.groups;
if (groups.decimal) {
diff --git a/projects/arlas-components/src/lib/components/mapgl/coordinates/coordinates.component.html b/projects/arlas-map/src/lib/coordinates/coordinates.component.html
similarity index 76%
rename from projects/arlas-components/src/lib/components/mapgl/coordinates/coordinates.component.html
rename to projects/arlas-map/src/lib/coordinates/coordinates.component.html
index a33b91e9..71aa3967 100644
--- a/projects/arlas-components/src/lib/components/mapgl/coordinates/coordinates.component.html
+++ b/projects/arlas-map/src/lib/coordinates/coordinates.component.html
@@ -1,4 +1,4 @@
-
-
diff --git a/projects/arlas-components/src/lib/components/mapgl/coordinates/coordinates.component.scss b/projects/arlas-map/src/lib/coordinates/coordinates.component.scss
similarity index 98%
rename from projects/arlas-components/src/lib/components/mapgl/coordinates/coordinates.component.scss
rename to projects/arlas-map/src/lib/coordinates/coordinates.component.scss
index b9611318..3312b4fe 100644
--- a/projects/arlas-components/src/lib/components/mapgl/coordinates/coordinates.component.scss
+++ b/projects/arlas-map/src/lib/coordinates/coordinates.component.scss
@@ -33,7 +33,6 @@ $default-font-size: 14px;
background-color: white;
border: 1px solid #a1a1a1;
border-radius: 4px;
- padding: 0 $sm-spacing;
cursor: pointer;
font-size: $default-font-size;
padding: $xs-spacing $sm-spacing;
diff --git a/projects/arlas-components/src/lib/components/mapgl/coordinates/coordinates.component.ts b/projects/arlas-map/src/lib/coordinates/coordinates.component.ts
similarity index 86%
rename from projects/arlas-components/src/lib/components/mapgl/coordinates/coordinates.component.ts
rename to projects/arlas-map/src/lib/coordinates/coordinates.component.ts
index 6e13b90f..8a69634c 100644
--- a/projects/arlas-components/src/lib/components/mapgl/coordinates/coordinates.component.ts
+++ b/projects/arlas-map/src/lib/coordinates/coordinates.component.ts
@@ -18,7 +18,7 @@
*/
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { Coordinate, PointFormGroup } from '../../../tools/coordinates.tools';
+import { Coordinate, PointFormGroup } from '../bbox-generator/coordinates.tools';
import { FormControl, FormGroup } from '@angular/forms';
import { marker } from '@colsen1991/ngx-translate-extract-marker';
@@ -50,13 +50,6 @@ export class CoordinatesComponent implements OnInit {
this.coordinatesForm.longitude.setValue(this.currentLng);
}
- public getErrorMessage(formControl: FormControl | FormGroup) {
- if (formControl.hasError('required')) {
- return marker('You must enter a coordinate');
- }
- return formControl.hasError('pattern') ? this.placeHolder : '';
- }
-
public moveToCoordinates() {
const lat = Coordinate.parse(this.coordinatesForm.latitude.value);
const lng = Coordinate.parse(this.coordinatesForm.longitude.value);
diff --git a/projects/arlas-components/src/lib/components/mapgl/mapgl.module.ts b/projects/arlas-map/src/lib/coordinates/coordinates.module.ts
similarity index 50%
rename from projects/arlas-components/src/lib/components/mapgl/mapgl.module.ts
rename to projects/arlas-map/src/lib/coordinates/coordinates.module.ts
index 272d5bcc..7a5da6b0 100644
--- a/projects/arlas-components/src/lib/components/mapgl/mapgl.module.ts
+++ b/projects/arlas-map/src/lib/coordinates/coordinates.module.ts
@@ -18,58 +18,30 @@
*/
import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
import { TranslateModule } from '@ngx-translate/core';
-import { MapglComponent } from './mapgl.component';
-import { MapglLegendModule } from '../mapgl-legend/mapgl-legend.module';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatChipsModule } from '@angular/material/chips';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { GetCollectionPipe, GetLayerPipe } from './mapgl.component.util';
-import { MapglBasemapModule } from '../mapgl-basemap/mapgl-basemap.module';
-import { MapboxAoiDrawService } from './draw/draw.service';
-import { CoordinatesComponent } from './coordinates/coordinates.component';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgModule } from '@angular/core';
+import { CoordinatesComponent } from './coordinates.component';
import { MatFormFieldModule } from '@angular/material/form-field';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatTooltipModule } from '@angular/material/tooltip';
import { MatInputModule } from '@angular/material/input';
-import { GetValueModule } from '../../pipes/get-value/get-value.module';
-
+import { CoordinatesErrorPipe } from './coordinates.pipe';
@NgModule({
imports: [
CommonModule,
MatIconModule,
- MatButtonModule,
- MatSelectModule,
- MatRadioModule,
- TranslateModule,
- MapglLegendModule,
- MapglBasemapModule,
- MatSnackBarModule,
- MatSlideToggleModule,
- MatTooltipModule,
- MatChipsModule,
- FormsModule,
MatFormFieldModule,
- MatIconModule,
- MatButtonModule,
- MatInputModule,
+ FormsModule,
ReactiveFormsModule,
- DragDropModule,
- GetValueModule
- ],
- declarations: [MapglComponent, GetCollectionPipe, GetLayerPipe, CoordinatesComponent],
- providers: [
- MapboxAoiDrawService
+ MatTooltipModule,
+ MatInputModule,
+ TranslateModule
],
- exports: [MapglComponent]
+ declarations: [CoordinatesComponent, CoordinatesErrorPipe],
+ exports: [CoordinatesComponent]
})
-export class MapglModule {
+export class CoordinatesModule {
}
diff --git a/projects/arlas-map/src/lib/coordinates/coordinates.pipe.ts b/projects/arlas-map/src/lib/coordinates/coordinates.pipe.ts
new file mode 100644
index 00000000..57f009d7
--- /dev/null
+++ b/projects/arlas-map/src/lib/coordinates/coordinates.pipe.ts
@@ -0,0 +1,36 @@
+/*
+ * Licensed to Gisaïa under one or more contributor
+ * license agreements. See the NOTICE.txt file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Gisaïa licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Pipe, PipeTransform } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { marker } from '@colsen1991/ngx-translate-extract-marker';
+
+@Pipe({
+ name: 'coordinatesFormError'
+})
+export class CoordinatesErrorPipe implements PipeTransform {
+
+ public transform(formControl: FormControl | FormGroup): string {
+ if (formControl.hasError('required')) {
+ return marker('You must enter a coordinate');
+ }
+ return formControl.hasError('pattern') ? marker('1.1 or 1°6\'3"') : '';
+ }
+
+}
diff --git a/projects/arlas-map/src/lib/draw/AbstractDraw.ts b/projects/arlas-map/src/lib/draw/AbstractDraw.ts
new file mode 100644
index 00000000..7fec4915
--- /dev/null
+++ b/projects/arlas-map/src/lib/draw/AbstractDraw.ts
@@ -0,0 +1,219 @@
+/*
+ * Licensed to Gisaïa under one or more contributor
+ * license agreements. See the NOTICE.txt file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Gisaïa licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import MapboxDraw from '@mapbox/mapbox-gl-draw';
+import { AbstractArlasMapGL } from '../map/AbstractArlasMapGL';
+import { Feature, FeatureCollection, Geometry } from '@turf/helpers';
+
+export type DrawEvents = 'draw.create' | 'draw.delete' | 'draw.combine' | 'draw.uncombine' |
+ 'draw.update' | 'draw.selectionchange' | 'draw.modechange' | 'draw.render' | 'draw.actionable' |
+ 'draw.edit.saveInitialFeature' | 'draw.onClick' | 'draw.onStart' | 'draw.onStop'
+ | 'draw.invalidGeometry';
+
+export type DrawModes = 'SIMPLE_SELECT' | 'DRAW_CIRCLE' | 'DIRECT_SELECT' |
+ 'DRAW_LINE_STRING' | 'DRAW_POLYGON' | 'DRAW_POINT' | 'DRAW_RADIUS_CIRCLE' |
+ 'DRAW_STRIP' | 'DIRECT_STRIP'| 'STATIC';
+
+export interface DrawEventsInterface {
+ onDrawCreate: (...args) => void;
+ onDrawUpdate: (...args) => void;
+ onDrawDelete: (...args) => void;
+ onDrawOnClick: (...args) => void;
+ onDrawOnStart: (...args) => void;
+ onDrawOnStop: (...args) => void;
+ onDrawInvalidGeometry: (...args) => void;
+ onDrawEditSaveInitialFeature: (...args) => void;
+ onDrawSelectionchange: (...args) => void;
+ onDrawModeChange: (...args) => void;
+}
+
+export class AbstractDraw implements DrawEventsInterface {
+ protected config;
+ public arlasMap: AbstractArlasMapGL;
+ public enabled: boolean;
+ public drawProvider: MapboxDraw;
+ public constructor(config: any, enabled: boolean, map: AbstractArlasMapGL) {
+ const modes = MapboxDraw.modes;
+ this.config = JSON.parse(JSON.stringify(config));
+ this.config.modes = Object.assign(modes, config.modes);
+ this.drawProvider = new MapboxDraw(this.config);
+ this.arlasMap = map;
+ this.enabled = enabled;
+ }
+
+ public onAdd(map) {
+ const controlContainer = this.drawProvider.onAdd(map);
+ if (!this.enabled) {
+ controlContainer.className += ' draw-control-disabled';
+ }
+ return controlContainer;
+ }
+
+ public onRemove(map) {
+ return this.drawProvider.onRemove(map);
+ }
+
+ public setMode(drawModes: DrawModes, replaceMode: any) {
+ this.drawProvider.modes[drawModes] = replaceMode;
+ }
+
+ public getAllFeatures() {
+ return this.getAll().features;
+ }
+
+ public onDrawCreate(fn: (e) => void): void {
+ this.on('draw.create', (e) => {
+ fn(e);
+ });
+ }
+
+ public onDrawDelete(fn: (e) => void): void {
+ this.on('draw.delete', (e) => {
+ fn(e);
+ });
+ }
+
+ public onDrawEditSaveInitialFeature(fn: (e) => void): void {
+ this.on('draw.edit.saveInitialFeature', (e) => {
+ fn(e);
+ });
+ }
+
+ public onDrawInvalidGeometry(fn: (e) => void): void {
+ this.on('draw.invalidGeometry', (e) => {
+ fn(e);
+ });
+ }
+
+ public onDrawModeChange(fn: (e) => void): void {
+ this.on('draw.modechange', (e) => {
+ fn(e);
+ });
+ }
+
+ public onDrawOnClick(fn: (e) => void): void {
+ this.on('draw.onClick', (e) => {
+ fn(e);
+ });
+ }
+
+ public onDrawOnStart(fn: (e) => void): void {
+ this.on('draw.onStart', (e) => {
+ fn(e);
+ });
+ }
+
+ public onDrawOnStop(fn: (e) => void): void {
+ this.on('draw.onStop', (e) => {
+ fn(e);
+ });
+ }
+
+ public onDrawSelectionchange(fn: (e) => void): void {
+ this.on('draw.selectionchange', (e) => {
+ fn(e);
+ });
+ }
+
+ public onDrawUpdate(fn: (e) => void): void {
+ this.on('draw.update', (e) => {
+ fn(e);
+ });
+ }
+
+ public getMode(modes: DrawModes) {
+ return this.drawProvider.modes[modes];
+ }
+
+ public on(event: DrawEvents, func: (e) => void): void {
+ this.arlasMap.on(event, func);
+ }
+
+ public add(feature: Feature
| FeatureCollection) {
+ this.drawProvider.add(feature);
+ }
+
+ public get(featureId: string): Feature | undefined {
+ return this.drawProvider.get(featureId);
+ }
+
+ public delete(ids: string | Array): this {
+ this.drawProvider.delete(ids);
+ return this;
+ }
+ public deleteAll(): this {
+ this.drawProvider.deleteAll();
+ return this;
+ }
+
+ public set(featureCollection: FeatureCollection): Array {
+ return this.drawProvider.set(featureCollection);
+ }
+
+ public trash(): this {
+ this.drawProvider.trash();
+ return this;
+ }
+
+ public combineFeatures(): this {
+ this.drawProvider.combineFeatures();
+ return this;
+ }
+ public uncombineFeatures(): this {
+ this.drawProvider.uncombineFeatures();
+ return this;
+ }
+
+ public getCurrentMode(): string {
+ return this.drawProvider.getMode();
+ }
+
+ public getFeatureIdsAt(point: { x: number; y: number; }): Array {
+ return this.drawProvider.getFeatureIdsAt(point);
+ }
+
+ public getSelectedIds(): Array {
+ return this.drawProvider.getSelectedIds();
+ }
+
+ public getSelected() {
+ return this.drawProvider.getSelected();
+ }
+
+ public getAll() {
+ return this.drawProvider.getAll();
+ }
+
+ public getSelectedFeatures() {
+ return this.getSelected().features;
+ }
+
+ public setFeatureProperty(featureId: string, property: string, value: any): this {
+ this.drawProvider.setFeatureProperty(featureId, property, value);
+ return this;
+ }
+
+ public changeMode(mode: string, opt?: any): this {
+ this.drawProvider.changeMode(mode, opt);
+ return this;
+ }
+
+
+
+}
diff --git a/projects/arlas-map/src/lib/draw/arlas-draw.component.html b/projects/arlas-map/src/lib/draw/arlas-draw.component.html
new file mode 100644
index 00000000..403f9dd6
--- /dev/null
+++ b/projects/arlas-map/src/lib/draw/arlas-draw.component.html
@@ -0,0 +1,2 @@
+1">
+ {{FINISH_DRAWING | translate}}
\ No newline at end of file
diff --git a/projects/arlas-map/src/lib/draw/arlas-draw.component.scss b/projects/arlas-map/src/lib/draw/arlas-draw.component.scss
new file mode 100644
index 00000000..0c79a0f2
--- /dev/null
+++ b/projects/arlas-map/src/lib/draw/arlas-draw.component.scss
@@ -0,0 +1,19 @@
+/*
+ * Licensed to Gisaïa under one or more contributor
+ * license agreements. See the NOTICE.txt file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Gisaïa licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
\ No newline at end of file
diff --git a/projects/arlas-map/src/lib/draw/arlas-draw.component.ts b/projects/arlas-map/src/lib/draw/arlas-draw.component.ts
new file mode 100644
index 00000000..1baf44b6
--- /dev/null
+++ b/projects/arlas-map/src/lib/draw/arlas-draw.component.ts
@@ -0,0 +1,735 @@
+/*
+ * Licensed to Gisaïa under one or more contributor
+ * license agreements. See the NOTICE.txt file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Gisaïa licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Component, EventEmitter, HostListener, Input, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { marker } from '@colsen1991/ngx-translate-extract-marker';
+import StaticMode from '@mapbox/mapbox-gl-draw-static-mode';
+import { TranslateService } from '@ngx-translate/core';
+import centroid from '@turf/centroid';
+import cleanCoords from '@turf/clean-coords';
+import { Feature, FeatureCollection, Geometry, Polygon, polygon } from '@turf/helpers';
+import { ArlasMapFrameworkService } from '../arlas-map-framework.service';
+import { AbstractArlasMapService } from '../arlas-map.service';
+import { AbstractArlasMapGL } from '../map/AbstractArlasMapGL';
+import { DrawControlsOption } from '../map/model/controls';
+import { MapMouseEvent } from '../map/model/events';
+import { ArlasPoint } from '../map/model/geometry';
+import { latLngToWKT } from '../map/tools';
+import { AbstractDraw } from './AbstractDraw';
+import { AoiDimensions, BboxDrawCommand } from './draw.models';
+import { MapboxAoiDrawService } from './draw.service';
+import limitVertexDirectSelectMode from './modes/LimitVertexDirectSelectMode';
+import validGeomDrawPolygonMode from './modes/ValidGeomDrawPolygonMode';
+import { circleMode } from './modes/circles/circle.mode';
+import radiusCircleMode from './modes/circles/radius.circle.mode';
+import directModeOverride from './modes/directSelectOverride';
+import simpleSelectModeOverride from './modes/simpleSelectOverride';
+import { stripDirectSelectMode } from './modes/strip/strip.direct.mode';
+import stripMode from './modes/strip/strip.mode';
+import * as styles from './themes/default-theme';
+@Component({
+ selector: 'arlas-draw',
+ templateUrl: './arlas-draw.component.html',
+ styleUrls: ['./arlas-draw.component.scss'],
+ encapsulation: ViewEncapsulation.None
+})
+/** L: a layer class/interface.
+ * S: a source class/interface.
+ * M: a Map configuration class/interface.
+ */
+export class ArlasDrawComponent implements OnInit {
+
+ @Input() public map: AbstractArlasMapGL;
+
+ @Input() private emptyData: FeatureCollection = {
+ 'type': 'FeatureCollection',
+ 'features': []
+ };
+ /** @description Options object for draw tools : https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/API.md#options */
+ @Input() public drawOption: any = {};
+ /** Draw instance. */
+ public draw: AbstractDraw;
+ /** @description Features drawn at component start */
+ @Input() public drawData: FeatureCollection = ({ ...this.emptyData });
+ /** @description Whether the draw tools are activated. */
+ @Input() public drawButtonEnabled = false;
+ /** @description Maximum number of vertices allowed for a polygon. */
+ @Input() public drawPolygonVerticesLimit: number;
+ /** @description Whether the drawing buffer is activated */
+ /** If true, the map's canvas can be exported to a PNG using map.getCanvas().toDataURL(). Default: false */
+ @Input() public preserveDrawingBuffer = false;
+
+ /** @description Emits the geojson of an aoi added to the map. */
+ @Output() public onAoiChanged: EventEmitter> = new EventEmitter();
+
+ /** @description Emits the the dimensions of the polygon/bbox that is being drawn. */
+ @Output() public onAoiEdit: EventEmitter = new EventEmitter();
+
+
+ /** Set to true when the selected drawn geometry is changed. */
+ protected drawnSelectionChanged = false;
+ /** Number of drawn vertices (incremented in draw mode). Reset to 0 when the drawing is finished. */
+ public nbPolygonVertices = 0;
+ /** Number of clicks while drawing a geometry. */
+ public drawClickCounter = 0;
+
+ /** List of drawn polygons centroid */
+ public polygonlabeldata: FeatureCollection = ({ ...this.emptyData });
+
+
+ /** Drawn geometry's state when editing/updating. */
+ protected savedEditFeature = null;
+ /** Map container Html element */
+ protected canvas: HTMLElement;
+ /** Canvas of the bbox while being drawn. This variable is set to undefined when the draw ends. */
+ private box: HTMLElement;
+ /** Point coordinates when the bbox drawing starts*/
+ protected start: ArlasPoint;
+ /** Point coordinates when the bbox drawing is being drawn. Changes on move.*/
+ protected current: ArlasPoint;
+ /** Message shown to explain how to end drawing. */
+ public FINISH_DRAWING = marker('Double click to finish drawing');
+ /** Html element that holds the FINISH_DRAWING message. */
+ protected finishDrawTooltip: HTMLElement;
+
+
+ public constructor(private readonly drawService: MapboxAoiDrawService, private readonly _snackBar: MatSnackBar,
+ private readonly translate: TranslateService,
+ protected mapFrameworkService: ArlasMapFrameworkService,
+ protected mapService: AbstractArlasMapService) {
+ this.drawService.editAoi$.pipe(takeUntilDestroyed()).subscribe(ae => this.onAoiEdit.emit(ae));
+ this.drawService.drawBbox$.pipe(takeUntilDestroyed()).subscribe({
+ next: (bboxDC: BboxDrawCommand) => {
+ this.drawBbox(bboxDC.east, bboxDC.south, bboxDC.west, bboxDC.north);
+ }
+ });
+ }
+
+ /**
+ * @description Stops the drawing mode by changing to static mode.
+ */
+ private stopDrawingAtVerticeLimit() {
+ if (this.nbPolygonVertices === this.drawPolygonVerticesLimit) {
+ this.draw.changeMode('static');
+ this.drawService.isDrawingPolygon = false;
+ this.nbPolygonVertices = 0;
+ }
+ }
+
+ private listenToDrawOnCreate() {
+ this.draw.on('draw.create', (e) => {
+ this.onAoiChanged.next(
+ {
+ 'type': 'FeatureCollection',
+ 'features': this.draw.getAllFeatures().filter(fc =>
+ this.drawService.isValidPolygon(fc) ||
+ this.drawService.isValidCircle(fc)
+ ).map(f => cleanCoords(f))
+ });
+ });
+ }
+
+ private listenToDrawUpdate() {
+ this.draw.on('draw.update', (e) => {
+ if (e) {
+ const features = e.features;
+ if (features && features.length > 0) {
+ this.savedEditFeature = { ...features[0] };
+ this.savedEditFeature.coordinates = [[]];
+ features[0].geometry.coordinates[0].forEach(f => this.savedEditFeature.coordinates[0].push(f));
+ }
+ }
+ });
+ }
+
+ private listenToDrawDelete() {
+ this.draw.on('draw.delete', (e) => {
+ this.onAoiChanged.next(
+ {
+ 'type': 'FeatureCollection',
+ 'features': this.draw.getAllFeatures().filter(fc =>
+ this.drawService.isPolygon(fc) ||
+ this.drawService.isCircle(fc)
+ ).map(f => cleanCoords(f))
+ });
+ });
+ }
+
+ private listenToDrawInvalidGeometry() {
+ this.draw.onDrawInvalidGeometry((e) => {
+ if (this.savedEditFeature) {
+ const featureCoords = this.savedEditFeature.coordinates[0].slice();
+ if (featureCoords[0][0] !== featureCoords[featureCoords.length - 1][0] ||
+ featureCoords[0][1] !== featureCoords[featureCoords.length - 1][1]) {
+ featureCoords.push(featureCoords[0]);
+ }
+ const currentFeature = {
+ id: '',
+ type: 'Feature',
+ geometry: {
+ 'type': 'Polygon',
+ 'coordinates': [featureCoords]
+ },
+ properties: {}
+ };
+ currentFeature.id = this.savedEditFeature.id;
+ currentFeature.properties = this.savedEditFeature.properties;
+ this.draw.add(currentFeature as Feature);
+ }
+ this.openInvalidGeometrySnackBar();
+ this.mapFrameworkService.setMapCursor(this.map, '');
+ });
+ }
+
+ private listenToDrawSelectionChange() {
+ this.draw.onDrawSelectionchange((e) => {
+ this.drawnSelectionChanged = true;
+ if (e.features.length > 0) {
+ this.drawService.isDrawSelected = true;
+ } else {
+ this.savedEditFeature = null;
+ this.drawService.isDrawSelected = false;
+ this.onAoiChanged.next(
+ {
+ 'type': 'FeatureCollection',
+ 'features': this.draw.getAllFeatures().filter(fc =>
+ this.drawService.isValidPolygon(fc) ||
+ this.drawService.isValidCircle(fc)
+ ).map(f => cleanCoords(f))
+ });
+ this.drawService.isDrawingBbox = false;
+ this.drawService.isDrawingPolygon = false;
+ this.drawService.isDrawingCircle = false;
+ this.drawService.isDrawingStrip = false;
+ this.drawService.isInSimpleDrawMode = false;
+ this.draw.changeMode('static');
+ this.mapFrameworkService.setMapCursor(this.map, '');
+ }
+ });
+ }
+
+ private listenToDrawModeChange() {
+ this.draw.onDrawModeChange((e) => {
+ this.drawService.isDrawingPolygon = e.mode === this.draw.getMode('DRAW_POLYGON');
+ this.drawService.isDrawingStrip = e.mode === this.draw.getMode('DIRECT_STRIP');
+ this.drawService.isDrawingCircle = e.mode === this.draw.getMode('DRAW_CIRCLE') || e.mode === this.draw.getMode('DRAW_RADIUS_CIRCLE');
+ if (this.drawService.isDrawingPolygon || this.drawService.isDrawingCircle || this.drawService.isDrawingStrip || e.mode === 'static') {
+ this.drawService.isInSimpleDrawMode = false;
+ }
+ if (e.mode === 'simple_select') {
+ this.drawService.isInSimpleDrawMode = true;
+ } else if (e.mode === 'static') {
+ this.mapFrameworkService.setMapCursor(this.map, '');
+ } else if (e.mode === 'direct_select') {
+ const selectedFeatures = this.draw.getSelectedFeatures();
+ const selectedIds = this.draw.getSelectedIds();
+ if (selectedFeatures && selectedIds && selectedIds.length > 0) {
+ if (selectedFeatures[0].properties.source === 'bbox') {
+ this.draw.changeMode('simple_select', {
+ featureIds: [selectedIds[0]]
+ });
+ this.drawService.isInSimpleDrawMode = true;
+ } else if (this.drawPolygonVerticesLimit && selectedFeatures[0].properties.meta !== 'strip') {
+ this.draw.changeMode('limit_vertex', {
+ featureId: selectedIds[0],
+ maxVertexByPolygon: this.drawPolygonVerticesLimit,
+ selectedCoordPaths: (selectedFeatures[0] as Feature).geometry.coordinates
+ });
+ this.drawService.isInSimpleDrawMode = false;
+ } else if (this.drawPolygonVerticesLimit && selectedFeatures[0].properties.meta === 'strip') {
+ this.draw.changeMode('direct_strip', {
+ featureId: selectedIds[0],
+ maxLength: selectedFeatures[0].properties.maxLength,
+ halfSwath: selectedFeatures[0].properties.halfSwath,
+ });
+ this.drawService.isInSimpleDrawMode = false;
+ }
+ } else {
+ this.drawService.isInSimpleDrawMode = false;
+ this.mapFrameworkService.setMapCursor(this.map, '');
+ }
+ }
+ });
+
+ }
+
+ public ngOnInit(): void {
+ this.finishDrawTooltip = document.getElementById('polygon-finish-draw-tooltip');
+ const drawStyles = styles.default;
+ const drawOptions = {
+ ...this.drawOption,
+ ...{
+ styles: drawStyles,
+ modes: {
+ static: StaticMode,
+ limit_vertex: limitVertexDirectSelectMode,
+ draw_polygon: validGeomDrawPolygonMode,
+ draw_circle: circleMode,
+ draw_radius_circle: radiusCircleMode,
+ draw_strip: stripMode,
+ direct_strip: stripDirectSelectMode,
+ direct_select: directModeOverride,
+ simple_select: simpleSelectModeOverride
+ }
+ }
+ };
+ this.draw = this.mapFrameworkService.createDraw(drawOptions, this.drawButtonEnabled, this.map);
+ this.draw.setMode('DRAW_CIRCLE', 'draw_circle');
+ this.draw.setMode('DRAW_RADIUS_CIRCLE', 'draw_radius_circle');
+ this.draw.setMode('DRAW_STRIP', 'draw_strip');
+ this.draw.setMode('STATIC', 'static');
+ this.draw.setMode('DIRECT_STRIP', 'direct_strip');
+ const drawControlConfig: DrawControlsOption = {
+ draw: { control: this.draw },
+ addGeoBox: {
+ enable: true,
+ overrideEvent:
+ {
+ event: 'click',
+ fn: this.addGeoBox
+ }
+ },
+ removeAois: {
+ enable: true,
+ overrideEvent: { event: 'click', fn: this.removeAois }
+ }
+ };
+ this.map.initDrawControls(drawControlConfig);
+ this.drawService.setDraw(this.draw);
+ this.mapFrameworkService.onMapEvent('load', this.map, () => {
+ this.mapService.declareLabelSources('', this.polygonlabeldata, this.map);
+ this.draw.changeMode('static');
+ this.canvas = this.map.getCanvasContainer();
+ this.canvas.addEventListener('mousedown', this.mousedown, true);
+ this.listenToDrawOnCreate();
+ this.listenToDrawUpdate();
+ this.listenToDrawDelete();
+ const mouseMoveForDraw = (e: MouseEvent) => {
+ const x = e.clientX;
+ const y = e.clientY;
+ this.finishDrawTooltip.style.top = (y + 20) + 'px';
+ this.finishDrawTooltip.style.left = (x + 20) + 'px';
+ };
+
+ this.draw.onDrawOnClick((e) => {
+ if (this.drawClickCounter === 0) {
+ window.addEventListener('mousemove', mouseMoveForDraw);
+ }
+ this.drawClickCounter++;
+ });
+ this.draw.onDrawOnStart((e) => {
+ window.removeEventListener('mousemove', mouseMoveForDraw);
+ this.drawClickCounter = 0;
+ this.mapFrameworkService.setMapCursor(this.map, '');
+ });
+ this.draw.onDrawOnStop((e) => {
+ window.removeEventListener('mousemove', mouseMoveForDraw);
+ this.drawClickCounter = 0;
+ this.mapFrameworkService.setMapCursor(this.map, '');
+ });
+
+ this.listenToDrawInvalidGeometry();
+
+ this.draw.onDrawEditSaveInitialFeature((edition) => {
+ this.savedEditFeature = { ...edition.feature };
+ this.savedEditFeature.coordinates = [[]];
+ edition.feature.coordinates[0].forEach(c => this.savedEditFeature.coordinates[0].push(c));
+ });
+
+ this.listenToDrawSelectionChange();
+ this.listenToDrawModeChange();
+ this.mapFrameworkService.onMapEvent('click', this.map, (e) => {
+ if (this.drawService.isDrawingCircle) {
+ return;
+ }
+ if (this.drawService.isDrawingPolygon) {
+ this.nbPolygonVertices++;
+ this.stopDrawingAtVerticeLimit();
+ } else {
+ this.nbPolygonVertices = 0;
+ const features = this.map.queryRenderedFeatures(e.point);
+ // edit polygon condition : no arlas feature && mapbox-gl-draw source present
+ const editCondition = features.filter(f => f.layer.id?.indexOf('arlas') >= 0).length === 0 &&
+ features.filter(f => f.source.startsWith('mapbox-gl-draw')).length > 0;
+ if (editCondition) {
+ const candidates = features.filter(f => f.source.startsWith('mapbox-gl-draw'));
+ // edit only on click on the border of the polygon
+ const candidatesProperties = candidates.filter(f => f.layer.id?.indexOf('stroke') >= 0)[0]?.properties;
+ if (candidatesProperties?.id) {
+ if (candidatesProperties.user_meta === 'strip') {
+ this.draw.changeMode('direct_strip', {
+ featureId: candidatesProperties.id,
+ maxLength: candidatesProperties.user_maxLength,
+ halfSwath: candidatesProperties.user_halfSwath
+ });
+ this.drawService.isInSimpleDrawMode = false;
+ } else {
+ this.draw.changeMode('simple_select', {
+ featureIds: [candidatesProperties.id]
+ });
+ this.drawService.isInSimpleDrawMode = true;
+ }
+
+ }
+ }
+ }
+ });
+ });
+
+ // Mouse events
+ this.mapFrameworkService.onMapEvent('mousedown', this.map, (e: MapMouseEvent) => {
+ this.drawService.startBboxDrawing();
+ });
+ this.mapFrameworkService.onMapEvent('mouseup', this.map, (e: MapMouseEvent) => {
+ this.drawService.stopBboxDrawing();
+ });
+
+ this.mapFrameworkService.onMapEvent('mousemove', this.map, (e: MapMouseEvent) => {
+ const lngLat = e.lngLat;
+ if (this.drawService.isDrawingBbox || this.drawService.isDrawingPolygon) {
+ this.mapFrameworkService.setMapCursor(this.map, 'crosshair');
+ this.map.moveLngLat = lngLat;
+ }
+ if (this.drawService.bboxEditionState.isDrawing) {
+ const startlng: number = this.map.startLngLat.lng;
+ const endlng: number = this.map.moveLngLat.lng;
+ const startlat: number = this.map.startLngLat.lat;
+ const endlat: number = this.map.moveLngLat.lat;
+ const west = Math.min(startlng, endlng);
+ const north = Math.max(startlat, endlat);
+ const east = Math.max(startlng, endlng);
+ const south = Math.min(startlat, endlat);
+ const coordinates = [[
+ [east, south],
+ [east, north],
+ [west, north],
+ [west, south],
+ [east, south],
+ ]];
+ const polygonGeojson = {
+ type: 'Feature',
+ properties: {
+ source: 'bbox'
+ },
+ geometry: {
+ type: 'Polygon',
+ coordinates: coordinates
+ }
+ };
+ this.drawService.emitDimensions(polygonGeojson as Feature);
+ }
+ });
+
+ }
+
+ public ngOnChanges(changes: SimpleChanges): void {
+ if (this.map && this.map.getMapProvider() !== undefined) {
+ if (changes['drawData'] !== undefined && this.drawService.isReady) {
+ this.drawData = changes['drawData'].currentValue;
+ console.log(this.drawData);
+ const centroides = new Array();
+ this.drawData.features.forEach(feature => {
+ const poly = polygon((feature.geometry as Polygon).coordinates);
+ const cent = centroid(poly);
+ cent.properties.arlas_id = feature.properties.arlas_id;
+ centroides.push(cent);
+ });
+ this.polygonlabeldata = {
+ type: 'FeatureCollection',
+ features: centroides
+ };
+ if (!this.drawnSelectionChanged) {
+ this.drawService.addFeatures(this.drawData, /** deleteOld */ true);
+ }
+ this.drawnSelectionChanged = false;
+ this.mapService.updateLabelSources(this.map.POLYGON_LABEL_SOURCE, this.polygonlabeldata, this.map);
+ }
+
+ }
+ }
+
+ /**
+ * @description Triggered when drawing a bbox has started:
+ * - It disables the map drag pan.
+ * - It stores in the component's scope the start's cooordinates.
+ */
+ private readonly mousedown = (e) => {
+ // Continue the rest of the function if we add a geobox.
+ if (!this.drawService.isDrawingBbox) {
+ return;
+ }
+ // Disable default drag zooming when we add a geobox.
+ this.map.disableDragPan();
+ // Call functions for the following events
+ document.addEventListener('mousemove', this.mousemove);
+ document.addEventListener('mouseup', this.mouseup);
+ // Capture the first xy coordinates
+ this.start = this.mapFrameworkService.getPointFromScreen(e, this.canvas);
+ };
+
+ /**
+ * @description Triggered while moving the mouse when drawing the bbox:
+ * - It draws on the map a bbox canvas.
+ * - It stores in the component's scope the current mouse's cooordinates.
+ */
+ private readonly mousemove = (e) => {
+ // Capture the ongoing xy coordinates
+ this.current = this.mapFrameworkService.getPointFromScreen(e, this.canvas);
+ // Append the box element if it doesn't exist
+ if (this.box === undefined) {
+ this.box = document.createElement('div');
+ this.box.classList.add('boxdraw');
+ this.canvas.appendChild(this.box);
+ }
+ const minX = Math.min(this.start.x, this.current.x);
+ const maxX = Math.max(this.start.x, this.current.x);
+ const minY = Math.min(this.start.y, this.current.y);
+ const maxY = Math.max(this.start.y, this.current.y);
+ // Adjust width and xy position of the box element ongoing
+ const pos = 'translate(' + minX + 'px,' + minY + 'px)';
+ this.box.style.transform = pos;
+ this.box.style.webkitTransform = pos;
+ this.box.style.width = maxX - minX + 'px';
+ this.box.style.height = maxY - minY + 'px';
+ };
+
+ /**
+ * @description Triggerd on the second click to end drawing the bbox.
+ * - Restores the drag pan on the map.
+ * - Removes the bbox canvas.
+ * - Draws the bbox feature on the map.
+ * @param e Mouse event
+ */
+ private readonly mouseup = (e) => {
+ const f = this.mapFrameworkService.getPointFromScreen(e, this.canvas);
+ document.removeEventListener('mousemove', this.mousemove);
+ document.removeEventListener('mouseup', this.mouseup);
+ this.mapFrameworkService.setMapCursor(this.map, '');
+ this.map.enableDragPan();
+ // Capture xy coordinates
+ if (this.start.x !== f.x && this.start.y !== f.y) {
+ this.finish([[this.start, f], [e.lngLat]]);
+ } else if (this.box) {
+ this.box.parentNode.removeChild(this.box);
+ this.box = undefined;
+ }
+ this.drawService.endDimensionsEmission();
+ };
+
+ /**
+ * @description Draws the bbox feature on the map and removes the bbox canvas.
+ * @param bbox Start/End coordinates of the bbox.
+ */
+ private finish(bbox?) {
+ if (bbox) {
+ const startlng: number = this.map.startLngLat.lng;
+ const endlng: number = this.map.endLngLat.lng;
+ const startlat: number = this.map.startLngLat.lat;
+ const endlat: number = this.map.endLngLat.lat;
+ const west = Math.min(startlng, endlng);
+ const north = Math.max(startlat, endlat);
+ const east = Math.max(startlng, endlng);
+ const south = Math.min(startlat, endlat);
+ this.drawBbox(east, south, west, north);
+ if (this.box) {
+ this.box.parentNode.removeChild(this.box);
+ this.box = undefined;
+ }
+ }
+ }
+
+ /**
+ * @description Emits the newly drawn bbox. It completes the drawBbox event emitted by the drawService.
+ * @param east
+ * @param south
+ * @param west
+ * @param north
+ */
+ protected drawBbox(east, south, west, north) {
+ const coordinates = [[
+ [east, south],
+ [east, north],
+ [west, north],
+ [west, south],
+ [east, south],
+ ]];
+ const polygonGeojson: Feature = {
+ type: 'Feature',
+ properties: {
+ source: 'bbox'
+ },
+ geometry: {
+ type: 'Polygon',
+ coordinates: coordinates
+ }
+ };
+ const geoboxdata = { ...this.emptyData};
+ geoboxdata.features = [];
+ if (this.drawData?.features && this.drawData.features.length > 0) {
+ this.drawData.features.forEach(df => geoboxdata.features.push(df));
+ }
+ geoboxdata.features.push(polygonGeojson);
+ /** This allows to keep the drawn box on the map. It will be overriden in ngOnChanges `changes['drawData']` */
+ this.drawService.addFeatures(geoboxdata, /** deleteOld */ true);
+ this.onAoiChanged.next(geoboxdata);
+ this.drawService.isDrawingBbox = false;
+ this.drawService.disableBboxEdition();
+ this.drawService.endDimensionsEmission();
+ }
+
+ /** @description Enables bbox drawing mode.*/
+ public addGeoBox() {
+ this.mapFrameworkService.setMapCursor(this.map, 'crosshair');
+ this.drawService.enableBboxEdition();
+ this.drawService.isDrawingBbox = true;
+ }
+
+ /**
+ * @description Removes all the aois if none of them is selected. Otherwise it removes the selected one only
+ */
+ public removeAois() {
+ this.mapFrameworkService.setMapCursor(this.map, '');
+ this.drawService.isDrawingBbox = false;
+ this.deleteSelectedItem();
+ }
+
+ /** @description Deletes the selected drawn geometry. If no drawn geometry is selected, all geometries are deteleted */
+ public deleteSelectedItem() {
+ if (this.drawService.isDrawSelected) {
+ this.draw.trash();
+ } else {
+ this.drawService.deleteAll();
+ }
+ this.drawService.isDrawSelected = false;
+ this.onAoiChanged.next(this.draw.getAll() as FeatureCollection);
+ }
+
+ /**
+ * @description Shows an invalid-geometry error on a snack bar.
+ */
+ public openInvalidGeometrySnackBar() {
+ this._snackBar.open(this.translate.instant('Invalid geometry'), this.translate.instant('Ok'), {
+ duration: 3 * 1000,
+ verticalPosition: 'top',
+ panelClass: 'invalid-geo-toast'
+ });
+ }
+
+ /**
+ * @description Switches to a drawing mode of a polygon, circle or radisu circle.
+ * @param mode Draw mode (DRAW_POLYGON, DRAW_CIRCLE or DRAW_RADIUS_CIRCLE). Default to DRAW_POLYGON
+ * @param option Mapboxdraw option.
+ */
+ public switchToDrawMode(mode?: string, option?: any) {
+ const selectedMode = mode ?? this.draw.getMode('DRAW_POLYGON');
+ this.drawService.isDrawingCircle = selectedMode === this.draw.getMode('DRAW_CIRCLE')
+ || selectedMode === this.draw.getMode('DRAW_RADIUS_CIRCLE');
+ this.drawService.isDrawingPolygon = selectedMode === this.draw.getMode('DRAW_POLYGON');
+ this.drawService.isInSimpleDrawMode = false;
+ this.draw.changeMode(selectedMode, option ?? {});
+ }
+
+ /**
+ * @description Switches to direct_select mode.
+ * @param option Mapboxdraw option.
+ */
+ public switchToDirectSelectMode(option?: { featureIds: Array; allowCircleResize: boolean; }
+ | { featureId: string; allowCircleResize: boolean; }) {
+ this.draw.changeMode('direct_select', option);
+ this.drawService.isInSimpleDrawMode = false;
+ this.drawService.isDrawingCircle = false;
+ this.drawService.isDrawingStrip = false;
+ this.drawService.isDrawingPolygon = false;
+ }
+
+ /**
+ * @description Switches to simple_select mode.
+ * @param option Mapboxdraw option.
+ */
+ public switchToEditMode() {
+ this.draw.changeMode('simple_select', {
+ featureIds: this.draw.getAll().features.map(f => f.id)
+ });
+ this.drawService.isInSimpleDrawMode = true;
+ this.drawService.isDrawingCircle = false;
+ this.drawService.isDrawingStrip = false;
+ this.drawService.isDrawingPolygon = false;
+ }
+
+ /**
+ * @description Returns all the drawn polygons as wkt or geojson.
+ * @param mode 'wkt' | 'geojson'
+ * @returns
+ */
+ public getAllPolygon(mode: 'wkt' | 'geojson'): string | Object {
+ let polygon;
+ if (mode === 'wkt') {
+ polygon = latLngToWKT(this.draw.getAll().features.filter(f => this.drawService.isPolygon(f) ||
+ this.drawService.isCircle(f)).map(f => cleanCoords(f)));
+ } else {
+ polygon = {
+ 'type': 'FeatureCollection',
+ 'features': this.draw.getAll().features.filter(f => this.drawService.isPolygon(f) ||
+ this.drawService.isCircle(f)).map(f => cleanCoords(f))
+ };
+ }
+ return polygon;
+ }
+
+ /**
+ * @returns the selected polygon geometry in WKT or GeoJson given the mode
+ * @param mode : 'wkt' | 'geojson'
+ * @returns Wkt string or Geojson object.
+ */
+ public getSelectedPolygon(mode: 'wkt' | 'geojson'): string | Object {
+ let polygon;
+ if (mode === 'wkt') {
+ polygon = latLngToWKT(this.draw.getSelected().features.filter(f => this.drawService.isPolygon(f) ||
+ this.drawService.isCircle(f)));
+ } else {
+ polygon = {
+ 'type': 'FeatureCollection',
+ 'features': this.draw.getSelected().features.filter(f => this.drawService.isPolygon(f) ||
+ this.drawService.isCircle(f))
+ };
+ }
+ return polygon;
+ }
+
+ @HostListener('document:keydown', ['$event'])
+ public handleKeyboardEvent(event: KeyboardEvent) {
+ if (event.key === 'Escape' && this.drawService.isDrawingBbox) {
+ this.mapFrameworkService.setMapCursor(this.map, '');
+ this.drawService.isDrawingBbox = false;
+ document.removeEventListener('mousemove', this.mousemove);
+ document.removeEventListener('mouseup', this.mouseup);
+ this.mapFrameworkService.setMapCursor(this.map, '');
+ if (this.box) {
+ this.box.parentNode.removeChild(this.box);
+ this.box = undefined;
+ }
+ this.map.enableDragPan();
+ this.drawService.endDimensionsEmission();
+ }
+ }
+
+}
+
diff --git a/projects/arlas-components/src/lib/components/mapgl/draw/draw.models.ts b/projects/arlas-map/src/lib/draw/draw.models.ts
similarity index 100%
rename from projects/arlas-components/src/lib/components/mapgl/draw/draw.models.ts
rename to projects/arlas-map/src/lib/draw/draw.models.ts
diff --git a/projects/arlas-components/src/lib/components/mapgl/draw/draw.service.ts b/projects/arlas-map/src/lib/draw/draw.service.ts
similarity index 88%
rename from projects/arlas-components/src/lib/components/mapgl/draw/draw.service.ts
rename to projects/arlas-map/src/lib/draw/draw.service.ts
index 1b8044e9..207315b1 100644
--- a/projects/arlas-components/src/lib/components/mapgl/draw/draw.service.ts
+++ b/projects/arlas-map/src/lib/draw/draw.service.ts
@@ -18,8 +18,6 @@
*/
import { Injectable } from '@angular/core';
-import mapboxgl from 'mapbox-gl';
-import MapboxDraw from '@mapbox/mapbox-gl-draw';
import area from '@turf/area';
import { Feature, FeatureCollection, lineString } from '@turf/helpers';
import bbox from '@turf/bbox';
@@ -27,11 +25,11 @@ import length from '@turf/length';
import { Subject } from 'rxjs';
import { AoiDimensions, BboxDrawCommand, Corner, EditionState } from './draw.models';
import { marker } from '@colsen1991/ngx-translate-extract-marker';
+import { AbstractDraw } from './AbstractDraw';
@Injectable()
export class MapboxAoiDrawService {
- private map: mapboxgl.Map;
- private mapDraw: MapboxDraw;
+ private mapDraw: AbstractDraw;
private editionId: string;
private registeringMode: boolean;
private ids: Set = new Set();
@@ -45,6 +43,20 @@ export class MapboxAoiDrawService {
public bboxEditionState: EditionState;
public polygonEditionState: EditionState;
+ /** Set to true when the user is drawing a bbox. */
+ public isDrawingBbox = false;
+ /** Set to true when the user is drawing a circle. */
+ public isDrawingCircle = false;
+ /** Set to true when the user is drawing a strip. */
+ public isDrawingStrip = false;
+ /** Set to true when the user is drawing a polygon. */
+ public isDrawingPolygon = false;
+ /** Set to true when the user is in simple draw mode. */
+ public isInSimpleDrawMode = false;
+ /** Set to true when the drawn geometry is selected. */
+ public isDrawSelected = false;
+ public isReady = false;
+
public constructor() {
this.bboxEditionState = {
enabled: false,
@@ -98,18 +110,15 @@ export class MapboxAoiDrawService {
this.bboxEditionState.isEditing = false;
}
- public setMap(map: mapboxgl.Map) {
- this.map = map;
+ public setDraw(mapboxDraw: AbstractDraw) {
+ this.mapDraw = mapboxDraw;
+ this.isReady = true;
this.onSelectionChange();
this.onRender();
this.onDelete();
this.onStop();
}
- public setMapboxDraw(mapboxDraw: mapboxgl.Map) {
- this.mapDraw = mapboxDraw;
- }
-
/**
* Add new features to the mapboxdraw object.
* @param fc Featurecollection to be added to mapboxdraw object.
@@ -150,7 +159,7 @@ export class MapboxAoiDrawService {
/** on selection of a drawn polygon, we get its corresponding id. */
private onSelectionChange() {
- this.map.on('draw.selectionchange', (e) => {
+ this.mapDraw.on('draw.selectionchange', (e) => {
const features = e.features;
if (this.hasFeatures(features)) {
this.editionId = features[0].id;
@@ -171,7 +180,7 @@ export class MapboxAoiDrawService {
* - Stops emitting Aoi dimension info.
* */
private onDelete() {
- this.map.on('draw.delete', (e) => {
+ this.mapDraw.on('draw.delete', (e) => {
e.features.forEach(f => this.unregister(f.id));
this.editionId = undefined;
this.endDimensionsEmission();
@@ -180,7 +189,7 @@ export class MapboxAoiDrawService {
private onStop() {
- this.map.on('draw.onStop', (e) => {
+ this.mapDraw.on('draw.onStop', (e) => {
this.register(this.editionId);
this.editionId = undefined;
this.endDimensionsEmission();
@@ -194,7 +203,7 @@ export class MapboxAoiDrawService {
* - on adding/deleting features from mapboxdraw object.
*/
private onRender() {
- this.map.on('draw.render', (e) => {
+ this.mapDraw.on('draw.render', (e) => {
if (this.mapDraw) {
this.registerAll();
const unregisteredFeatures = this.getUnregistredFeatures();
@@ -253,7 +262,7 @@ export class MapboxAoiDrawService {
* this method detects this feature on 'draw.render' event.
*/
private getUnregistredFeatures(): Feature[] {
- return this.mapDraw.getAll().features.filter(f => !this.ids.has(f.id));
+ return (this.mapDraw.getAllFeatures() as Feature[]).filter(f => !this.ids.has(f.id.toString()));
}
/** registers the identifiers of each drawn polygon in this service. */
@@ -262,7 +271,7 @@ export class MapboxAoiDrawService {
this.ids.clear();
const fc = this.mapDraw.getAll();
if (!!fc && !!fc.features) {
- this.ids = new Set(fc.features.map(f => f.id));
+ this.ids = new Set(fc.features.map(f => f.id.toString()));
}
this.registeringMode = false;
}
@@ -279,8 +288,8 @@ export class MapboxAoiDrawService {
}
/** Gets the given feature from MapboxDraw object. */
- private getFeature(featureId: string, mapDraw: MapboxDraw): Feature {
- return mapDraw.get(featureId);
+ private getFeature(featureId: string, mapDraw: AbstractDraw): Feature {
+ return mapDraw.get(featureId) as Feature;
}
/** Checks if the given feature has enough coordinates to represent an area (polygon) */
diff --git a/projects/arlas-components/src/lib/components/mapgl/model/LimitVertexDirectSelectMode.ts b/projects/arlas-map/src/lib/draw/modes/LimitVertexDirectSelectMode.ts
similarity index 98%
rename from projects/arlas-components/src/lib/components/mapgl/model/LimitVertexDirectSelectMode.ts
rename to projects/arlas-map/src/lib/draw/modes/LimitVertexDirectSelectMode.ts
index d647a17a..eb2c24db 100644
--- a/projects/arlas-components/src/lib/components/mapgl/model/LimitVertexDirectSelectMode.ts
+++ b/projects/arlas-map/src/lib/draw/modes/LimitVertexDirectSelectMode.ts
@@ -20,7 +20,7 @@
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import * as jsts from 'jsts/dist/jsts.min';
-const limitVertexDirectSelectMode = MapboxDraw.modes.direct_select;
+export const limitVertexDirectSelectMode = MapboxDraw.modes.direct_select;
const reader = new jsts.io.GeoJSONReader();
limitVertexDirectSelectMode.fireInvalidGeom = function (feature) {
diff --git a/projects/arlas-components/src/lib/components/mapgl/model/ValidGeomDrawPolygonMode.ts b/projects/arlas-map/src/lib/draw/modes/ValidGeomDrawPolygonMode.ts
similarity index 97%
rename from projects/arlas-components/src/lib/components/mapgl/model/ValidGeomDrawPolygonMode.ts
rename to projects/arlas-map/src/lib/draw/modes/ValidGeomDrawPolygonMode.ts
index 671372a2..758699f3 100644
--- a/projects/arlas-components/src/lib/components/mapgl/model/ValidGeomDrawPolygonMode.ts
+++ b/projects/arlas-map/src/lib/draw/modes/ValidGeomDrawPolygonMode.ts
@@ -20,7 +20,7 @@
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import * as jsts from 'jsts/dist/jsts.min';
-const validGeomDrawPolygonMode = MapboxDraw.modes.draw_polygon;
+export const validGeomDrawPolygonMode = MapboxDraw.modes.draw_polygon;
const reader = new jsts.io.GeoJSONReader();
validGeomDrawPolygonMode.fireInvalidGeom = function (feature) {
diff --git a/projects/arlas-components/src/lib/components/mapgl/draw/modes/circles/circle.mode.ts b/projects/arlas-map/src/lib/draw/modes/circles/circle.mode.ts
similarity index 97%
rename from projects/arlas-components/src/lib/components/mapgl/draw/modes/circles/circle.mode.ts
rename to projects/arlas-map/src/lib/draw/modes/circles/circle.mode.ts
index 75fa10bc..d38cc3e3 100644
--- a/projects/arlas-components/src/lib/components/mapgl/draw/modes/circles/circle.mode.ts
+++ b/projects/arlas-map/src/lib/draw/modes/circles/circle.mode.ts
@@ -21,7 +21,7 @@ import MapboxDraw from '@mapbox/mapbox-gl-draw';
import circle from '@turf/circle';
-const circleMode = { ...MapboxDraw.modes.draw_polygon };
+export const circleMode = { ...MapboxDraw.modes.draw_polygon };
const DEFAULT_RADIUS_IN_KM = 2;
circleMode.onSetup = function (opts) {
diff --git a/projects/arlas-components/src/lib/components/mapgl/draw/modes/circles/radius.circle.mode.ts b/projects/arlas-map/src/lib/draw/modes/circles/radius.circle.mode.ts
similarity index 78%
rename from projects/arlas-components/src/lib/components/mapgl/draw/modes/circles/radius.circle.mode.ts
rename to projects/arlas-map/src/lib/draw/modes/circles/radius.circle.mode.ts
index 7d84e5f2..91875232 100644
--- a/projects/arlas-components/src/lib/components/mapgl/draw/modes/circles/radius.circle.mode.ts
+++ b/projects/arlas-map/src/lib/draw/modes/circles/radius.circle.mode.ts
@@ -21,28 +21,15 @@ import MapboxDraw from '@mapbox/mapbox-gl-draw';
import circle from '@turf/circle';
import length from '@turf/length';
import numeral from 'numeral';
-const radiusCircleMode = { ...MapboxDraw.modes.draw_line_string };
+import { displayFeatures, updateCoordinates } from '../utils';
+
+export const radiusCircleMode = { ...MapboxDraw.modes.draw_line_string };
radiusCircleMode.fireOnStop = function () {
this.map.fire('draw.onStop', 'draw end');
};
-function createVertex(parentId, coordinates, path, selected) {
- return {
- type: 'Feature',
- properties: {
- meta: 'vertex',
- parent: parentId,
- coord_path: path,
- active: selected ? 'true' : 'false',
- },
- geometry: {
- type: 'Point',
- coordinates,
- },
- };
-}
function getDisplayMeasurements(feature) {
// should log both metric and standard display strings for the current drawn feature
@@ -143,17 +130,7 @@ radiusCircleMode.clickAnywhere = function (state, e) {
e.lngLat.lng,
e.lngLat.lat
);
- if (state.direction === 'forward') {
- state.currentVertexPosition += 1; // eslint-disable-line
- state.line.updateCoordinate(
- state.currentVertexPosition,
- e.lngLat.lng,
- e.lngLat.lat
- );
- } else {
- state.line.addCoordinate(0, e.lngLat.lng, e.lngLat.lat);
- }
-
+ updateCoordinates(state, e);
return null;
};
@@ -198,41 +175,7 @@ radiusCircleMode.onStop = function (state) {
};
radiusCircleMode.toDisplayFeatures = function (state, geojson, display) {
- const isActiveLine = geojson.properties.id === state.line.id;
- geojson.properties.active = isActiveLine ? 'true' : 'false';
- if (!isActiveLine) {
- if (!geojson.geometry.coordinates[0][0]) {
- return null;
- }
- return display(geojson);
- }
-
- // Only render the line if it has at least one real coordinate
- if (geojson.geometry.coordinates.length < 2) {
- return null;
- }
- geojson.properties.meta = 'feature';
-
- // displays center vertex as a point feature
- display(
- createVertex(
- state.line.id,
- geojson.geometry.coordinates[
- state.direction === 'forward'
- ? geojson.geometry.coordinates.length - 2
- : 1
- ],
- `${state.direction === 'forward'
- ? geojson.geometry.coordinates.length - 2
- : 1
- }`,
- false
- )
- );
-
- // displays the line as it is drawn
- display(geojson);
-
+ displayFeatures(state, geojson, display);
const displayMeasurements = getDisplayMeasurements(geojson);
// create custom feature for the current pointer position
diff --git a/projects/arlas-components/src/lib/components/mapgl/draw/modes/circles/utils.ts b/projects/arlas-map/src/lib/draw/modes/circles/utils.ts
similarity index 99%
rename from projects/arlas-components/src/lib/components/mapgl/draw/modes/circles/utils.ts
rename to projects/arlas-map/src/lib/draw/modes/circles/utils.ts
index f42cb885..18f26fce 100644
--- a/projects/arlas-components/src/lib/components/mapgl/draw/modes/circles/utils.ts
+++ b/projects/arlas-map/src/lib/draw/modes/circles/utils.ts
@@ -59,4 +59,3 @@ export const dragPan = {
}, 0);
}
};
-
diff --git a/projects/arlas-components/src/lib/components/mapgl/draw/modes/directSelectOverride.ts b/projects/arlas-map/src/lib/draw/modes/directSelectOverride.ts
similarity index 98%
rename from projects/arlas-components/src/lib/components/mapgl/draw/modes/directSelectOverride.ts
rename to projects/arlas-map/src/lib/draw/modes/directSelectOverride.ts
index a2f13111..de4d3e83 100644
--- a/projects/arlas-components/src/lib/components/mapgl/draw/modes/directSelectOverride.ts
+++ b/projects/arlas-map/src/lib/draw/modes/directSelectOverride.ts
@@ -24,7 +24,7 @@ import distance from '@turf/distance';
import { createSupplementaryPointsForCircle } from './circles/utils';
-const directModeOverride = MapboxDraw.modes.direct_select;
+export const directModeOverride = MapboxDraw.modes.direct_select;
directModeOverride.dragFeature = function (state, e, delta) {
MapboxDraw.lib.moveFeatures(this.getSelected(), delta);
diff --git a/projects/arlas-components/src/lib/components/mapgl/draw/modes/simpleSelectOverride.ts b/projects/arlas-map/src/lib/draw/modes/simpleSelectOverride.ts
similarity index 96%
rename from projects/arlas-components/src/lib/components/mapgl/draw/modes/simpleSelectOverride.ts
rename to projects/arlas-map/src/lib/draw/modes/simpleSelectOverride.ts
index ed6c7f99..7e0bb858 100644
--- a/projects/arlas-components/src/lib/components/mapgl/draw/modes/simpleSelectOverride.ts
+++ b/projects/arlas-map/src/lib/draw/modes/simpleSelectOverride.ts
@@ -21,7 +21,7 @@ import MapboxDraw from '@mapbox/mapbox-gl-draw';
import { createSupplementaryPointsForCircle } from './circles/utils';
-const simpleSelectModeOverride = MapboxDraw.modes.simple_select;
+export const simpleSelectModeOverride = MapboxDraw.modes.simple_select;
simpleSelectModeOverride.dragMove = function (state, e) {
// Dragging when drag move is enabled
diff --git a/projects/arlas-components/src/lib/components/mapgl/draw/modes/strip/strip.direct.mode.ts b/projects/arlas-map/src/lib/draw/modes/strip/strip.direct.mode.ts
similarity index 100%
rename from projects/arlas-components/src/lib/components/mapgl/draw/modes/strip/strip.direct.mode.ts
rename to projects/arlas-map/src/lib/draw/modes/strip/strip.direct.mode.ts
diff --git a/projects/arlas-components/src/lib/components/mapgl/draw/modes/strip/strip.mode.ts b/projects/arlas-map/src/lib/draw/modes/strip/strip.mode.ts
similarity index 81%
rename from projects/arlas-components/src/lib/components/mapgl/draw/modes/strip/strip.mode.ts
rename to projects/arlas-map/src/lib/draw/modes/strip/strip.mode.ts
index 3fe4d653..b22691a4 100644
--- a/projects/arlas-components/src/lib/components/mapgl/draw/modes/strip/strip.mode.ts
+++ b/projects/arlas-map/src/lib/draw/modes/strip/strip.mode.ts
@@ -18,30 +18,15 @@
*/
import MapboxDraw from '@mapbox/mapbox-gl-draw';
-import { polygon, point, bearingToAzimuth } from '@turf/helpers';
-import rhumbDestination from '@turf/rhumb-destination';
-import rhumbBearing from '@turf/rhumb-bearing';
+import { bearingToAzimuth, point, polygon } from '@turf/helpers';
import length from '@turf/length';
+import rhumbBearing from '@turf/rhumb-bearing';
+import rhumbDestination from '@turf/rhumb-destination';
import transformRotate from '@turf/transform-rotate';
import transformTranslate from '@turf/transform-translate';
+import { displayFeatures, updateCoordinates } from '../utils';
-const stripMode = { ...MapboxDraw.modes.draw_line_string };
-
-function createVertex(parentId, coordinates, path, selected) {
- return {
- type: 'Feature',
- properties: {
- meta: 'vertex',
- parent: parentId,
- coord_path: path,
- active: selected ? 'true' : 'false',
- },
- geometry: {
- type: 'Point',
- coordinates,
- },
- };
-}
+export const stripMode = { ...MapboxDraw.modes.draw_line_string };
export function rotateStrip(start, end, state, currentMaxBearing = 0, options: any = {}) {
const properties = options.properties ? options.properties : {};
@@ -149,16 +134,7 @@ stripMode.clickAnywhere = function (state, e) {
e.lngLat.lng,
e.lngLat.lat
);
- if (state.direction === 'forward') {
- state.currentVertexPosition += 1; // eslint-disable-line
- state.line.updateCoordinate(
- state.currentVertexPosition,
- e.lngLat.lng,
- e.lngLat.lat
- );
- } else {
- state.line.addCoordinate(0, e.lngLat.lng, e.lngLat.lat);
- }
+ updateCoordinates(state, e);
return null;
};
@@ -177,7 +153,7 @@ stripMode.onMouseMove = function (state, e) {
const translatedPoint = transformTranslate(endPoint, translateDistance, bearing);
const stripFeature = buildStrip(start, translatedPoint.geometry.coordinates, state.halfSwath);
stripFeature.properties.parent = state.line.id;
- (stripFeature.properties as any).meta = 'strip';
+ (stripFeature.properties).meta = 'strip';
state.strip.setCoordinates(stripFeature.geometry.coordinates);
state.currentMaxBearing = bearing;
state.isStripDrew = true;
@@ -228,40 +204,8 @@ stripMode.onStop = function (state) {
};
stripMode.toDisplayFeatures = function (state, geojson, display) {
- const isActiveLine = geojson.properties.id === state.line.id;
- geojson.properties.active = isActiveLine ? 'true' : 'false';
- if (!isActiveLine) {
- if (!geojson.geometry.coordinates[0][0]) {
- return null;
- }
- return display(geojson);
- }
-
- // Only render the line if it has at least one real coordinate
- if (geojson.geometry.coordinates.length < 2) {
- return null;
- }
- geojson.properties.meta = 'feature';
-
- // displays center vertex as a point feature
- display(
- createVertex(
- state.line.id,
- geojson.geometry.coordinates[
- state.direction === 'forward'
- ? geojson.geometry.coordinates.length - 2
- : 1
- ],
- `${state.direction === 'forward'
- ? geojson.geometry.coordinates.length - 2
- : 1
- }`,
- false
- )
- );
+ displayFeatures(state, geojson, display);
- // displays the line as it is drawn
- display(geojson);
// create custom feature for the current pointer position
const currentVertex = {
diff --git a/projects/arlas-map/src/lib/draw/modes/utils.ts b/projects/arlas-map/src/lib/draw/modes/utils.ts
new file mode 100644
index 00000000..7f109e98
--- /dev/null
+++ b/projects/arlas-map/src/lib/draw/modes/utils.ts
@@ -0,0 +1,85 @@
+/*
+ * Licensed to Gisaïa under one or more contributor
+ * license agreements. See the NOTICE.txt file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Gisaïa licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export function createDrawVertex(parentId, coordinates, path, selected) {
+ return {
+ type: 'Feature',
+ properties: {
+ meta: 'vertex',
+ parent: parentId,
+ coord_path: path,
+ active: selected ? 'true' : 'false',
+ },
+ geometry: {
+ type: 'Point',
+ coordinates,
+ },
+ };
+}
+export function displayFeatures(state, geojson, display) {
+ const isActiveLine = geojson.properties.id === state.line.id;
+ geojson.properties.active = isActiveLine ? 'true' : 'false';
+ if (!isActiveLine) {
+ if (!geojson.geometry.coordinates[0][0]) {
+ return null;
+ }
+ return display(geojson);
+ }
+
+ // Only render the line if it has at least one real coordinate
+ if (geojson.geometry.coordinates.length < 2) {
+ return null;
+ }
+ geojson.properties.meta = 'feature';
+
+ // displays center vertex as a point feature
+ display(
+ createDrawVertex(
+ state.line.id,
+ geojson.geometry.coordinates[
+ state.direction === 'forward'
+ ? geojson.geometry.coordinates.length - 2
+ : 1
+ ],
+ `${state.direction === 'forward'
+ ? geojson.geometry.coordinates.length - 2
+ : 1
+ }`,
+ false
+ )
+ );
+
+ // displays the line as it is drawn
+ display(geojson);
+
+}
+
+
+export function updateCoordinates(state, e) {
+ if (state.direction === 'forward') {
+ state.currentVertexPosition += 1; // eslint-disable-line
+ state.line.updateCoordinate(
+ state.currentVertexPosition,
+ e.lngLat.lng,
+ e.lngLat.lat
+ );
+ } else {
+ state.line.addCoordinate(0, e.lngLat.lng, e.lngLat.lat);
+ }
+}
diff --git a/projects/arlas-components/src/lib/components/mapgl/model/theme.ts b/projects/arlas-map/src/lib/draw/themes/default-theme.ts
similarity index 55%
rename from projects/arlas-components/src/lib/components/mapgl/model/theme.ts
rename to projects/arlas-map/src/lib/draw/themes/default-theme.ts
index 3b0ccc52..a364c9a1 100644
--- a/projects/arlas-components/src/lib/components/mapgl/model/theme.ts
+++ b/projects/arlas-map/src/lib/draw/themes/default-theme.ts
@@ -17,15 +17,70 @@
* under the License.
*/
+const roundLineLayout = {
+ 'line-cap': 'round',
+ 'line-join': 'round'
+};
+
+const staticModeVertex = ['all',
+ ['==', 'meta', 'vertex'],
+ ['==', '$type', 'Point'],
+ ['!=', 'mode', 'static']
+];
+
+const deactivatedStaticModeFeature = ['all',
+ ['==', 'active', 'false'],
+ ['==', '$type', 'Point'],
+ ['==', 'meta', 'feature'],
+ ['!=', 'mode', 'static']
+];
+const deactivatedStaticPolygon = ['all',
+ ['==', 'active', 'false'],
+ ['==', '$type', 'Polygon'],
+ ['!=', 'mode', 'static']
+];
+
+const activatedMidPoint = ['all',
+ ['==', '$type', 'Point'],
+ ['==', 'active', 'true'],
+ ['!=', 'meta', 'midpoint']
+];
+const staticLineMidPoint = ['all', ['==', 'meta', 'midpoint'],
+ ['==', 'actionType', 'rotation'],
+ ['==', '$type', 'LineString'],
+ ['!=', 'mode', 'static']
+];
+
+const staticPolygon = ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']];
+const activePolygon = ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']];
+const staticMidpoint = ['all',
+ ['==', 'meta', 'midpoint'],
+ ['==', 'actionType', 'resize'],
+ ['==', '$type', 'Point'],
+ ['!=', 'mode', 'static']
+];
+const dashedLinePaint = {
+ 'line-color': '#fbb03b',
+ 'line-dasharray': [0.2, 2],
+ 'line-width': 2
+};
+
+const linePaint = {
+ 'line-color': '#3bb2d0',
+ 'line-width': 2
+};
+
+const rotatePointFilter = ['all',
+ ['==', 'meta', 'midpoint'],
+ ['==', 'actionType', 'rotation'],
+ ['==', '$type', 'Point'],
+ ['!=', 'mode', 'static']
+];
export default [
{
'id': 'gl-draw-polygon-fill-inactive',
'type': 'fill',
- 'filter': ['all',
- ['==', 'active', 'false'],
- ['==', '$type', 'Polygon'],
- ['!=', 'mode', 'static']
- ],
+ 'filter': deactivatedStaticPolygon,
'paint': {
'fill-color': '#3bb2d0',
'fill-outline-color': '#3bb2d0',
@@ -35,7 +90,7 @@ export default [
{
'id': 'gl-draw-polygon-fill-active',
'type': 'fill',
- 'filter': ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
+ 'filter': activePolygon,
'paint': {
'fill-color': '#fbb03b',
'fill-outline-color': '#fbb03b',
@@ -56,33 +111,16 @@ export default [
{
'id': 'gl-draw-polygon-stroke-inactive',
'type': 'line',
- 'filter': ['all',
- ['==', 'active', 'false'],
- ['==', '$type', 'Polygon'],
- ['!=', 'mode', 'static']
- ],
- 'layout': {
- 'line-cap': 'round',
- 'line-join': 'round'
- },
- 'paint': {
- 'line-color': '#3bb2d0',
- 'line-width': 2
- }
+ 'filter': deactivatedStaticPolygon,
+ 'layout': roundLineLayout,
+ 'paint': linePaint
},
{
'id': 'gl-draw-polygon-stroke-active',
'type': 'line',
- 'filter': ['all', ['==', 'active', 'true'], ['==', '$type', 'Polygon']],
- 'layout': {
- 'line-cap': 'round',
- 'line-join': 'round'
- },
- 'paint': {
- 'line-color': '#fbb03b',
- 'line-dasharray': [0.2, 2],
- 'line-width': 2
- }
+ 'filter': activePolygon,
+ 'layout': roundLineLayout,
+ 'paint': dashedLinePaint
},
{
'id': 'gl-draw-line-inactive',
@@ -92,14 +130,9 @@ export default [
['==', '$type', 'LineString'],
['!=', 'mode', 'static']
],
- 'layout': {
- 'line-cap': 'round',
- 'line-join': 'round'
- },
- 'paint': {
- 'line-color': '#3bb2d0',
- 'line-width': 2
- }
+ 'layout': roundLineLayout,
+
+ 'paint': linePaint
},
{
'id': 'gl-draw-line-active',
@@ -108,24 +141,13 @@ export default [
['==', '$type', 'LineString'],
['==', 'active', 'true']
],
- 'layout': {
- 'line-cap': 'round',
- 'line-join': 'round'
- },
- 'paint': {
- 'line-color': '#fbb03b',
- 'line-dasharray': [0.2, 2],
- 'line-width': 2
- }
+ 'layout': roundLineLayout,
+ 'paint': dashedLinePaint
},
{
'id': 'gl-draw-polygon-and-line-vertex-stroke-inactive',
'type': 'circle',
- 'filter': ['all',
- ['==', 'meta', 'vertex'],
- ['==', '$type', 'Point'],
- ['!=', 'mode', 'static']
- ],
+ 'filter': staticModeVertex,
'paint': {
'circle-radius': 5,
'circle-color': '#fff'
@@ -134,11 +156,7 @@ export default [
{
'id': 'gl-draw-polygon-and-line-vertex-inactive',
'type': 'circle',
- 'filter': ['all',
- ['==', 'meta', 'vertex'],
- ['==', '$type', 'Point'],
- ['!=', 'mode', 'static']
- ],
+ 'filter': staticModeVertex,
'paint': {
'circle-radius': 3,
'circle-color': '#fbb03b'
@@ -147,12 +165,7 @@ export default [
{
'id': 'gl-draw-point-point-stroke-inactive',
'type': 'circle',
- 'filter': ['all',
- ['==', 'active', 'false'],
- ['==', '$type', 'Point'],
- ['==', 'meta', 'feature'],
- ['!=', 'mode', 'static']
- ],
+ 'filter': deactivatedStaticModeFeature,
'paint': {
'circle-radius': 5,
'circle-opacity': 1,
@@ -162,12 +175,7 @@ export default [
{
'id': 'gl-draw-point-inactive',
'type': 'circle',
- 'filter': ['all',
- ['==', 'active', 'false'],
- ['==', '$type', 'Point'],
- ['==', 'meta', 'feature'],
- ['!=', 'mode', 'static']
- ],
+ 'filter': deactivatedStaticModeFeature,
'paint': {
'circle-radius': 3,
'circle-color': '#3bb2d0'
@@ -176,11 +184,7 @@ export default [
{
'id': 'gl-draw-point-stroke-active',
'type': 'circle',
- 'filter': ['all',
- ['==', '$type', 'Point'],
- ['==', 'active', 'true'],
- ['!=', 'meta', 'midpoint']
- ],
+ 'filter': activatedMidPoint,
'paint': {
'circle-radius': 7,
'circle-color': '#fff'
@@ -189,10 +193,7 @@ export default [
{
'id': 'gl-draw-point-active',
'type': 'circle',
- 'filter': ['all',
- ['==', '$type', 'Point'],
- ['!=', 'meta', 'midpoint'],
- ['==', 'active', 'true']],
+ 'filter': activatedMidPoint,
'paint': {
'circle-radius': 5,
'circle-color': '#fbb03b'
@@ -201,7 +202,7 @@ export default [
{
'id': 'gl-draw-polygon-fill-static',
'type': 'fill',
- 'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
+ 'filter': staticPolygon,
'paint': {
'fill-color': '#3bb2d0',
'fill-outline-color': '#3bb2d0',
@@ -211,24 +212,17 @@ export default [
{
'id': 'gl-draw-polygon-stroke-static',
'type': 'line',
- 'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'Polygon']],
- 'layout': {
- 'line-cap': 'round',
- 'line-join': 'round'
- },
- 'paint': {
- 'line-color': '#3bb2d0',
- 'line-width': 2
- }
+ 'filter': staticPolygon,
+ 'layout': roundLineLayout,
+
+ 'paint': linePaint
},
{
'id': 'gl-draw-line-static',
'type': 'line',
'filter': ['all', ['==', 'mode', 'static'], ['==', '$type', 'LineString']],
- 'layout': {
- 'line-cap': 'round',
- 'line-join': 'round'
- },
+ 'layout': roundLineLayout,
+
'paint': {
'line-color': '#404040',
'line-width': 2
@@ -246,32 +240,15 @@ export default [
{
'id': 'gl-draw-line-rotate-point',
'type': 'line',
- 'filter': ['all',
- ['==', 'meta', 'midpoint'],
- ['==', 'actionType', 'rotation'],
- ['==', '$type', 'LineString'],
- ['!=', 'mode', 'static']
- // ['==', 'active', 'true']
- ],
- 'layout': {
- 'line-cap': 'round',
- 'line-join': 'round'
- },
- 'paint': {
- 'line-color': '#fbb03b',
- 'line-dasharray': [0.2, 2],
- 'line-width': 2
- }
+ 'filter': staticLineMidPoint,
+ 'layout': roundLineLayout,
+
+ 'paint': dashedLinePaint
},
{
'id': 'gl-draw-polygon-rotate-point-stroke',
'type': 'circle',
- 'filter': ['all',
- ['==', 'meta', 'midpoint'],
- ['==', 'actionType', 'rotation'],
- ['==', '$type', 'Point'],
- ['!=', 'mode', 'static']
- ],
+ 'filter': rotatePointFilter,
'paint': {
'circle-radius': 4,
'circle-color': '#fff'
@@ -280,12 +257,7 @@ export default [
{
'id': 'gl-draw-polygon-rotate-point',
'type': 'circle',
- 'filter': ['all',
- ['==', 'meta', 'midpoint'],
- ['==', 'actionType', 'rotation'],
- ['==', '$type', 'Point'],
- ['!=', 'mode', 'static']
- ],
+ 'filter': rotatePointFilter,
'paint': {
'circle-radius': 2,
'circle-color': '#fbb03b'
@@ -294,12 +266,7 @@ export default [
{
'id': 'gl-draw-polygon-rotate-point-icon',
'type': 'symbol',
- 'filter': ['all',
- ['==', 'meta', 'midpoint'],
- ['==', 'actionType', 'rotation'],
- ['==', '$type', 'Point'],
- ['!=', 'mode', 'static']
- ],
+ 'filter': rotatePointFilter,
'layout': {
'icon-image': 'rotate',
'icon-allow-overlap': true,
@@ -318,32 +285,15 @@ export default [
{
'id': 'gl-draw-line-resize-point',
'type': 'line',
- 'filter': ['all',
- ['==', 'meta', 'midpoint'],
- ['==', 'actionType', 'rotation'],
- ['==', '$type', 'LineString'],
- ['!=', 'mode', 'static']
- // ['==', 'active', 'true']
- ],
- 'layout': {
- 'line-cap': 'round',
- 'line-join': 'round'
- },
- 'paint': {
- 'line-color': '#fbb03b',
- 'line-dasharray': [0.2, 2],
- 'line-width': 2
- }
+ 'filter': staticLineMidPoint,
+ 'layout': roundLineLayout,
+
+ 'paint': dashedLinePaint
},
{
'id': 'gl-draw-polygon-resize-point-stroke',
'type': 'circle',
- 'filter': ['all',
- ['==', 'meta', 'midpoint'],
- ['==', 'actionType', 'resize'],
- ['==', '$type', 'Point'],
- ['!=', 'mode', 'static']
- ],
+ 'filter': staticMidpoint,
'paint': {
'circle-radius': 5,
'circle-color': '#fff'
@@ -352,12 +302,7 @@ export default [
{
'id': 'gl-draw-polygon-resize-point',
'type': 'circle',
- 'filter': ['all',
- ['==', 'meta', 'midpoint'],
- ['==', 'actionType', 'resize'],
- ['==', '$type', 'Point'],
- ['!=', 'mode', 'static']
- ],
+ 'filter': staticMidpoint,
'paint': {
'circle-radius': 6,
'circle-color': '#fbb03b'
@@ -366,12 +311,7 @@ export default [
{
'id': 'gl-draw-polygon-resize-point-icon',
'type': 'symbol',
- 'filter': ['all',
- ['==', 'meta', 'midpoint'],
- ['==', 'actionType', 'resize'],
- ['==', '$type', 'Point'],
- ['!=', 'mode', 'static']
- ],
+ 'filter': staticMidpoint,
'layout': {
'icon-image': 'resize',
'icon-allow-overlap': true,
diff --git a/projects/arlas-components/src/lib/components/mapgl-legend/layer-name.pipe.ts b/projects/arlas-map/src/lib/legend/layer-name.pipe.ts
similarity index 95%
rename from projects/arlas-components/src/lib/components/mapgl-legend/layer-name.pipe.ts
rename to projects/arlas-map/src/lib/legend/layer-name.pipe.ts
index 87cb4299..5ca33ce2 100644
--- a/projects/arlas-components/src/lib/components/mapgl-legend/layer-name.pipe.ts
+++ b/projects/arlas-map/src/lib/legend/layer-name.pipe.ts
@@ -18,7 +18,7 @@
*/
import { Pipe, PipeTransform } from '@angular/core';
-import { getLayerName } from '../componentsUtils';
+import { getLayerName } from '../map/model/layers';
@Pipe({
diff --git a/projects/arlas-components/src/lib/components/mapgl-layer-icon/mapgl-layer-icon.component.html b/projects/arlas-map/src/lib/legend/legend-icon/layer-icon.component.html
similarity index 100%
rename from projects/arlas-components/src/lib/components/mapgl-layer-icon/mapgl-layer-icon.component.html
rename to projects/arlas-map/src/lib/legend/legend-icon/layer-icon.component.html
diff --git a/projects/arlas-components/src/lib/components/mapgl-layer-icon/mapgl-layer-icon.component.scss b/projects/arlas-map/src/lib/legend/legend-icon/layer-icon.component.scss
similarity index 100%
rename from projects/arlas-components/src/lib/components/mapgl-layer-icon/mapgl-layer-icon.component.scss
rename to projects/arlas-map/src/lib/legend/legend-icon/layer-icon.component.scss
diff --git a/projects/arlas-components/src/lib/components/mapgl-layer-icon/mapgl-layer-icon.component.spec.ts b/projects/arlas-map/src/lib/legend/legend-icon/layer-icon.component.spec.ts
similarity index 51%
rename from projects/arlas-components/src/lib/components/mapgl-layer-icon/mapgl-layer-icon.component.spec.ts
rename to projects/arlas-map/src/lib/legend/legend-icon/layer-icon.component.spec.ts
index 35b64209..dd026e9c 100644
--- a/projects/arlas-components/src/lib/components/mapgl-layer-icon/mapgl-layer-icon.component.spec.ts
+++ b/projects/arlas-map/src/lib/legend/legend-icon/layer-icon.component.spec.ts
@@ -1,19 +1,19 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MapglLayerIconComponent } from './mapgl-layer-icon.component';
+import { LayerIconComponent } from './layer-icon.component';
-describe('MapglLayerIconComponent', () => {
- let component: MapglLayerIconComponent;
- let fixture: ComponentFixture;
+describe('LayerIconComponent', () => {
+ let component: LayerIconComponent;
+ let fixture: ComponentFixture;
beforeEach(async () => {
TestBed.configureTestingModule({
- declarations: [MapglLayerIconComponent]
+ declarations: [LayerIconComponent]
})
.compileComponents();
});
beforeEach(() => {
- fixture = TestBed.createComponent(MapglLayerIconComponent);
+ fixture = TestBed.createComponent(LayerIconComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/projects/arlas-components/src/lib/components/mapgl-layer-icon/mapgl-layer-icon.component.ts b/projects/arlas-map/src/lib/legend/legend-icon/layer-icon.component.ts
similarity index 94%
rename from projects/arlas-components/src/lib/components/mapgl-layer-icon/mapgl-layer-icon.component.ts
rename to projects/arlas-map/src/lib/legend/legend-icon/layer-icon.component.ts
index ef8cbc7d..da07ddc5 100644
--- a/projects/arlas-components/src/lib/components/mapgl-layer-icon/mapgl-layer-icon.component.ts
+++ b/projects/arlas-map/src/lib/legend/legend-icon/layer-icon.component.ts
@@ -17,17 +17,17 @@
* under the License.
*/
-import { Component, OnInit, ViewChild, ElementRef, Input, AfterViewInit, SimpleChanges, OnChanges } from '@angular/core';
+import { Component, ViewChild, ElementRef, Input, AfterViewInit, SimpleChanges, OnChanges } from '@angular/core';
import { select } from 'd3-selection';
-import { Legend, PROPERTY_SELECTOR_SOURCE } from '../mapgl/mapgl.component.util';
+import { Legend, PROPERTY_SELECTOR_SOURCE } from '../legend.config';
@Component({
- selector: 'arlas-mapgl-layer-icon',
- templateUrl: './mapgl-layer-icon.component.html',
- styleUrls: ['./mapgl-layer-icon.component.scss']
+ selector: 'arlas-layer-icon',
+ templateUrl: './layer-icon.component.html',
+ styleUrls: ['./layer-icon.component.scss']
})
-export class MapglLayerIconComponent implements OnInit, AfterViewInit, OnChanges {
- @Input() public layer: mapboxgl.Layer;
+export class LayerIconComponent implements AfterViewInit, OnChanges {
+ @Input() public layer: any;
@Input() public colorLegend: Legend = {};
@Input() public strokeColorLegend: Legend = {};
@Input() public widthLegend: Legend = {};
@@ -38,9 +38,6 @@ export class MapglLayerIconComponent implements OnInit, AfterViewInit, OnChanges
public constructor() {
}
- public ngOnInit() {
- }
-
public ngAfterViewInit() {
if (this.layer) {
this.drawIcons();
@@ -57,12 +54,10 @@ export class MapglLayerIconComponent implements OnInit, AfterViewInit, OnChanges
private drawIcons(): void {
const type = this.layer.type;
- const paint = this.layer.paint;
const source: string = this.layer.source as string;
switch (type) {
case 'circle':
case 'circle-heatmap': {
- const p: mapboxgl.CirclePaint = (paint as mapboxgl.CirclePaint);
if (source.startsWith('feature-metric')) {
drawFeatureCircleIcon(this.layerIconElement.nativeElement, this.colorLegend, this.strokeColorLegend, true);
} else if (source.startsWith('feature')) {
@@ -96,7 +91,7 @@ export class MapglLayerIconComponent implements OnInit, AfterViewInit, OnChanges
break;
}
case 'symbol': {
- const l: mapboxgl.SymbolLayout = (this.layer.layout as mapboxgl.SymbolLayout);
+ const l: any = (this.layer.layout);
if (l['text-field']) {
drawTextIcon(this.layerIconElement.nativeElement, this.colorLegend);
}
@@ -460,14 +455,12 @@ export function populateListFromLegend(list: Array, legend: Leg
list.push(legend.fixValue);
} else if (legend.type === PROPERTY_SELECTOR_SOURCE.interpolated) {
const iv = legend.interpolatedValues;
- if (iv) {
- if (iv.length === 1) {
- list.push(iv[0], iv[0], iv[0]);
- } else if (iv.length === 2) {
- list.push(iv[0], iv[0], iv[1]);
- } else if (iv.length >= 3) {
- list.push(iv[0], iv[Math.trunc(iv.length / 2)], iv[iv.length - 1]);
- }
+ if (iv?.length === 1) {
+ list.push(iv[0], iv[0], iv[0]);
+ } else if (iv.length === 2) {
+ list.push(iv[0], iv[0], iv[1]);
+ } else if (iv.length >= 3) {
+ list.push(iv[0], iv[Math.trunc(iv.length / 2)], iv[iv.length - 1]);
}
} else if (legend.type === PROPERTY_SELECTOR_SOURCE.manual || legend.type === PROPERTY_SELECTOR_SOURCE.generated
|| legend.type === PROPERTY_SELECTOR_SOURCE.provided) {
diff --git a/projects/arlas-components/src/lib/components/mapgl-legend/mapgl-legend-item/mapgl-legend-item.component.html b/projects/arlas-map/src/lib/legend/legend-item/legend-item.component.html
similarity index 86%
rename from projects/arlas-components/src/lib/components/mapgl-legend/mapgl-legend-item/mapgl-legend-item.component.html
rename to projects/arlas-map/src/lib/legend/legend-item/legend-item.component.html
index c1d1c694..f3771e7e 100644
--- a/projects/arlas-components/src/lib/components/mapgl-legend/mapgl-legend-item/mapgl-legend-item.component.html
+++ b/projects/arlas-map/src/lib/legend/legend-item/legend-item.component.html
@@ -1,8 +1,7 @@
-
- {{ title }} {{ l.translateKey | translate: {metric: l.metric | translate, field: l.field | translate, normalized: l.normalized | translate: {normalizedKey: l.normalizedKey | translate} } }}
+ {{ title | translate}} {{ l.translateKey | translate: {metric: l.metric | translate, field: l.field | translate, normalized: l.normalized | translate: {normalizedKey: l.normalizedKey | translate} } }}
diff --git a/projects/arlas-components/src/lib/components/mapgl-legend/mapgl-legend-item/mapgl-legend-item.component.scss b/projects/arlas-map/src/lib/legend/legend-item/legend-item.component.scss
similarity index 97%
rename from projects/arlas-components/src/lib/components/mapgl-legend/mapgl-legend-item/mapgl-legend-item.component.scss
rename to projects/arlas-map/src/lib/legend/legend-item/legend-item.component.scss
index 5cc23222..eb420a65 100644
--- a/projects/arlas-components/src/lib/components/mapgl-legend/mapgl-legend-item/mapgl-legend-item.component.scss
+++ b/projects/arlas-map/src/lib/legend/legend-item/legend-item.component.scss
@@ -17,7 +17,7 @@
* under the License.
*/
-@import "../../../../../assets/styles/sizes.scss";
+@import "../../../../assets/styles/sizes.scss";
.legend {
&__title {
diff --git a/projects/arlas-map/src/lib/legend/legend-item/legend-item.component.spec.ts b/projects/arlas-map/src/lib/legend/legend-item/legend-item.component.spec.ts
new file mode 100644
index 00000000..bb32aa64
--- /dev/null
+++ b/projects/arlas-map/src/lib/legend/legend-item/legend-item.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { LegendItemComponent } from './legend-item.component';
+
+describe('LegendItemComponent', () => {
+ let component: LegendItemComponent;
+ let fixture: ComponentFixture
;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ LegendItemComponent ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(LegendItemComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/projects/arlas-components/src/lib/components/mapgl-legend/mapgl-legend-item/mapgl-legend-item.component.ts b/projects/arlas-map/src/lib/legend/legend-item/legend-item.component.ts
similarity index 70%
rename from projects/arlas-components/src/lib/components/mapgl-legend/mapgl-legend-item/mapgl-legend-item.component.ts
rename to projects/arlas-map/src/lib/legend/legend-item/legend-item.component.ts
index 5466b2b8..7b741bd7 100644
--- a/projects/arlas-components/src/lib/components/mapgl-legend/mapgl-legend-item/mapgl-legend-item.component.ts
+++ b/projects/arlas-map/src/lib/legend/legend-item/legend-item.component.ts
@@ -17,19 +17,18 @@
* under the License.
*/
-import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-import { Legend, PROPERTY_SELECTOR_SOURCE } from '../../mapgl/mapgl.component.util';
-import { Layer } from 'mapbox-gl';
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { Legend, PROPERTY_SELECTOR_SOURCE } from '../legend.config';
@Component({
- selector: 'arlas-mapgl-legend-item',
- templateUrl: './mapgl-legend-item.component.html',
- styleUrls: ['./mapgl-legend-item.component.scss']
+ selector: 'arlas-legend-item',
+ templateUrl: './legend-item.component.html',
+ styleUrls: ['./legend-item.component.scss']
})
-export class MapglLegendItemComponent implements OnInit {
+export class LegendItemComponent {
@Input() public legend: Legend;
@Input() public title: string;
- @Input() public layer: Layer;
+ @Input() public layer: any;
@Input() public colorPalette: string;
@ViewChild('interpolated_svg', { read: ElementRef, static: false }) public interpolatedElement: ElementRef;
@@ -37,7 +36,4 @@ export class MapglLegendItemComponent implements OnInit {
public constructor() { }
- public ngOnInit(): void {
- }
-
}
diff --git a/projects/arlas-map/src/lib/legend/legend.component.html b/projects/arlas-map/src/lib/legend/legend.component.html
new file mode 100644
index 00000000..e9888d47
--- /dev/null
+++ b/projects/arlas-map/src/lib/legend/legend.component.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+ {{layer?.id | layerIdToName | translate}}
+
+
+
+
+ file_download
+
+
+
+
+
+
+ {{ detail ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/projects/arlas-components/src/lib/components/mapgl-legend/mapgl-legend.component.scss b/projects/arlas-map/src/lib/legend/legend.component.scss
similarity index 97%
rename from projects/arlas-components/src/lib/components/mapgl-legend/mapgl-legend.component.scss
rename to projects/arlas-map/src/lib/legend/legend.component.scss
index 2c724be6..7a6fe7cc 100644
--- a/projects/arlas-components/src/lib/components/mapgl-legend/mapgl-legend.component.scss
+++ b/projects/arlas-map/src/lib/legend/legend.component.scss
@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
- @import "../../../../assets/styles/sizes.scss";
+ @import "../../../assets/styles/sizes.scss";
.layer_name {
font-size: $sm-font-size;
@@ -74,4 +74,4 @@
.legend-wrapper {
width: 210px;
padding-left: 10px;
-}
+}
\ No newline at end of file
diff --git a/projects/arlas-map/src/lib/legend/legend.component.ts b/projects/arlas-map/src/lib/legend/legend.component.ts
new file mode 100644
index 00000000..d16ebac4
--- /dev/null
+++ b/projects/arlas-map/src/lib/legend/legend.component.ts
@@ -0,0 +1,388 @@
+/*
+ * Licensed to Gisaïa under one or more contributor
+ * license agreements. See the NOTICE.txt file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Gisaïa licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { AfterViewInit, Component, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { HistogramData } from 'arlas-d3/histograms/utils/HistogramUtils';
+import { ArlasColorService } from 'arlas-web-components';
+import { scaleLinear, ScaleLinear } from 'd3-scale';
+import { select } from 'd3-selection';
+import { area, curveLinear, line } from 'd3-shape';
+import { Subject, takeUntil } from 'rxjs';
+import { ARLAS_ID, FILLSTROKE_LAYER_PREFIX, HOVER_LAYER_PREFIX, SELECT_LAYER_PREFIX } from '../map/model/layers';
+import { Legend, LegendData, PROPERTY_SELECTOR_SOURCE } from './legend.config';
+import { LegendService } from './legend.service';
+import { MAX_LINE_WIDTH } from './legend.tools';
+
+
+@Component({
+ selector: 'arlas-legend',
+ templateUrl: './legend.component.html',
+ styleUrls: ['./legend.component.scss']
+})
+export class LegendComponent implements OnInit, AfterViewInit, OnChanges {
+ /**
+ * @Input : Angular
+ * @description Layer object
+ */
+ @Input() public layer: any;
+ /**
+ * @Input : Angular
+ * @description Collection of the layer
+ */
+ @Input() public collection: string;
+ /**
+ * @Input : Angular
+ * @description Current zoom level of the map
+ */
+ @Input() public zoom: number;
+ /**
+ * @Input : Angular
+ * @description Whether the layer is enabled.
+ */
+ @Input() public enabled: boolean;
+ /**
+ * @Input : Angular
+ * @description Subject of [collection, [field, legendData]] map. The map subscribes to it to keep
+ * the legend updated with the data displayed on the map.
+ */
+ @Input() public legendUpdater: Subject