#356 Adding enableHelpTooltips to hide by default the tooltips shown …

…when dragging, rotating and measuring

ThreeboxSolution.njsproj

@@ -159,6 +159,7 @@
     <Content Include="LICENSE.txt" />
     <Content Include="package.json" />
     <Content Include="README.md" />
+    <Content Include="server.stop.js" />
     <Content Include="src\objects\effects\BuildingShadows.js">
       <SubType>Code</SubType>
     </Content>

dist/threebox.js

@@ -378,6 +378,7 @@ Threebox.prototype = {
 		this.enableRotatingObjects = this.options.enableRotatingObjects || false;
 		this.enableTooltips = this.options.enableTooltips || false;
 		this.multiLayer = this.options.multiLayer || false;
+		this.enableHelpTooltips = this.options.enableHelpTooltips || false;
 
 		this.map.on('style.load', function () {
 			this.tb.zoomLayers = [];
@@ -610,7 +611,7 @@ Threebox.prototype = {
 					let rotation = { x: 0, y: 0, z: (Math.round(rotationDiff[2] + (~~((current.x - start.x) / this.tb.rotationStep) % 360 * this.tb.rotationStep) % 360)) };
 					//now rotate the model depending the axis
 					this.draggedObject.setRotation(rotation);
-					this.draggedObject.addHelp("rot: " + rotation.z + "°");
+					if (map.tb.enableHelpTooltips) this.draggedObject.addHelp("rot: " + rotation.z + "°");
 					//this.draggedObject.setRotationAxis(rotation);
 					return;
 				}
@@ -626,7 +627,7 @@ Threebox.prototype = {
 					let coords = e.lngLat;
 					let options = [Number((coords.lng + lngDiff).toFixed(this.tb.gridStep)), Number((coords.lat + latDiff).toFixed(this.tb.gridStep)), this.draggedObject.modelHeight];
 					this.draggedObject.setCoords(options);
-					this.draggedObject.addHelp("lng: " + options[0] + "°, lat: " + options[1] + "°");
+					if (map.tb.enableHelpTooltips) this.draggedObject.addHelp("lng: " + options[0] + "°, lat: " + options[1] + "°");
 					return;
 				}
 
@@ -640,7 +641,7 @@ Threebox.prototype = {
 					let now = (e.point.y * this.tb.altitudeStep);
 					let options = [this.draggedObject.coordinates[0], this.draggedObject.coordinates[1], Number((- now - altDiff).toFixed(this.tb.gridStep))];
 					this.draggedObject.setCoords(options);
-					this.draggedObject.addHelp("alt: " + options[2] + "m");
+					if (map.tb.enableHelpTooltips) this.draggedObject.addHelp("alt: " + options[2] + "m");
 					return;
 				}
 
@@ -789,7 +790,7 @@ Threebox.prototype = {
 							sf = dc(sf, 7);
 						}
 
-						obj.addHelp("size(m): " + dc((s.x / sf), 3) + " W, " + dc((s.y / sf), 3) + " L, " + dc((s.z / sf), 3) + " H");
+						if (map.tb.enableHelpTooltips) obj.addHelp("size(m): " + dc((s.x / sf), 3) + " W, " + dc((s.y / sf), 3) + " L, " + dc((s.z / sf), 3) + " H");
 						this.repaint = true;
 					}
 					else {
@@ -1458,6 +1459,7 @@ var defaultOptions = {
 	enableDraggingObjects: false,
 	enableRotatingObjects: false,
 	enableTooltips: false,
+	enableHelpTooltips: false,
 	multiLayer: false,
 	orthographic: false,
 	fov: ThreeboxConstants.FOV_DEGREES,

docs/Threebox.md

@@ -122,7 +122,8 @@ Sets up a Threebox scene using an [Mapbox map](https://docs.mapbox.com/mapbox-gl
 | `enableSelectingObjects`     | no       | false   | boolean  | Enables the Mouseover and Selection of 3D objects. This will fire the event [`SelectedChange`](#SelectedChange). This value will set the `options.bbx` value of the objects created.|
 | `enableDraggingObjects`     | no       | false   | boolean  | Enables to the option to Drag a 3D object. This will fire the event [`ObjectDragged`](#ObjectDragged) where `draggedAction = 'translate'` or `draggedAction = 'altitude'` |
 | `enableRotatingObjects`     | no       | false   | boolean  | Enables to the option to Drag a 3D object. This will fire the event [`ObjectDragged`](#ObjectDragged)  where `draggedAction = 'rotate'`|
-| `enableToltips`     | no       | false   | boolean  | Enables the default tooltips on fill-extrusion features and 3D Objects|
+| `enableTooltips`     | no       | false   | boolean  | Enables the default tooltips on fill-extrusion features and 3D Objects|
+| `enableHelpTooltips`     | no       | false   | boolean  | Enables the default help tooltips when an object is being moved, rotated or measured. |
 | `multiLayer`     | no       | false   | boolean  | Enables the option for multi layer pages where a default layer will be created internally that will manage the [`tb.update`](#update) calls  |
 | `orthographic`     | no       | false   | boolean  | Enables the option to set a [`THREE.OrthographicCamera`](https://threejs.org/docs/index.html#api/en/cameras/OrthographicCamera) instead of a `THREE.PerspectiveCamera` which is the default in Mapbox  |
 | `fov`     | no       | ThreeboxConstants.FOV_DEGREES | number | Enables to set the FOV of the default [`THREE.PerspectiveCamera`](https://threejs.org/docs/index.html#api/en/cameras/PerspectiveCamera). This value has no effect if `orthographic: true`  |

examples/03-tube.html

@@ -88,7 +88,8 @@
 							enableSelectingObjects: true, //change this to false to disable 3D objects selection
 							enableDraggingObjects: true, //change this to false to disable 3D objects drag & move once selected
 							enableRotatingObjects: true, //change this to false to disable 3D objects rotation once selected
-							enableTooltips: true // change this to false to disable default tooltips on fill-extrusion and 3D models
+							enableTooltips: true, // change this to false to disable default tooltips on fill-extrusion and 3D models
+							enableHelpTooltips: true // remove this to disable default help tooltips for draggin, rotating and measure
 						}
 					);
 

examples/README.md

@@ -21,6 +21,7 @@ These are the examples included in Threebox.
 - Enabled built-in dragging mode for 3D objects through `enableDraggingObjects`, 3D object is dragabble, once selected, using [Shift] key for translation and [Ctrl] for altitude.
 - Enabled built-in rotation mode for 3D objects through `enableRotatingObjects`, 3D objects is rotable on it's vertical axis, once selected, using [Alt] key.
 - Enabled built-in default Labels on altitude for the 3D object through `enableTooltips`.<br/>
+- Enabled built-in default help Labels when dragged, rotated or measured.  
 - Updated to Mapbox 2.2.0
 - - - -
 

package.json

@@ -18,7 +18,8 @@
         "dev": "watchify exports.js --verbose -o dist/threebox.js ",
         "all": "browserify -p tinyify exports.js > dist/threebox.min.js && watchify exports.js --verbose -o dist/threebox.js ",
         "test": "browserify tests/threebox-tests.js > tests/threebox-tests-bundle.js",
-        "start": "node server.js"
+        "start": "node server.js",
+        "stop": "node server.stop.js"
     },
     "directories": {
         "doc": "docs",

server.stop.js

@@ -0,0 +1,13 @@
+'use strict';
+var port = 8080 || process.env.PORT || 1337;
+
+const io = require('socket.io-client');
+const socketClient = io.connect('http://localhost' + port); // Specify port if your express server is not using default port 80
+
+socketClient.on('connect', () => {
+    socketClient.emit('npmStop');
+    setTimeout(() => {
+        process.exit(0);
+    }, 1000);
+});
+

src/Threebox.js

@@ -108,6 +108,7 @@ Threebox.prototype = {
 		this.enableRotatingObjects = this.options.enableRotatingObjects || false;
 		this.enableTooltips = this.options.enableTooltips || false;
 		this.multiLayer = this.options.multiLayer || false;
+		this.enableHelpTooltips = this.options.enableHelpTooltips || false;
 
 		this.map.on('style.load', function () {
 			this.tb.zoomLayers = [];
@@ -340,7 +341,7 @@ Threebox.prototype = {
 					let rotation = { x: 0, y: 0, z: (Math.round(rotationDiff[2] + (~~((current.x - start.x) / this.tb.rotationStep) % 360 * this.tb.rotationStep) % 360)) };
 					//now rotate the model depending the axis
 					this.draggedObject.setRotation(rotation);
-					this.draggedObject.addHelp("rot: " + rotation.z + "°");
+					if (map.tb.enableHelpTooltips) this.draggedObject.addHelp("rot: " + rotation.z + "°");
 					//this.draggedObject.setRotationAxis(rotation);
 					return;
 				}
@@ -356,7 +357,7 @@ Threebox.prototype = {
 					let coords = e.lngLat;
 					let options = [Number((coords.lng + lngDiff).toFixed(this.tb.gridStep)), Number((coords.lat + latDiff).toFixed(this.tb.gridStep)), this.draggedObject.modelHeight];
 					this.draggedObject.setCoords(options);
-					this.draggedObject.addHelp("lng: " + options[0] + "°, lat: " + options[1] + "°");
+					if (map.tb.enableHelpTooltips) this.draggedObject.addHelp("lng: " + options[0] + "°, lat: " + options[1] + "°");
 					return;
 				}
 
@@ -370,7 +371,7 @@ Threebox.prototype = {
 					let now = (e.point.y * this.tb.altitudeStep);
 					let options = [this.draggedObject.coordinates[0], this.draggedObject.coordinates[1], Number((- now - altDiff).toFixed(this.tb.gridStep))];
 					this.draggedObject.setCoords(options);
-					this.draggedObject.addHelp("alt: " + options[2] + "m");
+					if (map.tb.enableHelpTooltips) this.draggedObject.addHelp("alt: " + options[2] + "m");
 					return;
 				}
 
@@ -519,7 +520,7 @@ Threebox.prototype = {
 							sf = dc(sf, 7);
 						}
 
-						obj.addHelp("size(m): " + dc((s.x / sf), 3) + " W, " + dc((s.y / sf), 3) + " L, " + dc((s.z / sf), 3) + " H");
+						if (map.tb.enableHelpTooltips) obj.addHelp("size(m): " + dc((s.x / sf), 3) + " W, " + dc((s.y / sf), 3) + " L, " + dc((s.z / sf), 3) + " H");
 						this.repaint = true;
 					}
 					else {
@@ -1188,6 +1189,7 @@ var defaultOptions = {
 	enableDraggingObjects: false,
 	enableRotatingObjects: false,
 	enableTooltips: false,
+	enableHelpTooltips: false,
 	multiLayer: false,
 	orthographic: false,
 	fov: ThreeboxConstants.FOV_DEGREES,

tests/threebox-tests-bundle.js

@@ -11935,6 +11935,7 @@ Threebox.prototype = {
 		this.enableRotatingObjects = this.options.enableRotatingObjects || false;
 		this.enableTooltips = this.options.enableTooltips || false;
 		this.multiLayer = this.options.multiLayer || false;
+		this.enableHelpTooltips = this.options.enableHelpTooltips || false;
 
 		this.map.on('style.load', function () {
 			this.tb.zoomLayers = [];
@@ -12167,7 +12168,7 @@ Threebox.prototype = {
 					let rotation = { x: 0, y: 0, z: (Math.round(rotationDiff[2] + (~~((current.x - start.x) / this.tb.rotationStep) % 360 * this.tb.rotationStep) % 360)) };
 					//now rotate the model depending the axis
 					this.draggedObject.setRotation(rotation);
-					this.draggedObject.addHelp("rot: " + rotation.z + "°");
+					if (this.enableHelpTooltips) this.draggedObject.addHelp("rot: " + rotation.z + "°");
 					//this.draggedObject.setRotationAxis(rotation);
 					return;
 				}
@@ -12183,7 +12184,7 @@ Threebox.prototype = {
 					let coords = e.lngLat;
 					let options = [Number((coords.lng + lngDiff).toFixed(this.tb.gridStep)), Number((coords.lat + latDiff).toFixed(this.tb.gridStep)), this.draggedObject.modelHeight];
 					this.draggedObject.setCoords(options);
-					this.draggedObject.addHelp("lng: " + options[0] + "°, lat: " + options[1] + "°");
+					if (this.enableHelpTooltips) this.draggedObject.addHelp("lng: " + options[0] + "°, lat: " + options[1] + "°");
 					return;
 				}
 
@@ -12197,7 +12198,7 @@ Threebox.prototype = {
 					let now = (e.point.y * this.tb.altitudeStep);
 					let options = [this.draggedObject.coordinates[0], this.draggedObject.coordinates[1], Number((- now - altDiff).toFixed(this.tb.gridStep))];
 					this.draggedObject.setCoords(options);
-					this.draggedObject.addHelp("alt: " + options[2] + "m");
+					if (this.enableHelpTooltips) this.draggedObject.addHelp("alt: " + options[2] + "m");
 					return;
 				}
 
@@ -12346,7 +12347,7 @@ Threebox.prototype = {
 							sf = dc(sf, 7);
 						}
 
-						obj.addHelp("size(m): " + dc((s.x / sf), 3) + " W, " + dc((s.y / sf), 3) + " L, " + dc((s.z / sf), 3) + " H");
+						if (this.enableHelpTooltips) obj.addHelp("size(m): " + dc((s.x / sf), 3) + " W, " + dc((s.y / sf), 3) + " L, " + dc((s.z / sf), 3) + " H");
 						this.repaint = true;
 					}
 					else {
@@ -13015,6 +13016,7 @@ var defaultOptions = {
 	enableDraggingObjects: false,
 	enableRotatingObjects: false,
 	enableTooltips: false,
+	enableHelpTooltips: false,
 	multiLayer: false,
 	orthographic: false,
 	fov: ThreeboxConstants.FOV_DEGREES,