@regionerne/gis-komponent 0.0.105 → 0.0.106

package/fesm2022/regionerne-gis-komponent.mjs

@@ -53,24 +53,24 @@ import { MultiPolygon, Polygon, Point as Point$1, LineString } from 'ol/geom';
 import { getArea, getLength } from 'ol/sphere';
 import Draw, { createBox, createRegularPolygon } from 'ol/interaction/Draw';
 import { Draw as Draw$1, Snap, Select as Select$1, Modify } from 'ol/interaction';
-import { Style, Circle, Stroke, Fill, Icon, Text, RegularShape } from 'ol/style';
+import { Style, Fill, Circle, Stroke, Icon, Text, RegularShape } from 'ol/style';
 import * as SLDReader from '@nieuwlandgeo/sldreader';
+import Point from 'ol/geom/Point';
+import CircleStyle from 'ol/style/Circle';
+import Feature from 'ol/Feature';
 import WKT from 'ol/format/WKT';
-import Feature$1 from 'ol/Feature';
 import { always, never } from 'ol/events/condition';
 import { buffer, lineIntersect, lineSplit, featureCollection, difference, area, flatten, feature, booleanIntersects, booleanWithin, intersect, union, booleanPointInPolygon, point, bboxPolygon } from '@turf/turf';
 import GeoJSON$1 from 'ol/format/GeoJSON';
 import { containsXY, extend, createEmpty, buffer as buffer$1 } from 'ol/extent';
-import { Feature } from 'ol';
+import { Feature as Feature$1 } from 'ol';
 import { easeOut } from 'ol/easing';
 import Select from 'ol/interaction/Select';
 import * as i2$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import html2canvas from 'html2canvas-pro';
-import CircleStyle from 'ol/style/Circle';
 import { transform, toLonLat } from 'ol/proj';
 import WFS from 'ol/format/WFS';
-import Point from 'ol/geom/Point';
 import { intersects, dwithin, contains, like } from 'ol/format/filter';
 import Rotate from 'ol/control/Rotate';
 import { BufferOp } from 'jsts/org/locationtech/jts/operation/buffer';
@@ -1308,6 +1308,51 @@ class KomponentSettingsHelperService {
             }
         }));
     }
+    createCursorLayer(fillColor) {
+        const feature = new Feature(new Point([0, 0]));
+        feature.setStyle(new Style({
+            image: new CircleStyle({
+                radius: 4,
+                fill: new Fill({ color: fillColor })
+            }),
+        }));
+        const source = new VectorSource({
+            features: [feature],
+        });
+        const layer = new VectorLayer({
+            source,
+        });
+        // store reference for updates
+        layer._cursorFeature = feature;
+        return layer;
+    }
+    attachCursorToMap(map, layer) {
+        const feature = layer._cursorFeature;
+        map.on('pointermove', (evt) => {
+            if (evt.dragging)
+                return;
+            feature.getGeometry().setCoordinates(evt.coordinate);
+        });
+    }
+    getFillColorFromStyle(style) {
+        let styles;
+        // resolve StyleFunction
+        if (typeof style === 'function') {
+            // we call it with a dummy feature just to get styles
+            const dummyFeature = new Feature(new Point([0, 0]));
+            styles = style(dummyFeature, 0);
+        }
+        else {
+            styles = style;
+        }
+        // normalize to array
+        if (!Array.isArray(styles)) {
+            styles = [styles];
+        }
+        // find first style with fill
+        const fillStyle = styles.find((s) => s?.getFill?.());
+        return fillStyle?.getFill()?.getColor() || null;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: KomponentSettingsHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: KomponentSettingsHelperService, providedIn: 'root' });
 }
