- add BoreholePopup into analysis tab

- add click propgations for several ui controls
- begin with typescript modules via babel 7
- add babel typescript module
- npm updates
This commit is contained in:
Arno Kaimbacher 2021-04-15 18:06:58 +02:00
parent c9bdf02ead
commit 4f34cc6ab2
18 changed files with 442 additions and 322 deletions

View File

@ -1,7 +1,12 @@
{
"presets": [
"@babel/preset-env",
"@babel/preset-typescript"
],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }],
["@babel/plugin-transform-runtime", { "regenerator": true }]
["@babel/plugin-transform-runtime", { "regenerator": true }],
"@babel/proposal-object-rest-spread"
]
}

View File

@ -69,6 +69,9 @@
<a id="menu-about-icon" class="navbar-item">
About
</a>
<a id="menu-dowload-button" class="navbar-item" type="submit" download="file.png">
Download Map
</a>
<a class="navbar-item">
Contact
</a>
@ -151,8 +154,7 @@
</div>
<div class="tab-pane content-file" id="two">
<h5 class="section-heading">Download Map Image</h5>
<!-- <h5 class="section-heading">Download Map Image</h5>
<a class="button is-light" type="submit" id="btnDownloadCanvasImage"
download="file.png">Download</a>
@ -161,7 +163,7 @@
<div class="feature-wrapper feature-slicer inline-block">
<div id="slicer-control"></div>
</div>
</div>
</div> -->
<section class="panel-section section-functions section">
<h5>Functions</h5>
@ -190,6 +192,14 @@
</div>
</div>
</section>
<section class="panel-section section-functions section">
<div class="columns">
<div class="column is-12">
<div id="gba-borehole-control-parent-id"></div>
</div>
</div>
</section>
</div>
<div class="tab-pane content-data" id="three">

145
package-lock.json generated
View File

