@geogirafe/lib-geoportal 1.1.0-dev.2456794124 → 1.1.0-dev.2463680603

package/components/drawing/olDrawing.d.ts

@@ -33,6 +33,7 @@ export default class OlDrawing {
     lastClosestFeature: Feature | null;
     translate: Translate | null;
     transform: Transform | null;
+    private readonly modifyFeatureChangeListeners;
     defaultStyle: StyleFunction | undefined;
     private readonly updateGeometryInState;
     private get state();
@@ -114,6 +115,12 @@ export default class OlDrawing {
     getStyle(dFeature: DrawingFeature, olFeature: Feature<Geometry>): Style[];
     private removeDrawInteraction;
     private removeModifyInteraction;
+    private getDrawingShapeType;
+    private isSquareOrRectangle;
+    private shouldAllowVertexInsertionAtEvent;
+    private getHoveredModifiableFeatureAtPixel;
+    private applyScaleRotateOnModifyStyle;
+    private clearModifyFeatureChangeListeners;
     private removeSnapInteraction;
     private removeEditContextMenu;
     registerInteractions(): void;

package/components/drawing/olDrawing.js

@@ -10,11 +10,12 @@ import VectorLayer from 'ol/layer/Vector.js';
 import GeoJSON from 'ol/format/GeoJSON.js';
 import { getPointResolution } from 'ol/proj.js';
 import { always, never, primaryAction } from 'ol/events/condition.js';
-import { ensurePolygonIsProperlyClosed, getAreaOfPolygon, getDistance, getHalfPoint, getLabelStyle, getRadiusDataForCircle } from '../../tools/utils/olutils.js';
+import { ensurePolygonIsProperlyClosed, getAreaOfPolygon, getDistance, getHalfPoint, getLabelStyle, getRadiusDataForCircle, unByKeyAll } from '../../tools/utils/olutils.js';
 import { ContextMenu, EntryInteractionType } from '../map/tools/contextmenu.js';
 import { formatCoordinates } from '../../tools/geometrytools.js';
 import { v4 as uuidv4 } from 'uuid';
 import { isAlternateMouseClick, isPrimaryPointerAction } from '../../tools/state/userinteractionevent.js';
+import { calculateCenterAndMinRadius, createScaledAndRotatedGeometry, getGeometryForRendering, shouldAllowVertexInsertionForShape } from './shapeConstraints.js';
 import Transform from 'ol-ext/interaction/Transform.js';
 function getLineStroke(strokeType, lineWidth) {
     switch (strokeType) {
@@ -68,6 +69,7 @@ export default class OlDrawing {
     lastClosestFeature = null;
     translate = null;
     transform = null;
+    modifyFeatureChangeListeners = [];
     defaultStyle;
     updateGeometryInState = (olFeature) => {
         const idx = this.drawingState.features.findIndex((f) => f.id === olFeature.getId());
@@ -127,6 +129,7 @@ export default class OlDrawing {
     }
     addModifyInteraction() {
         this.removeModifyInteraction();
+        const vertexStyle = new DrawingFeature(DrawingShape.Point, this.drawingState, this.config.drawing).getVertexStyle(true);
         this.modify = new Modify({
             features: this.modifiableFeatures,
             // Feature editing is triggered by: 1) primary action = click or touch, 2) alternate mouse click = remove vertex
@@ -135,34 +138,64 @@ export default class OlDrawing {
                 isAlternateMouseClick(e)) &&
                 this.canExecute('map.modify'),
             deleteCondition: never,
-            insertVertexCondition: primaryAction,
-            style: new DrawingFeature(DrawingShape.Point, this.drawingState, this.config.drawing).getVertexStyle(true),
+            // For square/rectangle, we disable vertex insertion only on the hovered shape.
+            insertVertexCondition: (e) => primaryAction(e) && this.shouldAllowVertexInsertionAtEvent(e),
+            style: (feature) => {
+                this.applyScaleRotateOnModifyStyle(feature);
+                return vertexStyle;
+            },
             snapToPointer: true,
             pixelTolerance: this.map.pixelTolerance
         });
         this.map.olMap.addInteraction(this.modify);
         this.modify.on('modifystart', (e) => {
+            this.clearModifyFeatureChangeListeners();
             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()
-                        });
-                    }
-                });
+                const geometry = olFeature.getGeometry();
+                if (!geometry) {
+                    return;
+                }
+                const shapeType = this.drawingState.features.find((f) => f.id === olFeature.getId())?.type;
+                if (shapeType === DrawingShape.Square || shapeType === DrawingShape.Rectangle) {
+                    olFeature.set('modifyGeometry', { geometry: geometry.clone() }, true);
+                }
+                else if (shapeType === DrawingShape.Disk) {
+                    const listener = olFeature.on('change', (e) => {
+                        const geometry = e.target.getGeometry();
+                        if (!geometry) {
+                            return;
+                        }
+                        if (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()
+                            });
+                        }
+                    });
+                    this.modifyFeatureChangeListeners.push(listener);
+                }
             });
         });
         // 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