@@ -1693,7 +1738,7 @@ class HighlightService {
             return;
         }
         const newFeatures = feature.map(f => {
-            const newFeature = new Feature({ geometry: f.getGeometry(), style: this._getFadedStyle(1) });
+            const newFeature = new Feature$1({ geometry: f.getGeometry(), style: this._getFadedStyle(1) });
             const now = performance.now();
             newFeature.set(this.fadeStart, now);
             const fadeMs = this._current.gisKomponentSettings?.highlightFadeTimerMs ?? 2000;
@@ -1954,7 +1999,7 @@ class OverlapService {
                                 // The only way to get here is that the new feature completely overlaps this one. This one should be removed
                                 // and added to the output-array, because that is used for hiding features in preview
                                 if (isPreview) {
-                                    const featureToHide = new Feature(f.geometry);
+                                    const featureToHide = new Feature$1(f.geometry);
                                     featureToHide.setId(f.id);
                                     featuresToAddToOutput.push(featureToHide);
                                     const overlappedFeature = features.find(existingFeature => existingFeature.getId() === f.id);
@@ -2040,7 +2085,7 @@ class OverlapService {
         const result = [];
         if (aTurfFeature.geometry.type === 'MultiPolygon') {
             aTurfFeature.geometry.coordinates.forEach((coords) => {
-                const newFeature = new Feature(this._geoJSONToOl({
+                const newFeature = new Feature$1(this._geoJSONToOl({
                     type: 'Polygon',
                     coordinates: coords,
                     style: style
@@ -2051,7 +2096,7 @@ class OverlapService {
             });
         }
         else {
-            const newFeature = new Feature(this._geoJSONToOl(aTurfFeature.geometry));
+            const newFeature = new Feature$1(this._geoJSONToOl(aTurfFeature.geometry));
             if (style)
                 newFeature.setStyle(style);
             result.push(newFeature);
@@ -3025,6 +3070,7 @@ class ToolboxComponent {
     _originalMapWidth = 0;
     _originalMapHeight = 0;
     pointClickKey;
+    _cursorLayerForDraw;
     _geometrySearchService = inject(GeometrySearchService);
     _polygonCleanupService = inject(PolygonCleanupService);
     drawInteraction;
@@ -3799,6 +3845,10 @@ class ToolboxComponent {
         if (this.activeMode === 'draw') {
             this._clearAllInteractions();
             this.activeMode = null;
+            if (this._cursorLayerForDraw) {
+                this.map.removeLayer(this._cursorLayerForDraw);
+                this._cursorLayerForDraw = undefined;
+            }
         }
         else {
             this.activeMode = 'draw';
@@ -3931,7 +3981,7 @@ class ToolboxComponent {
         let feature = wktFormat.readFeature(item.wkt, { featureProjection: 'EPSG:25832', dataProjection: 'EPSG:25832' });
         if (withBuffer) {
             const bufferedGeometry = this._bufferGeometry(feature.getGeometry(), this.bufferInMeters);
-            feature = new Feature$1({ geometry: bufferedGeometry });
+            feature = new Feature({ geometry: bufferedGeometry });
         }
         const geomType = feature.getGeometry()?.getType();
         if (!geomType) {
@@ -4087,6 +4137,19 @@ class ToolboxComponent {
         this._settingsHelper.getStyle(style, this.profile.styleRepositoryWorkspace, this.profile.styleRepositoryGeoserver, geomType)
             .subscribe({
             next: style => {
+                if (geomType === 'Polygon' || geomType === 'LineString') {
+                    // Clear circle preview from previous Polygon\LineString style if needed
+                    if (this._cursorLayerForDraw) {
+                        this.map.removeLayer(this._cursorLayerForDraw);
+                        this._cursorLayerForDraw = undefined;
+                    }
+                    // Extract fill color from style
+                    const fillColor = this._settingsHelper.getFillColorFromStyle(style) || 'rgba(0,0,255,0.3)';
+                    // Create cursor layer (circle showing the Polygon's fill color)
+                    this._cursorLayerForDraw = this._settingsHelper.createCursorLayer(fillColor);
+                    this.map.addLayer(this._cursorLayerForDraw);
+                    this._settingsHelper.attachCursorToMap(this.map, this._cursorLayerForDraw);
+                }
                 const drawInteraction = new Draw({
                     type: geomType,
                     source: new VectorSource(),
@@ -4146,7 +4209,6 @@ class ToolboxComponent {
                 });
                 this._interactionHelper.setAsTemp(drawInteraction);
                 this.map.addInteraction(drawInteraction);
-                this.map.getTargetElement().style.cursor = 'crosshair'; // Placeholder for now
                 this._addSnap();
             }
         });
@@ -4248,7 +4310,7 @@ class ToolboxComponent {
                     totalLength += length;
                     const mid = [(c1[0] + c2[0]) / 2, (c1[1] + c2[1]) / 2];
                     const formatted = `${this._formatNumber(length, 2)} m`;
-                    const labelFeature = new Feature$1({
+                    const labelFeature = new Feature({
                         geometry: new Point$1(mid),
                         label: formatted
                     });
@@ -4258,7 +4320,7 @@ class ToolboxComponent {
                 if (coords.length > 1) {
                     const positionPoint = coords[0];
                     const formattedTotal = `${this._formatNumber(totalLength, 2)} m`;
-                    const totalFeature = new Feature$1({
+                    const totalFeature = new Feature({
                         geometry: new Point$1(positionPoint),
                         label: `Total: ${formattedTotal}`
                     });
@@ -4281,6 +4343,10 @@ class ToolboxComponent {
         if (clearPrintDrawTool) {
             this._active = 'No';
         }
+        if (this._cursorLayerForDraw) {
+            this.map.removeLayer(this._cursorLayerForDraw);
+            this._cursorLayerForDraw = undefined;
+        }
         this.map.getTargetElement().style.cursor = "";
     }
     ngOnInit() {
@@ -5665,7 +5731,7 @@ class ShowInfoHoverService {
                                     .flatMap(f => f.values)
                                     .map(f => {
                                     const styleForFeature = this._getStyle(f.showValue);
-                                    const newFeature = new Feature({ geometry: f.center });
+                                    const newFeature = new Feature$1({ geometry: f.center });
                                     newFeature.setStyle(styleForFeature);
                                     return newFeature;
                                 });