@geogirafe/lib-geoportal 1.2.0-dev.2729313771 → 1.2.0-dev.2736532702

package/components/drawing/component.js

@@ -319,17 +319,19 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         }
     }
     onProjectionChanged(oldProj, newProj) {
-        if (oldProj != null && oldProj != newProj) {
-            const geoJson = new GeoJSON();
-            const features = [...this.drawingState.features];
-            features.forEach((f) => {
-                // TODO Handle the case of disks
-                f.geojson = geoJson.writeFeatureObject(geoJson.readFeature(f.geojson, { dataProjection: oldProj, featureProjection: newProj }));
-            });
-            // Refresh all the listeners
-            this.drawingState.features = [];
-            this.drawingState.features = features;
+        if (oldProj === null || oldProj === newProj) {
+            return;
         }
+        const features = [...this.drawingState.features];
+        features.forEach((f) => {
+            const transformedGeoJson = DrawingFeature.transformGeoJson(f.geojson, oldProj, newProj);
+            if (transformedGeoJson) {
+                f.geojson = transformedGeoJson;
+            }
+        });
+        // Refresh all the listeners
+        this.drawingState.features = [];
+        this.drawingState.features = features;
     }
     onToggleBatchMode() {
         this.batchCreateMode = !this.batchCreateMode;

package/components/selectiontool/component.js

@@ -65,8 +65,8 @@ ${this.htmlUnsafe(this.feedbackTemplateHtml ?? '')}`;
         }
         else if (featureLike.getGeometry()?.getType() == 'Circle') {
             const circle = featureLike.getGeometry();
-            const radiusDataForCircle = getRadiusDataForCircle(circle, this.defaultStyle, new Stroke({ color: 'rgba(0, 0, 0, 0.4)', width: this.drawing.defaultStrokeWidth }));
-            styles.push(radiusDataForCircle.style, getLabelStyle(getHalfPoint(radiusDataForCircle.radiusLine), getLengthAsMetricText(radiusDataForCircle.radius), this.labelStyle), getLabelStyle(new Point(circle.getCenter()), getAreaAsMetricText(getAreaOfCircle(circle, this.state.projection)), this.labelStyle));
+            const radiusDataForCircle = getRadiusDataForCircle(circle, this.state.projection, this.defaultStyle, new Stroke({ color: 'rgba(0, 0, 0, 0.4)', width: this.drawing.defaultStrokeWidth }));
+            styles.push(radiusDataForCircle.style, getLabelStyle(getHalfPoint(radiusDataForCircle.radiusLine), getLengthAsMetricText(radiusDataForCircle.radiusMeter), this.labelStyle), getLabelStyle(new Point(circle.getCenter()), getAreaAsMetricText(getAreaOfCircle(circle, this.state.projection)), this.labelStyle));
         }
         return styles.filter((style) => !!style);
     };

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geogirafe.org"
   },
-  "version": "1.2.0-dev.2729313771",
+  "version": "1.2.0-dev.2736532702",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.2.0-dev.2729313771", "build":"2729313771", "date":"04/08/2026"}
+{"version":"1.2.0-dev.2736532702", "build":"2736532702", "date":"06/08/2026"}

package/tools/drawing/drawingFeature.d.ts

@@ -1,6 +1,7 @@
 import { Style } from 'ol/style.js';
 import { Circle as CircleGeom, Geometry } from 'ol/geom.js';
 import Feature from 'ol/Feature.js';
+import GeoJSON from 'ol/format/GeoJSON.js';
 import IGirafeContext from '../context/icontext.js';
 import DrawingState from './drawingState.js';
 export declare enum DrawingShape {
@@ -37,6 +38,9 @@ export type SerializedFeature = {
     t: DrawingShape;
 };
 export default class DrawingFeature {
+    static readonly geoJSONFormat: GeoJSON<Feature<Geometry, {
+        [x: string]: any;
+    }>>;
     private readonly _tool;
     private _name;
     private _nameColor;
@@ -106,6 +110,11 @@ export default class DrawingFeature {
      * with a limited number of edges to improve support across formats and services.
      */
     static olFeatureFromGeoJson(geoJson: any, circleToPolygonNbEdges?: number): Feature<Geometry>;
+    /**
+     * Transform a geojson (valid object, or disk with its properties) to a new projection.
+     * @returns The transformed geojson object or null.
+     */
+    static transformGeoJson(geoJson: object, oldProj: string, newProj: string): object | null;
     /**
      * Finds a name composed of the shape type and a number.
      * The number starts from how many shapes of the same type are already in the state +1.

package/tools/drawing/drawingFeature.js

@@ -7,6 +7,7 @@ import Feature from 'ol/Feature.js';
 import GeoJSON from 'ol/format/GeoJSON.js';
 import { getAreaAsMetricText, getAzimuthAsText, getLengthAsMetricText } from '../utils/olutils.js';
 import { fromCircle } from 'ol/geom/Polygon.js';
+import LineString from 'ol/geom/LineString.js';
 export var DrawingShape;
 (function (DrawingShape) {
     DrawingShape[DrawingShape["Point"] = 0] = "Point";
@@ -19,6 +20,7 @@ export var DrawingShape;
     DrawingShape[DrawingShape["FreehandPolygon"] = 7] = "FreehandPolygon";
 })(DrawingShape || (DrawingShape = {}));
 export default class DrawingFeature {
+    static geoJSONFormat = new GeoJSON();
     _tool;
     _name;
     _nameColor;
@@ -263,17 +265,18 @@ export default class DrawingFeature {
             const radius = disk.getRadius();
             const pointer = disk.getProperties()['pointer'] ?? [center[0] + radius, center[1]];
             return {
+                id: olFeature.getId(),
                 type: 'Feature',
                 geometry: {
                     type: 'Disk',
                     center: center,
                     radius: radius,
-                    azimuth: disk.getProperties()['azimuth'] ?? 0,
+                    azimuth: disk.get('azimuth') ?? 0,
                     pointer: pointer
                 }
             };
         }
-        return JSON.parse(new GeoJSON().writeFeature(olFeature));
+        return JSON.parse(DrawingFeature.geoJSONFormat.writeFeature(olFeature));
     }
     /**
      * Create an ol feature instance from a geojson object, optionally simplifying circle geometries to polygons
@@ -294,17 +297,54 @@ export default class DrawingFeature {
                 azimuth: geometry.azimuth,
                 pointer: geometry.pointer
             });
-            return new Feature(olGeometry);
+            const feature = new Feature(olGeometry);
+            if (geoJson.id) {
+                feature.setId(geoJson.id);
+            }
+            return feature;
         }
         else {
             // Standard case: parse with GeoJSON format reader
-            const feature = new Feature(new GeoJSON().readFeatures(geoJson)[0].getGeometry());
+            const feature = new Feature(DrawingFeature.geoJSONFormat.readFeatures(geoJson)[0].getGeometry());
             if (Array.isArray(feature)) {
                 throw new TypeError('GeoJSON feature is an array, expected single feature');
             }
             return feature;
         }
     }
+    /**
+     * Transform a geojson (valid object, or disk with its properties) to a new projection.
+     * @returns The transformed geojson object or null.
+     */
+    static transformGeoJson(geoJson, oldProj, newProj) {
+        if (oldProj === null || oldProj === newProj) {
+            return geoJson;
+        }
+        try {
+            if (geoJson.geometry?.type === 'Disk') {
+                // Case of disks that are not a valid geojson object, handle them manually.
+                const olFeature = DrawingFeature.olFeatureFromGeoJson(geoJson);
+                const geom = olFeature.getGeometry();
+                geom?.transform(oldProj, newProj);
+                if (geom) {
+                    const center = geom.getCenter();
+                    const line = new LineString([center, [center[0], center[1] + geom.getRadius()]]);
+                    line.rotate(toRadians((geom.get('azimuth') ?? 0) * -1), center);
+                    geom.set('pointer', line.getLastCoordinate());
+                }
+                return DrawingFeature.geojsonFromOlFeature(olFeature, DrawingShape.Disk);
+            }
+            // Case of valid geojson objects.
+            return DrawingFeature.geoJSONFormat.writeFeatureObject(DrawingFeature.geoJSONFormat.readFeature(geoJson, {
+                dataProjection: oldProj,
+                featureProjection: newProj
+            }));
+        }
+        catch (e) {
+            console.error('Error transforming this draw object to the new projection.', e);
+        }
+        return null;
+    }
     /**
      * Finds a name composed of the shape type and a number.
      * The number starts from how many shapes of the same type are already in the state +1.

package/tools/drawing/olDrawing.js

@@ -528,8 +528,9 @@ export default class OlDrawing {
     createDiskFixedLength(coordinates, geom) {
         const coord = coordinates;
         this.fixLastLength(this.fixedLineLength, coord);
-        geom = geom ?? new CircleGeom(coord[0], getDistance(coord, this.state.projection));
-        geom.setCenterAndRadius(coord[0], getDistance(coord, this.state.projection));
+        const radius = new LineString(coord).getLength();
+        geom ??= new CircleGeom(coord[0], radius);
+        geom.setCenterAndRadius(coord[0], radius);
         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]
@@ -793,9 +794,9 @@ export default class OlDrawing {
         }
         else if (dFeature.type == DrawingShape.Disk) {
             if (dFeature.measureInformation !== 'none') {
-                const radiusDataForCircle = getRadiusDataForCircle(geometry, defaultStyle, new Stroke({ color: measureColor, width: 2 }));
+                const radiusDataForCircle = getRadiusDataForCircle(geometry, this.state.projection, defaultStyle, new Stroke({ color: measureColor, width: 2 }));
                 styles.push(radiusDataForCircle.style);
-                const lengthText = dFeature.getLengthText(radiusDataForCircle.radius);
+                const lengthText = dFeature.getLengthText(radiusDataForCircle.radiusMeter);
                 const azimuthText = dFeature.getAzimuthText(geometry);
                 const textTemplate = dFeature.measureInformation === 'simple' ? lengthText : lengthText + ', ' + azimuthText;
                 addLabel(getHalfPoint(radiusDataForCircle.radiusLine), textTemplate);

package/tools/utils/olutils.d.ts

@@ -43,9 +43,9 @@ export declare const reprojectGeometry: (geometry: Geometry, sourceProjection: P
 export declare const ensurePolygonIsProperlyClosed: (polygon: Polygon) => Coordinate[];
 export declare const getHalfPoint: (coordinates: Coordinate[]) => Point;
 export declare const getLabelStyle: (position: Point, text: string, labelStyle: Style) => Style | undefined;
-export declare const getRadiusDataForCircle: (circle: Circle, defaultStyle: Style, stroke: Stroke) => {
+export declare const getRadiusDataForCircle: (circle: Circle, projection: ProjectionLike, defaultStyle: Style, stroke: Stroke) => {
+    radiusMeter: number;
     style: Style;
-    radius: number;
     radiusLine: Coordinate[];
 };
 export declare const getLengthAsMetricText: (length?: number) => string;

package/tools/utils/olutils.js

@@ -147,9 +147,10 @@ export const getLabelStyle = (position, text, labelStyle) => {
     }
     return undefined;
 };
-export const getRadiusDataForCircle = (circle, defaultStyle, stroke) => {
+export const getRadiusDataForCircle = (circle, projection, defaultStyle, stroke) => {
     const radius = circle.getRadius();
     const center = circle.getCenter();
+    const radiusMeter = getDistance([center, [center[0], center[1] + radius]], projection);
     const pointer = circle.getProperties()['pointer'] ?? [center[0] + radius, center[1]];
     const radiusLine = [center, pointer];
     const radiusLineStyle = defaultStyle.clone();
@@ -157,8 +158,8 @@ export const getRadiusDataForCircle = (circle, defaultStyle, stroke) => {
     radiusLineStyle.getText().setText('');
     radiusLineStyle.setGeometry(new LineString(radiusLine));
     return {
+        radiusMeter,
         style: radiusLineStyle,
-        radius: radius,
         radiusLine: radiusLine
     };
 };