- npm updates

- remove NODE_ENV from .env file, use webpack mode parameter inside webpack.config.js

.env.example

@@ -1,2 +1,8 @@
-NODE_ENV=
+CONSTANT_VALUE=1234567
-CONSTANT_VALUE=
+SERVICE_URL=https://geusegdi01.geus.dk/meta3d/rpc/model_meta_all?modelid=
+POINT_URL=https://geusegdi01.geus.dk/geom3d/data/nodes/
+EDGE_URL=https://geusegdi01.geus.dk/geom3d/data/triangles/
+
+APP_KEY=
+MATOMO_TRACKER_URL=
+MATOMO_SITE_ID=

GeotiefExplore.code-workspace

@@ -17,10 +17,9 @@
 				"name": "Launch Chrome against localhost",
 				// "port": 9222,
 				"url": "http://localhost:8080?model_id=20",
-				"webRoot": "${workspaceFolder}",
+				"webRoot": "${workspaceFolder}",				
-				"breakOnLoad": true,
+				// "runtimeExecutable": "C:/ProgramData/scoop/apps/googlechrome/current/chrome.exe",
-				"runtimeExecutable": "C:/ProgramData/scoop/apps/googlechrome/current/chrome.exe",
+				"runtimeExecutable": "C:/Program Files/Google/Chrome/Application/chrome.exe",
-				// "runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
 				// "sourceMapPathOverrides": {
 				// 	"webpack:///./~/*": "${workspaceFolder}/node_modules/*", 
 				// 	"webpack:///./*":   "${workspaceFolder}/*", 

index.html

@@ -224,7 +224,7 @@
     </section>
 
     <script src="dist/runtime.js"></script>
-    <script src="dist/vendors.js"></script>
+    <script src="dist/chunk-vendors.js"></script>
     <script src="dist/main.js"></script>
 </body>
 

package.json

@@ -6,11 +6,11 @@
     "dependencies": {
         "@fontsource/open-sans": "^4.5.11",
         "@fortawesome/fontawesome-free": "^6.1.2",
-        "@types/three": "^0.143.2",
+        "@types/three": "^0.144.0",
         "bulma": "^0.9.2",
         "lodash": "^4.17.21",
         "proj4": "^2.6.3",
-        "three": "^0.143.0"
+        "three": "^0.144.0"
     },
     "author": "Arno Kaimbacher",
     "license": "MIT",
@@ -37,15 +37,16 @@
         "url-loader": "^4.1.1",
         "webpack": "^5.7.0",
         "webpack-cli": "^4.2.0",
