qwc2 2026.7.9 → 2026.7.29

package/components/ExportSelection.js

@@ -128,24 +128,36 @@ var ExportSelection = /*#__PURE__*/function (_React$Component) {
       }
       if (this.props.frameRatio !== prevProps.frameRatio) {
         this.setState(function (state) {
-          var maxWidth = _this2.exportContainer.offsetWidth;
-          var maxHeight = _this2.exportContainer.offsetHeight;
-          var newheight = _this2.props.frameRatio ? Math.round(state.width * _this2.props.frameRatio) : state.height;
-          var newwidth = state.width;
+          var containerWidth = _this2.exportContainer.offsetWidth;
+          var containerHeight = _this2.exportContainer.offsetHeight;
+          var maxWidth = 0.75 * containerWidth;
+          var maxHeight = 0.75 * containerHeight;
+          var newwidth;
+          var newheight;
           if (_this2.props.frameRatio) {
-            if (newwidth > maxWidth) {
+            if (_this2.props.frameRatio >= 1) {
               newwidth = maxWidth;
               newheight = Math.round(newwidth * _this2.props.frameRatio);
-            }
-            if (newheight > maxHeight) {
+              if (newheight > maxHeight) {
+                newheight = maxHeight;
+                newwidth = Math.round(newheight / _this2.props.frameRatio);
+              }
+            } else {
               newheight = maxHeight;
               newwidth = Math.round(newheight / _this2.props.frameRatio);
+              if (newwidth > maxWidth) {
+                newwidth = maxWidth;
+                newheight = Math.round(newwidth * _this2.props.frameRatio);
+              }
             }
+          } else {
+            newwidth = state.width;
+            newheight = state.height;
           }
           return {
             frameRatio: _this2.props.frameRatio,
-            x: 0.5 * (maxWidth - newwidth),
-            y: 0.5 * (maxHeight - newheight),
+            x: 0.5 * (containerWidth - newwidth),
+            y: 0.5 * (containerHeight - newheight),
             width: newwidth,
             height: newheight
           };

package/components/IdentifyViewer.js

@@ -37,7 +37,6 @@ import React from 'react';
 import { connect } from 'react-redux';
 import axios from 'axios';
 import clone from 'clone';
-import DOMPurify from 'dompurify';
 import FileSaver from 'file-saver';
 import JSZip from 'jszip';
 import isEmpty from 'lodash.isempty';
@@ -1164,12 +1163,7 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
       return _this.parsedContent(text);
     });
     _defineProperty(_this, "parsedContent", function (text) {
-      text = DOMPurify.sanitize(text, {
-        ADD_ATTR: ['target'],
-        ADD_TAGS: ["iframe"],
-        FORCE_BODY: true,
-        ALLOW_UNKNOWN_PROTOCOLS: true
-      }).replace('&#10;', '<br />');
+      text = MiscUtils.sanitizeHtml(text).replace('&#10;', '<br />');
       var options = {
         replace: function replace(node) {
           if (node.name === "a") {

package/components/LayerInfoWindow.js

@@ -22,7 +22,6 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 
 import React from 'react';
 import { connect } from 'react-redux';
-import DOMPurify from 'dompurify';
 import PropTypes from 'prop-types';
 import { setActiveLayerInfo } from '../actions/layerinfo';
 import ResizeableWindow from '../components/ResizeableWindow';
@@ -45,7 +44,7 @@ var LayerInfoWindow = /*#__PURE__*/function (_React$Component) {
       if (content) {
         return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, title, ":"), html ? /*#__PURE__*/React.createElement("td", {
           dangerouslySetInnerHTML: {
-            __html: MiscUtils.addLinkAnchors(DOMPurify.sanitize(content))
+            __html: MiscUtils.addLinkAnchors(MiscUtils.sanitizeHtml(content))
           }
         }) : /*#__PURE__*/React.createElement("td", null, content));
       }

package/components/LocationRecorder.js

@@ -45,7 +45,7 @@ var LocationRecorder = /*#__PURE__*/function (_React$Component) {
       } else {
         _this.props.drawInteraction.abortDrawing();
         _this.props.drawInteraction.setActive(false);
-        // Re-add overlay to map, removed by setActive(false), to ensure traced feature is visibile
+        // Re-add overlay to map, removed by setActive(false), to ensure traced feature is visible
         _this.props.drawInteraction.getOverlay().setMap(_this.props.map);
         _this.setState({
           recording: true

package/components/MapSelection.js

@@ -124,7 +124,6 @@ var MapSelection = /*#__PURE__*/function (_React$Component) {
       if (!geometry) {
         return;
       }
-      var coords = _this.props.geomType === 'Circle' ? null : geometry.getCoordinates();
       if (_this.props.geomType === "Circle") {
         // Also store poligonized circle
         var center = geometry.getCenter();
@@ -141,19 +140,11 @@ var MapSelection = /*#__PURE__*/function (_React$Component) {
             radius: radius
           }
         });
-      } else if (_this.props.geomType === "DragBox" || _this.props.geomType === "Box") {
-        var boxcoords = [[Math.min(coords[0][0][0], coords[0][2][0]), Math.min(coords[0][0][1], coords[0][2][1]), Math.max(coords[0][0][0], coords[0][2][0]), Math.max(coords[0][0][1], coords[0][2][1])]];
-        _this.setState({
-          geometry: {
-            type: "Polygon",
-            coordinates: boxcoords
-          }
-        });
       } else {
         _this.setState({
           geometry: {
-            type: _this.props.geomType,
-            coordinates: coords
+            type: geometry.getType(),
+            coordinates: geometry.getCoordinates()
           }
         });
       }

package/components/PickFeature.js

@@ -94,7 +94,7 @@ var PickFeature = /*#__PURE__*/function (_React$Component) {
         };
         if (newState.pendingQueries === 0) {
           if (newState.pickResults.length === 1) {
-            _this.props.featurePicked(newState.pickResults[0].layer, newState.pickResults[0].feature, newState.pickResults[0].mapName);
+            _this.props.featurePicked(newState.pickResults[0].layer, newState.pickResults[0].feature, newState.pickResults[0].mapName, state.mapPos);
             newState.pickResults = null;
             newState.pickGeom = null;
           } else if (newState.pickResults.length === 0) {
@@ -237,6 +237,7 @@ var PickFeature = /*#__PURE__*/function (_React$Component) {
           return {
             pickResults: pickResults,
             clickPos: clickPos,
+            mapPos: [maxX, maxY],
             pendingQueries: queryWmsLayers.length,
             reqId: reqId
           };
@@ -261,7 +262,7 @@ var PickFeature = /*#__PURE__*/function (_React$Component) {
           return /*#__PURE__*/React.createElement("div", {
             key: key,
             onClick: function onClick() {
-              return _this3.props.featurePicked(entry.layer, entry.feature, entry.mapName);
+              return _this3.props.featurePicked(entry.layer, entry.feature, entry.mapName, _this3.state.mapPos);
             },
             onMouseOut: function onMouseOut() {
               return _this3.clearHighlight(key, entry.feature);
@@ -330,6 +331,7 @@ _defineProperty(PickFeature, "defaultState", {
   pickGeom: null,
   pickResults: null,
   clickPos: null,
+  mapPos: null,
   highlightedFeature: null,
   pendingQueries: 0,
   reqId: null

package/components/ResizeableWindow.js

@@ -319,7 +319,7 @@ var ResizeableWindow = /*#__PURE__*/function (_React$Component) {
       }, _this.renderTitleBar(), /*#__PURE__*/React.createElement("div", {
         className: "resizeable-window-body"
       }, _this.portalNode ? /*#__PURE__*/React.createElement("div", {
-        className: "resizeable-window-portal-container"
+        className: "resizeable-window-portal-container resizeable-window-portal-container-detached"
       }, /*#__PURE__*/React.createElement(portals.OutPortal, {
         node: _this.portalNode
       })) : _this.props.children)), _this.state.externalWindow.document.body);

package/components/SearchBox.js

@@ -36,7 +36,6 @@ import React from 'react';
 import { connect } from 'react-redux';
 import axios from 'axios';
 import classnames from 'classnames';
-import DOMPurify from 'dompurify';
 import isEmpty from 'lodash.isempty';
 import pointInPolygon from 'point-in-polygon';
 import polygonIntersectTest from 'polygon-intersect-test';
@@ -410,7 +409,7 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
       }) : null, /*#__PURE__*/React.createElement("span", {
         className: "searchbox-result-label",
         dangerouslySetInnerHTML: {
-          __html: DOMPurify.sanitize(result.text).replace(/<br\s*\/>/ig, ' ')
+          __html: MiscUtils.sanitizeHtml(result.text).replace(/<br\s*\/>/ig, ' ')
         },
         title: (_result$label = result.label) !== null && _result$label !== void 0 ? _result$label : result.text
       }), result.externalLink ? /*#__PURE__*/React.createElement(Icon, {
@@ -422,21 +421,21 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
       }) : null);
     });
     _defineProperty(_this, "renderLayerResult", function (provider, group, result) {
-      var _result$label3, _result$layer;
+      var _ConfigUtils$getPlugi, _result$label3, _result$layer;
       var parent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
       var level = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
       var key = provider + ":" + group.id + ":" + result.id;
       var addThemes = ConfigUtils.getConfigProp("allowAddingOtherThemes", _this.props.theme);
       var icon = null;
+      var toggleLayerGroup = function toggleLayerGroup(ev) {
+        MiscUtils.killEvent(ev);
+        _this.setState(function (state) {
+          return {
+            expandedLayerGroup: state.expandedLayerGroup === key ? null : key
+          };
+        });
+      };
       if (result.sublayers) {
-        var toggleLayerGroup = function toggleLayerGroup(ev) {
-          MiscUtils.killEvent(ev);
-          _this.setState(function (state) {
-            return {
-              expandedLayerGroup: state.expandedLayerGroup === key ? null : key
-            };
-          });
-        };
         icon = /*#__PURE__*/React.createElement(Icon, {
           icon: _this.state.expandedLayerGroup === key ? "minus" : "plus",
           onClick: function onClick(ev) {
@@ -456,7 +455,7 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
       return [/*#__PURE__*/React.createElement("div", {
         className: "searchbox-result",
         key: key,
-        onClick: function onClick() {
+        onClick: (_ConfigUtils$getPlugi = ConfigUtils.getPluginConfig("LayerCatalog")) !== null && _ConfigUtils$getPlugi !== void 0 && (_ConfigUtils$getPlugi = _ConfigUtils$getPlugi.cfg) !== null && _ConfigUtils$getPlugi !== void 0 && _ConfigUtils$getPlugi.toggleGroupOnClick && result.sublayers ? toggleLayerGroup : function () {
           return selectResult(provider, group, result);
         },
         style: {
@@ -468,7 +467,7 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
       }) : null, /*#__PURE__*/React.createElement("span", {
         className: "searchbox-result-label",
         dangerouslySetInnerHTML: {
-          __html: DOMPurify.sanitize(result.text).replace(/<br\s*\/>/ig, ' ')
+          __html: MiscUtils.sanitizeHtml(result.text).replace(/<br\s*\/>/ig, ' ')
         },
         title: (_result$label3 = result.label) !== null && _result$label3 !== void 0 ? _result$label3 : result.text
       }), result.theme && addThemes ? /*#__PURE__*/React.createElement(Icon, {
@@ -501,7 +500,7 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
       }) : null), _this.state.activeLayerInfo === key ? /*#__PURE__*/React.createElement("div", {
         className: "searchbox-result-abstract",
         dangerouslySetInnerHTML: {
-          __html: MiscUtils.addLinkAnchors(DOMPurify.sanitize(((_result$layer = result.layer) === null || _result$layer === void 0 ? void 0 : _result$layer["abstract"]) || "")) || LocaleUtils.tr("search.nodescription")
+          __html: MiscUtils.addLinkAnchors(MiscUtils.sanitizeHtml(((_result$layer = result.layer) === null || _result$layer === void 0 ? void 0 : _result$layer["abstract"]) || "")) || LocaleUtils.tr("search.nodescription")
         },
         disabled: true,
         key: key + ":abstract",
@@ -533,13 +532,14 @@ var SearchBox = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/React.createElement("span", {
         className: "searchbox-result-label",
         dangerouslySetInnerHTML: {
-          __html: DOMPurify.sanitize(result.text).replace(/<br\s*\/>/ig, ' ')
+          __html: MiscUtils.sanitizeHtml(result.text).replace(/<br\s*\/>/ig, ' ')
         },
         title: (_result$label5 = result.label) !== null && _result$label5 !== void 0 ? _result$label5 : result.text
       }), result.theme && addThemes ? /*#__PURE__*/React.createElement(Icon, {
         icon: "plus",
         onClick: function onClick(ev) {
-          return _this.addThemeLayers(result.layer);
+          MiscUtils.killEvent(ev);
+          _this.addThemeLayers(result.layer);
         },
         title: LocaleUtils.tr("themeswitcher.addtotheme")
       }) : null);

package/components/ServiceInfoWindow.js

@@ -21,10 +21,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  */
 
 import React from 'react';
-import { connect } from 'react-redux';
-import DOMPurify from 'dompurify';
 import PropTypes from 'prop-types';
-import { setActiveServiceInfo } from '../actions/serviceinfo';
 import ResizeableWindow from '../components/ResizeableWindow';
 import LocaleUtils from '../utils/LocaleUtils';
 import MiscUtils from '../utils/MiscUtils';
@@ -42,15 +39,12 @@ var ServiceInfoWindow = /*#__PURE__*/function (_React$Component) {
       if (content) {
         return /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, title, ":"), html ? /*#__PURE__*/React.createElement("td", {
           dangerouslySetInnerHTML: {
-            __html: MiscUtils.addLinkAnchors(DOMPurify.sanitize(content))
+            __html: MiscUtils.addLinkAnchors(MiscUtils.sanitizeHtml(content))
           }
         }) : /*#__PURE__*/React.createElement("td", null, content));
       }
       return null;
     });
-    _defineProperty(_this, "onClose", function () {
-      _this.props.setActiveServiceInfo(null);
-    });
     return _this;
   }
   _inherits(ServiceInfoWindow, _React$Component);
@@ -82,7 +76,7 @@ var ServiceInfoWindow = /*#__PURE__*/function (_React$Component) {
         initialX: this.props.layerInfoGeometry.initialX,
         initialY: this.props.layerInfoGeometry.initialY,
         initiallyDocked: this.props.layerInfoGeometry.initiallyDocked,
-        onClose: this.onClose,
+        onClose: this.props.onClose,
         title: LocaleUtils.tr("serviceinfo.title")
       }, /*#__PURE__*/React.createElement("div", {
         className: "service-info-window-body"
@@ -98,14 +92,7 @@ var ServiceInfoWindow = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 _defineProperty(ServiceInfoWindow, "propTypes", {
   layerInfoGeometry: PropTypes.object,
-  service: PropTypes.object,
-  setActiveServiceInfo: PropTypes.func
+  onClose: PropTypes.func,
+  service: PropTypes.object
 });
-var selector = function selector(state) {
-  return {
-    service: state.serviceinfo.service
-  };
-};
-export default connect(selector, {
-  setActiveServiceInfo: setActiveServiceInfo
-})(ServiceInfoWindow);
+export default ServiceInfoWindow;

package/components/ThemeList.js

@@ -29,7 +29,6 @@ import React from 'react';
 import { connect } from 'react-redux';
 import axios from 'axios';
 import { remove as removeDiacritics } from 'diacritics';
-import DOMPurify from 'dompurify';
 import isEmpty from 'lodash.isempty';
 import PropTypes from 'prop-types';
 import { setActiveLayerInfo } from '../actions/layerinfo';
@@ -180,7 +179,7 @@ var ThemeList = /*#__PURE__*/function (_React$Component) {
         }, item.description ? /*#__PURE__*/React.createElement("div", {
           className: "theme-item-description",
           dangerouslySetInnerHTML: {
-            __html: DOMPurify.sanitize(item.description)
+            __html: MiscUtils.sanitizeHtml(item.description)
           }
         }) : null, /*#__PURE__*/React.createElement("img", {
           className: "theme-item-thumbnail",

package/components/map3d/Map3D.js

@@ -148,6 +148,8 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
         zoomToObject: function zoomToObject(objectId) {},
         objectIsVisible: function objectIsVisible(objectId) {},
         objectContainsPoints: function objectContainsPoints(object) {},
+        addObjectAddedListener: function addObjectAddedListener(callback) {},
+        removeObjectAddedListener: function removeObjectAddedListener(callback) {},
         getMap: function getMap() {},
         computeBoundsTree: function computeBoundsTree(object) {},
         setViewToExtent: function setViewToExtent(bounds, angle) {},
@@ -384,6 +386,7 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
         }
         _this2.computeBoundsTree(scene);
         _this2.instance.notifyChange(tiles);
+        _this2.notifyObjectAdded(scene);
       });
       // Show/hide labels when tile visibility changes
       tiles.tiles.addEventListener('tile-visibility-change', function (_ref3) {
@@ -394,6 +397,9 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
           l.labelObject.visible = visible;
           l.labelObject.element.style.display = visible ? 'initial' : 'none';
         });
+        if (visible) {
+          _this2.notifyObjectAdded(scene);
+        }
       });
       tiles.castShadow = true;
       tiles.receiveShadow = true;
@@ -473,6 +479,7 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
         });
       } else {
         _this2.sceneObjectGroup.add(object);
+        _this2.notifyObjectAdded(object);
         callback === null || callback === void 0 || callback();
       }
       _this2.objectMap[objectId] = object;
@@ -583,7 +590,7 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
       var changed = false;
       if (options.visibility !== prevOptions.visibility || options.opacity !== (prevOptions === null || prevOptions === void 0 ? void 0 : prevOptions.opacity)) {
         var _objectTree$options$p2;
-        // Visibile if object is visibile and parents also
+        // Visible if object is visible and parents also
         var isVisible = options.opacity > 0 && options.visibility;
         for (var curId = options.parent; isVisible && curId !== undefined; curId = objectTree[curId].parent) {
           isVisible && (isVisible = objectTree[curId].visibility);
@@ -647,6 +654,11 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
         }
       });
     });
+    _defineProperty(_this2, "notifyObjectAdded", function (obj) {
+      _this2.objectAddedListeners.forEach(function (listener) {
+        return listener(obj);
+      });
+    });
     _defineProperty(_this2, "loadTilesetStyle", function (objectId, url) {
       var applyTilesetStyle = function applyTilesetStyle(styleurl) {
         var tiles3d = _this2.objectMap[objectId];
@@ -690,7 +702,7 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
       var objectTree = _this2.state.sceneContext.objectTree;
       var options = objectTree[objectId];
       var isVisible = options.opacity > 0 && options.visibility;
-      for (var curId = options.parent; isVisible && curId !== undefined; curId = objectTree[curId].parent) {
+      for (var curId = options.parent; isVisible && curId !== undefined && objectTree[curId]; curId = objectTree[curId].parent) {
         isVisible && (isVisible = objectTree[curId].visibility);
       }
       return isVisible;
@@ -1302,6 +1314,7 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
     _this2.sceneObjectGroup = null;
     _this2.objectMap = {};
     _this2.tilesetStyles = {};
+    _this2.objectAddedListeners = [];
     _this2.state.sceneContext.eventDispatcher = new EventDispatcher();
     _this2.state.sceneContext.addLayer = _this2.addLayer;
     _this2.state.sceneContext.getLayer = _this2.getLayer;
@@ -1314,6 +1327,14 @@ var Map3D = /*#__PURE__*/function (_React$Component2) {
     _this2.state.sceneContext.getSceneObject = _this2.getSceneObject;
     _this2.state.sceneContext.removeSceneObject = _this2.removeSceneObject;
     _this2.state.sceneContext.updateSceneObject = _this2.updateSceneObject;
+    _this2.state.sceneContext.addObjectAddedListener = function (callback) {
+      return _this2.objectAddedListeners.push(callback);
+    };
+    _this2.state.sceneContext.removeObjectAddedListener = function (callback) {
+      _this2.objectAddedListeners = _this2.objectAddedListeners.filter(function (cb) {
+        return cb !== callback;
+      });
+    };
     _this2.state.sceneContext.zoomToObject = _this2.zoomToObject;
     _this2.state.sceneContext.objectIsVisible = _this2.objectIsVisible;
     _this2.state.sceneContext.objectContainsPoints = _this2.objectContainsPoints;

package/components/map3d/utils/OrbitControls3D.js

@@ -79,12 +79,13 @@ var OrbitControls3D = /*#__PURE__*/function (_MapControls) {
     key: "disconnect",
     value: function disconnect() {
       this.animationId = null;
-      _superPropGet(OrbitControls3D, "disconnect", this, 3)([]);
       this.enabled = false;
       this.sceneContext.scene.view.setControls(null);
       this.domElement.removeEventListener('pointerdown', this.stopAnimations);
       this.domElement.removeEventListener('wheel', this.stopAnimations);
       this.removeEventListener('change', this.updateControlsTarget);
+      _superPropGet(OrbitControls3D, "disconnect", this, 3)([]);
+      this.domElement = null;
     }
   }, {
     key: "setView",

package/components/share/ShareSocials.js

@@ -1,5 +1,4 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
 function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
@@ -23,7 +22,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 */
 
 import React from 'react';
-import { FacebookShareButton, LinkedinShareButton, TwitterShareButton, WhatsappShareButton, EmailShareButton, FacebookShareCount, FacebookIcon, TwitterIcon, LinkedinIcon, WhatsappIcon, EmailIcon } from 'react-share';
+import { FacebookShareButton, LinkedinShareButton, TwitterShareButton, WhatsappShareButton, EmailShareButton, FacebookIcon, TwitterIcon, LinkedinIcon, WhatsappIcon, EmailIcon } from 'react-share';
 import PropTypes from 'prop-types';
 import LocaleUtils from '../../utils/LocaleUtils';
 import './style/ShareSocials.css';
@@ -52,7 +51,7 @@ var ShareSocials = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/React.createElement(EmailIcon, {
           round: true,
           size: 32
-        })), /*#__PURE__*/React.createElement("div", null, "\xA0")),
+        }))),
         facebook: /*#__PURE__*/React.createElement("div", {
           className: "social-box",
           key: "facebook"
@@ -62,11 +61,7 @@ var ShareSocials = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/React.createElement(FacebookIcon, {
           round: true,
           size: 32
-        })), /*#__PURE__*/React.createElement(FacebookShareCount, _extends({
-          url: url
-        }, countProps), function (count) {
-          return count;
-        })),
+        }))),
         twitter: /*#__PURE__*/React.createElement("div", {
           className: "social-box",
           key: "twitter"
@@ -76,7 +71,7 @@ var ShareSocials = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/React.createElement(TwitterIcon, {
           round: true,
           size: 32
-        })), /*#__PURE__*/React.createElement("div", null, "\xA0")),
+        }))),
         linkedin: /*#__PURE__*/React.createElement("div", {
           className: "social-box",
           key: "linkedin"
@@ -86,7 +81,7 @@ var ShareSocials = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/React.createElement(LinkedinIcon, {
           round: true,
           size: 32
-        })), /*#__PURE__*/React.createElement("div", null, "\xA0")),
+        }))),
         whatsapp: /*#__PURE__*/React.createElement("div", {
           className: "social-box",
           key: "whatsapp"
@@ -96,7 +91,7 @@ var ShareSocials = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/React.createElement(WhatsappIcon, {
           round: true,
           size: 32
-        })), /*#__PURE__*/React.createElement("div", null, "\xA0"))
+        })))
       };
       var socialBoxes = [];
       if (this.props.showSocials === true) {
@@ -125,7 +120,4 @@ _defineProperty(ShareSocials, "propTypes", {
   shareUrl: PropTypes.string,
   showSocials: PropTypes.oneOfType([PropTypes.bool, PropTypes.array])
 });
-_defineProperty(ShareSocials, "defaultProps", {
-  shareTitle: 'GeoSolutions'
-});
 export { ShareSocials as default };

package/components/style/ResizeableWindow.css

@@ -16,6 +16,16 @@ div.resizeable-window-portal-container > div {
     height: 100%;
 }
 
+div.resizeable-window-portal-container-detached {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 2.5em;
+    padding: 0.25em;
+    background-color: var(--container-bg-color);
+}
+
 div.resizeable-window-contents {
     display: flex;
     flex-direction: column;

package/components/widgets/ColorButton.js

@@ -29,6 +29,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import { ColorPicker } from '@vtaits/react-color-picker';
 import '@vtaits/react-color-picker/index.css';
 import React from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import MiscUtils from '../../utils/MiscUtils';
 import './style/ColorButton.css';
@@ -41,26 +42,36 @@ var ColorButton = /*#__PURE__*/function (_React$Component) {
     _classCallCheck(this, ColorButton);
     _this = _callSuper(this, ColorButton, [props]);
     _defineProperty(_this, "state", {
-      colors: defaultColors
+      colors: defaultColors,
+      pickerPos: null,
+      hexStr: null
     });
     _defineProperty(_this, "togglePicker", function (ev) {
-      if (!_this.state.pickerVisible) {
-        document.addEventListener('click', _this.checkClosePicker);
-      } else {
-        document.removeEventListener('click', _this.checkClosePicker);
+      if (_this.menuContainer) {
+        // Should not happen...
+        _this.menuContainer.parentElement.removeChild(_this.menuContainer);
+        _this.menuContainer = null;
       }
-      ev.stopPropagation();
-      _this.setState(function (state) {
-        return {
-          hexStr: null,
-          pickerVisible: !state.pickerVisible
-        };
+      _this.menuContainer = ev.view.document.createElement("div");
+      _this.menuContainer.className = "colorbutton-picker-container";
+      ev.view.document.body.appendChild(_this.menuContainer);
+      _this.menuContainer.addEventListener('click', function (ev2) {
+        if (ev2.currentTarget === ev2.target) {
+          _this.setState({
+            pickerPos: null,
+            hexStr: null
+          }, function () {
+            _this.menuContainer.parentElement.removeChild(_this.menuContainer);
+            _this.menuContainer = null;
+          });
+        }
       });
-    });
-    _defineProperty(_this, "checkClosePicker", function (ev) {
-      if (_this.pickerEl && !_this.pickerEl.contains(ev.target)) {
-        _this.togglePicker(ev);
-      }
+      var rect = ev.currentTarget.getBoundingClientRect();
+      _this.setState({
+        hexStr: null,
+        pickerPos: [rect.left + 0.5 * rect.width, rect.bottom]
+      });
+      ev.stopPropagation();
     });
     _defineProperty(_this, "selectColor", function (idx) {
       _this.setState({
@@ -99,11 +110,7 @@ var ColorButton = /*#__PURE__*/function (_React$Component) {
       var newColor = [].concat(_toConsumableArray(_this.props.color.slice(0, 3)), [parseFloat(alpha)]);
       _this.props.onColorChanged(newColor);
     });
-    _this.state = {
-      pickerVisible: false,
-      hexStr: null
-    };
-    _this.pickerEl = null;
+    _this.menuContainer = null;
     _this.state.colors = props.defaultColors;
     return _this;
   }
@@ -112,10 +119,13 @@ var ColorButton = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var pickerStyle = {
-        visibility: this.state.pickerVisible ? 'visible' : 'hidden'
-      };
       var curColor = this.props.color;
+      var pickerStyle = function pickerStyle() {
+        return {
+          left: "calc(".concat(_this2.state.pickerPos[0], "px - 6.5em)"),
+          top: "calc(".concat(_this2.state.pickerPos[1], "px + 0.7em)")
+        };
+      };
       return /*#__PURE__*/React.createElement("div", {
         className: "ColorButton"
       }, /*#__PURE__*/React.createElement("div", {
@@ -127,12 +137,9 @@ var ColorButton = /*#__PURE__*/function (_React$Component) {
         style: {
           backgroundColor: this.cssColor(curColor)
         }
-      })), /*#__PURE__*/React.createElement("div", {
+      })), this.state.pickerPos ? /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
         className: "colorbutton-picker",
-        ref: function ref(el) {
-          _this2.pickerEl = el;
-        },
-        style: pickerStyle
+        style: pickerStyle()
       }, /*#__PURE__*/React.createElement("div", {
         className: "colorbutton-picker-icons"
       }, this.state.colors.map(function (color, idx) {
@@ -156,6 +163,7 @@ var ColorButton = /*#__PURE__*/function (_React$Component) {
         className: "colorbutton-picker-spectrum",
         onDrag: this.changeColor,
         saturationHeight: 150,
+        saturationWidth: null,
         value: this.cssColorRGB(curColor)
       }), /*#__PURE__*/React.createElement("div", {
         className: "colorbutton-picker-input controlgroup"
@@ -182,7 +190,7 @@ var ColorButton = /*#__PURE__*/function (_React$Component) {
         step: "0.1",
         type: "range",
         value: curColor[3]
-      }))) : null)));
+      }))) : null)), this.menuContainer) : null);
     }
   }, {
     key: "cssColor",