qwc2
Version:
QGIS Web Client
292 lines • 18 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 _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw 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 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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
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 2016 GeoSolutions Sas
* Copyright 2016-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 { connect } from 'react-redux';
import PropTypes from 'prop-types';
import ConfigUtils from '../utils/ConfigUtils';
import PluginStore from '../utils/PluginStore';
import ProcessNotifications from './ProcessNotifications';
import WindowManager from './WindowManager';
import './style/PluginsContainer.css';
export var MapButtonPortalContext = /*#__PURE__*/React.createContext(null);
export var MapContainerPortalContext = /*#__PURE__*/React.createContext(null);
export var AppInfosPortalContext = /*#__PURE__*/React.createContext(null);
export var BottomToolPortalContext = /*#__PURE__*/React.createContext(null);
var PluginsContainer = /*#__PURE__*/function (_React$Component) {
function PluginsContainer() {
var _this;
_classCallCheck(this, PluginsContainer);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, PluginsContainer, [].concat(args));
_defineProperty(_this, "state", {
mapButtonsContainerRef: null,
mapContainerRef: null,
appInfosContainerRef: null,
bottomToolContainerRef: null
});
_defineProperty(_this, "renderPlugins", function () {
var device = ConfigUtils.isMobile() ? 'mobile' : 'desktop';
var plugins = PluginStore.getPlugins();
return _toConsumableArray(_this.props.pluginsConfig).sort(function (a, b) {
var _ref, _a$order;
return (_ref = (_a$order = a.order) !== null && _a$order !== void 0 ? _a$order : 0 - b.order) !== null && _ref !== void 0 ? _ref : 0;
}).map(function (pluginConf) {
var _this$props$theme, _this$props$theme2, _pluginConf$key;
var Plugin = plugins[pluginConf.name + "Plugin"];
if (!Plugin) {
return null;
}
var themeDevicePluginConfig = ((_this$props$theme = _this.props.theme) === null || _this$props$theme === void 0 || (_this$props$theme = _this$props$theme.config) === null || _this$props$theme === void 0 || (_this$props$theme = _this$props$theme[device]) === null || _this$props$theme === void 0 || (_this$props$theme = _this$props$theme.plugins) === null || _this$props$theme === void 0 ? void 0 : _this$props$theme[pluginConf.name]) || {};
var themePluginConfig = ((_this$props$theme2 = _this.props.theme) === null || _this$props$theme2 === void 0 || (_this$props$theme2 = _this$props$theme2.config) === null || _this$props$theme2 === void 0 || (_this$props$theme2 = _this$props$theme2.plugins) === null || _this$props$theme2 === void 0 ? void 0 : _this$props$theme2[pluginConf.name]) || {};
var cfg = _objectSpread(_objectSpread(_objectSpread({}, pluginConf.cfg || {}), themePluginConfig), themeDevicePluginConfig);
return /*#__PURE__*/React.createElement(Plugin, _extends({
key: (_pluginConf$key = pluginConf.key) !== null && _pluginConf$key !== void 0 ? _pluginConf$key : pluginConf.name
}, cfg));
});
});
_defineProperty(_this, "setupTouchEvents", function (el) {
if (el) {
el.addEventListener('touchstart', function (ev) {
_this.touchY = ev.targetTouches[0].clientY;
}, {
passive: false
});
el.addEventListener('touchmove', _this.preventOverscroll, {
passive: false
});
var resizeObserver = new ResizeObserver(function (entries) {
var contentRectEntry = entries.find(function (entry) {
return entry.contentRect;
});
if (contentRectEntry) {
var height = contentRectEntry.contentRect.height;
el.style.setProperty('--plugins-container-height', "".concat(height, "px"));
}
});
resizeObserver.observe(el);
}
});
_defineProperty(_this, "preventOverscroll", function (ev) {
if (ev.touches[0].touchType !== "direct") {
// Don't do anything for stylus inputs
return;
}
var scrollEvent = false;
var element = ev.target;
var direction = ev.targetTouches[0].clientY - _this.touchY;
_this.touchY = ev.targetTouches[0].clientY;
while (!scrollEvent && element) {
var scrollable = element.scrollHeight > element.clientHeight;
// Workaround for resizeable-window having scrollHeight > clientHeight even though it has no scrollbar
if (element.classList.contains('resizeable-window')) {
scrollable = false;
}
if (element.type === "range") {
// If it is a range element, treat it as a scroll event
scrollEvent = true;
} else if (scrollable && element.scrollTop + element.clientHeight < element.scrollHeight && direction < 0) {
// User scrolls down and element is not at end of scroll
scrollEvent = true;
} else if (scrollable && element.scrollTop > 0 && direction > 0) {
// User scrolls up and element is not at start of scroll
scrollEvent = true;
} else {
element = element.parentElement;
}
}
if (!scrollEvent) {
ev.preventDefault();
}
});
_defineProperty(_this, "setMapContainerRef", function (el) {
_this.setState({
mapContainerRef: el
});
});
_defineProperty(_this, "setAppInfosContainerRef", function (el) {
_this.setState({
appInfosContainerRef: el
});
});
_defineProperty(_this, "setBottomToolContanerRef", function (el) {
_this.setState({
bottomToolContainerRef: el
});
});
_defineProperty(_this, "setButtonContainerRef", function (el) {
_this.setState({
mapButtonsContainerRef: el
});
if (el) {
var resizeObserver = new ResizeObserver(function (entries) {
var contentRectEntry = entries.find(function (entry) {
return entry.contentRect;
});
if (contentRectEntry) {
var width = contentRectEntry.contentRect.width;
var height = contentRectEntry.contentRect.height;
el.style.setProperty('--buttons-container-width', "".concat(width, "px"));
el.style.setProperty('--buttons-container-height', "".concat(height, "px"));
}
});
var mutationObserver = new MutationObserver(function (mutations) {
mutationObserver.disconnect();
var _iterator = _createForOfIteratorHelper(mutations),
_step;
try {
var _loop = function _loop() {
var m = _step.value;
if (m.type === "childList") {
// Reorder child nodes for natural tab focus order
var children = _toConsumableArray(el.children);
var slots = {};
children.forEach(function (child) {
if (child.dataset.subslot === undefined) {
var _slots$child$dataset$;
var subslot = ((_slots$child$dataset$ = slots[child.dataset.slot]) !== null && _slots$child$dataset$ !== void 0 ? _slots$child$dataset$ : 0) - 1;
slots[child.dataset.slot] = child.dataset.subslot = subslot;
child.style.order = 100 * parseInt(child.style.order, 10) + subslot;
}
});
children.sort(function (a, b) {
return b.style.order - a.style.order;
}).forEach(function (node) {
return el.appendChild(node);
});
}
};
for (_iterator.s(); !(_step = _iterator.n()).done;) {
_loop();
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
mutationObserver.observe(el, {
childList: true
});
});
mutationObserver.observe(el, {
childList: true
});
resizeObserver.observe(el);
el.recomputeSpacers = function () {
var slots = new Set();
Array.from(el.childNodes).forEach(function (child) {
if (child.dataset.spacer) {
el.removeChild(child);
} else {
slots.add(child.dataset.slot);
}
});
var maxSlot = Math.max.apply(Math, _toConsumableArray(slots));
for (var i = 0; i < maxSlot; ++i) {
if (!slots.has(String(i))) {
var child = document.createElement("div");
child.className = "map-buttons-spacer";
child.dataset.spacer = 1;
child.style.order = 100 * i;
el.appendChild(child);
}
}
};
}
});
return _this;
}
_inherits(PluginsContainer, _React$Component);
return _createClass(PluginsContainer, [{
key: "render",
value: function render() {
var _this$props$className;
var left = this.props.mapMargins.left + this.props.mapMargins.outerLeft;
var top = this.props.mapMargins.top;
var right = this.props.mapMargins.right + this.props.mapMargins.outerRight;
var bottom = this.props.mapMargins.bottom;
var mapContainerStyle = {
left: 'calc(' + left + 'px)',
top: 'calc(var(--topbar-height) + ' + top + 'px)',
right: 'calc(' + right + 'px)',
bottom: 'calc(var(--bottombar-height) + ' + bottom + 'px)'
};
var haveRefs = this.state.mapButtonsContainerRef && this.state.mapContainerRef && this.state.appInfosContainerRef && this.state.bottomToolContainerRef;
return /*#__PURE__*/React.createElement("div", {
className: "plugins-container " + ((_this$props$className = this.props.className) !== null && _this$props$className !== void 0 ? _this$props$className : ""),
ref: this.setupTouchEvents
}, /*#__PURE__*/React.createElement(AppInfosPortalContext.Provider, {
value: this.state.appInfosContainerRef
}, /*#__PURE__*/React.createElement(MapButtonPortalContext.Provider, {
value: this.state.mapButtonsContainerRef
}, /*#__PURE__*/React.createElement(MapContainerPortalContext.Provider, {
value: this.state.mapContainerRef
}, /*#__PURE__*/React.createElement(BottomToolPortalContext.Provider, {
value: this.state.bottomToolContainerRef
}, haveRefs ? this.renderPlugins() : null, haveRefs ? this.props.children : null)))), /*#__PURE__*/React.createElement(WindowManager, null), /*#__PURE__*/React.createElement("div", {
className: "map-buttons-container",
ref: this.setButtonContainerRef,
style: mapContainerStyle
}), /*#__PURE__*/React.createElement("div", {
className: "map-container",
ref: this.setMapContainerRef,
style: mapContainerStyle
}, /*#__PURE__*/React.createElement(ProcessNotifications, null)), /*#__PURE__*/React.createElement("div", {
className: "app-infos-container",
ref: this.setAppInfosContainerRef,
style: mapContainerStyle
}), /*#__PURE__*/React.createElement("div", {
className: "map-bottom-tool-container",
style: mapContainerStyle
}, /*#__PURE__*/React.createElement("div", {
ref: this.setBottomToolContanerRef
})));
}
}]);
}(React.Component);
_defineProperty(PluginsContainer, "propTypes", {
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
className: PropTypes.string,
mapMargins: PropTypes.object,
pluginsConfig: PropTypes.array,
theme: PropTypes.object
});
export default connect(function (state) {
return {
// Just to trigger re-render when custom plugins change
customPlugins: state.localConfig.customPlugins,
mapMargins: state.windows.mapMargins,
theme: state.theme.current
};
})(PluginsContainer);