@geogirafe/lib-geoportal 1.1.0-dev.2273129895 → 1.1.0-dev.2273215791

package/components/drawing/olDrawing.d.ts

@@ -12,6 +12,7 @@ import { Coordinate } from 'ol/coordinate.js';
 import { ContextMenu } from '../map/tools/contextmenu.js';
 import IGirafeContext from '../../tools/context/icontext.js';
 import { StyleFunction } from 'ol/style/Style.js';
+import Transform from 'ol-ext/interaction/Transform.js';
 export default class OlDrawing {
     private readonly map;
     private readonly toolName;
@@ -28,7 +29,7 @@ export default class OlDrawing {
     drawingLayer: VectorLayer;
     lastClosestFeature: Feature | null;
     translate: Translate | null;
-    rotateAndScale: Modify | null;
+    transform: Transform | null;
     defaultStyle: StyleFunction | undefined;
     private readonly updateGeometryInState;
     private get state();
@@ -39,8 +40,8 @@ export default class OlDrawing {
     private addSnapInteraction;
     private addTranslateInteraction;
     private removeTranslateInteraction;
-    private addRotateAndScaleInteraction;
-    private removeRotateAndScaleInteraction;
+    private addTransformInteraction;
+    private removeTransformInteraction;
     /**
      * Adds a context menu to the map with a single entry 'remove vertex'. The menu is configured to open
      * when the user does an alternate click ( = context event) on or near a vertex of a modifiable feature.

package/components/drawing/olDrawing.js

@@ -8,14 +8,13 @@ import VectorSource from 'ol/source/Vector.js';
 import VectorLayer from 'ol/layer/Vector.js';
 import GeoJSON from 'ol/format/GeoJSON.js';
 import { getPointResolution } from 'ol/proj.js';
-import { never, primaryAction } from 'ol/events/condition.js';
+import { always, never, primaryAction } from 'ol/events/condition.js';
 import { ensurePolygonIsProperlyClosed, getAreaOfPolygon, getDistance, getHalfPoint, getLabelStyle, getRadiusDataForCircle } 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 { getCenter, getHeight, getWidth } from 'ol/extent.js';
-import CircleStyle from 'ol/style/Circle.js';
+import Transform from 'ol-ext/interaction/Transform.js';
 function getLineStroke(strokeType, lineWidth) {
     switch (strokeType) {
         case 'full':
@@ -48,46 +47,6 @@ function extractVerticesFromGeometry(geometry) {
     }
     return new MultiPoint(vertices);
 }
-function calculateCenter(geometry) {
-    let center, coordinates, minRadius;
-    if (geometry instanceof Polygon) {
-        let x = 0;
-        let y = 0;
-        let i = 0;
-        coordinates = geometry.getCoordinates()[0].slice();
-        for (const coordinate of coordinates) {
-            x += coordinate[0];
-            y += coordinate[1];
-            i++;
-        }
-        center = [x / i, y / i];
-    }
-    else if (geometry instanceof LineString) {
-        center = geometry.getCoordinateAt(0.5);
-        coordinates = geometry.getCoordinates();
-    }
-    else {
-        center = getCenter(geometry.getExtent());
-    }
-    let sqDistances;
-    if (coordinates) {
-        sqDistances = coordinates.map(function (coordinate) {
-            const dx = coordinate[0] - center[0];
-            const dy = coordinate[1] - center[1];
-            return dx * dx + dy * dy;
-        });
-        minRadius = Math.sqrt(Math.max(...sqDistances)) / 3;
-    }
-    else {
-        minRadius = Math.max(getWidth(geometry.getExtent()), getHeight(geometry.getExtent())) / 3;
-    }
-    return {
-        center: center,
-        coordinates: coordinates,
-        minRadius: minRadius,
-        sqDistances: sqDistances
-    };
-}
 export default class OlDrawing {
     map;
     toolName;
@@ -104,7 +63,7 @@ export default class OlDrawing {
     drawingLayer;
     lastClosestFeature = null;
     translate = null;
-    rotateAndScale = null;
+    transform = null;
     defaultStyle;
     updateGeometryInState = (olFeature) => {
         const idx = this.drawingState.features.findIndex((f) => f.id === olFeature.getId());
@@ -205,92 +164,34 @@ export default class OlDrawing {
             this.translate = null;
         }
     }
-    addRotateAndScaleInteraction() {
-        this.removeRotateAndScaleInteraction();
-        const defaultStyle = this.defaultStyle;
-        const getCoordinates = (feature) => {
-            const geometry = feature.getGeometry();
-            if (geometry instanceof Point) {
-                return geometry.getCoordinates();
-            }
-            else if (geometry instanceof LineString) {
-                return geometry.getCoordinates()[0];
-            }
-            else if (geometry instanceof Polygon) {
-                return geometry.getCoordinates()[0][0];
-            }
-            return [];
-        };
-        this.rotateAndScale = new Modify({
-            features: this.modifiableFeatures,
-            condition: (event) => {
-                return this.rotateAndScale != null && primaryAction(event);
-            },
-            deleteCondition: never,
-            insertVertexCondition: never,
-            style: function (feature, resolution) {
-                feature.get('features').forEach(function (modifyFeature) {
-                    const modifyGeometry = modifyFeature.get('modifyGeometry');
-                    if (modifyGeometry) {
-                        const point = getCoordinates(feature);
-                        let modifyPoint = modifyGeometry.point;
-                        if (!modifyPoint) {
-                            // save the initial geometry and vertex position
-                            modifyPoint = point;
-                            modifyGeometry.point = modifyPoint;
-                            modifyGeometry.geometry0 = modifyGeometry.geometry;
-                            // get anchor and minimum radius of vertices to be used
-                            const result = calculateCenter(modifyGeometry.geometry0);
-                            modifyGeometry.center = result.center;
-                            modifyGeometry.minRadius = result.minRadius;
-                        }
-                        const center = modifyGeometry.center;
-                        const minRadius = modifyGeometry.minRadius;
-                        let dx, dy;
-                        dx = modifyPoint[0] - center[0];
-                        dy = modifyPoint[1] - center[1];
-                        const initialRadius = Math.hypot(dx, dy);
-                        if (initialRadius > minRadius) {
-                            const initialAngle = Math.atan2(dy, dx);
-                            dx = point[0] - center[0];
-                            dy = point[1] - center[1];
-                            const currentRadius = Math.hypot(dx, dy);
-                            if (currentRadius > 0) {
-                                const currentAngle = Math.atan2(dy, dx);
-                                const geometry = modifyGeometry.geometry0.clone();
-                                geometry.scale(currentRadius / initialRadius, undefined, center);
-                                geometry.rotate(currentAngle - initialAngle, center);
-                                modifyGeometry.geometry = geometry;
-                            }
-                        }
-                    }
-                });
-                return defaultStyle(feature, resolution);
+    addTransformInteraction() {
+        this.transform = new Transform({
+            enableRotatedTransform: false,
+            features: new Collection(this.lastClosestFeature ? [this.lastClosestFeature] : []),
+            hitTolerance: this.map.pixelTolerance,
+            translateFeature: false,
+            scale: true,
+            rotate: true,
+            keepAspectRatio: always,
+            keepRectangle: false,
+            translate: false,
+            stretch: false,
+            pointRadius: function (f) {
+                const radius = f.get('radius') || 10;
+                return [radius, radius];
             }
         });
-        this.rotateAndScale.on('modifystart', function (event) {
-            // prettier-ignore
-            event.features.forEach(function (feature) {
-                feature.set('modifyGeometry', { geometry: feature.getGeometry().clone() }, true);
-            });
-        });
-        this.rotateAndScale.on('modifyend', (event) => {
-            // prettier-ignore
-            event.features.forEach((olFeature) => {
-                const modifyGeometry = olFeature.get('modifyGeometry');
-                if (modifyGeometry) {
-                    olFeature.setGeometry(modifyGeometry.geometry);
-                    olFeature.unset('modifyGeometry', true);
-                    this.updateGeometryInState(olFeature);
-                }
-            });
-        });
-        this.map.olMap.addInteraction(this.rotateAndScale);
+        this.map.olMap.addInteraction(this.transform);
+        if (this.lastClosestFeature) {
+            this.transform.select(this.lastClosestFeature, true);
+            this.lastClosestFeature.changed();
+        }
     }
-    removeRotateAndScaleInteraction() {
-        if (this.rotateAndScale) {
-            this.map.olMap.removeInteraction(this.rotateAndScale);
-            this.rotateAndScale = null;
+    removeTransformInteraction() {
+        if (this.transform) {
+            this.map.olMap.removeInteraction(this.transform);
+            this.transform = null;
+            this.lastClosestFeature?.changed();
         }
     }
     /**
@@ -334,9 +235,9 @@ export default class OlDrawing {
                 callback: (_evt, _mapCoordinate) => {
                     if (this.lastClosestFeature) {
                         this.removeModifyInteraction();
-                        this.addRotateAndScaleInteraction();
+                        this.addTransformInteraction();
                         this.map.olMap.on('singleclick', () => {
-                            this.removeRotateAndScaleInteraction();
+                            this.removeTransformInteraction();
                             this.addModifyInteraction();
                         });
                     }
@@ -790,7 +691,7 @@ export default class OlDrawing {
             addLabel(getHalfPoint(segment), dFeature.getLengthText(getDistance(segment, this.state.projection)));
             addLabel(square.getInteriorPoint(), dFeature.getAreaText(getAreaOfPolygon(square, this.state.projection)));
         }
-        if (dFeature.selected && this.rotateAndScale == null) {
+        if (dFeature.selected && this.transform == null) {
             const vertexStyle = dFeature.getVertexStyle();
             // Add a node style to every vertex of the geometry
             vertexStyle.setGeometry(function (f) {
@@ -801,35 +702,6 @@ export default class OlDrawing {
             });
             styles.push(vertexStyle);
         }
-        // Draw Point/Circle for Center of Geometry if rotating/scaling
-        if (this.rotateAndScale != null) {
-            const result = calculateCenter(geometry);
-            const center = result.center;
-            if (center) {
-                styles.push(new Style({
-                    geometry: new Point(center),
-                    image: new CircleStyle({
-                        radius: 4,
-                        fill: new Fill({
-                            color: '#ff3333'
-                        })
-                    })
-                }));
-                const coordinates = result.coordinates;
-                if (coordinates) {
-                    const minRadius = result.minRadius;
-                    const sqDistances = result.sqDistances;
-                    const rsq = minRadius * minRadius;
-                    const points = coordinates.filter(function (_c, index) {
-                        return sqDistances[index] > rsq;
-                    });
-                    const vertexStyle = dFeature.getVertexStyle();
-                    // Add a node style to every vertex of the geometry
-                    vertexStyle.setGeometry(new MultiPoint(points));
-                    styles.push(vertexStyle);
-                }
-            }
-        }
         return styles;
     }
     removeDrawInteraction() {

package/components/infowindow/component.js

@@ -8,9 +8,11 @@ class InfoWindowComponent extends GirafeDraggableElement {
 </style><style>
 .girafe-resizer{--resize-size:6px;--negative-resize-size:-6px}button.girafe-resizer{background-color:#0000;border:none;position:absolute}.girafe-resizer.corner{width:var(--resize-size);height:var(--resize-size)}.girafe-resizer.top-bottom{width:calc(100% - (2*var(--resize-size)));height:var(--resize-size)}.girafe-resizer.left-right{width:var(--resize-size);height:calc(100% - (2*var(--resize-size)))}.girafe-resizer.tl:hover,.girafe-resizer.br:hover{cursor:nw-resize}.girafe-resizer.tr:hover,.girafe-resizer.bl:hover{cursor:ne-resize}.girafe-resizer.top-bottom:hover{cursor:n-resize}.girafe-resizer.left-right:hover{cursor:e-resize}.girafe-resizer.tl{top:var(--negative-resize-size);left:var(--negative-resize-size)}.girafe-resizer.t{top:var(--negative-resize-size);left:var(--resize-size)}.girafe-resizer.tr{top:var(--negative-resize-size);right:var(--negative-resize-size)}.girafe-resizer.r{top:var(--resize-size);right:var(--negative-resize-size)}.girafe-resizer.br{bottom:var(--negative-resize-size);right:var(--negative-resize-size)}.girafe-resizer.b{bottom:var(--negative-resize-size);left:var(--resize-size)}.girafe-resizer.bl{bottom:var(--negative-resize-size);left:var(--negative-resize-size)}.girafe-resizer.l{top:var(--resize-size);left:var(--negative-resize-size)}.girafe-draggable-window{--window-header-height:2rem;--window-footer-height:2rem;border:solid 1px var(--text-color-grad1);box-shadow:var(--bx-shdw);background:var(--bkg-color);border-radius:3px;width:100%;height:100%}.girafe-draggable-window #header{height:var(--window-header-height);line-height:var(--window-header-height);cursor:move;z-index:10;background-color:var(--bkg-color-grad2);color:var(--text-color);text-align:center;padding:0 .5rem}.girafe-draggable-window #close{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;width:1rem;height:1rem;margin:.5rem;padding:0;line-height:1rem;position:absolute;top:0;right:0}.girafe-draggable-window #close i:before{content:"uf00d"}.girafe-draggable-window #close:hover{color:#000;border-color:#000}.girafe-draggable-window #content{width:100%;height:calc(100% - (var(--window-header-height) + var(--window-footer-height)));color:var(--text-color);overflow-y:auto}.girafe-draggable-window #footer{height:var(--window-footer-height);color:var(--text-color-grad1);border-top:solid 1px var(--text-color-grad1);justify-content:space-around;display:flex}
 </style><style>
-#content{background-color:#fff;padding-left:1rem;width:calc(100% - 1rem)!important;height:calc(100% - var(--window-header-height))!important;overflow-y:hidden!important}iframe{background:#fff;border:none;width:100%;height:100%}
+:host{--selection-window-header-height:2.5rem;--selection-window-footer-height:2.5rem;--selection-window-content-padding:.5rem}#header{flex-direction:row;display:flex;background-color:var(--bkg-color)!important;height:var(--selection-window-header-height)!important;& .title{text-align:start;flex-grow:1;padding:.25rem 0;font-weight:600}& button{flex-grow:0}}.hr{background-color:var(--bkg-color-grad1);height:2px;margin:.125rem .5rem}#content{height:calc(100% - var(--selection-window-header-height) - var(--selection-window-footer-height) - 2*var(--selection-window-content-padding))!important;&>:first-child{padding:var(--selection-window-content-padding);height:calc(100% - var(--selection-window-footer-height) - 2*var(--selection-window-content-padding))!important;width:calc(100% - 2*var(--selection-window-content-padding))!important}}#footer{height:var(--selection-window-footer-height)!important;border-top:none!important}
+</style><style>
+:host{--selection-window-footer-height:0rem}#content{background-color:var(--bkg-color)!important;overflow-y:hidden!important;& iframe{border:none;background-color:var(--bkg-color)!important}}
 </style>
-<div id="draggable" class="girafe-draggable-window"><button tabindex="-1" class="girafe-resizer tl corner"></button> <button tabindex="-1" class="girafe-resizer t top-bottom"></button> <button tabindex="-1" class="girafe-resizer tr corner"></button> <button tabindex="-1" class="girafe-resizer r left-right"></button> <button tabindex="-1" class="girafe-resizer br corner"></button> <button tabindex="-1" class="girafe-resizer b top-bottom"></button> <button tabindex="-1" class="girafe-resizer bl corner"></button> <button tabindex="-1" class="girafe-resizer l left-right"></button><div id="header"><span i18n="${this.state.infoWindow.title}"></span> <img id="close" alt="close-icon" src="icons/close.svg"></div><div id="content"><iframe title="iframe content" src="${this.state.infoWindow.url}"></iframe></div></div>`;
+<div id="draggable" class="girafe-draggable-window"><button tabindex="-1" class="girafe-resizer tl corner"></button> <button tabindex="-1" class="girafe-resizer t top-bottom"></button> <button tabindex="-1" class="girafe-resizer tr corner"></button> <button tabindex="-1" class="girafe-resizer r left-right"></button> <button tabindex="-1" class="girafe-resizer br corner"></button> <button tabindex="-1" class="girafe-resizer b top-bottom"></button> <button tabindex="-1" class="girafe-resizer bl corner"></button> <button tabindex="-1" class="girafe-resizer l left-right"></button><div id="header"><span i18n="${this.state.infoWindow.title}" class="title"></span> <button class="gg-icon-button gg-medium" onclick="${() => this.closeWindow()}" tip="Clear results and close Panel"><img alt="close-icon" src="icons/close.svg"></button></div><div class="hr"></div><div id="content"><iframe title="iframe content" src="${this.state.infoWindow.url}"></iframe></div></div>`;
     };
     visible = false;
     resizeWindow = null;
@@ -87,7 +89,7 @@ class InfoWindowComponent extends GirafeDraggableElement {
                 return value + 'px';
             // Check for a valid CSS
             const matches = value.match(/^\d.*(px|em|rem|%)$/g);
-            return matches && matches.length === 1 ? value : null;
+            return matches?.length === 1 ? value : null;
         }
         return null;
     }

package/components/selectionwindow/component.js

@@ -21,7 +21,9 @@ class SelectionWindowComponent extends GirafeDraggableElement {
 </style><style>
 .girafe-resizer{--resize-size:6px;--negative-resize-size:-6px}button.girafe-resizer{background-color:#0000;border:none;position:absolute}.girafe-resizer.corner{width:var(--resize-size);height:var(--resize-size)}.girafe-resizer.top-bottom{width:calc(100% - (2*var(--resize-size)));height:var(--resize-size)}.girafe-resizer.left-right{width:var(--resize-size);height:calc(100% - (2*var(--resize-size)))}.girafe-resizer.tl:hover,.girafe-resizer.br:hover{cursor:nw-resize}.girafe-resizer.tr:hover,.girafe-resizer.bl:hover{cursor:ne-resize}.girafe-resizer.top-bottom:hover{cursor:n-resize}.girafe-resizer.left-right:hover{cursor:e-resize}.girafe-resizer.tl{top:var(--negative-resize-size);left:var(--negative-resize-size)}.girafe-resizer.t{top:var(--negative-resize-size);left:var(--resize-size)}.girafe-resizer.tr{top:var(--negative-resize-size);right:var(--negative-resize-size)}.girafe-resizer.r{top:var(--resize-size);right:var(--negative-resize-size)}.girafe-resizer.br{bottom:var(--negative-resize-size);right:var(--negative-resize-size)}.girafe-resizer.b{bottom:var(--negative-resize-size);left:var(--resize-size)}.girafe-resizer.bl{bottom:var(--negative-resize-size);left:var(--negative-resize-size)}.girafe-resizer.l{top:var(--resize-size);left:var(--negative-resize-size)}.girafe-draggable-window{--window-header-height:2rem;--window-footer-height:2rem;border:solid 1px var(--text-color-grad1);box-shadow:var(--bx-shdw);background:var(--bkg-color);border-radius:3px;width:100%;height:100%}.girafe-draggable-window #header{height:var(--window-header-height);line-height:var(--window-header-height);cursor:move;z-index:10;background-color:var(--bkg-color-grad2);color:var(--text-color);text-align:center;padding:0 .5rem}.girafe-draggable-window #close{color:var(--text-color);cursor:pointer;background-color:#0000;border:none;width:1rem;height:1rem;margin:.5rem;padding:0;line-height:1rem;position:absolute;top:0;right:0}.girafe-draggable-window #close i:before{content:"uf00d"}.girafe-draggable-window #close:hover{color:#000;border-color:#000}.girafe-draggable-window #content{width:100%;height:calc(100% - (var(--window-header-height) + var(--window-footer-height)));color:var(--text-color);overflow-y:auto}.girafe-draggable-window #footer{height:var(--window-footer-height);color:var(--text-color-grad1);border-top:solid 1px var(--text-color-grad1);justify-content:space-around;display:flex}
 </style><style>
-:host{--selection-window-header-height:2.5rem;--selection-window-footer-height:2.5rem;--selection-window-content-padding:.5rem}#header{flex-direction:row;display:flex;background-color:var(--bkg-color)!important;height:var(--selection-window-header-height)!important;& .title{text-align:start;flex-grow:1;padding:.25rem 0;font-weight:600}& button{flex-grow:0}}.hr{background-color:var(--bkg-color-grad1);height:2px;margin:.125rem .5rem}#content{height:calc(100% - var(--selection-window-header-height) - var(--selection-window-footer-height) - 2*var(--selection-window-content-padding))!important;& div{padding:var(--selection-window-content-padding)}}#footer{height:var(--selection-window-footer-height)!important;border-top:none!important}table{border-collapse:collapse;table-layout:auto;width:100%}td.feature-id{text-align:left;color:var(--text-color);font-weight:600;line-height:2rem}td.label{text-align:left;color:var(--text-color);padding-left:.25rem;padding-right:.5rem;font-weight:600}tr.key-value{line-height:2rem}tr.key-value:nth-child(odd){background-color:var(--bkg-color-grad1)}tr.key-value:nth-child(2n){background-color:var(--bkg-color)}button{background-color:unset;color:var(--text-color-grad1);cursor:pointer;border:none;flex-grow:.25;padding:.5rem}button.showing-dropdown{background-color:var(--bkg-color-grad1)}button:disabled:hover{background-color:var(--bkg-color);cursor:default}button>img{max-height:calc(var(--selection-window-header-height)/2)}#previous i{float:left}#next i{float:right}#tools{justify-content:space-around;display:flex}#counter{line-height:var(--selection-window-footer-height);height:var(--selection-window-footer-height);text-align:center;flex-grow:1;margin-top:0}#layers-dropdown{background-color:var(--bkg-color);border:solid 1px var(--bkg-color-grad2);top:var(--selection-window-header-height);flex-direction:column;padding:.5rem 0;display:flex;position:absolute}option.layers-dropdown-item{cursor:pointer;flex-grow:1;padding:.1rem .5rem;display:flex}option.layers-dropdown-item:hover{background-color:var(--bkg-color-grad1)}
+:host{--selection-window-header-height:2.5rem;--selection-window-footer-height:2.5rem;--selection-window-content-padding:.5rem}#header{flex-direction:row;display:flex;background-color:var(--bkg-color)!important;height:var(--selection-window-header-height)!important;& .title{text-align:start;flex-grow:1;padding:.25rem 0;font-weight:600}& button{flex-grow:0}}.hr{background-color:var(--bkg-color-grad1);height:2px;margin:.125rem .5rem}#content{height:calc(100% - var(--selection-window-header-height) - var(--selection-window-footer-height) - 2*var(--selection-window-content-padding))!important;&>:first-child{padding:var(--selection-window-content-padding);height:calc(100% - var(--selection-window-footer-height) - 2*var(--selection-window-content-padding))!important;width:calc(100% - 2*var(--selection-window-content-padding))!important}}#footer{height:var(--selection-window-footer-height)!important;border-top:none!important}
+</style><style>
+table{border-collapse:collapse;table-layout:auto;width:100%}td.feature-id{text-align:left;color:var(--text-color);font-weight:600;line-height:2rem}td.label{text-align:left;color:var(--text-color);padding-left:.25rem;padding-right:.5rem;font-weight:600}tr.key-value{line-height:2rem}tr.key-value:nth-child(odd){background-color:var(--bkg-color-grad1)}tr.key-value:nth-child(2n){background-color:var(--bkg-color)}button{background-color:unset;color:var(--text-color-grad1);cursor:pointer;border:none;flex-grow:.25;padding:.5rem}button.showing-dropdown{background-color:var(--bkg-color-grad1)}button:disabled:hover{background-color:var(--bkg-color);cursor:default}button>img{max-height:calc(var(--selection-window-header-height)/2)}#previous i{float:left}#next i{float:right}#tools{justify-content:space-around;display:flex}#counter{line-height:var(--selection-window-footer-height);height:var(--selection-window-footer-height);text-align:center;flex-grow:1;margin-top:0}#layers-dropdown{background-color:var(--bkg-color);border:solid 1px var(--bkg-color-grad2);top:var(--selection-window-header-height);flex-direction:column;padding:.5rem 0;display:flex;position:absolute}option.layers-dropdown-item{cursor:pointer;flex-grow:1;padding:.1rem .5rem;display:flex}option.layers-dropdown-item:hover{background-color:var(--bkg-color-grad1)}
 </style>
 <div id="draggable" class="${this.visible ? 'girafe-draggable-window' : 'hidden'}"><button tabindex="-1" class="girafe-resizer tl corner"></button> <button tabindex="-1" class="girafe-resizer t top-bottom"></button> <button tabindex="-1" class="girafe-resizer tr corner"></button> <button tabindex="-1" class="girafe-resizer r left-right"></button> <button tabindex="-1" class="girafe-resizer br corner"></button> <button tabindex="-1" class="girafe-resizer b top-bottom"></button> <button tabindex="-1" class="girafe-resizer bl corner"></button> <button tabindex="-1" class="girafe-resizer l left-right"></button><div id="header"><span i18n="Results" class="title"></span><div id="layers-download-wrapper"><button class="${this.showDropdown ? 'gg-icon-button gg-medium showing-dropdown' : 'gg-icon-button gg-medium'}" onclick="${() => this.openDropdown()}" tip="Generate CSV"><img alt="download csv icon" src="icons/arrow-download.svg"></button><div ?hidden="${!this.showDropdown}"><div id="layers-dropdown">${this.getLayersList().map((layer) => uHtml `<option class="layers-dropdown-item" value="${layer.id}" onclick="${() => this.generateCSV(layer.id)}" onkeydown="${() => this.generateCSV(layer.id)}" tabindex="0" i18n="${layer.label}"></option>`)}</div></div></div><button class="gg-icon-button gg-medium" onclick="${() => this.recenter()}" tip="Zoom to"><img alt="zoom to selection icon" src="icons/zoom-to-selection.svg"></button> <button class="gg-icon-button gg-medium" onclick="${() => this.closeWindow()}" tip="Clear results and close Panel"><img alt="close-icon" src="icons/close.svg"></button></div><div class="hr"></div><div id="content"><div><table><tr class="hidden"><th i18n="Label">Label<th i18n="Value">Value<tr><td class="feature-id" colspan="2" i18n="${this.getWindowFeature()?.id}"></tr>${this.displayedProperties.map((keyValue) => uHtml `<tr class="key-value"><td class="label" i18n="${keyValue[0]}"><td class="value">${this.htmlUnsafe(keyValue[1])}</tr>`)}</table></div></div><div class="hr"></div><div id="footer"><button id="beginning" class="gg-icon-button gg-medium" ?disabled="${this.maxIndex == 0 || this.focusedIndex == 0}" onclick="${() => this.onFocusWindowFeature(0)}"><img alt="beginning-icon" src="icons/skip-to-beginning.svg"></button> <button id="previous" class="gg-icon-button gg-medium" ?disabled="${this.maxIndex == 0 || this.focusedIndex == 0}" onclick="${() => this.onFocusWindowFeature(this.focusedIndex - 1)}"><img alt="previous-icon" src="icons/to-previous.svg"></button><div id="counter" class="${this.maxIndex > 0 ? '' : 'hidden'}"><span class="${this.maxIndex > 0 ? '' : 'hidden'}"><input class="gg-input" type="number" min="1" max="${this.maxIndex + 1}" value="${this.focusedIndex + 1}" onchange="${(e) => this.onFocusWindowFeatureChecked(e)}"> <span>/</span> <span>${this.maxIndex + 1}</span></span></div><button id="next" class="gg-icon-button gg-medium" ?disabled="${this.maxIndex == 0 || this.focusedIndex == this.maxIndex}" onclick="${() => this.onFocusWindowFeature(this.focusedIndex + 1)}"><img alt="next-icon" src="icons/to-next.svg"></button> <button id="end" class="gg-icon-button gg-medium" ?disabled="${this.maxIndex == 0 || this.focusedIndex == this.maxIndex}" onclick="${() => this.onFocusWindowFeature(this.maxIndex)}"><img alt="end-icon" src="icons/skip-to-end.svg"></button></div></div>`;
     };

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geomapfish.dev"
   },
-  "version": "1.1.0-dev.2273129895",
+  "version": "1.1.0-dev.2273215791",
   "type": "module",
   "engines": {
     "node": ">=20.19.0"
@@ -36,7 +36,7 @@
     "buffer": "6.0.3",
     "d3": "7.9.0",
     "dompurify": "3.2.6",
-    "driver.js": "^1.3.6",
+    "driver.js": "1.3.6",
     "error-stack-parser": "2.1.4",
     "file-saver": "2.0.5",
     "jsts": "2.12.1",
@@ -56,6 +56,7 @@
     "@types/geojson": "7946",
     "cesium": ">1.113",
     "ol": "8 || 9 || 10",
+    "ol-ext": "^4.0.37",
     "ol-mapbox-style": "12",
     "olcs": "2",
     "proj4": "2"
@@ -69,6 +70,7 @@
     "@types/geojson": "7946.0.16",
     "@types/jsts": "0.17.24",
     "@types/lodash-es": "4.17.12",
+    "@types/ol-ext": "npm:@siedlerchr/types-ol-ext@3.6.5",
     "@types/serviceworker": "0.0.147",
     "@types/tabulator-tables": "6.2.9",
     "@types/uuid": "10.0.0",
@@ -93,6 +95,7 @@
     "svgo": "4.0.0",
     "typescript": "5.8.3",
     "vite": "7.0.6",
+    "vite-bundle-analyzer": "1.3.2",
     "vite-plugin-html": "3.2.2",
     "vite-plugin-static-copy": "3.1.1",
     "vitest": "3.2.4"
@@ -157,6 +160,7 @@
     "prepare-commit": "npm run pretty && npm run tsc && npm run lint && npm run test && npm run build && npm run build-lib",
     "generate-dev-certs-win": "buildtools\\generate-dev-certs.cmd",
     "generate-dev-certs-nix": "bash -C './buildtools/generate-dev-certs.sh'",
-    "trust-default-dev-certs-win": "buildtools\\trust-dev-certs.cmd"
+    "trust-default-dev-certs-win": "buildtools\\trust-dev-certs.cmd",
+    "size-analysis": "node buildtools/app-clean.js && cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build --mode analyze"
   }
 }

package/styles/window.css

@@ -0,0 +1,53 @@
+:host {
+    /*
+     * Can be overridden in custom Stylesheet.
+     * Don't set it to '0' but to '0rem'. Otherwise it will mess up the calc-Function
+     */
+    --selection-window-header-height: 2.5rem;
+    --selection-window-footer-height: 2.5rem;
+    --selection-window-content-padding: 0.5rem;
+}
+
+#header {
+    display: flex;
+    flex-direction: row;
+    background-color: var(--bkg-color) !important;
+    height: var(--selection-window-header-height) !important;
+
+    .title {
+        flex-grow: 1;
+        text-align: start;
+        padding: 0.25rem 0;
+        font-weight: 600;
+    }
+    button {
+        flex-grow: 0;
+    }
+}
+
+.hr {
+    background-color: var(--bkg-color-grad1);
+    height: 2px;
+    margin: 0.125rem 0.5rem;
+}
+
+#content {
+    height: calc(
+            100% - var(--selection-window-header-height)
+            - var(--selection-window-footer-height)
+            - 2 * var(--selection-window-content-padding)
+    ) !important;
+    >:first-child {
+        height: calc(
+                100% - var(--selection-window-footer-height)
+                - 2 * var(--selection-window-content-padding)
+        ) !important;
+        width: calc(100% - 2 *  var(--selection-window-content-padding)) !important;
+        padding: var(--selection-window-content-padding);
+    }
+}
+
+#footer {
+    height: var(--selection-window-footer-height) !important;
+    border-top: none !important;
+}

