qwc2
Version:
QGIS Web Client
607 lines (605 loc) • 29.5 kB
JavaScript
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, "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",
onFocus: function onFocus() {
return _this.props.raiseWindow(_this.id);
}
}, _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.props.children)));
});
_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,
minimized: _this.props.initiallyMinimized || 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.props.children)), _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;
if (_this.portalNode) {
_this.portalNode.element.addEventListener('click', function () {
return _this.props.raiseWindow(_this.id);
});
_this.portalNode.element.addEventListener('focus', function () {
return _this.props.raiseWindow(_this.id);
});
_this.portalNode.element.addEventListener('focusin', function () {
return _this.props.raiseWindow(_this.id);
});
}
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.props.children) : 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,
initiallyMinimized: 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);