Skip to content

Commit

Permalink
Drag anchor to change position.
Browse files Browse the repository at this point in the history
  • Loading branch information
@panaaj
panaaj committed Dec 18, 2023
1 parent 9f9a138 commit 2179c81
Show file tree
Hide file tree
Showing 6 changed files with 105 additions and 64 deletions.
1 change: 1 addition & 0 deletions src/app/app.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ mat-nav-list {
left: 0;
overflow: auto;
position: fixed;
background: linear-gradient(0deg, rgba(253,253,253,.5) 0%, rgba(0,0,0,1) 26%);
}

.view {
Expand Down
19 changes: 13 additions & 6 deletions src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -717,7 +717,7 @@
[drawMode]="draw.mode"
(drawEnd)="handleDrawEnd($event)"
[modifyMode]="draw.modify"
(modifyStart)="handleModifyStart()"
(modifyStart)="handleModifyStart($event)"
(modifyEnd)="handleModifyEnd($event)"
(activate)="activateRoute($event)"
(deactivate)="clearDestintation()"
Expand Down Expand Up @@ -761,12 +761,12 @@
<mat-icon>edit</mat-icon> Drawing Help:
</span>
<div
*ngIf="draw.mode == 'waypoint' || draw.mode == 'note'"
*ngIf="draw.mode === 'waypoint' || draw.mode === 'note'"
style="padding: 5px"
>
Click on the Map where to drop the feature.
</div>
<div *ngIf="draw.mode == 'route'" style="padding: 5px">
<div *ngIf="draw.mode === 'route'" style="padding: 5px">
<ol
style="
margin-block-start: 0.2em;
Expand All @@ -778,7 +778,7 @@
<li>Click on the last Point to end drawing.</li>
</ol>
</div>
<div *ngIf="draw.mode == 'region'" style="padding: 5px">
<div *ngIf="draw.mode === 'region'" style="padding: 5px">
<ol
style="
margin-block-start: 0.2em;
Expand All @@ -803,8 +803,15 @@
padding-inline-start: 15px;
"
>
<li>Click and drag to move point.</li>
<li>Ctrl-Click to remove point from line.</li>
<li *ngIf="draw.forSave.id === 'anchor'">
Click and drag to move anchor.
</li>
<li *ngIf="draw.forSave.id !== 'anchor'">
Click and drag to move point.
</li>
<li *ngIf="draw.forSave.id !== 'anchor'">
Ctrl-Click to remove point from line.
</li>
</ol>
</div>
</div>
Expand Down
109 changes: 59 additions & 50 deletions src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 **
Expand Down Expand Up @@ -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;
Expand Down
28 changes: 23 additions & 5 deletions src/app/modules/map/fb-map.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ import {
SKAtoN,
SKAircraft,
SKSaR,
SKStreamFacade
SKStreamFacade,
AlarmsFacade
} from 'src/app/modules';
import {
mapInteractions,
Expand Down Expand Up @@ -136,7 +137,7 @@ export class FBMapComponent implements OnInit, OnDestroy {
@Output() measureEnd: EventEmitter<boolean> = new EventEmitter();
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@Output() drawEnd: EventEmitter<any> = new EventEmitter();
@Output() modifyStart: EventEmitter<void> = new EventEmitter();
@Output() modifyStart: EventEmitter<string> = new EventEmitter();
@Output() modifyEnd: EventEmitter<Array<Position>> = new EventEmitter();
@Output() activate: EventEmitter<string> = new EventEmitter();
@Output() deactivate: EventEmitter<string> = new EventEmitter();
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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);
}

// ********************************************************
Expand Down
1 change: 1 addition & 0 deletions src/app/modules/map/ol/lib/alarms/layer-anchor-alarm.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
11 changes: 8 additions & 3 deletions src/assets/help/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1261,9 +1261,14 @@ <h4><i class="material-icons">anchor</i> Anchor Watch</h4>
</li>
<li>
The alarm radius can be adjusted by moving the
<b>Set Radius</b> slider to the desired distance. The
<b>Anchor Position</b>
can be shifted by using the arrow buttons.
<b>Set Radius</b> slider to the desired distance.<br />
The <b>Anchor Position</b> can be shifted by using the arrow
buttons <b>OR</b> on the map:
<ul>
<li>Click the anchor icon (to enter modify mode)</li>
<li>Drag the anchor feature to the new location.</li>
<li>Click <b>Finish</b> to exit modify mode.</li>
</ul>
</li>
</ol>
</div>
Expand Down

0 comments on commit 2179c81

Please sign in to comment.