package/templates/public/about.json

@@ -1 +1 @@
-{"version":"1.1.0-dev.2273129895", "build":"2273129895", "date":"20/01/2026"}
+{"version":"1.1.0-dev.2273215791", "build":"2273215791", "date":"20/01/2026"}

package/templates/vite.config.js

@@ -7,6 +7,7 @@ import { HtmlRebuildPlugin } from '@geogirafe/lib-geoportal/buildtools';
 import { createHtmlPlugin } from 'vite-plugin-html';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 import dns from 'dns';
+import analyzer from 'vite-bundle-analyzer';
 
 /**
  * Custom name resolution for app.localhost:
@@ -43,7 +44,7 @@ const geogirafeSource = 'node_modules/@geogirafe/lib-geoportal';
 const certsDirectory = 'certs';
 
 // https://v2.vitejs.dev/config/
-export default defineConfig(({ command }) => {
+export default defineConfig(({ command, mode }) => {
   return {
     base: './',
     server: {
@@ -112,7 +113,6 @@ export default defineConfig(({ command }) => {
           { src: `${geogirafeSource}/styles/*.css`, dest: 'styles/' },
           { src: `${geogirafeSource}/assets/*`, dest: '' },
           { src: `${geogirafeSource}/tools/auth/silentlogincallback.html`, dest: '' },
-          //{ src: `${geogirafeSource}/api/index.html`, dest: 'api/' },
           { src: 'node_modules/ol/ol.css', dest: 'lib/ol/' },
           { src: 'node_modules/tabulator-tables/dist/css/tabulator.min.css', dest: 'lib/tabulator-tables/' },
           { src: 'node_modules/tippy.js/dist/*.css', dest: 'lib/tippy.js/' },
@@ -123,7 +123,15 @@ export default defineConfig(({ command }) => {
       HtmlRebuildPlugin(),
       createHtmlPlugin({
         minify: true
-      })
+      }),
+      mode === 'analyze' &&
+        // https://www.npmjs.com/package/vite-bundle-analyzer
+        analyzer({
+          analyzerMode: 'static',
+          openAnalyzer: true,
+          defaultSizes: 'brotli', // or "gzip"
+          summary: true
+        })
     ],
     define: {
       // Define relative base path in cesium for loading assets