@ -20,8 +20,10 @@
"@babel/core": "^7.12.9",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-decorators": "^7.13.5",
"@babel/plugin-proposal-object-rest-spread": "^7.13.8",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/preset-env": "^7.12.7",
"@babel/preset-typescript": "^7.13.0",
"babel-loader": "^8.2.1",
"concurrently": "^6.0.0",
"css-loader": "^5.0.1",
@ -735,6 +737,18 @@
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/plugin-syntax-typescript": {
"version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.12.13.tgz",
"integrity": "sha512-cHP3u1JiUiG2LFDKbXnwVad81GvfyIOmCD6HIEId6ojrY0Drfy2q1jw7BwN7dE84+kTnBjLkXoL3IEy/3JPu2w==",
"dev": true,
"dependencies": {
"@babel/helper-plugin-utils": "^7.12.13"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/plugin-transform-arrow-functions": {
"version": "7.13.0",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.13.0.tgz",
@ -1135,6 +1149,20 @@
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/plugin-transform-typescript": {
"version": "7.13.0",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.13.0.tgz",
"integrity": "sha512-elQEwluzaU8R8dbVuW2Q2Y8Nznf7hnjM7+DSCd14Lo5fF63C9qNLbwZYbmZrtV9/ySpSUpkRpQXvJb6xyu4hCQ==",
"dev": true,
"dependencies": {
"@babel/helper-create-class-features-plugin": "^7.13.0",
"@babel/helper-plugin-utils": "^7.13.0",
"@babel/plugin-syntax-typescript": "^7.12.13"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/plugin-transform-unicode-escapes": {
"version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.12.13.tgz",
@ -1256,6 +1284,20 @@
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/preset-typescript": {
"version": "7.13.0",
"resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.13.0.tgz",
"integrity": "sha512-LXJwxrHy0N3f6gIJlYbLta1D9BDtHpQeqwzM0LIfjDlr6UE/D5Mc7W4iDiQzaE+ks0sTjT26ArcHWnJVt0QiHw==",
"dev": true,
"dependencies": {
"@babel/helper-plugin-utils": "^7.13.0",
"@babel/helper-validator-option": "^7.12.17",
"@babel/plugin-transform-typescript": "^7.13.0"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/runtime": {
"version": "7.13.10",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz",
@ -1360,9 +1402,9 @@
}
},
"node_modules/@types/eslint": {
"version": "7.2.9",
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.9.tgz",
"integrity": "sha512-SdAAXZNvWfhtf3X3y1cbbCZhP3xyPh7mfTvzV6CgfWc/ZhiHpyr9bVroe2/RCHIf7gczaNcprhaBLsx0CCJHQA==",
"version": "7.2.10",
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.10.tgz",
"integrity": "sha512-kUEPnMKrqbtpCq/KTaGFFKAcz6Ethm2EjCoKIDaCmfRBWLbFuTcOJfTlorwbnboXBzahqWLgUp1BQeKHiJzPUQ==",
"dev": true,
"dependencies": {
"@types/estree": "*",
@ -1410,9 +1452,9 @@
"peer": true
},
"node_modules/@types/node": {
"version": "14.14.37",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.37.tgz",
"integrity": "sha512-XYmBiy+ohOR4Lh5jE379fV2IU+6Jn4g5qASinhitfyO71b/sCo6MKsMLF5tc7Zf2CE8hViVQyYSobJNke8OvUw==",
"version": "14.14.39",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.39.tgz",
"integrity": "sha512-Qipn7rfTxGEDqZiezH+wxqWYR8vcXq5LRpZrETD19Gs4o8LbklbmqotSUsMU+s5G3PJwMRDfNEYoxrcBwIxOuw==",
"dev": true
},
"node_modules/@types/normalize-package-data": {
@ -2513,9 +2555,9 @@
}
},
"node_modules/date-fns": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.20.3.tgz",
"integrity": "sha512-BbiJSlfmr1Fnfi1OHY8arklKdwtZ9n3NkjCeK8G9gtEe0ZSUwJuwHc6gYBl0uoC0Oa5RdpJV1gBBdXcZi8Efdw==",
"version": "2.21.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.21.0.tgz",
"integrity": "sha512-lbAFpaKz7QuVxm6m1rmioh4BB2gmLx1r1JMYXU2A/ufT5ly4zEG7HYH4fvS/QfbdyC5rkYyiS30mYz4Q7XCO+w==",
"dev": true,
"engines": {
"node": ">=0.11"
@ -2620,9 +2662,9 @@
}
},
"node_modules/electron-to-chromium": {
"version": "1.3.715",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.715.tgz",
"integrity": "sha512-VCWxo9RqTYhcCsHtG+l0TEOS6H5QmO1JyVCQB9nv8fllmAzj1VcCYH3qBCXP75/En6FeoepefnogLPE+5W7OiQ==",
"version": "1.3.717",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.717.tgz",
"integrity": "sha512-OfzVPIqD1MkJ7fX+yTl2nKyOE4FReeVfMCzzxQS+Kp43hZYwHwThlGP+EGIZRXJsxCM7dqo8Y65NOX/HP12iXQ==",
"dev": true
},
"node_modules/emoji-regex": {
@ -3133,9 +3175,9 @@
}
},
"node_modules/get-stream": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.0.tgz",
"integrity": "sha512-A1B3Bh1UmL0bidM/YX2NsCOTnGJePL9rO/M+Mw3m9f2gUpfokS0hi5Eah0WSUEWZdZhIZtMjkIYS7mDfOqNHbg==",
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
"dev": true,
"engines": {
"node": ">=10"
@ -6220,9 +6262,9 @@
}
},
"node_modules/webpack": {
"version": "5.32.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.32.0.tgz",
"integrity": "sha512-jB9PrNMFnPRiZGnm/j3qfNqJmP3ViRzkuQMIf8za0dgOYvSLi/cgA+UEEGvik9EQHX1KYyGng5PgBTTzGrH9xg==",
"version": "5.33.2",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.33.2.tgz",
"integrity": "sha512-X4b7F1sYBmJx8mlh2B7mV5szEkE0jYNJ2y3akgAP0ERi0vLCG1VvdsIxt8lFd4st6SUy0lf7W0CCQS566MBpJg==",
"dev": true,
"dependencies": {
"@types/eslint-scope": "^3.7.0",
@ -7215,6 +7257,15 @@
"@babel/helper-plugin-utils": "^7.12.13"
}
},
"@babel/plugin-syntax-typescript": {
"version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.12.13.tgz",
"integrity": "sha512-cHP3u1JiUiG2LFDKbXnwVad81GvfyIOmCD6HIEId6ojrY0Drfy2q1jw7BwN7dE84+kTnBjLkXoL3IEy/3JPu2w==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.12.13"
}
},
"@babel/plugin-transform-arrow-functions": {
"version": "7.13.0",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.13.0.tgz",
@ -7522,6 +7573,17 @@
"@babel/helper-plugin-utils": "^7.12.13"
}
},
"@babel/plugin-transform-typescript": {
"version": "7.13.0",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.13.0.tgz",
"integrity": "sha512-elQEwluzaU8R8dbVuW2Q2Y8Nznf7hnjM7+DSCd14Lo5fF63C9qNLbwZYbmZrtV9/ySpSUpkRpQXvJb6xyu4hCQ==",
"dev": true,
"requires": {
"@babel/helper-create-class-features-plugin": "^7.13.0",
"@babel/helper-plugin-utils": "^7.13.0",
"@babel/plugin-syntax-typescript": "^7.12.13"
}
},
"@babel/plugin-transform-unicode-escapes": {
"version": "7.12.13",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.12.13.tgz",
@ -7631,6 +7693,17 @@
"esutils": "^2.0.2"
}
},
"@babel/preset-typescript": {
"version": "7.13.0",
"resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.13.0.tgz",
"integrity": "sha512-LXJwxrHy0N3f6gIJlYbLta1D9BDtHpQeqwzM0LIfjDlr6UE/D5Mc7W4iDiQzaE+ks0sTjT26ArcHWnJVt0QiHw==",
"dev": true,
"requires": {
"@babel/helper-plugin-utils": "^7.13.0",
"@babel/helper-validator-option": "^7.12.17",
"@babel/plugin-transform-typescript": "^7.13.0"
}
},
"@babel/runtime": {
"version": "7.13.10",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz",
@ -7719,9 +7792,9 @@
}
},
"@types/eslint": {
"version": "7.2.9",
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.9.tgz",
"integrity": "sha512-SdAAXZNvWfhtf3X3y1cbbCZhP3xyPh7mfTvzV6CgfWc/ZhiHpyr9bVroe2/RCHIf7gczaNcprhaBLsx0CCJHQA==",
"version": "7.2.10",
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.10.tgz",
"integrity": "sha512-kUEPnMKrqbtpCq/KTaGFFKAcz6Ethm2EjCoKIDaCmfRBWLbFuTcOJfTlorwbnboXBzahqWLgUp1BQeKHiJzPUQ==",
"dev": true,
"requires": {
"@types/estree": "*",
@ -7769,9 +7842,9 @@
"peer": true
},
"@types/node": {
"version": "14.14.37",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.37.tgz",
"integrity": "sha512-XYmBiy+ohOR4Lh5jE379fV2IU+6Jn4g5qASinhitfyO71b/sCo6MKsMLF5tc7Zf2CE8hViVQyYSobJNke8OvUw==",
"version": "14.14.39",
"resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.39.tgz",
"integrity": "sha512-Qipn7rfTxGEDqZiezH+wxqWYR8vcXq5LRpZrETD19Gs4o8LbklbmqotSUsMU+s5G3PJwMRDfNEYoxrcBwIxOuw==",
"dev": true
},
"@types/normalize-package-data": {
@ -8663,9 +8736,9 @@
}
},
"date-fns": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.20.3.tgz",
"integrity": "sha512-BbiJSlfmr1Fnfi1OHY8arklKdwtZ9n3NkjCeK8G9gtEe0ZSUwJuwHc6gYBl0uoC0Oa5RdpJV1gBBdXcZi8Efdw==",
"version": "2.21.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.21.0.tgz",
"integrity": "sha512-lbAFpaKz7QuVxm6m1rmioh4BB2gmLx1r1JMYXU2A/ufT5ly4zEG7HYH4fvS/QfbdyC5rkYyiS30mYz4Q7XCO+w==",
"dev": true
},
"debug": {
@ -8737,9 +8810,9 @@
}
},
"electron-to-chromium": {
"version": "1.3.715",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.715.tgz",
"integrity": "sha512-VCWxo9RqTYhcCsHtG+l0TEOS6H5QmO1JyVCQB9nv8fllmAzj1VcCYH3qBCXP75/En6FeoepefnogLPE+5W7OiQ==",
"version": "1.3.717",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.717.tgz",
"integrity": "sha512-OfzVPIqD1MkJ7fX+yTl2nKyOE4FReeVfMCzzxQS+Kp43hZYwHwThlGP+EGIZRXJsxCM7dqo8Y65NOX/HP12iXQ==",
"dev": true
},
"emoji-regex": {
@ -9143,9 +9216,9 @@
"dev": true
},
"get-stream": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.0.tgz",
"integrity": "sha512-A1B3Bh1UmL0bidM/YX2NsCOTnGJePL9rO/M+Mw3m9f2gUpfokS0hi5Eah0WSUEWZdZhIZtMjkIYS7mDfOqNHbg==",
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
"integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
"dev": true
},
"getpass": {
@ -11510,9 +11583,9 @@
}
},
"webpack": {
"version": "5.32.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.32.0.tgz",
"integrity": "sha512-jB9PrNMFnPRiZGnm/j3qfNqJmP3ViRzkuQMIf8za0dgOYvSLi/cgA+UEEGvik9EQHX1KYyGng5PgBTTzGrH9xg==",
"version": "5.33.2",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.33.2.tgz",
"integrity": "sha512-X4b7F1sYBmJx8mlh2B7mV5szEkE0jYNJ2y3akgAP0ERi0vLCG1VvdsIxt8lFd4st6SUy0lf7W0CCQS566MBpJg==",
"dev": true,
"requires": {
"@types/eslint-scope": "^3.7.0",

View File

@ -17,8 +17,10 @@
"@babel/core": "^7.12.9",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-decorators": "^7.13.5",
"@babel/plugin-proposal-object-rest-spread": "^7.13.8",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/preset-env": "^7.12.7",
"@babel/preset-typescript": "^7.13.0",
"babel-loader": "^8.2.1",
"concurrently": "^6.0.0",
"css-loader": "^5.0.1",

View File

@ -31,6 +31,7 @@ $family-sans-serif: "Nunito", sans-serif;
// 3. Set the derived variables
$grey-dark: $brown;
$is-dark: $mouse-grey;
// $grey-light: $beige-light;
// $primary: $purple;
// $link: $mouse-grey;
@ -283,6 +284,9 @@ ul {
.tab-content {
padding:1em;
}
.tab-pane section {
padding: 0;
}
// 4. Import the rest of bulma, only what you need from Bulma
// @import "../../node_modules/bulma/sass/utilities/_all.sass";

View File

@ -15,33 +15,6 @@ export class BasemapControl extends Control {
util.setOptions(this, options);
}
// onAdd(map) {
// this._mainMap = map;
// let basemaps = this.basemaps = map.basemaps;
// let className = "gba-basemap-control";
// let container;
// let toggleable = false;
// if (this.options.parentDiv) {
// container = this._container = document.getElementById(this.options.parentDiv);
// dom.addClass(container, className);
// toggleable = false;
// } else {
// container = this._container = dom.createDom("div", { "class": className });
// toggleable = true;
// }
// domEvent.on(container, 'click', domEvent.stopPropagation);
// this._initBasemapHtml(basemaps.services);
// if (!this.options.parentDiv) {
// return container;
// }
// }
onAdd(map) {
let container = this._initLayout(map);
this._map = map;
@ -58,26 +31,23 @@ export class BasemapControl extends Control {
link.href = '#';
link.title = 'Base Layers';
// let popupClassName = "gba-basemap-control";
// let dialogContainer = dom.createDom("div", { "class": popupClassName, "id": 'basemap-control-parent' });
// domEvent.on(dialogContainer, 'click', domEvent.stopPropagation);
// let dialog = this.dialog = new MobileDialog();
this.dialog = new MobileDialog("Baselayer", this._map.container, { klass: "fm_basemap_list", parentDiv: 'basemap-control-parent' });//.addTo(this._map);
let basemaps = this.basemaps = this._map.basemaps;
let basemaps = this.basemaps = this._map.basemaps;
let html = this._initBasemapHtml(basemaps.services);
// domEvent.on(link, 'click', this.expand, this);
domEvent.on(link, 'click', domEvent.stopPropagation);
domEvent.on(link, 'mousedown', domEvent.stopPropagation);
domEvent.on(link, 'dblclick', domEvent.stopPropagation);
domEvent.on(link, 'click', domEvent.preventDefault);
domEvent.on(link, 'click', () => {
this.dialog.show(html);
}, this);
this.dialog.show(html);
}, this);
return container;
}
_initBasemapHtml(basemapServices) {
let buttonDiv = dom.createDom('div');

View File

@ -8,6 +8,9 @@ import './BoreholeControl.css';
export class BoreholeControl extends Control {
options = {
position: 'topright',
};
onAdd (map) {
this.map = map;

View File

@ -1,12 +1,12 @@
.gba-control-borehole {
.gba-borehole-popup {
cursor: pointer;
}
.gba-control-borehole .maximize.hidden {
/* .gba-borehole-popup .maximize.hidden {
display: none;
}
.gba-control-borehole .maximize {
.gba-borehole-popup .maximize {
color: rgb(220, 220, 220);
background: gray;
border: 1px solid #000000;
@ -18,10 +18,10 @@
text-align: center;
float: left;
cursor: pointer;
}
} */
/*side-menu zumachen*/
.gba-menu .close {
.gba-borehole-menu .close {
color: rgb(220, 220, 220);
background: gray;
border: 1px solid #000000;
@ -34,54 +34,49 @@
float: right;
cursor: pointer;
}
.gba-close-icon {
/* .gba-close-icon {
background-repeat: no-repeat;
/* background-image: url("img/16.png"); */
background-position: -52px -9px;
display: inline;
padding: 0 10px;
}
} */
.toolbox {
list-style-image: none;
list-style-position: inside;
list-style-type: none;
}
.gba-menu .toolbox li {
.gba-borehole-menu .toolbox li {
color: #464646;
line-height: 46px;
cursor: pointer;
float: right;
padding: 0 5px;
}
.gba-menu .body {
.gba-borehole-menu .body {
clear: both;
height: calc(100% - 46px);
}
.gba-menu {
/*width: 400px;*/
position: absolute;
.gba-borehole-menu {
/* position: absolute;
top: 0;
left: 0;
/*bottom: 0;*/
/*right: 0;*/
padding: 0 20px 2px 20px;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
/*display: none;*/
border-left: 1px solid #ddd; */
overflow-y: auto;
z-index: 1000;
background-color: #fff;
opacity: 0.93;
}
.gba-menu::-webkit-scrollbar {
.gba-borehole-menu::-webkit-scrollbar {
width: 7px;
height: 7px;
background: #f2f2f2;
}
.gba-menu::-webkit-scrollbar-thumb {
.gba-borehole-menu::-webkit-scrollbar-thumb {
border-radius: 2px;
background: #777;
}
@ -89,18 +84,14 @@
.chartTable {
margin-left: 20px;
border-width: 0;
border-spacing: 0; /* Removes the cell spacing via CSS */
border-collapse: collapse; /* Optional - if you don't want to have double border where cells touch */
border-spacing: 0;
border-collapse: collapse;
}
.chartTable div {
font: 10px sans-serif;
/*background-color: steelblue;*/
text-align: left;
/*padding: 3px;
margin: 1px;*/
color: #464646;
/*width:75px;*/
}
.chartTable td {

View File

@ -1,185 +0,0 @@
import { Control } from "./Control";
import * as util from '../core/utilities';
import * as domEvent from '../core/domEvent';
import * as dom from '../core/domUtil';
import { BarChart } from '../core/BarChart';
import './BoreholePopup.css';
export class BoreholePopup extends Control {
options = {
position: 'topleft',
width: '300px',
height: '100%',
delay: '10'
};
constructor (options) {
super();
this._innerHTML = "Es wurde noch keine Bohrloch ausgewählt!";
util.setOptions(this, options);
//this._startPosition = -(parseInt(this.options.width, 10));
//this._isLeftPosition = true;
this._hasContent = false;
}
// happens after added to map
onAdd(map) {
if (!map) {
this.destroy();
//logger.warning('HomeButton::map required', true);
return;
}
// var b = this._nls = util.mixin({}, N.widgets.boreholepopup);
let container = this._container = dom.createDom("div", { "class": "gba-control-borehole" });
//button:
this._maxButton = dom.createDom('div', {
"class": "maximize", innerHTML: ">", title: "b.NLS_maximize"
}, this._container);
//link.title = 'Menu';
//dom.createDom('span', { "class": "close", innerHtml: '?' }, link);
//this._menu = dom.createDom('div', { "class": "gba-menu" }, document.getElementsByClassName('mapDesktop')[0]);
this._menu = dom.createDom('div', { "class": "gba-menu" }, dom.byId("webgl"));
this._menu.style.width = this.options.width;
this._menu.style.height = this.options.height;
this._menu.style.left = 0;// '-' + this.options.width;
this._menu.style.top = 0;
let toolboxList = dom.createDom('ul', { "class": "toolbox" }, this._menu);
this._clearButton = dom.createDom('li', { "class": "gba-close-link" }, toolboxList);
dom.createDom('i', { "class": "gba-close-icon" }, this._clearButton);
dom.createDom('span', { title: "b.NLS_close", innerHTML: "Close" }, this._clearButton);
this._body = dom.createDom('div', { "class": "body" }, this._menu);
//this._minimizeButton = dom.createDom('div', {
// "class": "close", innerHTML: "<", title: b.NLS_minimize
//}, this._menu);
this._contenLable = dom.createDom('lable', { innerHTML: "Virtual borehole profile <br /> (Heights in m)" },
this._body);
/* hier kommt nach dem Identify das Bohrprofil hinein */
this._contentPane = dom.createDom('div', { "class": "gba-menu-contents" }, this._body);
this._contentPane.innerHTML = this._innerHTML;
this._contentPane.style.clear = 'both';
domEvent
//.on(this._maxButton, 'click', domEvent.stopPropagation)
.on(this._maxButton, 'click',
this.show,
this);
//domEvent.on(this._minimizeButton, 'click', domEvent.stopPropagation)
// .on(this._minimizeButton, 'click',
// this.hide,
// this);
domEvent
//.on(this._clearButton, 'click', domEvent.stopPropagation)
.on(this._clearButton, 'click',
this._close,
this);
this._toggleVisibility(false);
return container;
}
show(a) {
//this._clearContent();
this._toggleVisibility(true);
//this._animate(true);
}
hide(e) {
//var test = this.isShowing;
if (this.isShowing) {
(this._toggleVisibility(false));
}
//if (e) {
// domEvent.stop(e);
//}
}
_setContent(innerHTML) {
if (innerHTML instanceof HTMLElement) {
this._contentPane.innerHTML = "";
this._contentPane.appendChild(innerHTML);
}
else {
this._contentPane.innerHTML = innerHTML;
}
this._contentPane.style.display = "block";
//this._contentPane.innerHTML = innerHTML;
//this._contentPane.style.display = "block";
}
setChartContent(data) {
this._contentPane.innerHTML = "";
let valTextColor = "ffffff";
this.barChart = new BarChart("d17100",
320, valTextColor, 'full',
300);
this.barChart.draw(data);
this._contentPane.appendChild(this.barChart._container);
let table = this.barChart.getStatTable(data);
this._contentPane.appendChild(table);
this._hasContent = true;
}
_close() {
this._clearContent();
this._toggleVisibility(false);
this.emit("closed");
}
_clearContent() {
// $(this._contentPane).html('');
this._contentPane.innerHTML = '';
this._hasContent = false;
}
_toggleVisibility(visible) {
this._setVisibility(visible);
this.isShowing = visible;
}
_setVisibility(addOrRemove) {
//n.set(this.domNode, "visibility", addOrRemove ? "visible" : "hidden");
// $(this._menu).css("visibility", addOrRemove ? "visible" : "hidden");
this._menu.style.visibility = addOrRemove ? "visible" : "hidden";
//e.toggle(this.domNode, "esriPopupVisible", addOrRemove)
var maxButtonVisible = false;
//if add, max Button not visible
if (addOrRemove == true) {
maxButtonVisible = !addOrRemove;
}
//if remove , then max Button only visible if popup has content
else if (addOrRemove == false) {
maxButtonVisible = this._hasContent;
}
// $(this._maxButton).css("visibility", maxButtonVisible ? "visible" : "hidden");
this._maxButton.style.visibility = maxButtonVisible ? "visible" : "hidden";
}
onRemove() {
//this.cleanup();
this.isShowing && this.hide();
//for (var i = 0; i < this._eventConnections.length; i ++)
//{
// var f = this._eventConnections[i];
// f.remove();
//}
domEvent.off(this._clearButton, 'click', this._close, this);
domEvent.off(this._maxButton, 'click', this.show, this);
//this.map.off('mouse-pan', this.hide, this);
//C.destroy(this.domNode);
//this.getContainer().parentNode.removeChild(this.getContainer());
this._innerHTML = this._hasContent = this._nls = this._menu = this._body = this._contenLable = this._contentPane = this._maxButton = this._clearButton = null;
}
}

View File

@ -0,0 +1,219 @@
import { Control } from "./Control";
import * as util from '../core/utilities';
import * as domEvent from '../core/domEvent';
import * as dom from '../core/domUtil';
import { BarChart } from '../core/BarChart';
import './BoreholePopup.css';
interface BoreholePopupOptions {
position?: string
width?: string
height?: string
parentDiv?: string
}
export class BoreholePopup extends Control {
// default options
options: BoreholePopupOptions = {
position: 'topleft',
width: '300px',
height: '100%',
parentDiv: null
};
// private class fields:
private _innerHTML;
private _clearButton;
private _body;
private _contentPane;
private _contenLable;
_container;
private _mainMap;
private _scene;
private _hasContent;
private _menu;
private _isShowing;
barChart;
constructor(options) {
super();
this._innerHTML = "Es wurde noch keine Bohrloch ausgewählt!";
util.setOptions(this, options);
//this._startPosition = -(parseInt(this.options.width, 10));
//this._isLeftPosition = true;
this._hasContent = false;
}
// happens after added to map
onAdd(map) {
if (!map) {
// this.destroy();
//logger.warning('HomeButton::map required', true);
return;
}
this._mainMap = map;
let container;
// var b = this._nls = util.mixin({}, N.widgets.boreholepopup);
// let container = this._container = dom.createDom("div", { "class": "gba-borehole-popup" });
if (this.options.parentDiv) {
container = this._container = document.getElementById(this.options.parentDiv);
dom.addClass(container, "gba-borehole-popup");
} else {
container = this._container = dom.createDom("div", { "class": "gba-borehole-popup" }, dom.byId("webgl"));
}
//button:
// this._maxButton = dom.createDom('div', {
// "class": "maximize", innerHTML: ">", title: "b.NLS_maximize"
// }, this._container);
let className = "gba-borehole-menu";
this._menu = dom.createDom('div', { "class": className }, container); //dom.byId("webgl"));
this._menu.style.width = this.options.width;
// this._menu.style.height = this.options.height;
this._menu.style.left = 0;// '-' + this.options.width;
this._menu.style.top = 0;
this._body = dom.createDom('div', { "class": "body" }, this._menu);
this._contenLable = dom.createDom('lable', { innerHTML: "Virtual borehole profile <br /> (Heights in m)" },
this._body);
/* place holder for borehole profile after Identify */
this._contentPane = dom.createDom('div', { "class": "gba-menu-contents" }, this._body);
this._contentPane.innerHTML = this._innerHTML;
this._contentPane.style.clear = 'both';
// close button
let toolboxList = dom.createDom('ul', { "class": "toolbox" }, this._menu);
this._clearButton = dom.createDom('button', { "class": "gba-close-link button is-dark" }, toolboxList);
// dom.createDom('i', { "class": "gba-close-icon" }, this._clearButton);
dom.createDom('span', { title: "b.NLS_close", innerHTML: "Close" }, this._clearButton);
// events:
// don't let double clicks and mousedown get to the map
domEvent.on(this._clearButton, 'dblclick', domEvent.stopPropagation);
domEvent.on(this._clearButton, 'mousedown', domEvent.stopPropagation);
domEvent.on(this._clearButton, 'mouseup', domEvent.stopPropagation);
domEvent.on(this._clearButton, 'click', domEvent.stopPropagation);
domEvent.on(this._clearButton, 'click', domEvent.preventDefault);
domEvent.on(this._clearButton, 'click', this._close, this);;
this._toggleVisibility(false);
if (!this.options.parentDiv) {
return container;
}
}
show(a) {
//this._clearContent();
this._toggleVisibility(true);
//this._animate(true);
}
hide() {
//var test = this._isShowing;
if (this._isShowing) {
(this._toggleVisibility(false));
}
//if (e) {
// domEvent.stop(e);
//}
}
_setContent(innerHTML) {
if (innerHTML instanceof HTMLElement) {
this._contentPane.innerHTML = "";
this._contentPane.appendChild(innerHTML);
}
else {
this._contentPane.innerHTML = innerHTML;
}
this._contentPane.style.display = "block";
//this._contentPane.innerHTML = innerHTML;
//this._contentPane.style.display = "block";
}
setChartContent(data) {
this._contentPane.innerHTML = "";
let valTextColor = "ffffff";
this.barChart = new BarChart("d17100",
320, valTextColor, 'full',
300);
this.barChart.draw(data);
this._contentPane.appendChild(this.barChart._container);
let table = this.barChart.getStatTable(data);
this._contentPane.appendChild(table);
this._hasContent = true;
}
_close(e) {
this._clearContent();
this._toggleVisibility(false);
this.emit("closed");
}
_clearContent() {
// $(this._contentPane).html('');
this._contentPane.innerHTML = '';
this._hasContent = false;
}
_toggleVisibility(visible) {
this._setVisibility(visible);
this._isShowing = visible;
//get active p tab
let activeTabButton = document.querySelector('li.is-active');
// let activeTabContent = document.querySelector('.tab-pane.active');
let analysisTabButton = document.querySelector('li.file-link');
// 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');
analysisTabButton.classList.add('is-active');
document.querySelector(activeTabButton.getAttribute('name')).classList.remove('active');
document.querySelector(analysisTabButton.getAttribute('name')).classList.add('active');
}
}
_setVisibility(addOrRemove) {
// $(this._menu).css("visibility", addOrRemove ? "visible" : "hidden");
this._menu.style.visibility = addOrRemove ? "visible" : "hidden";
// var maxButtonVisible = false;
// //if add, max Button not visible
// if (addOrRemove == true) {
// maxButtonVisible = !addOrRemove;
// }
// //if remove , then max Button only visible if popup has content
// else if (addOrRemove == false) {
// maxButtonVisible = this._hasContent;
// }
// // this._maxButton.style.visibility = maxButtonVisible ? "visible" : "hidden";
}
onRemove() {
//this.cleanup();
this._isShowing && this.hide();
//for (var i = 0; i < this._eventConnections.length; i ++)
//{
// var f = this._eventConnections[i];
// f.remove();
//}
domEvent.off(this._clearButton, 'click', this._close);
// domEvent.off(this._maxButton, 'click', this.show, this);
//this.map.off('mouse-pan', this.hide, this);
//C.destroy(this.domNode);
//this.getContainer().parentNode.removeChild(this.getContainer());
this._innerHTML = this._hasContent = this._menu = this._body = this._contenLable = this._contentPane = this._clearButton = null;
}
}

View File

@ -10,7 +10,7 @@ class Control extends EventEmitter {
// @section
// @aka Control options
options = {
position: 'topright',
// position: 'topright',
};
_map;
_container;

View File

@ -88,12 +88,11 @@ class HomeButton extends Control {
let link = dom.createDom("a", { "class": className, innerHTML: html, title: title }, container);
// let stop = domEvent.stopPropagation;
domEvent
// .on(link, 'click', stop)
// .on(link, 'mousedown', stop)
// .on(link, 'dblclick', stop)
// .on(link, 'click', domEvent.preventDefault)
.on(link, 'click', fn, context);
domEvent.on(link, 'click', domEvent.stopPropagation);
domEvent.on(link, 'mousedown', domEvent.stopPropagation);
domEvent.on(link, 'dblclick', domEvent.stopPropagation);
domEvent.on(link, 'click', domEvent.preventDefault);
domEvent. on(link, 'click', fn, context);
return link;
}

View File

@ -17,7 +17,7 @@ export class LayerControl extends Control {
autoZIndex: true
};
//private class fileds:
// private class fields:
_container;
_mainMap;
_scene;

View File

@ -59,12 +59,11 @@ class ZoomControl extends Control {
let link = dom.createDom("a", { "class": className, innerHTML: html, title: title }, container);
// let stop = domEvent.stopPropagation;
domEvent
// .on(link, 'click', stop)
// .on(link, 'mousedown', stop)
// .on(link, 'dblclick', stop)
// .on(link, 'click', domEvent.preventDefault)
.on(link, 'click', fn, context);
domEvent.on(link, 'click', domEvent.stopPropagation);
domEvent.on(link, 'mousedown', domEvent.stopPropagation);
domEvent.on(link, 'dblclick', domEvent.stopPropagation);
domEvent.on(link, 'click', domEvent.preventDefault);
domEvent.on(link, 'click', fn, context);
return link;
}

View File

@ -166,7 +166,7 @@ class Map extends OrbitControls {
zoomControl.addTo(this);
this._controls.maptoolControl = new BoreholeControl().addTo(this);
this._controls.boreholePopup = new BoreholePopup({});
this._controls.boreholePopup = new BoreholePopup({parentDiv: 'gba-borehole-control-parent-id'});
this._controls.boreholePopup.addTo(this);
}

View File

@ -84,6 +84,8 @@ export function removeListener(obj, type, fn) { // (HTMLElement, String, Functi
if (!handler) { return this; }
// if (l.ctx !== context) { continue; }
if ('removeEventListener' in obj) {
if (type === 'mousewheel') {
obj.removeEventListener('DOMMouseScroll', handler, false);
@ -123,14 +125,33 @@ function _checkMouse(el, e) {
return (related !== el);
}
// export function stopPropagation(e) {
// if (e.stopPropagation) {
// e.stopPropagation();
// } else {
// e.cancelBubble = true;
// }
// skipped(e);
// return this;
// }
// @function stopPropagation(ev: DOMEvent): this
// Stop the given event from propagation to parent elements. Used inside the listener functions:
// ```js
// L.DomEvent.on(div, 'click', function (ev) {
// L.DomEvent.stopPropagation(ev);
// });
// ```
export function stopPropagation(e) {
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
skipped(e);
return this;
if (e.stopPropagation) {
e.stopPropagation();
} else if (e.originalEvent) {
e.originalEvent._stopped = true;
} else {
e.cancelBubble = true;
}
skipped(e);
return this;
}
@ -160,10 +181,10 @@ export function fakeStop(e) {
skipEvents[e.type] = true;
}
export function skipped(e) {
var skipped = skipEvents[e.type];
let events = skipEvents[e.type];
// reset when checking, as it's only used in map container and propagates outside of the map
skipEvents[e.type] = false;
return skipped;
return events;
}

View File

@ -53,7 +53,7 @@ class Application {
// this.$topTextInput = document.querySelector('#topText');
// this.$bottomTextInput = document.querySelector('#bottomText');
// this.$imageInput = document.querySelector('#image');
this.downloadButton = document.querySelector('#btnDownloadCanvasImage');
this.downloadButton = document.querySelector('#menu-dowload-button');
this.menuIcon = document.querySelector('#menu-icon');
this.navigation = document.getElementsByClassName('navigation')[0];
// this.addEventListeners();
@ -40773,7 +40773,7 @@ class Application {
});
}
var tabButtons = [].slice.call(document.querySelectorAll('ul.tab-nav li'));
let tabButtons = [].slice.call(document.querySelectorAll('ul.tab-nav li'));
tabButtons.map(function (button) {
button.addEventListener('click', function () {

View File

@ -60,14 +60,20 @@ module.exports = {
// test: /\.vue$/,
// loader: 'vue-loader'
// },
// {
// test: /\.tsx?$/,
// use: 'ts-loader',
// exclude: /(node_modules|bower_components)/,
// },
{
test: /\.js$/,
// test: /\.js$/,
test: /\.(js|jsx|tsx|ts)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
// options: {
// presets: ['@babel/preset-env']
// }
}
},
@ -108,6 +114,9 @@ module.exports = {
]
},
resolve: {
extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
},
stats: {
colors: true
},