From 3003237934db7d4adca8ee264914986ad9d15792 Mon Sep 17 00:00:00 2001 From: kalvinkhuu <77596289+kalvinkhuu@users.noreply.github.com> Date: Thu, 19 May 2022 10:33:33 -0400 Subject: [PATCH 1/6] Merge branch 'DrawingGestionOnLabels' into DessinGestionDesEtiquettes --- .../lib/draw/draw/draw-popup.component.html | 22 +-- .../src/lib/draw/draw/draw-popup.component.ts | 8 +- .../geo/src/lib/draw/draw/draw.component.html | 131 +++++++++++++----- .../geo/src/lib/draw/draw/draw.component.scss | 1 + .../geo/src/lib/draw/draw/draw.component.ts | 84 +++++++++-- .../src/lib/draw/shared/draw-style.service.ts | 30 +++- packages/geo/src/lib/draw/shared/draw.enum.ts | 16 +++ packages/geo/src/locale/en.geo.json | 6 +- packages/geo/src/locale/fr.geo.json | 6 +- 9 files changed, 238 insertions(+), 66 deletions(-) diff --git a/packages/geo/src/lib/draw/draw/draw-popup.component.html b/packages/geo/src/lib/draw/draw/draw-popup.component.html index 0c5202b5e6..3f2ecb52b5 100644 --- a/packages/geo/src/lib/draw/draw/draw-popup.component.html +++ b/packages/geo/src/lib/draw/draw/draw-popup.component.html @@ -1,21 +1,21 @@
-

{{'igo.geo.draw.dialogInstruction' | translate}}

+

+ {{ 'igo.geo.draw.dialogInstruction' | translate }} +

