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

package/tools/drawing/olDrawing.js

@@ -8,7 +8,8 @@ import { Draw, Modify, Snap, Translate } from 'ol/interaction.js';
 import VectorSource from 'ol/source/Vector.js';
 import VectorLayer from 'ol/layer/Vector.js';
 import { getPointResolution } from 'ol/proj.js';
-import { always, never, primaryAction } from 'ol/events/condition.js';
+import { always, never, platformModifierKeyOnly, primaryAction } from 'ol/events/condition.js';
+import { unByKey } from 'ol/Observable.js';
 import { ensurePolygonIsProperlyClosed, getAreaOfPolygon, getDistance, getHalfPoint, getLabelStyle, getLengthAsMetricText, getRadiusDataForCircle, unByKeyAll } from '../utils/olutils.js';
 import { ContextMenu, EntryInteractionType } from '../../components/map/tools/contextmenu.js';
 import { formatCoordinates } from '../geometrytools.js';
@@ -64,12 +65,16 @@ export default class OlDrawing {
     fixedSquareSide = 0;
     fixedRectangleWidth = 0;
     fixedRectangleHeight = 0;
+    drawingText = '';
     drawingSource;
     drawingLayer;
     lastClosestFeature = null;
     translate = null;
     transform = null;
     modifyFeatureChangeListeners = [];
+    hoverListener = null;
+    selectListener = null;
+    hoveredTextFeatureId = null;
     defaultStyle;
     updateGeometryInState = (olFeature) => {
         const idx = this.drawingState.features.findIndex((f) => f.id === olFeature.getId());
@@ -324,21 +329,78 @@ export default class OlDrawing {
         if (!this.editContextMenu) {
             this.addEditContextMenu();
         }
+        this.addHoverListener();
         // Always recreate snap interaction to get snapping behavior on latest features
         this.addSnapInteraction();
     }
     removeEditInteractions() {
         this.removeModifyInteraction();
         this.removeEditContextMenu();
+        this.removeHoverListener();
         if (!this.draw) {
             this.removeSnapInteraction();
         }
     }
+    addHoverListener() {
+        this.hoverListener ??= this.map.olMap.on('pointermove', (e) => this.updateHoveredTextFeature(e));
+    }
+    removeHoverListener() {
+        if (this.hoverListener) {
+            unByKey(this.hoverListener);
+            this.hoverListener = null;
+        }
+        this.setHoveredTextFeature(null);
+    }
+    addSelectListener() {
+        this.selectListener ??= this.map.olMap.on('singleclick', (e) => this.selectClickedFeature(e));
+    }
+    removeSelectListener() {
+        if (this.selectListener) {
+            unByKey(this.selectListener);
+            this.selectListener = null;
+        }
+    }
+    /**
+     * Lets the user select the shapes to edit directly in the map, as an alternative to the drawing list:
+     * a click selects the shape under the cursor exclusively, a click with the platform modifier key (ctrl / meta)
+     * adds the shape to the current selection or removes it from it. A click outside of any shape clears the selection.
+     */
+    selectClickedFeature(e) {
+        // While drawing, moving or transforming a shape, the click belongs to the interaction in progress
+        if (this.draw || this.translate || this.transform || !this.canExecute('map.select')) {
+            return;
+        }
+        const clickedFeatureId = this.findFeatureIdAtPixel(e.pixel);
+        if (platformModifierKeyOnly(e)) {
+            const clickedFeature = this.drawingState.features.find((f) => f.id === clickedFeatureId);
+            if (clickedFeature) {
+                this.setFeatureSelected(clickedFeature, !clickedFeature.selected);
+            }
+        }
+        else {
+            this.drawingState.features.forEach((f) => this.setFeatureSelected(f, f.id === clickedFeatureId));
+        }
+    }
+    /**
+     * Only writes to the state if the selection of the shape really changed, so that the map and the drawing
+     * panel are not refreshed for the shapes that are not concerned by the click.
+     */
+    setFeatureSelected(dFeature, selected) {
+        if (dFeature.selected !== selected) {
+            dFeature.selected = selected;
+        }
+    }
+    findFeatureIdAtPixel(pixel) {
+        const clickedFeature = this.map.olMap.forEachFeatureAtPixel(pixel, (feature, layer) => (feature instanceof Feature && layer === this.drawingLayer ? feature : undefined), {
+            hitTolerance: this.map.pixelTolerance
+        });
+        return clickedFeature ? (clickedFeature.getId() ?? null) : null;
+    }
     prepareMenuEntriesForVertex = (_e, mapCoordinate) => {
         if (!this.hasEditableVertexAtCoordinate(mapCoordinate)) {
             return EntryInteractionType.NOT_SHOWN;
         }
-        if (this.isSquareOrRectangle(this.getDrawingShapeType(this.lastClosestFeature))) {
+        if (this.isSquareRectangleOrText(this.getDrawingShapeType(this.lastClosestFeature))) {
             return EntryInteractionType.NOT_SHOWN;
         }
         return EntryInteractionType.ENABLED;
@@ -476,6 +538,7 @@ export default class OlDrawing {
         }
         const olFeature = e.feature;
         const dFeature = new DrawingFeature(this.currentShape, this.drawingState, this.config.drawing);
+        this.applyDrawingText(dFeature);
         olFeature.setId(dFeature.id);
         dFeature.geojson = DrawingFeature.geojsonFromOlFeature(olFeature, dFeature.type);
         dFeature.addToState();
@@ -507,6 +570,18 @@ export default class OlDrawing {
     setFixedRectangleHeight(height) {
         this.fixedRectangleHeight = Number.isNaN(height) ? 0 : height;
     }
+    setDrawingText(text) {
+        this.drawingText = text;
+    }
+    /**
+     * A text shape displays the text entered in the tool parameters instead of its generated default name.
+     * If no text has been entered, the default name is kept so that the shape stays visible on the map.
+     */
+    applyDrawingText(dFeature) {
+        if (dFeature.type === DrawingShape.Text && this.drawingText.trim().length > 0) {
+            dFeature.name = this.drawingText;
+        }
+    }
     createLineStringFixedLength(coordinates, geom) {
         this.fixLastLength(this.fixedLineLength, coordinates);
         geom = geom ?? new LineString(coordinates);
@@ -582,8 +657,6 @@ export default class OlDrawing {
     }
     addDrawInteraction(tool) {
         this.removeDrawInteraction();
-        // Block feature selection while drawing by registering 'map.select' exclusively
-        this.context.userInteractionManager.registerListener('map.select', true, this.stateLocation);
         this.currentShape = tool;
         let geomFunction = undefined;
         let olTool;
@@ -617,6 +690,9 @@ export default class OlDrawing {
             case DrawingShape.FreehandPolygon:
                 olTool = 'Polygon';
                 break;
+            case DrawingShape.Text:
+                olTool = 'Point';
+                break;
         }
         this.draw = new Draw({
             source: this.drawingSource,
@@ -627,9 +703,17 @@ export default class OlDrawing {
             // Default condition for ol drawing is noModifierKeys(e)
             // canExecute: If another tool is exclusively drawing, this interaction will be prevented from reacting
             condition: (e) => primaryAction(e) && this.canExecute('map.draw'),
-            style: (f) => this.getStyle(new DrawingFeature(tool, this.drawingState, this.config.drawing), f)
+            style: (f) => {
+                const sketchFeature = new DrawingFeature(tool, this.drawingState, this.config.drawing);
+                this.applyDrawingText(sketchFeature);
+                return this.getStyle(sketchFeature, f);
+            }
+        });
+        this.draw.on('drawstart', () => {
+            this.disableContextMenu();
         });
         this.draw.on('drawend', () => {
+            this.enableContextMenu();
             this.draw?.removeLastPoint();
             this.draw?.finishDrawing();
         });
@@ -663,17 +747,26 @@ export default class OlDrawing {
                 lineDash: getLineStroke(dFeature.lineStroke, dFeature.strokeWidth)
             }),
             fill: new Fill({ color: dFeature.fillColor }),
-            image: new Circle({
-                radius: dFeature.strokeWidth, // Points are using default stroke parameters
-                fill: new Fill({ color: dFeature.strokeColor })
-            }),
+            image: dFeature.type === DrawingShape.Text
+                ? // A text shape is only made of its text, its anchor point is not drawn
+                    undefined
+                : new Circle({
+                    radius: dFeature.strokeWidth, // Points are using default stroke parameters
+                    fill: new Fill({ color: dFeature.strokeColor })
+                }),
             text: new Text({
                 text: dFeature.displayName ? dFeature.name : '',
                 font: nameFont,
                 textBaseline: 'middle',
                 /*offsetY: dFeature.type == DrawingShape.Point ? 2 * dFeature.nameFontSize : 1.2 * dFeature.nameFontSize,*/
                 fill: new Fill({ color: dFeature.nameColor }),
-                overflow: true
+                overflow: true,
+                stroke: dFeature.type == DrawingShape.Text
+                    ? new Stroke({
+                        color: '#ffffff',
+                        width: 8
+                    })
+                    : undefined
             })
         });
         const labelStyle = new Style({
@@ -768,7 +861,10 @@ export default class OlDrawing {
                 }
             }
         }
-        if (dFeature.type == DrawingShape.Point || geometry.getType() === 'Point') {
+        if (dFeature.type == DrawingShape.Text) {
+            // A text shape displays only its text, there is no measure to add
+        }
+        else if (dFeature.type == DrawingShape.Point || geometry.getType() === 'Point') {
             addLabel(geometry, dFeature.getCoordText(geometry.getCoordinates()));
         }
         else if (dFeature.type == DrawingShape.Polyline) {
@@ -792,7 +888,7 @@ export default class OlDrawing {
                 appendText(getLengthAsMetricText(lineString.getLength()));
             }
         }
-        else if (dFeature.type == DrawingShape.Disk) {
+        else if (dFeature.type == DrawingShape.Disk && geometry instanceof CircleGeom) {
             if (dFeature.measureInformation !== 'none') {
                 const radiusDataForCircle = getRadiusDataForCircle(geometry, this.state.projection, defaultStyle, new Stroke({ color: measureColor, width: 2 }));
                 styles.push(radiusDataForCircle.style);
@@ -830,7 +926,7 @@ export default class OlDrawing {
             }
             addLabel(square.getInteriorPoint(), dFeature.getAreaText(getAreaOfPolygon(square, this.state.projection)));
         }
-        if (dFeature.selected && this.transform == null) {
+        if (this.shouldRenderVertices(dFeature)) {
             const vertexStyle = dFeature.getVertexStyle();
             // Add a node style to every vertex of the geometry
             vertexStyle.setGeometry(function (f) {
@@ -843,13 +939,21 @@ export default class OlDrawing {
         }
         return styles;
     }
+    /**
+     * Vertices are rendered on the shapes selected for editing. A text shape is an exception: as its geometry is
+     * a single anchor point hidden behind the text, its vertex is only revealed while the cursor hovers the text.
+     */
+    shouldRenderVertices(dFeature) {
+        if (!dFeature.selected || this.transform != null) {
+            return false;
+        }
+        return dFeature.type !== DrawingShape.Text || dFeature.id === this.hoveredTextFeatureId;
+    }
     removeDrawInteraction() {
         if (this.draw) {
             this.map.olMap.removeInteraction(this.draw);
             this.draw = null;
         }
-        // Reactivate feature selection by unregistering 'map.select'
-        this.context.userInteractionManager.unregisterListener('map.select', this.stateLocation);
     }
     removeModifyInteraction() {
         this.clearModifyFeatureChangeListeners();
@@ -867,10 +971,50 @@ export default class OlDrawing {
     isSquareOrRectangle(shapeType) {
         return shapeType === DrawingShape.Square || shapeType === DrawingShape.Rectangle;
     }
+    isSquareRectangleOrText(shapeType) {
+        return shapeType === DrawingShape.Square || shapeType === DrawingShape.Rectangle || shapeType === DrawingShape.Text;
+    }
     shouldAllowVertexInsertionAtEvent(e) {
         const hoveredFeature = this.getHoveredModifiableFeatureAtPixel(e.pixel);
         return shouldAllowVertexInsertionForShape(this.getDrawingShapeType(hoveredFeature));
     }
+    /**
+     * A text shape is only made of its text: its anchor point is hidden behind it. To let the user know where to
+     * grab the shape, the anchor vertex is revealed as long as the cursor hovers the text.
+     */
+    updateHoveredTextFeature(e) {
+        if (e.dragging) {
+            return;
+        }
+        // Only the selected shapes display their vertices, so there is nothing to look for otherwise
+        const hasSelectedText = this.drawingState.features.some((f) => f.selected && f.type === DrawingShape.Text);
+        this.setHoveredTextFeature(hasSelectedText ? this.findHoveredTextFeatureIdAtPixel(e.pixel) : null);
+    }
+    setHoveredTextFeature(featureId) {
+        if (featureId === this.hoveredTextFeatureId) {
+            return;
+        }
+        const previousFeatureId = this.hoveredTextFeatureId;
+        this.hoveredTextFeatureId = featureId;
+        // Redraw the shapes whose hovered state changed, so that their vertex appears or disappears
+        for (const id of [previousFeatureId, featureId]) {
+            if (id) {
+                this.getOlFeatureFromDrawingSource(id)?.changed();
+            }
+        }
+    }
+    findHoveredTextFeatureIdAtPixel(pixel) {
+        // The text of a shape takes part in the hit detection, so hovering anywhere on it is enough
+        const hoveredFeature = this.map.olMap.forEachFeatureAtPixel(pixel, (feature, layer) => {
+            if (!(feature instanceof Feature) || layer !== this.drawingLayer) {
+                return undefined;
+            }
+            return this.getDrawingShapeType(feature) === DrawingShape.Text ? feature : undefined;
+        }, {
+            hitTolerance: this.map.pixelTolerance
+        });
+        return hoveredFeature instanceof Feature ? (hoveredFeature.getId() ?? null) : null;
+    }
     getHoveredModifiableFeatureAtPixel(pixel) {
         const modifiableFeatureSet = new Set(this.modifiableFeatures.getArray());
         const hoveredFeature = this.map.olMap.forEachFeatureAtPixel(pixel, (feature, layer) => {
@@ -941,17 +1085,28 @@ export default class OlDrawing {
         this.context.userInteractionManager.registerListener('map.draw', true, this.stateLocation);
         this.context.userInteractionManager.registerListener('map.modify', true, this.stateLocation);
         this.context.userInteractionManager.registerListener('map.snap', true, this.stateLocation);
+        // Clicking on the map selects the drawn shapes, so feature selection is taken over from the other tools
+        this.context.userInteractionManager.registerListener('map.select', true, this.stateLocation);
+        this.addSelectListener();
     }
     unregisterInteractions() {
         this.removeDrawInteraction();
         this.removeEditInteractions();
+        this.removeSelectListener();
         this.context.userInteractionManager.unregisterListener('map.draw', this.stateLocation);
         this.context.userInteractionManager.unregisterListener('map.modify', this.stateLocation);
         this.context.userInteractionManager.unregisterListener('map.snap', this.stateLocation);
+        this.context.userInteractionManager.unregisterListener('map.select', this.stateLocation);
     }
     canExecute(event) {
         return this.context.userInteractionManager.canListenerExecute(event, this.stateLocation);
     }
+    disableContextMenu() {
+        this.context.userInteractionManager.registerListener('map.contextmenu', true, this.stateLocation);
+    }
+    enableContextMenu() {
+        this.context.userInteractionManager.unregisterListener('map.contextmenu', this.stateLocation);
+    }
     fixLastLength(length, coordinates, scale = 1) {
         const coord = coordinates;
         if (coord.length > 1 && length > 0) {

package/tools/state/graphicalInterface.d.ts

@@ -26,5 +26,5 @@ export default class GraphicalInterface {
     darkFrontendMode: boolean;
     swipeupPanelMode: SwipeupPanelMode;
     contactPanelVisible: boolean;
-    swipeupPanelContent: 'selector' | 'features' | 'menu' | 'drawing' | 'offline' | null;
+    swipeupPanelContent: 'selector' | 'features' | 'menu' | 'drawing' | 'offline' | 'share' | null;
 }