fix(geometry): issue when changing the geometry type in the geoemtry …

…field
infra-geo-ouverte · Apr 10, 2019 · 648dd96 · 648dd96
1 parent 54b7f5d
commit 648dd96
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 29 deletions.
diff --git a/packages/common/src/lib/form/form-group/form-group.component.ts b/packages/common/src/lib/form/form-group/form-group.component.ts
@@ -1,8 +1,6 @@
 import {
   Component,
   Input,
-  Output,
-  EventEmitter,
   ChangeDetectionStrategy
 } from '@angular/core';
 
@@ -26,11 +24,6 @@ export class FormGroupComponent {
    */
   @Input() group: FormFieldGroup;
 
-  /**
-   * Event emitted when the form control changes
-   */
-  @Output() formControlChanges = new EventEmitter<void>();
-
   constructor() {}
 
   /**

diff --git a/packages/geo/src/lib/geometry/geometry-form-field/geometry-form-field-input.component.ts b/packages/geo/src/lib/geometry/geometry-form-field/geometry-form-field-input.component.ts
@@ -3,7 +3,6 @@ import {
   Input,
   OnInit,
   OnDestroy,
-  HostBinding,
   Optional,
   Self,
   ChangeDetectorRef,
@@ -68,7 +67,6 @@ export class GeometryFormFieldInputComponent implements OnInit, OnDestroy, Contr
     if (this.ready === false) {
       return;
     }
-
     this.deactivateControl();
     this.createDrawControl();
     this.toggleControl();

diff --git a/packages/geo/src/lib/geometry/geometry-form-field/geometry-form-field.component.html b/packages/geo/src/lib/geometry/geometry-form-field/geometry-form-field.component.html
@@ -7,35 +7,33 @@
 
 <div *ngIf="geometryTypeField" class="geometry-type-toggle">
   <mat-button-toggle-group
-    [value]="geometryType$ | async"
     [disabled]="(value$ | async) !== undefined"
-    (change)="onGeometryTypeChange($event.value)">
+    [ngModel]="geometryTypeModel"
+    (ngModelChange)="onGeometryTypeChange($event)">
     <mat-button-toggle
-      [value]="'Point'"
+      value="Point"
       [disabled]="geometryTypes.indexOf('Point') < 0">
       {{'igo.geo.geometry.point' | translate}}
     </mat-button-toggle>
     <mat-button-toggle
-      [value]="'LineString'"
+      value="LineString"
       [disabled]="geometryTypes.indexOf('LineString') < 0">
       {{'igo.geo.geometry.line' | translate}}
     </mat-button-toggle>
     <mat-button-toggle
-      [value]="'Polygon'"
+      value="Polygon"
       [disabled]="geometryTypes.indexOf('Polygon') < 0">
       {{'igo.geo.geometry.polygon' | translate}}
     </mat-button-toggle>
   </mat-button-toggle-group>
 </div>
 
-<mat-form-field
-  *ngIf="drawGuideField"
-  class="draw-guide-field">
+<mat-form-field *ngIf="drawGuideField" class="draw-guide-field">
   <input
     matInput
     type="number"
     [placeholder]="drawGuidePlaceholder"
-    [ngModel]="drawGuide"
+    [ngModel]="drawGuideModel"
     (ngModelChange)="onDrawGuideChange($event)">
   <mat-icon
     matPrefix

diff --git a/packages/geo/src/lib/geometry/geometry-form-field/geometry-form-field.component.ts b/packages/geo/src/lib/geometry/geometry-form-field/geometry-form-field.component.ts
@@ -4,6 +4,7 @@ import {
   OnInit,
   OnDestroy,
   ChangeDetectionStrategy,
+  ChangeDetectorRef
 } from '@angular/core';
 import { FormControl } from '@angular/forms';
 
@@ -29,9 +30,9 @@ import { GeoJSONGeometry } from '../shared/geometry.interfaces';
 })
 export class GeometryFormFieldComponent implements OnInit, OnDestroy {
 
-  public geometryType$: BehaviorSubject<OlGeometryType> = new BehaviorSubject(undefined);
-  public drawGuide$: BehaviorSubject<number> = new BehaviorSubject(0);
-  public value$: BehaviorSubject<GeoJSONGeometry> = new BehaviorSubject(undefined);
+  geometryType$: BehaviorSubject<OlGeometryType> = new BehaviorSubject(undefined);
+  drawGuide$: BehaviorSubject<number> = new BehaviorSubject(0);
+  value$: BehaviorSubject<GeoJSONGeometry> = new BehaviorSubject(undefined);
 
   private value$$: Subscription;
 
@@ -48,9 +49,7 @@ export class GeometryFormFieldComponent implements OnInit, OnDestroy {
   /**
    * The geometry type
    */
-  @Input()
-  set geometryType(value: OlGeometryType) { this.geometryType$.next(value); }
-  get geometryType(): OlGeometryType { return this.geometryType$.value; }
+  @Input() geometryType: OlGeometryType;
 
   /**
    * Whether a geometry type toggle should be displayed
@@ -70,20 +69,34 @@ export class GeometryFormFieldComponent implements OnInit, OnDestroy {
   /**
    * The drawGuide around the mouse pointer to help drawing
    */
-  @Input()
-  set drawGuide(value: number) { this.drawGuide$.next(value); }
-  get drawGuide(): number { return this.drawGuide$.value; }
+  @Input() drawGuide: number = 0;
 
   /**
    * Draw guide placeholder
    */
   @Input() drawGuidePlaceholder: string = '';
 
+  /**
+   * The geometry type model
+   */
+  set geometryTypeModel(value: OlGeometryType) {this.geometryType$.next(value); }
+  get geometryTypeModel(): OlGeometryType { return this.geometryType$.value; }
+
+  /**
+   * The draw guide model
+   */
+  set drawGuideModel(value: number) {this.drawGuide$.next(value); }
+  get drawGuideModel(): number { return this.drawGuide$.value; }
+
+  constructor(private cdRef: ChangeDetectorRef) {}
+
   /**
    * Set up a value stream
    * @internal
    */
   ngOnInit() {
+    this.geometryType$.next(this.geometryType);
+    this.drawGuide$.next(this.drawGuide);
     this.value$.next(this.formControl.value ? this.formControl.value : undefined);
     this.value$$ = this.formControl.valueChanges.subscribe((value: GeoJSONGeometry) => {
       this.value$.next(value ? value : undefined);
@@ -102,11 +115,11 @@ export class GeometryFormFieldComponent implements OnInit, OnDestroy {
     if (this.value$.value !== undefined) {
       return;
     }
-    this.geometryType = geometryType;
+    this.geometryType$.next(geometryType);
   }
 
   onDrawGuideChange(value: number) {
-    this.drawGuide = value;
+    this.drawGuide$.next(value);
   }
 
 }