-
{{ 'igo.geo.draw.dialogInstruction' | translate }}
-
-
-
+
+
+
+ Custom
+
+
+ Coordinates
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ 'igo.geo.draw.dialogInstruction' | translate }}
+
+
+
+
+
+
+
+
+
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 2b515c1496..d33e073908 100644
--- a/packages/geo/src/lib/draw/draw/draw-popup.component.ts
+++ b/packages/geo/src/lib/draw/draw/draw-popup.component.ts
@@ -1,5 +1,6 @@
import { Component, Inject, Input } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { LabelType } from '../shared/draw.enum'
export interface DialogData {
label: string;
@@ -12,11 +13,12 @@ export interface DialogData {
})
export class DrawPopupComponent {
@Input() confirmFlag: boolean = false;
- @Input() coordinatesFlag: boolean = false;
+ @Input() coordinatesFlag: LabelType = LabelType.Custom;
+ public labelType = LabelType;
constructor(
public dialogRef: MatDialogRef
,
- @Inject(MAT_DIALOG_DATA) public data: { currentLabel: string, canUseCoordinateLabel?: boolean}
+ @Inject(MAT_DIALOG_DATA) public data: { currentLabel: string, canUseCoordinateLabel: boolean, coordinates: string}
){}
cancelDrawing() {
@@ -26,10 +28,20 @@ export class DrawPopupComponent {
this.confirmFlag = true;
this.dialogRef.close(labelString);
}
- confirmCoordinatesLabel(){
- this.confirmFlag = true;
- this.coordinatesFlag = true;
- this.dialogRef.close();
+ onLabelTypeChange(labelType: LabelType){
+ console.log(labelType);
+ this.coordinatesFlag = labelType;
+ }
+
+ getLabel(){
+ if (this.coordinatesFlag == LabelType.Coordinates){
+ return this.data.coordinates;
+ }
+ else{
+ return this.data.currentLabel? this.data.currentLabel: '';
+ }
+
}
+
}
diff --git a/packages/geo/src/lib/draw/draw/draw.component.ts b/packages/geo/src/lib/draw/draw/draw.component.ts
index aa5078f53d..bbf2927d59 100644
--- a/packages/geo/src/lib/draw/draw/draw.component.ts
+++ b/packages/geo/src/lib/draw/draw/draw.component.ts
@@ -22,7 +22,7 @@ import {
import { LanguageService } from '@igo2/core';
import { MatDialog } from '@angular/material/dialog';
-import { FontType, GeometryType } from '../shared/draw.enum';
+import { FontType, GeometryType, LabelType } from '../shared/draw.enum';
import { IgoMap } from '../../map/shared/map';
import { BehaviorSubject, Subscription } from 'rxjs';
import { Draw, FeatureWithDraw } from '../shared/draw.interface';
@@ -318,10 +318,18 @@ export class DrawComponent implements OnInit, OnDestroy {
private openDialog(olGeometry, isDrawEnd: boolean) {
setTimeout(() => {
+ const projection = this.map.ol.getView().getProjection();
+ let point4326 = transform(
+ olGeometry.getFlatCoordinates(),
+ projection,
+ 'EPSG:4326'
+ );
+ let coordinateLabel = '('+point4326[1].toFixed(4) + ', ' + point4326[0].toFixed(4) +')';
+
// open the dialog box used to enter label
const dialogRef = this.dialog.open(DrawPopupComponent, {
disableClose: false,
- data: { currentLabel: olGeometry.get('draw'), canUseCoordinateLabel: this.isPointOrCircle(olGeometry)}
+ data: { currentLabel: olGeometry.get('draw'), canUseCoordinateLabel: this.isPointOrCircle(olGeometry), coordinates: coordinateLabel}
});
// if (olGeometryFeature.geometryType){}
@@ -330,15 +338,8 @@ export class DrawComponent implements OnInit, OnDestroy {
dialogRef.afterClosed().subscribe((label: string) => {
// checks if the user clicked ok
if (dialogRef.componentInstance.confirmFlag) {
- let coordinateLabel = undefined;
- if (dialogRef.componentInstance.coordinatesFlag){
- const projection = this.map.ol.getView().getProjection();
- let point4326 = transform(
- olGeometry.getFlatCoordinates(),
- projection,
- 'EPSG:4326'
- );
- coordinateLabel = '('+point4326[1].toFixed(3) + ', ' + point4326[0].toFixed(3) +')';
+ if (dialogRef.componentInstance.coordinatesFlag === LabelType.Coordinates){
+
this.updateLabelOfOlGeometry(olGeometry, coordinateLabel);
olGeometry.setProperties(
{
@@ -373,7 +374,7 @@ export class DrawComponent implements OnInit, OnDestroy {
this.onDrawEnd(olGeometry);
// if event was fired at select
} else {
- coordinateLabel ? this.onSelectDraw(olGeometry, coordinateLabel):this.onSelectDraw(olGeometry, label) ;
+ olGeometry.properties.isCoordinatesLabel_ ? this.onSelectDraw(olGeometry, coordinateLabel):this.onSelectDraw(olGeometry, label) ;
}
this.updateHeightTable();
}
@@ -415,7 +416,7 @@ export class DrawComponent implements OnInit, OnDestroy {
if (entityId === olGeometryId) {
entity.properties.coordinateLabel ?
- this.updateLabelOfOlGeometry(olGeometry, '('+entity.properties.latitude.toFixed(3) + ', ' + entity.properties.longitude.toFixed(3)+')') :
+ this.updateLabelOfOlGeometry(olGeometry, '('+entity.properties.latitude.toFixed(4) + ', ' + entity.properties.longitude.toFixed(4)+')') :
this.updateLabelOfOlGeometry(olGeometry, entity.properties.draw);
this.updateFontSizeAndStyle(
olGeometry,
diff --git a/packages/geo/src/lib/draw/shared/draw.enum.ts b/packages/geo/src/lib/draw/shared/draw.enum.ts
index 8796cf0cc7..eb7970ba4e 100644
--- a/packages/geo/src/lib/draw/shared/draw.enum.ts
+++ b/packages/geo/src/lib/draw/shared/draw.enum.ts
@@ -20,3 +20,8 @@ export enum FontType {
BrushScriptMT = 'Brush Script MT',
ComicSansMS = 'Comic Sans MS'
}
+
+export enum LabelType{
+ Coordinates = 'Coordinates',
+ Custom = 'Custom'
+}
From e125a0f8d79971cadc76cbada15ea5e3ac05aed8 Mon Sep 17 00:00:00 2001
From: kalvinkhuu <77596289+kalvinkhuu@users.noreply.github.com>
Date: Thu, 14 Jul 2022 16:48:54 -0400
Subject: [PATCH 56/84] Working logic with editLabel
---
.../lib/draw/draw/draw-popup.component.html | 10 +--
.../src/lib/draw/draw/draw-popup.component.ts | 2 +-
.../geo/src/lib/draw/draw/draw.component.ts | 77 +++++++++++++------
.../geo/src/lib/draw/shared/draw.interface.ts | 2 +-
4 files changed, 60 insertions(+), 31 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 ebd2c4cc5e..8de48c90e0 100644
--- a/packages/geo/src/lib/draw/draw/draw-popup.component.html
+++ b/packages/geo/src/lib/draw/draw/draw-popup.component.html
@@ -1,12 +1,12 @@
+ (change)="onLabelTypeChange($event.value)" [value]="labelType.Coordinates">
+
+ General
+
Custom
-
- Coordinates
-
@@ -16,7 +16,7 @@
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 d33e073908..cce65f2860 100644
--- a/packages/geo/src/lib/draw/draw/draw-popup.component.ts
+++ b/packages/geo/src/lib/draw/draw/draw-popup.component.ts
@@ -13,7 +13,7 @@ export interface DialogData {
})
export class DrawPopupComponent {
@Input() confirmFlag: boolean = false;
- @Input() coordinatesFlag: LabelType = LabelType.Custom;
+ @Input() coordinatesFlag: LabelType = LabelType.Coordinates;
public labelType = LabelType;
constructor(
diff --git a/packages/geo/src/lib/draw/draw/draw.component.ts b/packages/geo/src/lib/draw/draw/draw.component.ts
index bbf2927d59..4ad42763b9 100644
--- a/packages/geo/src/lib/draw/draw/draw.component.ts
+++ b/packages/geo/src/lib/draw/draw/draw.component.ts
@@ -317,14 +317,21 @@ export class DrawComponent implements OnInit, OnDestroy {
*/
private openDialog(olGeometry, isDrawEnd: boolean) {
setTimeout(() => {
+ let coordinateLabel = undefined;
+ if (olGeometry instanceof OlFeature){
+ coordinateLabel = '(' + olGeometry.get('latitude').toFixed(4) + ', ' + olGeometry.get('longitude').toFixed(4) + ')';
+ }
+ else{
+ const projection = this.map.ol.getView().getProjection();
+ let point4326 = transform(
+ olGeometry.getFlatCoordinates(),
+ projection,
+ 'EPSG:4326'
+ );
+ coordinateLabel =
+ '(' + point4326[1].toFixed(4) + ', ' + point4326[0].toFixed(4) + ')';
+ }
- const projection = this.map.ol.getView().getProjection();
- let point4326 = transform(
- olGeometry.getFlatCoordinates(),
- projection,
- 'EPSG:4326'
- );
- let coordinateLabel = '('+point4326[1].toFixed(4) + ', ' + point4326[0].toFixed(4) +')';
// open the dialog box used to enter label
const dialogRef = this.dialog.open(DrawPopupComponent, {
@@ -339,17 +346,12 @@ export class DrawComponent implements OnInit, OnDestroy {
// checks if the user clicked ok
if (dialogRef.componentInstance.confirmFlag) {
if (dialogRef.componentInstance.coordinatesFlag === LabelType.Coordinates){
-
this.updateLabelOfOlGeometry(olGeometry, coordinateLabel);
- olGeometry.setProperties(
- {
- isCoordinatesLabel_: true
- },
- true
- );
+ this.updateIsCoordinatesLabel(olGeometry, true);
}
else{
this.updateLabelOfOlGeometry(olGeometry, label);
+ this.updateIsCoordinatesLabel(olGeometry, false);
}
if (!olGeometry.values_.fontStyle) {
this.updateFontSizeAndStyle(olGeometry, '20', FontType.Arial);
@@ -374,7 +376,7 @@ export class DrawComponent implements OnInit, OnDestroy {
this.onDrawEnd(olGeometry);
// if event was fired at select
} else {
- olGeometry.properties.isCoordinatesLabel_ ? this.onSelectDraw(olGeometry, coordinateLabel):this.onSelectDraw(olGeometry, label) ;
+ olGeometry.values_.isCoordinatesLabel_ ? this.onSelectDraw(olGeometry, coordinateLabel):this.onSelectDraw(olGeometry, label) ;
}
this.updateHeightTable();
}
@@ -407,7 +409,8 @@ export class DrawComponent implements OnInit, OnDestroy {
private onModifyDraw(olGeometry) {
const entities = this.activeStore.all();
-
+ console.log(entities);
+
entities.forEach((entity) => {
const entityId = entity.properties.id;
@@ -418,6 +421,10 @@ export class DrawComponent implements OnInit, OnDestroy {
entity.properties.coordinateLabel ?
this.updateLabelOfOlGeometry(olGeometry, '('+entity.properties.latitude.toFixed(4) + ', ' + entity.properties.longitude.toFixed(4)+')') :
this.updateLabelOfOlGeometry(olGeometry, entity.properties.draw);
+ this.updateIsCoordinatesLabel(
+ olGeometry,
+ entity.properties.coordinateLabel
+ )
this.updateFontSizeAndStyle(
olGeometry,
entity.properties.fontStyle.split(' ')[0].replace('px', ''),
@@ -467,6 +474,8 @@ export class DrawComponent implements OnInit, OnDestroy {
const offsetX = olFeature.get('offsetX');
const offsetY = olFeature.get('offsetY');
+ const isCoordinatesLabel = olFeature.get('isCoordinatesLabel_');
+
const rad: number = entity.properties.rad
? entity.properties.rad
: undefined;
@@ -474,6 +483,7 @@ export class DrawComponent implements OnInit, OnDestroy {
this.updateFontSizeAndStyle(olGeometry, fontSize, fontStyle);
this.updateFillAndStrokeColor(olGeometry, fillColor, strokeColor);
this.updateOffset(olGeometry, offsetX, offsetY);
+ this.updateIsCoordinatesLabel(olGeometry, isCoordinatesLabel)
this.replaceFeatureInStore(entity, olGeometry, rad);
}
});
@@ -540,6 +550,8 @@ export class DrawComponent implements OnInit, OnDestroy {
lat4326 = point4326[1];
}
+ console.log(olGeometry);
+
this.activeStore.update({
type: FEATURE,
geometry,
@@ -612,11 +624,11 @@ export class DrawComponent implements OnInit, OnDestroy {
*/
editLabelDrawing() {
if (this.selectedFeatures$.value.length) {
- const olGeometry = featureToOl(
+ const olGeometryFeature = featureToOl(
this.selectedFeatures$.value[0],
this.map.ol.getView().getProjection().getCode()
- );
- this.openDialog(olGeometry, false);
+ );
+ this.openDialog(olGeometryFeature, false);
}
}
@@ -880,11 +892,11 @@ export class DrawComponent implements OnInit, OnDestroy {
/**
* Update the label of a geometry when a label is entered in a dialog box
- * @param olGeometry the geometry
+ * @param OlFeature the feature
* @param label the label
*/
- private updateLabelOfOlGeometry(olGeometry: OlGeometry, label: string) {
- olGeometry.setProperties(
+ private updateLabelOfOlGeometry(OlFeature: OlFeature
, label: string) {
+ OlFeature.setProperties(
{
_label: label
},
@@ -933,6 +945,19 @@ export class DrawComponent implements OnInit, OnDestroy {
);
}
+ private updateIsCoordinatesLabel(
+ olFeature: OlFeature,
+ isCoordinatesLabel: boolean
+ ){
+ olFeature.setProperties(
+ {
+ isCoordinatesLabel_: isCoordinatesLabel
+ },
+ true
+ );
+
+ }
+
// Updates values of the selected element on the HTML view
getFeatureFontSize(): string {
@@ -1114,7 +1139,11 @@ export class DrawComponent implements OnInit, OnDestroy {
}
}
- isPointOrCircle(olGeometry: OlGeometry){
- return (olGeometry instanceof OlPoint || olGeometry instanceof OlCircle);
+ isPointOrCircle(olGeometry){
+ let tempOlGeometry = olGeometry;
+ if (olGeometry instanceof OlFeature){
+ tempOlGeometry = olGeometry.getGeometry();
+ }
+ return (tempOlGeometry instanceof OlPoint || tempOlGeometry instanceof OlCircle);
}
}
diff --git a/packages/geo/src/lib/draw/shared/draw.interface.ts b/packages/geo/src/lib/draw/shared/draw.interface.ts
index e193e65b8c..84f78bd45e 100644
--- a/packages/geo/src/lib/draw/shared/draw.interface.ts
+++ b/packages/geo/src/lib/draw/shared/draw.interface.ts
@@ -26,7 +26,7 @@ export interface FeatureWithDrawProperties {
longitude: number;
latitude: number;
rad: number;
- coordinateLabel?: boolean;
+ coordinateLabel: boolean;
fontStyle: string;
drawingStyle: DrawingStyle;
offsetX: number;
From c628bc39271ffec0a27ae36e04fb0a51a1b3d22b Mon Sep 17 00:00:00 2001
From: kalvinkhuu <77596289+kalvinkhuu@users.noreply.github.com>
Date: Mon, 18 Jul 2022 13:01:04 -0400
Subject: [PATCH 57/84] Added vocab and modified UI
---
packages/geo/src/lib/draw/draw/draw-popup.component.html | 5 +++--
packages/geo/src/locale/en.geo.json | 4 +++-
packages/geo/src/locale/fr.geo.json | 4 +++-
3 files changed, 9 insertions(+), 4 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 8de48c90e0..34187a17a2 100644
--- a/packages/geo/src/lib/draw/draw/draw-popup.component.html
+++ b/packages/geo/src/lib/draw/draw/draw-popup.component.html
@@ -2,16 +2,17 @@
- General
+ {{ 'igo.geo.draw.built-in' | translate }}
- Custom
+ {{ 'igo.geo.draw.custom' | translate }}