Merge pull request #2406 from ZakarFin/update-ol

Update OpenLayers 7.2.2 -> 9.2.4 (and related updates)

bundles/mapping/mapmodule/MapModuleClass.ol.js

@@ -13,12 +13,13 @@ import * as olProjProj4 from 'ol/proj/proj4';
 import * as olProj from 'ol/proj';
 import { easeOut } from 'ol/easing';
 import olMap from 'ol/Map';
-import 'ol/ol.css';
+import { VERSION as olVersion } from 'ol/util.js';
 import { defaults as olControlDefaults } from 'ol/control';
 import * as olSphere from 'ol/sphere';
 import * as olGeom from 'ol/geom';
 import { fromCircle } from 'ol/geom/Polygon';
 import olFeature from 'ol/Feature';
+import 'ol/ol.css';
 import { OskariImageWMS } from './plugin/wmslayer/OskariImageWMS';
 import { getOlStyles, getOlStyleForLayer, setDefaultStyle } from './oskariStyle/generator.ol';
 import { STYLE_TYPE } from './oskariStyle/constants';
@@ -1390,5 +1391,9 @@ export class MapModule extends AbstractMapModule {
         }
         return null;
     }
+
+    getVersion () {
+        return 'OpenLayers/' + olVersion;
+    }
     /* --------- /Impl specific - PARAM DIFFERENCES  ----------------> */
 }

bundles/mapping/mapmodule/mapmodule.olcs.js

@@ -5,14 +5,18 @@ import * as olProj from 'ol/proj';
 import OLMap from 'ol/Map';
 import { defaults as olControlDefaults } from 'ol/control';
 // see oskari-frontend/webpack/config.js for additional config required by Cesium
-import * as Cesium from 'cesium/Source/Cesium';
-import OLCesium from 'olcs/OLCesium';
+
+import * as Cesium from 'cesium';
+
+// https://github.com/openlayers/ol-cesium/issues/1094#issuecomment-1710423741
+// import OLCesium from 'olcs/OLCesium.js';
+import OLCesium from 'olcs';
 import { MapModule as MapModuleOl } from './MapModuleClass.ol';
 import { LAYER_ID, VECTOR_STYLE } from './domain/constants';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import 'olcs/olcs.css';
-
+// import 'ol-cesium/css/olcs.css';
+import 'olcs/css/olcs.css';
 import './event/TimeChangedEvent';
 dayjs.extend(customParseFormat);
 // OL-cesium expects to find this global
