cancle area selection

src/app/bc-info/bc-info.component.html

@@ -13,8 +13,18 @@ Data URL: {{bcInfoService.dataUrl}} -->
             <p>Asset: {{assetId}}</p>
             <p>Balance: {{userBalance}}</p>
         </span>
-        <button type="button" class="btn btn-primary" (click)="onChooseArea()">Confirm area</button>        
-        <p>Extent: {{extent}}</p>
-        <p>Price: {{price}}</p>
+        <hr>     
+        <button *ngIf="!selectingArea" type="button" class="btn btn-primary" (click)="onSelectArea()">Select area</button>        
+        <div *ngIf="selectingArea">
+            <span>
+                <p>Extent: {{extent}}</p>
+                <p>Price: {{price}}</p>
+            </span>
+            <div >
+                <button type="button" class="btn btn-success">Buy</button>        
+                <button type="button" class="btn btn-danger" (click)="onCancel()">Cancel</button>        
+            </div>
+        </div>
+        
     </div>
 </div>

src/app/bc-info/bc-info.component.ts

@@ -1,11 +1,16 @@
-import { Component, OnInit, ViewRef } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  ViewRef
+} from '@angular/core';
 
-import ExtentIteraction from 'ol/interaction/Extent'
+import {EventsKey} from 'ol/events'
+import ExtentIteraction, { ExtentEvent } from 'ol/interaction/Extent'
 import { shiftKeyOnly } from 'ol/events/condition';
 import {
-  Extent,
+  Extent,  
   getArea
- } from 'ol/extent'
+} from 'ol/extent'
 
 import {
   HsMapService,
@@ -22,12 +27,12 @@ import { BcInfoService } from './bc-info.service';
 export class BcInfoComponent implements HsPanelComponent, OnInit {
   private extentIteraction: ExtentIteraction;
 
-  choosingArea: boolean = false;
+  selectingArea: boolean = false;
 
   user: string = 'kunickyd@test';
   assetId: string = "coin#test"
   userPrivateKey: string = '5ee90333f04f42f457f2d10f1cbd7ec870b041184074dce2b744aa17e67b1e9a';
-  userBalance: number;    
+  userBalance: number;
   extent: Extent;
   price: number;
 
@@ -40,8 +45,9 @@ export class BcInfoComponent implements HsPanelComponent, OnInit {
     private mapService: HsMapService,
     private hsLayoutService: HsLayoutService
   ) {
-    this.extentIteraction = new ExtentIteraction({ condition: shiftKeyOnly });    
+    this.extentIteraction = new ExtentIteraction({ condition: shiftKeyOnly });
   }
+
   async ngOnInit(): Promise<void> {
     this.userBalance = await this.bcInfoService.getUserBalance(this.user, this.userPrivateKey, this.assetId);
   }
@@ -50,19 +56,39 @@ export class BcInfoComponent implements HsPanelComponent, OnInit {
     return this.hsLayoutService.panelVisible(this.name);
   }
 
-  onChooseArea(): void {
+  onSelectArea(): void {
     let map = this.mapService.getMap();
-    
-    this.choosingArea = true;
-    
-    map.getTargetElement().addEventListener("mouseup", async (event) => {
-      if(this.extent){
-        this.price = await this.bcInfoService.getPrice(getArea(this.extent)); 
-      }        
-    });
 
-    this.extentIteraction.on("extentchanged", (event) => this.extent = event.extent);
+    this.selectingArea = true;
+
+    map.getTargetElement().addEventListener("mouseup", this.onMouseUp.bind(this));
+    this.extentIteraction.on("extentchanged", this.onExtentChanged.bind(this));
 
     map.addInteraction(this.extentIteraction);
   }
+
+  onCancel(): void{
+    let map = this.mapService.getMap();
+
+    this.extent = this.price = null;
+    this.extentIteraction.setExtent(null);
+    
+    map.getTargetElement().removeEventListener("mouseup", this.onMouseUp);
+    this.extentIteraction.un("extentchanged", this.onExtentChanged);
+
+    map.removeInteraction(this.extentIteraction);
+
+    this.selectingArea = false;
+  }
+
+  async onMouseUp(event): Promise<void>{   
+    console.log("up");
+    if (this.extent) {
+      this.price = await this.bcInfoService.getPrice(getArea(this.extent));
+    }
+  }
+
+  onExtentChanged(event: ExtentEvent): any{
+    this.extent = event.extent    
+  }
 }