Refactor Viewport and SimulatedRegion position to be the center instead of a corner

frontend/src/app/pages/exercises/exercise/shared/core/drag-element.service.ts

@@ -220,8 +220,8 @@ export class DragElementService {
                     const width = height * Viewport.image.aspectRatio;
                     const viewport = Viewport.create(
                         {
-                            x: position.x - width / 2,
-                            y: position.y + height / 2,
+                            x: position.x,
+                            y: position.y,
                         },
                         {
                             height,
@@ -282,8 +282,8 @@ export class DragElementService {
                     const width = height * SimulatedRegion.image.aspectRatio;
                     const simulatedRegion = SimulatedRegion.create(
                         {
-                            x: position.x - width / 2,
-                            y: position.y + height / 2,
+                            x: position.x,
+                            y: position.y,
                         },
                         {
                             height,

frontend/src/app/pages/exercises/exercise/shared/exercise-map/feature-managers/moveable-feature-manager.ts

@@ -1,25 +1,24 @@
-import type { MapBrowserEvent, Feature } from 'ol';
+import type { NgZone } from '@angular/core';
+import type { Feature, MapBrowserEvent } from 'ol';
 import type Point from 'ol/geom/Point';
 import type { TranslateEvent } from 'ol/interaction/Translate';
 import type VectorLayer from 'ol/layer/Vector';
 import type OlMap from 'ol/Map';
 import type VectorSource from 'ol/source/Vector';
 import type { Observable } from 'rxjs';
 import { Subject } from 'rxjs';
-import type { NgZone } from '@angular/core';
 // eslint-disable-next-line @typescript-eslint/no-shadow
-import type { UUID, Element } from 'digital-fuesim-manv-shared';
+import type { Element, MapCoordinates, UUID } from 'digital-fuesim-manv-shared';
 import type { FeatureManager } from '../utility/feature-manager';
-import { MovementAnimator } from '../utility/movement-animator';
 import type {
     GeometryHelper,
     GeometryWithCoordinates,
     PositionableElement,
-    Positions,
 } from '../utility/geometry-helper';
+import { MovementAnimator } from '../utility/movement-animator';
+import type { OlMapInteractionsManager } from '../utility/ol-map-interactions-manager';
 import type { OpenPopupOptions } from '../utility/popup-manager';
 import { TranslateInteraction } from '../utility/translate-interaction';
-import type { OlMapInteractionsManager } from '../utility/ol-map-interactions-manager';
 import { ElementManager } from './element-manager';
 
 /**
@@ -40,7 +39,7 @@ export abstract class MoveableFeatureManager<
     constructor(
         protected readonly olMap: OlMap,
         private readonly proposeMovementAction: (
-            newPosition: Positions<FeatureType>,
+            newPosition: MapCoordinates,
             element: ManagedElement
         ) => void,
         protected readonly geometryHelper: GeometryHelper<

frontend/src/app/pages/exercises/exercise/shared/exercise-map/feature-managers/simulated-region-feature-manager.ts

@@ -60,11 +60,11 @@ export class SimulatedRegionFeatureManager
     ) {
         super(
             olMap,
-            (targetPositions, simulatedRegion) => {
+            (targetPosition, simulatedRegion) => {
                 exerciseService.proposeAction({
                     type: '[SimulatedRegion] Move simulated region',
                     simulatedRegionId: simulatedRegion.id,
-                    targetPosition: targetPositions[0]![0]!,
+                    targetPosition,
                 });
             },
             new PolygonGeometryHelper()
@@ -86,7 +86,7 @@ export class SimulatedRegionFeatureManager
         const feature = super.createFeature(element);
         ResizeRectangleInteraction.onResize(
             feature,
-            ({ topLeftCoordinate, scale }) => {
+            ({ centerCoordinate, scale }) => {
                 const currentElement = this.getElementFromFeature(
                     feature
                 ) as SimulatedRegion;
@@ -95,8 +95,8 @@ export class SimulatedRegionFeatureManager
                         type: '[SimulatedRegion] Resize simulated region',
                         simulatedRegionId: element.id,
                         targetPosition: MapCoordinates.create(
-                            topLeftCoordinate[0]!,
-                            topLeftCoordinate[1]!
+                            centerCoordinate[0]!,
+                            centerCoordinate[1]!
                         ),
                         newSize: Size.create(
                             currentElement.size.width * scale.x,
@@ -142,19 +142,16 @@ export class SimulatedRegionFeatureManager
             return false;
         }
         if (
-            ['vehicle', 'personnel', 'material', 'patient'].includes(
-                droppedElement.type
-            )
+            droppedElement.type === 'vehicle' ||
+            droppedElement.type === 'personnel' ||
+            droppedElement.type === 'material' ||
+            droppedElement.type === 'patient'
         ) {
             this.exerciseService.proposeAction(
                 {
                     type: '[SimulatedRegion] Add Element',
                     simulatedRegionId: droppedOnSimulatedRegion.id,
-                    elementToBeAddedType: droppedElement.type as
-                        | 'material'
-                        | 'patient'
-                        | 'personnel'
-                        | 'vehicle',
+                    elementToBeAddedType: droppedElement.type,
                     elementToBeAddedId: droppedElement.id,
                 },
                 true

frontend/src/app/pages/exercises/exercise/shared/exercise-map/feature-managers/viewport-feature-manager.ts

@@ -63,11 +63,11 @@ export class ViewportFeatureManager
     ) {
         super(
             olMap,
-            (targetPositions, viewport) => {
+            (targetPosition, viewport) => {
                 exerciseService.proposeAction({
                     type: '[Viewport] Move viewport',
                     viewportId: viewport.id,
-                    targetPosition: targetPositions[0]![0]!,
+                    targetPosition,
                 });
             },
             new PolygonGeometryHelper()
@@ -87,7 +87,7 @@ export class ViewportFeatureManager
         const feature = super.createFeature(element);
         ResizeRectangleInteraction.onResize(
             feature,
-            ({ topLeftCoordinate, scale }) => {
+            ({ centerCoordinate, scale }) => {
                 const currentElement = this.getElementFromFeature(
                     feature
                 ) as Viewport;
@@ -96,8 +96,8 @@ export class ViewportFeatureManager
                         type: '[Viewport] Resize viewport',
                         viewportId: element.id,
                         targetPosition: MapCoordinates.create(
-                            topLeftCoordinate[0]!,
-                            topLeftCoordinate[1]!
+                            centerCoordinate[0]!,
+                            centerCoordinate[1]!
                         ),
                         newSize: Size.create(
                             currentElement.size.width * scale.x,

frontend/src/app/pages/exercises/exercise/shared/exercise-map/utility/geometry-helper.ts

@@ -32,36 +32,25 @@ export type Coordinates<T extends GeometryWithCoordinates> = Exclude<
     null
 >;
 
-type ArrayElement<ArrayType> = ArrayType extends readonly (infer ElementType)[]
-    ? ElementType
-    : never;
-
-type SubstituteCoordinateForPoint<T> = T extends Coordinate
-    ? MapCoordinates
-    : T extends Array<ArrayElement<T>>
-    ? SubstituteCoordinateForPoint<ArrayElement<T>>[]
-    : never;
-
-export type Positions<T extends GeometryWithCoordinates> =
-    SubstituteCoordinateForPoint<Coordinates<T>>;
-
 export interface CoordinatePair<T extends GeometryWithCoordinates> {
     startPosition: Coordinates<T>;
     endPosition: Coordinates<T>;
 }
 
 export interface GeometryHelper<
-    T extends GeometryWithCoordinates,
+    GeometryType extends GeometryWithCoordinates,
     Element extends PositionableElement = PositionableElement
 > {
-    create: (element: Element) => Feature<T>;
-    getElementCoordinates: (element: Element) => Coordinates<T>;
-    getFeatureCoordinates: (feature: Feature<T>) => Coordinates<T>;
+    create: (element: Element) => Feature<GeometryType>;
+    getElementCoordinates: (element: Element) => Coordinates<GeometryType>;
+    getFeatureCoordinates: (
+        feature: Feature<GeometryType>
+    ) => Coordinates<GeometryType>;
     interpolateCoordinates: (
-        positions: CoordinatePair<T>,
+        positions: CoordinatePair<GeometryType>,
         progress: number
-    ) => Coordinates<T>;
-    getFeaturePosition: (feature: Feature<T>) => Positions<T>;
+    ) => Coordinates<GeometryType>;
+    getFeaturePosition: (feature: Feature<GeometryType>) => MapCoordinates;
 }
 
 export const interpolate = (

frontend/src/app/pages/exercises/exercise/shared/exercise-map/utility/point-geometry-helper.ts

@@ -1,15 +1,14 @@
 import type { WithPosition } from 'digital-fuesim-manv-shared';
 import {
-    MapCoordinates,
     currentCoordinatesOf,
+    MapCoordinates,
 } from 'digital-fuesim-manv-shared';
 import { Feature } from 'ol';
 import { Point } from 'ol/geom';
 import type {
     CoordinatePair,
     Coordinates,
     GeometryHelper,
-    Positions,
 } from './geometry-helper';
 import { interpolate } from './geometry-helper';
 
@@ -31,7 +30,7 @@ export class PointGeometryHelper implements GeometryHelper<Point> {
     ): Coordinates<Point> =>
         interpolate(positions.startPosition, positions.endPosition, progress);
 
-    getFeaturePosition = (feature: Feature<Point>): Positions<Point> =>
+    getFeaturePosition = (feature: Feature<Point>) =>
         MapCoordinates.create(
             this.getFeatureCoordinates(feature)[0]!,
             this.getFeatureCoordinates(feature)[1]!

frontend/src/app/pages/exercises/exercise/shared/exercise-map/utility/polygon-geometry-helper.ts

@@ -3,12 +3,12 @@ import {
     MapCoordinates,
 } from 'digital-fuesim-manv-shared';
 import { Feature } from 'ol';
+import { getCenter } from 'ol/extent';
 import { Polygon } from 'ol/geom';
 import type {
     CoordinatePair,
     Coordinates,
     GeometryHelper,
-    Positions,
     ResizableElement,
 } from './geometry-helper';
 import { interpolate } from './geometry-helper';
@@ -21,24 +21,24 @@ export class PolygonGeometryHelper
 
     getElementCoordinates = (
         element: ResizableElement
-    ): Coordinates<Polygon> => [
-        [
-            [currentCoordinatesOf(element).x, currentCoordinatesOf(element).y],
+    ): Coordinates<Polygon> => {
+        const center = currentCoordinatesOf(element);
+        const { width, height } = element.size;
+        return [
             [
-                currentCoordinatesOf(element).x + element.size.width,
-                currentCoordinatesOf(element).y,
+                // top left
+                [center.x - width / 2, center.y + height / 2],
+                // top right
+                [center.x + width / 2, center.y + height / 2],
+                // bottom right
+                [center.x + width / 2, center.y - height / 2],
+                // bottom left
+                [center.x - width / 2, center.y - height / 2],
+                // top left (close the rectangle)
+                [center.x - width / 2, center.y + height / 2],
             ],
-            [
-                currentCoordinatesOf(element).x + element.size.width,
-                currentCoordinatesOf(element).y - element.size.height,
-            ],
-            [
-                currentCoordinatesOf(element).x,
-                currentCoordinatesOf(element).y - element.size.height,
-            ],
-            [currentCoordinatesOf(element).x, currentCoordinatesOf(element).y],
-        ],
-    ];
+        ];
+    };
 
     getFeatureCoordinates = (feature: Feature<Polygon>): Coordinates<Polygon> =>
         feature.getGeometry()!.getCoordinates();
@@ -57,10 +57,11 @@ export class PolygonGeometryHelper
             )
         );
 
-    getFeaturePosition = (feature: Feature<Polygon>): Positions<Polygon> =>
-        this.getFeatureCoordinates(feature).map((coordinates) =>
-            coordinates.map((coordinate) =>
-                MapCoordinates.create(coordinate[0]!, coordinate[1]!)
-            )
+    getFeaturePosition = (feature: Feature<Polygon>) => {
+        const centerCoordinates = getCenter(feature.getGeometry()!.getExtent());
+        return MapCoordinates.create(
+            centerCoordinates[0]!,
+            centerCoordinates[1]!
         );
+    };
 }