- 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

@@ -18,9 +18,8 @@
 				// "port": 9222,
 				"url": "http://localhost:8080?model_id=20",
 				"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',
-        publicPath: '/dist/',
+      publicPath: "/dist/",
     },
     // resolve: {
     //     alias: {
@@ -73,18 +82,21 @@ module.exports = {
           test: /\.(js|jsx|tsx|ts)$/,
           exclude: /(node_modules|bower_components)/,
           use: {
-                    loader: 'babel-loader',
+            loader: "babel-loader",
             // options: {
             //     presets: ['@babel/preset-env']
             // }
-                }
+          },
         },
 
         {
           test: /\.(scss|css)$/,
           use: [
             {
-                        loader: (isProduction === true) ? MiniCssExtractPlugin.loader : 'style-loader',
+              loader:
+                isProduction === true
+                  ? MiniCssExtractPlugin.loader
+                  : "style-loader",
               // loader: 'style-loader',
               // loader: MiniCssExtractPlugin.loader,
               // options: {
@@ -101,8 +113,8 @@ module.exports = {
             {
               loader: "css-loader",
               options: {
-                            sourceMap: true
+                sourceMap: true,
-                        }
+              },
             },
             // {
             //     loader:  'resolve-url-loader',
@@ -111,52 +123,40 @@ module.exports = {
             {
               loader: "sass-loader",
               options: {
-                            sourceMap: true
+                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,
-        minimizer: [
+      runtimeChunk: "single",
-            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,
-                    },
-                    mangle: true, // Note `mangle.properties` is `false` by default.
-                    keep_classnames: false,
-                    keep_fnames: false,
-                }
-            })
-        ],
-        runtimeChunk: 'single',
       splitChunks: {
         cacheGroups: {
-                vendor: {
+          defaultVendors: {
             test: /[\\\/]node_modules[\\\/]/,
-                    name: 'vendors',
+            name: "chunk-vendors",
-                    chunks: 'all'
+            // chunks: 'all',
+            priority: -10,
+            chunks: "initial",
+          },
+          common: {
+            name: "chunk-common",
+            minChunks: 2,
+            priority: -20,
+            chunks: "initial",
+            reuseExistingChunk: true,
           },
           // styles: {
           //     name: 'styles',
@@ -164,14 +164,61 @@ module.exports = {
           //     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 webpack.DefinePlugin({ // Remove this plugin if you don't plan to define any global constants
+      new webpack.DefinePlugin({
+        // Remove this plugin if you don't plan to define any global constants
         ENVIRONMENT: JSON.stringify(process.env.NODE_ENV),
         CONSTANT_VALUE: JSON.stringify(process.env.CONSTANT_VALUE),
         MATOMO_SITE_ID: JSON.stringify(process.env.MATOMO_SITE_ID),
@@ -180,17 +227,18 @@ module.exports = {
         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,
 
-        new MiniCssExtractPlugin({ // Make sure MiniCssExtractPlugin instance is included in array before the PurifyCSSPlugin
+      new MiniCssExtractPlugin({
+        // Make sure MiniCssExtractPlugin instance is included in array before the PurifyCSSPlugin
         // Options similar to the same options in webpackOptions.output
         // both options are optional
         // filename: '[name].css',
         // chunkFilename: '[id].css',
-            filename: '[name].css',
+        filename: "[name].css",
-            chunkFilename: '[id].css',
+        chunkFilename: "[id].css",
       }),
 
       // new PurifyCSSPlugin({
@@ -198,33 +246,13 @@ module.exports = {
       //     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]
-    );
-}