qwc2 2025.12.2 → 2025.12.15

package/actions/windows.js

@@ -22,6 +22,7 @@ import ReducerIndex from '../reducers/index';
 import windowsReducer from '../reducers/windows';
 import ConfigUtils from '../utils/ConfigUtils';
 import CoordinatesUtils from '../utils/CoordinatesUtils';
+import LocaleUtils from '../utils/LocaleUtils';
 import MapUtils from '../utils/MapUtils';
 import { UrlParams } from '../utils/PermaLinkUtils';
 ReducerIndex.register("windows", windowsReducer);
@@ -153,6 +154,7 @@ export function openExternalUrl(url) {
     url = url.replace('$y$', y);
     url = url.replace('$crs$', proj);
     url = url.replace('$user$', ConfigUtils.getConfigProp("username") || "");
+    url = url.replace('$lang$', LocaleUtils.lang());
     if (target.startsWith(":iframedialog")) {
       var targetParts = target.split(":");
       var options = targetParts.slice(2).reduce(function (res, cur) {

package/components/Icon.js

@@ -40,8 +40,15 @@ var Icon = /*#__PURE__*/function (_React$Component) {
         icon_disabled: this.props.disabled,
         icon_clickable: !!this.props.onClick || !!this.props.onMouseDown || !!this.props.onPointerDown
       }, "icon-" + this.props.icon, true), "icon_" + this.props.size, !!this.props.size), this.props.className, !!this.props.className));
-      var tabIndex = this.props.onClick ? 0 : undefined;
-      var onKeyDown = tabIndex !== undefined ? MiscUtils.checkKeyActivate : null;
+      var tabIndex = undefined;
+      var onKeyDown = null;
+      if (this.props.onClick) {
+        tabIndex = 0;
+        onKeyDown = MiscUtils.checkKeyActivate;
+      } else if (this.props.onPointerDown) {
+        tabIndex = 0;
+        onKeyDown = MiscUtils.checkKeyActivatePointerDown;
+      }
       if (this.props.icon.startsWith(":/")) {
         var assetsPath = ConfigUtils.getAssetsPath();
         var src = assetsPath + this.props.icon.substr(1);

package/components/IdentifyViewer.js

@@ -1100,7 +1100,7 @@ var IdentifyViewer = /*#__PURE__*/function (_React$Component) {
       return htmlReactParser(text, options);
     });
     _defineProperty(_this, "attributeLinkClicked", function (ev) {
-      _this.props.openExternalUrl(ev.currentTarget.href, ev.target.target, {
+      _this.props.openExternalUrl(ev.currentTarget.href, ev.currentTarget.target, {
         docked: _this.props.iframeDialogsInitiallyDocked
       });
       ev.preventDefault();

package/components/map3d/MapControls3D.js

@@ -348,28 +348,26 @@ var MapControls3D = /*#__PURE__*/function (_React$Component) {
         style: {
           order: 998
         }
-      }, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: "plus",
         onPointerDown: function onPointerDown(ev) {
           return _this2.zoom(ev, +1);
         }
-      }, /*#__PURE__*/React.createElement(Icon, {
-        icon: "plus"
-      })), /*#__PURE__*/React.createElement("div", {
+      }), /*#__PURE__*/React.createElement(Icon, {
+        icon: "minus",
         onPointerDown: function onPointerDown(ev) {
           return _this2.zoom(ev, -1);
         }
-      }, /*#__PURE__*/React.createElement(Icon, {
-        icon: "minus"
-      }))) : null, this.context), /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
+      })) : null, this.context), /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
         className: firstPersonButtonClasses,
         "data-slot": 0,
         key: "MapControlsFirstPerson",
