@geogirafe/lib-geoportal 1.1.0-dev.2433737633 → 1.1.0-dev.2438155631

package/components/drawing/drawingFeature.d.ts

@@ -1,6 +1,6 @@
 import { Style } from 'ol/style.js';
 import type { IBrainSerializable } from '../../tools/state/brain/decorators.js';
-import type { Geometry } from 'ol/geom.js';
+import type { Circle as CircleGeom, Geometry } from 'ol/geom.js';
 import type Feature from 'ol/Feature.js';
 import IGirafeContext from '../../tools/context/icontext.js';
 export declare enum DrawingShape {
@@ -99,6 +99,7 @@ export default class DrawingFeature {
     getLengthText(length: number): string;
     getAreaText(area: number): string;
     getCoordText(coord: number[]): string;
+    getAzimuthText(circle: CircleGeom): string;
     isPointOrPolyline(): boolean;
     getVertexStyle(activeNode?: boolean): Style;
     static deserialize(serializedFeature: SerializedFeature, context: IGirafeContext): DrawingFeature;

package/components/drawing/drawingFeature.js

@@ -3,7 +3,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { Fill, RegularShape, Stroke, Style } from 'ol/style.js';
 import { toRadians } from 'ol/math.js';
 import GeoJSON from 'ol/format/GeoJSON.js';
-import { getAreaAsMetricText, getLengthAsMetricText } from '../../tools/utils/olutils.js';
+import { getAreaAsMetricText, getAzimuthAsText, getLengthAsMetricText } from '../../tools/utils/olutils.js';
 export var DrawingShape;
 (function (DrawingShape) {
     DrawingShape[DrawingShape["Point"] = 0] = "Point";
@@ -203,6 +203,9 @@ export default class DrawingFeature {
         }
         return 'E ' + coord[0].toFixed(2) + '\nN ' + coord[1].toFixed(2);
     }
+    getAzimuthText(circle) {
+        return getAzimuthAsText(this.displayMeasure ? circle.getProperties()['azimuth'] ?? undefined : undefined);
+    }
     isPointOrPolyline() {
         return (this.type === DrawingShape.Point ||
             this.type === DrawingShape.Polyline ||
@@ -259,12 +262,17 @@ export default class DrawingFeature {
     static geojsonFromOlFeature(olFeature, shapeType) {
         if (shapeType === DrawingShape.Disk) {
             const disk = olFeature.getGeometry();
+            const center = disk.getCenter();
+            const radius = disk.getRadius();
+            const pointer = disk.getProperties()['pointer'] ?? [center[0] + radius, center[1]];
             return {
                 type: 'Feature',
                 geometry: {
                     type: 'Disk',
-                    center: disk.getCenter(),
-                    radius: disk.getRadius()
+                    center: center,
+                    radius: radius,
+                    azimuth: disk.getProperties()['azimuth'] ?? 0,
+                    pointer: pointer,
                 }
             };
         }

package/components/drawing/olDrawing.js

@@ -138,6 +138,25 @@ export default class OlDrawing {
             pixelTolerance: this.map.pixelTolerance
         });
         this.map.olMap.addInteraction(this.modify);
+        this.modify.on('modifystart', (e) => {
+            e.features.forEach((olFeature) => {
+                olFeature.on('change', (e) => {
+                    const geometry = e.target.getGeometry();
+                    if (geometry && geometry.getType() == 'Circle') {
+                        const circle = geometry;
+                        const newRadius = circle.getRadius();
+                        const properties = circle.getProperties();
+                        const { pointer } = properties;
+                        const oldRadiusLine = new LineString([circle.getCenter(), pointer]);
+                        oldRadiusLine.scale(newRadius / oldRadiusLine.getLength());
+                        circle.setProperties({
+                            ...properties,
+                            pointer: oldRadiusLine.getLastCoordinate()
+                        });
+                    }
+                });
+            });
+        });
         // Update the modified geometries in the state
         this.modify.on('modifyend', (e) => {
             e.features.forEach((olFeature) => this.updateGeometryInState(olFeature)); //NOSONAR(typescript:S7728) Collection<?> is a custom Implementation with custom forEach
@@ -434,7 +453,12 @@ export default class OlDrawing {
         const geometry = dFeature.geojson.geometry;
         let olFeature;
         if (geometry.type == 'Disk') {
-            olFeature = new Feature(new CircleGeom(geometry.center, geometry.radius));
+            const geom = new CircleGeom(geometry.center, geometry.radius);
+            geom.setProperties({
+                azimuth: geometry.azimuth,
+                pointer: geometry.pointer
+            });
+            olFeature = new Feature(geom);
         }
         else {
             olFeature = new Feature(new GeoJSON().readFeatures(dFeature.geojson)[0].getGeometry());
@@ -468,6 +492,10 @@ export default class OlDrawing {
         this.fixLastLength(this.fixedLength, coord);
         geom = geom ?? new CircleGeom(coord[0], getDistance(coord, this.state.projection));
         geom.setCenterAndRadius(coord[0], getDistance(coord, this.state.projection));
+        geom.setProperties({
+            azimuth: ((90 - (Math.atan2(coord[1][1] - coord[0][1], coord[1][0] - coord[0][0]) * (180 / Math.PI)) + 360) % 360),
+            pointer: coord[1]
+        });
         return geom;
     }
     addDrawInteraction(tool) {
@@ -661,12 +689,13 @@ export default class OlDrawing {
             addLabel(polygon.getInteriorPoint(), dFeature.getAreaText(getAreaOfPolygon(polygon, this.state.projection)));
         }
         else if (dFeature.type == DrawingShape.Disk) {
-            const radiusDataForCircle = getRadiusDataForCircle(geometry, defaultStyle, new Stroke({ color: measureColor, width: dFeature.strokeWidth }));
-            if (!dFeature.displayMeasure) {
-                radiusDataForCircle.style.setGeometry(new LineString([]));
+            if (dFeature.displayMeasure) {
+                const radiusDataForCircle = getRadiusDataForCircle(geometry, defaultStyle, new Stroke({ color: measureColor, width: dFeature.strokeWidth }));
+                styles.push(radiusDataForCircle.style);
+                const lengthText = dFeature.getLengthText(radiusDataForCircle.radius);
+                const azimuthText = dFeature.getAzimuthText(geometry);
+                addLabel(getHalfPoint(radiusDataForCircle.radiusLine), `${lengthText}, ${azimuthText}`);
             }
-            styles.push(radiusDataForCircle.style);
-            addLabel(getHalfPoint(radiusDataForCircle.radiusLine), dFeature.getLengthText(radiusDataForCircle.radius));
         }
         else if (dFeature.type == DrawingShape.FreehandPolygon) {
             const polygon = geometry;

package/package.json

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

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.1.0-dev.2433737633", "build":"2433737633", "date":"07/04/2026"}
+{"version":"1.1.0-dev.2438155631", "build":"2438155631", "date":"08/04/2026"}

package/tools/main.d.ts

@@ -106,7 +106,7 @@ export { default as UserDataManager } from './userdata/userdatamanager.js';
 export { default as ColumnAliasHelper } from './utils/aliases.js';
 export { debounce } from './utils/debounce.js';
 export { default as GirafeColorPicker } from './utils/girafecolorpicker.js';
-export { unByKeyAll, getOlayerByName, removeUnwantedOlParams, polygonFromCircle, getDistance, getAreaOfPolygon, getAreaOfCircle, isCoordinateInDegrees, getSelectionBoxFromMapClick, reprojectGeometry, ensurePolygonIsProperlyClosed, getHalfPoint, getLabelStyle, getRadiusDataForCircle, getLengthAsMetricText, getAreaAsMetricText } from './utils/olutils.js';
+export { unByKeyAll, getOlayerByName, removeUnwantedOlParams, polygonFromCircle, getDistance, getAreaOfPolygon, getAreaOfCircle, isCoordinateInDegrees, getSelectionBoxFromMapClick, reprojectGeometry, ensurePolygonIsProperlyClosed, getHalfPoint, getLabelStyle, getRadiusDataForCircle, getLengthAsMetricText, getAreaAsMetricText, getAzimuthAsText } from './utils/olutils.js';
 export { getPropertyByPath, setPropertyByPath, createObjectFromPath, deletePropertyByPath, mergeObjects } from './utils/pathUtils.js';
 export { generateQrCode } from './utils/qrcode.js';
 export { default as ServiceWorkerHelper } from './utils/swhelper.js';

package/tools/main.js

@@ -81,7 +81,7 @@ export { default as UserDataManager } from './userdata/userdatamanager.js';
 export { default as ColumnAliasHelper } from './utils/aliases.js';
 export { debounce } from './utils/debounce.js';
 export { default as GirafeColorPicker } from './utils/girafecolorpicker.js';
-export { unByKeyAll, getOlayerByName, removeUnwantedOlParams, polygonFromCircle, getDistance, getAreaOfPolygon, getAreaOfCircle, isCoordinateInDegrees, getSelectionBoxFromMapClick, reprojectGeometry, ensurePolygonIsProperlyClosed, getHalfPoint, getLabelStyle, getRadiusDataForCircle, getLengthAsMetricText, getAreaAsMetricText } from './utils/olutils.js';
+export { unByKeyAll, getOlayerByName, removeUnwantedOlParams, polygonFromCircle, getDistance, getAreaOfPolygon, getAreaOfCircle, isCoordinateInDegrees, getSelectionBoxFromMapClick, reprojectGeometry, ensurePolygonIsProperlyClosed, getHalfPoint, getLabelStyle, getRadiusDataForCircle, getLengthAsMetricText, getAreaAsMetricText, getAzimuthAsText } from './utils/olutils.js';
 export { getPropertyByPath, setPropertyByPath, createObjectFromPath, deletePropertyByPath, mergeObjects } from './utils/pathUtils.js';
 export { generateQrCode } from './utils/qrcode.js';
 export { default as ServiceWorkerHelper } from './utils/swhelper.js';

package/tools/utils/olutils.d.ts

@@ -48,3 +48,4 @@ export declare const getRadiusDataForCircle: (circle: Circle, defaultStyle: Styl
 };
 export declare const getLengthAsMetricText: (length?: number) => string;
 export declare const getAreaAsMetricText: (area?: number) => string;
+export declare const getAzimuthAsText: (azimuth?: number) => string;

package/tools/utils/olutils.js

@@ -148,7 +148,8 @@ export const getLabelStyle = (position, text, labelStyle) => {
 export const getRadiusDataForCircle = (circle, defaultStyle, stroke) => {
     const radius = circle.getRadius();
     const center = circle.getCenter();
-    const radiusLine = [center, [center[0] + radius, center[1]]];
+    const pointer = circle.getProperties()['pointer'] ?? [center[0] + radius, center[1]];
+    const radiusLine = [center, pointer];
     const radiusLineStyle = defaultStyle.clone();
     radiusLineStyle.setStroke(stroke);
     radiusLineStyle.getText().setText('');
@@ -173,3 +174,9 @@ export const getAreaAsMetricText = (area) => {
     }
     return '';
 };
+export const getAzimuthAsText = (azimuth) => {
+    if (azimuth) {
+        return `${azimuth.toFixed(0)}°`;
+    }
+    return '';
+};