+
+
- - Click and drag to move point.
- - Ctrl-Click to remove point from line.
+ -
+ Click and drag to move anchor.
+
+ -
+ Click and drag to move point.
+
+ -
+ Ctrl-Click to remove point from line.
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 82ad4008..5991c121 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1380,12 +1380,12 @@ export class AppComponent {
// ******** DRAW / EDIT EVENT HANDLERS ************
// ** handle modify start event **
- public handleModifyStart() {
+ public handleModifyStart(id?: string) {
this.draw.type = null;
this.draw.mode = null;
this.draw.enabled = false;
this.draw.modify = true;
- this.draw.forSave = { id: null, coords: null };
+ this.draw.forSave = { id: id ?? null, coords: null };
}
// ** handle modify end event **
@@ -1449,56 +1449,65 @@ export class AppComponent {
// ** End Draw / modify / Measure mode **
public cancelDraw() {
if (this.draw.modify && this.draw.forSave && this.draw.forSave.id) {
- // save changes
- this.app
- .showConfirm(
- `Do you want to save the changes made to ${
- this.draw.forSave.id.split('.')[0]
- }?`,
- 'Save Changes'
- )
- .subscribe((res) => {
- const r = this.draw.forSave.id.split('.');
- if (res) {
- // save changes
- if (r[0] === 'route') {
- this.skres.updateRouteCoords(
- r[1],
- this.draw.forSave.coords,
- this.draw.forSave.coordsMetadata
- );
- }
- if (r[0] === 'waypoint') {
- this.skres.updateWaypointPosition(r[1], this.draw.forSave.coords);
- // if waypoint the target destination update nextPoint
- if (r[1] === this.app.data.activeWaypoint) {
- this.skres.setDestination({
- latitude: this.draw.forSave.coords[1],
- longitude: this.draw.forSave.coords[0]
- });
+ if (this.draw.forSave.id === 'anchor') {
+ this.draw.forSave = null;
+ this.app.data.activeRouteIsEditing = false;
+ this.focusMap();
+ } else {
+ // save changes
+ this.app
+ .showConfirm(
+ `Do you want to save the changes made to ${
+ this.draw.forSave.id.split('.')[0]
+ }?`,
+ 'Save Changes'
+ )
+ .subscribe((res) => {
+ const r = this.draw.forSave.id.split('.');
+ if (res) {
+ // save changes
+ if (r[0] === 'route') {
+ this.skres.updateRouteCoords(
+ r[1],
+ this.draw.forSave.coords,
+ this.draw.forSave.coordsMetadata
+ );
+ }
+ if (r[0] === 'waypoint') {
+ this.skres.updateWaypointPosition(
+ r[1],
+ this.draw.forSave.coords
+ );
+ // if waypoint the target destination update nextPoint
+ if (r[1] === this.app.data.activeWaypoint) {
+ this.skres.setDestination({
+ latitude: this.draw.forSave.coords[1],
+ longitude: this.draw.forSave.coords[0]
+ });
+ }
+ }
+ if (r[0] === 'note') {
+ this.skres.updateNotePosition(r[1], this.draw.forSave.coords);
+ }
+ if (r[0] === 'region') {
+ this.skres.updateRegionCoords(r[1], this.draw.forSave.coords);
+ }
+ } else {
+ if (r[0] === 'route') {
+ this.skres.getRoutes();
+ }
+ if (r[0] === 'waypoint') {
+ this.skres.getWaypoints();
+ }
+ if (r[0] === 'note' || r[0] === 'region') {
+ this.skres.getNotes();
}
}
- if (r[0] === 'note') {
- this.skres.updateNotePosition(r[1], this.draw.forSave.coords);
- }
- if (r[0] === 'region') {
- this.skres.updateRegionCoords(r[1], this.draw.forSave.coords);
- }
- } else {
- if (r[0] === 'route') {
- this.skres.getRoutes();
- }
- if (r[0] === 'waypoint') {
- this.skres.getWaypoints();
- }
- if (r[0] === 'note' || r[0] === 'region') {
- this.skres.getNotes();
- }
- }
- this.draw.forSave = null;
- this.app.data.activeRouteIsEditing = false;
- this.focusMap();
- });
+ this.draw.forSave = null;
+ this.app.data.activeRouteIsEditing = false;
+ this.focusMap();
+ });
+ }
}
// clean up
this.draw.enabled = false;
diff --git a/src/app/modules/map/fb-map.component.ts b/src/app/modules/map/fb-map.component.ts
index e166f939..de454e2f 100644
--- a/src/app/modules/map/fb-map.component.ts
+++ b/src/app/modules/map/fb-map.component.ts
@@ -31,7 +31,8 @@ import {
SKAtoN,
SKAircraft,
SKSaR,
- SKStreamFacade
+ SKStreamFacade,
+ AlarmsFacade
} from 'src/app/modules';
import {
mapInteractions,
@@ -136,7 +137,7 @@ export class FBMapComponent implements OnInit, OnDestroy {
@Output() measureEnd: EventEmitter
= new EventEmitter();
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@Output() drawEnd: EventEmitter = new EventEmitter();
- @Output() modifyStart: EventEmitter = new EventEmitter();
+ @Output() modifyStart: EventEmitter = new EventEmitter();
@Output() modifyEnd: EventEmitter> = new EventEmitter();
@Output() activate: EventEmitter = new EventEmitter();
@Output() deactivate: EventEmitter = new EventEmitter();
@@ -282,7 +283,8 @@ export class FBMapComponent implements OnInit, OnDestroy {
public app: AppInfo,
public skres: SKResources,
public skresOther: SKOtherResources,
- private skstream: SKStreamFacade
+ private skstream: SKStreamFacade,
+ private alarmsFacade: AlarmsFacade
) {}
ngAfterViewInit() {
@@ -648,6 +650,11 @@ export class FBMapComponent implements OnInit, OnDestroy {
icon = 'notification_important';
text = `${t[1]} ${t[0]}`;
break;
+ case 'anchor':
+ addToFeatureList = true;
+ icon = 'anchor';
+ text = `${t[0]}`;
+ break;
case 'dest':
addToFeatureList = true;
icon = 'flag';
@@ -872,6 +879,14 @@ export class FBMapComponent implements OnInit, OnDestroy {
} else {
// point feature
pc = toLonLat(c);
+ // shift anchor
+ if (fid === 'anchor') {
+ this.alarmsFacade
+ .anchorEvent({ action: 'position' }, undefined, pc)
+ .catch(() => {
+ this.app.showAlert('Alert', 'Error shifting anchor position!');
+ });
+ }
}
this.draw.forSave['coords'] = pc;
this.modifyEnd.emit(this.draw.forSave);
@@ -1096,6 +1111,9 @@ export class FBMapComponent implements OnInit, OnDestroy {
this.overlay['alarm'] = this.app.data.alarms.get(aid);
this.overlay.show = true;
return;
+ case 'anchor':
+ this.startModify('anchor');
+ return;
case 'vessels':
this.overlay['type'] = 'ais';
this.overlay['isSelf'] = true;
@@ -1329,7 +1347,7 @@ export class FBMapComponent implements OnInit, OnDestroy {
}
// ** Enter modify mode **
- public startModify() {
+ public startModify(id?: string) {
if (this.draw.features.getLength() === 0) {
return;
}
@@ -1340,7 +1358,7 @@ export class FBMapComponent implements OnInit, OnDestroy {
this.draw.properties = {};
this.draw.enabled = false;
this.draw.modify = true;
- this.modifyStart.emit();
+ this.modifyStart.emit(id);
}
// ********************************************************
diff --git a/src/app/modules/map/ol/lib/alarms/layer-anchor-alarm.component.ts b/src/app/modules/map/ol/lib/alarms/layer-anchor-alarm.component.ts
index 52bd325e..7e4ccea0 100644
--- a/src/app/modules/map/ol/lib/alarms/layer-anchor-alarm.component.ts
+++ b/src/app/modules/map/ol/lib/alarms/layer-anchor-alarm.component.ts
@@ -130,6 +130,7 @@ export class AnchorAlarmComponent implements OnInit, OnDestroy, OnChanges {
const fp = new Feature({
geometry: new Point(fromLonLat(this.anchorPosition))
});
+ fp.setId('anchor');
fp.setStyle(this.buildStyle('anchor'));
fa.push(fp);
this.features = fa;
diff --git a/src/assets/help/index.html b/src/assets/help/index.html
index 5adc0f78..41cee586 100644
--- a/src/assets/help/index.html
+++ b/src/assets/help/index.html
@@ -1261,9 +1261,14 @@ anchor Anchor Watch
The alarm radius can be adjusted by moving the
- Set Radius slider to the desired distance. The
- Anchor Position
- can be shifted by using the arrow buttons.
+ Set Radius slider to the desired distance.
+ The Anchor Position can be shifted by using the arrow
+ buttons OR on the map:
+
+ - Click the anchor icon (to enter modify mode)
+ - Drag the anchor feature to the new location.
+ - Click Finish to exit modify mode.
+