+ placeholder="{{ 'igo.geo.draw.dialogTitle' | translate }}" + value="{{ data.currentLabel }}" + />
- - -
\ No newline at end of file + diff --git a/packages/geo/src/lib/draw/draw/draw-popup.component.ts b/packages/geo/src/lib/draw/draw/draw-popup.component.ts index 09e79aec95..eb9d7e36d2 100644 --- a/packages/geo/src/lib/draw/draw/draw-popup.component.ts +++ b/packages/geo/src/lib/draw/draw/draw-popup.component.ts @@ -1,4 +1,4 @@ -import { Component, Inject } from '@angular/core'; +import { Component, Inject, Input } from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; export interface DialogData { @@ -12,6 +12,8 @@ export interface DialogData { }) export class DrawPopupComponent { + @Input() confirmFlag: boolean = false; + constructor( public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: {currentLabel: string}) {} @@ -19,4 +21,8 @@ export interface DialogData { noLabel() { this.dialogRef.close(); } + confirm(labelString: string){ + this.confirmFlag = true; + this.dialogRef.close(labelString); + } } diff --git a/packages/geo/src/lib/draw/draw/draw.component.html b/packages/geo/src/lib/draw/draw/draw.component.html index 9f0ca06245..d7b7e0f792 100644 --- a/packages/geo/src/lib/draw/draw/draw.component.html +++ b/packages/geo/src/lib/draw/draw/draw.component.html @@ -1,21 +1,23 @@
+ (change)="onGeometryTypeChange($event.value)" + [value]="geometryType.Point" + > - {{('igo.geo.draw.' + geometryType.Point) | translate}} + {{ 'igo.geo.draw.' + geometryType.Point | translate }} - {{('igo.geo.draw.' + geometryType.LineString) | translate}} + {{ 'igo.geo.draw.' + geometryType.LineString | translate }} - {{('igo.geo.draw.' + geometryType.Polygon) | translate}} + {{ 'igo.geo.draw.' + geometryType.Polygon | translate }} - {{('igo.geo.draw.' + geometryType.Circle) | translate}} + {{ 'igo.geo.draw.' + geometryType.Circle | translate }}
@@ -25,23 +27,25 @@ [disabled]="drawControlIsDisabled" [checked]="drawControlIsActive" [labelPosition]="'before'" - (change)="onToggleDrawControl($event.checked)"> - {{'igo.geo.spatialFilter.drawControl' | translate}} + (change)="onToggleDrawControl($event.checked)" + > + {{ 'igo.geo.spatialFilter.drawControl' | translate }} - {{'igo.geo.draw.toggleMapTooltips' | translate}} + (change)="onToggleLabels()" + > + {{ 'igo.geo.draw.toggleMapTooltips' | translate }}
-
+
- {{'igo.geo.draw.fill' | translate}} + {{ 'igo.geo.draw.fill' | translate }} - {{fillColor}} + [matTooltip]="'igo.geo.draw.colorPicker' | translate" + > + {{ fillColor }} + (colorPickerChange)="onColorChange(labelsAreShown, false)" + />
- - {{'igo.geo.draw.stroke' | translate}} + + {{ 'igo.geo.draw.stroke' | translate }} - {{strokeColor}} + [matTooltip]="'igo.geo.draw.colorPicker' | translate" + > + {{ strokeColor }} + (colorPickerChange)="onColorChange(labelsAreShown, false)" + />
- {{'igo.geo.draw.icon' | translate}} + {{ 'igo.geo.draw.icon' | translate }}
- +
- {{'igo.geo.draw.noIcon' | translate}} + {{ + 'igo.geo.draw.noIcon' | translate + }} + (click)="onIconChange(icon_html)" + >
- +
@@ -129,10 +143,56 @@
+
+
+ + {{ 'igo.geo.draw.fontSize' | translate }} + + px + +
+ +
+ + {{ 'igo.geo.draw.fontStyle' | translate }} + + + {{ fontSelect }} + + + +
+
+
- @@ -148,7 +209,9 @@ #table class="table-compact" [store]="store" - [template]="tableTemplate"> + [template]="tableTemplate" + (dblclick)="editLabelDrawing()" + >
@@ -156,13 +219,15 @@ mat-icon-button color="accent" disableRipple="true" - (click)="openShorcutsDialog()"> + (click)="openShorcutsDialog()" + > + [matTooltip]="'igo.geo.draw.shortcuts' | translate" + > diff --git a/packages/geo/src/lib/draw/draw/draw.component.scss b/packages/geo/src/lib/draw/draw/draw.component.scss index f74e427d10..bde28a6522 100644 --- a/packages/geo/src/lib/draw/draw/draw.component.scss +++ b/packages/geo/src/lib/draw/draw/draw.component.scss @@ -67,3 +67,4 @@ img { .deleteBtn { margin-left: 12px; } + diff --git a/packages/geo/src/lib/draw/draw/draw.component.ts b/packages/geo/src/lib/draw/draw/draw.component.ts index e25a6e2298..1c6871d0a8 100644 --- a/packages/geo/src/lib/draw/draw/draw.component.ts +++ b/packages/geo/src/lib/draw/draw/draw.component.ts @@ -15,12 +15,13 @@ import { tryAddLoadingStrategy, tryAddSelectionStrategy, FeatureMotion, - FeatureStoreLoadingStrategy + FeatureStoreLoadingStrategy, + featureToOl } from '../../feature'; import { LanguageService } from '@igo2/core'; import { MatDialog } from '@angular/material/dialog'; -import { GeometryType } from '../shared/draw.enum'; +import { FontType, GeometryType } from '../shared/draw.enum'; import { IgoMap } from '../../map/shared/map'; import { BehaviorSubject, Subscription } from 'rxjs'; import { Draw, FeatureWithDraw } from '../shared/draw.interface'; @@ -39,7 +40,7 @@ import OlFeature from 'ol/Feature'; import OlGeoJSON from 'ol/format/GeoJSON'; import OlOverlay from 'ol/Overlay'; import type { default as OlGeometryType } from 'ol/geom/GeometryType'; -import type { default as OlGeometry } from 'ol/geom/Geometry'; +import { default as OlGeometry } from 'ol/geom/Geometry'; import { getDistance } from 'ol/sphere'; import { DrawStyleService } from '../shared/draw-style.service'; import { skip } from 'rxjs/operators'; @@ -50,6 +51,7 @@ import { createInteractionStyle } from '../shared/draw.utils'; import { transform } from 'ol/proj'; import { DrawIconService } from '../shared/draw-icon.service'; + @Component ({ selector: 'igo-draw', templateUrl: './draw.component.html', @@ -74,6 +76,7 @@ export class DrawComponent implements OnInit, OnDestroy { return feature.properties.draw; } }] + }; public geometryType = GeometryType; // Reference to the GeometryType enum @@ -82,6 +85,10 @@ export class DrawComponent implements OnInit, OnDestroy { @Output() strokeColor: string; @Output() strokeWidth: number; + @Output() fontSize: string; + @Output() fontStyle: string; + @Input() fontType: FontType; + @Input() map: IgoMap; // Map to draw on @Input() store: FeatureStore; // Drawing store @@ -101,6 +108,9 @@ export class DrawComponent implements OnInit, OnDestroy { public labelsAreShown: boolean; private subscriptions$$: Subscription[] = []; + public fontSizeForm: string; + public fontStyleForm: string; + public position: string = 'bottom'; public form: FormGroup; public icons: Array; @@ -120,6 +130,10 @@ export class DrawComponent implements OnInit, OnDestroy { this.labelsAreShown = this.drawStyleService.getLabelsAreShown(); this.icons = this.drawIconService.getIcons(); this.icon = this.drawStyleService.getIcon(); + + this.fontSize = this.drawStyleService.getFontSize(); + this.fontStyle = this.drawStyleService.getFontStyle(); + } // Initialize the store that will contain the entities and create the Draw control @@ -274,15 +288,25 @@ export class DrawComponent implements OnInit, OnDestroy { // when dialog box is closed, get label and set it to geometry dialogRef.afterClosed().subscribe((label: string) => { - this.updateLabelOfOlGeometry(olGeometryFeature, label); - - // if event was fired at draw end - if (isDrawEnd) { - this.onDrawEnd(olGeometryFeature); - - // if event was fired at select - } else { - this.onSelectDraw(olGeometryFeature, label); + // checks if the user clicked ok + if (dialogRef.componentInstance.confirmFlag){ + this.updateLabelOfOlGeometry(olGeometryFeature, label); + // if event was fired at draw end + if (isDrawEnd) { + this.onDrawEnd(olGeometryFeature); + // if event was fired at select + } else { + this.onSelectDraw(olGeometryFeature, label); + } + } + // deletes the feature + else { + this.olDrawingLayerSource.getFeatures().forEach(drawingLayerFeature => { + const geometry = drawingLayerFeature.getGeometry() as any; + if (olGeometryFeature === geometry) { + this.olDrawingLayerSource.removeFeature(drawingLayerFeature); + } + }); } }); }, 250); @@ -341,6 +365,7 @@ export class DrawComponent implements OnInit, OnDestroy { const entities = this.store.all(); entities.forEach(entity => { + const entityId = entity.properties.id; const olGeometryId = olGeometry.ol_uid; @@ -361,13 +386,14 @@ export class DrawComponent implements OnInit, OnDestroy { const olGeometryCoordinates = JSON.stringify(olGeometry.getCoordinates()[0]); entities.forEach(entity => { + const entityCoordinates = JSON.stringify(entity.geometry.coordinates[0]); if (olGeometryCoordinates === entityCoordinates) { const rad: number = entity.properties.rad ? entity.properties.rad : undefined; - this.updateLabelOfOlGeometry(olGeometry, label); this.replaceFeatureInStore(entity, olGeometry, rad); + } }); } @@ -500,4 +526,36 @@ export class DrawComponent implements OnInit, OnDestroy { openShorcutsDialog() { this.dialog.open(DrawShorcutsComponent); } + + /** + * Called when the user double-clicks the selected drawing + */ + editLabelDrawing(){ + const olGeometry = featureToOl(this.selectedFeatures$.value[0], this.map.ol.getView().getProjection().getCode()); + this.openDialog(olGeometry, false); + } + + /** + * Called when the user changes the font size or/and style + * @param labelsAreShown wheter the labels are shown or not + * @param size the size of the font + * @param style the style of the font + */ + + onFontChange(labelsAreShown: boolean, size: string, style: FontType) { + this.drawStyleService.setFontSize(size); + this.drawStyleService.setFontStyle(style); + + + this.store.layer.ol.setStyle((feature, resolution) => { + return this.drawStyleService.createDrawingLayerStyle(feature, resolution, labelsAreShown); + }); + this.createDrawControl(); + } + + get allFontStyles(): string[]{ + return Object.values(FontType); + } + + } diff --git a/packages/geo/src/lib/draw/shared/draw-style.service.ts b/packages/geo/src/lib/draw/shared/draw-style.service.ts index e20b56195a..db8fe95e1a 100644 --- a/packages/geo/src/lib/draw/shared/draw-style.service.ts +++ b/packages/geo/src/lib/draw/shared/draw-style.service.ts @@ -4,6 +4,7 @@ import * as OlStyle from 'ol/style'; import OlPoint from 'ol/geom/Point'; import { transform } from 'ol/proj'; import { MapService } from '../../map/shared/map.service'; +import { FontType } from './draw.enum'; @Injectable({ providedIn: 'root' @@ -15,6 +16,8 @@ export class DrawStyleService { private strokeWidth: number = 1; private labelsAreShown = true; private icon: string; + private fontSize: string = '20'; + private fontStyle: string = FontType.Arial.toString(); constructor( private mapService: MapService @@ -56,11 +59,29 @@ export class DrawStyleService { return this.icon; } - createDrawingLayerStyle(feature, resolution, labelsAreShown?: boolean, icon?: string): OlStyle.Style { + // To edit the label of drawing + getFontSize(){ + return this.fontSize; + } + + setFontSize(fontSize: string){ + this.fontSize = fontSize; + } + + getFontStyle(){ + return this.fontStyle; + } + + setFontStyle(fontStyle: string){ + this.fontStyle = fontStyle; + } + + createDrawingLayerStyle(feature, resolution, labelsAreShown?: boolean, icon?: string ): OlStyle.Style { let style; let labelsAreOffset: boolean = false; const proj = this.mapService.getMap().projection; const geom = feature.getGeometry(); + const fontSizeAndStyle = `${this.fontSize}px ${this.fontStyle}`; if (geom instanceof OlPoint) { labelsAreOffset = !labelsAreOffset; @@ -80,7 +101,8 @@ export class DrawStyleService { fill: new OlStyle.Fill({ color: 'black' }), - font: '20px sans-serif', + + font: fontSizeAndStyle, overflow: true }), @@ -110,7 +132,7 @@ export class DrawStyleService { fill: new OlStyle.Fill({ color: 'black' }), - font: '20px sans-serif', + font: fontSizeAndStyle, overflow: true }), @@ -141,7 +163,7 @@ export class DrawStyleService { fill: new OlStyle.Fill({ color: 'black' }), - font: '20px sans-serif', + font: fontSizeAndStyle, overflow: true, offsetY: labelsAreOffset ? -15 : 0 }), diff --git a/packages/geo/src/lib/draw/shared/draw.enum.ts b/packages/geo/src/lib/draw/shared/draw.enum.ts index cea7c8f95a..8796cf0cc7 100644 --- a/packages/geo/src/lib/draw/shared/draw.enum.ts +++ b/packages/geo/src/lib/draw/shared/draw.enum.ts @@ -4,3 +4,19 @@ export enum GeometryType { Polygon = 'Polygon', Circle = 'Circle' } + +export enum FontType { + Arial = 'Arial', + ArialBlack = 'Arial Black', + Verdana = 'Verdana', + Tahoma = 'Tahoma', + TrebuchetMS = 'Trebuchet MS', + Impact = 'Impact', + TimesNewRoman = 'Times New Roman', + Georgia = 'Georgia', + AmericanTypewriter = 'American Typewriter', + Courier = 'Courier', + LucidaConsole = 'Lucida Console', + BrushScriptMT = 'Brush Script MT', + ComicSansMS = 'Comic Sans MS' +} diff --git a/packages/geo/src/locale/en.geo.json b/packages/geo/src/locale/en.geo.json index a5133cdd19..9229ca065d 100644 --- a/packages/geo/src/locale/en.geo.json +++ b/packages/geo/src/locale/en.geo.json @@ -669,7 +669,7 @@ }, "draw": { "abort": "Abort current drawing", - "cancelColorPicker": "Cancel", + "cancel": "Cancel", "Circle": "Circle", "colorPicker": "Click to open the color picker", "dialogInstruction": "Enter your draw's label", @@ -691,7 +691,9 @@ "stroke": "Stroke", "styleSelect": "Select style", "toggleMapTooltips": "Show map tooltips", - "undo": "Remove last vertex" + "undo": "Remove last vertex", + "fontSize": "Font size", + "fontStyle": "Font style" }, "network": { "online": { diff --git a/packages/geo/src/locale/fr.geo.json b/packages/geo/src/locale/fr.geo.json index ec7ca3d2a0..36a1f4b1a7 100644 --- a/packages/geo/src/locale/fr.geo.json +++ b/packages/geo/src/locale/fr.geo.json @@ -669,7 +669,7 @@ }, "draw": { "abort": "Annuler le dessin en cours", - "cancelColorPicker": "Annuler", + "cancel": "Annuler", "Circle": "Cercle", "colorPicker": "Cliquer pour ouvrir le sélecteur de couleurs", "dialogInstruction": "Veuillez entrer l'étiquette de votre dessin", @@ -691,7 +691,9 @@ "stroke": "Contour", "styleSelect": "Sélectionner le style", "toggleMapTooltips": "Afficher les étiquettes", - "undo": "Retirer le dernier sommet" + "undo": "Retirer le dernier sommet", + "fontSize": "Taille de police", + "fontStyle": "Style de police" }, "network": { "online": { From ffdc771fe0fb878e9667ab751eb66c266b320358 Mon Sep 17 00:00:00 2001 From: kalvinkhuu <77596289+kalvinkhuu@users.noreply.github.com> Date: Thu, 2 Jun 2022 17:01:08 -0400 Subject: [PATCH 2/6] formatted the html --- .../geo/src/lib/draw/draw/draw.component.html | 59 ++++++------------- 1 file changed, 18 insertions(+), 41 deletions(-) diff --git a/packages/geo/src/lib/draw/draw/draw.component.html b/packages/geo/src/lib/draw/draw/draw.component.html index d7b7e0f792..1f35c15f60 100644 --- a/packages/geo/src/lib/draw/draw/draw.component.html +++ b/packages/geo/src/lib/draw/draw/draw.component.html @@ -1,9 +1,6 @@
- + {{ 'igo.geo.draw.' + geometryType.Point | translate }} @@ -23,19 +20,15 @@
- + {{ 'igo.geo.spatialFilter.drawControl' | translate }} - {{ 'igo.geo.draw.toggleMapTooltips' | translate }} @@ -73,8 +66,7 @@ [cpCancelButton]="true" [cpCancelButtonText]="'igo.geo.draw.cancel' | translate" [cpOKButton]="true" - (colorPickerChange)="onColorChange(labelsAreShown, false)" - /> + (colorPickerChange)="onColorChange(labelsAreShown, false)"/>
@@ -93,8 +85,7 @@ floatLabel="always" tooltip-position="below" matTooltipShowDelay="500" - [matTooltip]="'igo.geo.draw.colorPicker' | translate" - > + [matTooltip]="'igo.geo.draw.colorPicker' | translate"> {{ strokeColor }} + (colorPickerChange)="onColorChange(labelsAreShown, false)"/>
@@ -132,8 +122,7 @@ + (click)="onIconChange(icon_html)">
@@ -159,10 +148,7 @@ onFontChange( labelsAreShown, $event.target.value, - testFontStyle.value - ) - " - /> + testFontStyle.value)"/> px @@ -173,23 +159,17 @@ + (selectionChange)="onFontChange(labelsAreShown, testFontSize.value, $event.value)"> + [value]="fontSelect"> {{ fontSelect }} - -
@@ -219,15 +198,13 @@ mat-icon-button color="accent" disableRipple="true" - (click)="openShorcutsDialog()" - > + (click)="openShorcutsDialog()"> + [matTooltip]="'igo.geo.draw.shortcuts' | translate"> -
+ \ No newline at end of file From cfb411436b0607fa779cece697e580d12587577e Mon Sep 17 00:00:00 2001 From: kalvinkhuu <77596289+kalvinkhuu@users.noreply.github.com> Date: Thu, 2 Jun 2022 17:02:11 -0400 Subject: [PATCH 3/6] format ts file --- packages/geo/src/lib/draw/draw/draw.component.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/geo/src/lib/draw/draw/draw.component.ts b/packages/geo/src/lib/draw/draw/draw.component.ts index 1c6871d0a8..3f4d837788 100644 --- a/packages/geo/src/lib/draw/draw/draw.component.ts +++ b/packages/geo/src/lib/draw/draw/draw.component.ts @@ -51,7 +51,6 @@ import { createInteractionStyle } from '../shared/draw.utils'; import { transform } from 'ol/proj'; import { DrawIconService } from '../shared/draw-icon.service'; - @Component ({ selector: 'igo-draw', templateUrl: './draw.component.html', @@ -76,7 +75,6 @@ export class DrawComponent implements OnInit, OnDestroy { return feature.properties.draw; } }] - }; public geometryType = GeometryType; // Reference to the GeometryType enum From d9acd2ff465cf3aced9f3f0b1f93f45be060ed32 Mon Sep 17 00:00:00 2001 From: kalvinkhuu <77596289+kalvinkhuu@users.noreply.github.com> Date: Fri, 3 Jun 2022 11:13:11 -0400 Subject: [PATCH 4/6] Fixed some formatting issues --- .../lib/draw/draw/draw-popup.component.html | 5 +- .../src/lib/draw/draw/draw-popup.component.ts | 34 +- .../geo/src/lib/draw/draw/draw.component.html | 112 +++---- .../geo/src/lib/draw/draw/draw.component.scss | 11 + .../geo/src/lib/draw/draw/draw.component.ts | 294 +++++++++++------- .../src/lib/draw/shared/draw-style.service.ts | 49 +-- 6 files changed, 300 insertions(+), 205 deletions(-) diff --git a/packages/geo/src/lib/draw/draw/draw-popup.component.html b/packages/geo/src/lib/draw/draw/draw-popup.component.html index 3f2ecb52b5..45920ab796 100644 --- a/packages/geo/src/lib/draw/draw/draw-popup.component.html +++ b/packages/geo/src/lib/draw/draw/draw-popup.component.html @@ -7,12 +7,11 @@ #input matInput placeholder="{{ 'igo.geo.draw.dialogTitle' | translate }}" - value="{{ data.currentLabel }}" - /> + value="{{ data.currentLabel }}"/>
-
- {{ - 'igo.geo.draw.noIcon' | translate - }} + {{ 'igo.geo.draw.noIcon' | translate }} + -
-
- - {{ 'igo.geo.draw.fontSize' | translate }} - - px - -
-
- - {{ 'igo.geo.draw.fontStyle' | translate }} - - - {{ fontSelect }} - - - -
-
+
+ + {{ 'igo.geo.draw.fontSize' | translate }} + + px + + + {{ 'igo.geo.draw.fontStyle' | translate }} + + + {{ fontSelect }} + + + +
+
@@ -207,4 +207,4 @@ [matTooltip]="'igo.geo.draw.shortcuts' | translate"> - \ No newline at end of file + diff --git a/packages/geo/src/lib/draw/draw/draw.component.scss b/packages/geo/src/lib/draw/draw/draw.component.scss index bde28a6522..8cc00df042 100644 --- a/packages/geo/src/lib/draw/draw/draw.component.scss +++ b/packages/geo/src/lib/draw/draw/draw.component.scss @@ -68,3 +68,14 @@ img { margin-left: 12px; } +.igo-form-font .mat-form-field + .mat-form-field{ + margin-left: 8px; +} + +.igo-form-fontSize{ + width: 150px; +} +.igo-form-fontStyle{ + width: 150px; +} + diff --git a/packages/geo/src/lib/draw/draw/draw.component.ts b/packages/geo/src/lib/draw/draw/draw.component.ts index 3f4d837788..8f91a9d48b 100644 --- a/packages/geo/src/lib/draw/draw/draw.component.ts +++ b/packages/geo/src/lib/draw/draw/draw.component.ts @@ -8,16 +8,16 @@ import { } from '@angular/core'; import { - FEATURE, - FeatureStore, - FeatureStoreSelectionStrategy, - tryBindStoreLayer, - tryAddLoadingStrategy, - tryAddSelectionStrategy, - FeatureMotion, - FeatureStoreLoadingStrategy, - featureToOl - } from '../../feature'; + FEATURE, + FeatureStore, + FeatureStoreSelectionStrategy, + tryBindStoreLayer, + tryAddLoadingStrategy, + tryAddSelectionStrategy, + FeatureMotion, + FeatureStoreLoadingStrategy, + featureToOl +} from '../../feature'; import { LanguageService } from '@igo2/core'; import { MatDialog } from '@angular/material/dialog'; @@ -51,13 +51,12 @@ import { createInteractionStyle } from '../shared/draw.utils'; import { transform } from 'ol/proj'; import { DrawIconService } from '../shared/draw-icon.service'; -@Component ({ +@Component({ selector: 'igo-draw', templateUrl: './draw.component.html', styleUrls: ['./draw.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) - export class DrawComponent implements OnInit, OnDestroy { /** * Table template @@ -69,12 +68,12 @@ export class DrawComponent implements OnInit, OnDestroy { selectionCheckbox: true, sort: true, columns: [{ - name: 'Drawing', - title: this.languageService.translate.instant('igo.geo.draw.labels'), - valueAccessor: (feature: FeatureWithDraw) => { - return feature.properties.draw; - } - }] + name: 'Drawing', + title: this.languageService.translate.instant('igo.geo.draw.labels'), + valueAccessor: (feature: FeatureWithDraw) => { + return feature.properties.draw; + } + }] }; public geometryType = GeometryType; // Reference to the GeometryType enum @@ -98,7 +97,8 @@ export class DrawComponent implements OnInit, OnDestroy { private drawEnd$$: Subscription; private drawSelect$$: Subscription; private olDrawingLayer: VectorLayer; - public selectedFeatures$: BehaviorSubject = new BehaviorSubject([]); + public selectedFeatures$: BehaviorSubject = + new BehaviorSubject([]); public fillForm: string; public strokeForm: string; public drawControlIsDisabled: boolean = true; @@ -108,7 +108,6 @@ export class DrawComponent implements OnInit, OnDestroy { public fontSizeForm: string; public fontStyleForm: string; - public position: string = 'bottom'; public form: FormGroup; public icons: Array; @@ -131,13 +130,16 @@ export class DrawComponent implements OnInit, OnDestroy { this.fontSize = this.drawStyleService.getFontSize(); this.fontStyle = this.drawStyleService.getFontStyle(); - } // Initialize the store that will contain the entities and create the Draw control ngOnInit() { this.initStore(); - this.drawControl = this.createDrawControl(this.fillColor, this.strokeColor, this.strokeWidth); + this.drawControl = this.createDrawControl( + this.fillColor, + this.strokeColor, + this.strokeWidth + ); this.drawControl.setGeometryType(this.geometryType.Point as any); this.toggleDrawControl(); } @@ -148,7 +150,7 @@ export class DrawComponent implements OnInit, OnDestroy { */ ngOnDestroy() { this.drawControl.setOlMap(undefined); - this.subscriptions$$.map(s => s.unsubscribe()); + this.subscriptions$$.map((s) => s.unsubscribe()); } /** @@ -158,14 +160,21 @@ export class DrawComponent implements OnInit, OnDestroy { * @param strokeWidth the stroke width * @returns a Draw Control */ - createDrawControl(fillColor?: string, strokeColor?: string, strokeWidth?: number) { + createDrawControl( + fillColor?: string, + strokeColor?: string, + strokeWidth?: number + ) { const drawControl = new DrawControl({ geometryType: undefined, drawingLayerSource: this.olDrawingLayerSource, drawingLayerStyle: new OlStyle.Style({}), - interactionStyle: createInteractionStyle(fillColor, strokeColor, strokeWidth), + interactionStyle: createInteractionStyle( + fillColor, + strokeColor, + strokeWidth + ) }); - return drawControl; } @@ -183,7 +192,6 @@ export class DrawComponent implements OnInit, OnDestroy { */ private initStore() { this.map.removeLayer(this.olDrawingLayer); - this.olDrawingLayer = new VectorLayer({ isIgoInternalLayer: true, id: 'igo-draw-layer', @@ -191,43 +199,62 @@ export class DrawComponent implements OnInit, OnDestroy { zIndex: 200, source: new FeatureDataSource(), style: (feature, resolution) => { - return this.drawStyleService.createDrawingLayerStyle(feature, resolution, this.labelsAreShown, this.icon); + return this.drawStyleService.createDrawingLayerStyle( + feature, + resolution, + this.labelsAreShown, + this.icon + ); }, showInLayerList: true, exportable: true, browsable: false, workspace: { enabled: false - }, + } }); tryBindStoreLayer(this.store, this.olDrawingLayer); - - tryAddLoadingStrategy(this.store, new FeatureStoreLoadingStrategy({ - motion: FeatureMotion.None - })); - - tryAddSelectionStrategy(this.store, new FeatureStoreSelectionStrategy({ - map: this.map, - motion: FeatureMotion.None, - many: true - })); + tryAddLoadingStrategy( + this.store, + new FeatureStoreLoadingStrategy({ + motion: FeatureMotion.None + }) + ); + tryAddSelectionStrategy( + this.store, + new FeatureStoreSelectionStrategy({ + map: this.map, + motion: FeatureMotion.None, + many: true + }) + ); this.store.layer.visible = true; - this.store.source.ol.on('removefeature', (event: OlVectorSourceEvent) => { - const olGeometry = event.feature.getGeometry(); - this.clearLabelsOfOlGeometry(olGeometry); - }); - - this.subscriptions$$.push(this.store.stateView.manyBy$((record: EntityRecord) => { - return record.state.selected === true; - }).pipe( - skip(1) // Skip initial emission - ).subscribe((records: EntityRecord[]) => { - this.selectedFeatures$.next(records.map(record => record.entity)); - })); - - this.subscriptions$$.push(this.store.count$.subscribe(cnt => { - cnt >= 1 ? this.store.layer.options.showInLayerList = true : this.store.layer.options.showInLayerList = false; - })); + this.store.source.ol.on( + 'removefeature', + (event: OlVectorSourceEvent) => { + const olGeometry = event.feature.getGeometry(); + this.clearLabelsOfOlGeometry(olGeometry); + } + ); + this.subscriptions$$.push( + this.store.stateView + .manyBy$((record: EntityRecord) => { + return record.state.selected === true; + }) + .pipe( + skip(1) // Skip initial emission + ) + .subscribe((records: EntityRecord[]) => { + this.selectedFeatures$.next(records.map((record) => record.entity)); + }) + ); + this.subscriptions$$.push( + this.store.count$.subscribe((cnt) => { + cnt >= 1 + ? (this.store.layer.options.showInLayerList = true) + : (this.store.layer.options.showInLayerList = false); + }) + ); } /** @@ -243,13 +270,21 @@ export class DrawComponent implements OnInit, OnDestroy { if (isAnIcon) { this.store.layer.ol.setStyle((feature, resolution) => { - return this.drawStyleService.createDrawingLayerStyle(feature, resolution, labelsAreShown, this.icon); + return this.drawStyleService.createDrawingLayerStyle( + feature, + resolution, + labelsAreShown, + this.icon + ); }); this.icon = undefined; - } else { this.store.layer.ol.setStyle((feature, resolution) => { - return this.drawStyleService.createDrawingLayerStyle(feature, resolution, labelsAreShown); + return this.drawStyleService.createDrawingLayerStyle( + feature, + resolution, + labelsAreShown + ); }); } this.createDrawControl(); @@ -281,30 +316,32 @@ export class DrawComponent implements OnInit, OnDestroy { // open the dialog box used to enter label const dialogRef = this.dialog.open(DrawPopupComponent, { disableClose: false, - data: {currentLabel: olGeometryFeature.get('draw')} + data: { currentLabel: olGeometryFeature.get('draw') } }); // when dialog box is closed, get label and set it to geometry dialogRef.afterClosed().subscribe((label: string) => { // checks if the user clicked ok - if (dialogRef.componentInstance.confirmFlag){ + if (dialogRef.componentInstance.confirmFlag) { this.updateLabelOfOlGeometry(olGeometryFeature, label); // if event was fired at draw end if (isDrawEnd) { this.onDrawEnd(olGeometryFeature); - // if event was fired at select + // if event was fired at select } else { this.onSelectDraw(olGeometryFeature, label); } } // deletes the feature else { - this.olDrawingLayerSource.getFeatures().forEach(drawingLayerFeature => { - const geometry = drawingLayerFeature.getGeometry() as any; - if (olGeometryFeature === geometry) { - this.olDrawingLayerSource.removeFeature(drawingLayerFeature); - } - }); + this.olDrawingLayerSource + .getFeatures() + .forEach((drawingLayerFeature) => { + const geometry = drawingLayerFeature.getGeometry() as any; + if (olGeometryFeature === geometry) { + this.olDrawingLayerSource.removeFeature(drawingLayerFeature); + } + }); } }); }, 250); @@ -316,18 +353,22 @@ export class DrawComponent implements OnInit, OnDestroy { private activateDrawControl() { this.drawControlIsDisabled = false; this.drawControlIsActive = true; - this.drawEnd$$ = this.drawControl.end$.subscribe((olGeometry: OlGeometry) => { - this.openDialog(olGeometry, true); - }); + this.drawEnd$$ = this.drawControl.end$.subscribe( + (olGeometry: OlGeometry) => { + this.openDialog(olGeometry, true); + } + ); this.drawControl.modify$.subscribe((olGeometry: OlGeometry) => { this.onModifyDraw(olGeometry); }); if (!this.drawSelect$$) { - this.drawSelect$$ = this.drawControl.select$.subscribe((olFeature: OlFeature) => { - this.openDialog(olFeature, false); - }); + this.drawSelect$$ = this.drawControl.select$.subscribe( + (olFeature: OlFeature) => { + this.openDialog(olFeature, false); + } + ); } this.drawControl.setOlMap(this.map.ol, true); @@ -362,8 +403,7 @@ export class DrawComponent implements OnInit, OnDestroy { private onModifyDraw(olGeometry) { const entities = this.store.all(); - entities.forEach(entity => { - + entities.forEach((entity) => { const entityId = entity.properties.id; const olGeometryId = olGeometry.ol_uid; @@ -381,17 +421,19 @@ export class DrawComponent implements OnInit, OnDestroy { const olGeometry = olFeature.getGeometry() as any; olGeometry.ol_uid = olFeature.get('id'); - const olGeometryCoordinates = JSON.stringify(olGeometry.getCoordinates()[0]); - - entities.forEach(entity => { + const olGeometryCoordinates = JSON.stringify( + olGeometry.getCoordinates()[0] + ); + entities.forEach((entity) => { const entityCoordinates = JSON.stringify(entity.geometry.coordinates[0]); if (olGeometryCoordinates === entityCoordinates) { - const rad: number = entity.properties.rad ? entity.properties.rad : undefined; + const rad: number = entity.properties.rad + ? entity.properties.rad + : undefined; this.updateLabelOfOlGeometry(olGeometry, label); this.replaceFeatureInStore(entity, olGeometry, rad); - } }); } @@ -401,7 +443,11 @@ export class DrawComponent implements OnInit, OnDestroy { * will trigger and add the feature to the map. * @internal */ - private addFeatureToStore(olGeometry, radius?: number, feature?: FeatureWithDraw) { + private addFeatureToStore( + olGeometry, + radius?: number, + feature?: FeatureWithDraw + ) { let rad: number; let center4326: Array; let point4326: Array; @@ -421,8 +467,22 @@ export class DrawComponent implements OnInit, OnDestroy { } else { geometry.type = 'Point'; geometry.coordinates = olGeometry.getCenter(); - const extent4326 = transform([olGeometry.getFlatCoordinates()[2], olGeometry.getFlatCoordinates()[3]], projection, 'EPSG:4326'); - center4326 = transform([olGeometry.getFlatCoordinates()[0], olGeometry.getFlatCoordinates()[1]], projection, 'EPSG:4326'); + const extent4326 = transform( + [ + olGeometry.getFlatCoordinates()[2], + olGeometry.getFlatCoordinates()[3] + ], + projection, + 'EPSG:4326' + ); + center4326 = transform( + [ + olGeometry.getFlatCoordinates()[0], + olGeometry.getFlatCoordinates()[1] + ], + projection, + 'EPSG:4326' + ); lon4326 = center4326[0]; lat4326 = center4326[1]; rad = getDistance(center4326, extent4326); @@ -430,7 +490,11 @@ export class DrawComponent implements OnInit, OnDestroy { } if (olGeometry instanceof OlPoint) { - point4326 = transform(olGeometry.getFlatCoordinates(), projection, 'EPSG:4326'); + point4326 = transform( + olGeometry.getFlatCoordinates(), + projection, + 'EPSG:4326' + ); lon4326 = point4326[0]; lat4326 = point4326[1]; } @@ -447,7 +511,7 @@ export class DrawComponent implements OnInit, OnDestroy { rad: rad ? rad : null }, meta: { - id: featureId + id: featureId } }); } @@ -457,7 +521,11 @@ export class DrawComponent implements OnInit, OnDestroy { * @param entity the entity to replace * @param olGeometry the new geometry to insert in the store */ - private replaceFeatureInStore(entity, olGeometry: OlGeometry, radius?: number) { + private replaceFeatureInStore( + entity, + olGeometry: OlGeometry, + radius?: number + ) { this.store.delete(entity); this.onDrawEnd(olGeometry, radius); } @@ -471,8 +539,8 @@ export class DrawComponent implements OnInit, OnDestroy { deleteDrawings() { this.store.deleteMany(this.selectedFeatures$.value); - this.selectedFeatures$.value.forEach(selectedFeature => { - this.olDrawingLayerSource.getFeatures().forEach(drawingLayerFeature => { + this.selectedFeatures$.value.forEach((selectedFeature) => { + this.olDrawingLayerSource.getFeatures().forEach((drawingLayerFeature) => { const geometry = drawingLayerFeature.getGeometry() as any; if (selectedFeature.properties.id === geometry.ol_uid) { this.olDrawingLayerSource.removeFeature(drawingLayerFeature); @@ -486,11 +554,13 @@ export class DrawComponent implements OnInit, OnDestroy { * @param olGeometry OL geometry with tooltips */ private clearLabelsOfOlGeometry(olGeometry) { - getTooltipsOfOlGeometry(olGeometry).forEach((olTooltip: OlOverlay | undefined) => { - if (olTooltip && olTooltip.getMap()) { - this.map.ol.removeOverlay(olTooltip); + getTooltipsOfOlGeometry(olGeometry).forEach( + (olTooltip: OlOverlay | undefined) => { + if (olTooltip && olTooltip.getMap()) { + this.map.ol.removeOverlay(olTooltip); + } } - }); + ); } /** @@ -499,8 +569,10 @@ export class DrawComponent implements OnInit, OnDestroy { onToggleLabels() { this.drawStyleService.toggleLabelsAreShown(); this.labelsAreShown = !this.labelsAreShown; - this.icon ? this.onColorChange(this.labelsAreShown, true) : this.onColorChange(this.labelsAreShown, false); - } + this.icon + ? this.onColorChange(this.labelsAreShown, true) + : this.onColorChange(this.labelsAreShown, false); + } /** * Update the label of a geometry when a label is entered in a dialog box @@ -508,16 +580,24 @@ export class DrawComponent implements OnInit, OnDestroy { * @param label the label */ private updateLabelOfOlGeometry(olGeometry: OlGeometry, label: string) { - olGeometry.setProperties({ - _label: label - }, true); + olGeometry.setProperties( + { + _label: label + }, + true + ); } onIconChange(event?) { this.icon = event; this.drawStyleService.setIcon(this.icon); this.store.layer.ol.setStyle((feature, resolution) => { - return this.drawStyleService.createDrawingLayerStyle(feature, resolution, true, this.icon); + return this.drawStyleService.createDrawingLayerStyle( + feature, + resolution, + true, + this.icon + ); }); } @@ -528,8 +608,11 @@ export class DrawComponent implements OnInit, OnDestroy { /** * Called when the user double-clicks the selected drawing */ - editLabelDrawing(){ - const olGeometry = featureToOl(this.selectedFeatures$.value[0], this.map.ol.getView().getProjection().getCode()); + editLabelDrawing() { + const olGeometry = featureToOl( + this.selectedFeatures$.value[0], + this.map.ol.getView().getProjection().getCode() + ); this.openDialog(olGeometry, false); } @@ -544,16 +627,17 @@ export class DrawComponent implements OnInit, OnDestroy { this.drawStyleService.setFontSize(size); this.drawStyleService.setFontStyle(style); - this.store.layer.ol.setStyle((feature, resolution) => { - return this.drawStyleService.createDrawingLayerStyle(feature, resolution, labelsAreShown); + return this.drawStyleService.createDrawingLayerStyle( + feature, + resolution, + labelsAreShown + ); }); this.createDrawControl(); } - get allFontStyles(): string[]{ + get allFontStyles(): string[] { return Object.values(FontType); } - - } diff --git a/packages/geo/src/lib/draw/shared/draw-style.service.ts b/packages/geo/src/lib/draw/shared/draw-style.service.ts index db8fe95e1a..c97d803c0d 100644 --- a/packages/geo/src/lib/draw/shared/draw-style.service.ts +++ b/packages/geo/src/lib/draw/shared/draw-style.service.ts @@ -7,10 +7,9 @@ import { MapService } from '../../map/shared/map.service'; import { FontType } from './draw.enum'; @Injectable({ - providedIn: 'root' - }) + providedIn: 'root' +}) export class DrawStyleService { - private fillColor = 'rgba(255,255,255,0.4)'; private strokeColor = 'rgba(143,7,7,1)'; private strokeWidth: number = 1; @@ -19,9 +18,7 @@ export class DrawStyleService { private fontSize: string = '20'; private fontStyle: string = FontType.Arial.toString(); - constructor( - private mapService: MapService - ) {} + constructor(private mapService: MapService) {} getFillColor(): string { return this.fillColor; @@ -60,23 +57,28 @@ export class DrawStyleService { } // To edit the label of drawing - getFontSize(){ + getFontSize() { return this.fontSize; } - setFontSize(fontSize: string){ + setFontSize(fontSize: string) { this.fontSize = fontSize; } - getFontStyle(){ + getFontStyle() { return this.fontStyle; } - setFontStyle(fontStyle: string){ + setFontStyle(fontStyle: string) { this.fontStyle = fontStyle; } - createDrawingLayerStyle(feature, resolution, labelsAreShown?: boolean, icon?: string ): OlStyle.Style { + createDrawingLayerStyle( + feature, + resolution, + labelsAreShown?: boolean, + icon?: string + ): OlStyle.Style { let style; let labelsAreOffset: boolean = false; const proj = this.mapService.getMap().projection; @@ -89,8 +91,11 @@ export class DrawStyleService { // if feature is a circle if (feature.get('rad')) { - const coordinates = transform(feature.getGeometry().flatCoordinates, proj, 'EPSG:4326'); - + const coordinates = transform( + feature.getGeometry().flatCoordinates, + proj, + 'EPSG:4326' + ); style = new OlStyle.Style({ text: new OlStyle.Text({ text: labelsAreShown ? feature.get('draw') : '', @@ -101,13 +106,14 @@ export class DrawStyleService { fill: new OlStyle.Fill({ color: 'black' }), - font: fontSizeAndStyle, overflow: true }), - image: new OlStyle.Circle({ - radius: feature.get('rad') / Math.cos((Math.PI / 180) * coordinates[1]) / resolution, + radius: + feature.get('rad') / + Math.cos((Math.PI / 180) * coordinates[1]) / + resolution, stroke: new OlStyle.Stroke({ color: this.strokeColor, width: this.strokeWidth @@ -118,8 +124,7 @@ export class DrawStyleService { }) }); return style; - - // if feature is an icon + // if feature is an icon } else if (icon) { style = new OlStyle.Style({ text: new OlStyle.Text({ @@ -135,23 +140,19 @@ export class DrawStyleService { font: fontSizeAndStyle, overflow: true }), - stroke: new OlStyle.Stroke({ color: this.strokeColor, width: this.strokeWidth }), - - fill: new OlStyle.Fill({ + fill: new OlStyle.Fill({ color: this.fillColor }), - image: new OlStyle.Icon({ src: icon }) }); return style; - - // if feature is a point, a linestring or a polygon + // if feature is a point, a linestring or a polygon } else { style = new OlStyle.Style({ text: new OlStyle.Text({ From eb6b73b3eb83ca28b3e8897732e11e93f49b5cb8 Mon Sep 17 00:00:00 2001 From: kalvinkhuu <77596289+kalvinkhuu@users.noreply.github.com> Date: Fri, 3 Jun 2022 13:39:04 -0400 Subject: [PATCH 5/6] Redid design of the inputs box --- packages/geo/src/lib/draw/draw/draw.component.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/geo/src/lib/draw/draw/draw.component.scss b/packages/geo/src/lib/draw/draw/draw.component.scss index 8cc00df042..eff37d048b 100644 --- a/packages/geo/src/lib/draw/draw/draw.component.scss +++ b/packages/geo/src/lib/draw/draw/draw.component.scss @@ -69,10 +69,11 @@ img { } .igo-form-font .mat-form-field + .mat-form-field{ - margin-left: 8px; + margin-left: 18px; } .igo-form-fontSize{ + left: 10px !important; width: 150px; } .igo-form-fontStyle{ From fb7d92d9ce4c5ae7ce982c1c39238a42313e90d1 Mon Sep 17 00:00:00 2001 From: kalvinkhuu <77596289+kalvinkhuu@users.noreply.github.com> Date: Tue, 7 Jun 2022 16:10:55 -0400 Subject: [PATCH 6/6] Reformatting --- .../geo/src/lib/draw/draw/draw.component.html | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/packages/geo/src/lib/draw/draw/draw.component.html b/packages/geo/src/lib/draw/draw/draw.component.html index f9e61a1e73..933208e4f1 100644 --- a/packages/geo/src/lib/draw/draw/draw.component.html +++ b/packages/geo/src/lib/draw/draw/draw.component.html @@ -74,8 +74,7 @@
- - + {{ 'igo.geo.draw.stroke' | translate }} @@ -86,9 +85,7 @@ tooltip-position="below" matTooltipShowDelay="500" [matTooltip]="'igo.geo.draw.colorPicker' | translate"> - {{ strokeColor }} - + (colorPickerChange)="onColorChange(labelsAreShown, false)">
@@ -115,18 +111,16 @@
- +
- {{ 'igo.geo.draw.noIcon' | translate }} - + {{ 'igo.geo.draw.noIcon' | translate }}
- +