@geogirafe/lib-geoportal 1.0.2149179221 → 1.0.2152254142

package/assets/i18n/de.json

@@ -217,6 +217,7 @@
     "Message sent": "Nachricht gesendet",
     "meters": "Meter",
     "Move": "Verschieben",
+    "Move Shape": "Zeichnung verschieben",
     "My Drawing": "Meine Zeichnung",
     "My selection": "Meine Auswahl",
     "Name": "Name",
@@ -309,7 +310,9 @@
     "Remove filter": "Filter entfernen",
     "Remove group": "Gruppe entfernen",
     "Remove layer": "Layer entfernen",
+    "Remove Shape": "Zeichnung entfernen",
     "Remove theme": "Thema entfernen",
+    "Remove Vertex": "Eckpunkt entfernen",
     "Report an error": "Einen Fehler melden",
     "Request secure access": "Sicheren Zugang anfordern",
     "Reset All": "Alle zurücksetzen",
@@ -317,6 +320,7 @@
     "Reset filter": "Filter zurücksetzen",
     "Reset preferences": "Einstellungen zurücksetzen",
     "Reset user preferences back to default values?": "Einstellungen zurück auf Standardwerte setzen?",
+    "Rotate/Scale Shape": "Zeichnung rotieren/skalieren",
     "Rotation": "Rotation",
     "same as system": "Systemeinstellung",
     "Save": "Speichern",

package/assets/i18n/en.json

@@ -218,6 +218,7 @@
     "Message sent": "Message sent",
     "meters": "meters",
     "Move": "Move",
+    "Move Shape": "Move Shape",
     "My Drawing": "My Drawing",
     "My selection": "My selection",
     "Name": "Name",
@@ -310,7 +311,9 @@
     "Remove filter": "Remove filter",
     "Remove group": "Remove group",
     "Remove layer": "Remove Layer",
+    "Remove Shape": "Remove Shape",
     "Remove theme": "Remove theme",
+    "Remove Vertex": "Remove vertex",
     "Report an error": "Report an error",
     "Request secure access": "Request secure access",
     "Reset All": "Reset All",
@@ -318,6 +321,7 @@
     "Reset filter": "Reset filter",
     "Reset preferences": "Reset preferences",
     "Reset user preferences back to default values?": "Reset user preferences back to default values?",
+    "Rotate/Scale Shape": "Rotate/Scale Shape",
     "Rotation": "Rotation",
     "same as system": "Same as system",
     "Save": "Save",

package/assets/i18n/fr.json

@@ -217,6 +217,7 @@
     "Message sent": "Message envoyé",
     "meters": "mètres",
     "Move": "Déplacer",
+    "Move Shape": "Déplacer la forme",
     "My Drawing": "Mon dessin",
     "My selection": "Ma sélection",
     "Name": "Nom",
@@ -309,7 +310,9 @@
     "Remove filter": "Supprimer le filtre",
     "Remove group": "Supprimer le groupe",
     "Remove layer": "Supprimer la couche",
+    "Remove Shape": "Supprimer la forme",
     "Remove theme": "Supprimer le thème",
+    "Remove Vertex": "Supprimer le sommet",
     "Report an error": "Signaler un problème",
     "Request secure access": "Demander un accès sécurisé",
     "Reset All": "Réinitialiser tout",
@@ -317,6 +320,7 @@
     "Reset filter": "Réinitialiser le filtre",
     "Reset preferences": "Réinitialiser les préférences",
     "Reset user preferences back to default values?": "Réinitialiser tous les paramètres à la valeur par défaut?",
+    "Rotate/Scale Shape": "Faire pivoter/redimensionner la forme",
     "Rotation": "Rotation",
     "same as system": "Identique au système",
     "Save": "Enregistrer",

package/assets/i18n/it.json

@@ -217,6 +217,7 @@
     "Message sent": "Messaggio inviato",
     "meters": "metri",
     "Move": "Muovi",
+    "Move Shape": "Sposta forma",
     "My Drawing": "Il mio disegno",
     "My selection": "La mia selezione",
     "Name": "Nome",
@@ -309,7 +310,9 @@
     "Remove filter": "Rimuovi filtro",
     "Remove group": "Rimuovi gruppo",
     "Remove layer": "Rimuovi layer",
+    "Remove Shape": "Rimuovi forma",
     "Remove theme": "Rimuovi tema",
+    "Remove Vertex": "Rimuovi vertice",
     "Report an error": "Segnala un errore",
     "Request secure access": "Richiedi accesso sicuro",
     "Reset All": "Azzeramento di tutti",
@@ -317,6 +320,7 @@
     "Reset filter": "Azzeramento del filtro",
     "Reset preferences": "Reimposta preferenze",
     "Reset user preferences back to default values?": "Ripristinare tutte le impostazioni al valore predefinito?",
+    "Rotate/Scale Shape": "Ruota/Ridimensiona forma",
     "Rotation": "Rotazione",
     "same as system": "Come il sistema",
     "Save": "Salva",

package/components/drawing/component.js

@@ -186,7 +186,12 @@ input{border:1px solid var(--bkg-color-grad1);width:inherit;background-color:var
         }
         this.drawingState = this.state.extendedState.drawing;
         const map = this.context.componentManager.getComponents(MapComponent)[0];
-        this.olDrawing = new OlDrawing(map, this.name, this.context);
+        this.olDrawing = new OlDrawing(map, this.name, this.context, (featureId) => {
+            const drawingFeature = this.drawingState.features.find((drawingFeature) => drawingFeature.id === featureId);
+            if (drawingFeature) {
+                this.deleteFeature(drawingFeature);
+            }
+        });
         this.cesiumDrawing = new CesiumDrawing(map, this.name, this.context);
         this.render();
         this.subscribe('extendedState.drawing.features', (olds, news) => this.onFeaturesChanged(olds, news));
@@ -294,6 +299,7 @@ input{border:1px solid var(--bkg-color-grad1);width:inherit;background-color:var
         this.refreshRender();
     }
     onToggleFeatureSelection(feature) {
+        this.setTool(null);
         feature.selected = !feature.selected;
         this.refreshRender();
     }