-        onClick: this.toggleFirstPersonControls,
         style: {
           order: 997
         }
       }, /*#__PURE__*/React.createElement(Icon, {
-        icon: "person"
+        icon: "person",
+        onClick: this.toggleFirstPersonControls
       })), this.context), this.props.controlsPosition !== 'bottom' ? /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/React.createElement("div", {
         className: "map3d-nav-spacer",
         key: "MapControlsSpacer",

package/components/map3d/style/MapControls3D.css

@@ -39,7 +39,7 @@ div.map3d-nav-zoom {
     margin: 0 1em 0.5em 1em;
 }
 
-div.map3d-nav-zoom > div {
+div.map3d-nav-zoom > span {
     height: 2em;
     width: 1.5em;
     display: flex;
@@ -47,7 +47,7 @@ div.map3d-nav-zoom > div {
     justify-content: center;
 }
 
-div.map3d-nav-zoom > div:first-child {
+div.map3d-nav-zoom > span:first-child {
     border-bottom: 1px solid var(--map-button-text-color);
 }
 
@@ -74,6 +74,11 @@ div.map3d-firstperson-button-active {
     color: var(--map-button-bg-color);
 }
 
+div.map3d-firstperson-button > span {
+    width: 2em;
+    height: 2em;
+}
+
 div.map3d-nav-spacer {
     display: inline-block;
     width: 1em;

package/icons/oblique.svg

@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="24"
+   height="24"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="oblique.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <inkscape:path-effect
+       effect="perspective-envelope"
+       up_left_point="31.84,8.235"
+       up_right_point="118.21,8.235"
+       down_left_point="6.84,117.332"
+       down_right_point="143.209,117.332"
+       id="path-effect1"
+       is_visible="true"
+       lpeversion="1"
+       deform_type="perspective"
+       horizontal_mirror="false"
+       vertical_mirror="false"
+       overflow_perspective="false" />
+  </defs>
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="3.59479"
+     inkscape:cx="50.211556"
+     inkscape:cy="55.775164"
+     inkscape:window-width="1600"
+     inkscape:window-height="842"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     d="m 139.33138,100.40986 c 2.07628,9.061 -1.23538,16.92214 -7.48538,16.92214 H 18.203 c -6.25,0 -9.5619324,-7.85964 -7.485227,-16.92214 L 30.125343,15.717557 C 31.084946,11.529963 35.078345,8.235 39.036814,8.235 h 71.976376 c 3.95847,0 7.95183,3.294963 8.9114,7.482557 z M 37.902612,14.17429 c -0.788552,0 -1.627148,0.722405 -1.790034,1.542582 L 19.292985,100.40846 c -0.338692,1.70541 0.375285,3.22606 1.525768,3.22606 H 129.23037 c 1.14762,0 1.86732,-1.52065 1.52863,-3.22606 L 113.93933,15.716872 c -0.16289,-0.820177 -1.00606,-1.542582 -1.792,-1.542582 z m 9.9385,28.041591 c -5.628345,0 -9.313113,-5.26189 -8.279299,-11.413497 0.976861,-5.812713 5.854252,-10.301547 10.933143,-10.301547 5.076868,0 8.852895,4.488834 8.40881,10.301547 -0.469976,6.151607 -5.435804,11.413497 -11.062654,11.413497 z M 120.62564,91.150498 H 29.419956 L 32.243929,74.346727 53.872491,50.541182 62.079678,61.858035 89.407567,29.014214 114.54115,54.940506 Z"
+     id="path1"
+     inkscape:path-effect="#path-effect1"
+     inkscape:original-d="m 143.209,105.968 c 0,6.25 -5.113,11.364 -11.363,11.364 H 18.203 c -6.25,0 -11.363,-5.113 -11.363,-11.364 v -86.37 c 0,-6.25 5.113,-11.363 11.363,-11.363 h 113.643 c 6.25,0 11.363,5.113 11.363,11.363 z M 18.203,17.326 c -1.207,0 -2.271,1.068 -2.271,2.271 v 86.37 c 0,1.207 1.065,2.271 2.271,2.271 h 113.643 c 1.203,0 2.274,-1.064 2.274,-2.271 v -86.37 c 0,-1.203 -1.071,-2.271 -2.274,-2.271 H 18.203 Z m 20.458,36.365 c -7.529,0 -13.641,-6.108 -13.641,-13.635 0,-7.527 6.112,-13.638 13.641,-13.638 7.526,0 13.632,6.111 13.632,13.638 0,7.527 -6.105,13.635 -13.632,13.635 z M 125.025,99.15 H 25.02 V 85.51 l 22.73,-22.724 11.363,11.36 36.365,-36.361 29.547,29.547 z"
+     transform="matrix(0.16942427,0,0,0.16942427,-0.71096897,1.3629513)" />
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "qwc2",
-    "version": "2025.12.02",
+    "version": "2025.12.15",
     "description": "QGIS Web Client",
     "author": "Sourcepole AG",
     "license": "BSD-2-Clause",
@@ -17,7 +17,6 @@
     ],
     "dependencies": {
         "@furkot/webfonts-generator": "^2.0.2",
-        "@sourcepole/qwc-giro3d": "^0.44.0-dev",
         "@kayahr/text-encoding": "^2.0.0",
         "@loaders.gl/core": "^4.3.3",
         "@loaders.gl/shapefile": "^4.3.3",
@@ -26,7 +25,9 @@
         "@norbulcz/num-parse": "^0.1.0",
         "@panoramax/web-viewer": "^4.0.1",
         "@reduxjs/toolkit": "^2.4.0",
+        "@sourcepole/qwc-giro3d": "^0.44.0-dev",
         "@turf/buffer": "^6.5.0",
+        "@turf/clean-coords": "^7.3.1",
         "@turf/helpers": "^6.5.0",
         "@vtaits/react-color-picker": "^2.0.0",
         "any-date-parser": "^1.5.4",

package/plugins/Cyclomedia.js

@@ -173,6 +173,7 @@ var Cyclomedia = /*#__PURE__*/function (_React$Component) {
       }
     });
     _defineProperty(_this, "cyclomediaIndexHtml", function () {
+      var _window$__CSP_NONCE__, _window$__CSP_NONCE__2, _window$__CSP_NONCE__3, _window$__CSP_NONCE__4;
       var supportedLang = ["de", "en-GB", "en-US", "fi", "fr", "nl", "tr", "pl"];
       var lang = LocaleUtils.lang();
       if (supportedLang.indexOf(lang) < 0) {
@@ -182,7 +183,7 @@ var Cyclomedia = /*#__PURE__*/function (_React$Component) {
         }
       }
       var loginOauth = !!_this.props.clientId && !_this.state.loginFailed;
-      return "\n            <!DOCTYPE html>\n            <html>\n            <head>\n            <script type=\"text/javascript\" src=\"https://unpkg.com/react@18.3.1/umd/react.production.min.js\"></script>\n            <script type=\"text/javascript\" src=\"https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js\"></script>\n            <script type=\"text/javascript\" src=\"https://streetsmart.cyclomedia.com/api/v".concat(_this.props.cyclomediaVersion, "/StreetSmartApi.js\"></script>\n            <script type=\"text/javascript\">\n            let apiInitialized = false;\n            let initCallback = null;\n            let posCallback = null;\n            let measureCallback = null;\n\n            function initApi() {\n                StreetSmartApi.init({\n                    targetElement: document.getElementById(\"streetsmartApi\"),\n                    username: \"").concat(_this.state.username || undefined, "\",\n                    password: \"").concat(_this.state.password || undefined, "\",\n                    apiKey: \"").concat(_this.props.apikey, "\",\n                    clientId: \"").concat(_this.props.clientId, "\",\n                    loginOauth: ").concat(loginOauth, ",\n                    loginRedirectUri: \"").concat(_this.props.loginRedirectUri, "\",\n                    logoutRedirectUri: \"").concat(_this.props.logoutRedirectUri, "\",\n                    srs: \"").concat(_this.props.projection, "\",\n                    locale: \"").concat(lang, "\",\n                    configurationUrl: 'https://atlas.cyclomedia.com/configuration',\n                    addressSettings: {\n                        locale: \"us\",\n                        database: \"Nokia\"\n                    }\n                }).then(() => {\n                    apiInitialized = true;\n                    if (initCallback) {\n                        initCallback(true);\n                    }\n                }, (e) => {\n                    apiInitialized = false;\n                    if (initCallback) {\n                        initCallback(false, e.message);\n                    }\n                });\n            }\n            function openImage(posStr, crs) {\n                if (!apiInitialized) {\n                    return;\n                }\n                StreetSmartApi.open(posStr, {\n                    viewerType: StreetSmartApi.ViewerType.PANORAMA,\n                    srs: crs,\n                    panoramaViewer: {\n                         closable: false,\n                         maximizable: true,\n                         replace: true,\n                         recordingsVisible: true,\n                         navbarVisible: true,\n                         timeTravelVisible: true,\n                         measureTypeButtonVisible: true,\n                         measureTypeButtonStart: true,\n                         measureTypeButtonToggle: true,\n                     },\n                }).then((result) => {\n                    if (result && result[0]){\n                        window.panoramaViewer = result[0];\n                        window.panoramaViewer.on(StreetSmartApi.Events.panoramaViewer.IMAGE_CHANGE, changeView);\n                        window.panoramaViewer.on(StreetSmartApi.Events.panoramaViewer.VIEW_CHANGE, changeView);\n                        StreetSmartApi.on(StreetSmartApi.Events.measurement.MEASUREMENT_CHANGED, changeMeasurement);\n                        StreetSmartApi.on(StreetSmartApi.Events.measurement.MEASUREMENT_STOPPED, stopMeasurement);\n                    }\n                }).catch((reason) => {\n                    console.log('Failed to create component(s) through API: ' + reason);\n                });\n            }\n            function changeView() {\n                if (posCallback) {\n                    const recording = window.panoramaViewer.getRecording();\n                    const orientation = window.panoramaViewer.getOrientation();\n                    const pos = recording.xyz;\n                    const posData = {\n                        pos: [pos[0], pos[1]],\n                        crs: recording.srs,\n                        yaw: orientation.yaw * Math.PI / 180,\n                        hFov: orientation.hFov * Math.PI / 180.0\n                    }\n                    posCallback(posData);\n                }\n            }\n            function changeMeasurement(e) {\n                measureCallback(e.detail.activeMeasurement);\n            }\n            function stopMeasurement() {\n                measureCallback(null);\n            }\n            function registerCallbacks(_initCallback, _posCallback, _measureCallback) {\n                initCallback = _initCallback;\n                posCallback = _posCallback;\n                measureCallback = _measureCallback;\n            }\n            </script>\n            <style>\n              html, body, #streetsmartApi {height: 100%;}\n            </style>\n            </head>\n            <body style=\"margin: 0\">\n            <div id=\"streetsmartApi\">\n            </div>\n            </body>\n            </html>\n        ");
+      return "\n            <!DOCTYPE html>\n            <html>\n            <head>\n            <script nonce=\"".concat((_window$__CSP_NONCE__ = window.__CSP_NONCE__) !== null && _window$__CSP_NONCE__ !== void 0 ? _window$__CSP_NONCE__ : '', "\" type=\"text/javascript\" src=\"https://unpkg.com/react@18.3.1/umd/react.production.min.js\"></script>\n            <script nonce=\"").concat((_window$__CSP_NONCE__2 = window.__CSP_NONCE__) !== null && _window$__CSP_NONCE__2 !== void 0 ? _window$__CSP_NONCE__2 : '', "\" type=\"text/javascript\" src=\"https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js\"></script>\n            <script nonce=\"").concat((_window$__CSP_NONCE__3 = window.__CSP_NONCE__) !== null && _window$__CSP_NONCE__3 !== void 0 ? _window$__CSP_NONCE__3 : '', "\" type=\"text/javascript\" src=\"https://streetsmart.cyclomedia.com/api/v").concat(_this.props.cyclomediaVersion, "/StreetSmartApi.js\"></script>\n            <script nonce=\"").concat((_window$__CSP_NONCE__4 = window.__CSP_NONCE__) !== null && _window$__CSP_NONCE__4 !== void 0 ? _window$__CSP_NONCE__4 : '', "\" type=\"text/javascript\">\n            let apiInitialized = false;\n            let initCallback = null;\n            let posCallback = null;\n            let measureCallback = null;\n\n            function initApi() {\n                StreetSmartApi.init({\n                    targetElement: document.getElementById(\"streetsmartApi\"),\n                    username: \"").concat(_this.state.username || undefined, "\",\n                    password: \"").concat(_this.state.password || undefined, "\",\n                    apiKey: \"").concat(_this.props.apikey, "\",\n                    clientId: \"").concat(_this.props.clientId, "\",\n                    loginOauth: ").concat(loginOauth, ",\n                    loginRedirectUri: \"").concat(_this.props.loginRedirectUri, "\",\n                    logoutRedirectUri: \"").concat(_this.props.logoutRedirectUri, "\",\n                    srs: \"").concat(_this.props.projection, "\",\n                    locale: \"").concat(lang, "\",\n                    configurationUrl: 'https://atlas.cyclomedia.com/configuration',\n                    addressSettings: {\n                        locale: \"us\",\n                        database: \"Nokia\"\n                    }\n                }).then(() => {\n                    apiInitialized = true;\n                    if (initCallback) {\n                        initCallback(true);\n                    }\n                }, (e) => {\n                    apiInitialized = false;\n                    if (initCallback) {\n                        initCallback(false, e.message);\n                    }\n                });\n            }\n            function openImage(posStr, crs) {\n                if (!apiInitialized) {\n                    return;\n                }\n                StreetSmartApi.open(posStr, {\n                    viewerType: StreetSmartApi.ViewerType.PANORAMA,\n                    srs: crs,\n                    panoramaViewer: {\n                         closable: false,\n                         maximizable: true,\n                         replace: true,\n                         recordingsVisible: true,\n                         navbarVisible: true,\n                         timeTravelVisible: true,\n                         measureTypeButtonVisible: true,\n                         measureTypeButtonStart: true,\n                         measureTypeButtonToggle: true,\n                     },\n                }).then((result) => {\n                    if (result && result[0]){\n                        window.panoramaViewer = result[0];\n                        window.panoramaViewer.on(StreetSmartApi.Events.panoramaViewer.IMAGE_CHANGE, changeView);\n                        window.panoramaViewer.on(StreetSmartApi.Events.panoramaViewer.VIEW_CHANGE, changeView);\n                        StreetSmartApi.on(StreetSmartApi.Events.measurement.MEASUREMENT_CHANGED, changeMeasurement);\n                        StreetSmartApi.on(StreetSmartApi.Events.measurement.MEASUREMENT_STOPPED, stopMeasurement);\n                    }\n                }).catch((reason) => {\n                    console.log('Failed to create component(s) through API: ' + reason);\n                });\n            }\n            function changeView() {\n                if (posCallback) {\n                    const recording = window.panoramaViewer.getRecording();\n                    const orientation = window.panoramaViewer.getOrientation();\n                    const pos = recording.xyz;\n                    const posData = {\n                        pos: [pos[0], pos[1]],\n                        crs: recording.srs,\n                        yaw: orientation.yaw * Math.PI / 180,\n                        hFov: orientation.hFov * Math.PI / 180.0\n                    }\n                    posCallback(posData);\n                }\n            }\n            function changeMeasurement(e) {\n                measureCallback(e.detail.activeMeasurement);\n            }\n            function stopMeasurement() {\n                measureCallback(null);\n            }\n            function registerCallbacks(_initCallback, _posCallback, _measureCallback) {\n                initCallback = _initCallback;\n                posCallback = _posCallback;\n                measureCallback = _measureCallback;\n            }\n            </script>\n            <style>\n              html, body, #streetsmartApi {height: 100%;}\n            </style>\n            </head>\n            <body style=\"margin: 0\">\n            <div id=\"streetsmartApi\">\n            </div>\n            </body>\n            </html>\n        ");
     });
     _defineProperty(_this, "addRecordingsWFS", function () {
       var layer = {

package/plugins/MapTip.js

@@ -177,7 +177,7 @@ var MapTip = /*#__PURE__*/function (_React$Component) {
       return htmlReactParser(text, options);
     });
     _defineProperty(_this, "attributeLinkClicked", function (ev) {
-      _this.props.openExternalUrl(ev.currentTarget.href, ev.target.target, {
+      _this.props.openExternalUrl(ev.currentTarget.href, ev.currentTarget.target, {
         docked: _this.props.iframeDialogsInitiallyDocked
       });
       ev.preventDefault();

package/plugins/ObliqueView.js

@@ -0,0 +1,410 @@
+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 _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 2025 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 axios from 'axios';
+import ol from 'openlayers';
+import PropTypes from 'prop-types';
+import { setCurrentTask } from '../actions/task';
+import Icon from '../components/Icon';
+import ResizeableWindow from '../components/ResizeableWindow';
+import LayerRegistry from '../components/map/layers/index';
+import InputContainer from '../components/widgets/InputContainer';
+import ConfigUtils from '../utils/ConfigUtils';
+import LayerUtils from '../utils/LayerUtils';
+import LocaleUtils from '../utils/LocaleUtils';
+import MapUtils from '../utils/MapUtils';
+import MiscUtils from '../utils/MiscUtils';
+import './style/ObliqueView.css';
+
+/**
+ * Display oblique satellite imagery.
+ */
+var ObliqueView = /*#__PURE__*/function (_React$Component) {
+  function ObliqueView(props) {
+    var _this;
+    _classCallCheck(this, ObliqueView);
+    _this = _callSuper(this, ObliqueView, [props]);
+    _defineProperty(_this, "onClose", function () {
+      _this.setState(ObliqueView.defaultState);
+    });
+    _defineProperty(_this, "renderScaleChooser", function () {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "obliqueview-scalechooser"
+      }, /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("bottombar.scale_label"), ":\xA0"), /*#__PURE__*/React.createElement(InputContainer, null, /*#__PURE__*/React.createElement("span", {
+        role: "prefix"
+      }, " 1 : "), /*#__PURE__*/React.createElement("select", {
+        onChange: function onChange(ev) {
+          return _this.setState({
+            currentZoom: parseInt(ev.target.value, 10)
+          });
+        },
+        role: "input",
+        value: _this.state.currentZoom
+      }, _this.props.scales.map(function (item, index) {
+        return /*#__PURE__*/React.createElement("option", {
+          key: index,
+          value: index
+        }, LocaleUtils.toLocaleFixed(item, 0));
+      }))));
+    });
+    _defineProperty(_this, "changeZoom", function (delta) {
+      _this.setState(function (state) {
+        return {
+          currentZoom: Math.max(0, Math.min(state.currentZoom + delta, _this.props.scales.length - 1))
+        };
+      });
+    });
+    _defineProperty(_this, "queryDatasetConfig", function () {
+      var obliqueImageryServiceUrl = ConfigUtils.getConfigProp('obliqueImageryServiceUrl');
+      if (_this.state.selectedDataset && obliqueImageryServiceUrl) {
+        var reqUrl = obliqueImageryServiceUrl.replace(/\/$/, '') + "/".concat(_this.state.selectedDataset, "/config");
+        axios.get(reqUrl).then(function (response) {
+          var datasetConfig = response.data;
+          var direction = 'n' in datasetConfig.image_centers ? 'n' : Object.keys(datasetConfig.image_centers)[0];
+          _this.setState({
+            datasetConfig: datasetConfig,
+            currentDirection: direction
+          });
+        })["catch"](function () {
+          /* eslint-disable-next-line */
+          console.warn("Failed to load dataset config");
+        });
+      }
+    });
+    _defineProperty(_this, "setupLayer", function () {
+      var datasetConfig = _this.state.datasetConfig;
+      var projection = new ol.proj.Projection({
+        code: datasetConfig.crs,
+        extent: datasetConfig.extent,
+        units: "m"
+      });
+      var targetScale = _this.props.initialScale;
+      var zoom = _this.props.scales.reduce(function (best, v, i) {
+        return Math.abs(v - targetScale) < Math.abs(_this.props.scales[best] - targetScale) ? i : best;
+      }, 0);
+      _this.map.setView(new ol.View({
+        projection: projection,
+        // extent: datasetConfig.extent,
+        center: ol.extent.getCenter(datasetConfig.extent),
+        rotation: _this.getRotation() / 180 * Math.PI,
+        zoom: zoom,
+        resolutions: MapUtils.getResolutionsForScales(_this.props.scales, datasetConfig.crs),
+        constrainResolution: true
+        // showFullExtent: true
+      }));
+      _this.setState({
+        currentZoom: zoom
+      });
+      _this.map.on('moveend', function () {
+        _this.setState(function (state) {
+          var newZoom = _this.map.getView().getZoom();
+          if (newZoom !== state.currentZoom) {
+            return {
+              currentZoom: newZoom
+            };
+          }
+          return null;
+        });
+      });
+      var layers = [];
+      var themeConfig = _this.props.theme.obliqueDatasets.find(function (entry) {
+        return entry.name === _this.state.selectedDataset;
+      });
+      if (themeConfig.backgroundLayer) {
+        var _themeConfig$backgrou;
+        var layerConfig = LayerUtils.splitLayerUrlParam(themeConfig.backgroundLayer);
+        layerConfig.version = _this.props.themes.defaultWMSVersion || "1.3.0";
+        layerConfig.opacity = (_themeConfig$backgrou = themeConfig.backgroundOpacity) !== null && _themeConfig$backgrou !== void 0 ? _themeConfig$backgrou : 127;
+        var layerCreator = LayerRegistry[layerConfig.type];
+        if (layerCreator) {
+          layers.push(layerCreator.create(layerConfig, _this.map));
+        }
+      }
+      _this.obliqueImageryLayer = new ol.layer.Tile({
+        source: new ol.source.XYZ({
+          projection: projection,
+          tileGrid: new ol.tilegrid.TileGrid({
+            extent: datasetConfig.extent,
+            resolutions: datasetConfig.resolutions,
+            tileSize: datasetConfig.tileSize,
+            origin: datasetConfig.origin
+          }),
+          url: datasetConfig.url,
+          crossOrigin: "anonymous",
+          tileLoadFunction: function tileLoadFunction(tile, src) {
+            var _this$closestImage;
+            if (((_this$closestImage = _this.closestImage) !== null && _this$closestImage !== void 0 ? _this$closestImage : null) !== null) {
+              src += "?img=" + _this.closestImage;
+            }
+            tile.getImage().src = src.replace('{direction}', _this.state.currentDirection);
+          }
+        })
+      });
+      layers.push(_this.obliqueImageryLayer);
+      _this.map.setLayers(layers);
+    });
+    _defineProperty(_this, "searchClosestImage", function () {
+      var _this$state$datasetCo;
+      var best = null;
+      var imageCenters = (_this$state$datasetCo = _this.state.datasetConfig) === null || _this$state$datasetCo === void 0 || (_this$state$datasetCo = _this$state$datasetCo.image_centers) === null || _this$state$datasetCo === void 0 ? void 0 : _this$state$datasetCo[_this.state.currentDirection];
+      if (imageCenters) {
+        var center = _this.map.getView().getCenter();
+        var dsqr = function dsqr(p, q) {
+          return (p[0] - q[0]) * (p[0] - q[0]) + (p[1] - q[1]) * (p[1] - q[1]);
+        };
+        best = 0;
+        var bestDist = dsqr(center, imageCenters[0]);
+        for (var i = 1; i < imageCenters.length; ++i) {
+          var dist = dsqr(center, imageCenters[i]);
+          if (dist < bestDist) {
+            bestDist = dist;
+            best = i;
+          }
+        }
+      }
+      if (best !== _this.closestImage) {
+        if (_this.obliqueImageryLayer) {
+          _this.obliqueImageryLayer.getSource().refresh();
+        }
+        _this.closestImage = best;
+      }
+    });
+    _defineProperty(_this, "getRotation", function () {
+      return {
+        n: 0,
+        w: 90,
+        e: -90,
+        s: 180
+      }[_this.state.currentDirection];
+    });
+    var controls = ol.control.defaults({
+      zoom: false,
+      attribution: false,
+      rotate: false
+    });
+    var interactions = ol.interaction.defaults({
+      onFocusOnly: false
+    });
+    _this.map = new ol.Map({
+      controls: controls,
+      interactions: interactions
+    });
+    _this.map.on('moveend', _this.searchClosestImage);
+    _this.map.on('rotateend', _this.searchClosestImage);
+    _this.closestImage = null;
+    _this.obliqueImageryLayer = null;
+    _this.state = ObliqueView.defaultState;
+    return _this;
+  }
+  _inherits(ObliqueView, _React$Component);
+  return _createClass(ObliqueView, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      if (this.props.active && !prevProps.active) {
+        this.setState({
+          active: true
+        });
+        this.props.setCurrentTask(null);
+      }
+      if (this.props.active && this.props.theme && this.props.theme !== prevProps.theme || this.props.active && !prevProps.active) {
+        var _datasets$find$name, _datasets$find, _datasets$;
+        var datasets = this.props.theme.obliqueDatasets || [];
+        var defaultDataset = (_datasets$find$name = (_datasets$find = datasets.find(function (entry) {
+          return entry["default"];
+        })) === null || _datasets$find === void 0 ? void 0 : _datasets$find.name) !== null && _datasets$find$name !== void 0 ? _datasets$find$name : (_datasets$ = datasets[0]) === null || _datasets$ === void 0 ? void 0 : _datasets$.name;
+        this.setState({
+          selectedDataset: defaultDataset,
+          datasetConfig: null,
+          currentDirection: null
+        });
+      }
+      if (this.state.selectedDataset !== prevState.selectedDataset) {
+        this.closestImage = null;
+        this.obliqueImageryLayer = null;
+        this.queryDatasetConfig();
+      }
+      if (this.state.datasetConfig && this.state.datasetConfig !== prevState.datasetConfig) {
+        this.setupLayer();
+      }
+      if (this.state.datasetConfig && this.state.currentDirection !== prevState.currentDirection) {
+        var _this$obliqueImageryL, _this$obliqueImageryL2, _this$obliqueImageryL3, _this$map$getView, _this$map$getView$set;
+        (_this$obliqueImageryL = this.obliqueImageryLayer) === null || _this$obliqueImageryL === void 0 || (_this$obliqueImageryL2 = _this$obliqueImageryL.getSource) === null || _this$obliqueImageryL2 === void 0 || (_this$obliqueImageryL2 = _this$obliqueImageryL2.call(_this$obliqueImageryL)) === null || _this$obliqueImageryL2 === void 0 || (_this$obliqueImageryL3 = _this$obliqueImageryL2.refresh) === null || _this$obliqueImageryL3 === void 0 || _this$obliqueImageryL3.call(_this$obliqueImageryL2);
+        (_this$map$getView = this.map.getView()) === null || _this$map$getView === void 0 || (_this$map$getView$set = _this$map$getView.setRotation) === null || _this$map$getView$set === void 0 || _this$map$getView$set.call(_this$map$getView, this.getRotation() / 180 * Math.PI);
+      }
+      if (this.state.datasetConfig && this.state.currentZoom !== prevState.currentZoom) {
+        var _this$map$getView2, _this$map$getView2$se;
+        (_this$map$getView2 = this.map.getView()) === null || _this$map$getView2 === void 0 || (_this$map$getView2$se = _this$map$getView2.setZoom) === null || _this$map$getView2$se === void 0 || _this$map$getView2$se.call(_this$map$getView2, this.state.currentZoom);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      if (!this.state.active) {
+        return null;
+      }
+      var rot = this.getRotation();
+      return /*#__PURE__*/React.createElement(ResizeableWindow, {
+        dockable: this.props.geometry.side,
+        icon: "oblique",
+        initialHeight: this.props.geometry.initialHeight,
+        initialWidth: this.props.geometry.initialWidth,
+        initialX: this.props.geometry.initialX,
+        initialY: this.props.geometry.initialY,
+        initiallyDocked: this.props.geometry.initiallyDocked,
+        onClose: this.onClose,
+        splitScreenWhenDocked: true,
+        splitTopAndBottomBar: true,
+        title: LocaleUtils.tr("obliqueview.title")
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "obliqueview-body"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "obliqueview-map",
+        ref: function ref(el) {
+          return _this2.map.setTarget(el);
+        },
+        tabIndex: 0
+      }), !this.state.selectedDataset && /*#__PURE__*/React.createElement("div", {
+        className: "obliqueview-empty-overlay"
+      }, LocaleUtils.tr("obliqueview.nodataset")), /*#__PURE__*/React.createElement("div", {
+        className: "obliqueview-nav-rotate",
+        style: {
+          transform: "rotate(".concat(rot, "deg)")
+        }
+      }, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", {
+        className: "obliqueview-nav-dir",
+        onClick: function onClick() {
+          return _this2.setState({
+            currentDirection: "n"
+          });
+        },
+        onKeyDown: MiscUtils.checkKeyActivate,
+        style: {
+          transform: "rotate(".concat(-rot, "deg)")
+        },
+        tabIndex: 0
+      }, "N"), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", {
+        className: "obliqueview-nav-dir",
+        onClick: function onClick() {
+          return _this2.setState({
+            currentDirection: "w"
+          });
+        },
+        onKeyDown: MiscUtils.checkKeyActivate,
+        style: {
+          transform: "rotate(".concat(-rot, "deg)")
+        },
+        tabIndex: 0
+      }, "W"), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", {
+        className: "obliqueview-nav-dir",
+        onClick: function onClick() {
+          return _this2.setState({
+            currentDirection: "e"
+          });
+        },
+        onKeyDown: MiscUtils.checkKeyActivate,
+        style: {
+          transform: "rotate(".concat(-rot, "deg)")
+        },
+        tabIndex: 0
+      }, "E"), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", {
+        className: "obliqueview-nav-dir",
+        onClick: function onClick() {
+          return _this2.setState({
+            currentDirection: "s"
+          });
+        },
+        onKeyDown: MiscUtils.checkKeyActivate,
+        style: {
+          transform: "rotate(".concat(-rot, "deg)")
+        },
+        tabIndex: 0
+      }, "S"), /*#__PURE__*/React.createElement("span", null)), /*#__PURE__*/React.createElement("div", {
+        className: "obliqueview-nav-zoom"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: "plus",
+        onClick: function onClick() {
+          return _this2.changeZoom(+1);
+        }
+      }), /*#__PURE__*/React.createElement(Icon, {
+        icon: "minus",
+        onClick: function onClick() {
+          return _this2.changeZoom(-1);
+        }
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "obliqueview-bottombar"
+      }, this.renderScaleChooser())));
+    }
+  }]);
+}(React.Component);
+_defineProperty(ObliqueView, "propTypes", {
+  active: PropTypes.bool,
+  /** Default window geometry with size, position and docking status. Positive position values (including '0') are related to top (InitialY) and left (InitialX), negative values (including '-0') to bottom (InitialY) and right (InitialX). */
+  geometry: PropTypes.shape({
+    initialWidth: PropTypes.number,
+    initialHeight: PropTypes.number,
+    initialX: PropTypes.number,
+    initialY: PropTypes.number,
+    initiallyDocked: PropTypes.bool,
+    side: PropTypes.string
+  }),
+  /** The initial map scale. */
+  initialScale: PropTypes.number,
+  mapBbox: PropTypes.object,
+  projection: PropTypes.string,
+  /** A list of allowed map scales, in decreasing order. */
+  scales: PropTypes.arrayOf(PropTypes.number),
+  setCurrentTask: PropTypes.func,
+  theme: PropTypes.object,
+  themes: PropTypes.object
+});
+_defineProperty(ObliqueView, "defaultProps", {
+  geometry: {
+    initialWidth: 480,
+    initialHeight: 640,
+    initialX: 0,
+    initialY: 0,
+    initiallyDocked: true,
+    side: 'left'
+  },
+  initialScale: 1000,
+  scales: [20000, 10000, 5000, 2500, 1000, 500, 250]
+});
+_defineProperty(ObliqueView, "defaultState", {
+  active: false,
+  selectedDataset: null,
+  datasetConfig: null,
+  currentDirection: null,
+  currentZoom: 0
+});
+export default connect(function (state) {
+  return {
+    active: state.task.id === "ObliqueView",
+    mapBbox: state.map.bbox,
+    theme: state.theme.current,
+    themes: state.theme.themes
+  };
+}, {
+  setCurrentTask: setCurrentTask
+})(ObliqueView);