Merge pull request #109 from DavidLevinsky/master

New functions in measure tool
melowntech · Jul 20, 2018 · cfda500 · cfda500
2 parents 20e501c + 0fb3f29
commit cfda500
Show file tree

Hide file tree

Showing 25 changed files with 369 additions and 100 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vts-browser-js",
-  "version": "2.15.10",
+  "version": "2.15.16",
   "description": "JavaScript WebGL 3D maps rendering engine",
   "main": "src/browser/index.js",
   "scripts": {

diff --git a/src/browser/browser.css b/src/browser/browser.css
@@ -478,19 +478,23 @@
 
 .vts-measure-text-holder {
     position: absolute;
-    bottom: 0px;
+    bottom: -2px;
     left: 35px;
     opacity: 0.95;
     border-radius: 5px;
     border: 2px solid rgba(255, 255, 255, 0.47);
 }
 
-.vts-measure-text {
+.vts-measure-text-holder2 {
     padding: 2px;
     border-radius: 2px;
     background-color: #fff;
 }
 
+.vts-measure-text {
+    padding: 0px;
+}
+
 .vts-measure-text textarea {
     border: solid 1px #ddd;
     resize: none;
@@ -508,8 +512,29 @@
     background-color: rgba(255, 229, 42, 1);
     border: solid 1px #000;
     white-space: nowrap;
+    padding: 1px 3px;
+}
+
+.vts-measure-tools {
+    font-family: Verdana, Tahoma, Geneva, Arial, Sans-serif;
+    font-size: 12px;
+    margin-top: 2px;
+    /*background-color: rgba(255, 255, 255, 0.9);*/
+}
+
+.vts-measure-tools-button {
+    border-radius: 2px;
+    border: 1px solid rgba(0, 0, 0, 0.7);
+    display: inline-block;
+    padding: 0px 5px;
+    background-color: #fff;
+    cursor: pointer;
 }
 
+.vts-measure-tools-button:hover {
+    color: rgba(0, 102, 255, 1);
+    border: 1px solid rgba(0, 102, 255, 1);
+}
 
 /*
  * FULLSCREEN

diff --git a/src/browser/ui/control/compass.js b/src/browser/ui/control/compass.js
@@ -4,7 +4,7 @@ import Dom_ from '../../utility/dom';
 //get rid of compiler mess
 var dom = Dom_;
 
-var UIControlCompass = function(ui, visible) {
+var UIControlCompass = function(ui, visible, visibleLock) {
     this.ui = ui;
     this.browser = ui.browser;
     this.control = this.ui.addControl('compass',
@@ -22,7 +22,7 @@ var UIControlCompass = function(ui, visible) {
             + '<img id="vts-compass-compass3" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAABjCAYAAACPO76VAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABG9JREFUeNrtnM9LFGEcxkeEPCQVmbkh7EXoEgW6noIQzQwKoQ5Lkgh7SA8iddlCQfAQFApdghAxooJCsEMe9JAEek8i81YQCIEYQvgHZM9L37Fpmpl9Z3d+rs8DDw7unuaz3+ddX+d9DIOiKIqiKIqiKIqiKIqiKIqiKIqiKMpTQ0NDyqNwTq7/MRUNAKsfwL2EER+MLHxBru/BA4QR3zR0wY/lWmmEMKKHcVh+tsEv5PoGPE4Y0cP4LD9b4AW57oC/whvwB3gZfgN3886FG1EmjAZ41WEa6uAm+DTcyLsXPAz11fWkDUYtvAVPwHfgAnwdbmVMhQtjDj4jN3gNPiTXF+E8fAsuwvfhQScIuVwuMusK762H69IGYwY+LwDew+3wcZkOQ2fhThoMvK8TnkrjZEzCV+RGF2XhXoE/wuvwJ7jGK5aSAkOm4Qm8DTemEcYYfNNtCnTWiCTAkGn4Bu/B+bSuGcPwF3gJfg1Pww/l661uLMQGwzINe+L5tH+1PSpbIOdkG0TtRWWSDsM2Dco/UhlPQSpqGA7TsJfqeEorDLjHNg3pj6cUwjgCzzpAYDxFDENNw6YLCOU+Uggfhtc0mH5LAuHDKDUNyjtwhgTCg6EzDab7effDg6EzDYynkGH4mQbGU4gw/EwD4ykkGMfgZz4hMJ5CgHEV/l4GCMZTgDDUNDwvAwLjKeD1odxp2I8nP/92JQx3P6oAwn48EUYw64N5U3+VG09+H0ggDOc1woymn/Bl2WH1A2KhnKdDCON/WxfrgvzurA8gCmAzYVQOwxpPi7bXdIEUyn1uijDc46nZ4T2lgCxW8hAbYfz1U69PtwYQN4AE4BNGT6lPtwaQQqWPdxLGn93XzVKfbgff1QVI6cOY1Ywnt+2RkgApPRh+48m+PaJA9Ab1FPpBhuEnnpw2Cxd1I40qDUM3npymoRDG+YyDCsMaT0thTANh6MGwxtMunA1jGghDD4Y1ngY1pkH9T+JUFMfIDhoMazy9g2s8pmHHug1OGMHCcIunBvilwzRkoj5geZBgOMXTNXgrjGkgDHcYl2zxdAJ+FeY0EIYziHrLQRUVT7ejmAbCcIZhPbq1G9U06MIo97RuGkF0ejy50Z9LwDlwuekZOSB6QQ6MZuUAaVXGU+TT4BNGixydnpaj1EtytHq4GuPJPEPXF/HBSkcYOmUCUjowVo3xNK8OM8YBwgNGjdRqrEvNxorUbhTldVXHMVlN8aSmIR8XBDsMjymolSKadimmMaSoZqZa4mnePNqbMBiDUr1UlCqmvFQzGVLVtCbXqsJpLu3xtG1vHYgThMMUtEopWUFKyiaktKzWVmamys1G0xxPU04H3RMAo1Fq+Zqkps8OaFVq/aww0vt3hleDWQJgdEth5bIUWG5IoWWHvL5gNgJZYVABy2PRHpfKV0MqYNts1bC8eRHCGJEyZEPKkbvYwRsfjAGpCTdkGyRLAPHB6JUCfU5DAmDkpJ+XN4miKIqiKIqiKIqiKIqiKIqiKIpKpn4DKrVAiBFUfdUAAAAASUVORK5CYII=">'
         + '</div>'
 
-      + ' </div>', visible);
+      + ' </div>', visible, visibleLock);
 
     var compass = this.control.getElement('vts-compass');
     compass.setDraggableState(true);

diff --git a/src/browser/ui/control/credits.js b/src/browser/ui/control/credits.js
@@ -1,11 +1,11 @@
 
-var UIControlCredits = function(ui, visible) {
+var UIControlCredits = function(ui, visible, visibleLock) {
     this.ui = ui;
     this.browser = ui.browser;
     this.control = this.ui.addControl('credits',
       '<div id="vts-credits"'
       + ' class="vts-credits">'
-      + ' </div>', visible);
+      + ' </div>', visible, visibleLock);
 
     this.lastHTML = '';
     this.lastHTML2 = '';

diff --git a/src/browser/ui/control/fallback.js b/src/browser/ui/control/fallback.js
@@ -1,6 +1,6 @@
 
 
-var UIControlFallback = function(ui, visible) {
+var UIControlFallback = function(ui, visible, visibleLock) {
     this.ui = ui;
     this.control = this.ui.addControl('fallback',
       '<div class="vts-fallback">'
@@ -9,7 +9,7 @@ var UIControlFallback = function(ui, visible) {
             + '<p>VTS Browser needs <a href="http://get.webgl.org/">WebGL</a> capable web browser.</p>'
         + '</div>'
 
-      + ' </div>', visible);
+      + ' </div>', visible, visibleLock);
 };
 
 

diff --git a/src/browser/ui/control/fullscreen.js b/src/browser/ui/control/fullscreen.js
@@ -5,11 +5,11 @@ import Dom_ from '../../utility/dom';
 var dom = Dom_;
 
 
-var UIControlFullscreen = function(ui, visible) {
+var UIControlFullscreen = function(ui, visible, visibleLock) {
     this.ui = ui;
     this.control = this.ui.addControl('fullscreen',
       '<img id="vts-fullscreen" class="vts-fullscreen" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAwUlEQVRo3u2YwRWDIBBEIc+SLMKmckpTFkFPePKQQ57DsitR/z/D6KgMDikBAMCTycKYxai9Bul8MYkic+NFS7BOs4FUa/1IrzTn9xk6O6+rrwEMjGayTlS/UXWeujbcDKgpEZRObgYOc1oYt7CIMXCFFLKmTrS+aqAEP8iSAGBYI1s776FLv7eReaWHWd/cyLz3Bas+vxIYGNXIhBTxOhcKNdCaHvPfGPjVYb3OhVjEGLhrI/Pewc9uZDQvAABwZQMKFi+DmFdLbgAAAABJRU5ErkJggg==">'
-      , visible);
+      , visible, visibleLock);
 
     var img = this.control.getElement('vts-fullscreen');
     img.on('click', this.onClick.bind(this));

diff --git a/src/browser/ui/control/github.js b/src/browser/ui/control/github.js
@@ -1,11 +1,11 @@
 
-var UIControlGithub = function(ui, visible) {
+var UIControlGithub = function(ui, visible, visibleLock) {
     this.ui = ui;
     this.control = this.ui.addControl("github",
       '<a target="_blank" href="https://github.com/Melown/vts-browser-js">'
       + '<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png">'
       + '</a>'
-      , visible);
+      , visible, visibleLock);
 };
 
 

diff --git a/src/browser/ui/control/holder.js b/src/browser/ui/control/holder.js
@@ -5,7 +5,7 @@ import UIElement_ from '../element/element';
 var UIElement = UIElement_;
 
 
-var UIControlHolder = function(ui, html, visible, parentElement) {
+var UIControlHolder = function(ui, html, visible, visibleLock, parentElement) {
     this.ui = ui;
     this.html = html;
     this.elementsById = [];
@@ -15,6 +15,9 @@ var UIControlHolder = function(ui, html, visible, parentElement) {
     this.element = document.createElement('div');
     this.setVisible(this.visible);
 
+    this.visibleLock = visibleLock ? true : false;
+    this.setVisibleLock(this.visibleLock);
+
     //set element content
     this.setHtml(html);
 
@@ -50,6 +53,10 @@ UIControlHolder.prototype.getElement = function(id) {
 
 
 UIControlHolder.prototype.setVisible = function(state) {
+    if (this.visibleLock) {
+        return;
+    }
+
     this.element.style.display = state ? 'block' : 'none';
     this.visible = state;
 };
@@ -59,6 +66,14 @@ UIControlHolder.prototype.getVisible = function() {
     return this.visible;
 };
 
+UIControlHolder.prototype.setVisibleLock = function(state) {
+    this.visibleLock = state;
+};
+
+
+UIControlHolder.prototype.getVisibleLock = function() {
+    return this.visibleLock;
+};
 
 export default UIControlHolder;
 

diff --git a/src/browser/ui/control/layers.js b/src/browser/ui/control/layers.js
@@ -1,9 +1,9 @@
 
-var UIControlLayers = function(ui, visible) {
+var UIControlLayers = function(ui, visible, visibleLock) {
     this.ui = ui;
     this.control = this.ui.addControl('layers',
       '<div class="vts-layers"'
-      + '</div>', visible);
+      + '</div>', visible, visibleLock);
 };
 
 

diff --git a/src/browser/ui/control/link.js b/src/browser/ui/control/link.js
@@ -5,7 +5,7 @@ import Dom_ from '../../utility/dom';
 var dom = Dom_;
 
 
-var UIControlLink = function(ui, visible) {
+var UIControlLink = function(ui, visible, visibleLock) {
     this.ui = ui;
     this.browser = ui.browser;
     this.control = this.ui.addControl('link',
@@ -21,7 +21,7 @@ var UIControlLink = function(ui, visible) {
             + '</div>'
         + '</div>'
 
-     + ' </div>', visible);
+     + ' </div>', visible, visibleLock);
 
     this.div = this.control.getElement('vts-link');
 

diff --git a/src/browser/ui/control/loading.js b/src/browser/ui/control/loading.js
@@ -65,16 +65,16 @@ UIControlLoading.prototype.hide = function() {
             //search = (map.getSrsInfo(map.getReferenceFrame()["physical"]) == "melown2015");
         }
     } 
-    
-    this.ui.setControlVisible('compass', this.ui.config.controlCompass);
-    this.ui.setControlVisible('zoom', this.ui.config.controlZoom);
-    this.ui.setControlVisible('space', this.ui.config.controlSpace);
-    this.ui.setControlVisible('search', search);
-    this.ui.setControlVisible('link', this.ui.config.controlLink);
-    this.ui.setControlVisible('github', this.ui.config.controlGithub);
-    this.ui.setControlVisible('measure', this.ui.config.controlMeasure);
-    this.ui.setControlVisible('fullscreen', this.ui.config.controlFullscreen);
-    this.ui.setControlVisible('credits', this.ui.config.controlCredits);
+
+    this.ui.setControlVisible('compass', this.ui.config.controlCompass, false);
+    this.ui.setControlVisible('zoom', this.ui.config.controlZoom, false);
+    this.ui.setControlVisible('space', this.ui.config.controlSpace, false);
+    this.ui.setControlVisible('search', search, false);
+    this.ui.setControlVisible('link', this.ui.config.controlLink, false);
+    this.ui.setControlVisible('github', this.ui.config.controlGithub, false);
+    this.ui.setControlVisible('measure', this.ui.config.controlMeasure, false);
+    this.ui.setControlVisible('fullscreen', this.ui.config.controlFullscreen, false);
+    this.ui.setControlVisible('credits', this.ui.config.controlCredits, false);
     this.ui.setControlVisible('loading', false);
 };
 

diff --git a/src/browser/ui/control/logo.js b/src/browser/ui/control/logo.js
@@ -1,11 +1,11 @@
 
-var UIControlLogo = function(ui, visible) {
+var UIControlLogo = function(ui, visible, visibleLock) {
     this.ui = ui;
     this.control = this.ui.addControl("logo",
       '<a class="vts-logo"'
       + ' href="https://melown.com">'
       + 'Powered by MELOWN'
-      + '</a>', visible);
+      + '</a>', visible, visibleLock);
 };
 
 

diff --git a/src/browser/ui/control/map.js b/src/browser/ui/control/map.js
@@ -1,11 +1,11 @@
 
-var UIControlMap = function(ui, visible) {
+var UIControlMap = function(ui, visible, visibleLock) {
     this.ui = ui;
     this.browser = ui.browser;
     this.control = this.ui.addControl('map',
       '<div id="vts-map"'
       + ' class="vts-map">'
-      + ' </div>', visible);
+      + ' </div>', visible, visibleLock);
 
     var map = this.getMapElement();
     map.setDraggableState(true);