@@ -329,7 +335,9 @@ input{border:1px solid var(--bkg-color-grad1);width:inherit;background-color:var
         return !this.selectedFeatures.every((f) => f.isPointOrPolyline());
     }
     async deleteFeature(feature) {
-        const confirm = await window.gConfirm(`Do you want to remove "${feature.name}" ?`, 'Delete Feature');
+        const confirm = await window.gConfirm('Do you want to remove "${feature.name}" ?', 'Delete Feature', (translatedMessage) => {
+            return translatedMessage.replace('${feature.name}', feature.name);
+        });
         if (confirm) {
             const idx = this.drawingState.features.findIndex((f) => f.id === feature.id);
             if (idx > -1) {

package/components/drawing/olDrawing.d.ts

@@ -4,17 +4,19 @@ import { Collection, Feature } from 'ol';
 import { Geometry, Polygon, SimpleGeometry } from 'ol/geom';
 import { SketchCoordType } from 'ol/interaction/Draw';
 import { Style } from 'ol/style';
-import { Modify, Snap, Draw } from 'ol/interaction';
+import { Draw, Modify, Snap, Translate } from 'ol/interaction';
 import VectorSource, { VectorSourceEvent } from 'ol/source/Vector';
 import VectorLayer from 'ol/layer/Vector';
 import { Projection } from 'ol/proj';
 import { Coordinate } from 'ol/coordinate';
 import { ContextMenu } from '../map/tools/contextmenu';
 import IGirafeContext from '../../tools/context/icontext';
+import { StyleFunction } from 'ol/style/Style';
 export default class OlDrawing {
     private readonly map;
     private readonly toolName;
     private readonly context;
+    private readonly deleteHandler;
     modifiableFeatures: Collection<Feature>;
     draw: Draw | null;
     modify: Modify | null;
@@ -24,12 +26,21 @@ export default class OlDrawing {
     fixedLength: number;
     drawingSource: VectorSource;
     drawingLayer: VectorLayer;
+    lastClosestFeature: Feature | null;
+    translate: Translate | null;
+    rotateAndScale: Modify | null;
+    defaultStyle: StyleFunction | undefined;
+    private readonly updateGeometryInState;
     private get state();
     private get drawingState();
     private get config();
-    constructor(map: MapComponent, toolName: string, context: IGirafeContext);
+    constructor(map: MapComponent, toolName: string, context: IGirafeContext, deleteHandler: (featureId: string) => void);
     private addModifyInteraction;
     private addSnapInteraction;
+    private addTranslateInteraction;
+    private removeTranslateInteraction;
+    private addRotateAndScaleInteraction;
+    private removeRotateAndScaleInteraction;
     /**
      * Adds a context menu to the map with a single entry 'remove vertex'. The menu is configured to open
      * when the user does an alternate click ( = context event) on or near a vertex of a modifiable feature.
@@ -37,10 +48,13 @@ export default class OlDrawing {
     private addEditContextMenu;
     addEditInteractions(): void;
     removeEditInteractions(): void;
+    private readonly prepareMenuEntriesForVertex;
+    private readonly prepareMenuEntriesForShape;
     /**
      Check if there is a vertex of a selected (=editable) feature within the pixel tolerance of the clicked coordinates.
      */
     hasEditableVertexAtCoordinate(coordinate: Coordinate): boolean;
+    hasEditableShapeAtCoordinate(coordinate: Coordinate): boolean;
     /**
      Returns the closest vertex and feature to a coordinate from the drawing source.
      The feature source can be pre-filtered via an optional filter function.
@@ -51,6 +65,7 @@ export default class OlDrawing {
      modify option properties 'condition' and 'insertVertexCondition'.
      */
     private removeLastInteractedVertex;
+    private removeLastInteractedShape;
     /**
      * Adds features to the drawing source if they are missing and updates their style each time a property changes.
      * Adding them to the source is only necessary if the feature originates from a deserialized state and not

package/components/drawing/olDrawing.js

@@ -1,19 +1,21 @@
 import DrawingFeature, { DrawingShape } from './drawingFeature';
 import { Collection, Feature } from 'ol';
-import { Geometry, LineString, Point, Polygon, Circle as CircleGeom, MultiPoint, MultiLineString, LinearRing, MultiPolygon } from 'ol/geom';
+import { Circle as CircleGeom, Geometry, LinearRing, LineString, MultiLineString, MultiPoint, MultiPolygon, Point, Polygon } from 'ol/geom';
 import { createBox, createRegularPolygon } from 'ol/interaction/Draw';
-import { Style, Stroke, Text, Fill, RegularShape, Circle } from 'ol/style';
-import { Modify, Snap, Draw } from 'ol/interaction';
+import { Circle, Fill, RegularShape, Stroke, Style, Text } from 'ol/style';
+import { Draw, Modify, Snap, Translate } from 'ol/interaction';
 import VectorSource from 'ol/source/Vector';
 import VectorLayer from 'ol/layer/Vector';
 import GeoJSON from 'ol/format/GeoJSON';
 import { getPointResolution } from 'ol/proj';
-import { never, noModifierKeys, primaryAction } from 'ol/events/condition';
-import { getDistance, getArea } from '../../tools/utils/olutils';
-import { ContextMenu } from '../map/tools/contextmenu';
+import { never, primaryAction } from 'ol/events/condition';
+import { getArea, getDistance } from '../../tools/utils/olutils';
+import { ContextMenu, EntryInteractionType } from '../map/tools/contextmenu';
 import { formatCoordinates } from '../../tools/geometrytools';
 import { v4 as uuidv4 } from 'uuid';
 import { isAlternateMouseClick, isPrimaryPointerAction } from '../../tools/state/userinteractionevent';
+import { getCenter, getHeight, getWidth } from 'ol/extent';
+import CircleStyle from 'ol/style/Circle';
 function getLineStroke(strokeType, lineWidth) {
     switch (strokeType) {
         case 'full':
@@ -49,10 +51,51 @@ function extractVerticesFromGeometry(geometry) {
     }
     return new MultiPoint(vertices);
 }
+function calculateCenter(geometry) {
+    let center, coordinates, minRadius;
+    if (geometry instanceof Polygon) {
+        let x = 0;
+        let y = 0;
+        let i = 0;
+        coordinates = geometry.getCoordinates()[0].slice();
+        for (const coordinate of coordinates) {
+            x += coordinate[0];
+            y += coordinate[1];
+            i++;
+        }
+        center = [x / i, y / i];
+    }
+    else if (geometry instanceof LineString) {
+        center = geometry.getCoordinateAt(0.5);
+        coordinates = geometry.getCoordinates();
+    }
+    else {
+        center = getCenter(geometry.getExtent());
+    }
+    let sqDistances;
+    if (coordinates) {
+        sqDistances = coordinates.map(function (coordinate) {
+            const dx = coordinate[0] - center[0];
+            const dy = coordinate[1] - center[1];
+            return dx * dx + dy * dy;
+        });
+        minRadius = Math.sqrt(Math.max(...sqDistances)) / 3;
+    }
+    else {
+        minRadius = Math.max(getWidth(geometry.getExtent()), getHeight(geometry.getExtent())) / 3;
+    }
+    return {
+        center: center,
+        coordinates: coordinates,
+        minRadius: minRadius,
+        sqDistances: sqDistances
+    };
+}
 export default class OlDrawing {
     map;
     toolName;
     context;
+    deleteHandler;
     modifiableFeatures = new Collection([]);
     draw = null;
     modify = null;
@@ -62,6 +105,17 @@ export default class OlDrawing {
     fixedLength = 0;
     drawingSource;
     drawingLayer;
+    lastClosestFeature = null;
+    translate = null;
+    rotateAndScale = null;
+    defaultStyle;
+    updateGeometryInState = (olFeature) => {
+        const idx = this.drawingState.features.findIndex((f) => f.id === olFeature.getId());
+        const drawingFeature = this.drawingState.features[idx];
+        if (idx > -1) {
+            this.drawingState.features[idx].geojson = DrawingFeature.geojsonFromOlFeature(olFeature, drawingFeature.type);
+        }
+    };
     get state() {
         return this.context.stateManager.state;
     }
@@ -71,10 +125,11 @@ export default class OlDrawing {
     get config() {
         return this.context.configManager.Config;
     }
-    constructor(map, toolName, context) {
+    constructor(map, toolName, context, deleteHandler) {
         this.map = map;
         this.toolName = toolName;
         this.context = context;
+        this.deleteHandler = deleteHandler;
         this.drawingSource = new VectorSource({ features: new Collection() });
         this.drawingSource.on('addfeature', (e) => this.onFeatureAdded(e));
         this.drawingLayer = new VectorLayer({
@@ -85,6 +140,7 @@ export default class OlDrawing {
                 altitudeMode: 'clampToGround'
             }
         });
+        this.defaultStyle = new Modify({ source: this.drawingSource }).getOverlay().getStyleFunction();
         this.map.subscribe('extendedState.drawing.activeTool', (_oldTool, newTool) => newTool === null ? this.removeDrawInteraction() : this.addDrawInteraction(newTool));
         // Could be useful logic if we decide that the mobile UI should rely use a dedicated button
         // to remove a selected vetex from a polygon/line (rather than using a longpress context menu)
@@ -127,13 +183,7 @@ export default class OlDrawing {
         this.map.olMap.addInteraction(this.modify);
         // Update the modified geometries in the state
         this.modify.on('modifyend', (e) => {
-            e.features.forEach((olFeature) => {
-                const idx = this.drawingState.features.findIndex((f) => f.id === olFeature.getId());
-                const drawingFeature = this.drawingState.features[idx];
-                if (idx > -1) {
-                    this.drawingState.features[idx].geojson = DrawingFeature.geojsonFromOlFeature(olFeature, drawingFeature.type);
-                }
-            });
+            e.features.forEach((olFeature) => this.updateGeometryInState(olFeature)); //NOSONAR(typescript:S7728) Collection<?> is a custom Implementation with custom forEach
         });
     }
     addSnapInteraction() {
@@ -142,6 +192,110 @@ export default class OlDrawing {
         this.snap = new Snap({ source: this.drawingSource, pixelTolerance: this.map.pixelTolerance });
         this.map.olMap.addInteraction(this.snap);
     }
+    addTranslateInteraction() {
+        this.removeTranslateInteraction();
+        this.translate = new Translate({
+            condition: (event) => {
+                return this.translate != null && primaryAction(event);
+            },
+            layers: [this.drawingLayer]
+        });
+        this.map.olMap.addInteraction(this.translate);
+    }
+    removeTranslateInteraction() {
+        if (this.translate) {
+            this.map.olMap.removeInteraction(this.translate);
+            this.translate = null;
+        }
+    }
+    addRotateAndScaleInteraction() {
+        this.removeRotateAndScaleInteraction();
+        const defaultStyle = this.defaultStyle;
+        const getCoordinates = (feature) => {
+            const geometry = feature.getGeometry();
+            if (geometry instanceof Point) {
+                return geometry.getCoordinates();
+            }
+            else if (geometry instanceof LineString) {
+                return geometry.getCoordinates()[0];
+            }
+            else if (geometry instanceof Polygon) {
+                return geometry.getCoordinates()[0][0];
+            }
+            return [];
+        };
+        this.rotateAndScale = new Modify({
+            features: this.modifiableFeatures,
+            condition: (event) => {
+                return this.rotateAndScale != null && primaryAction(event);
+            },
+            deleteCondition: never,
+            insertVertexCondition: never,
+            style: function (feature, resolution) {
+                feature.get('features').forEach(function (modifyFeature) {
+                    const modifyGeometry = modifyFeature.get('modifyGeometry');
+                    if (modifyGeometry) {
+                        const point = getCoordinates(feature);
+                        let modifyPoint = modifyGeometry.point;
+                        if (!modifyPoint) {
+                            // save the initial geometry and vertex position
+                            modifyPoint = point;
+                            modifyGeometry.point = modifyPoint;
+                            modifyGeometry.geometry0 = modifyGeometry.geometry;
+                            // get anchor and minimum radius of vertices to be used
+                            const result = calculateCenter(modifyGeometry.geometry0);
+                            modifyGeometry.center = result.center;
+                            modifyGeometry.minRadius = result.minRadius;
+                        }
+                        const center = modifyGeometry.center;
+                        const minRadius = modifyGeometry.minRadius;
+                        let dx, dy;
+                        dx = modifyPoint[0] - center[0];
+                        dy = modifyPoint[1] - center[1];
+                        const initialRadius = Math.hypot(dx, dy);
+                        if (initialRadius > minRadius) {
+                            const initialAngle = Math.atan2(dy, dx);
+                            dx = point[0] - center[0];
+                            dy = point[1] - center[1];
+                            const currentRadius = Math.hypot(dx, dy);
+                            if (currentRadius > 0) {
+                                const currentAngle = Math.atan2(dy, dx);
+                                const geometry = modifyGeometry.geometry0.clone();
+                                geometry.scale(currentRadius / initialRadius, undefined, center);
+                                geometry.rotate(currentAngle - initialAngle, center);
+                                modifyGeometry.geometry = geometry;
+                            }
+                        }
+                    }
+                });
+                return defaultStyle(feature, resolution);
+            }
+        });
+        this.rotateAndScale.on('modifystart', function (event) {
+            // prettier-ignore
+            event.features.forEach(function (feature) {
+                feature.set('modifyGeometry', { geometry: feature.getGeometry().clone() }, true);
+            });
+        });
+        this.rotateAndScale.on('modifyend', (event) => {
+            // prettier-ignore
+            event.features.forEach((olFeature) => {
+                const modifyGeometry = olFeature.get('modifyGeometry');
+                if (modifyGeometry) {
+                    olFeature.setGeometry(modifyGeometry.geometry);
+                    olFeature.unset('modifyGeometry', true);
+                    this.updateGeometryInState(olFeature);
+                }
+            });
+        });
+        this.map.olMap.addInteraction(this.rotateAndScale);
+    }
+    removeRotateAndScaleInteraction() {
+        if (this.rotateAndScale) {
+            this.map.olMap.removeInteraction(this.rotateAndScale);
+            this.rotateAndScale = null;
+        }
+    }
     /**
      * Adds a context menu to the map with a single entry 'remove vertex'. The menu is configured to open
      * when the user does an alternate click ( = context event) on or near a vertex of a modifiable feature.
@@ -150,7 +304,7 @@ export default class OlDrawing {
         this.removeEditContextMenu();
         const menuEntries = [
             {
-                entry: 'Remove vertex',
+                entry: 'Remove Vertex',
                 callback: (_evt, mapCoordinate) => {
                     const successful = this.removeLastInteractedVertex();
                     if (!successful) {
@@ -161,7 +315,43 @@ export default class OlDrawing {
                             type: 'warning'
                         });
                     }
-                }
+                },
+                prepare: this.prepareMenuEntriesForVertex
+            },
+            {
+                entry: 'Move Shape',
+                callback: (_evt, _mapCoordinate) => {
+                    if (this.lastClosestFeature) {
+                        this.removeModifyInteraction();
+                        this.addTranslateInteraction();
+                        this.map.olMap.on('singleclick', () => {
+                            this.removeTranslateInteraction();
+                            this.addModifyInteraction();
+                        });
+                    }
+                },
+                prepare: this.prepareMenuEntriesForShape
+            },
+            {
+                entry: 'Rotate/Scale Shape',
+                callback: (_evt, _mapCoordinate) => {
+                    if (this.lastClosestFeature) {
+                        this.removeModifyInteraction();
+                        this.addRotateAndScaleInteraction();
+                        this.map.olMap.on('singleclick', () => {
+                            this.removeRotateAndScaleInteraction();
+                            this.addModifyInteraction();
+                        });
+                    }
+                },
+                prepare: this.prepareMenuEntriesForShape
+            },
+            {
+                entry: 'Remove Shape',
+                callback: (_evt, _mapCoordinate) => {
+                    this.removeLastInteractedShape();
+                },
+                prepare: this.prepareMenuEntriesForShape
             }
         ];
         const conditionToOpen = (_evt, mapCoordinate) => {
@@ -169,7 +359,7 @@ export default class OlDrawing {
                 return false;
             }
             // Only proceed if there is an editable vertex under the mouse pointer
-            return this.hasEditableVertexAtCoordinate(mapCoordinate);
+            return this.hasEditableShapeAtCoordinate(mapCoordinate) || this.hasEditableVertexAtCoordinate(mapCoordinate);
         };
         this.editContextMenu = new ContextMenu(this.context, menuEntries, true, conditionToOpen);
     }
@@ -190,6 +380,16 @@ export default class OlDrawing {
             this.removeSnapInteraction();
         }
     }
+    prepareMenuEntriesForVertex = (_e, mapCoordinate) => {
+        return this.hasEditableVertexAtCoordinate(mapCoordinate)
+            ? EntryInteractionType.ENABLED
+            : EntryInteractionType.NOT_SHOWN;
+    };
+    prepareMenuEntriesForShape = (_e, mapCoordinate) => {
+        return this.hasEditableShapeAtCoordinate(mapCoordinate)
+            ? EntryInteractionType.ENABLED
+            : EntryInteractionType.NOT_SHOWN;
+    };
     /**
      Check if there is a vertex of a selected (=editable) feature within the pixel tolerance of the clicked coordinates.
      */
@@ -203,13 +403,23 @@ export default class OlDrawing {
             const clickAsPixel = this.map.olMap.getPixelFromCoordinate(coordinate);
             const dx = vertexAsPixel[0] - clickAsPixel[0];
             const dy = vertexAsPixel[1] - clickAsPixel[1];
-            const distanceToVertex = Math.sqrt(dx * dx + dy * dy);
+            const distanceToVertex = Math.hypot(dx, dy);
             if (distanceToVertex < this.map.pixelTolerance) {
                 return true;
             }
         }
         return false;
     }
+    hasEditableShapeAtCoordinate(coordinate) {
+        const filter = (olFeature) => this.modifiableFeatures.getArray().some((editFeature) => olFeature == editFeature);
+        // Use filter to only query currently selected features
+        const closestElements = this.getClosestVertexAndFeature(coordinate, filter);
+        if (closestElements) {
+            const closestFeature = closestElements[1];
+            return closestFeature.getGeometry()?.containsXY(coordinate[0], coordinate[1]) ?? false;
+        }
+        return false;
+    }
     /**
      Returns the closest vertex and feature to a coordinate from the drawing source.
      The feature source can be pre-filtered via an optional filter function.
@@ -218,10 +428,12 @@ export default class OlDrawing {
         const olFeature = this.drawingSource.getClosestFeatureToCoordinate(coordinate, filter);
         const geometry = olFeature?.getGeometry();
         if (geometry && olFeature) {
+            this.lastClosestFeature = olFeature;
             const vertices = extractVerticesFromGeometry(geometry);
             const closestVertex = vertices.getClosestPoint(coordinate);
             return [closestVertex, olFeature];
         }
+        this.lastClosestFeature = null;
         return undefined;
     }
     /**
@@ -231,6 +443,14 @@ export default class OlDrawing {
     removeLastInteractedVertex() {
         return this.modify?.removePoint();
     }
+    removeLastInteractedShape() {
+        if (this.lastClosestFeature) {
+            this.deleteHandler(this.lastClosestFeature.getId());
+            this.lastClosestFeature = null;
+            return true;
+        }
+        return false;
+    }
     /**
      * Adds features to the drawing source if they are missing and updates their style each time a property changes.
      * Adding them to the source is only necessary if the feature originates from a deserialized state and not
@@ -239,7 +459,7 @@ export default class OlDrawing {
      * @param {DrawingFeature[]} dFeatures - An array of `DrawingFeature` objects to be added.
      */
     addFeatures(dFeatures) {
-        dFeatures.forEach((df) => {
+        for (const df of dFeatures) {
             let olFeature = this.getOlFeatureFromDrawingSource(df.id);
             if (olFeature === null) {
                 olFeature = this.createOlFeature(df);
@@ -247,7 +467,7 @@ export default class OlDrawing {
             }
             df.onChange = (df) => olFeature.setStyle((f) => this.getStyle(df, f));
             df.onChange(df);
-        });
+        }
     }
     /**
      * Deletes the provided features from the drawing source.
@@ -255,12 +475,12 @@ export default class OlDrawing {
      * @param {DrawingFeature[]} dFeatures - The list of features to be deleted.
      */
     deleteFeatures(dFeatures) {
-        dFeatures.forEach((df) => {
+        for (const df of dFeatures) {
             const toRemove = this.getOlFeatureFromDrawingSource(df.id);
             if (toRemove !== null) {
                 this.drawingSource.removeFeature(toRemove);
             }
-        });
+        }
         this.updateModifiableFeatures();
     }
     /**
@@ -269,12 +489,12 @@ export default class OlDrawing {
     updateModifiableFeatures() {
         const selectedDrawingFeatures = this.drawingState.features.filter((f) => f.selected);
         this.modifiableFeatures.clear();
-        selectedDrawingFeatures.forEach((df) => {
+        for (const df of selectedDrawingFeatures) {
             const olFeature = this.getOlFeatureFromDrawingSource(df.id);
             if (olFeature) {
                 this.modifiableFeatures.push(olFeature);
             }
-        });
+        }
         // Only activate interaction if there are features to modify
         if (this.modifiableFeatures.getLength() > 0) {
             this.addEditInteractions();
@@ -397,7 +617,7 @@ export default class OlDrawing {
             geometryFunction: geomFunction,
             // Default condition for ol drawing is noModifierKeys(e)
             // canExecute: If another tool is exclusively drawing, this interaction will be prevented from reacting
-            condition: (e) => noModifierKeys(e) && this.canExecute('map.draw'),
+            condition: (e) => primaryAction(e) && this.canExecute('map.draw'),
             style: (f) => this.getStyle(new DrawingFeature(tool, this.drawingState, this.config.drawing), f)
         });
         this.draw.on('drawend', () => {
@@ -417,11 +637,13 @@ export default class OlDrawing {
     }
     // TODO Move as much parameters as possible into DrawingFeature
     getStyle(dFeature, olFeature) {
-        const geometry = olFeature.getGeometry();
+        const modifyGeometry = olFeature.get('modifyGeometry');
+        const geometry = modifyGeometry ? modifyGeometry.geometry : olFeature.getGeometry();
         const measureFont = 'Bold ' + dFeature.measureFontSize + 'px/1 ' + dFeature.font;
         const nameFont = 'Bold ' + dFeature.nameFontSize + 'px/1 ' + dFeature.font;
         const measureColor = 'rgba(0, 0, 0, 0.4)';
         const defaultStyle = new Style({
+            geometry: geometry,
             // need to explicitly mention lineCap: round, so that MapfishPrint does not use butted as default
             stroke: new Stroke({
                 color: dFeature.strokeColor,
@@ -576,7 +798,7 @@ export default class OlDrawing {
             addLabel(getHalfPoint(segment), dFeature.getLengthText(getDistance(segment, this.state.projection)));
             addLabel(square.getInteriorPoint(), dFeature.getAreaText(getArea(square, this.state.projection)));
         }
-        if (dFeature.selected) {
+        if (dFeature.selected && this.rotateAndScale == null) {
             const vertexStyle = dFeature.getVertexStyle();
             // Add a node style to every vertex of the geometry
             vertexStyle.setGeometry(function (f) {
@@ -587,6 +809,35 @@ export default class OlDrawing {
             });
             styles.push(vertexStyle);
         }
+        // Draw Point/Circle for Center of Geometry if rotating/scaling
+        if (this.rotateAndScale != null) {
+            const result = calculateCenter(geometry);
+            const center = result.center;
+            if (center) {
+                styles.push(new Style({
+                    geometry: new Point(center),
+                    image: new CircleStyle({
+                        radius: 4,
+                        fill: new Fill({
+                            color: '#ff3333'
+                        })
+                    })
+                }));
+                const coordinates = result.coordinates;
+                if (coordinates) {
+                    const minRadius = result.minRadius;
+                    const sqDistances = result.sqDistances;
+                    const rsq = minRadius * minRadius;
+                    const points = coordinates.filter(function (_c, index) {
+                        return sqDistances[index] > rsq;
+                    });
+                    const vertexStyle = dFeature.getVertexStyle();
+                    // Add a node style to every vertex of the geometry
+                    vertexStyle.setGeometry(new MultiPoint(points));
+                    styles.push(vertexStyle);
+                }
+            }
+        }
         return styles;
     }
     ensurePolygonIsProperlyClosed(polygon) {

package/components/map/component.js

@@ -45,7 +45,7 @@ export default class MapComponent extends GirafeHTMLElement {
         return uHtml `<style>
 *{font-family:Arial,sans-serif}.hidden{display:none!important}.gg-rotate90{transform:rotate(90deg)}.gg-rotate180{transform:rotate(180deg)}.gg-rotate270{transform:rotate(270deg)}img{filter:var(--svg-filter)}img.legend-image{filter:var(--svg-map-filter);background:var(--svg-legend-bkg)}div{scrollbar-width:thin}a,a:visited{color:var(--link-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-wait{0%{transform:rotate(0)}7%{transform:rotate(360deg)}to{transform:rotate(360deg)}}.gg-spin{animation-name:spin;animation-duration:2s;animation-timing-function:linear;animation-iteration-count:infinite}.gg-spin-wait{animation-name:spin-wait;animation-duration:10s;animation-timing-function:linear;animation-iteration-count:infinite}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:#999}.gg-button,.gg-select,.gg-input,.gg-textarea{background-color:var(--bkg-color);color:var(--text-color);border:var(--app-standard-border);box-sizing:border-box;cursor:pointer;border-radius:3px;outline:0;margin:0;padding:0 0 0 .5rem;display:inline-block}.gg-label{background-color:var(--bkg-color);color:var(--text-color);border:none;align-items:center;margin:0;padding:0;display:flex}.gg-button,.gg-select,.gg-input,.gg-label{min-height:calc(var(--app-standard-height)/1.5)}.gg-textarea{max-height:initial;resize:vertical;height:6rem;padding:.5rem;line-height:1.3rem}.gg-input{cursor:text}.gg-checkbox{accent-color:var(--text-color);width:1.2rem}.gg-range{accent-color:var(--text-color)}.gg-button{padding:0 .5rem}.gg-button.active{border:solid 1px var(--text-color-grad2);background-color:var(--text-color-grad2);color:var(--bkg-color)}.gg-button:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3;border:none}.gg-input:disabled,.gg-select:disabled,.gg-textarea:disabled{color:gray;cursor:not-allowed;background-color:#d3d3d3}.gg-button>img{vertical-align:middle}.gg-icon-button{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;flex-direction:column;justify-content:center;align-items:center;padding:0;display:flex}.gg-big,.gg-big-withtext{min-width:var(--app-standard-height);min-height:var(--app-standard-height);max-height:var(--app-standard-height)}.gg-big img,.gg-big-withtext img{width:calc(var(--app-standard-height) - 1.5rem);margin:0}.gg-big-withtext span{font-variant:small-caps;padding:0 1rem;font-size:.9rem}.gg-medium,.gg-medium-withtext{min-width:calc(var(--app-standard-height)/1.2);min-height:calc(var(--app-standard-height)/1.2);max-height:calc(var(--app-standard-height)/1.2);flex-direction:row}.gg-medium img{width:calc(var(--app-standard-height)/2.4);margin:0}.gg-medium-withtext img{width:calc(var(--app-standard-height)/2.4);margin-left:.5rem}.gg-medium-withtext span{padding:0 1rem 0 .5rem;font-size:.9rem}.gg-small,.gg-small-withtext{min-width:calc(var(--app-standard-height)/2);min-height:calc(var(--app-standard-height)/2);max-height:calc(var(--app-standard-height)/2);flex-direction:row}.gg-small img{width:calc(var(--app-standard-height)/3);margin:0}.gg-small-withtext img{width:calc(var(--app-standard-height)/3);margin-left:.5rem}.gg-small-withtext span{padding:0 .5rem 0 .3rem;font-size:.9rem}.gg-button:hover,.gg-select:hover,.gg-input:hover,.gg-textarea:hover,.gg-icon-button:hover{background-color:var(--bkg-color-grad1)}.gg-opacity{opacity:.5}.gg-opacity:hover{opacity:1;background-color:#0000}.gg-tabs{cursor:pointer;border-bottom:1px solid gray;justify-content:left;align-items:end;gap:1rem;height:2rem;margin:.5rem auto 1rem;display:flex}.gg-tab{cursor:pointer;color:var(--text-color);background:0 0;border:none;padding:.5rem}.gg-tab.active{border-bottom:solid 2px var(--text-color-grad2);font-weight:600}.girafe-button-big,.girafe-button-large,.girafe-button-small,.girafe-button-tiny{color:var(--text-color);background-color:#0000;border:none;flex-direction:column;display:flex}.girafe-button-big:hover,.girafe-button-large:hover,.girafe-button-small:hover,.girafe-button-tiny:hover{background-color:var(--bkg-color-grad1);cursor:pointer}.girafe-button-big.dark,.girafe-button-large.dark,.girafe-button-small.dark,.girafe-button-tiny.dark{background-color:var(--bkg-color);filter:invert()}.girafe-button-big{width:var(--app-standard-height);height:var(--app-standard-height);align-items:center;padding:1rem}.girafe-button-big img{overflow:hidden}.girafe-button-large{flex-direction:row}.girafe-button-large img{height:2rem;margin:.3rem}.girafe-button-large span{height:2rem;margin:.3rem;line-height:2rem}.girafe-button-small{min-width:calc(var(--app-standard-height)/2);height:calc(var(--app-standard-height)/2);align-items:center;padding:.5rem}.girafe-button-small img{overflow:hidden}.girafe-button-small span{text-align:left;text-overflow:ellipsis;width:100%;overflow:hidden}.girafe-button-tiny{align-items:center;width:1rem;height:1rem;padding:0}.girafe-button-tiny img{overflow:hidden}
 </style><style>
-#container,#ol-map{background-color:var(--bkg-color);width:100%;height:100%;position:relative}#ol-map.darkmap canvas{filter:invert()hue-rotate(180deg)}.hidden{display:none}.center{text-align:center;margin:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading span{color:var(--text-color);margin-top:1rem;font-weight:600;display:block}.loading span.quote{font-style:italic;font-weight:300}#cs-map{background-color:var(--bkg-color);border-left:3px solid #444;height:100%;display:none;position:absolute;overflow:hidden}.ol-control{background-color:#0000;border:none;box-shadow:0 1px 4px #0000004d;right:2rem!important;left:unset!important}.ol-zoom{top:2rem!important}.ol-rotate{top:9.3rem!important}.ol-location{top:7rem!important}.img-location{width:55%;height:auto}.ol-zoom-in,.ol-zoom-out,.btn-location,.ol-rotate-reset{cursor:pointer;background-color:#fff;width:2rem!important;height:2rem!important;font-size:1.2rem!important}.ol-scale-line{bottom:.5rem!important;right:1rem!important;left:unset!important}.ol-popup{background-color:var(--bkg-color);color:var(--text-color);box-shadow:0 1px 4px var(--bx-shdw);border:1px solid var(--text-color-grad1);border-radius:10px;min-width:140px;padding:15px;position:absolute;bottom:12px;left:-50px}.ol-popup:after,.ol-popup:before{content:" ";pointer-events:none;border:solid #0000;width:0;height:0;position:absolute;top:100%}.ol-popup:after{border-top-color:var(--bkg-color);border-width:10px;margin-left:-10px;left:48px}.ol-popup:before{border-top-color:var(--text-color-grad1);border-width:11px;margin-left:-11px;left:48px}.ol-popup-closer{background-color:var(--bkg-color);color:var(--text-color);cursor:pointer;text-decoration:none;position:absolute;top:2px;right:8px}.ol-popup-closer:after{content:"✖"}#swiper{width:99%;height:0;display:none;position:absolute;top:50%;left:.5%}input[type=range]{-webkit-appearance:none;width:100%}input[type=range]::-webkit-slider-runnable-track{height:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:6px;height:0;margin-top:-1000px;padding-top:1000px;padding-bottom:1000px}input[type=range]::-moz-range-thumb{background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:3px;height:0;padding-top:1000px;padding-bottom:1000px}.close-swiper{background-color:var(--ol-background-color);width:2rem;height:2rem;color:var(--ol-subtle-foreground-color);cursor:pointer;border-width:1px;border-radius:4px;display:none;position:absolute;top:0;transform:translate(-3px)}.close-swiper:hover,.close-swiper:focus{outline:1px solid var(--ol-subtle-foreground-color);color:var(--ol-foreground-color)}.ol-viewport .tooltip{color:#fff;opacity:.7;white-space:nowrap;background:#00000080;border-radius:0;padding:.32rem .62rem;position:relative}@media screen and (hover:none){.ol-zoom,.ol-rotate,.ol-location{display:none!important}}.contextmenu{background-color:var(--bkg-color);color:var(--text-color);border:1px solid #ccc;box-shadow:1px 3px 4px #0006;& .hidden{display:none}& .menu-entry{cursor:pointer;padding:10px}}
+#container,#ol-map{background-color:var(--bkg-color);width:100%;height:100%;position:relative}#ol-map.darkmap canvas{filter:invert()hue-rotate(180deg)}.hidden{display:none}.center{text-align:center;margin:10px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading span{color:var(--text-color);margin-top:1rem;font-weight:600;display:block}.loading span.quote{font-style:italic;font-weight:300}#cs-map{background-color:var(--bkg-color);border-left:3px solid #444;height:100%;display:none;position:absolute;overflow:hidden}.ol-control{background-color:#0000;border:none;box-shadow:0 1px 4px #0000004d;right:2rem!important;left:unset!important}.ol-zoom{top:2rem!important}.ol-rotate{top:9.3rem!important}.ol-location{top:7rem!important}.img-location{width:55%;height:auto}.ol-zoom-in,.ol-zoom-out,.btn-location,.ol-rotate-reset{cursor:pointer;background-color:#fff;width:2rem!important;height:2rem!important;font-size:1.2rem!important}.ol-scale-line{bottom:.5rem!important;right:1rem!important;left:unset!important}.ol-popup{background-color:var(--bkg-color);color:var(--text-color);box-shadow:0 1px 4px var(--bx-shdw);border:1px solid var(--text-color-grad1);border-radius:10px;min-width:140px;padding:15px;position:absolute;bottom:12px;left:-50px}.ol-popup:after,.ol-popup:before{content:" ";pointer-events:none;border:solid #0000;width:0;height:0;position:absolute;top:100%}.ol-popup:after{border-top-color:var(--bkg-color);border-width:10px;margin-left:-10px;left:48px}.ol-popup:before{border-top-color:var(--text-color-grad1);border-width:11px;margin-left:-11px;left:48px}.ol-popup-closer{background-color:var(--bkg-color);color:var(--text-color);cursor:pointer;text-decoration:none;position:absolute;top:2px;right:8px}.ol-popup-closer:after{content:"✖"}#swiper{width:99%;height:0;display:none;position:absolute;top:50%;left:.5%}input[type=range]{-webkit-appearance:none;width:100%}input[type=range]::-webkit-slider-runnable-track{height:0}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:6px;height:0;margin-top:-1000px;padding-top:1000px;padding-bottom:1000px}input[type=range]::-moz-range-thumb{background:var(--bkg-color);cursor:ew-resize;border:2px solid #444;width:3px;height:0;padding-top:1000px;padding-bottom:1000px}.close-swiper{background-color:var(--ol-background-color);width:2rem;height:2rem;color:var(--ol-subtle-foreground-color);cursor:pointer;border-width:1px;border-radius:4px;display:none;position:absolute;top:0;transform:translate(-3px)}.close-swiper:hover,.close-swiper:focus{outline:1px solid var(--ol-subtle-foreground-color);color:var(--ol-foreground-color)}.ol-viewport .tooltip{color:#fff;opacity:.7;white-space:nowrap;background:#00000080;border-radius:0;padding:.32rem .62rem;position:relative}@media screen and (hover:none){.ol-zoom,.ol-rotate,.ol-location{display:none!important}}.contextmenu{background-color:var(--bkg-color);color:var(--text-color);border:1px solid #ccc;box-shadow:1px 3px 4px #0006;& .hidden{display:none}& .menu-entry{cursor:pointer;padding:10px}& .menu-entry:hover{background-color:var(--bkg-color-grad1)}& .menu-entry[aria-disabled=true]{pointer-events:none;color:var(--text-color-grad1)}}
 </style>
 <link rel="stylesheet" href="lib/ol/ol.css"><div id="container"><div id="ol-map"></div><div class="ol-location ol-unselectable ol-control"><button onclick="${() => this.locateUser()}" class="btn-location"><img class="img-location" alt="location-icon" src="icons/adjust.svg"></button></div><div id="cs-map"><div class="${this.loading ? 'loading center' : 'loading hidden'}"><img alt="loading-icon" src="icons/loading.svg" class="gg-spin"> <span i18n="Loading cesium...">Loading cesium...</span> <span class="quote" i18n="cesium-loading-quote">Please be patient, like a giraffe reaching for the tastiest leaves.</span></div></div><input id="swiper" type="range" min="0" max="1000" step="1"> <button tip="Hide Swiper" id="close-swiper" class="close-swiper">×</button></div>`;
     };

package/components/map/tools/contextmenu.d.ts

@@ -1,8 +1,14 @@
 import { Coordinate } from 'ol/coordinate';
 import IGirafeContext from '../../../tools/context/icontext';
+export declare enum EntryInteractionType {
+    ENABLED = 0,
+    DISABLED = 1,
+    NOT_SHOWN = 2
+}
 export type MenuEntry = {
     entry: string;
     callback: (e: MouseEvent, mapCoordinate: Coordinate) => void;
+    prepare?: (e: MouseEvent, mapCoordinate: Coordinate) => EntryInteractionType;
 };
 /**
  * Show a simple context menu when clicking on the map
@@ -16,6 +22,8 @@ export declare class ContextMenu {
     private readonly openEventListener;
     private readonly closeEventListener;
     private readonly context;
+    private readonly menuEntries;
+    private menuEntryDivs;
     private get map();
     constructor(context: IGirafeContext, menuEntries?: MenuEntry[], isExclusive?: boolean, openCondition?: (evt: PointerEvent | MouseEvent, mapCoordinate: Coordinate) => boolean);
     get visible(): boolean;
@@ -24,7 +32,8 @@ export declare class ContextMenu {
     private enable;
     private disable;
     private handleContextmenuEvent;
-    updateMenuEntries(menuEntries: MenuEntry[]): void;
+    updateMenuEntries(): void;
+    prepareMenuEntries(evt: PointerEvent | MouseEvent, mapCoordinate: Coordinate): void;
     openMenu(mapCoordinates: Coordinate): void;
     closeMenu(): void;
     onClickMenuEntry(evt: PointerEvent | MouseEvent, callback: (e: PointerEvent | MouseEvent, mapCoordinate: Coordinate) => void): void;

package/components/map/tools/contextmenu.js

@@ -1,5 +1,11 @@
 import { Overlay } from 'ol';
 import { v4 as uuidv4 } from 'uuid';
+export var EntryInteractionType;
+(function (EntryInteractionType) {
+    EntryInteractionType[EntryInteractionType["ENABLED"] = 0] = "ENABLED";
+    EntryInteractionType[EntryInteractionType["DISABLED"] = 1] = "DISABLED";
+    EntryInteractionType[EntryInteractionType["NOT_SHOWN"] = 2] = "NOT_SHOWN";
+})(EntryInteractionType || (EntryInteractionType = {}));
 /**
  * Show a simple context menu when clicking on the map
  */
@@ -12,17 +18,20 @@ export class ContextMenu {
     openEventListener;
     closeEventListener;
     context;
+    menuEntries;
+    menuEntryDivs = {};
     get map() {
         return this.context.mapManager.getMap();
     }
     constructor(context, menuEntries = [], isExclusive = false, openCondition = () => true) {
         this.name = `contextmenu-${uuidv4()}`;
         this.context = context;
+        this.menuEntries = menuEntries;
         this.isExclusive = isExclusive;
         this.container = document.createElement('div');
         this.container.classList.add('contextmenu');
         this.container.classList.add('hidden');
-        this.updateMenuEntries(menuEntries);
+        this.updateMenuEntries();
         this.overlay = new Overlay({
             element: this.container,
             position: undefined
@@ -84,21 +93,44 @@ export class ContextMenu {
             evt.offsetY / window.devicePixelRatio
         ]);
         if (openCondition(evt, mapCoordinate)) {
+            this.prepareMenuEntries(evt, mapCoordinate);
             this.openMenu(mapCoordinate);
         }
         else {
             evt.stopPropagation();
         }
     }
-    updateMenuEntries(menuEntries) {
+    updateMenuEntries() {
         this.container.replaceChildren('');
-        menuEntries.forEach((entry) => {
+        this.menuEntryDivs = {};
+        for (const entry of this.menuEntries) {
             const div = document.createElement('div');
             div.classList.add('menu-entry');
-            div.innerHTML = entry.entry;
+            div.innerHTML = this.context.i18nManager.getTranslation(entry.entry);
             div.addEventListener('click', (evt) => this.onClickMenuEntry(evt, entry.callback));
             this.container.appendChild(div);
-        });
+            this.menuEntryDivs[entry.entry] = div;
+        }
+    }
+    prepareMenuEntries(evt, mapCoordinate) {
+        for (const entry of this.menuEntries) {
+            const interactionType = entry.prepare?.(evt, mapCoordinate) ?? EntryInteractionType.ENABLED;
+            const menuEntryDiv = this.menuEntryDivs[entry.entry];
+            switch (interactionType) {
+                case EntryInteractionType.ENABLED:
+                    menuEntryDiv.ariaDisabled = 'false';
+                    menuEntryDiv.style.display = 'block';
+                    break;
+                case EntryInteractionType.DISABLED:
+                    menuEntryDiv.ariaDisabled = 'true';
+                    menuEntryDiv.style.display = 'block';
+                    break;
+                case EntryInteractionType.NOT_SHOWN:
+                    menuEntryDiv.ariaDisabled = 'true';
+                    menuEntryDiv.style.display = 'none';
+                    break;
+            }
+        }
     }
     openMenu(mapCoordinates) {
         if (!this.container.parentNode) {

package/components/modals/component.js

@@ -19,9 +19,9 @@ class ModalsComponent extends GirafeHTMLElement {
     constructor() {
         super('native-modals');
     }
-    initBox(type, message, title, placeholder) {
+    initBox(type, message, messageHandler, title, placeholder) {
         this.boxType = type;
-        this.boxMessage = this.context.i18nManager.getTranslation(message);
+        this.boxMessage = messageHandler(this.context.i18nManager.getTranslation(message));
         if (title) {
             this.boxTitle = this.context.i18nManager.getTranslation(title);
         }
@@ -40,13 +40,13 @@ class ModalsComponent extends GirafeHTMLElement {
         this.refreshRender();
     }
     async promptBox(message, title, placeholder) {
-        this.initBox('prompt', message, title, placeholder);
+        this.initBox('prompt', message, (message) => message, title, placeholder);
         return new Promise((resolve) => {
             this.resolvePrompt = resolve;
         });
     }
-    async alertConfirmBox(type, message, title) {
-        this.initBox(type, message, title);
+    async alertConfirmBox(type, message, title, messageHandler) {
+        this.initBox(type, message, messageHandler, title);
         return new Promise((resolve) => {
             this.resolveAlertConfirm = resolve;
         });
@@ -75,8 +75,9 @@ class ModalsComponent extends GirafeHTMLElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        window.gConfirm = (message, title) => this.alertConfirmBox('confirm', message, title);
-        window.gAlert = (message, title) => this.alertConfirmBox('alert', message, title);
+        const defaultMessageHandler = (translatedMessage) => translatedMessage;
+        window.gConfirm = (message, title, messageHandler) => this.alertConfirmBox('confirm', message, title, messageHandler ?? defaultMessageHandler);
+        window.gAlert = (message, title) => this.alertConfirmBox('alert', message, title ?? '', defaultMessageHandler);
         window.gPrompt = (message, title, placeholder) => this.promptBox(message, title, placeholder);
         this.render();
         super.girafeTranslate();

package/main.tools.d.ts

@@ -11,7 +11,7 @@ declare global {
         CESIUM_BASE_URL: string;
         Cesium: unknown;
         cordova: unknown;
-        gConfirm(message: string, title?: string): Promise<boolean>;
+        gConfirm(message: string, title: string, messageHandler?: (translatedMessage: string) => string): Promise<boolean>;
         gAlert(message: string, title?: string): Promise<boolean>;
         gPrompt(message: string, title?: string, placeholder?: string): Promise<string | false>;
         gOpenWindow(title: string, url: string, width?: string | number, height?: string | number, top?: string | number, left?: string | number): void;

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geomapfish.dev"
   },
-  "version": "1.0.2149179221",
+  "version": "1.0.2152254142",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.0.2149179221", "build":"2149179221", "date":"10/11/2025"}
+{"version":"1.0.2152254142", "build":"2152254142", "date":"11/11/2025"}