geolba/GeotiefExplore
2
1
Fork 0
Code Issues 7 Pull Requests Projects 1 Releases Wiki Activity

- npm updates

Browse Source 
- dynamic BarChart inside BoreholePopup.js
This commit is contained in:
Arno Kaimbacher 2021-04-14 17:58:54 +02:00
parent a1aa0cda97
commit c9bdf02ead
6 changed files with 93 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
package-lock.json generated
View File

@ -1940,16 +1940,16 @@
} }
}, },
"node_modules/browserslist": { "node_modules/browserslist": {
"version": "4.16.3", "version": "4.16.4",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.3.tgz", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.4.tgz",
"integrity": "sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==", "integrity": "sha512-d7rCxYV8I9kj41RH8UKYnvDYCRENUlHRgyXy/Rhr/1BaeLGfiCptEdFE8MIrvGfWbBFNjVYx76SQWvNX1j+/cQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"caniuse-lite": "^1.0.30001181", "caniuse-lite": "^1.0.30001208",
"colorette": "^1.2.1", "colorette": "^1.2.2",
"electron-to-chromium": "^1.3.649", "electron-to-chromium": "^1.3.712",
"escalade": "^3.1.1", "escalade": "^3.1.1",
"node-releases": "^1.1.70" "node-releases": "^1.1.71"
}, },
"bin": { "bin": {
"browserslist": "cli.js" "browserslist": "cli.js"
@ -2203,14 +2203,14 @@
"dev": true "dev": true
}, },
"node_modules/concurrently": { "node_modules/concurrently": {
"version": "6.0.1", "version": "6.0.2",
"resolved": "https://registry.npmjs.org/concurrently/-/concurrently-6.0.1.tgz", "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-6.0.2.tgz",
"integrity": "sha512-YCF/Wf31a910hXu7eGN9/SyHKD/usw3Shw4IPYuqIsxxC39v92engYlIlOs/zXnBJtX/6aVuhgzfhZeGJkhU4w==", "integrity": "sha512-u+1Q0dJG5BidgUTpz9CU16yoHTt/oApFDQ3mbvHwSDgMjU7aGqy0q8ZQyaZyaNxdwRKTD872Ux3Twc6//sWA+Q==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"chalk": "^4.1.0", "chalk": "^4.1.0",
"date-fns": "^2.16.1", "date-fns": "^2.16.1",
"lodash": "^4.17.20", "lodash": "^4.17.21",
"read-pkg": "^5.2.0", "read-pkg": "^5.2.0",
"rxjs": "^6.6.3", "rxjs": "^6.6.3",
"spawn-command": "^0.0.2-1", "spawn-command": "^0.0.2-1",
@ -2513,9 +2513,9 @@
} }
}, },
"node_modules/date-fns": { "node_modules/date-fns": {
"version": "2.20.1", "version": "2.20.3",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.20.1.tgz", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.20.3.tgz",
"integrity": "sha512-8P5M8Kxbnovd0zfvOs7ipkiVJ3/zZQ0F/nrBW4x5E+I0uAZVZ80h6CKd24fSXQ5TLK5hXMtI4yb2O5rEZdUt2A==", "integrity": "sha512-BbiJSlfmr1Fnfi1OHY8arklKdwtZ9n3NkjCeK8G9gtEe0ZSUwJuwHc6gYBl0uoC0Oa5RdpJV1gBBdXcZi8Efdw==",
"dev": true, "dev": true,
"engines": { "engines": {
"node": ">=0.11" "node": ">=0.11"
@ -2620,9 +2620,9 @@
} }
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.3.712", "version": "1.3.715",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.712.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.715.tgz",
"integrity": "sha512-3kRVibBeCM4vsgoHHGKHmPocLqtFAGTrebXxxtgKs87hNUzXrX2NuS3jnBys7IozCnw7viQlozxKkmty2KNfrw==", "integrity": "sha512-VCWxo9RqTYhcCsHtG+l0TEOS6H5QmO1JyVCQB9nv8fllmAzj1VcCYH3qBCXP75/En6FeoepefnogLPE+5W7OiQ==",
"dev": true "dev": true
}, },
"node_modules/emoji-regex": { "node_modules/emoji-regex": {
@ -6220,9 +6220,9 @@
} }
}, },
"node_modules/webpack": { "node_modules/webpack": {
"version": "5.31.2", "version": "5.32.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.31.2.tgz", "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.32.0.tgz",
"integrity": "sha512-0bCQe4ybo7T5Z0SC5axnIAH+1WuIdV4FwLYkaAlLtvfBhIx8bPS48WHTfiRZS1VM+pSiYt7e/rgLs3gLrH82lQ==", "integrity": "sha512-jB9PrNMFnPRiZGnm/j3qfNqJmP3ViRzkuQMIf8za0dgOYvSLi/cgA+UEEGvik9EQHX1KYyGng5PgBTTzGrH9xg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/eslint-scope": "^3.7.0", "@types/eslint-scope": "^3.7.0",
@ -8215,16 +8215,16 @@
} }
}, },
"browserslist": { "browserslist": {
"version": "4.16.3", "version": "4.16.4",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.3.tgz", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.4.tgz",
"integrity": "sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==", "integrity": "sha512-d7rCxYV8I9kj41RH8UKYnvDYCRENUlHRgyXy/Rhr/1BaeLGfiCptEdFE8MIrvGfWbBFNjVYx76SQWvNX1j+/cQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"caniuse-lite": "^1.0.30001181", "caniuse-lite": "^1.0.30001208",
"colorette": "^1.2.1", "colorette": "^1.2.2",
"electron-to-chromium": "^1.3.649", "electron-to-chromium": "^1.3.712",
"escalade": "^3.1.1", "escalade": "^3.1.1",
"node-releases": "^1.1.70" "node-releases": "^1.1.71"
} }
}, },
"buffer-from": { "buffer-from": {
@ -8427,14 +8427,14 @@
"dev": true "dev": true
}, },
"concurrently": { "concurrently": {
"version": "6.0.1", "version": "6.0.2",
"resolved": "https://registry.npmjs.org/concurrently/-/concurrently-6.0.1.tgz", "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-6.0.2.tgz",
"integrity": "sha512-YCF/Wf31a910hXu7eGN9/SyHKD/usw3Shw4IPYuqIsxxC39v92engYlIlOs/zXnBJtX/6aVuhgzfhZeGJkhU4w==", "integrity": "sha512-u+1Q0dJG5BidgUTpz9CU16yoHTt/oApFDQ3mbvHwSDgMjU7aGqy0q8ZQyaZyaNxdwRKTD872Ux3Twc6//sWA+Q==",
"dev": true, "dev": true,
"requires": { "requires": {
"chalk": "^4.1.0", "chalk": "^4.1.0",
"date-fns": "^2.16.1", "date-fns": "^2.16.1",
"lodash": "^4.17.20", "lodash": "^4.17.21",
"read-pkg": "^5.2.0", "read-pkg": "^5.2.0",
"rxjs": "^6.6.3", "rxjs": "^6.6.3",
"spawn-command": "^0.0.2-1", "spawn-command": "^0.0.2-1",
@ -8663,9 +8663,9 @@
} }
}, },
"date-fns": { "date-fns": {
"version": "2.20.1", "version": "2.20.3",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.20.1.tgz", "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.20.3.tgz",
"integrity": "sha512-8P5M8Kxbnovd0zfvOs7ipkiVJ3/zZQ0F/nrBW4x5E+I0uAZVZ80h6CKd24fSXQ5TLK5hXMtI4yb2O5rEZdUt2A==", "integrity": "sha512-BbiJSlfmr1Fnfi1OHY8arklKdwtZ9n3NkjCeK8G9gtEe0ZSUwJuwHc6gYBl0uoC0Oa5RdpJV1gBBdXcZi8Efdw==",
"dev": true "dev": true
}, },
"debug": { "debug": {
@ -8737,9 +8737,9 @@
} }
}, },
"electron-to-chromium": { "electron-to-chromium": {
"version": "1.3.712", "version": "1.3.715",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.712.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.715.tgz",
"integrity": "sha512-3kRVibBeCM4vsgoHHGKHmPocLqtFAGTrebXxxtgKs87hNUzXrX2NuS3jnBys7IozCnw7viQlozxKkmty2KNfrw==", "integrity": "sha512-VCWxo9RqTYhcCsHtG+l0TEOS6H5QmO1JyVCQB9nv8fllmAzj1VcCYH3qBCXP75/En6FeoepefnogLPE+5W7OiQ==",
"dev": true "dev": true
}, },
"emoji-regex": { "emoji-regex": {
@ -11510,9 +11510,9 @@
} }
}, },
"webpack": { "webpack": {
"version": "5.31.2", "version": "5.32.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.31.2.tgz", "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.32.0.tgz",
"integrity": "sha512-0bCQe4ybo7T5Z0SC5axnIAH+1WuIdV4FwLYkaAlLtvfBhIx8bPS48WHTfiRZS1VM+pSiYt7e/rgLs3gLrH82lQ==", "integrity": "sha512-jB9PrNMFnPRiZGnm/j3qfNqJmP3ViRzkuQMIf8za0dgOYvSLi/cgA+UEEGvik9EQHX1KYyGng5PgBTTzGrH9xg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@types/eslint-scope": "^3.7.0", "@types/eslint-scope": "^3.7.0",

10
src/js/controls/BoreholePopup.js
View File

@ -58,7 +58,7 @@ export class BoreholePopup extends Control {
//this._minimizeButton = dom.createDom('div', { //this._minimizeButton = dom.createDom('div', {
// "class": "close", innerHTML: "<", title: b.NLS_minimize // "class": "close", innerHTML: "<", title: b.NLS_minimize
//}, this._menu); //}, this._menu);
this._contenLable = dom.createDom('lable', { innerHTML: "Virtuelles Bohrprofil laut Modell <br /> (Höhenangaben in m Seehöhe)" }, this._contenLable = dom.createDom('lable', { innerHTML: "Virtual borehole profile <br /> (Heights in m)" },
this._body); this._body);
/* hier kommt nach dem Identify das Bohrprofil hinein */ /* hier kommt nach dem Identify das Bohrprofil hinein */
@ -117,14 +117,14 @@ export class BoreholePopup extends Control {
setChartContent(data) { setChartContent(data) {
this._contentPane.innerHTML = ""; this._contentPane.innerHTML = "";
var valTextColor = "ffffff"; let valTextColor = "ffffff";
this.barChart = new BarChart("d17100", this.barChart = new BarChart("d17100",
320, valTextColor, 'full', 320, valTextColor, 'full',
400); 300);
this.barChart.draw(data); this.barChart.draw(data);
this._contentPane.appendChild(this.barChart._container); this._contentPane.appendChild(this.barChart._container);
var table = this.barChart.getStatTable(data); let table = this.barChart.getStatTable(data);
this._contentPane.appendChild(table); this._contentPane.appendChild(table);
this._hasContent = true; this._hasContent = true;
} }
@ -163,7 +163,7 @@ export class BoreholePopup extends Control {
maxButtonVisible = this._hasContent; maxButtonVisible = this._hasContent;
} }
// $(this._maxButton).css("visibility", maxButtonVisible ? "visible" : "hidden"); // $(this._maxButton).css("visibility", maxButtonVisible ? "visible" : "hidden");
this._maxButton.style.visibility = addOrRemove ? "visible" : "hidden"; this._maxButton.style.visibility = maxButtonVisible ? "visible" : "hidden";
} }
onRemove() { onRemove() {

2
src/js/controls/NorthArrow.css
View File

@ -5,7 +5,7 @@
border: none; border: none;
width: 100px; width: 100px;
height: 100px; height: 100px;
z-index: 9999999; z-index: 999;
margin-bottom: 0; margin-bottom: 0;
} }

51
src/js/core/BarChart.js
View File

@ -97,8 +97,8 @@ export class BarChart {
// Update the dimensions of the canvas only if they have changed // Update the dimensions of the canvas only if they have changed
if (ctx.canvas.width !== this.width || ctx.canvas.height !== this.height) { if (ctx.canvas.width !== this.width || ctx.canvas.height !== this.height) {
ctx.canvas.width = this.width; ctx.canvas.width = this.width; //300
ctx.canvas.height = this.height; ctx.canvas.height = this.height; //400
} }
//// Draw the background color white //// Draw the background color white
//ctx.fillStyle = this.backgroundColor; //ctx.fillStyle = this.backgroundColor;
@ -115,11 +115,19 @@ export class BarChart {
// Determine the largest value in the bar array // Determine the largest value in the bar array
// let largestValue = 0; // let largestValue = 0;
for (i = 0; i < arr.length; i += 1) { // for (i = 0; i < arr.length; i += 1) {
if (arr[i].dist > largestValue) { // if (arr[i].dist > largestValue) {
largestValue = arr[i].dist; // largestValue = arr[i].dist;
} // }
} // }
largestValue = Math.max.apply(Math, arr.map(o => o.dist));
let maxValue = Math.max.apply(Math, arr.map(o => o.max));
this.maxValue = Math.round(maxValue);
let minValue = Math.min.apply(Math, arr.map(o => o.min));
this.minValue = Math.round(minValue);
// let smallestValue = Math.min.apply(Math, arr.map(o => o.dist));
let totalHeight = this.totalHeight = this.maxValue - this.minValue; //6000;
//// Draw grey bar background //// Draw grey bar background
//ctx.fillStyle = "lightgray"; //ctx.fillStyle = "lightgray";
@ -146,9 +154,11 @@ export class BarChart {
//} else { //} else {
// ratio = arr[i].dist / largestValue; // ratio = arr[i].dist / largestValue;
//} //}
ratio = arr[i].dist / totalHeight;
//barHeight = arr[i].dist;// ratio * maxBarHeight; // //barHeight = arr[i].dist;// ratio * maxBarHeight;
barHeight = parseInt((maxBarHeight / 6000) * arr[i].dist); // barHeight = parseInt((maxBarHeight / 6000) * arr[i].dist);
barHeight = parseInt(ratio * maxBarHeight);
let x = this.margin;// this.margin + i * this.width / numOfBars let x = this.margin;// this.margin + i * this.width / numOfBars
let y = graphAreaHeight - barHeight; let y = graphAreaHeight - barHeight;
if (i == 0) { if (i == 0) {
@ -174,7 +184,7 @@ export class BarChart {
// Use try / catch to stop IE 8 from going to error town // Use try / catch to stop IE 8 from going to error town
try { try {
if (arr[i].name !== "Basement") { if (arr[i].name !== "Basement") {
ctx.fillText("Mächtigkeit " + arr[i].name + ": " + Math.round(arr[i].dist),//.toFixed(2), ctx.fillText("thickness " + arr[i].name + ": " + Math.round(arr[i].dist),//.toFixed(2),
//i * this.width / numOfBars + (this.width / numOfBars) / 2, //i * this.width / numOfBars + (this.width / numOfBars) / 2,
x + 30, x + 30,
y + (barHeight / 2) + 4.5); y + (barHeight / 2) + 4.5);
@ -189,24 +199,27 @@ export class BarChart {
} }
graphAreaHeight = graphAreaHeight - (barHeight - (border / 2)); graphAreaHeight = graphAreaHeight - (barHeight - (border / 2));
}//for-loop }//end for-loop
if (this.startPointY) { if (this.startPointY) {
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(20, this.startPointY); ctx.moveTo(20, this.startPointY);
ctx.lineTo(20, this.startPointY - maxBarHeight); ctx.lineTo(20, this.startPointY - maxBarHeight);
var startPoint = this.startPointY;
var iwas = [-5500, -5000, -4500, -4000, -3500, -3000, -2500, -2000, -1500, -1000, -500, 0, 500];
iwas.forEach(function (item) {
var dist = (maxBarHeight / 6000) * 500;
let startPoint = this.startPointY;
let stepSize = this.totalHeight/arr.length;
let item = this.minValue;
do {
let dist = (maxBarHeight / this.totalHeight) * stepSize;
ctx.moveTo(20, startPoint); ctx.moveTo(20, startPoint);
ctx.lineTo(40, startPoint); ctx.lineTo(40, startPoint);
ctx.font = "10px Arial"; ctx.font = "10px Arial";
ctx.strokeText(item, 55, startPoint + 2.5); ctx.strokeText(Math.round(item), 55, startPoint + 2.5);
startPoint = startPoint - dist; startPoint = startPoint - dist;
item += stepSize;
// console.log(item);
} while (item < this.maxValue + 1);
});
//ctx.lineTo(70, 100); //ctx.lineTo(70, 100);
ctx.stroke(); ctx.stroke();
} }
@ -219,12 +232,12 @@ export class BarChart {
let _lableHeaderColumn = dom.createDom("th", {}, _headerRow); let _lableHeaderColumn = dom.createDom("th", {}, _headerRow);
let _minHeaderColumn = dom.createDom("th", {}, _headerRow); let _minHeaderColumn = dom.createDom("th", {}, _headerRow);
dom.createDom("div", { dom.createDom("div", {
innerHTML: "UNTERKANTE <br /> (m Seehöhe)", innerHTML: "bottom <br /> (m)",
style: "width:75px;" style: "width:75px;"
}, _minHeaderColumn); }, _minHeaderColumn);
let _maxHeaderColumn = dom.createDom("th", {}, _headerRow); let _maxHeaderColumn = dom.createDom("th", {}, _headerRow);
dom.createDom("div", { dom.createDom("div", {
innerHTML: "OBERKANTE <br /> (m Seehöhe)", innerHTML: "top <br /> (m)",
style: "width:75px;" style: "width:75px;"
}, _maxHeaderColumn); }, _maxHeaderColumn);

20
src/js/core/BaseEditor.js
View File

@ -116,7 +116,7 @@ export class BaseEditor {
} }
handleQueryResults() { handleQueryResults() {
let results = arguments; let results = arguments;
let features = results[0].features; let features = results[0].features;
let aufschlag = results[0].aufschlag; let aufschlag = results[0].aufschlag;
// set the borhole marker // set the borhole marker
@ -148,14 +148,16 @@ export class BaseEditor {
let realHeight = point.z - previousPoint.z; let realHeight = point.z - previousPoint.z;
//var dist = parseInt((300 / 6000) * realHeight); //var dist = parseInt((300 / 6000) * realHeight);
data.push({ if (Math.round(realHeight) > 0) {
dist: realHeight,//dist, data.push({
max: point.z, dist: realHeight,//dist,
min: previousPoint.z, max: point.z,
color: layer.color, min: previousPoint.z,
name: layer.name color: layer.color,
}); name: layer.name
//app.barChart.addBar(dist, layer.materialParameter[0].color, layer.name); });
//app.barChart.addBar(dist, layer.materialParameter[0].color, layer.name);
}
} }
} }

8
src/js/tasks/BoreholeIdentify.js
View File

@ -75,7 +75,7 @@ export class BoreholeIdentify {
//raycaster.set(vector, direction); //raycaster.set(vector, direction);
//raycaster.setFromCamera(mouse, this.camera); //raycaster.setFromCamera(mouse, this.camera);
let visibleMehses = this._getQueryableObjects();//nur die sichtbar sind let visibleMehses = this._getvisibleQueryableObjects();//nur die sichtbar sind
let allMeshes = this._getQueryableObjects2();//alle let allMeshes = this._getQueryableObjects2();//alle
let intersects = []; let intersects = [];
let intersects1 = raycaster.intersectObjects(visibleMehses, true); let intersects1 = raycaster.intersectObjects(visibleMehses, true);
@ -167,11 +167,11 @@ export class BoreholeIdentify {
return clone; return clone;
} }
_getQueryableObjects() { _getvisibleQueryableObjects() {
let _queryableObjects = []; let _queryableObjects = [];
// this.layers.forEach(function (layer) { // this.layers.forEach(function (layer) {
Object.values(this.layers).forEach(layer => { Object.values(this.layers).forEach(layer => {
if (layer.visible && layer.queryableObjects.length && layer.name !== "DEM_EGDI") { if (layer.visible && layer.queryableObjects.length && layer.name !== "Topography") {
_queryableObjects = _queryableObjects.concat(layer.queryableObjects); _queryableObjects = _queryableObjects.concat(layer.queryableObjects);
} }
}); });
@ -183,7 +183,7 @@ export class BoreholeIdentify {
// this.layers.forEach(function (layer) { // this.layers.forEach(function (layer) {
Object.values(this.layers).forEach(layer => { Object.values(this.layers).forEach(layer => {
//if (layer.visible && layer.queryableObjects.length) { //if (layer.visible && layer.queryableObjects.length) {
if (layer.queryableObjects.length && layer.name !== "DEM_EGDI") { if (layer.queryableObjects.length && layer.name !== "Topography") {
_queryableObjects = _queryableObjects.concat(layer.queryableObjects); _queryableObjects = _queryableObjects.concat(layer.queryableObjects);
} }
}); });