From fef72d540237fe9903597b7582f275dc94a13146 Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Wed, 17 Mar 2021 09:22:12 +0100 Subject: [PATCH] - ShowModal.js component - question icon in LayerControl.js - other includes in main.js - support for decorators (.babelrc) - package updates (package.json) - trials with vuejs (webpack.config.js) --- .babelrc | 3 +- index.html | 21 ++- package-lock.json | 218 +++++++++++++++++++++----------- package.json | 1 + src/js/components/ShowModal.css | 60 +++++++++ src/js/components/ShowModal.js | 154 ++++++++++++++++++++++ src/js/controls/LayerControl.js | 35 +++-- src/js/main.js | 44 +++++-- webpack.config.js | 19 ++- 9 files changed, 452 insertions(+), 103 deletions(-) create mode 100644 src/js/components/ShowModal.css create mode 100644 src/js/components/ShowModal.js diff --git a/.babelrc b/.babelrc index b52650a..4d4ddcc 100644 --- a/.babelrc +++ b/.babelrc @@ -1,5 +1,6 @@ { - "plugins": [ + "plugins": [ + ["@babel/plugin-proposal-decorators", { "legacy": true }], ["@babel/plugin-proposal-class-properties", { "loose": true }], ["@babel/plugin-transform-runtime", { "regenerator": true }] ] diff --git a/index.html b/index.html index 2d72157..0e7ca83 100644 --- a/index.html +++ b/index.html @@ -78,9 +78,25 @@ -
- +
+
@@ -135,6 +151,7 @@ set visibility of coordinate grid +
diff --git a/package-lock.json b/package-lock.json index 8f77cbf..482b8c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "devDependencies": { "@babel/core": "^7.12.9", "@babel/plugin-proposal-class-properties": "^7.12.1", + "@babel/plugin-proposal-decorators": "^7.13.5", "@babel/plugin-transform-runtime": "^7.12.1", "@babel/preset-env": "^7.12.7", "babel-loader": "^8.2.1", @@ -48,9 +49,9 @@ } }, "node_modules/@babel/compat-data": { - "version": "7.13.8", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.13.8.tgz", - "integrity": "sha512-EaI33z19T4qN3xLXsGf48M2cDqa6ei9tPZlfLdb2HC+e/cFtREiRd8hdSqDbwdLB0/+gLwqJmCYASH0z2bUdog==", + "version": "7.13.11", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.13.11.tgz", + "integrity": "sha512-BwKEkO+2a67DcFeS3RLl0Z3Gs2OvdXewuWjc1Hfokhb5eQWP9YRYH1/+VrVZvql2CfjOiNGqSAFOYt4lsqTHzg==", "dev": true }, "node_modules/@babel/core": { @@ -130,9 +131,9 @@ } }, "node_modules/@babel/helper-create-class-features-plugin": { - "version": "7.13.10", - "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.10.tgz", - "integrity": "sha512-YV7r2YxdTUaw84EwNkyrRke/TJHR/UXGiyvACRqvdVJ2/syV2rQuJNnaRLSuYiop8cMRXOgseTGoJCWX0q2fFg==", + "version": "7.13.11", + "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.11.tgz", + "integrity": "sha512-ays0I7XYq9xbjCSvT+EvysLgfc3tOkwCULHjrnscGT3A9qD4sk3wXnJ3of0MAWsWGjdinFvajHU2smYuqXKMrw==", "dev": true, "dependencies": { "@babel/helper-function-name": "^7.12.13", @@ -363,9 +364,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.13.10", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.10.tgz", - "integrity": "sha512-0s7Mlrw9uTWkYua7xWr99Wpk2bnGa0ANleKfksYAES8LpWH4gW1OUr42vqKNf0us5UQNfru2wPqMqRITzq/SIQ==", + "version": "7.13.11", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.11.tgz", + "integrity": "sha512-PhuoqeHoO9fc4ffMEVk4qb/w/s2iOSWohvbHxLtxui0eBg3Lg5gN1U8wp1V1u61hOWkPQJJyJzGH6Y+grwkq8Q==", "dev": true, "bin": { "parser": "bin/babel-parser.js" @@ -401,6 +402,20 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-proposal-decorators": { + "version": "7.13.5", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.13.5.tgz", + "integrity": "sha512-i0GDfVNuoapwiheevUOuSW67mInqJ8qw7uWfpjNVeHMn143kXblEy/bmL9AdZ/0yf/4BMQeWXezK0tQIvNPqag==", + "dev": true, + "dependencies": { + "@babel/helper-create-class-features-plugin": "^7.13.0", + "@babel/helper-plugin-utils": "^7.13.0", + "@babel/plugin-syntax-decorators": "^7.12.13" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-proposal-dynamic-import": { "version": "7.13.8", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.13.8.tgz", @@ -575,6 +590,18 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-syntax-decorators": { + "version": "7.12.13", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.12.13.tgz", + "integrity": "sha512-Rw6aIXGuqDLr6/LoBBYE57nKOzQpz/aDkKlMqEwH+Vp0MXbG6H/TfRjaY343LKxzAKAMXIHsQ8JzaZKuDZ9MwA==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.12.13" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-syntax-dynamic-import": { "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz", @@ -1370,9 +1397,9 @@ "peer": true }, "node_modules/@types/node": { - "version": "14.14.33", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.33.tgz", - "integrity": "sha512-oJqcTrgPUF29oUP8AsUqbXGJNuPutsetaa9kTQAQce5Lx5dTYWV02ScBiT/k1BX/Z7pKeqedmvp39Wu4zR7N7g==", + "version": "14.14.35", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.35.tgz", + "integrity": "sha512-Lt+wj8NVPx0zUmUwumiVXapmaLUcAk3yPuHCFVXras9k5VT9TdhJqKqGVUQCD60OTMCl0qxJ57OiTL0Mic3Iag==", "dev": true }, "node_modules/@types/normalize-package-data": { @@ -1976,9 +2003,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001198", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001198.tgz", - "integrity": "sha512-r5GGgESqOPZzwvdLVER374FpQu2WluCF1Z2DSiFJ89KSmGjT0LVKjgv4NcAqHmGWF9ihNpqRI9KXO9Ex4sKsgA==", + "version": "1.0.30001202", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001202.tgz", + "integrity": "sha512-ZcijQNqrcF8JNLjzvEiXqX4JUYxoZa7Pvcsd9UD8Kz4TvhTonOSNRsK+qtvpVL4l6+T1Rh4LFtLfnNWg6BGWCQ==", "dev": true }, "node_modules/caseless": { @@ -2339,9 +2366,9 @@ } }, "node_modules/css-loader": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.1.2.tgz", - "integrity": "sha512-T7vTXHSx0KrVEg/xjcl7G01RcVXpcw4OELwDPvkr7izQNny85A84dK3dqrczuEfBcu7Yg7mdTjJLSTibRUoRZg==", + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.1.3.tgz", + "integrity": "sha512-CoPZvyh8sLiGARK3gqczpfdedbM74klGWurF2CsNZ2lhNaXdLIUks+3Mfax3WBeRuHoglU+m7KG/+7gY6G4aag==", "dev": true, "dependencies": { "camelcase": "^6.2.0", @@ -2382,6 +2409,18 @@ "node": ">=8.9.0" } }, + "node_modules/css-loader/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/css-loader/node_modules/schema-utils": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz", @@ -2578,9 +2617,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.3.685", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.685.tgz", - "integrity": "sha512-C3oFZNkJ8lz85ADqr3hzpjBc2ciejMRN2SCd/D0hwcqpr6MGxfdN/j89VN6l+ERTuCUvhg0VYsf40Q4qTz4bhQ==", + "version": "1.3.689", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.689.tgz", + "integrity": "sha512-WCn+ZaU3V8WttlLNSOGOAlR2XpxibGre7slwGrYBB6oTjYPgP29LNDGG6wLvLTMseLdE+G1vno7PfY7JyDV48g==", "dev": true }, "node_modules/emoji-regex": { @@ -3808,18 +3847,6 @@ "node": ">=0.10.0" } }, - "node_modules/lru-cache": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", - "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "dev": true, - "dependencies": { - "yallist": "^4.0.0" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/make-dir": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", @@ -4051,9 +4078,9 @@ "dev": true }, "node_modules/nanoid": { - "version": "3.1.20", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz", - "integrity": "sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==", + "version": "3.1.22", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz", + "integrity": "sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ==", "dev": true, "bin": { "nanoid": "bin/nanoid.cjs" @@ -4098,6 +4125,18 @@ "node": ">= 10.12.0" } }, + "node_modules/node-gyp/node_modules/lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/node-gyp/node_modules/semver": { "version": "7.3.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz", @@ -6178,9 +6217,9 @@ } }, "node_modules/webpack": { - "version": "5.24.4", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.24.4.tgz", - "integrity": "sha512-RXOdxF9hFFFhg47BryCgyFrEyyu7Y/75/uiI2DoUiTMqysK+WczVSTppvkR47oZcmI/DPaXCiCiaXBP8QjkNpA==", + "version": "5.26.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.26.0.tgz", + "integrity": "sha512-9kQATUOGQBkqzNKFmFON4KXZDsXnE7xk58tBxca8aCi+6/QhAbmWIvtGqBL66XIsBFpomFH0/0KyCaySo0ta2g==", "dev": true, "dependencies": { "@types/eslint-scope": "^3.7.0", @@ -6603,9 +6642,9 @@ } }, "@babel/compat-data": { - "version": "7.13.8", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.13.8.tgz", - "integrity": "sha512-EaI33z19T4qN3xLXsGf48M2cDqa6ei9tPZlfLdb2HC+e/cFtREiRd8hdSqDbwdLB0/+gLwqJmCYASH0z2bUdog==", + "version": "7.13.11", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.13.11.tgz", + "integrity": "sha512-BwKEkO+2a67DcFeS3RLl0Z3Gs2OvdXewuWjc1Hfokhb5eQWP9YRYH1/+VrVZvql2CfjOiNGqSAFOYt4lsqTHzg==", "dev": true }, "@babel/core": { @@ -6675,9 +6714,9 @@ } }, "@babel/helper-create-class-features-plugin": { - "version": "7.13.10", - "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.10.tgz", - "integrity": "sha512-YV7r2YxdTUaw84EwNkyrRke/TJHR/UXGiyvACRqvdVJ2/syV2rQuJNnaRLSuYiop8cMRXOgseTGoJCWX0q2fFg==", + "version": "7.13.11", + "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.11.tgz", + "integrity": "sha512-ays0I7XYq9xbjCSvT+EvysLgfc3tOkwCULHjrnscGT3A9qD4sk3wXnJ3of0MAWsWGjdinFvajHU2smYuqXKMrw==", "dev": true, "requires": { "@babel/helper-function-name": "^7.12.13", @@ -6899,9 +6938,9 @@ } }, "@babel/parser": { - "version": "7.13.10", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.10.tgz", - "integrity": "sha512-0s7Mlrw9uTWkYua7xWr99Wpk2bnGa0ANleKfksYAES8LpWH4gW1OUr42vqKNf0us5UQNfru2wPqMqRITzq/SIQ==", + "version": "7.13.11", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.11.tgz", + "integrity": "sha512-PhuoqeHoO9fc4ffMEVk4qb/w/s2iOSWohvbHxLtxui0eBg3Lg5gN1U8wp1V1u61hOWkPQJJyJzGH6Y+grwkq8Q==", "dev": true }, "@babel/plugin-proposal-async-generator-functions": { @@ -6925,6 +6964,17 @@ "@babel/helper-plugin-utils": "^7.13.0" } }, + "@babel/plugin-proposal-decorators": { + "version": "7.13.5", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.13.5.tgz", + "integrity": "sha512-i0GDfVNuoapwiheevUOuSW67mInqJ8qw7uWfpjNVeHMn143kXblEy/bmL9AdZ/0yf/4BMQeWXezK0tQIvNPqag==", + "dev": true, + "requires": { + "@babel/helper-create-class-features-plugin": "^7.13.0", + "@babel/helper-plugin-utils": "^7.13.0", + "@babel/plugin-syntax-decorators": "^7.12.13" + } + }, "@babel/plugin-proposal-dynamic-import": { "version": "7.13.8", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.13.8.tgz", @@ -7057,6 +7107,15 @@ "@babel/helper-plugin-utils": "^7.12.13" } }, + "@babel/plugin-syntax-decorators": { + "version": "7.12.13", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.12.13.tgz", + "integrity": "sha512-Rw6aIXGuqDLr6/LoBBYE57nKOzQpz/aDkKlMqEwH+Vp0MXbG6H/TfRjaY343LKxzAKAMXIHsQ8JzaZKuDZ9MwA==", + "dev": true, + "requires": { + "@babel/helper-plugin-utils": "^7.12.13" + } + }, "@babel/plugin-syntax-dynamic-import": { "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz", @@ -7701,9 +7760,9 @@ "peer": true }, "@types/node": { - "version": "14.14.33", - "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.33.tgz", - "integrity": "sha512-oJqcTrgPUF29oUP8AsUqbXGJNuPutsetaa9kTQAQce5Lx5dTYWV02ScBiT/k1BX/Z7pKeqedmvp39Wu4zR7N7g==", + "version": "14.14.35", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.35.tgz", + "integrity": "sha512-Lt+wj8NVPx0zUmUwumiVXapmaLUcAk3yPuHCFVXras9k5VT9TdhJqKqGVUQCD60OTMCl0qxJ57OiTL0Mic3Iag==", "dev": true }, "@types/normalize-package-data": { @@ -8200,9 +8259,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001198", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001198.tgz", - "integrity": "sha512-r5GGgESqOPZzwvdLVER374FpQu2WluCF1Z2DSiFJ89KSmGjT0LVKjgv4NcAqHmGWF9ihNpqRI9KXO9Ex4sKsgA==", + "version": "1.0.30001202", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001202.tgz", + "integrity": "sha512-ZcijQNqrcF8JNLjzvEiXqX4JUYxoZa7Pvcsd9UD8Kz4TvhTonOSNRsK+qtvpVL4l6+T1Rh4LFtLfnNWg6BGWCQ==", "dev": true }, "caseless": { @@ -8506,9 +8565,9 @@ } }, "css-loader": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.1.2.tgz", - "integrity": "sha512-T7vTXHSx0KrVEg/xjcl7G01RcVXpcw4OELwDPvkr7izQNny85A84dK3dqrczuEfBcu7Yg7mdTjJLSTibRUoRZg==", + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.1.3.tgz", + "integrity": "sha512-CoPZvyh8sLiGARK3gqczpfdedbM74klGWurF2CsNZ2lhNaXdLIUks+3Mfax3WBeRuHoglU+m7KG/+7gY6G4aag==", "dev": true, "requires": { "camelcase": "^6.2.0", @@ -8536,6 +8595,15 @@ "json5": "^2.1.2" } }, + "lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "requires": { + "yallist": "^4.0.0" + } + }, "schema-utils": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz", @@ -8667,9 +8735,9 @@ } }, "electron-to-chromium": { - "version": "1.3.685", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.685.tgz", - "integrity": "sha512-C3oFZNkJ8lz85ADqr3hzpjBc2ciejMRN2SCd/D0hwcqpr6MGxfdN/j89VN6l+ERTuCUvhg0VYsf40Q4qTz4bhQ==", + "version": "1.3.689", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.689.tgz", + "integrity": "sha512-WCn+ZaU3V8WttlLNSOGOAlR2XpxibGre7slwGrYBB6oTjYPgP29LNDGG6wLvLTMseLdE+G1vno7PfY7JyDV48g==", "dev": true }, "emoji-regex": { @@ -9633,15 +9701,6 @@ "signal-exit": "^3.0.0" } }, - "lru-cache": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", - "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "dev": true, - "requires": { - "yallist": "^4.0.0" - } - }, "make-dir": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", @@ -9816,9 +9875,9 @@ "dev": true }, "nanoid": { - "version": "3.1.20", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz", - "integrity": "sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==", + "version": "3.1.22", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz", + "integrity": "sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ==", "dev": true }, "neo-async": { @@ -9851,6 +9910,15 @@ "which": "^2.0.2" }, "dependencies": { + "lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "requires": { + "yallist": "^4.0.0" + } + }, "semver": { "version": "7.3.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz", @@ -11440,9 +11508,9 @@ } }, "webpack": { - "version": "5.24.4", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.24.4.tgz", - "integrity": "sha512-RXOdxF9hFFFhg47BryCgyFrEyyu7Y/75/uiI2DoUiTMqysK+WczVSTppvkR47oZcmI/DPaXCiCiaXBP8QjkNpA==", + "version": "5.26.0", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.26.0.tgz", + "integrity": "sha512-9kQATUOGQBkqzNKFmFON4KXZDsXnE7xk58tBxca8aCi+6/QhAbmWIvtGqBL66XIsBFpomFH0/0KyCaySo0ta2g==", "dev": true, "requires": { "@types/eslint-scope": "^3.7.0", diff --git a/package.json b/package.json index 864e88c..b0a7be4 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "devDependencies": { "@babel/core": "^7.12.9", "@babel/plugin-proposal-class-properties": "^7.12.1", + "@babel/plugin-proposal-decorators": "^7.13.5", "@babel/plugin-transform-runtime": "^7.12.1", "@babel/preset-env": "^7.12.7", "babel-loader": "^8.2.1", diff --git a/src/js/components/ShowModal.css b/src/js/components/ShowModal.css new file mode 100644 index 0000000..413270a --- /dev/null +++ b/src/js/components/ShowModal.css @@ -0,0 +1,60 @@ +.modal-backdrop { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(0, 0, 0, 0.3); + display: flex; + justify-content: center; + align-items: center; + z-index: 1001; +} + +.modal { + background: #ffffff; + box-shadow: 2px 2px 20px 1px; + overflow-x: auto; + display: flex; + flex-direction: column; + width: 80%; +} + +.modal-header, +.modal-footer { + padding: 15px; + display: flex; +} + +.modal-header { + border-bottom: 1px solid #eeeeee; + color: #4aae9b; + justify-content: space-between; +} + +.modal-footer { + border-top: 1px solid #eeeeee; + justify-content: flex-end; +} + +.modal-body { + position: relative; + padding: 20px 10px; +} + +.btn-close { + border: none; + font-size: 20px; + padding: 20px; + cursor: pointer; + font-weight: bold; + color: #4aae9b; + background: transparent; +} + +.btn-green { + color: white; + background: #4aae9b; + border: 1px solid #4aae9b; + border-radius: 2px; +} \ No newline at end of file diff --git a/src/js/components/ShowModal.js b/src/js/components/ShowModal.js new file mode 100644 index 0000000..15425e8 --- /dev/null +++ b/src/js/components/ShowModal.js @@ -0,0 +1,154 @@ +// import { Component, Vue } from "vue-property-decorator"; +import * as dom from "../core/domUtil"; +import * as domEvent from "../core/domEvent"; +import * as util from "../core/utilities"; + +import "./ShowModal.css"; + +// @Component({}) +export default class Modal { + defaultTitle = "3DViewer"; + declaredClass = "MobileDialog"; + options = {}; + + constructor(title, parentContainer, options = {}) { + // super(options); + util.setOptions(this, options); + + this.title = title ? title : this.defaultTitle; + this.options = options || this.default; + + this.init(parentContainer); + } + + init(parentContainer) { + let className = "gba-basemap-control"; + let container; + let toggleable = false; + + if (this.options.position) { + container = this._container = dom.createDom("div", { "class": className }); + toggleable = true; + + } else { + container = this._container = parentContainer; + // dom.addClass(container, className); + toggleable = false; + + } + let dialogHtml = ` +
+ +
+ `; + + + this.domNode = dom.createDom("div", { class: "popup" }, container); + this.dialogDiv = dom.createDom("div", { class: this.options.klass + " fm_overlay hide", innerHTML: dialogHtml }, container); + this.popupcontent = dom.byId("modalDescription"); + //additional info div + this.pageinfo = dom.byId("additionalDescription"); + let popup_close = dom.byId("btn-close"); + + domEvent.on(popup_close, 'click', domEvent.preventDefault); + domEvent.on(popup_close, 'click', domEvent.stopPropagation); + domEvent.on(popup_close, 'click', this.hide, this); + } + + hide(e) { + this.dialogDiv.classList.add('hide'); + this.dialogDiv.classList.remove('show'); + } + + show(html) { + let isHelp = html === undefined ? true : false; + + if (html === undefined) { + html = this._help(); + } + + if (html instanceof HTMLElement) { + this.popupcontent.innerHTML = ""; + this.popupcontent.appendChild(html); + } + else { + this.popupcontent.innerHTML = html; + } + + // this.domNode.getElementsByClassName("popuptitle")[0].innerHTML = title || this.title; + + if (!isHelp) { + //document.getElementById("pageinfo").style.display = "none"; + this.pageinfo.style.display = "none"; + } + else { + this.pageinfo.innerHTML = ` +
+ This project is using the following libraries, fonts & styles: + +
`; + this.pageinfo.style.display = "block"; + } + + this.dialogDiv.classList.add('show'); + this.dialogDiv.classList.remove('hide'); + } + + _help() { + let html = ""; + //var imagePath = $UrlHelper.resolve('~') + "content/img/"; + let imagePath = "images/map/"; + let list = '
  • Rotate 3D Model
    • ' + + '
  • Zoom 3D Model
    • ' + + '
  • Pan 3D Model
'; + html += list; + return html; + } +} + + + + diff --git a/src/js/controls/LayerControl.js b/src/js/controls/LayerControl.js index 82356b1..5f418ec 100644 --- a/src/js/controls/LayerControl.js +++ b/src/js/controls/LayerControl.js @@ -54,19 +54,20 @@ export class LayerControl extends Control { if (this.options.parentDiv) { container = this._container = document.getElementById(this.options.parentDiv); dom.addClass(container, className); - toggleable = false; + toggleable = false; } else { container = this._container = dom.createDom("div", { "class": className }); toggleable = true; } - + domEvent.on(container, 'click', domEvent.stopPropagation); - let layerContainer = this._layerContainer = dom.createDom('div', { "class": className + '-container' }, container); + + let layerContainer = this._layerContainer = dom.createDom('div', { "class": className + '-container' }, container); if (this.options.collapsed && toggleable == true) { domEvent.on(container, 'mouseenter', this._expand, this); @@ -89,6 +90,8 @@ export class LayerControl extends Control { this._updateLayerList(); + + if (toggleable == true) { return container; } @@ -102,7 +105,7 @@ export class LayerControl extends Control { name: name, overlay: overlay }; - layer.addListener('visibility-change', this._updateLayerList, this); + layer.addListener('visibility-change', this._updateLayerList, this); } _updateLayerList() { @@ -115,7 +118,7 @@ export class LayerControl extends Control { let baseLayersPresent = false; let overlaysPresent = false; - + for (let i in this._layers) { let obj = this._layers[i]; @@ -127,7 +130,7 @@ export class LayerControl extends Control { this._separator.style.display = overlaysPresent && baseLayersPresent ? '' : 'none'; } - _addLegendEntry (obj) { + _addLegendEntry(obj) { var checked = obj.layer.visible;//this._map.hasLayer(obj.layer); var container = obj.overlay ? this._overlaysList : this._baseLayersList; //container.appendChild(legendEntryRow); @@ -135,13 +138,13 @@ export class LayerControl extends Control { var legendEntryRow = dom.createDom("tr", { style: "display: row-table; height: 20px;" }, container); //domStyle.set(legendEntryRow, 'display', rowVisibility); //dom.setProperties(legendEntryRow, { style: "display: row-table;" }); - - var legendDataCell = dom.createDom("td", { "style": "width:25px;vertical-align: top;"}, legendEntryRow); - let legendDiv = dom.createDom("div", { "style": "width:20px; height:20px;"}, legendDataCell); + + var legendDataCell = dom.createDom("td", { "style": "width:25px;vertical-align: top;" }, legendEntryRow); + let legendDiv = dom.createDom("div", { "style": "width:20px; height:20px;" }, legendDataCell); legendDiv.style.backgroundColor = "#" + obj.layer.color; var chkDataCell = dom.createDom("td", { "class": "checkboxFive" }, legendEntryRow); - var lblDataCell = dom.createDom("td", {"style": "vertical-align: top;"}, legendEntryRow); + var lblDataCell = dom.createDom("td", { "style": "vertical-align: top;" }, legendEntryRow); var input = dom.createDom("input", { type: 'checkbox', checked: checked, id: util.stamp(obj.layer) }, chkDataCell); @@ -149,13 +152,17 @@ export class LayerControl extends Control { domEvent.on(input, 'click', function () { this._onInputClick(util.stamp(obj.layer)); }, this); dom.createDom("label", { for: util.stamp(obj.layer) }, chkDataCell); - dom.createDom("span", { innerHTML: " " + obj.name }, lblDataCell); + dom.createDom("span", { innerHTML: " " + obj.name + " " }, lblDataCell); //legend entry label // var _table = dom.createDom("table", { width: "95%", dir: "ltr" }, lblDataCell); // var _tbody = dom.createDom("tbody", {}, _table); // var _tr = dom.createDom("tr", {}, _tbody); // var _td = dom.createDom("td", { innerHTML: obj.name, align: this.alignRight ? "right" : "left" }, _tr); + dom.createDom("i", { class: "fas fa-info-circle" }, lblDataCell); + + + @@ -163,11 +170,11 @@ export class LayerControl extends Control { } - _onInputClick (layerId) { - let inputs = this._layerContainer.getElementsByTagName('input'); + _onInputClick(layerId) { + let inputs = this._layerContainer.getElementsByTagName('input'); this._handlingClick = true; - for (let i = 0; i < inputs.length; i++) { + for (let i = 0; i < inputs.length; i++) { let input = inputs[i]; if (input.type == 'checkbox' && layerId === input.layerId) { let obj = this._layers[input.layerId]; diff --git a/src/js/main.js b/src/js/main.js index e92f746..c936294 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -5,7 +5,6 @@ import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera'; import { Scene } from 'three/src/scenes/Scene'; import { Vector3 } from 'three/src/math/Vector3'; import { GridLayer } from './layer/GridLayer'; -// import { BoxLayer } from './layer/BoxLayer'; import { DemLayer } from './layer/DemLayer'; import { Map } from './core/Map'; import * as domEvent from './core/domEvent'; @@ -21,8 +20,8 @@ import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial'; import * as util from './core/utilities'; import * as browser from './core/browser'; import * as domUtil from './core/domUtil'; -import { MobileDialog } from "./controls/MobileDialog"; import { Picking } from './clip/Picking'; +import Modal from './components/ShowModal'; import { Selection } from './clip/Selection'; import _ from "lodash"; @@ -61,7 +60,9 @@ class Application { this.navigation = document.getElementsByClassName('navigation')[0]; // this.addEventListeners(); - this.dialog = new MobileDialog("Help", container, { klass: "fm_about" }); + this.dialog = new Modal("Help", container, { klass: "fm_about" }); + + // this.dialog = new MobileDialog("Help", container, { klass: "fm_about" }); this.aboutIcon = document.querySelector('#menu-about-icon'); @@ -181,21 +182,21 @@ class Application { this.mapTitle = document.querySelector('#map-title'); this.mapTitle.innerHTML += map.title; map.on('ready', () => { - this.selection.setUniforms(); - this.animate(); + this.selection.setUniforms(); + this.animate(); }, this); this.selection = new Selection( // new Vector3(-7, -14, -14), // new Vector3(14, 9, 3) - { name: 'Slicing Box'}, + { name: 'Slicing Box' }, new Vector3(x.min, y.min, z.min), - new Vector3(x.max, y.max, z.max) + new Vector3(x.max, y.max, z.max) ); this.map.addLayer(this.selection); new Picking(size, center, this); - + // let boxLayer = new BoxLayer({ // width: 10000, height: 10000, depth: 10000, name: 'center-box', color: 800080 , center: center @@ -259,7 +260,7 @@ class Application { //slice on x and y axes: // this.slicer = new SlicerControl({ parentDiv: 'slicer-control' }).addTo(this.map); - + // this.capsScene.add(this.selection.boxMesh); // this.scene.add(this.selection.displayMeshes); // this.scene.add(this.selection.touchMeshes); @@ -418,7 +419,7 @@ class Application { let chkGrid = document.getElementById("chkGrid"); domEvent.on(chkGrid, 'click', function (e) { this.gridlayer.toggle(); - }, app); + }, this); } @@ -519,3 +520,26 @@ class Application { let container = document.getElementById("webgl"); let app = new Application(container); app.build(); + +// new Vue({ +// el: '#app', +// components: { Modal }, +// data() { +// return { +// isModalVisible: false, +// } +// }, +// mounted() { +// let container = document.getElementById("webgl"); +// let app = new Application(container); +// app.build(); +// }, +// methods: { +// showModal() { +// this.isModalVisible = true; +// }, +// closeModal() { +// this.isModalVisible = false; +// }, +// } +// }); diff --git a/webpack.config.js b/webpack.config.js index 3666c6e..d50834b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -4,6 +4,7 @@ const webpack = require('webpack'); //e.g. for iusing DefinePlugin // const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +// const { VueLoaderPlugin } = require('vue-loader'); /** * flag Used to check if the environment is production or not @@ -26,6 +27,12 @@ module.exports = { //filename: fileNamePrefix + '[name].js', publicPath: '/dist/', }, + // resolve: { + // alias: { + // 'vue$': 'vue/dist/vue.esm.js' + // }, + // extensions: ['*', '.js', '.vue', '.json'] + // }, module: { rules: [ { @@ -49,6 +56,10 @@ module.exports = { // 'img-loader' // ], // }, + // { + // test: /\.vue$/, + // loader: 'vue-loader' + // }, { test: /\.js$/, exclude: /(node_modules|bower_components)/, @@ -71,6 +82,12 @@ module.exports = { // hmr: process.env.NODE_ENV === 'development', // }, }, + // { + // loader: "vue-style-loader", + // options: { + // sourceMap: true + // } + // }, // Translates CSS into CommonJS { loader: "css-loader", @@ -122,8 +139,8 @@ module.exports = { }, plugins: [ + // new VueLoaderPlugin(), - 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),