+            this.clearModifyFeatureChangeListeners();
+            e.features.forEach((olFeature) => {
+                const shapeType = this.drawingState.features.find((f) => f.id === olFeature.getId())?.type;
+                if (shapeType === DrawingShape.Square || shapeType === DrawingShape.Rectangle) {
+                    const modifyGeometry = olFeature.get('modifyGeometry');
+                    if (modifyGeometry?.geometry) {
+                        olFeature.setGeometry(modifyGeometry.geometry);
+                    }
+                    olFeature.unset('modifyGeometry', true);
+                }
+                this.updateGeometryInState(olFeature); //NOSONAR(typescript:S7728) Collection<?> is a custom Implementation with custom forEach
+            });
         });
     }
     addSnapInteraction() {
@@ -302,9 +335,13 @@ export default class OlDrawing {
         }
     }
     prepareMenuEntriesForVertex = (_e, mapCoordinate) => {
-        return this.hasEditableVertexAtCoordinate(mapCoordinate)
-            ? EntryInteractionType.ENABLED
-            : EntryInteractionType.NOT_SHOWN;
+        if (!this.hasEditableVertexAtCoordinate(mapCoordinate)) {
+            return EntryInteractionType.NOT_SHOWN;
+        }
+        if (this.isSquareOrRectangle(this.getDrawingShapeType(this.lastClosestFeature))) {
+            return EntryInteractionType.NOT_SHOWN;
+        }
+        return EntryInteractionType.ENABLED;
     };
     prepareMenuEntriesForShape = (_e, mapCoordinate) => {
         return this.hasEditableShapeAtCoordinate(mapCoordinate)
@@ -621,8 +658,10 @@ export default class OlDrawing {
     }
     // TODO Move as much parameters as possible into DrawingFeature
     getStyle(dFeature, olFeature) {
-        const modifyGeometry = olFeature.get('modifyGeometry');
-        const geometry = modifyGeometry ? modifyGeometry.geometry : olFeature.getGeometry();
+        const geometry = getGeometryForRendering(olFeature);
+        if (!geometry) {
+            return [];
+        }
         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)';
@@ -782,7 +821,7 @@ export default class OlDrawing {
             const vertexStyle = dFeature.getVertexStyle();
             // Add a node style to every vertex of the geometry
             vertexStyle.setGeometry(function (f) {
-                const geom = f?.getGeometry();
+                const geom = getGeometryForRendering(f);
                 if (geom && geom instanceof Geometry) {
                     return extractVerticesFromGeometry(geom);
                 }
@@ -800,11 +839,79 @@ export default class OlDrawing {
         this.context.userInteractionManager.unregisterListener('map.select', this.toolName);
     }
     removeModifyInteraction() {
+        this.clearModifyFeatureChangeListeners();
         if (this.modify) {
             this.map.olMap.removeInteraction(this.modify);
             this.modify = null;
         }
     }
+    getDrawingShapeType(olFeature) {
+        if (!olFeature) {
+            return undefined;
+        }
+        return this.drawingState.features.find((f) => f.id === olFeature.getId())?.type;
+    }
+    isSquareOrRectangle(shapeType) {
+        return shapeType === DrawingShape.Square || shapeType === DrawingShape.Rectangle;
+    }
+    shouldAllowVertexInsertionAtEvent(e) {
+        const hoveredFeature = this.getHoveredModifiableFeatureAtPixel(e.pixel);
+        return shouldAllowVertexInsertionForShape(this.getDrawingShapeType(hoveredFeature));
+    }
+    getHoveredModifiableFeatureAtPixel(pixel) {
+        const modifiableFeatureSet = new Set(this.modifiableFeatures.getArray());
+        const hoveredFeature = this.map.olMap.forEachFeatureAtPixel(pixel, (feature, layer) => {
+            if (!(feature instanceof Feature) || layer !== this.drawingLayer || !modifiableFeatureSet.has(feature)) {
+                return undefined;
+            }
+            return feature;
+        }, {
+            hitTolerance: this.map.pixelTolerance
+        });
+        return hoveredFeature instanceof Feature ? hoveredFeature : null;
+    }
+    applyScaleRotateOnModifyStyle(modifyPointFeature) {
+        const modifyPointGeometry = modifyPointFeature.getGeometry();
+        if (!(modifyPointGeometry instanceof Point)) {
+            return;
+        }
+        const currentPoint = modifyPointGeometry.getCoordinates();
+        const features = modifyPointFeature.get('features');
+        if (!features) {
+            return;
+        }
+        features.forEach((olFeature) => {
+            const shapeType = this.getDrawingShapeType(olFeature);
+            if (!this.isSquareOrRectangle(shapeType)) {
+                return;
+            }
+            const modifyGeometry = olFeature.get('modifyGeometry');
+            if (!modifyGeometry?.geometry) {
+                return;
+            }
+            if (!modifyGeometry.point ||
+                !modifyGeometry.geometry0 ||
+                !modifyGeometry.center ||
+                modifyGeometry.minRadius === undefined) {
+                modifyGeometry.point = [...currentPoint];
+                modifyGeometry.geometry0 = modifyGeometry.geometry;
+                const geometryData = calculateCenterAndMinRadius(modifyGeometry.geometry0);
+                modifyGeometry.center = geometryData.center;
+                modifyGeometry.minRadius = geometryData.minRadius;
+            }
+            if (!modifyGeometry.geometry0 || !modifyGeometry.center || modifyGeometry.minRadius === undefined) {
+                return;
+            }
+            modifyGeometry.geometry = createScaledAndRotatedGeometry(modifyGeometry.geometry0, modifyGeometry.center, modifyGeometry.minRadius, modifyGeometry.point, currentPoint);
+        });
+    }
+    clearModifyFeatureChangeListeners() {
+        if (this.modifyFeatureChangeListeners.length === 0) {
+            return;
+        }
+        unByKeyAll(this.modifyFeatureChangeListeners);
+        this.modifyFeatureChangeListeners.length = 0;
+    }
     removeSnapInteraction() {
         if (this.snap) {
             this.map.olMap.removeInteraction(this.snap);

package/components/drawing/shapeConstraints.d.ts

@@ -0,0 +1,11 @@
+import { Coordinate } from 'ol/coordinate.js';
+import Geometry from 'ol/geom/Geometry.js';
+import Feature from 'ol/Feature.js';
+import { DrawingShape } from './drawingFeature.js';
+export declare function calculateCenterAndMinRadius(geometry: Geometry): {
+    center: Coordinate;
+    minRadius: number;
+};
+export declare function createScaledAndRotatedGeometry(geometry0: Geometry, center: Coordinate, minRadius: number, initialPoint: Coordinate, currentPoint: Coordinate): Geometry;
+export declare function getGeometryForRendering(feature: Feature<Geometry>): Geometry | undefined;
+export declare function shouldAllowVertexInsertionForShape(shapeType: DrawingShape | undefined): boolean;

package/components/drawing/shapeConstraints.js

@@ -0,0 +1,64 @@
+// SPDX-License-Identifier: Apache-2.0
+import { getCenter, getHeight, getWidth } from 'ol/extent.js';
+import LineString from 'ol/geom/LineString.js';
+import Polygon from 'ol/geom/Polygon.js';
+import { DrawingShape } from './drawingFeature.js';
+const EPSILON = 1e-12;
+function sqDistance(a, b) {
+    const dx = a[0] - b[0];
+    const dy = a[1] - b[1];
+    return dx * dx + dy * dy;
+}
+export function calculateCenterAndMinRadius(geometry) {
+    let center;
+    let coordinates;
+    if (geometry instanceof Polygon) {
+        const ring = geometry.getCoordinates()[0];
+        const polygonCoords = ring.slice(0, -1);
+        const x = polygonCoords.reduce((sum, c) => sum + c[0], 0);
+        const y = polygonCoords.reduce((sum, c) => sum + c[1], 0);
+        center = [x / polygonCoords.length, y / polygonCoords.length];
+        coordinates = polygonCoords;
+    }
+    else if (geometry instanceof LineString) {
+        center = geometry.getCoordinateAt(0.5);
+        coordinates = geometry.getCoordinates();
+    }
+    else {
+        center = getCenter(geometry.getExtent());
+    }
+    if (coordinates && coordinates.length > 0) {
+        const maxSqDistance = Math.max(...coordinates.map((coordinate) => sqDistance(coordinate, center)));
+        return {
+            center,
+            minRadius: Math.sqrt(maxSqDistance) / 3
+        };
+    }
+    return {
+        center,
+        minRadius: Math.max(getWidth(geometry.getExtent()), getHeight(geometry.getExtent())) / 3
+    };
+}
+export function createScaledAndRotatedGeometry(geometry0, center, minRadius, initialPoint, currentPoint) {
+    const initialRadius = Math.sqrt(sqDistance(initialPoint, center));
+    if (initialRadius <= minRadius) {
+        return geometry0.clone();
+    }
+    const currentRadius = Math.sqrt(sqDistance(currentPoint, center));
+    if (currentRadius <= EPSILON) {
+        return geometry0.clone();
+    }
+    const initialAngle = Math.atan2(initialPoint[1] - center[1], initialPoint[0] - center[0]);
+    const currentAngle = Math.atan2(currentPoint[1] - center[1], currentPoint[0] - center[0]);
+    const geometry = geometry0.clone();
+    geometry.scale(currentRadius / initialRadius, undefined, center);
+    geometry.rotate(currentAngle - initialAngle, center);
+    return geometry;
+}
+export function getGeometryForRendering(feature) {
+    const modifyGeometry = feature.get('modifyGeometry');
+    return modifyGeometry?.geometry ?? feature.getGeometry() ?? undefined;
+}
+export function shouldAllowVertexInsertionForShape(shapeType) {
+    return shapeType !== DrawingShape.Square && shapeType !== DrawingShape.Rectangle;
+}

package/package.json

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

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.1.0-dev.2456794124", "build":"2456794124", "date":"16/04/2026"}
+{"version":"1.1.0-dev.2463680603", "build":"2463680603", "date":"19/04/2026"}