From f42bbf55747f844abe10bfdc2332f4a2af4ed300 Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Thu, 1 Apr 2021 16:49:57 +0200 Subject: [PATCH] - alsos slicing DEM layer - slicing box white background with opacity - toggle slicing box in analysis tab - all map buttons with font awesome icons - three.js update to 0.127.0 --- index.html | 35 +++++++++++++++++++----- package-lock.json | 14 +++++----- package.json | 2 +- src/css/page_bulma.scss | 13 +++++---- src/js/clip/PickingTool.js | 14 +++++----- src/js/clip/Selection.js | 8 ++++++ src/js/clip/material.js | 9 +++++-- src/js/controls/BasemapControl.css | 2 +- src/js/controls/HomeButton.js | 4 +-- src/js/controls/ZoomControl.css | 43 ++++++++++++++---------------- src/js/controls/ZoomControl.js | 18 +++++-------- src/js/main.js | 14 +++++++--- 12 files changed, 104 insertions(+), 72 deletions(-) diff --git a/index.html b/index.html index f99b382..9b8f94b 100644 --- a/index.html +++ b/index.html @@ -149,6 +149,7 @@
+
Download Map Image
@@ -162,15 +163,35 @@
-
+
Functions
- -
- +
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+ +
...coming soon diff --git a/package-lock.json b/package-lock.json index a55e0a4..9b6def4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "lodash": "^4.17.21", "normalize.css": "^8.0.1", "proj4": "^2.6.3", - "three": "^0.126.0" + "three": "^0.127.0" }, "devDependencies": { "@babel/core": "^7.12.9", @@ -5938,9 +5938,9 @@ } }, "node_modules/three": { - "version": "0.126.1", - "resolved": "https://registry.npmjs.org/three/-/three-0.126.1.tgz", - "integrity": "sha512-eOEXnZeE1FDV0XgL1u08auIP13jxdN9LQBAEmlErYzMxtIIfuGIAZbijOyookALUhqVzVOx0Tywj6n192VM+nQ==" + "version": "0.127.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.127.0.tgz", + "integrity": "sha512-wtgrn+mhYUbobxT7QN3GPdu3SRpSBQvwY6uOzLChWS7QE//f7paDU/+wlzbg+ngeIvBBqjBHSRuywTh8A99Jng==" }, "node_modules/to-fast-properties": { "version": "2.0.0", @@ -11298,9 +11298,9 @@ } }, "three": { - "version": "0.126.1", - "resolved": "https://registry.npmjs.org/three/-/three-0.126.1.tgz", - "integrity": "sha512-eOEXnZeE1FDV0XgL1u08auIP13jxdN9LQBAEmlErYzMxtIIfuGIAZbijOyookALUhqVzVOx0Tywj6n192VM+nQ==" + "version": "0.127.0", + "resolved": "https://registry.npmjs.org/three/-/three-0.127.0.tgz", + "integrity": "sha512-wtgrn+mhYUbobxT7QN3GPdu3SRpSBQvwY6uOzLChWS7QE//f7paDU/+wlzbg+ngeIvBBqjBHSRuywTh8A99Jng==" }, "to-fast-properties": { "version": "2.0.0", diff --git a/package.json b/package.json index 4919828..2c2daf6 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "lodash": "^4.17.21", "normalize.css": "^8.0.1", "proj4": "^2.6.3", - "three": "^0.126.0" + "three": "^0.127.0" }, "author": "Arno Kaimbacher", "license": "MIT", diff --git a/src/css/page_bulma.scss b/src/css/page_bulma.scss index c375cd6..8c55450 100644 --- a/src/css/page_bulma.scss +++ b/src/css/page_bulma.scss @@ -206,7 +206,7 @@ ul { margin-left: 0px; } -.gba-control-home span { +.gba-control-home a { width: 30px; height: 30px; -webkit-user-select: none; @@ -214,16 +214,15 @@ ul { -ms-user-select: none; user-select: none; cursor: pointer; - border-radius: 5px; - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAABDlBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmXl5f///+VlZWZmZmWlpaUlJSYmJiSkpKampqzs7O3t7fMzMyTk5O2trarq6uysrLR0dHY2Njb29v8/PyMjIy4uLi5ubm6urq1tbSbm5uhoaGmpqanp6eoqKi7u7u+vr7BwcHFxcXGxsbHx8fIyMjJycmpqanNzc3Ozs7Pz8/Q0NCNjY3S0tLT09PV1dXW1tavr6/Z2dmxsbHc3Nzd3d3i4uLn5+fv7+/w8PD39/f5+fn7+/uPj4/9/f3+/v6QkJA5Pja9AAAAGnRSTlMABUdVVmxucX6MtLvHycrN2Nzi4+vs7e/3+OshyJcAAAECSURBVHherdLFcsQwEEXRDjLDJOkWGYcnzMzM/P8/Eo8V18i4yl091alSaSGAgclSdnMTPQB9vKBumCriYZg3j0qKGI9DyVRxVPVNHjVZyTN6u/VzGFmNiN4di3NmWWiw1itq9+Faoux5WxhjFNeka660grkkTUZxQ1Ff7glR2WTEO+rUfI0zqgbFM1moB0rm+BEL+5FS1XzUjOvPlFHdViELx3tKa8M7xr/LW7tpvr/A6Gn+HlHGy/+Xv8Ny+XCzUtmo5/LyD2Ofp7m8LYN9nuZ9gy/1djssd17CVlmwD/Susjbrj2yvhdnJPQbTPEjpeHKPwCAvqBe6hmYXs1uY6YdfRkdtRcSvwdgAAAAASUVORK5CYII=") - /*img/home.png*/; - background-position: 50% 50%; - background-repeat: no-repeat; + border-radius: 4px; + display: block; + background-color: #999999; + text-align: center; + color: #ffffff; display: block; } - .red-label { color: #f00; padding: 2px; diff --git a/src/js/clip/PickingTool.js b/src/js/clip/PickingTool.js index 8837a90..0645e49 100644 --- a/src/js/clip/PickingTool.js +++ b/src/js/clip/PickingTool.js @@ -81,7 +81,7 @@ export class PickingTool { } mouseMove(event) { - if (this.isDraging == true || this.simulation.selection.visible == false || this.enabled == false) { + if (this.isDraging == true || this.simulation.selectionBox.visible == false || this.enabled == false) { return; } let point = this._getCanvasPoint(event); @@ -92,7 +92,7 @@ export class PickingTool { this.mouse.set(x, y); this.ray.setFromCamera(this.mouse, this.simulation.map.camera); - let intersects = this.ray.intersectObjects(this.simulation.selection.selectables); + let intersects = this.ray.intersectObjects(this.simulation.selectionBox.selectables); if (intersects.length > 0) { let candidate = intersects[0].object; @@ -120,10 +120,10 @@ export class PickingTool { } beginDrag(event) { - if (this.simulation.selection.visible == false && this.enabled == false) { + if (this.simulation.selectionBox.visible == false || this.enabled == false) { return; } - // exit drag method, if not left mouse button was clicked + // exit drag method, if not left mouse button was clicked on desktop: if (this.touchCapable == false && event.which != 1) { return; } @@ -136,7 +136,7 @@ export class PickingTool { this.mouse.set(x, y); this.ray.setFromCamera(this.mouse, this.simulation.map.camera); - let intersects = this.ray.intersectObjects(this.simulation.selection.selectables); + let intersects = this.ray.intersectObjects(this.simulation.selectionBox.selectables); if (intersects.length > 0) { this.isDraging = true; @@ -188,8 +188,8 @@ export class PickingTool { } else if (axis === 'z1' || axis === 'z2') { value = intersects[0].point.z; } - this.simulation.selection.setValue(axis, value); - // this.simulation.selection.setValue('x1', 4452960); + this.simulation.selectionBox.setValue(axis, value); + // this.simulation.selectionBox.setValue('x1', 4452960); // this.simulation.throttledRender(); this.simulation.deferringThrottle(); } diff --git a/src/js/clip/Selection.js b/src/js/clip/Selection.js index 8c7166a..e6e7bce 100644 --- a/src/js/clip/Selection.js +++ b/src/js/clip/Selection.js @@ -109,6 +109,14 @@ export class Selection extends Layer { this.touchMeshes.visible = visible; this.emit('visibility-change'); } + toggle () { + let visible = !this.visible; + this.visible = visible; + this.boxMesh.visible = visible; + this.displayMeshes.visible = visible; + this.touchMeshes.visible = visible; + this._map.update(); + } scaleZ(z) { this.scale = z; diff --git a/src/js/clip/material.js b/src/js/clip/material.js index e6a27f9..c12c65c 100644 --- a/src/js/clip/material.js +++ b/src/js/clip/material.js @@ -19,8 +19,13 @@ let frontStencilMaterial = new ShaderMaterial( { // depthWrite: false, } ); -let BoxBackFace = new MeshBasicMaterial({ color: 0xEEDDCC, transparent: true }); -let BoxWireframe = new LineBasicMaterial({ color: 0x000000, linewidth: 2 }); +// beige: +// let BoxBackFace = new MeshBasicMaterial({ color: 0xEEDDCC, transparent: true }); +let BoxBackFace = new MeshBasicMaterial({ color: 0xf8f8ff, transparent: true, opacity: 0.5 }); +// black box grid: +// let BoxWireframe = new LineBasicMaterial({ color: 0x000000, linewidth: 2 }); +let BoxWireframe = new LineBasicMaterial({ color: 0x6f6f6f, linewidth: 3 }); + // yellow select color let BoxWireActive = new LineBasicMaterial({ color: 0xffff00, linewidth: 4, side: DoubleSide }); diff --git a/src/js/controls/BasemapControl.css b/src/js/controls/BasemapControl.css index f36fa9d..09645e4 100644 --- a/src/js/controls/BasemapControl.css +++ b/src/js/controls/BasemapControl.css @@ -10,7 +10,7 @@ cursor: pointer; border-radius: 4px; display: block; - background-color: #bbb; + background-color: #999999; text-align: center; color: #ffffff; diff --git a/src/js/controls/HomeButton.js b/src/js/controls/HomeButton.js index 6dbc82a..c69340f 100644 --- a/src/js/controls/HomeButton.js +++ b/src/js/controls/HomeButton.js @@ -39,7 +39,7 @@ class HomeButton extends Control { //if (this.options.home) { this._homeButton = this._createButton( //this.options.zoomInText, this.options.zoomInTitle, - "", "b.title", + "", "b.title", className + '-do', container, this._goHome, this); this._init(); //} @@ -85,7 +85,7 @@ class HomeButton extends Control { _createButton(html, title, className, container, fn, context) { //var link = L.DomUtil.create('a', className, container); - let link = dom.createDom("span", { "class": className, innerHTML: html, title: title }, container); + let link = dom.createDom("a", { "class": className, innerHTML: html, title: title }, container); // let stop = domEvent.stopPropagation; domEvent diff --git a/src/js/controls/ZoomControl.css b/src/js/controls/ZoomControl.css index da216cd..9ab5a0c 100644 --- a/src/js/controls/ZoomControl.css +++ b/src/js/controls/ZoomControl.css @@ -2,28 +2,25 @@ border-radius: 4px; } - .gba-control-zoom span { - display: block; - height: 30px; - width: 31px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: pointer; - background-position: 50% 50%; - background-repeat: no-repeat; - } -/*.my-gba-control-zoom a:hover { - background-color: rgba(102,102,102,0.90); - }*/ -.gba-control-zoom-in { - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAxlBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZn///+VlZWYmJiZmZmWlpaXl5fw8PDk5OT6+vrm5uarq6uampqkpKTn5+egoKD7+/vy8vLl5eX5+fng4OCenp6SkpKcnJz8/PydnZ3x8fGxsbGtra2mpqbh4eGioqL9/f3r6+ufn5+qqqqhoaGoqKjs7Oybm5uUlJSWaKJBAAAAGnRSTlPk+cftAOPvgvgGkut0WrvJytuzaf1Fbc/EUVDNfwkAAADBSURBVHhetdLFssMwDIZRNU3xIoMMYSzjZXr/l6q1izO1dv1Wmjk7zQ+j8VnneEM492GgmC6gx/El9Dm+gi7Hns1CCO3mbLfdptLFclkjFsLNIeLkBCxNwR/xv6RsztamZblBTNSaslj/hDX1jrja0PHxGTT5C+3i0uK0xZXFwT5KTEWFOJ3QNZvLBiupTUKFiNFCU6f4Gs/0FoZ/4/jVwdRbnn8rNwemNjN5/JCv4YbjW7hj9P4B/McnOF7v+cU/AEI2X3dttU52AAAAAElFTkSuQmCC') /*img/zoomIn.png*/; - margin-bottom: 2px; +.gba-control-zoom a { + display: block; + height: 30px; + width: 31px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: pointer; + background-position: 50% 50%; + background-repeat: no-repeat; + border-radius: 4px; + background-color: #999999; + text-align: center; + color: #ffffff; + display: block; } -.gba-control-zoom-out { - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAfCAMAAADHso01AAAAhFBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmYmJiZmZmXl5efn5+6urr////+/v6srKybm5uUlJStra319fW5ubmgoKCVlZW2tra9vb35+fm4/JSJAAAAGnRSTlN7x4/tAMjuGSy2aIteC+AWupAw5c4edI5nD8z6iFwAAAB3SURBVHhe3dK3DoQwDIBhB8KFfr2Z3q+8//uxEJYQZ2DLv36yZMkGLkLQFCcc/DTTxo4QZEQRuBQzOFDsGaZtYOzWNhiLsVz6tqjwp69k/yJXuaklDwobp/PpJytbJDe34ST7PtXEJ4rPcLnq9SaA3x/Ods/Xm8/EaFl6wRVnDgAAAABJRU5ErkJggg==') /*img/zoomOut.png*/; - /*font: bold 18px 'Lucida Console', Monaco, monospace; - text-indent: 1px;*/ -} \ No newline at end of file +.gba-control-zoom-in { + /* background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAxlBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZn///+VlZWYmJiZmZmWlpaXl5fw8PDk5OT6+vrm5uarq6uampqkpKTn5+egoKD7+/vy8vLl5eX5+fng4OCenp6SkpKcnJz8/PydnZ3x8fGxsbGtra2mpqbh4eGioqL9/f3r6+ufn5+qqqqhoaGoqKjs7Oybm5uUlJSWaKJBAAAAGnRSTlPk+cftAOPvgvgGkut0WrvJytuzaf1Fbc/EUVDNfwkAAADBSURBVHhetdLFssMwDIZRNU3xIoMMYSzjZXr/l6q1izO1dv1Wmjk7zQ+j8VnneEM492GgmC6gx/El9Dm+gi7Hns1CCO3mbLfdptLFclkjFsLNIeLkBCxNwR/xv6RsztamZblBTNSaslj/hDX1jrja0PHxGTT5C+3i0uK0xZXFwT5KTEWFOJ3QNZvLBiupTUKFiNFCU6f4Gs/0FoZ/4/jVwdRbnn8rNwemNjN5/JCv4YbjW7hj9P4B/McnOF7v+cU/AEI2X3dttU52AAAAAElFTkSuQmCC"); */ + margin-bottom: 2px; +} diff --git a/src/js/controls/ZoomControl.js b/src/js/controls/ZoomControl.js index 3a45a44..feb0be4 100644 --- a/src/js/controls/ZoomControl.js +++ b/src/js/controls/ZoomControl.js @@ -30,13 +30,13 @@ class ZoomControl extends Control { this._map = map; // don't use options.zoomInText because of predefined png this._zoomInButton = this._createButton( - "", this.options.zoomInTitle, + "", this.options.zoomInTitle, // "", b.zoomInTitle, className + '-in', container, this._zoomIn, this); // don't use options.zoomOutText because of predefined png this._zoomOutButton = this._createButton( - "", this.options.zoomOutTitle, + "", this.options.zoomOutTitle, // "", b.zoomOutTitle, className + '-out', container, this._zoomOut, this); @@ -56,7 +56,7 @@ class ZoomControl extends Control { } _createButton(html, title, className, container, fn, context) { - let link = dom.createDom("span", { "class": className, innerHTML: html, title: title }, container); + let link = dom.createDom("a", { "class": className, innerHTML: html, title: title }, container); // let stop = domEvent.stopPropagation; domEvent @@ -68,14 +68,10 @@ class ZoomControl extends Control { return link; } - _updateDisabled () { - - var className = 'leaflet-disabled'; - - dom.removeClass(this._zoomInButton, className); - - dom.removeClass(this._zoomOutButton, className); - + _updateDisabled () { + let className = 'leaflet-disabled'; + dom.removeClass(this._zoomInButton, className); + dom.removeClass(this._zoomOutButton, className); //if (map._zoom === map.getMinZoom()) { // L.DomUtil.addClass(this._zoomOutButton, className); //} diff --git a/src/js/main.js b/src/js/main.js index 9ef9da9..9d03289 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -158,18 +158,18 @@ class Application { this.mapTitle = document.querySelector('#map-title'); this.mapTitle.innerHTML += map.title; map.on('ready', () => { - this.selection.setUniforms(); + this.selectionBox.setUniforms(); this.animate(); }, this); - this.selection = new Selection( + this.selectionBox = new Selection( // new Vector3(-7, -14, -14), // new Vector3(14, 9, 3) { name: 'Slicing Box' }, new Vector3(this.map.x.min, this.map.y.min, this.map.z.min), new Vector3(this.map.x.max, this.map.y.max, this.map.z.max) ); - this.map.addLayer(this.selection); + this.map.addLayer(this.selectionBox); this.map.picking = new PickingTool(this.map.size, this.map.center, this); @@ -40602,7 +40602,7 @@ class Application { // this.slicer = new SlicerControl({ parentDiv: 'slicer-control' }).addTo(this.map); - this.capsScene.add(this.selection.boxMesh); + this.capsScene.add(this.selectionBox.boxMesh); // this.scene.add(this.selection.displayMeshes); // this.scene.add(this.selection.touchMeshes); @@ -40791,6 +40791,12 @@ class Application { this.gridlayer.toggle(); }, this); + //toggle SlicingBox + let chkSlicingBox = document.getElementById("chkSlicingBox"); + domEvent.on(chkSlicingBox, 'click', function (e) { + this.selectionBox.toggle(); + }, this); + } downloadMapImage() {