#252 Set the map cursor though a property in threebox

jscastro76 · May 26, 2021 · 27c3a7f · 27c3a7f
1 parent 62b4516
commit 27c3a7f
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,12 +5,13 @@ Minor version by [@jscastro76](https://github.com/jscastro76), some enhancements
 #### :sparkles: Enhancements
 - #245 Add an option to load a model without cloning 
 - #250 We need an explicit hidden property that overrides visibility 
+- #252 Set the cursor through a property in threebox
 
 #### :beetle: Bug fixes
 - #249 When style is changed, objects with fixedZoom don't rescale until map is moved. 
 
 #### :pencil: Documentation
-- Updated [Threebox documentation](/docs/Threebox.md) (`tb.loadObj` params `clone`)
+- Updated [Threebox documentation](/docs/Threebox.md) (`tb.loadObj` params `clone`, `tb.defaultCursor`)
 
 - - - 
 

diff --git a/dist/threebox.js b/dist/threebox.js
@@ -363,6 +363,7 @@ Threebox.prototype = {
 		this.rotationStep = 5;// degrees step size for rotation
 		this.gridStep = 6;// decimals to adjust the lnglat grid step, 6 = 11.1cm
 		this.altitudeStep = 0.1; // 1px = 0.1m = 10cm
+		this.defaultCursor = 'default';
 
 		this.lights = this.initLights;
 		if (this.options.defaultLights) this.defaultLights();
@@ -401,6 +402,7 @@ Threebox.prototype = {
 
 		//[jscastro] new event map on load
 		this.map.on('load', function () {
+			this.getCanvasContainer().style.cursor = this.tb.defaultCursor;
 
 			//[jscastro] new fields to manage events on map
 			this.selectedObject; //selected object through click
@@ -411,7 +413,7 @@ Threebox.prototype = {
 			this.overedFeature; //overed state for extrusion layer features
 
 			let canvas = this.getCanvasContainer();
-			this.getCanvasContainer().style.cursor = 'default';
+			this.getCanvasContainer().style.cursor = this.tb.defaultCursor;
 			// Variable to hold the starting xy coordinates
 			// when 'mousedown' occured.
 			let start;
@@ -593,7 +595,7 @@ Threebox.prototype = {
 				// Capture the ongoing xy coordinates
 				let current = mousePos(e);
 
-				this.getCanvasContainer().style.cursor = 'default';
+				this.getCanvasContainer().style.cursor = this.tb.defaultCursor;
 				//check if being rotated
 				if (e.originalEvent.altKey && this.draggedObject) {
 
@@ -734,7 +736,7 @@ Threebox.prototype = {
 			this.onMouseUp = function (e) {
 
 				// Set a UI indicator for dragging.
-				this.getCanvasContainer().style.cursor = 'default';
+				this.getCanvasContainer().style.cursor = this.tb.defaultCursor;
 
 				// Remove these events now that finish has been called.
 				//map.off('mousemove', onMouseMove);
@@ -754,7 +756,7 @@ Threebox.prototype = {
 				if (this.overedFeature) {
 					let features = this.queryRenderedFeatures(e.point);
 					if (features.length > 0 && this.overedFeature.id != features[0].id) {
-						this.getCanvasContainer().style.cursor = 'default';
+						this.getCanvasContainer().style.cursor = this.tb.defaultCursor;
 						//only unover when new feature is another
 						this.outFeature(features[0]);
 					}

diff --git a/dist/threebox.min.js b/dist/threebox.min.js
diff --git a/docs/Threebox.md b/docs/Threebox.md
@@ -831,6 +831,16 @@ This get/set property receives and returns the size in meters of the step to use
 
 <br>
 
+
+#### defaultCursor
+
+```js
+tb.defaultCursor : string
+```
+This get/set property receives and returns the value of the default cursor for the map canvas container `this.getCanvasContainer().style.cursor`, initally set to `'default'`.
+
+<br>
+
 #### enableDraggingObjects
 
 ```js

diff --git a/src/Threebox.js b/src/Threebox.js
@@ -93,6 +93,7 @@ Threebox.prototype = {
 		this.rotationStep = 5;// degrees step size for rotation
 		this.gridStep = 6;// decimals to adjust the lnglat grid step, 6 = 11.1cm
 		this.altitudeStep = 0.1; // 1px = 0.1m = 10cm
+		this.defaultCursor = 'default';
 
 		this.lights = this.initLights;
 		if (this.options.defaultLights) this.defaultLights();
@@ -131,6 +132,7 @@ Threebox.prototype = {
 
 		//[jscastro] new event map on load
 		this.map.on('load', function () {
+			this.getCanvasContainer().style.cursor = this.tb.defaultCursor;
 
 			//[jscastro] new fields to manage events on map
 			this.selectedObject; //selected object through click
@@ -141,7 +143,7 @@ Threebox.prototype = {
 			this.overedFeature; //overed state for extrusion layer features
 
 			let canvas = this.getCanvasContainer();
-			this.getCanvasContainer().style.cursor = 'default';
+			this.getCanvasContainer().style.cursor = this.tb.defaultCursor;
 			// Variable to hold the starting xy coordinates
 			// when 'mousedown' occured.
 			let start;
@@ -323,7 +325,7 @@ Threebox.prototype = {
 				// Capture the ongoing xy coordinates
 				let current = mousePos(e);
 
-				this.getCanvasContainer().style.cursor = 'default';
+				this.getCanvasContainer().style.cursor = this.tb.defaultCursor;
 				//check if being rotated
 				if (e.originalEvent.altKey && this.draggedObject) {
 
@@ -464,7 +466,7 @@ Threebox.prototype = {
 			this.onMouseUp = function (e) {
 
 				// Set a UI indicator for dragging.
-				this.getCanvasContainer().style.cursor = 'default';
+				this.getCanvasContainer().style.cursor = this.tb.defaultCursor;
 
 				// Remove these events now that finish has been called.
 				//map.off('mousemove', onMouseMove);
@@ -484,7 +486,7 @@ Threebox.prototype = {
 				if (this.overedFeature) {
 					let features = this.queryRenderedFeatures(e.point);
 					if (features.length > 0 && this.overedFeature.id != features[0].id) {
-						this.getCanvasContainer().style.cursor = 'default';
+						this.getCanvasContainer().style.cursor = this.tb.defaultCursor;
 						//only unover when new feature is another
 						this.outFeature(features[0]);
 					}

diff --git a/tests/threebox-tests-bundle.js b/tests/threebox-tests-bundle.js
@@ -11920,6 +11920,7 @@ Threebox.prototype = {
 		this.rotationStep = 5;// degrees step size for rotation
 		this.gridStep = 6;// decimals to adjust the lnglat grid step, 6 = 11.1cm
 		this.altitudeStep = 0.1; // 1px = 0.1m = 10cm
+		this.defaultCursor = 'default';
 
 		this.lights = this.initLights;
 		if (this.options.defaultLights) this.defaultLights();
@@ -11958,6 +11959,7 @@ Threebox.prototype = {
 
 		//[jscastro] new event map on load
 		this.map.on('load', function () {
+			this.getCanvasContainer().style.cursor = this.tb.defaultCursor;
 
 			//[jscastro] new fields to manage events on map
 			this.selectedObject; //selected object through click
@@ -11968,7 +11970,7 @@ Threebox.prototype = {
 			this.overedFeature; //overed state for extrusion layer features
 
 			let canvas = this.getCanvasContainer();
-			this.getCanvasContainer().style.cursor = 'default';
+			this.getCanvasContainer().style.cursor = this.tb.defaultCursor;
 			// Variable to hold the starting xy coordinates
 			// when 'mousedown' occured.
 			let start;
@@ -12150,7 +12152,7 @@ Threebox.prototype = {
 				// Capture the ongoing xy coordinates
 				let current = mousePos(e);
 
-				this.getCanvasContainer().style.cursor = 'default';
+				this.getCanvasContainer().style.cursor = this.tb.defaultCursor;
 				//check if being rotated
 				if (e.originalEvent.altKey && this.draggedObject) {
 
@@ -12291,7 +12293,7 @@ Threebox.prototype = {
 			this.onMouseUp = function (e) {
 
 				// Set a UI indicator for dragging.
-				this.getCanvasContainer().style.cursor = 'default';
+				this.getCanvasContainer().style.cursor = this.tb.defaultCursor;
 
 				// Remove these events now that finish has been called.
 				//map.off('mousemove', onMouseMove);
@@ -12311,7 +12313,7 @@ Threebox.prototype = {
 				if (this.overedFeature) {
 					let features = this.queryRenderedFeatures(e.point);
 					if (features.length > 0 && this.overedFeature.id != features[0].id) {
-						this.getCanvasContainer().style.cursor = 'default';
+						this.getCanvasContainer().style.cursor = this.tb.defaultCursor;
 						//only unover when new feature is another
 						this.outFeature(features[0]);
 					}