qwc2 2025.10.9 → 2025.10.14

package/components/ResizeableWindow.js

@@ -1,13 +1,596 @@
-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 ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}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}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
  * Copyright 2017-2024 Sourcepole AG
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import ReactDOM from"react-dom";import{connect}from"react-redux";import*as portals from"react-reverse-portal";import{Rnd}from"react-rnd";import classnames from"classnames";import PropTypes from"prop-types";import{v4 as uuidv4}from"uuid";import{raiseWindow,registerWindow,unregisterWindow,setSplitScreen}from"../actions/windows";import ConfigUtils from"../utils/ConfigUtils";import LocaleUtils from"../utils/LocaleUtils";import MiscUtils from"../utils/MiscUtils";import Icon from"./Icon";import Spinner from"./widgets/Spinner";import"./style/ResizeableWindow.css";var WINDOW_GEOMETRIES={};var ResizeableWindow=/*#__PURE__*/function(_React$Component){function ResizeableWindow(props){var _this;_classCallCheck(this,ResizeableWindow);_this=_callSuper(this,ResizeableWindow,[props]);_defineProperty(_this,"state",{geometry:null});_defineProperty(_this,"renderRole",function(role){return React.Children.toArray(_this.props.children).find(function(child){return child.props.role===role})});_defineProperty(_this,"onClose",function(ev){if(_this.state.externalWindow){_this.state.externalWindow.removeEventListener("beforeunload",_this.props.onClose)}_this.props.onClose();ev.stopPropagation()});_defineProperty(_this,"renderTitleBar",function(){if(_this.props.fullscreen){return null}var maximized=_this.state.geometry.maximized?true:false;var minimized=_this.state.geometry.minimized?true:false;var docked=_this.state.geometry.docked;var dockSide=_this.props.dockable===true?"left":_this.props.dockable;var dockable=_this.props.dockable&&!_this.state.externalWindow;if(ConfigUtils.getConfigProp("globallyDisableDockableDialogs")){dockable=false}var maximizeable=_this.props.maximizeable&&!_this.state.externalWindow&&!_this.props.fitHeight;if(ConfigUtils.getConfigProp("globallyDisableMaximizeableDialogs")){maximizeable=false}var minimizeable=_this.props.minimizeable&&!_this.state.externalWindow;var icon=null;if(_this.props.busyIcon){icon=/*#__PURE__*/React.createElement(Spinner,null)}else if(_this.props.icon){icon=/*#__PURE__*/React.createElement(Icon,{className:"resizeable-window-titlebar-icon",icon:_this.props.icon,size:"large"})}var dockIcon=docked?"undock":"dock";dockIcon=dockIcon+"_"+dockSide;var iconClasses=classnames({"resizeable-window-titlebar-control":true,"resizeable-window-nodrag":true});var detachIcons=null;if(!ConfigUtils.isMobile()&&!ConfigUtils.getConfigProp("globallyDisableDetachableDialogs")&&_this.props.detachable!==false){detachIcons=_this.state.externalWindow?/*#__PURE__*/React.createElement(Icon,{className:iconClasses,icon:"embed",onClick:_this.moveToInternalWindow,title:LocaleUtils.tr("window.embed")}):/*#__PURE__*/React.createElement(Icon,{className:iconClasses,icon:"detach",onClick:_this.moveToExternalWindow,title:LocaleUtils.tr("window.detach")})}return/*#__PURE__*/React.createElement("div",{className:"resizeable-window-titlebar",onDoubleClick:_this.state.externalWindow?null:_this.toggleMaximize},icon,/*#__PURE__*/React.createElement("span",{className:"resizeable-window-titlebar-title"},_this.props.title),(_this.props.extraControls||[]).map(function(entry){var extraIconClasses=classnames({"resizeable-window-titlebar-extra-control":true,"resizeable-window-titlebar-extra-control-active":entry.active,"resizeable-window-nodrag":true});return/*#__PURE__*/React.createElement(Icon,{className:extraIconClasses,icon:entry.icon,key:entry.icon,onClick:entry.callback,title:entry.title})}),!maximized&&dockable?/*#__PURE__*/React.createElement(Icon,{className:iconClasses,icon:dockIcon,onClick:_this.toggleDock,title:_this.state.geometry.docked?LocaleUtils.tr("window.undock"):LocaleUtils.tr("window.dock")}):null,minimizeable?/*#__PURE__*/React.createElement(Icon,{className:iconClasses,icon:minimized?"unminimize":"minimize",onClick:_this.toggleMinimize,title:minimized?LocaleUtils.tr("window.unminimize"):LocaleUtils.tr("window.minimize")}):null,maximizeable?/*#__PURE__*/React.createElement(Icon,{className:iconClasses,icon:maximized?"unmaximize":"maximize",onClick:_this.toggleMaximize,title:maximized?LocaleUtils.tr("window.unmaximize"):LocaleUtils.tr("window.maximize")}):null,detachIcons,_this.props.onClose?/*#__PURE__*/React.createElement(Icon,{className:iconClasses,icon:"remove",onClick:_this.onClose,title:LocaleUtils.tr("window.close")}):null)});_defineProperty(_this,"renderInternalWindowContainer",function(){var _this$state$geometry$,_this$state$geometry,_this$state$geometry$2,_this$state$geometry2;var docked=(_this$state$geometry$=(_this$state$geometry=_this.state.geometry)===null||_this$state$geometry===void 0?void 0:_this$state$geometry.docked)!==null&&_this$state$geometry$!==void 0?_this$state$geometry$:_this.props.initiallyDocked;var maximized=(_this$state$geometry$2=(_this$state$geometry2=_this.state.geometry)===null||_this$state$geometry2===void 0?void 0:_this$state$geometry2.maximized)!==null&&_this$state$geometry$2!==void 0?_this$state$geometry$2:false;var splitTopAndBottomBar=_this.props.splitTopAndBottomBar&&_this.props.splitScreenWhenDocked&&(docked||maximized);var marginLeft=0;var marginRight=0;if(!splitTopAndBottomBar){marginLeft=_this.props.mapMargins.outerLeft+_this.props.menuMargins.left;marginRight=_this.props.mapMargins.outerRight+_this.props.menuMargins.right}var containerStyle={left:marginLeft+"px",right:marginRight+"px",top:splitTopAndBottomBar?0:_this.props.topbarHeight+"px",bottom:splitTopAndBottomBar?0:_this.props.bottombarHeight+"px",zIndex:splitTopAndBottomBar?110:_this.props.baseZIndex+_this.props.windowStacking.findIndex(function(item){return item===_this.id})};return/*#__PURE__*/React.createElement("div",{className:"resizeable-window-container",key:"InternalWindow",ref:_this.setInitialSize,style:containerStyle},_this.props.visible&&_this.state.geometry?_this.renderInternalWindow():null)});_defineProperty(_this,"renderInternalWindow",function(){var maximized=_this.state.geometry.maximized||_this.props.fullscreen?true:false;var minimized=_this.state.geometry.minimized?true:false;var dockSide=_this.props.dockable===true?"left":_this.props.dockable;var bodyclasses=classnames({"resizeable-window-body":true,"resizeable-window-body-scrollable":_this.props.scrollable,"resizeable-window-body-nonscrollable":!_this.props.scrollable,"resizeable-window-nodrag":true});var windowclasses=classnames({"resizeable-window":true,"resizeable-window-maximized":maximized,"resizeable-window-minimized":minimized,"resizeable-window-fit-height":_this.props.fitHeight,"resizeable-window-docked-left":!_this.props.splitScreenWhenDocked&&_this.state.geometry.docked&&dockSide==="left"&&!maximized,"resizeable-window-docked-right":!_this.props.splitScreenWhenDocked&&_this.state.geometry.docked&&dockSide==="right"&&!maximized,"resizeable-window-split-left":_this.props.splitScreenWhenDocked&&_this.state.geometry.docked&&dockSide==="left"&&!maximized,"resizeable-window-split-right":_this.props.splitScreenWhenDocked&&_this.state.geometry.docked&&dockSide==="right"&&!maximized,"resizeable-window-docked-top":_this.state.geometry.docked&&dockSide==="top"&&!maximized,"resizeable-window-docked-bottom":_this.state.geometry.docked&&dockSide==="bottom"&&!maximized});var resizeMode={left:true,right:true,top:true,bottom:true,bottomLeft:true,bottomRight:true,topLeft:true,topRight:true};if(maximized||minimized){resizeMode=false}else if(_this.state.geometry.docked){resizeMode={left:dockSide==="right",right:dockSide==="left",top:dockSide==="bottom",bottom:dockSide!=="bottom"&&!_this.props.splitScreenWhenDocked||_this.props.splitScreenWhenDocked&&dockSide==="top"}}if(_this.props.fitHeight){resizeMode.top=false;resizeMode.bottom=false;resizeMode.bottomLeft=true;resizeMode.bottomRight=true;resizeMode.topLeft=true;resizeMode.topRight=true}return/*#__PURE__*/React.createElement(Rnd,{bounds:"parent",cancel:".resizeable-window-nodrag",className:windowclasses,"default":_this.state.geometry,disableDragging:maximized||_this.state.geometry.docked,enableResizing:resizeMode,maxHeight:_this.props.maxHeight||"100%",maxWidth:_this.props.maxWidth||"100%",minHeight:_this.props.minHeight,minWidth:_this.props.minWidth,onDragStart:_this.onDragStart,onDragStop:_this.onDragStop,onMouseDown:function onMouseDown(){return _this.props.raiseWindow(_this.id)},onResizeStop:_this.onResizeStop,ref:_this.initRnd},/*#__PURE__*/React.createElement("div",{className:"resizeable-window-contents"},_this.renderTitleBar(),/*#__PURE__*/React.createElement("div",{className:bodyclasses,onMouseDown:function onMouseDown(){return _this.props.raiseWindow(_this.id)}},/*#__PURE__*/React.createElement("div",{className:"resizeable-window-drag-shield",ref:function ref(el){_this.dragShield=el}}),_this.portalNode?/*#__PURE__*/React.createElement("div",{className:"resizeable-window-portal-container"},/*#__PURE__*/React.createElement(portals.OutPortal,{node:_this.portalNode})):_this.renderRole("body"))))});_defineProperty(_this,"setInitialSize",function(container){if(!container){return}var width=Math.min(_this.props.initialWidth,container.offsetWidth);var height=Math.min(_this.props.initialHeight,container.offsetHeight);var geometry=null;if(WINDOW_GEOMETRIES[_this.props.title]){geometry=WINDOW_GEOMETRIES[_this.props.title]}else{geometry={x:_this.props.initialX!==null?_this.computeInitialX(container,_this.props.initialX):Math.max(0,Math.round(0.5*(container.offsetWidth-width))),y:_this.props.initialY!==null?_this.computeInitialY(container,_this.props.initialY):Math.max(0,Math.round(0.5*(container.offsetHeight-height))),width:width,height:height,docked:_this.props.initiallyDocked,detached:false}}if(_this.props.splitScreenWhenDocked&&geometry.docked){var dockSide=_this.props.dockable===true?"left":_this.props.dockable;var dockSize=["left","right"].includes(dockSide)?geometry.width:geometry.height;_this.props.setSplitScreen(_this.id,dockSide,dockSize,_this.props.splitTopAndBottomBar)}_this.setState({geometry:geometry})});_defineProperty(_this,"computeInitialX",function(container,x){return x>0||Object.is(x,0)?x:container.offsetWidth-_this.props.initialWidth-Math.abs(x)});_defineProperty(_this,"computeInitialY",function(container,y){return y>0||Object.is(y,0)?y:container.offsetHeight-_this.props.initialHeight-Math.abs(y)});_defineProperty(_this,"renderExternalWindow",function(){return/*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div",{className:"resizeable-window-contents"},_this.renderTitleBar(),/*#__PURE__*/React.createElement("div",{className:"resizeable-window-body"},_this.portalNode?/*#__PURE__*/React.createElement("div",{className:"resizeable-window-portal-container"},/*#__PURE__*/React.createElement(portals.OutPortal,{node:_this.portalNode})):_this.renderRole("body"))),_this.state.externalWindow.document.body)});_defineProperty(_this,"initRnd",function(el){if(el){_this.rnd=el;_this.rnd.updatePosition(_this.state.geometry)}});_defineProperty(_this,"onDragStart",function(){if(_this.dragShield){_this.dragShield.style.display="initial"}});_defineProperty(_this,"onDragStop",function(ev,data){_this.setState(function(state){return{geometry:_objectSpread(_objectSpread({},state.geometry),{},{x:data.x,y:data.y})}});if(_this.dragShield){_this.dragShield.style.display="none"}});_defineProperty(_this,"onResizeStop",function(ev,dir,ref,delta,position){// Delay one event loop cycle else clientWidth / clientHeight may not yet be up-to-date
-setTimeout(function(){_this.setState(function(state){return{geometry:_objectSpread(_objectSpread({},state.geometry),{},{x:position.x,y:position.y,width:ref.clientWidth,height:ref.clientHeight})}})},0)});_defineProperty(_this,"toggleDock",function(){_this.setState(function(state){return{geometry:_objectSpread(_objectSpread({},state.geometry),{},{docked:!state.geometry.docked})}});_this.rnd.updatePosition(_this.state.geometry)});_defineProperty(_this,"toggleMinimize",function(){_this.setState(function(state){return{geometry:_objectSpread(_objectSpread({},state.geometry),{},{minimized:!state.geometry.minimized})}})});_defineProperty(_this,"toggleMaximize",function(){_this.setState(function(state){return{geometry:_objectSpread(_objectSpread({},state.geometry),{},{maximized:!state.geometry.maximized,minimized:false})}})});_defineProperty(_this,"moveToExternalWindow",function(){var title=_this.props.title;var windowOptions=["popup=true","toolbar=no","locationbar=no","location=no","directories=no","status=no","menubar=no","scrollbars=yes","resizable=yes","width="+_this.state.geometry.width,"height="+_this.state.geometry.height].join(", ");var externalWindow=window.open("about:blank","_blank",windowOptions);externalWindow.addEventListener("resize",_this.props.onExternalWindowResized,false);var loadInterval=setInterval(function(){if(externalWindow.document.readyState!=="complete"){return}clearInterval(loadInterval);externalWindow.addEventListener("beforeunload",_this.props.onClose,{capture:false,once:true});var titleEl=externalWindow.document.createElement("title");titleEl.appendChild(externalWindow.document.createTextNode(title));externalWindow.document.head.appendChild(titleEl);var icon=MiscUtils.getFaviconFromIcon(_this.props.icon,48);if(icon){var iconEl=externalWindow.document.createElement("link");iconEl.rel="icon";iconEl.href=icon;iconEl.sizes="48x48";externalWindow.document.head.appendChild(iconEl)}// Inherit styles
-Array.from(document.styleSheets).forEach(function(styleSheet){if(styleSheet.href){// External styles
-var linkElement=externalWindow.document.createElement("link");linkElement.rel="stylesheet";linkElement.href=styleSheet.href;externalWindow.document.head.appendChild(linkElement)}else if(styleSheet.cssRules){// Inline styles
-var styleElement=externalWindow.document.createElement("style");var cssText=Array.from(styleSheet.cssRules).map(function(rule){return rule.cssText}).join("\n");styleElement.appendChild(externalWindow.document.createTextNode(cssText));externalWindow.document.head.appendChild(styleElement)}});externalWindow.document.querySelector(":root").style.setProperty("--topbar-height",document.querySelector(":root").style.getPropertyValue("--topbar-height"));externalWindow.document.querySelector(":root").style.setProperty("--bottombar-height",document.querySelector(":root").style.getPropertyValue("--bottombar-height"));// Inherit API
-externalWindow.qwc2=window.qwc2;_this.setState(function(state){return{externalWindow:externalWindow,geometry:_objectSpread(_objectSpread({},state.geometry),{},{detached:true})}})},50)});_defineProperty(_this,"moveToInternalWindow",function(){if(_this.state.externalWindow){_this.state.externalWindow.removeEventListener("beforeunload",_this.props.onClose);_this.state.externalWindow.removeEventListener("resize",_this.props.onExternalWindowResized,false);_this.state.externalWindow.close();_this.setState(function(state){var newGeometry=_objectSpread(_objectSpread({},state.geometry),{},{detached:false});WINDOW_GEOMETRIES[_this.props.title]=newGeometry;return{externalWindow:null,geometry:newGeometry}})}});_defineProperty(_this,"closeExternalWindow",function(){if(_this.state.externalWindow){_this.state.externalWindow.close()}});_this.rnd=null;_this.dragShield=null;_this.id=uuidv4();_this.portalNode=props.usePortal?portals.createHtmlPortalNode():null;return _this}_inherits(ResizeableWindow,_React$Component);return _createClass(ResizeableWindow,[{key:"componentDidMount",value:function componentDidMount(){this.props.registerWindow(this.id);window.addEventListener("beforeunload",this.closeExternalWindow,{once:true})}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.props.unregisterWindow(this.id);if(this.props.splitScreenWhenDocked){this.props.setSplitScreen(this.id,null,null,false)}if(this.state.externalWindow){this.state.externalWindow.close()}window.removeEventListener("beforeunload",this.closeExternalWindow)}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){if(!this.state.geometry||!prevState.geometry){return}if(this.rnd&&this.props.visible&&this.props.visible!==prevProps.visible){this.props.onGeometryChanged(this.state.geometry);this.rnd.updatePosition(this.state.geometry)}if(this.state.geometry!==prevState.geometry){this.props.onGeometryChanged(this.state.geometry);WINDOW_GEOMETRIES[this.props.title]=this.state.geometry}if(this.props.splitScreenWhenDocked&&(this.props.visible!==prevProps.visible||this.state.geometry!==prevState.geometry||this.state.externalWindow!==prevState.externalWindow)){if(!this.props.visible&&prevProps.visible||this.state.geometry.docked===false&&prevState.geometry.docked!==false||this.state.geometry.maximized===true&&prevState.geometry.maximized!==true||this.state.externalWindow&&!prevState.externalWindow){this.props.setSplitScreen(this.id,null,null,false)}else if(this.props.visible&&this.state.geometry.docked&&!this.state.externalWindow&&!this.state.geometry.maximized){var dockSide=this.props.dockable===true?"left":this.props.dockable;var dockSize=["left","right"].includes(dockSide)?this.state.geometry.width:this.state.geometry.height;this.props.setSplitScreen(this.id,dockSide,dockSize,this.props.splitTopAndBottomBar)}}if(!this.props.visible&&prevProps.visible&&this.state.externalWindow){// Cannot hide an external window
-this.moveToInternalWindow()}}},{key:"render",value:function render(){return[this.portalNode?/*#__PURE__*/React.createElement(portals.InPortal,{key:"InPortal",node:this.portalNode},this.renderRole("body")):null,this.state.externalWindow?this.renderExternalWindow():this.renderInternalWindowContainer()]}}])}(React.Component);_defineProperty(ResizeableWindow,"propTypes",{baseZIndex:PropTypes.number,bottombarHeight:PropTypes.number,busyIcon:PropTypes.bool,children:PropTypes.oneOfType([PropTypes.node,PropTypes.func]),detachable:PropTypes.bool,dockable:PropTypes.oneOfType([PropTypes.bool,PropTypes.string]),extraControls:PropTypes.arrayOf(PropTypes.shape({active:PropTypes.bool,icon:PropTypes.string.isRequired,callback:PropTypes.func.isRequired,title:PropTypes.string})),fitHeight:PropTypes.bool,fullscreen:PropTypes.bool,icon:PropTypes.string,initialHeight:PropTypes.number,initialWidth:PropTypes.number,initialX:PropTypes.number,initialY:PropTypes.number,initiallyDocked:PropTypes.bool,mapMargins:PropTypes.object,maxHeight:PropTypes.number,maxWidth:PropTypes.number,maximizeable:PropTypes.bool,menuMargins:PropTypes.object,minHeight:PropTypes.number,minWidth:PropTypes.number,minimizeable:PropTypes.bool,onClose:PropTypes.func,onExternalWindowResized:PropTypes.func,onGeometryChanged:PropTypes.func,raiseWindow:PropTypes.func,registerWindow:PropTypes.func,scrollable:PropTypes.bool,setSplitScreen:PropTypes.func,splitScreenWhenDocked:PropTypes.bool,splitTopAndBottomBar:PropTypes.bool,title:PropTypes.string,topbarHeight:PropTypes.number,unregisterWindow:PropTypes.func,usePortal:PropTypes.bool,visible:PropTypes.bool,windowStacking:PropTypes.array});_defineProperty(ResizeableWindow,"defaultProps",{baseZIndex:10,initialX:null,initialY:null,initialWidth:240,initialHeight:320,minWidth:50,minHeight:50,maxWidth:null,maxHeight:null,maximizeable:true,minimizeable:false,visible:true,dockable:true,onExternalWindowResized:function onExternalWindowResized(){},onGeometryChanged:function onGeometryChanged(){},externalWindow:null,usePortal:true});export default connect(function(state){return{windowStacking:state.windows.stacking,topbarHeight:state.windows.topbarHeight,bottombarHeight:state.windows.bottombarHeight,mapMargins:state.windows.mapMargins,menuMargins:state.windows.menuMargins}},{raiseWindow:raiseWindow,registerWindow:registerWindow,setSplitScreen:setSplitScreen,unregisterWindow:unregisterWindow})(ResizeableWindow);
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { connect } from 'react-redux';
+import * as portals from 'react-reverse-portal';
+import { Rnd } from 'react-rnd';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+import { v4 as uuidv4 } from 'uuid';
+import { raiseWindow, registerWindow, unregisterWindow, setSplitScreen } from '../actions/windows';
+import ConfigUtils from '../utils/ConfigUtils';
+import LocaleUtils from '../utils/LocaleUtils';
+import MiscUtils from '../utils/MiscUtils';
+import Icon from './Icon';
+import Spinner from './widgets/Spinner';
+import './style/ResizeableWindow.css';
+var WINDOW_GEOMETRIES = {};
+var ResizeableWindow = /*#__PURE__*/function (_React$Component) {
+  function ResizeableWindow(props) {
+    var _this;
+    _classCallCheck(this, ResizeableWindow);
+    _this = _callSuper(this, ResizeableWindow, [props]);
+    _defineProperty(_this, "state", {
+      geometry: null
+    });
+    _defineProperty(_this, "renderRole", function (role) {
+      return React.Children.toArray(_this.props.children).find(function (child) {
+        return child.props.role === role;
+      });
+    });
+    _defineProperty(_this, "onClose", function (ev) {
+      if (_this.state.externalWindow) {
+        _this.state.externalWindow.removeEventListener('beforeunload', _this.props.onClose);
+      }
+      _this.props.onClose();
+      ev.stopPropagation();
+    });
+    _defineProperty(_this, "renderTitleBar", function () {
+      if (_this.props.fullscreen) {
+        return null;
+      }
+      var maximized = _this.state.geometry.maximized ? true : false;
+      var minimized = _this.state.geometry.minimized ? true : false;
+      var docked = _this.state.geometry.docked;
+      var dockSide = _this.props.dockable === true ? "left" : _this.props.dockable;
+      var dockable = _this.props.dockable && !_this.state.externalWindow;
+      if (ConfigUtils.getConfigProp("globallyDisableDockableDialogs")) {
+        dockable = false;
+      }
+      var maximizeable = _this.props.maximizeable && !_this.state.externalWindow && !_this.props.fitHeight;
+      if (ConfigUtils.getConfigProp("globallyDisableMaximizeableDialogs")) {
+        maximizeable = false;
+      }
+      var minimizeable = _this.props.minimizeable && !_this.state.externalWindow;
+      var icon = null;
+      if (_this.props.busyIcon) {
+        icon = /*#__PURE__*/React.createElement(Spinner, null);
+      } else if (_this.props.icon) {
+        icon = /*#__PURE__*/React.createElement(Icon, {
+          className: "resizeable-window-titlebar-icon",
+          icon: _this.props.icon,
+          size: "large"
+        });
+      }
+      var dockIcon = docked ? 'undock' : 'dock';
+      dockIcon = dockIcon + "_" + dockSide;
+      var iconClasses = classnames({
+        "resizeable-window-titlebar-control": true,
+        "resizeable-window-nodrag": true
+      });
+      var detachIcons = null;
+      if (!ConfigUtils.isMobile() && !ConfigUtils.getConfigProp("globallyDisableDetachableDialogs") && _this.props.detachable !== false) {
+        detachIcons = _this.state.externalWindow ? /*#__PURE__*/React.createElement(Icon, {
+          className: iconClasses,
+          icon: "embed",
+          onClick: _this.moveToInternalWindow,
+          title: LocaleUtils.tr("window.embed")
+        }) : /*#__PURE__*/React.createElement(Icon, {
+          className: iconClasses,
+          icon: "detach",
+          onClick: _this.moveToExternalWindow,
+          title: LocaleUtils.tr("window.detach")
+        });
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        className: "resizeable-window-titlebar",
+        onDoubleClick: _this.state.externalWindow ? null : _this.toggleMaximize
+      }, icon, /*#__PURE__*/React.createElement("span", {
+        className: "resizeable-window-titlebar-title"
+      }, _this.props.title), (_this.props.extraControls || []).map(function (entry) {
+        var extraIconClasses = classnames({
+          "resizeable-window-titlebar-extra-control": true,
+          "resizeable-window-titlebar-extra-control-active": entry.active,
+          "resizeable-window-nodrag": true
+        });
+        return /*#__PURE__*/React.createElement(Icon, {
+          className: extraIconClasses,
+          icon: entry.icon,
+          key: entry.icon,
+          onClick: entry.callback,
+          title: entry.title
+        });
+      }), !maximized && dockable ? /*#__PURE__*/React.createElement(Icon, {
+        className: iconClasses,
+        icon: dockIcon,
+        onClick: _this.toggleDock,
+        title: _this.state.geometry.docked ? LocaleUtils.tr("window.undock") : LocaleUtils.tr("window.dock")
+      }) : null, minimizeable ? /*#__PURE__*/React.createElement(Icon, {
+        className: iconClasses,
+        icon: minimized ? "unminimize" : "minimize",
+        onClick: _this.toggleMinimize,
+        title: minimized ? LocaleUtils.tr("window.unminimize") : LocaleUtils.tr("window.minimize")
+      }) : null, maximizeable ? /*#__PURE__*/React.createElement(Icon, {
+        className: iconClasses,
+        icon: maximized ? "unmaximize" : "maximize",
+        onClick: _this.toggleMaximize,
+        title: maximized ? LocaleUtils.tr("window.unmaximize") : LocaleUtils.tr("window.maximize")
+      }) : null, detachIcons, _this.props.onClose ? /*#__PURE__*/React.createElement(Icon, {
+        className: iconClasses,
+        icon: "remove",
+        onClick: _this.onClose,
+        title: LocaleUtils.tr("window.close")
+      }) : null);
+    });
+    _defineProperty(_this, "renderInternalWindowContainer", function () {
+      var _this$state$geometry$, _this$state$geometry, _this$state$geometry$2, _this$state$geometry2;
+      var docked = (_this$state$geometry$ = (_this$state$geometry = _this.state.geometry) === null || _this$state$geometry === void 0 ? void 0 : _this$state$geometry.docked) !== null && _this$state$geometry$ !== void 0 ? _this$state$geometry$ : _this.props.initiallyDocked;
+      var maximized = (_this$state$geometry$2 = (_this$state$geometry2 = _this.state.geometry) === null || _this$state$geometry2 === void 0 ? void 0 : _this$state$geometry2.maximized) !== null && _this$state$geometry$2 !== void 0 ? _this$state$geometry$2 : false;
+      var splitTopAndBottomBar = _this.props.splitTopAndBottomBar && _this.props.splitScreenWhenDocked && (docked || maximized);
+      var marginLeft = 0;
+      var marginRight = 0;
+      if (!splitTopAndBottomBar) {
+        marginLeft = _this.props.mapMargins.outerLeft + _this.props.menuMargins.left;
+        marginRight = _this.props.mapMargins.outerRight + _this.props.menuMargins.right;
+      }
+      var containerStyle = {
+        left: marginLeft + 'px',
+        right: marginRight + 'px',
+        top: splitTopAndBottomBar ? 0 : _this.props.topbarHeight + 'px',
+        bottom: splitTopAndBottomBar ? 0 : _this.props.bottombarHeight + 'px',
+        zIndex: splitTopAndBottomBar ? 110 : _this.props.baseZIndex + _this.props.windowStacking.findIndex(function (item) {
+          return item === _this.id;
+        })
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        className: "resizeable-window-container",
+        key: "InternalWindow",
+        ref: _this.setInitialSize,
+        style: containerStyle
+      }, _this.props.visible && _this.state.geometry ? _this.renderInternalWindow() : null);
+    });
+    _defineProperty(_this, "renderInternalWindow", function () {
+      var maximized = _this.state.geometry.maximized || _this.props.fullscreen ? true : false;
+      var minimized = _this.state.geometry.minimized ? true : false;
+      var dockSide = _this.props.dockable === true ? "left" : _this.props.dockable;
+      var bodyclasses = classnames({
+        "resizeable-window-body": true,
+        "resizeable-window-body-scrollable": _this.props.scrollable,
+        "resizeable-window-body-nonscrollable": !_this.props.scrollable,
+        "resizeable-window-nodrag": true
+      });
+      var windowclasses = classnames({
+        "resizeable-window": true,
+        "resizeable-window-maximized": maximized,
+        "resizeable-window-minimized": minimized,
+        "resizeable-window-fit-height": _this.props.fitHeight,
+        "resizeable-window-docked-left": !_this.props.splitScreenWhenDocked && _this.state.geometry.docked && dockSide === "left" && !maximized,
+        "resizeable-window-docked-right": !_this.props.splitScreenWhenDocked && _this.state.geometry.docked && dockSide === "right" && !maximized,
+        "resizeable-window-split-left": _this.props.splitScreenWhenDocked && _this.state.geometry.docked && dockSide === "left" && !maximized,
+        "resizeable-window-split-right": _this.props.splitScreenWhenDocked && _this.state.geometry.docked && dockSide === "right" && !maximized,
+        "resizeable-window-docked-top": _this.state.geometry.docked && dockSide === "top" && !maximized,
+        "resizeable-window-docked-bottom": _this.state.geometry.docked && dockSide === "bottom" && !maximized
+      });
+      var resizeMode = {
+        left: true,
+        right: true,
+        top: true,
+        bottom: true,
+        bottomLeft: true,
+        bottomRight: true,
+        topLeft: true,
+        topRight: true
+      };
+      if (maximized || minimized) {
+        resizeMode = false;
+      } else if (_this.state.geometry.docked) {
+        resizeMode = {
+          left: dockSide === "right",
+          right: dockSide === "left",
+          top: dockSide === "bottom",
+          bottom: dockSide !== "bottom" && !_this.props.splitScreenWhenDocked || _this.props.splitScreenWhenDocked && dockSide === "top"
+        };
+      }
+      if (_this.props.fitHeight) {
+        resizeMode.top = false;
+        resizeMode.bottom = false;
+        resizeMode.bottomLeft = true;
+        resizeMode.bottomRight = true;
+        resizeMode.topLeft = true;
+        resizeMode.topRight = true;
+      }
+      return /*#__PURE__*/React.createElement(Rnd, {
+        bounds: "parent",
+        cancel: ".resizeable-window-nodrag",
+        className: windowclasses,
+        "default": _this.state.geometry,
+        disableDragging: maximized || _this.state.geometry.docked,
+        enableResizing: resizeMode,
+        maxHeight: _this.props.maxHeight || "100%",
+        maxWidth: _this.props.maxWidth || "100%",
+        minHeight: _this.props.minHeight,
+        minWidth: _this.props.minWidth,
+        onDragStart: _this.onDragStart,
+        onDragStop: _this.onDragStop,
+        onMouseDown: function onMouseDown() {
+          return _this.props.raiseWindow(_this.id);
+        },
+        onResizeStop: _this.onResizeStop,
+        ref: _this.initRnd
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "resizeable-window-contents"
+      }, _this.renderTitleBar(), /*#__PURE__*/React.createElement("div", {
+        className: bodyclasses,
+        onMouseDown: function onMouseDown() {
+          return _this.props.raiseWindow(_this.id);
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "resizeable-window-drag-shield",
+        ref: function ref(el) {
+          _this.dragShield = el;
+        }
+      }), _this.portalNode ? /*#__PURE__*/React.createElement("div", {
+        className: "resizeable-window-portal-container"
+      }, /*#__PURE__*/React.createElement(portals.OutPortal, {
+        node: _this.portalNode
+      })) : _this.renderRole("body"))));
+    });
+    _defineProperty(_this, "setInitialSize", function (container) {
+      if (!container) {
+        return;
+      }
+      var width = Math.min(_this.props.initialWidth, container.offsetWidth);
+      var height = Math.min(_this.props.initialHeight, container.offsetHeight);
+      var geometry = null;
+      if (WINDOW_GEOMETRIES[_this.props.title]) {
+        geometry = WINDOW_GEOMETRIES[_this.props.title];
+      } else {
+        geometry = {
+          x: _this.props.initialX !== null ? _this.computeInitialX(container, _this.props.initialX) : Math.max(0, Math.round(0.5 * (container.offsetWidth - width))),
+          y: _this.props.initialY !== null ? _this.computeInitialY(container, _this.props.initialY) : Math.max(0, Math.round(0.5 * (container.offsetHeight - height))),
+          width: width,
+          height: height,
+          docked: _this.props.initiallyDocked,
+          detached: false
+        };
+      }
+      if (_this.props.splitScreenWhenDocked && geometry.docked) {
+        var dockSide = _this.props.dockable === true ? "left" : _this.props.dockable;
+        var dockSize = ["left", "right"].includes(dockSide) ? geometry.width : geometry.height;
+        _this.props.setSplitScreen(_this.id, dockSide, dockSize, _this.props.splitTopAndBottomBar);
+      }
+      _this.setState({
+        geometry: geometry
+      });
+    });
+    _defineProperty(_this, "computeInitialX", function (container, x) {
+      return x > 0 || Object.is(x, 0) ? x : container.offsetWidth - _this.props.initialWidth - Math.abs(x);
+    });
+    _defineProperty(_this, "computeInitialY", function (container, y) {
+      return y > 0 || Object.is(y, 0) ? y : container.offsetHeight - _this.props.initialHeight - Math.abs(y);
+    });
+    _defineProperty(_this, "renderExternalWindow", function () {
+      return /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
+        className: "resizeable-window-contents"
+      }, _this.renderTitleBar(), /*#__PURE__*/React.createElement("div", {
+        className: "resizeable-window-body"
+      }, _this.portalNode ? /*#__PURE__*/React.createElement("div", {
+        className: "resizeable-window-portal-container"
+      }, /*#__PURE__*/React.createElement(portals.OutPortal, {
+        node: _this.portalNode
+      })) : _this.renderRole("body"))), _this.state.externalWindow.document.body);
+    });
+    _defineProperty(_this, "initRnd", function (el) {
+      if (el) {
+        _this.rnd = el;
+        _this.rnd.updatePosition(_this.state.geometry);
+      }
+    });
+    _defineProperty(_this, "onDragStart", function () {
+      if (_this.dragShield) {
+        _this.dragShield.style.display = 'initial';
+      }
+    });
+    _defineProperty(_this, "onDragStop", function (ev, data) {
+      _this.setState(function (state) {
+        return {
+          geometry: _objectSpread(_objectSpread({}, state.geometry), {}, {
+            x: data.x,
+            y: data.y
+          })
+        };
+      });
+      if (_this.dragShield) {
+        _this.dragShield.style.display = 'none';
+      }
+    });
+    _defineProperty(_this, "onResizeStop", function (ev, dir, ref, delta, position) {
+      // Delay one event loop cycle else clientWidth / clientHeight may not yet be up-to-date
+      setTimeout(function () {
+        _this.setState(function (state) {
+          return {
+            geometry: _objectSpread(_objectSpread({}, state.geometry), {}, {
+              x: position.x,
+              y: position.y,
+              width: ref.clientWidth,
+              height: ref.clientHeight
+            })
+          };
+        });
+      }, 0);
+    });
+    _defineProperty(_this, "toggleDock", function () {
+      _this.setState(function (state) {
+        return {
+          geometry: _objectSpread(_objectSpread({}, state.geometry), {}, {
+            docked: !state.geometry.docked
+          })
+        };
+      });
+      _this.rnd.updatePosition(_this.state.geometry);
+    });
+    _defineProperty(_this, "toggleMinimize", function () {
+      _this.setState(function (state) {
+        return {
+          geometry: _objectSpread(_objectSpread({}, state.geometry), {}, {
+            minimized: !state.geometry.minimized
+          })
+        };
+      });
+    });
+    _defineProperty(_this, "toggleMaximize", function () {
+      _this.setState(function (state) {
+        return {
+          geometry: _objectSpread(_objectSpread({}, state.geometry), {}, {
+            maximized: !state.geometry.maximized,
+            minimized: false
+          })
+        };
+      });
+    });
+    _defineProperty(_this, "moveToExternalWindow", function () {
+      var title = _this.props.title;
+      var windowOptions = ["popup=true", "toolbar=no", "locationbar=no", "location=no", "directories=no", "status=no", "menubar=no", "scrollbars=yes", "resizable=yes", "width=" + _this.state.geometry.width, "height=" + _this.state.geometry.height].join(", ");
+      var externalWindow = window.open('about:blank', "_blank", windowOptions);
+      externalWindow.addEventListener('resize', _this.props.onExternalWindowResized, false);
+      var loadInterval = setInterval(function () {
+        if (externalWindow.document.readyState !== 'complete') {
+          return;
+        }
+        clearInterval(loadInterval);
+        externalWindow.addEventListener('beforeunload', _this.props.onClose, {
+          capture: false,
+          once: true
+        });
+        var titleEl = externalWindow.document.createElement('title');
+        titleEl.appendChild(externalWindow.document.createTextNode(title));
+        externalWindow.document.head.appendChild(titleEl);
+        var icon = MiscUtils.getFaviconFromIcon(_this.props.icon, 48);
+        if (icon) {
+          var iconEl = externalWindow.document.createElement('link');
+          iconEl.rel = "icon";
+          iconEl.href = icon;
+          iconEl.sizes = "48x48";
+          externalWindow.document.head.appendChild(iconEl);
+        }
+
+        // Inherit styles
+        Array.from(document.styleSheets).forEach(function (styleSheet) {
+          if (styleSheet.href) {
+            // External styles
+            var linkElement = externalWindow.document.createElement('link');
+            linkElement.rel = 'stylesheet';
+            linkElement.href = styleSheet.href;
+            externalWindow.document.head.appendChild(linkElement);
+          } else if (styleSheet.cssRules) {
+            // Inline styles
+            var styleElement = externalWindow.document.createElement('style');
+            var cssText = Array.from(styleSheet.cssRules).map(function (rule) {
+              return rule.cssText;
+            }).join("\n");
+            styleElement.appendChild(externalWindow.document.createTextNode(cssText));
+            externalWindow.document.head.appendChild(styleElement);
+          }
+        });
+        externalWindow.document.querySelector(':root').style.setProperty('--topbar-height', document.querySelector(':root').style.getPropertyValue('--topbar-height'));
+        externalWindow.document.querySelector(':root').style.setProperty('--bottombar-height', document.querySelector(':root').style.getPropertyValue('--bottombar-height'));
+        // Inherit API
+        externalWindow.qwc2 = window.qwc2;
+        _this.setState(function (state) {
+          return {
+            externalWindow: externalWindow,
+            geometry: _objectSpread(_objectSpread({}, state.geometry), {}, {
+              detached: true
+            })
+          };
+        });
+      }, 50);
+    });
+    _defineProperty(_this, "moveToInternalWindow", function () {
+      if (_this.state.externalWindow) {
+        _this.state.externalWindow.removeEventListener('beforeunload', _this.props.onClose);
+        _this.state.externalWindow.removeEventListener('resize', _this.props.onExternalWindowResized, false);
+        _this.state.externalWindow.close();
+        _this.setState(function (state) {
+          var newGeometry = _objectSpread(_objectSpread({}, state.geometry), {}, {
+            detached: false
+          });
+          WINDOW_GEOMETRIES[_this.props.title] = newGeometry;
+          return {
+            externalWindow: null,
+            geometry: newGeometry
+          };
+        });
+      }
+    });
+    _defineProperty(_this, "closeExternalWindow", function () {
+      if (_this.state.externalWindow) {
+        _this.state.externalWindow.close();
+      }
+    });
+    _this.rnd = null;
+    _this.dragShield = null;
+    _this.id = uuidv4();
+    _this.portalNode = props.usePortal ? portals.createHtmlPortalNode() : null;
+    return _this;
+  }
+  _inherits(ResizeableWindow, _React$Component);
+  return _createClass(ResizeableWindow, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.registerWindow(this.id);
+      window.addEventListener('beforeunload', this.closeExternalWindow, {
+        once: true
+      });
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.props.unregisterWindow(this.id);
+      if (this.props.splitScreenWhenDocked) {
+        this.props.setSplitScreen(this.id, null, null, false);
+      }
+      if (this.state.externalWindow) {
+        this.state.externalWindow.close();
+      }
+      window.removeEventListener('beforeunload', this.closeExternalWindow);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      if (!this.state.geometry || !prevState.geometry) {
+        return;
+      }
+      if (this.rnd && this.props.visible && this.props.visible !== prevProps.visible) {
+        this.props.onGeometryChanged(this.state.geometry);
+        this.rnd.updatePosition(this.state.geometry);
+      }
+      if (this.state.geometry !== prevState.geometry) {
+        this.props.onGeometryChanged(this.state.geometry);
+        WINDOW_GEOMETRIES[this.props.title] = this.state.geometry;
+      }
+      if (this.props.splitScreenWhenDocked && (this.props.visible !== prevProps.visible || this.state.geometry !== prevState.geometry || this.state.externalWindow !== prevState.externalWindow)) {
+        if (!this.props.visible && prevProps.visible || this.state.geometry.docked === false && prevState.geometry.docked !== false || this.state.geometry.maximized === true && prevState.geometry.maximized !== true || this.state.externalWindow && !prevState.externalWindow) {
+          this.props.setSplitScreen(this.id, null, null, false);
+        } else if (this.props.visible && this.state.geometry.docked && !this.state.externalWindow && !this.state.geometry.maximized) {
+          var dockSide = this.props.dockable === true ? "left" : this.props.dockable;
+          var dockSize = ["left", "right"].includes(dockSide) ? this.state.geometry.width : this.state.geometry.height;
+          this.props.setSplitScreen(this.id, dockSide, dockSize, this.props.splitTopAndBottomBar);
+        }
+      }
+      if (!this.props.visible && prevProps.visible && this.state.externalWindow) {
+        // Cannot hide an external window
+        this.moveToInternalWindow();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return [this.portalNode ? /*#__PURE__*/React.createElement(portals.InPortal, {
+        key: "InPortal",
+        node: this.portalNode
+      }, this.renderRole("body")) : null, this.state.externalWindow ? this.renderExternalWindow() : this.renderInternalWindowContainer()];
+    }
+  }]);
+}(React.Component);
+_defineProperty(ResizeableWindow, "propTypes", {
+  baseZIndex: PropTypes.number,
+  bottombarHeight: PropTypes.number,
+  busyIcon: PropTypes.bool,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  detachable: PropTypes.bool,
+  dockable: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  extraControls: PropTypes.arrayOf(PropTypes.shape({
+    active: PropTypes.bool,
+    icon: PropTypes.string.isRequired,
+    callback: PropTypes.func.isRequired,
+    title: PropTypes.string
+  })),
+  fitHeight: PropTypes.bool,
+  fullscreen: PropTypes.bool,
+  icon: PropTypes.string,
+  initialHeight: PropTypes.number,
+  initialWidth: PropTypes.number,
+  initialX: PropTypes.number,
+  initialY: PropTypes.number,
+  initiallyDocked: PropTypes.bool,
+  mapMargins: PropTypes.object,
+  maxHeight: PropTypes.number,
+  maxWidth: PropTypes.number,
+  maximizeable: PropTypes.bool,
+  menuMargins: PropTypes.object,
+  minHeight: PropTypes.number,
+  minWidth: PropTypes.number,
+  minimizeable: PropTypes.bool,
+  onClose: PropTypes.func,
+  onExternalWindowResized: PropTypes.func,
+  onGeometryChanged: PropTypes.func,
+  raiseWindow: PropTypes.func,
+  registerWindow: PropTypes.func,
+  scrollable: PropTypes.bool,
+  setSplitScreen: PropTypes.func,
+  splitScreenWhenDocked: PropTypes.bool,
+  splitTopAndBottomBar: PropTypes.bool,
+  title: PropTypes.string,
+  topbarHeight: PropTypes.number,
+  unregisterWindow: PropTypes.func,
+  usePortal: PropTypes.bool,
+  visible: PropTypes.bool,
+  windowStacking: PropTypes.array
+});
+_defineProperty(ResizeableWindow, "defaultProps", {
+  baseZIndex: 10,
+  initialX: null,
+  initialY: null,
+  initialWidth: 240,
+  initialHeight: 320,
+  minWidth: 50,
+  minHeight: 50,
+  maxWidth: null,
+  maxHeight: null,
+  maximizeable: true,
+  minimizeable: false,
+  visible: true,
+  dockable: true,
+  onExternalWindowResized: function onExternalWindowResized() {},
+  onGeometryChanged: function onGeometryChanged() {},
+  externalWindow: null,
+  usePortal: true
+});
+export default connect(function (state) {
+  return {
+    windowStacking: state.windows.stacking,
+    topbarHeight: state.windows.topbarHeight,
+    bottombarHeight: state.windows.bottombarHeight,
+    mapMargins: state.windows.mapMargins,
+    menuMargins: state.windows.menuMargins
+  };
+}, {
+  raiseWindow: raiseWindow,
+  registerWindow: registerWindow,
+  setSplitScreen: setSplitScreen,
+  unregisterWindow: unregisterWindow
+})(ResizeableWindow);