diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d01bde6..27d58c4 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -22,6 +22,7 @@ import {ClickOutsideModule} from "ng-click-outside";
import {CircleComponent} from "./components/circle/circle.component";
import {ColorPickerModule} from "ngx-color-picker";
import {ColorPickerDialogComponent} from "./components/colorPickerDialog/colorPickerDialog.component";
+import {DimensionsDialogComponent} from "./components/dimensionsDialog/dimensionsDialog.component";
@NgModule({
declarations: [
@@ -30,6 +31,7 @@ import {ColorPickerDialogComponent} from "./components/colorPickerDialog/colorPi
CalibrateComponent,
CircleComponent,
ColorPickerDialogComponent,
+ DimensionsDialogComponent,
HomeComponent,
MapComponent,
MarkerComponent,
@@ -51,7 +53,7 @@ import {ColorPickerDialogComponent} from "./components/colorPickerDialog/colorPi
MatInputModule,
],
providers: [],
- entryComponents: [CalibrateComponent, CircleComponent, ColorPickerDialogComponent, MarkerComponent, PermissionsComponent],
+ entryComponents: [CalibrateComponent, CircleComponent, ColorPickerDialogComponent, DimensionsDialogComponent, MarkerComponent, PermissionsComponent],
bootstrap: [AppComponent]
})
export class AppModule {
diff --git a/src/app/components/dimensionsDialog/dimensionsDialog.component.html b/src/app/components/dimensionsDialog/dimensionsDialog.component.html
new file mode 100644
index 0000000..c7e1cd2
--- /dev/null
+++ b/src/app/components/dimensionsDialog/dimensionsDialog.component.html
@@ -0,0 +1,17 @@
+
diff --git a/src/app/components/dimensionsDialog/dimensionsDialog.component.scss b/src/app/components/dimensionsDialog/dimensionsDialog.component.scss
new file mode 100644
index 0000000..3b1a113
--- /dev/null
+++ b/src/app/components/dimensionsDialog/dimensionsDialog.component.scss
@@ -0,0 +1,3 @@
+::ng-deep .mat-form-field-infix {
+ width: auto !important;
+}
diff --git a/src/app/components/dimensionsDialog/dimensionsDialog.component.ts b/src/app/components/dimensionsDialog/dimensionsDialog.component.ts
new file mode 100644
index 0000000..3c7771f
--- /dev/null
+++ b/src/app/components/dimensionsDialog/dimensionsDialog.component.ts
@@ -0,0 +1,19 @@
+import {Component, Inject} from "@angular/core";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+
+@Component({
+ selector: 'dimensions-dialog',
+ templateUrl: './dimensionsDialog.component.html',
+ styleUrls: ['./dimensionsDialog.component.scss']
+})
+export class DimensionsDialogComponent {
+ dimensionsOut: number[];
+
+ constructor(private ref: MatDialogRef, @Inject(MAT_DIALOG_DATA) public dimensions: string[]) {
+ this.dimensionsOut = Array(dimensions.length).fill(0);
+ }
+
+ close() {
+ this.ref.close(this.dimensionsOut);
+ }
+}
diff --git a/src/app/services/map.service.ts b/src/app/services/map.service.ts
index 7b7e880..dad7ce3 100644
--- a/src/app/services/map.service.ts
+++ b/src/app/services/map.service.ts
@@ -118,7 +118,7 @@ export class MapService {
}
newCircle(c: Circle) {
- if(!c.radius) c.radius = 10000;
+ if(!c.radius) c.radius = 500;
if(!c.color) c.color = '#ff4141';
let circle = L.circle(c.latlng, c).addTo(this.map);
circle.symbol = c;
diff --git a/src/app/views/map/map.component.ts b/src/app/views/map/map.component.ts
index d9cd863..66099df 100644
--- a/src/app/views/map/map.component.ts
+++ b/src/app/views/map/map.component.ts
@@ -10,6 +10,8 @@ import {Subscription} from "rxjs";
import {MatBottomSheetRef} from "@angular/material/bottom-sheet";
import {copyToClipboard} from "../../utils";
import {ActivatedRoute} from "@angular/router";
+import {DimensionsDialogComponent} from "../../components/dimensionsDialog/dimensionsDialog.component";
+import {MatDialog} from "@angular/material/dialog";
declare const L;
@@ -59,7 +61,7 @@ export class MapComponent implements OnInit {
{name: 'Settings', icon: 'settings', hidden: true}
];
- constructor(public physicsService: PhysicsService, private snackBar: MatSnackBar, private bottomSheet: MatBottomSheet, private route: ActivatedRoute) {
+ constructor(public physicsService: PhysicsService, private snackBar: MatSnackBar, private bottomSheet: MatBottomSheet, private dialog: MatDialog, private route: ActivatedRoute) {
this.route.params.subscribe(params => {
this.code = params['code'];
})
@@ -105,9 +107,10 @@ export class MapComponent implements OnInit {
}
addCircle() {
- this.map.click.pipe(skip(1), take(1), filter(() => this.menu[2].enabled)).subscribe(e => {
+ this.map.click.pipe(skip(1), take(1), filter(() => this.menu[2].enabled)).subscribe(async e => {
+ let dimensions = await this.dialog.open(DimensionsDialogComponent, {data: ['Radius (m)'], disableClose: true, panelClass: 'pb-0'}).afterClosed().toPromise();
this.menu[2].enabled = false;
- this.map.newCircle({latlng: e.event.latlng});
+ this.map.newCircle({latlng: e.event.latlng, radius: dimensions[0]});
});
}
diff --git a/src/styles.scss b/src/styles.scss
index 0b0240e..d688857 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -28,3 +28,10 @@ body {
overflow: hidden;
}
}
+
+.cdk-overlay-pane.pb-0 {
+ .mat-dialog-container {
+ padding-bottom: 0;
+ overflow: hidden;
+ }
+}