@@ -181,42 +185,40 @@ class MapModuleOlCesium extends MapModuleOl {
     /**
      * @method _initTerrainProvider Initializes the terrain defined in module options.
      */
-    _initTerrainProvider () {
+    async _initTerrainProvider () {
         if (!this.getCesiumScene() || !this._options.terrain) {
             return;
         }
         const { providerUrl, ionAssetId, ionAccessToken } = this._options.terrain;
         let terrainProvider = null;
         if (providerUrl) {
-            terrainProvider = new Cesium.CesiumTerrainProvider({ url: providerUrl });
+            terrainProvider = await Cesium.CesiumTerrainProvider.fromUrl(providerUrl);
         }
         if (ionAccessToken) {
             Cesium.Ion.defaultAccessToken = ionAccessToken;
             jQuery('.cesium-credit-container .cesium-credit-logoContainer').css('visibility', 'visible');
 
             if (ionAssetId) {
-                terrainProvider = new Cesium.CesiumTerrainProvider({
-                    url: Cesium.IonResource.fromAssetId(ionAssetId)
+                terrainProvider = await Cesium.CesiumTerrainProvider.fromIonAssetId(ionAssetId, {
+                    requestVertexNormals: false
                 });
             } else {
-                terrainProvider = Cesium.createWorldTerrain({
-                    requestVertexNormals: true
+                terrainProvider = await Cesium.createWorldTerrainAsync({
+                    requestVertexNormals: false
                 });
             }
         }
         if (!terrainProvider) {
             return;
         }
-        terrainProvider.readyPromise.then(() => {
-            this.getCesiumScene().terrainProvider = terrainProvider;
-        });
+        this.getCesiumScene().terrainProvider = terrainProvider;
     }
 
     /**
      * Fire operations that have been waiting for the map to initialize.
      */
     _notifyMapReadySubscribers () {
-        var me = this;
+        const me = this;
         this._mapReadySubscribers.forEach(function (fireOperation) {
             fireOperation.operation.apply(me, fireOperation.arguments);
         });
@@ -1036,6 +1038,11 @@ class MapModuleOlCesium extends MapModuleOl {
         const lonlat = { lon: location[0], lat: location[1] };
         return lonlat;
     }
+
+    getVersion () {
+        const olVersion = super.getVersion();
+        return olVersion + ' - Cesium/' + Cesium.VERSION;
+    }
 }
 
 Oskari.clazz.defineES(

jest.config.js

@@ -10,14 +10,11 @@ module.exports = {
         '\\.(css|less)$': '<rootDir>/tests/jest/styleMock.js',
         '^d3$': '<rootDir>/node_modules/d3/dist/d3.min.js'
     },
-    timers: 'fake',
+    fakeTimers: {
+        enableGlobally: true
+    },
     verbose: true,
     transformIgnorePatterns: [
-        'node_modules/(?!(ol|jsts|geotiff|quick-lru)).+\\.js$'
+        'node_modules/(?!(ol|color-parse|color-space|color-rgba|color-name|jsts|geotiff|quick-lru)).+\\.js$'
     ]
-    /*
-    ,transform: {
-        '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/tests/jest/fileTransformer.js'
-    }
-    */
 };

package.json

@@ -18,7 +18,7 @@
   "license": "(MIT OR EUPL-1.1)",
   "main": "grunt.js",
   "engines": {
-    "node": "^12.22.0 || ^14.17.0 || >=16.0.0",
+    "node": ">=16.20.0",
     "npm": ">=6.0.0"
   },
   "scripts": {
@@ -29,23 +29,24 @@
     "lint": "eslint . --quiet",
     "test": "eslint . --quiet && jest",
     "test:coverage": "jest --coverage",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "postinstall": "node webpack/hacks/postinstall.js"
   },
   "dependencies": {
     "@ant-design/icons": "4.6.3",
-    "@babel/core": "7.23.5",
-    "@babel/preset-env": "7.23.5",
-    "@babel/preset-react": "7.23.3",
-    "@babel/runtime-corejs3": "7.23.5",
+    "@babel/core": "7.25.2",
+    "@babel/preset-env": "7.25.4",
+    "@babel/preset-react": "7.24.7",
+    "@babel/runtime-corejs3": "7.25.0",
+    "@cesium/engine": "10.1.0",
     "@storybook/react": "6.3.7",
     "@testing-library/jest-dom": "5.7.0",
     "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "14.4.3",
     "antd": "4.24.8",
-    "babel-loader": "8.2.5",
+    "babel-loader": "8.3.0",
     "babel-plugin-styled-components": "2.1.4",
     "babel-plugin-transform-remove-strict-mode": "0.0.2",
-    "cesium": "1.91.0",
     "copy-webpack-plugin": "5.0.4",
     "core-js": "3.33.2",
     "css-loader": "3.2.0",
@@ -67,7 +68,8 @@
     "gm": "1.23.1",
     "imports-loader": "0.8.0",
     "intl-messageformat": "9.11.4",
-    "jest": "27.0.6",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
     "jquery": "3.7.1",
     "jsts": "2.2.0",
     "less": "3.9.0",
@@ -77,14 +79,15 @@
     "merge": "2.1.1",
     "mini-css-extract-plugin": "0.8.0",
     "mobile-detect": "1.4.5",
-    "sass": "1.77.8",
-    "ol": "7.2.2",
-    "olcs": "2.13.1",
+    "ol": "9.2.4",
+    "ol-mapbox-style": "12.3.5",
+    "olcs": "2.20",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "query-string": "6.8.3",
     "react": "16.14.0",
     "react-beautiful-dnd": "13.1.0",
     "react-dom": "16.14.0",
+    "sass": "1.77.8",
     "sass-loader": "10.5.2",
     "script-loader": "0.7.2",
     "style-loader": "1.0.0",

tests/jest/fileTransformer.js

@@ -3,6 +3,8 @@ const path = require('path');
 // to fix static assest from being processed like import 'ol/ol.css';
 module.exports = {
   process(src, filename, config, options) {
-    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
+    return {
+      code: 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
+    }
   }
 };

webpack.config.js

@@ -15,7 +15,7 @@ const isDirectory = source => lstatSync(source).isDirectory();
 const getDirectories = source => readdirSync(source).map(name => path.join(source, name)).filter(isDirectory);
 
 // The path to the CesiumJS source code (normal and dev mode)
-const cesiumSourceOptions = ['../cesium/Source', 'node_modules/cesium/Source'];
+const cesiumSourceOptions = ['../@cesium/engine/Build', 'node_modules/@cesium/engine/Build'];
 const cesiumTarget = 'cesium';
 
 module.exports = (env, argv) => {
@@ -36,11 +36,11 @@ module.exports = (env, argv) => {
         .filter(possiblePath => existsSync(path.join(__dirname, possiblePath)))
         .forEach(possibleSrcPath => {
             plugins.push(new CopywebpackPlugin([
-                { from: path.join(__dirname, possibleSrcPath, '../Build/Cesium/Workers'), to: cesiumTarget + '/Workers' },
-                { from: path.join(__dirname, possibleSrcPath, 'Assets'), to: cesiumTarget + '/Assets' },
-                { from: path.join(__dirname, possibleSrcPath, 'Widgets'), to: cesiumTarget + '/Widgets' },
+                { from: path.join(__dirname, possibleSrcPath, '../Source/Assets'), to: cesiumTarget + '/Assets' },
+                { from: path.join(__dirname, possibleSrcPath, 'Workers'), to: cesiumTarget + '/Workers' },
+                // { from: path.join(__dirname, possibleSrcPath, 'Widgets'), to: cesiumTarget + '/Widgets' },
                 // copy Cesium's minified third-party scripts
-                { from: path.join(__dirname, possibleSrcPath, '../Build/Cesium/ThirdParty'), to: cesiumTarget + '/ThirdParty' }
+                { from: path.join(__dirname, possibleSrcPath, 'ThirdParty'), to: cesiumTarget + '/ThirdParty' }
             ]));
         });
 

webpack/config.js

@@ -89,10 +89,10 @@ const BABEL_LOADER_RULE = {
         /libraries/,
         /\.min\.js$/,
         // https://github.com/zloirock/core-js/issues/514 core-js shouldn't be run through babel
-        // getExcludedNodeModules(['react-dom', '@ant-design', 'antd', 'core-js'])
+        getExcludedNodeModules(['react-dom', '@ant-design', 'antd', 'core-js'])
         // Exclude all but named dependencies (named deps contain es6+ modules that require transpiling)
         // FIXME: olcs seems problematic - adding it makes the build take reeeeaaaally long compared to not having it
-        getWhitelistedModules(['oskari-frontend', 'oskari-frontend-contrib', 'jsts', 'olcs', 'cesium', '@mapbox'])
+        // getWhitelistedModules(['oskari-frontend', 'oskari-frontend-contrib', 'olcs', 'cesium', '@cesium', 'jsts', '@mapbox'])
     ],
     use: {
         loader: 'babel-loader',

webpack/hacks/cesium/README.md

@@ -0,0 +1,25 @@
+`buildModuleUrl.js.modified` is a copy of `node_modules/@cesium/engine/Source/Core/buildModuleUrl.js` and is overwriting the original version with as a postinstall script.
+
+The changes are tagged with `// EDIT START` and `// EDIT END`. 
+
+Commented out part where import.meta?.url is referenced as Webpack 4.x fails to process it with this error:
+
+```sh
+ERROR in ../oskari-frontend/node_modules/@cesium/engine/Source/Core/buildModuleUrl.js 42:43
+Module parse failed: Unexpected token (42:43)
+File was processed with these loaders:
+ * ../oskari-frontend/node_modules/babel-loader/lib/index.js
+You may need an additional loader to handle the result of these loaders.
+|   if (typeof CESIUM_BASE_URL !== "undefined") {
+|     baseUrlString = CESIUM_BASE_URL;
+>   } else if (defined((_import$meta = import.meta) === null || _import$meta === void 0 ? void 0 : _import$meta.url)) {
+|     // ESM
+|     baseUrlString = getAbsoluteUri(".", import.meta.url);
+ @ ../oskari-frontend/node_modules/@cesium/engine/Source/Core/ApproximateTerrainHeights.js 2:0-49 39:35-49
+ @ ../oskari-frontend/node_modules/@cesium/engine/index.js
+ @ ../oskari-frontend/node_modules/cesium/Source/Cesium.js
+ @ ./node_modules/oskari-frontend/bundles/mapping/mapmodule/mapmodule.olcs.js
+ @ ../oskari-frontend/webpack/oskariLoader.js!./node_modules/oskari-frontend/packages/mapping/olcs/mapmodule/bundle.js
+ @ ./applications/embedded-3D/main.js
+ @ multi ../oskari-frontend/webpack/polyfill.js ../oskari-frontend/webpack/oskari-core.js ./applications/embedded-3D/main.js
+ ```