@regionerne/gis-komponent 0.0.60 → 0.0.61

package/fesm2022/regionerne-gis-komponent.mjs

@@ -446,105 +446,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class LayoutService {
     _map;
+    mapResizedSubject = new Subject();
     set map(value) {
         this._map = value;
     }
-    calculateWidgetPosition({ initialPosition, widgetName, widgetWidth, widgetHeight, offsetX = 2, offsetY = 2, }) {
+    keepWidgetInViewPort(dragPosition, widgetName, widgetHeight, widgetWidth, resizedContainerHeight = null, resizedContainerWidth = null) {
+        //Expanding or changing map size, make sure the widget stays in viewport
+        const widgetPositionOptions = {
+            initialPosition: '',
+            widgetName: widgetName,
+            widgetHeight: widgetHeight,
+            widgetWidth: widgetWidth,
+            currentPosition: dragPosition,
+            resizedContainerHeight: resizedContainerHeight,
+            resizedContainerWidth: resizedContainerWidth
+        };
+        return this.calculateWidgetPosition(widgetPositionOptions);
+    }
+    calculateWidgetPosition({ initialPosition, widgetName, widgetWidth, widgetHeight, offsetX = 2, offsetY = 9, currentPosition = null, resizedContainerHeight = null, resizedContainerWidth = null }) {
         let x = 0;
         let y = 0;
         let dragPosition = { x: x, y: y };
         if (!this._map)
             return dragPosition;
         const containerRect = this._map.getViewport().getBoundingClientRect();
-        let vertical = 'top';
-        let horizontal = 'left';
-        switch (initialPosition) {
-            case 'øverst/venstre':
-                vertical = 'top';
-                horizontal = 'left';
-                break;
-            case 'midt/venstre':
-                vertical = 'middle';
-                horizontal = 'left';
-                break;
-            case 'nederst/venstre':
-                vertical = 'bottom';
-                horizontal = 'left';
-                break;
-            case 'øverst/midt':
-                vertical = 'top';
-                horizontal = 'middle';
-                break;
-            case 'nederst/midt':
-                vertical = 'bottom';
-                horizontal = 'middle';
-                break;
-            case 'øverst/højre':
-                vertical = 'top';
-                horizontal = 'right';
-                break;
-            case 'midt/højre':
-                vertical = 'middle';
-                horizontal = 'right';
-                break;
-            case 'nederst/højre':
-                vertical = 'bottom';
-                horizontal = 'right';
-                break;
-        }
-        console.log('calculateWidgetPosition', initialPosition, widgetName, this._map, this._map.getViewport(), widgetWidth, widgetHeight, containerRect, vertical, horizontal);
-        // Vertical positioning
-        switch (vertical) {
-            case 'top':
-                y = offsetY;
-                break;
-            case 'middle':
-                y = (containerRect.height - widgetHeight) / 2;
-                break;
-            case 'bottom':
-                if (horizontal === 'left')
-                    offsetY = offsetY + 90; // Move above scalebar in bottom-left corner
-                y = containerRect.height - widgetHeight - offsetY;
-                break;
+        if (currentPosition) {
+            // Expanding a widget or viewport changed size, so fit the widget inside view again
+            x = currentPosition.x;
+            y = currentPosition.y;
+            if (resizedContainerHeight && resizedContainerWidth) {
+                containerRect.height = resizedContainerHeight;
+                containerRect.width = resizedContainerWidth;
+            }
         }
-        // Horizontal positioning
-        switch (horizontal) {
-            case 'left':
-                if (vertical === 'top')
-                    offsetX = offsetX + 35; // Move to right of zoom in top-left corner
-                x = offsetX;
-                break;
-            case 'middle':
-                x = (containerRect.width - widgetWidth) / 2;
-                break;
-            case 'right':
-                if (vertical === 'top')
-                    offsetX = offsetX + 35; // Move to left of compass in top-right corner
-                x = containerRect.width - widgetWidth - offsetX;
-                break;
+        else {
+            let vertical = 'top';
+            let horizontal = 'left';
+            switch (initialPosition) {
+                case 'øverst/venstre':
+                    vertical = 'top';
+                    horizontal = 'left';
+                    break;
+                case 'midt/venstre':
+                    vertical = 'middle';
+                    horizontal = 'left';
+                    break;
+                case 'nederst/venstre':
+                    vertical = 'bottom';
+                    horizontal = 'left';
+                    break;
+                case 'øverst/midt':
+                    vertical = 'top';
+                    horizontal = 'middle';
+                    break;
+                case 'nederst/midt':
+                    vertical = 'bottom';
+                    horizontal = 'middle';
+                    break;
+                case 'øverst/højre':
+                    vertical = 'top';
+                    horizontal = 'right';
+                    break;
+                case 'midt/højre':
+                    vertical = 'middle';
+                    horizontal = 'right';
+                    break;
+                case 'nederst/højre':
+                    vertical = 'bottom';
+                    horizontal = 'right';
+                    break;
+                default: break;
+            }
+            // Vertical positioning
+            switch (vertical) {
+                case 'top':
+                    y = offsetY;
+                    break;
+                case 'middle':
+                    y = (containerRect.height - widgetHeight) / 2;
+                    break;
+                case 'bottom':
+                    if (horizontal === 'left')
+                        offsetY = offsetY + 90; // Move above scalebar in bottom-left corner
+                    y = containerRect.height - widgetHeight - offsetY;
+                    break;
+            }
+            // Horizontal positioning
+            switch (horizontal) {
+                case 'left':
+                    if (vertical === 'top')
+                        offsetX = offsetX + 35; // Move to right of zoom in top-left corner
+                    x = offsetX;
+                    break;
+                case 'middle':
+                    x = (containerRect.width - widgetWidth) / 2;
+                    break;
+                case 'right':
+                    if (vertical === 'top')
+                        offsetX = offsetX + 35; // Move to left of compass in top-right corner
+                    x = containerRect.width - widgetWidth - offsetX;
+                    break;
+            }
         }
+        console.log('Ensure the widget stays inside the viewport', containerRect, containerRect.width - widgetWidth, x, containerRect.height - widgetHeight, y);
         // Ensure the widget stays inside the viewport
-        x = Math.max(-containerRect.x, Math.min(x, containerRect.width - widgetWidth));
-        y = Math.max(-containerRect.y, Math.min(y, containerRect.height - widgetHeight));
+        x = Math.max(offsetX, Math.min(x, containerRect.width - widgetWidth));
+        y = Math.max(offsetY, Math.min(y, containerRect.height - widgetHeight));
         dragPosition = { x: x, y: y };
         console.log('calculateWidgetPosition end ', dragPosition);
         this._savePosition(widgetName, dragPosition);
         return { x, y };
     }
-    bringElementIntoViewIfNeeded(elementClass, offsetValue, collapsed) {
-        const element = document.querySelector(elementClass);
-        if (!element)
-            return;
-        const left = parseInt(element.style.left || '0', 10);
-        if (collapsed) {
-            // Widget minimized, remove the style for left
-            element.style.left = '0em';
-        }
-        else {
-            // If widget expands outside screen on the right (left is > <offsetValue> em), then bring it back
-            element.style.left = `${left > offsetValue ? offsetValue : left}em`;
-        }
-    }
     _savePosition(widgetStorageKey, position) {
         try {
             localStorage.setItem(widgetStorageKey, JSON.stringify(position));
@@ -810,6 +822,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: OlCapabilitiesService }] });
 
+class WidgetConstants {
+    static collapsedHeight = 24;
+    static collapsedWidth = 86;
+    static toolboxHeight = 64;
+    static toolboxWidth = 729;
+    static searchHeight = 122;
+    static searchWidth = 374;
+    static activeObjectsHeight = 80;
+    static activeObjectsWidth = 350;
+    static layerSelectorHeight = 209;
+    static layerSelectorWidth = 329;
+    static legendsHeight = 341;
+    static legendsWidth = 296;
+    static toolboxDefaultX = 29;
+    static toolboxDefaultY = 120;
+    static searchDefaultX = 29;
+    static searchDefaultY = 5;
+    static activeObjectsDefaultX = 29;
+    static activeObjectsDefaultY = 238;
+    static layerSelectorDefaultX = 29;
+    static layerSelectorDefaultY = 470;
+    static legendsDefaultX = 1790;
+    static legendsDefaultY = 743;
+}
+
 class LayerSelectorComponent {
     set contentBody(content) {
         this._layerSelectorBody = content;
@@ -1073,8 +1110,9 @@ class LayerSelectorComponent {
             this.searchText = '';
             this.filterChanged();
         }
-        if (this.profile.layerSelectorInitialPosition.includes('højre')) {
-            this._layoutService.bringElementIntoViewIfNeeded('.layer-selector-body-wrapper', -13, this.collapsed);
+        if (!this.collapsed) {
+            //Expanding, make sure it stays in viewport
+            this.layerSelectorDragPosition = this._layoutService.keepWidgetInViewPort(this.layerSelectorDragPosition, this.POSITION_STORAGE_KEY, WidgetConstants.layerSelectorHeight, WidgetConstants.layerSelectorWidth);
         }
     }
     updateOpacity(layerId, opacity) {
@@ -1175,12 +1213,12 @@ class LayerSelectorComponent {
     _loadPosition(collapsed) {
         try {
             // Default height and width when collapsed
-            let widgetHeight = 24;
-            let widgetWidth = 86;
+            let widgetHeight = WidgetConstants.collapsedHeight;
+            let widgetWidth = WidgetConstants.collapsedWidth;
             if (!collapsed) {
                 // Custom height and width when expanded
-                widgetHeight = 209;
-                widgetWidth = 329;
+                widgetHeight = WidgetConstants.layerSelectorHeight;
+                widgetWidth = WidgetConstants.layerSelectorWidth;
             }
             const widgetPositionOptions = {
                 initialPosition: this.profile.layerSelectorInitialPosition,
@@ -1202,7 +1240,7 @@ class LayerSelectorComponent {
             }
             else {
                 // Default position for layer selector
-                this.layerSelectorDragPosition = { x: 29, y: 370 };
+                this.layerSelectorDragPosition = { x: WidgetConstants.layerSelectorDefaultX, y: WidgetConstants.layerSelectorDefaultY };
                 this._savePosition(this.layerSelectorDragPosition);
             }
         }
@@ -1751,6 +1789,9 @@ class MergeFeaturesService {
         if (this._featureHelper.isLocked(f)) {
             return false;
         }
+        if (this._featureHelper.typeId(f) !== typeId) {
+            return false;
+        }
         if (this._selectedMergeFeature) {
             const previusFeatureObject = this.formatter.writeFeatureObject(this._selectedMergeFeature, this._formatterOptions);
             const bufferedPreviouslySelected = buffer(previusFeatureObject, 5, { units: 'centimeters' });
@@ -2479,7 +2520,6 @@ class ShowDocumentInfoService {
             const geom = evt.feature.getGeometry();
             this._documentSearch.search({ kind: 'polygon', value: geom }, 100).subscribe({
                 next: result => {
-                    console.log("🚀 ~ ShowDocumentInfoService ~ _startByPolygon ~ result:", result);
                     this._features.next(result);
                 }
             });
@@ -3533,25 +3573,18 @@ class ToolboxComponent {
         this.activeMode = 'edit';
         const modify = new Modify({
             source: this._drawLayerService.source,
-            condition: evt => {
-                // first, get all features from the draw-layer
-                const feature = this.map.forEachFeatureAtPixel(evt.pixel, f => f, { layerFilter: l => l == this._drawLayerService.layer });
-                if (!feature) {
-                    return false;
-                }
-                return !this._featureHelper.isLocked(feature);
+            filter: (f) => {
+                return !this._featureHelper.isLocked(f);
             },
-            // No delete
             deleteCondition: () => false,
             // Allow moving existing and add new points
-            // condition: always,            
+            // condition: always,
             insertVertexCondition: always,
         });
         /* Modify fires changes to features a LOT, so to not flood the UndoRedo service, I disable until ending the modify
         and then force an update, to add the updated feature to the undo-service. */
         modify.on('modifystart', () => this._undoRedo.disable());
         modify.on('modifyend', (evt) => {
-            console.log("🚀 ~ ToolboxComponent ~ startEdit ~ evt:", evt);
             this._undoRedo.enable();
             evt.features.forEach(f => {
                 f.set('updated', new Date().toISOString());
@@ -3572,7 +3605,7 @@ class ToolboxComponent {
                                     idsToExcludeFromOverlap.push(`${feature.getId()}`); // Don't check these for overlap
                                     this._drawLayerService.source.addFeature(feature);
                                 });
-                                // Don't check for overlap with the feature being updated. 
+                                // Don't check for overlap with the feature being updated.
                                 this._overlap.handleOverlaps(result, idsToExcludeFromOverlap).pipe(filter(f => !!f)).subscribe({
                                     next: f => {
                                         if (f) {
@@ -3783,6 +3816,10 @@ class ToolboxComponent {
     ngOnInit() {
         this._originalMapHeight = this.map.getSize()[1];
         this._originalMapWidth = this.map.getSize()[0];
+        this._layoutService.mapResizedSubject.subscribe(mapResized => {
+            //Map resized, make sure it stays in viewport
+            this.dragPosition = this._layoutService.keepWidgetInViewPort(this.dragPosition, this._POSITION_STORAGE_KEY, WidgetConstants.toolboxHeight, WidgetConstants.toolboxWidth, this.mapHeight, this.mapWidth);
+        });
         this.drawItems = [];
         (this.settings.geometryTypeSettings ?? []).filter(f => f.availableGeometryTypes).forEach(geomSetting => {
             geomSetting.availableGeometryTypes.forEach(geomType => {
@@ -3919,12 +3956,12 @@ class ToolboxComponent {
     _loadPosition(collapsed) {
         try {
             // Default height and width when collapsed
-            let widgetHeight = 24;
-            let widgetWidth = 86;
+            let widgetHeight = WidgetConstants.collapsedHeight;
+            let widgetWidth = WidgetConstants.collapsedWidth;
             if (!collapsed) {
                 // Custom height and width when expanded
-                widgetHeight = 64;
-                widgetWidth = 729;
+                widgetHeight = WidgetConstants.toolboxHeight;
+                widgetWidth = WidgetConstants.toolboxWidth;
             }
             const container = this.map.getViewport();
             const widgetPositionOptions = {
@@ -3947,7 +3984,7 @@ class ToolboxComponent {
             }
             else {
                 // Default position for toolbox
-                this.dragPosition = { x: 29, y: 26 };
+                this.dragPosition = { x: WidgetConstants.toolboxDefaultX, y: WidgetConstants.toolboxDefaultY };
                 this._savePosition();
             }
         }
@@ -3976,7 +4013,7 @@ class ToolboxComponent {
             return;
         }
         const changeTypeSelect = new Select$1({
-            // layers: [this._drawLayer!],            
+            // layers: [this._drawLayer!],
             layers: [this._drawLayerService.layer],
             filter: f => !this._featureHelper.isLocked(f) && this._featureHelper.typeId(f) !== this.selectedDrawItem?.typeId // can't changed locked and cant change to same type
         });
@@ -4010,8 +4047,9 @@ class ToolboxComponent {
             this.stopMeasureArea();
             this.stopMeasureLength();
         }
-        if (this.profile.toolboxInitialPosition.includes('højre')) {
-            this._layoutService.bringElementIntoViewIfNeeded('.toolbox-wrapper', -33, this.collapsed);
+        if (!this.collapsed) {
+            //Expanding, make sure it stays in viewport
+            this.dragPosition = this._layoutService.keepWidgetInViewPort(this.dragPosition, this._POSITION_STORAGE_KEY, WidgetConstants.toolboxHeight, WidgetConstants.toolboxWidth);
         }
     }
     startMeasureArea() {
@@ -4081,15 +4119,11 @@ class ToolboxComponent {
         }
     }
     setNewMapDimensions() {
+        this._layoutService.mapResizedSubject.next(true);
         this.map.getTargetElement().style.width = this.mapWidth + 'px';
         this.map.getTargetElement().style.height = this.mapHeight + 'px';
-        if (this.mapWidth < 1920 && this.profile.toolboxInitialPosition.includes('højre')) {
-            const offset = this.mapWidth <= 800 ? 80 : (this.mapWidth <= 1280 ? 40 :
-                (this.mapWidth <= 1680 ? 20 : 0));
-            //Map got smaller, push Toolbox to the left
-            this._layoutService.bringElementIntoViewIfNeeded('.toolbox-wrapper', -offset, this.collapsed);
-        }
         this.map.updateSize();
+        this._layoutService.map = this.map;
     }
     doPrint() {
         let htmlElement = this.map.getViewport();
@@ -4373,7 +4407,6 @@ class ActiveObjectsComponent {
         });
         this._featuresForHighlight$.subscribe({
             next: features => {
-                console.log("🚀 ~ ActiveObjectsComponent ~ constructor ~ features:", features);
                 this._highlightFromMap(features.map(feature => feature.getId()));
             }
         });
@@ -4468,8 +4501,9 @@ class ActiveObjectsComponent {
     }
     togglePanel() {
         this.collapsed = !this.collapsed;
-        if (this.profile.activeObjectsInitialPosition.includes('højre')) {
-            this._layoutService.bringElementIntoViewIfNeeded('.active-objects-wrapper', -15, this.collapsed);
+        if (!this.collapsed) {
+            //Expanding, make sure it stays in viewport
+            this.dragPosition = this._layoutService.keepWidgetInViewPort(this.dragPosition, this.POSITION_STORAGE_KEY, WidgetConstants.activeObjectsHeight, WidgetConstants.activeObjectsWidth);
         }
     }
     onDragEnded(event) {
@@ -4488,12 +4522,12 @@ class ActiveObjectsComponent {
     _loadPosition(collapsed) {
         try {
             // Default height and width when collapsed
-            let widgetHeight = 24;
-            let widgetWidth = 86;
+            let widgetHeight = WidgetConstants.collapsedHeight;
+            let widgetWidth = WidgetConstants.collapsedWidth;
             if (!collapsed) {
                 // Custom height and width when expanded
-                widgetHeight = 80;
-                widgetWidth = 350;
+                widgetHeight = WidgetConstants.activeObjectsHeight;
+                widgetWidth = WidgetConstants.activeObjectsWidth;
             }
             const widgetPositionOptions = {
                 initialPosition: this.profile.activeObjectsInitialPosition,
@@ -4515,7 +4549,7 @@ class ActiveObjectsComponent {
             }
             else {
                 // Default position for active objects
-                this.dragPosition = { x: 29, y: 238 }; // TO DO - fix these everywhere
+                this.dragPosition = { x: WidgetConstants.activeObjectsDefaultX, y: WidgetConstants.activeObjectsDefaultY };
                 this._savePosition(this.dragPosition);
             }
         }
@@ -4649,9 +4683,6 @@ class MapSearchComponent {
         if (changes['profile'] && this.profile) {
             this.collapsed = this.profile.searchFolded;
             this._loadPosition(this.collapsed);
-            if (this.profile.searchInitialPosition?.includes('højre')) {
-                this._layoutService.bringElementIntoViewIfNeeded('.search-container', -3, this.collapsed);
-            }
             this._addWFSSearchLayers();
         }
     }
@@ -4702,8 +4733,9 @@ class MapSearchComponent {
             this.searchAddress = '';
             this.filterResults();
         }
-        if (this.profile.searchInitialPosition?.includes('højre')) {
-            this._layoutService.bringElementIntoViewIfNeeded('.search-container', -3, this.collapsed);
+        if (!this.collapsed) {
+            //Expanding, make sure it stays in viewport
+            this.dragPosition = this._layoutService.keepWidgetInViewPort(this.dragPosition, this.POSITION_STORAGE_KEY, WidgetConstants.searchHeight, WidgetConstants.searchWidth);
         }
     }
     highlight(wkt, event) {
@@ -4739,12 +4771,12 @@ class MapSearchComponent {
     _loadPosition(collapsed) {
         try {
             // Default height and width when collapsed
-            let widgetHeight = 24;
-            let widgetWidth = 86;
+            let widgetHeight = WidgetConstants.collapsedHeight;
+            let widgetWidth = WidgetConstants.collapsedWidth;
             if (!collapsed) {
                 // Custom height and width when expanded
-                widgetHeight = 122;
-                widgetWidth = 374;
+                widgetHeight = WidgetConstants.searchHeight;
+                widgetWidth = WidgetConstants.searchWidth;
             }
             const widgetPositionOptions = {
                 initialPosition: this.profile.searchInitialPosition,
@@ -4766,7 +4798,7 @@ class MapSearchComponent {
             }
             else {
                 // Default position for search
-                this.dragPosition = { x: 29, y: -125 };
+                this.dragPosition = { x: WidgetConstants.searchDefaultX, y: WidgetConstants.searchDefaultY };
                 this._savePosition(this.dragPosition);
             }
         }
@@ -4835,9 +4867,6 @@ class LegendsListComponent {
         if (changes['profile'] && this.profile) {
             this.collapsed = this.profile.legendsListFolded;
             this._loadPosition(this.collapsed);
-            if (this.profile.legendsListInitialPosition.includes('højre')) {
-                this._layoutService.bringElementIntoViewIfNeeded('.legends-list-body-wrapper', -12, this.collapsed);
-            }
             this._setFilteredLegends().subscribe(result => this.filteredLayersDetailed = result);
         }
     }
@@ -4848,8 +4877,9 @@ class LegendsListComponent {
     }
     toggleLegendsList() {
         this.collapsed = !this.collapsed;
-        if (this.profile.legendsListInitialPosition.includes('højre')) {
-            this._layoutService.bringElementIntoViewIfNeeded('.legends-list-body-wrapper', -12, this.collapsed);
+        if (!this.collapsed) {
+            //Expanding, make sure it stays in viewport
+            this.dragPosition = this._layoutService.keepWidgetInViewPort(this.dragPosition, this.POSITION_STORAGE_KEY, WidgetConstants.legendsHeight, WidgetConstants.legendsWidth);
         }
     }
     onDragEnded(event) {
@@ -4871,12 +4901,12 @@ class LegendsListComponent {
     _loadPosition(collapsed) {
         try {
             // Default height and width when collapsed
-            let widgetHeight = 24;
-            let widgetWidth = 86;
+            let widgetHeight = WidgetConstants.collapsedHeight;
+            let widgetWidth = WidgetConstants.collapsedWidth;
             if (!collapsed) {
                 // Custom height and width when expanded
-                widgetHeight = 341;
-                widgetWidth = 296;
+                widgetHeight = WidgetConstants.legendsHeight;
+                widgetWidth = WidgetConstants.legendsWidth;
             }
             const widgetPositionOptions = {
                 initialPosition: this.profile.legendsListInitialPosition,
@@ -4898,7 +4928,7 @@ class LegendsListComponent {
             }
             else {
                 // Default position for legends list
-                this.dragPosition = { x: 1753, y: 531 };
+                this.dragPosition = { x: WidgetConstants.legendsDefaultX, y: WidgetConstants.legendsDefaultY };
                 this._savePosition(this.dragPosition);
             }
         }