-        "webpack-merge": "^5.4.0"
+        "webpack-manifest-plugin": "^5.0.0",
+        "webpack-merge": "^5.4.0",
+        "webpack-nano": "^1.1.1"
     },
     "scripts": {
         "babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
         "serve": "http-server",
         "prod": "rm -rf dist && webpack --progress --mode=production",
-        "prod_serve": "concurrently \"npm run serve\" \"npx webpack --progress --mode=production --watch\" ",
+        "prod_serve": "rm -rf dist && concurrently \"npm run serve\" \"npx webpack --progress --mode=production\" ",
-        "dev_serve": "concurrently \"npm run serve\" \"npx webpack --progress --mode=development --watch\" ",
+        "dev": "rm -rf dist && concurrently \"npm run serve\" \"npx webpack --progress --mode=development --watch\" "
-        "dev": "rm -rf dist && npx webpack --progress --mode=development --watch"
     },
     "keywords": [
         "3D",

src/js/controls/BoreholePopup.ts

@@ -3,6 +3,7 @@ import * as util from '../core/utilities';
 import * as domEvent from '../core/domEvent';
 import * as dom from '../core/domUtil';
 import { BarChart } from '../core/BarChart';
+import { Map } from "../core/Map";
 
 import './BoreholePopup.css';
 
@@ -19,7 +20,7 @@ export class BoreholePopup extends Control {
         position: 'topleft',
         width: '300px',
         height: '100%',
-        parentDiv: null
+        parentDiv: undefined
     };
     _source;
 
@@ -41,7 +42,7 @@ export class BoreholePopup extends Control {
     }
 
     // happens after added to map
-    onAdd(map) {
+    onAdd(map: Map) {
         if (!map) {
             // this.destroy();
             //logger.warning('HomeButton::map required', true);
@@ -108,13 +109,13 @@ export class BoreholePopup extends Control {
         }
     }
 
-    show() {
+    show(): void {
         //this._clearContent();
         this._toggleVisibility(true);
         //this._animate(true);
     }
 
-    hide() {
+    hide(): void {
         //var test = this._isShowing;
         if (this._isShowing) {
             (this._toggleVisibility(false));
@@ -124,7 +125,7 @@ export class BoreholePopup extends Control {
         //}
     }
 
-    setContent(innerHTML) {
+    setContent(innerHTML): void {
         if (innerHTML instanceof HTMLElement) {
             this._contentPane.innerHTML = "";
             this._contentPane.appendChild(innerHTML);
@@ -135,7 +136,7 @@ export class BoreholePopup extends Control {
         this._contentPane.style.display = "block";
     }
 
-    setChartContent(data) {
+    setChartContent(data): void {
         this._contentPane.innerHTML = "";
 
         let valTextColor = "ffffff";
@@ -149,17 +150,17 @@ export class BoreholePopup extends Control {
         this._contentPane.appendChild(table);
     }
 
-    close() {
+    close(): void {
         this._clearContent();
         this._toggleVisibility(false);
         this.emit("closed");
     }
 
-    private _clearContent() {
+    private _clearContent(): void {
         this._contentPane.innerHTML = '';
     }
 
-    private _toggleVisibility(visible) {
+    private _toggleVisibility(visible: boolean): void {
         this._setVisibility(visible);
         this._isShowing = visible;
 
@@ -171,19 +172,22 @@ export class BoreholePopup extends Control {
         // let analysisTabContent = document.querySelector('.tab-pane.content-file');       
         // if it's not the analysis tab, make it active
         if (analysisTabButton !== activeTabButton) {
-            activeTabButton.classList.remove('is-active');
+            activeTabButton?.classList.remove('is-active');
-            analysisTabButton.classList.add('is-active');
+            analysisTabButton?.classList.add('is-active');
 
-            document.querySelector(activeTabButton.getAttribute('name')).classList.remove('active');
+            let activeNameAttribute = activeTabButton?.getAttribute('name');
-            document.querySelector(analysisTabButton.getAttribute('name')).classList.add('active');
+            (activeNameAttribute) &&  document.querySelector(activeNameAttribute)?.classList.remove('active');
+           
+            let analysisNameAttribute = analysisTabButton?.getAttribute('name');
+            (analysisNameAttribute) && document.querySelector(analysisNameAttribute)?.classList.add('active');
         }
     }
 
-    private _setVisibility(addOrRemove) {
+    private _setVisibility(addOrRemove: boolean) :void {
         this._menu.style.visibility = addOrRemove ? "visible" : "hidden";
     }
 
-    onRemove() {
+    onRemove(): void {
         //this.cleanup();
         this._isShowing && this.hide();
         //for (var i = 0; i < this._eventConnections.length; i ++)

webpack.config.js

@@ -1,31 +1,40 @@
-require('dotenv').config();
+require("dotenv").config();
-const path = require('path');
+const path = require("path");
-const webpack = require('webpack'); //e.g. for iusing DefinePlugin
+const webpack = require("webpack"); //e.g. for iusing DefinePlugin
 // const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
+const TerserPlugin = require("terser-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 // const { VueLoaderPlugin } = require('vue-loader');
 
 /**
  * flag Used to check if the environment is production or not
  */
-const isProduction = (process.env.NODE_ENV === 'production');
+//  const isProduction = (process.env.NODE_ENV === 'production');
-const devMode = (process.env.NODE_ENV !== 'production');
+//  const devMode = (process.env.NODE_ENV !== 'production');
 
 /**
  * Include hash to filenames for cache busting - only at production
  */
-const fileNamePrefix = isProduction ? '[chunkhash].' : '';
+// const fileNamePrefix = isProduction ? "[chunkhash]." : "";
 
-module.exports = {
+let isProduction, devMode;
-    mode: process.env.NODE_ENV,
+
+module.exports = (env, argv) => {
+  isProduction = argv.mode === "production";
+  devMode = argv.mode !== "production";
+//   const fileNamePrefix = isProduction ? "[chunkhash]." : "";
+  
+  console.log(`This is the Webpack 5 'mode': ${argv.mode}`);
+  return {
+    // mode: process.env.NODE_ENV,
     context: __dirname,
-    entry: './src/js/main.js',
+    entry: "./src/js/main.js",
     output: {
-        path: path.resolve(__dirname, 'dist'),
+      path: path.resolve(__dirname, "dist"),
-        filename: '[name].js',
+      filename: "[name].js",
-        //filename: fileNamePrefix + '[name].js',
+    //   filename: fileNamePrefix + '[name].js',
-        publicPath: '/dist/',
+      publicPath: "/dist/",
     },
     // resolve: {
     //     alias: {
@@ -34,197 +43,216 @@ module.exports = {
     //     extensions: ['*', '.js', '.vue', '.json']
     // },
     module: {
-        rules: [          
+      rules: [
-			// {
+        // {
-            //     test: /\.(svg|eot|ttf|woff|woff2)$/,
+        //     test: /\.(svg|eot|ttf|woff|woff2)$/,
-            //     loader: 'url-loader',
+        //     loader: 'url-loader',
-			// 	// include: path.resolve(__dirname, '~@fontsource/open-sans/files/'),
+        // 	// include: path.resolve(__dirname, '~@fontsource/open-sans/files/'),
+        //     options: {
+        //         limit: 10000,
+        //         name: '[name].[ext]',
+        // 		outputPath: 'assets/fonts/',
+        //     }
+        // },
+
+        // {
+        //     test: /\.(png|jpg|gif)$/,
+        //     loaders: [
+        //         {
+        //             loader: 'url-loader',
+        //             options: {
+        //                 limit: 10000,
+        //                 name: 'images/[name].[ext]'
+        //             }
+        //         },
+        //         'img-loader'
+        //     ],
+        // },
+        // {
+        //     test: /\.vue$/,
+        //     loader: 'vue-loader'
+        //   },
+        // {
+        //     test: /\.tsx?$/,
+        //     use: 'ts-loader',
+        //     exclude: /(node_modules|bower_components)/,
+        // },
+        {
+          // test: /\.js$/,
+          test: /\.(js|jsx|tsx|ts)$/,
+          exclude: /(node_modules|bower_components)/,
+          use: {
+            loader: "babel-loader",
+            // options: {
+            //     presets: ['@babel/preset-env']
+            // }
+          },
+        },
+
+        {
+          test: /\.(scss|css)$/,
+          use: [
+            {
+              loader:
+                isProduction === true
+                  ? MiniCssExtractPlugin.loader
+                  : "style-loader",
+              // loader: 'style-loader',
+              // loader: MiniCssExtractPlugin.loader,
+              // options: {
+              //     hmr: process.env.NODE_ENV === 'development',
+              // },
+            },
+            // {
+            //     loader: "vue-style-loader",
             //     options: {
-            //         limit: 10000,
+            //         sourceMap: true
-            //         name: '[name].[ext]',
-            // 		outputPath: 'assets/fonts/',
             //     }
             // },
-
+            // Translates CSS into CommonJS
+            {
+              loader: "css-loader",
+              options: {
+                sourceMap: true,
+              },
+            },
             // {
-            //     test: /\.(png|jpg|gif)$/,
+            //     loader:  'resolve-url-loader',
-            //     loaders: [
-            //         {
-            //             loader: 'url-loader',
-            //             options: {
-            //                 limit: 10000,
-            //                 name: 'images/[name].[ext]'
-            //             }
-            //         },
-            //         'img-loader'
-            //     ],
-            // },
-            // {
-            //     test: /\.vue$/,
-            //     loader: 'vue-loader'
             //   },
-            // {
+            // Compiles Sass to CSS
-            //     test: /\.tsx?$/,
-            //     use: 'ts-loader',
-            //     exclude: /(node_modules|bower_components)/,
-            // },
             {
-                // test: /\.js$/,
+              loader: "sass-loader",
-                test: /\.(js|jsx|tsx|ts)$/,
+              options: {
-                exclude: /(node_modules|bower_components)/,
+                sourceMap: true,
-                use: {
+              },
-                    loader: 'babel-loader',
-                    // options: {
-                    //     presets: ['@babel/preset-env']
-                    // }
-                }
             },
-
+          ],
-            {
+        },
-                test: /\.(scss|css)$/,
+      ],
-                use: [
-                    {
-                        loader: (isProduction === true) ? MiniCssExtractPlugin.loader : 'style-loader',
-                        // loader: 'style-loader',                      
-                        // loader: MiniCssExtractPlugin.loader,
-                        // options: {
-                        //     hmr: process.env.NODE_ENV === 'development',
-                        // },
-                    },
-                    // {
-                    //     loader: "vue-style-loader",
-                    //     options: {
-                    //         sourceMap: true
-                    //     }
-                    // },
-                    // Translates CSS into CommonJS
-                    {
-                        loader: "css-loader",
-                        options: {
-                            sourceMap: true
-                        }
-                    },
-                    // {
-                    //     loader:  'resolve-url-loader',
-                    //   },
-                    // Compiles Sass to CSS
-                    {
-                        loader: "sass-loader",
-                        options: {
-                            sourceMap: true
-                        }
-                    }
-                ]
-            },
-
-        ]
     },
     resolve: {
-        extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
+      extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
     },
     stats: {
-        colors: true
+      colors: true,
     },
-    devtool: (isProduction === true) ? 'hidden-source-map' : 'inline-source-map',
+    // devtool: (isProduction === true) ? 'hidden-source-map' : 'inline-source-map',
+    devtool: (isProduction === true) ? 'hidden-source-map' : 'eval',
 
     optimization: {
-        minimize: isProduction,
+      minimize: isProduction,
-        minimizer: [
+      runtimeChunk: "single",
-            new TerserPlugin({
+      splitChunks: {
-                // cache: true,
+        cacheGroups: {
-                parallel: true,
+          defaultVendors: {
-                // sourceMap: true, // Must be set to true if using source-maps in production
+            test: /[\\\/]node_modules[\\\/]/,
-                extractComments: true,
+            name: "chunk-vendors",
-                terserOptions: {
+            // chunks: 'all',
-
+            priority: -10,
-                    compress: {
+            chunks: "initial",
-                        directives: false,
+          },
-                        //     drop_console: true,
+          common: {
-                        //     drop_debugger: true,
+            name: "chunk-common",
-                        //     keep_classnames: false,
+            minChunks: 2,
-                        //     keep_fnames: false,
+            priority: -20,
-                    },
+            chunks: "initial",
-                    mangle: true, // Note `mangle.properties` is `false` by default.
+            reuseExistingChunk: true,
-                    keep_classnames: false,
+          },
-                    keep_fnames: false,
+          // styles: {
-                }
+          //     name: 'styles',
-            })
+          //     test: /\.css$/,
-        ],
+          //     chunks: 'all',
-        runtimeChunk: 'single',
+          //     enforce: true
-        splitChunks: {
+          // }
-            cacheGroups: {
-                vendor: {
-                    test: /[\\\/]node_modules[\\\/]/,
-                    name: 'vendors',
-                    chunks: 'all'
-                },
-                // styles: {
-                //     name: 'styles',
-                //     test: /\.css$/,
-                //     chunks: 'all',
-                //     enforce: true
-                // }
-            }
         },
+      },
+      minimizer: [
+        new TerserPlugin({
+          // cache: true,
+          parallel: true,
+          // sourceMap: true, // Must be set to true if using source-maps in production
+          extractComments: true,
+          terserOptions: {
+            // compress: {
+            //   directives: false,
+            //   //     drop_console: true,
+            //   //     drop_debugger: true,
+            //   //     keep_classnames: false,
+            //   //     keep_fnames: false,
+            // },
+            compress: {
+              directives: false,
+              arrows: true,
+              collapse_vars: true,
+              comparisons: true,
+              computed_props: true,
+              hoist_funs: true,
+              hoist_props: true,
+              hoist_vars: true,
+              inline: true,
+              loops: true,
+              negate_iife: true,
+              properties: true,
+              reduce_funcs: true,
+              reduce_vars: true,
+              switches: true,
+              toplevel: true,
+              typeofs: true,
+              booleans: true,
+              if_return: true,
+              sequences: true,
+              unused: true,
+              conditionals: true,
+              dead_code: false,
+              evaluate: true,
+            },
+            mangle: true, // Note `mangle.properties` is `false` by default.
+            keep_classnames: false,
+            keep_fnames: false,
+          },
+        }),
+      ],
     },
 
     plugins: [
-        // new VueLoaderPlugin(),
+      // new VueLoaderPlugin(),
 
-        new webpack.DefinePlugin({ // Remove this plugin if you don't plan to define any global constants
+      new webpack.DefinePlugin({
-            ENVIRONMENT: JSON.stringify(process.env.NODE_ENV),
+        // Remove this plugin if you don't plan to define any global constants
-            CONSTANT_VALUE: JSON.stringify(process.env.CONSTANT_VALUE),
+        ENVIRONMENT: JSON.stringify(process.env.NODE_ENV),
-            MATOMO_SITE_ID: JSON.stringify(process.env.MATOMO_SITE_ID),
+        CONSTANT_VALUE: JSON.stringify(process.env.CONSTANT_VALUE),
-            MATOMO_TRACKER_URL: JSON.stringify(process.env.MATOMO_TRACKER_URL),
+        MATOMO_SITE_ID: JSON.stringify(process.env.MATOMO_SITE_ID),
-            SERVICE_URL: JSON.stringify(process.env.SERVICE_URL),
+        MATOMO_TRACKER_URL: JSON.stringify(process.env.MATOMO_TRACKER_URL),
-            POINT_URL: JSON.stringify(process.env.POINT_URL),
+        SERVICE_URL: JSON.stringify(process.env.SERVICE_URL),
-            EDGE_URL: JSON.stringify(process.env.EDGE_URL),
+        POINT_URL: JSON.stringify(process.env.POINT_URL),
+        EDGE_URL: JSON.stringify(process.env.EDGE_URL),
 
-            CUSTOM_VAR: JSON.stringify('value5 goes here'), // no quotes needed, string value
+        CUSTOM_VAR: JSON.stringify("value5 goes here"), // no quotes needed, string value
-        }),
+      }),
-        // extractLess,
+      // extractLess,
 
-        new MiniCssExtractPlugin({ // Make sure MiniCssExtractPlugin instance is included in array before the PurifyCSSPlugin
+      new MiniCssExtractPlugin({
-            // Options similar to the same options in webpackOptions.output
+        // Make sure MiniCssExtractPlugin instance is included in array before the PurifyCSSPlugin
-            // both options are optional
+        // Options similar to the same options in webpackOptions.output
-            // filename: '[name].css',
+        // both options are optional
-            // chunkFilename: '[id].css',
+        // filename: '[name].css',
-            filename: '[name].css',
+        // chunkFilename: '[id].css',
-            chunkFilename: '[id].css',
+        filename: "[name].css",
-        }),
+        chunkFilename: "[id].css",
+      }),
 
-        // new PurifyCSSPlugin({
+      // new PurifyCSSPlugin({
-        //     paths: glob.sync(__dirname + '/*.html'),
+      //     paths: glob.sync(__dirname + '/*.html'),
-        //     minimize: true,
+      //     minimize: true,
-        // }),
+      // }),
 
-        // new webpack.HotModuleReplacementPlugin(),
+      (isProduction) && new WebpackManifestPlugin({
-    ],
+        fileName: 'manifest.json'
+      }),
 
+      //auto updating on webpack dev server
+      (devMode) &&  new webpack.HotModuleReplacementPlugin() // HMR plugin will cause problems with [chunkhash]
+
+    ].filter(Boolean),
+  };
 };
-
-/**
- * Production only plugins
- */
-if (isProduction === true) {
-    module.exports.plugins.push(
-        // module.exports.optimization.minimizer.push(
-        //     new UglifyJsPlugin({ sourceMap: true })
-        // );
-        // function () { // Create a manifest.json file that contain the hashed file names of generated static resources
-        //     this.plugin("done", function (status) {
-        //         require("fs").writeFileSync(
-        //             __dirname + "/dist/manifest.json",
-        //             JSON.stringify(status.toJson().assetsByChunkName)
-        //         );
-        //     });
-        // },
-
-    );
-    //development
-} else {
-    module.exports.plugins.push(
-        //auto updating on dev server
-        new webpack.HotModuleReplacementPlugin()// HMR plugin will cause problems with [chunkhash]
-    );
-}